2D text on screen

[luka_friend]

Hi!

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?

[Wingnut]

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

http://playground.babylonjs.com/#HSVQL

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.

http://playground.babylonjs.com/#1MEDUS

outputplane.lookAt(camera.position);

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.

[luka_friend]

Thank you so much Wingnut (and Deltakosh of course)!

I was really concerned if this is even possible in babylon js!

 

Thank you again it really means a lot when my questions are quickly answered. 

[luka_friend]

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): 

 

[mwpowellhtx]

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.

[KevinBLT]

Has this problem been solved?

I also need dynamic texture with transparent background.

[GameMonetize]

Yep:)

[mwpowellhtx]

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.

[GameMonetize]

You can also check Canvas2D: http://doc.babylonjs.com/overviews/Canvas2D_Home

[KevinBLT]

Ah... this doc was exactly what I needed.

I love you all! And Babylon of course!