Jump to content

Text at the corner of the screen


Recommended Posts

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!


Link to comment
Share on other sites

You can create an orthographic camera for this:

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

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.


Link to comment
Share on other sites

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

Screen Shot 2016-01-18 at 4.08.54 PM.png

Link to comment
Share on other sites

6 hours ago, Dad72 said:

I added an example on the playground for you: ;)


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!

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...