Jump to content

2D Text in 3D world


Recommended Posts

I'd like to have a 2d text (text always facing the camera, so no need for 3d), which 2d position and scaling are affected by its position in the 3d world, and 3d objects in the 3d worlds can be rendered in front of it and hide it, depending on its position in the 3d world.

I feel like I've seen such an example somewhere, was it in Canvas2D maybe?

Link to comment
Share on other sites

I see, hasAlpha seems to solve it, the text quality doesn't look too good though, is there a way to improve it?


This specific Canvas2D example doesn't seem to be working for me for some reason, all I see is "Unbind Time" at bottom left and the rest just flickers for a split of a second then disappears.

You just caught me experimenting with another Canvas2D playground however, which seems to do exactly what I need, except for changing the scaling according to the position in the 3d world.


Here's a single instance I just finished isolating:



The problem with the Canvas2D solution is it is very soon throws an error (even in the official Canvas2D PG):


Uncaught TypeError: Cannot read property 'GetCachedFontTexture' of undefined
    at Text2D.get [as fontTexture] (babylon.canvas2d.js:10621)
    at Text2D.get [as textSize] (babylon.canvas2d.js:10597)
    at Text2D.get [as size] (babylon.canvas2d.js:10548)
    at Text2D.Prim2DBase._updatePositioning (babylon.canvas2d.js:5820)
    at Text2D.Prim2DBase.updateCachedStates (babylon.canvas2d.js:5749)
    at ScreenSpaceCanvas2D.Prim2DBase.updateCachedStatesOf (babylon.canvas2d.js:5633)
    at ScreenSpaceCanvas2D.Group2D._prepareGroupRender (babylon.canvas2d.js:8037)
    at ScreenSpaceCanvas2D.Canvas2D._updateCanvasState (babylon.canvas2d.js:13194)
    at ScreenSpaceCanvas2D.Canvas2D._render (babylon.canvas2d.js:13205)
    at e.callback (babylon.canvas2d.js:12161)

I see it has been discussed here:


Not sure if it's buggy just in the PG or if it's unstable regardless.


Link to comment
Share on other sites

Did you update the PG rencently with CTRL-F5, the PG you mentioned work for me.

The official doc is not up to date but I've just wrote an update on the Text2D prim, you can it here: https://github.com/nockawa/Documentation/blob/master/content/overviews/Canvas2D/Canvas2D_Text2D.md

You've got this PG: http://babylonjs-playground.com/#EPFQG#4 or this variation I just made using SDF for Text2D instead of  super sampel: http://babylonjs-playground.com/#EPFQG#20

And this PG demonstrating SDF (explained in the Text2D doc): http://babylonjs-playground.com/#143CL7#1

To render the text below a mesh you have this PG: http://babylonjs-playground.com/#RXVJD#2

Now I didn't understand if you need the scale to be always the same or if you want it to change if the trackedNode is getting further or closer, can you explain?


EDIT: you want the text to be hidden by a mesh what would be overlapping it because it's closer and in front of the text?

Link to comment
Share on other sites

I cleared the cache and restarted the browser (probably similar effect to CTRL-F5) and it works again.

I need the scale to change if the trackedNode is getting further or closer.

You can see here the behavior I'd like to imitate (more or less) using Canvas2D:


On 1/10/2017 at 7:22 PM, Nockawa said:

EDIT: you want the text to be hidden by a mesh what would be overlapping it because it's closer and in front of the text?

I want meshes to be rendered in front of it in case they're positioned in front of it (from the camera point of view naturally), and the opposite if the text is positioned in front of meshes.

Normal rendering of objects in a 3d space, nothing special.

I'd just like to apply a 3d depth to this 2D object, hopefully it makes sense.

The PG above demonstrates that behavior.

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