I have a Label class that gets created 300 times via CSS2D that can be moved and changed. Issue is, becomes laggy fast. Is there a more properly optimized way of creating many dynamic 2D texts? ( They need to be all potentially visible simultaneously ) class Label { constructor( text, position ) {…

[image] Vardan_Betikyan: Is there a more properly optimized way of creating many dynamic 2D texts? ( They need to be all potentially visible simultaneously ) Instancing + Texture atlas, maybe :thinking: Letterfall [on terrain] also, recalled about this one: https://codepen.io/prisoner849/ful…

divs/css would be bad for performance. distinct troika labels would most likely also be slow. there are only few things capable of doing what you need out of the box, but the caveat is that large scale apps which would require such things aren’t typically made in vanilla, so these solution have a d…

https://codepen.io/prisoner849/full/PoxbYZZ This is close to what I need, but it seems this is great only if the text doesn’t need to be dynamically changed (the labels are used for player’s names in a game). Also the white background would need to be transparent

I’m not familiar with react, I will give it a try if I can’t find any other solution close to my understanding

Tried integrating the Instancing + Texture atlas from your code - to my surprise, performance took an even bigger nose-dive, especially when updating the CanvasTexture dynamically ( a single rewrite halves my fps for a second). I think the transparency may be the main culprit… I think I may have to…

How to create lots of optimized 2D text labels

Questions

prisoner849 June 17, 2024, 6:57am 2

Instancing + Texture atlas, maybe Letterfall [on terrain]
also, recalled about this one: https://codepen.io/prisoner849/full/PoxbYZZ

Topic		Replies	Views
Performant approach for displaying text labels ~ 10000 Questions performance , text	1	960	December 22, 2020
100+ dynamic Troika-three-text labels with 1s updates Questions textures , shaders , troika	2	133	March 11, 2026
Text Label with WebGL Questions webgl , text	4	3623	January 13, 2022
Instanced labels with troika-three-text? Questions performance	6	717	September 30, 2024
Drawing many text labels using html <canvas> overlay Questions react-three-fiber	6	1562	January 23, 2024

How to create lots of optimized 2D text labels

Related topics