Using InstancedMesh/BatchedMesh for Screen-Aligned Labels

Your challenge of rendering thousands of screen-aligned, constant-size labels with InstancedMesh or BatchedMesh is a common optimization problem in 3D visualization.

Solution Approach

Since you're already familiar with Sprites (which naturally face the camera), the key is to adapt this behavior for InstancedMesh/BatchedMesh while maintaining consistent size regardless of camera zoom. Here's how you can approach this:

1. Custom Shader Material

You'll need to create a custom shader material that:

• Orients the geometry to face the camera
• Maintains consistent size regardless of zoom
• Works with instancing

Here's a starting point for your custom vertex shader:

GLSLCopied
// Custom vertex shader
uniform float size;
uniform float cameraZoom;

void main() {
    // Get instance matrix and apply to position
    #include <begin_vertex>
    #include <project_vertex>
    
    // Counter the camera zoom effect
    // For OrthographicCamera, we can directly scale by zoom
    mvPosition.xy /= cameraZoom;
    
    // Apply consistent size
    gl_Position = projectionMatrix * mvPosition;
    
    // Billboard effect - make it face the camera
    vec4 worldPosition = modelMatrix * vec4(position, 1.0);
    vec4 mvPosition = viewMatrix * worldPosition;
    
    // Create a billboard by zeroing rotation in view space
    // This keeps the geometry aligned with screen space
    mvPosition.xyz = vec3(position.x * size, position.y * size, mvPosition.z);
    
    gl_Position = projectionMatrix * mvPosition;
}

2. Implementation with InstancedMesh

JAVASCRIPTCopied
// Create a custom material
const material = new THREE.ShaderMaterial({
    uniforms: {
        size: { value: 1.0 },
        cameraZoom: { value: camera.zoom }
    },
    vertexShader: customVertexShader,
    fragmentShader: customFragmentShader,
    transparent: true,
    side: THREE.DoubleSide
});

// Update the zoom value when camera changes
function updateUniforms() {
    material.uniforms.cameraZoom.value = camera.zoom;
}

// Call this when camera zoom changes
camera.addEventListener('change', updateUniforms);

3. BatchedMesh Considerations

For BatchedMesh, the approach is similar, but you'll need to ensure your shader is compatible with the batching system. The key difference is how instance attributes are accessed.

Alternative Approach: WebGLRenderer.localClippingEnabled

If shader modification proves challenging, consider using:

JAVASCRIPTCopied
// Create a separate renderer for your UI elements
const uiRenderer = new THREE.WebGLRenderer({ alpha: true });
uiRenderer.setSize(window.innerWidth, window.innerHeight);
uiRenderer.localClippingEnabled = true;

// Create a separate camera for UI that doesn't zoom
const uiCamera = new THREE.OrthographicCamera(
    -window.innerWidth / 2, window.innerWidth / 2,
    window.innerHeight / 2, -window.innerHeight / 2,
    0.1, 1000
);
uiCamera.position.z = 10;

// Then render your UI elements with this fixed camera

This approach still requires position synchronization but might be more straightforward than complex shader modifications.

The shader-based approach will give you the best performance for your use case with thousands of labels while maintaining the screen-aligned, constant-size behavior you need.