royibernthal

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?

Share this post


Link to post
Share on other sites

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

Share this post


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

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

Share this post


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

Share this post


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

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.

Share this post


Link to post
Share on other sites

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

 

bug.png

bug2.png

Share this post


Link to post
Share on other sites

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.

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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.