Is there a performant approach for displaying distinct labels on ~10k objects (constructed using instancedMesh).
Tried npm spriteText, and native canvas text as texture. Both have huge peformance drops.
Thanks.
Average screen size is 1980px x 1080px.
That gives ~2m pixels total.
2.000.000 / 10.000 = 200px² per label.
If you were to render 10k labels, each has about 14px x 14px - which is barely enough for even a single letter (unless they overlap, in which case they aren’t readable anyway.)
Instead of brute-forcing 10k labels, create a pool of 100 labels (Troika offers a blissfully optimised text rendering, even for dynamic text), a pool of 100 planes, and a pool of 5000 points.
Label is somewhere close to the camera - render as label (taken from a pool.)
Label is far enough to not be readable - render as a plane (filled with some noise / radial gradient / label color.)
Label is far enough to be below 5-10px height - render as a point (same color as the label.)
Anything below 1 pixel - don’t render at all.
5 Likes