Rendering Dynamic Text (constant size)

[Rolento]

Hi All

I have been researching dynamic text rendering within the forum and found various solutions (most orientated around drawing text on a 3D plane). This led me to create a simple code snipplet that illustrates how the technique might be used:

http://playground.babylonjs.com/#12MQQ3

What I attempted here was to create a function that renders a label in a 3D scene - as you can see it works, but it quickly became apparent that the size of the objects in the scene will have a severe impact on the labelling.  In the example above the object (sphere) is very large and this results in the label above it appearing very small (even though the font size is 100px).  I could increase the size of the texture/plane but this will utilise more memory/resources and will not be a good solution for me as I am attempting to create a 3D chart.

NOTE: when setting debug mode the labels displayed are "exactly" what I am trying to acheive - e.g.

So at this time I am wondering how I can efficiently render text labels on top of a 3D scene, whereby each label is connected to a 3D object (and therefore moves with it).  NOTE: I do not want the text to rotate.

If anyone can advise on this topic (possibly provide a PG code example) I would appreciate it.

Thanks

[Jamesabels]

No idea if this works, 

Haven't had the time to modify this example, but I feel like they need to be scaled dynamically somehow. 

Have you tried setting the size of the labels somehow based of the width and height of the window? 

[GameMonetize]

Hello

you have many options to draw text like in your example:

- canvas2D: http://doc.babylonjs.com/overviews/Canvas2D_Home

- Manually using HTML: https://github.com/BabylonJS/Babylon.js/blob/master/src/Debug/babylon.debugLayer.ts#L442 (This is the technique used by the debuglayer)

[Rolento]

Thanks guys, I will explore further.

[Nockawa]

@Rolento I believe this one will help you: http://babylonjs-playground.com/#1N9RJY#5

 

[Rolento]

Hi Nockawa

That link you sent through is perfect - much appreciated!  I have quickly knocked together a drawLabel() function that serves my purpose:

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

I dont like the fact that the function creates an object (for the tracking logic to work) but it works so thats good enough for the moment.  I hope this helps others...

If anyone can improve this solution please share your thoughts...

[Nockawa]

33 minutes ago, Rolento said:

Hi Nockawa

That link you sent through is perfect - much appreciated!  I have quickly knocked together a drawLabel() function that serves my purpose:

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

I dont like the fact that the function creates an object (for the tracking logic to work) but it works so thats good enough for the moment.  I hope this helps others...

If anyone can improve this solution please share your thoughts...

The PG I shared was to create a label that is tracking a Node (typically a Mesh) from the 3D Scene. But you can also create the very same Label which won't track the position of a Node from the 3D Scene and just have a 2D screen coordinates.

So the question is: what do you want your label's position to be relative to? If it's from a Scene Node, then the former PG is fine, if you already have a screen coordinate, then there's a simpler way to do it. Tell me.

[Rolento]

Hi Nockawa

Basically I am creating a 3D chart.  I want to use the drawLabel() function to draw a label on the X, Y Z axis of the 3D chart.  So I dont really want the label to track an object, instead I want to draw the label at a specific point in 3D space.  I do however want the label to be fixed at the 3D point I assign, hence when the scene is rotated the label remains in their respective position in 3D space.

Thanks...

[Nockawa]

3 minutes ago, Rolento said:

Hi Nockawa

Basically I am creating a 3D chart.  I want to use the drawLabel() function to draw a label on the X, Y Z axis of the 3D chart.  So I dont really want the label to track an object, instead I want to draw the label at a specific point in 3D space.  I do however want the label to be fixed at the 3D point I assign, hence when the scene is rotated the label remains in their respective position in 3D space.

Thanks...

Alright now it's clear... so don't use the "trackNode" parameter when you create the Group2D. Just use the x and y (or position) parameters. All you need to do is projecting the 3D position into screen space to compute the Group2D's x and y from your scene x/y/z.

You can find the code that update the Group2D x/y from the trackNode here: https://github.com/BabylonJS/Babylon.js/blob/master/src/Canvas2d/babylon.canvas2d.ts#L1170

You can replicate the same thing for your chart.

[Rolento]

Thanks for your help Nockawa!