Rolento

Rendering Dynamic Text (constant size)

Recommended Posts

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.

debuglayer.jpg

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.