Handling Instance Rendering in Three.js

For your graph rendering application with 200k nodes using InstancedMesh and BatchedMesh, there are a few approaches you can take to skip rendering specific instances without affecting your data structure:

Using Scale to Hide Instances

One effective approach is to set the scale of unwanted instances to zero in your shader:

GLSLCopied
// In your vertex shader
attribute vec3 instanceScale;
// ...

void main() {
    // If this instance should be hidden
    if (shouldHide) {
        // Set scale to 0 to effectively hide it
        vec3 scaledPosition = position * vec3(0.0);
    } else {
        vec3 scaledPosition = position * instanceScale;
    }
    // Rest of your shader code
}

Using Instance Visibility in Material

You can use a data texture to control instance visibility:

JAVASCRIPTCopied
// Create a data texture for visibility
const visibilityTexture = new THREE.DataTexture(
    new Float32Array(instanceCount), // 1 for visible, 0 for hidden
    instanceCount, 
    1, 
    THREE.RedFormat,
    THREE.FloatType
);
visibilityTexture.needsUpdate = true;

// In your material
material.onBeforeCompile = (shader) => {
    shader.uniforms.visibilityTexture = { value: visibilityTexture };
    
    // Add to vertex shader
    shader.vertexShader = shader.vertexShader
        .replace(
            'void main() {',
            `
            uniform sampler2D visibilityTexture;
            void main() {
                float visibility = texture2D(visibilityTexture, vec2(float(instanceID) / float(instanceCount), 0.5)).r;
                if (visibility < 0.5) {
                    gl_Position = vec4(0.0); // Move off-screen
                    return;
                }
            `
        );
};

Using Instance Position

Since you mentioned that instances are initially at (0,0,0) and performance improves when repositioned:

JAVASCRIPTCopied
// In your shader, detect instances at origin and skip rendering
if (instancePosition.x == 0.0 && instancePosition.y == 0.0 && instancePosition.z == 0.0) {
    // Either set scale to 0 or move off-screen
    gl_Position = vec4(0.0);
    return;
}

Using Frustum Culling

If your instances are outside the camera's view frustum, they won't be rendered:

JAVASCRIPTCopied
// Move unwanted instances far outside the camera frustum
const farAwayPosition = new THREE.Vector3(100000, 100000, 100000);

// Update your instance matrix to move it far away
// This can be done in your shader or in the instance matrix

These approaches allow you to effectively "skip" rendering specific instances without changing your instance count or affecting your data structure, which should help maintain your frame rate even with overlapping instances.