Display usernames above the heads of a large number of avatars

I currently have about 200 avatars displayed in the scene.

These avatars are created using InstancedMesh and move around.

As it stands now, I’m worried that if I use troika-three-text or something similar to display the username above the avatar’s head, I’ll get 200 more draw calls.

Is there a way to display my username with as few draw calls as possible?

Thank you to the developers.

I never use InstancedMesh. Only instancefbeffergeometry with 1 draw call.
For avatars you need one texture atlas with all avatars and in shader changing uv offset

1 Like

Thank you for your answer!

If I use Instancefbeffergeometry, do I need to create a Geometry for each character?

Unfortunely i have no time for full code now, but in future i need for this too.
Maybe community can help.
No need for 200 geometrys. One instancedBufferGeometry contains one billboard geometry (like in example) and 200 uv offsets for avatars, 200 position offsets and maybe 200 colors.
Updating texture 1024x1024 with rgba channels takes 5 ms.
But if u want, you canset it to one channel - luminance and time will be 0.7ms

avatars_texture.format=THREE.LuminanceFormat;
avatars_texture.needsUpdate=true;

I using partial texture update but for shadows for also small time in ms:
https://threejs.org/examples/?q=partia#webgl_materials_texture_partialupdate
In texture 1024x1024 you can insert 250 text with size 200x20px.
One partial texture update with size 200x20px is about 0.02ms - very fast
Need code to know which place is empty now for new avatar inserting.

var avatars_places=new Array(250);
for(var n=0;n<250;n++){
avatars_places[n]=n;
}

function add_avatar(){
var uv_offset_num=avatars_places.pop();
}

function delete_avatar(uv_offset_num){
avatars_places.push(uv_offset_num);
}
1 Like

You are awesome!

Thank you very much for taking the time to answer my questions.

My questions are now completely answered!

You are wellcome.

1 Like