2D Text in 3D world

[royibernthal]

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?

[aWeirdo]

@royibernthal 

 

 

[royibernthal]

@aWeirdo Seems to be in the right direction.

How do I make the plane transparent though? (without making the text transparent as well)

http://www.babylonjs-playground.com/#1WHJCE#0

I'd like to not have a background (the actual plane) behind the text, just a floating text with a transparent background.

[iiceman]

Your can use hasAlpha: http://www.babylonjs-playground.com/#1WHJCE#1

You could also use Canvas2D. Here is an example straight from the Canvas2D documentation (https://doc.babylonjs.com/tutorials/Using_the_Canvas2D#world-space-canvas): http://babylonjs-playground.com/#1BKDEO#22

[royibernthal]

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.

http://babylonjs-playground.com/#1N9RJY#5

Here's a single instance I just finished isolating:

http://babylonjs-playground.com/#1N9RJY#71

 

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

Quote

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:

http://www.html5gamedevs.com/topic/24230-text2d-canvas-i-cant-get-it-to-work/

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

@Nockawa

[Nockawa]

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?

[Nockawa]

Oh btw, on which PG you've got this stack trace?

CTRL-F5 your web browser because C2D was bugged on the trackedNode PG but now it's working again

[royibernthal]

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:

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

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.

[Nockawa]

@royibernthal ok, you're not the first to ask this feature, last question before I think/dev the solution: do you have multiple instances of this text in your scene? a few or a lot?

Thanks

[royibernthal]

At the moment I need only 1-2 instances of texts in my scene. It is possible in the near future I'll need up to 100 instances though, in case that affects your solution.

[Pryme8]

Canvas2d for sure or a billboard Sprite.

[Nockawa]

I'm going to add trackNode, trackNodeOffset and trackNodeBillboard to the WorldSpaceCanvas to answer this requirement, I'll do a PG once done.

[Nockawa]

@royibernthal the feature's done, the PG is updated, you can find a sample here: http://babylonjs-playground.com/#1KYG17#1

I hope it fits your needs

[royibernthal]

@Nockawa Thanks, looks perfect. I'll test it in my project as soon as I can.

There's a bug in the PG - after a short amount of time / spins / not sure what a single square starts to spin and resize independently in loops. When it happens there's also a problem with the trackNodeBillboard.

 

[Nockawa]

Look at the PG's code, there's one Cube which is animated to demonstrate that the offset is working correctly when the trackedNode is rotating/scaling. Sometimes you won't see the canvas because the plane on which it's displayed is simply culled.

[royibernthal]

Right, sorry about that. Tested the PG in a hurry.

[royibernthal]

I found one more issue, not sure if it's a bug or intended - if I change wsc.trackNode after creating it, it doesn't update accordingly.