Sign in to follow this  

2D text on screen

Recommended Posts


I was wondering if in Babylon js exists rendering 2D text on screen? I would need this for my 3D model dimensions.

Here is an example URL:  (numbers for dimensions are what I want to achive).


I am familiar with DynamicTextures but in DynamicTextures I would require a 3D model so I could display my text. And in my model I would like to see text always perpendicular to the camera. 

Here is what I have in my mind URL:


If you look at first URL and second URL, you notice that text in second URL rotates so that it is always perpendicular to the camera.


To simplify my question I need to render 2D text and the text needs to be perpendicular to the camera (even If I would rotate the camera around the object it would still stay perpendicular).

Can anyone help me with this?

Share this post

Link to post
Share on other sites

Hi again, LF.  I recently needed to do that very thing myself...

outputplane.billboardMode = BABYLON.AbstractMesh.BILLBOARDMODE_ALL;

Deltakosh showed it to us... here.  (Thx DK!)  

There is one minor problem with this method.  Pan the camera to a location behind the scene.  While remaining there, move the camera to directly above... or directly below... the scene.  See the outputplane go upside-down?  I do.

There is another way, but not quite as efficient.


Notice that this method needs constant refreshing (put it inside the renderLoop or inside an animator function).

It also has the same "upside-down problem".  *scratch scratch*   Darned scene gremlins.  :/

Hope this helps.

Share this post

Link to post
Share on other sites

Is there a way to set color of the plane to transparency?

If i set hex value of plane to "#80FFFFFF" (should have 50% transparency) it just becomes black. How can I set not to have background color only BLACK text.


You can see the problem in the picture (white rectangle on which text is on is my problem): 



Share this post

Link to post
Share on other sites

I would like to render some text atop a created ground, per se. To simulate painted yard line numbers, this sort of thing. The orientation must stay the same, perpendicular with the Y axis, I think it is, when working with ground.

Share this post

Link to post
Share on other sites
2 hours ago, KevinBLT said:

Has this problem been solved?

I also need dynamic texture with transparent background.

I was able to use a plane and draw text. You can set the material on the plane, and draw text with another material. The tricky part for me was centering the text accordingly so that I could position it on a precise location. Otherwise you have to do all sorts of drawn text width calculations, which are notoriously difficult to accurately predict.

Share this post

Link to post
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.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.