Jump to content

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:  http://www.cadstudio.cz/img/ext/ai-dim3d.gif  (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:  http://drivingdimensions.com/uploads/img/65_rectangle8.png


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?

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

Link to comment
Share on other sites

  • 1 year later...
  • 2 months later...
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.

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...