# Efficient way to render large number of text labels

**URL:** <https://forum.babylonjs.com/t/efficient-way-to-render-large-number-of-text-labels/41397>\
**Category:** Questions\
**Tags:** performance, text\
**Created:** [June 6, 2023, 4:01am UTC](https://forum.babylonjs.com/t/efficient-way-to-render-large-number-of-text-labels/41397 "2023-06-06T04:01:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![KiranB](https://avatars.discourse-cdn.com/v4/letter/k/d78d45/32.png) [@KiranB](https://forum.babylonjs.com/u/KiranB)\
**Post date:** [June 6, 2023, 4:01am UTC](https://forum.babylonjs.com/t/efficient-way-to-render-large-number-of-text-labels/41397/1 "2023-06-06T04:01:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kzhsw](https://avatars.discourse-cdn.com/v4/letter/k/848f3c/32.png) [@kzhsw](https://forum.babylonjs.com/u/kzhsw)\
**Post date:** [June 6, 2023, 5:28am UTC](https://forum.babylonjs.com/t/efficient-way-to-render-large-number-of-text-labels/41397/2 "2023-06-06T05:28:39Z")

</div>

Use [Mesh Writer](https://doc.babylonjs.com/communityExtensions/meshWriter) to build meshes from text, and [merge](https://doc.babylonjs.com/features/featuresDeepDive/mesh/mergeMeshes) them all.

---

<div class="post-metadata">

**Author:** ![KiranB](https://avatars.discourse-cdn.com/v4/letter/k/d78d45/32.png) [@KiranB](https://forum.babylonjs.com/u/KiranB)\
**Post date:** [June 6, 2023, 6:23am UTC](https://forum.babylonjs.com/t/efficient-way-to-render-large-number-of-text-labels/41397/3 "2023-06-06T06:23:21Z")

</div>

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](https://playground.babylonjs.com/#PL752W#1511)

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [June 6, 2023, 8:18am UTC](https://forum.babylonjs.com/t/efficient-way-to-render-large-number-of-text-labels/41397/4 "2023-06-06T08:18:29Z")

</div>

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](https://forum.babylonjs.com/t/when-drawing-a-large-number-of-objects-in-a-gui-container-and-performing-container-movement-the-performance-becomes-very-sluggish/41297/3):
>
> 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](https://playground.babylonjs.com/#IHGGPZ%2310)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

> [@Perf comparison of different strategies for creating mesh UIs](https://forum.babylonjs.com/t/perf-comparison-of-different-strategies-for-creating-mesh-uis/40510/11):
>
> 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](https://forum.babylonjs.com/t/when-cloning-a-mesh-with-adt-the-adt-does-not-attach-to-the-cloned-mesh/40992/2):
>
> Adding @carolhmj our own Babylon GUI expert slight_smile

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

---

<div class="post-metadata">

**Author:** ![kzhsw](https://avatars.discourse-cdn.com/v4/letter/k/848f3c/32.png) [@kzhsw](https://forum.babylonjs.com/u/kzhsw)\
**Post date:** [June 6, 2023, 8:34am UTC](https://forum.babylonjs.com/t/efficient-way-to-render-large-number-of-text-labels/41397/5 "2023-06-06T08:34:26Z")

</div>

In this case things went complex, [Thin Instances](https://doc.babylonjs.com/features/featuresDeepDive/mesh/copies/thinInstances) seems to be a good option.  
Sadly there are no docs about per-instance uv offset, so custom [ShaderMaterial](https://doc.babylonjs.com/features/featuresDeepDive/materials/shaders/shaderMaterial) or [Node Materials](https://doc.babylonjs.com/features/featuresDeepDive/materials/node_material/nodeMaterial) 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](https://en.wikipedia.org/wiki/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](https://github.com/BabylonJS/Babylon.js/blob/61c912b555c549794d976204975a051c038429d6/packages/dev/core/src/Meshes/transformNode.ts#L1129) on [gpu](https://github.com/BabylonJS/Babylon.js/blob/61c912b555c549794d976204975a051c038429d6/packages/dev/core/src/Shaders/gpuRenderParticles.vertex.fx#L115).

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [June 6, 2023, 11:43am UTC](https://forum.babylonjs.com/t/efficient-way-to-render-large-number-of-text-labels/41397/6 "2023-06-06T11:43:59Z")

</div>

This thread might be of interest:

[Custom GUI labels performance test - Demos and projects - Babylon.js (babylonjs.com)](https://forum.babylonjs.com/t/custom-gui-labels-performance-test/17676/5)
