What is the most efficient way to render a lot of selectable spheres?

Hi there, I currently have a character in the scene and I add a sphere as a selectable object to each of the character’s joints.

The issue I’m running into is that I now have a LOT of spheres rendering in the scene, which is causing my laptop fan to go wild.
I currently set up my joint indicator as:

const material = new THREE.MeshBasicMaterial({
    depthTest: false,
    transparent: false,
    opacity: 0.7,
  const geometry = new THREE.SphereBufferGeometry(3, 9, 9);
  const joint = new THREE.Mesh(geometry, material);

Is there a better way to create a selectable joint selector? Billboarding a disc? Maybe render a helper of some kind. I created an instanced mesh joint for a while but it made the code a bit too complex and hard to understand.

All suggestions are welcome, even if it is just optimizing how it’s currently done.

Herman :slight_smile:

If the number of draw calls is the restrictive factor, using billboarding won’t help. Instanced rendering seems the more appropriate approach to me.

1 Like

Gotcha. Thanks, I’ll give it another spin :+1: