Text at the corner of the screen

[roman_44]

Hi. I think it should be very easy, but cannot find obvious solution.

I need to put small logo (small png picture) at the corner of the canvas. And I wanna use scene, not css or html, because it is kinda watermark.

I tried:  mesh.position.z = 10;  mesh.parent = camera;  but it is not working properly on screen resize.

Looks like bGUI only one way to achieve that?

After look at the example code I tried something like this:

var logoTexture = new BABYLON.Texture('testpicture.png', scene);
var gui = new bGUI.GUISystem(scene, engine.getRenderWidth(), engine.getRenderHeight());
var logo = new bGUI.GUIPanel('bgui', logoTexture, null, gui);
logo.relativePosition(new BABYLON.Vector3(0.5, 0.5, 0));

But this gives me nothing on the screen with no errors. Need your help... 

Thank you!

 

[Dad72]

You can create an orthographic camera for this:

var CameraLogo = new BABYLON.FreeCamera("CameraLogo ", BABYLON.Vector3.Zero(), scene);
CameraLogo.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
CameraLogo.setTarget(BABYLON.Vector3.Zero());
CameraLogo.layerMask = 0x90000000;
CameraLogo.orthoTop = 10;
CameraLogo.orthoBottom = -10;
CameraLogo.orthoLeft = -10;
CameraLogo.orthoRight = 10;
scene.activeCameras.push(CameraLogo);

var Logo  = BABYLON.Mesh.CreateBox("Logo ", 1, scene);		
Logo.position = new BABYLON.Vector3(9.2, 9.2, 0);
Logo.layerMask = 0x90000000;

Logo.material = your texture;

Do not forget to add your other camera with scene.activeCameras.push ()

In my example you have a cube in the right corner of the scene.

 

[roman_44]

Oh wow, thanks Dad.

I've got square on my screen, but it is scaled (it is rectangular), like here in the attachment is sphere, which looks like oval. I dont know why. And another thing is material is always black despite all my plays with material, deffuseColor or deffuseTexture. Since I'm not sure what is actually going on here, don't know what I can do to fix this...

Appreciate your help

[Dad72]

Could you add your example on the playground. it will be easier to help you.

Thank you

[Dad72]

I added an example on the playground for you: 

http://www.babylonjs-playground.com/#1KXQOF#0

[roman_44]

6 hours ago, Dad72 said:

I added an example on the playground for you: 

http://www.babylonjs-playground.com/#1KXQOF#0

Dad, thank for your help. Appreciate your time.

In your example if you change browser size(ratio), it will stretch the sphere. Which is not desired behavior.  

My sphere is black because I have specific lighting in my scene, so I need to create separate light for this sphere or box. But I don't want this light to affect my scene. 

It is so strange way to put just text or picture on canvas   Maybe bGUI would be easier way to do that kind of things? 

Anyway if we can avoid stretching, it would be a solution to my problem :))))

Thanks Dad one more time!

[Temechon]

bGUI would be easier to do this, but the resize is not working at the moment. I need to find some time to work on it...
Anyway, here is a way to do it with bGUI : http://www.babylonjs-playground.com/#PBDYF#0

Don't mind the image

[roman_44]

2 minutes ago, Temechon said:

bGUI would be easier to do this, but the resize is not working at the moment. I need to find some time to work on it...
Anyway, here is a way to do it with bGUI : http://www.babylonjs-playground.com/#PBDYF#0

Don't mind the image

Finally working example on playground with bGUI :))) Thanks Temechon!

Anyway I cannot use it, is still resizes image.  If you can make it working I will appreciate it. I need this watermark in scene. So let me now if you will do it. That would be super cool! Thanks. 

[Temechon]

bGUI doesn't resize images... And you can resize your logo the way you want : http://www.babylonjs-playground.com/#PBDYF#1 (line 46)

[roman_44]

22 hours ago, Temechon said:

bGUI doesn't resize images... And you can resize your logo the way you want : http://www.babylonjs-playground.com/#PBDYF#1 (line 46)

Problem is that I DO NOT NEED TO RESIZE my picture while resizing browser. Problem appears when you will try to resize browser window - it will scale the picture to the ratio of browser window.

[roman_44]

I've got hint from Deltakosh to use Layer for this - http://doc.babylonjs.com/classes/2.2/Layer

Here it is http://www.babylonjs-playground.com/#PBDYF#2  - line 50  So this put full image as a layer on top of whole scene which is fine.

But this is also change image ratio (stretches image) every time when you change browser size.

Refuse to believe that we don't have any way just to put image on top of screen without resizing it.... Should be something.

HELP!!!

[GameMonetize]

Crap this is right. The layer will adapt to the screen ratio obviously

I've just introduced new properties to allow you to control placement (so now just get your aspect ratio and change offset/scale accordingly):

http://www.babylonjs-playground.com/#PBDYF#4

 

[roman_44]

1 hour ago, Deltakosh said:

Crap this is right. The layer will adapt to the screen ratio obviously

I've just introduced new properties to allow you to control placement (so now just get your aspect ratio and change offset/scale accordingly):

http://www.babylonjs-playground.com/#PBDYF#4

 

Thanks. I did it. Finally....