Signs/Annotations in the Scene - Is GUI the way to go?

Before spending too much time following the wrong path, I wanted to ask the community to give me a hint on the best way to do the following:
Similar to the image below, I want to add these signs/annotations to my scene.

(image credentials: Ngauruhoe - New Zealand by Michael Tzscheppan on Dribbble)

The requirements are that they can be placed in 3D space (meaning not shown on the foreground if occluded), crisp text, and probably the most difficult requirement: the size of the sign should adjust to the text length. On the other hand, I don’t need any click and mouse interaction functionality.

Babylon.GUI seems a way forward, but since I haven’t worked with it, I don’t know if this fits the bill. Any suggestions and perhaps even a playground showing how to adjust mesh sizes based on text length?

Any hints are appreciated.

P.S: the doc (The Babylon GUI | Babylon.js Documentation) refers to for the GUI library, but the link seems broken.

This may help

And an example of labels with dynamic texture. Would need some work to get it to do what you need.

1 Like

I would go with DynamicTextures as well. I did a demo where I attach a plane to meshes with a label here is a live demo:
BabylonJS Directed Graph (

Basically with a plane parented to the mesh it will occlude. If you end up wanting to do more than drawText then the GUI may be what you are after. You can round corners as here, but the pill shape mesh in your screenshots may be closer to what you are after.

To adjust the size of the sign to the text length, you can use measureText as linked to by John.

Importantly also, the backface is mirrored text when you write to a plane, which is what most GUI examples are doing.


Thanks @JohnK and @brianzinn !
Very helpful, especially the Playground using the ParticleSystem is interesting to render a lot of labels in a performant way.
Thanks for putting me on the right track.