I’m trying to use troika-three-text to render labels, and I’m wondering if there’s a way to draw multiple instances using a single draw call? My scenario is that I have potentially thousands of static labeled objects visible, where the labels generally consists of labels or characters, with a length of three at the most (think 999 or ‘AAA’).
I’ve tested with my own naive implementation to create a texture map and use an instanced plane per character, which results in a single draw call, but is more cumbersome to manage. Troika text appears to use instanced buffer geometries, but if I create N instances with the same text, I still get N total draw calls. Am I doing something wrong?
Without seeing a coded environment it’s difficult to say… you could be recreating a new material for every instance in a loop as far as anyone could guess, any chance you can provide a minimal demo of your setup to allow people to disect?
here’s one example where it renders font gpyphs (the font is lucide) Document it’s a single draw call. and one with a more generic UI using labels and such Document and one more where it’s mixed into a 3d scene Document
yes it would be ideal to use this in react + three, but it can be used in vanilla, too. see Vanilla Three.js - uikit
You’ll see that the number of draw calls matches the number of instances created. Reading up on the documentation, I see that troika-three-text derives its material from the one provided. I thought I could perhaps reuse a derived material from a dummy text object, but that actually doubled the draw calls to 2N. Regarding UI kit, from a quick look I’m not sure it would solve what I need, which is static labels rotated and placed in 3D space to appear on top of objects.
I’m quite new to 3D in general, so the learning curve is steep when going behind what threejs and packages like troika-three-text does for you. I added some stats and it looks like the material is reused for every instance, but there’s a new geometry per instance.
Would it be possible to clone the material and geometry for use with InstancedMesh or BatchedMesh? I tried and there was no errors, but nothing rendered on screen either.
as i said, do the same in uikit. it should be 1 drawcall. do not use troika.
instancing comes from the shader, you can’t instance a non-instancing shader from outside without messing with its shader lingo.
Apart from the examples page is there a demo of uiKit handling
I’ve also tried this before with uiKit (early after release) and it seemed uiKit didn’t like 3D oriented ui label components (floating over and rotated to relative 3D objects) within the scene graph (in a three - map box environment)
you can give them a regular position and offset them along z for instance. the third demo up there does it with a view. uikit is still more geared towards ui than labels and annotations for now. bela is working on this right now, the upcoming versions will allow you to distribute labels freely without all the layouting confines.