Animating Per-Instance Opacity in BatchedMesh

To animate the opacity of individual instances within a BatchedMesh containing thousands of unique geometries, you'll need to work with the batch-specific attributes and material properties.

Approach for BatchedMesh Opacity Animation

BatchedMesh is designed for rendering many objects with different geometries efficiently. For per-instance opacity animation, you'll need to:

1. Use the batch ID system to identify individual instances
2. Set up custom attributes for opacity values
3. Modify your shader material to use these opacity values

Here's how you can implement this:

1. Set Up Custom Opacity Attribute

JAVASCRIPTCopied
// When creating your BatchedMesh
const batchedMesh = new THREE.BatchedMesh(
  maxCount,  // Maximum number of instances
  maxVerticesPerBatch,  // Max vertices per batch
  material
);

// Create a Float32Array to store opacity values for each instance
const opacityArray = new Float32Array(maxCount);

// Initialize with default opacity (1.0 = fully visible)
opacityArray.fill(1.0);

// Add this as a custom attribute to your BatchedMesh
const opacityAttribute = new THREE.InstancedBufferAttribute(opacityArray, 1);
batchedMesh.geometry.setAttribute('instanceOpacity', opacityAttribute);

2. Modify Your Material's Shader

You'll need to use a custom shader material that can access the opacity attribute:

JAVASCRIPTCopied
const material = new THREE.ShaderMaterial({
  vertexShader: `
    attribute float instanceOpacity;
    varying float vOpacity;
    
    void main() {
      vOpacity = instanceOpacity;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    varying float vOpacity;
    
    void main() {
      gl_FragColor = vec4(1.0, 1.0, 1.0, vOpacity);
    }
  `,
  transparent: true
});

3. Animate the Opacity Values

To animate the opacity, update the opacity attribute values in your animation loop:

JAVASCRIPTCopied
function animate() {
  requestAnimationFrame(animate);
  
  // Get the attribute for updating
  const opacityAttribute = batchedMesh.geometry.getAttribute('instanceOpacity');
  
  // Update opacity values for each instance
  for (let i = 0; i < batchedMesh.count; i++) {
    // Calculate new opacity value (example: pulsing effect)
    const newOpacity = 0.5 + 0.5 * Math.sin(Date.now() * 0.001 + i * 0.1);
    
    // Update the opacity value
    opacityAttribute.array[i] = newOpacity;
  }
  
  // Mark the attribute as needing an update
  opacityAttribute.needsUpdate = true;
  
  renderer.render(scene, camera);
}

4. For More Complex Materials

If you're using standard materials or need more complex shading, you can extend this approach by using a custom uniform and modifying the material's onBeforeCompile function:

JAVASCRIPTCopied
const material = new THREE.MeshStandardMaterial({
  transparent: true
});

// Add custom uniform and shader chunks
material.onBeforeCompile = (shader) => {
  shader.uniforms.opacityValues = { value: opacityArray };
  
  // Add attribute declaration to vertex shader
  shader.vertexShader = shader.vertexShader.replace(
    '#include <common>',
    `#include <common>
    attribute float instanceOpacity;
    varying float vOpacity;`
  );
  
  // Add code to pass opacity to fragment shader
  shader.vertexShader = shader.vertexShader.replace(
    '#include <begin_vertex>',
    `#include <begin_vertex>
    vOpacity = instanceOpacity;`
  );
  
  // Use the opacity in fragment shader
  shader.fragmentShader = shader.fragmentShader.replace(
    '#include <output_fragment>',
    `gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);`
  );
};

This approach should give you similar performance to your InstancedMesh solution while working with the unique geometries in your BatchedMesh.