Efficient way to render large number of text labels

[KiranB]

Hi All,
I need to add large no of text labels around mesh objects (>300).
I have tried

1. Dynamic texture with separate mesh for each label
2. Solid particle system with attaching different material created using dynamic texture.
3. TextBlock GUI’s
   None of these approaches seem to be efficient and tank my FPS by half.
   Are these any other ways which I can look into to make the rendering optimised ? Any help would be appreciated.

[kzhsw]

Use Mesh Writer to build meshes from text, and merge them all.

[KiranB]

Hi @kzhsw Thanks for the suggestion, have given it a try earlier but

• was not able to merge the meshes, getting merge related errors
• I need text to always face camera (like billlbord mode) which I was not able to achieve.
  PG : https://playground.babylonjs.com/#PL752W#1511

[mawa]

Hi,
You wouldn’t happen to have an example for your needs?
Labels should be attached to meshes (and should you interact with them?)
There’s recently been a number of topics around this subject in the forum. Choices are basically around using a dynamicTexture, cloning GUI for mesh or using a shader. I think you can exclude the meshwritter (my opinion).

Here a few links that might be of interest to you:

When drawing a large number of objects in a GUI.Container and performing container movement, the performance becomes very sluggish

I will create a Container for each mini-game to keep track of wins and losses. Each Container will contain a large number of images representing the statistics of each win or loss. Ultimately, the outermost layer needs to be draggable vertically.

Babylon.js Playground

Perf comparison of different strategies for creating mesh UIs

that shouldn’t be happening, why do you say so? Are the test times different?

When cloning a mesh with ADT, the ADT does not attach to the cloned mesh

Adding @carolhmj our own Babylon GUI expert

To get better advise, I would really recom you give some more information (or create a small PG).
Meanwhile, have a great day

[kzhsw]

In this case things went complex, Thin Instances seems to be a good option.
Sadly there are no docs about per-instance uv offset, so custom ShaderMaterial or Node Materials could be needed, with shader or Node Materials, you can parse the per-instance color (vec4) as a uv offset (vec2) and a uv scaling (vec2), so Texture atlas can be used and all the labels would require one texture.
With shader or Node Materials, you can pass camera-related stuff into the shader before each frame, making it possible to compute the billboard transform on gpu.

[CodingCrusader]

This thread might be of interest:

Custom GUI labels performance test - Demos and projects - Babylon.js (babylonjs.com)