How to have a high max count for InstancedMesh without lag when only a small amount of instances should be drawn ?

[mat100payette]

I have the following code which takes in a count variable in the props of the component. That count is used to fill the colors for the geometry.

Now the problem is that no matter what I do in the main useFrame loop, even if I don't use many instances, if the MAX_INSTANCES constant is high (10k is little lag, 100k is very noticeable, 1M is terrible) then things become laggy. I don't quite expect to be able to draw 1M instances without lag without doing proper threejs optimization and stuff, but it'd be great to at least have a way to allow for a high maximum of instances in the mesh (or no limit even), and have the lag be proportionate to the amount of instances drawn instead. Is that possible ?

const INSTANCE_SHAPE = new THREE.Shape([
    new THREE.Vector2(0, -0.5),
    // ...
])

// This is the variable that I don't know how to refactor...
const MAX_INSTANCES = 10000

export function MyComponent(props: CustomProps) {

    const _color = new THREE.Color()
    const _object = new THREE.Object3D()

    const [instances, setInstances] = useState<{x: number, y: number}[]>([])

    const colorArray = useMemo(() => new Float32Array(MAX_INSTANCES * 3), [])

    const geometry = useRef<InstancedBufferGeometry>(null)

    // Ran only on instance add/remove
    const attrib = useUpdate<InstancedBufferAttribute>(_ => {
        const nbInstances = props.count

        const colors = new Array(nbInstances).fill(undefined).map((_, i) => INSTANCE_COLORS[i % INSTANCE_COLORS.length])

        for (let i = 0; i < nbInstances; i++) {
            _color.set(colors[i])
            _color.toArray(attrib.current.array, i * 3)
        }

        attrib.current.needsUpdate = true

    }, [props.count]) as React.MutableRefObject<THREE.InstancedBufferAttribute>

    // Ran only on instance add/remove
    const mesh = useUpdate<THREE.InstancedMesh>(state => {
        if (state) {
            const nbInstances = props.count

            const temp = []
            for (let i = 0; i < nbInstances; i++) {
                temp.push({ x: 0, y: i})
            }
            setInstances(temp)

            state.instanceMatrix.needsUpdate = true
        }
    }, [props.count]) as React.MutableRefObject<THREE.InstancedMesh>

    useFrame(_ => {

        if (!mesh?.current) {
            return
        }

        // Some y position management
        const audioPosition = EditorAudio.position
        mesh.current.translateY(-audioPosition / 1000)

        // The major loop
        for (var i = 0, len = instances.length; i < len; i++) {
            if (!mesh?.current) {
                return
            }

            const { x, y } = instances[i]

            // Update the dummy object
            _object.position.set(x, y, 0)
            _object.updateMatrix()
            // And apply the matrix to the instanced item
            mesh.current.setMatrixAt(i, _object.matrix)
        }
        mesh.current.instanceMatrix.needsUpdate = true
    })

    if (!mesh || !attrib) {
        return <></>
    }

    const instancedMesh = useMemo(() =>
            <instancedMesh ref={mesh} args={[null as unknown as BufferGeometry, null as unknown as Material, MAX_INSTANCES]}>
                <shapeBufferGeometry ref={geometry} attach="geometry" args={[INSTANCE_SHAPE]}>
                    <instancedBufferAttribute ref={attrib} attachObject={['attributes', 'color']} args={[colorArray, 3]} />
                </shapeBufferGeometry>
                <meshPhongMaterial attach="material" vertexColors />
            </instancedMesh>
        , [])

    return (
        <>
            {instancedMesh}
        </>
    )
}

[drcmda]

i guess you would need to know how fast the host system is. threejs doesnt offer anything like that, perhaps you find a lib on npm that can give you something, then you could make the number adaptive. i've also always wanted something like that, to downgrade the experience with an acceptable fps. if you ever find something please let me know.

[drcmda]

yes, you can, but not if you attempt to drive the positions in javascript. gpu driven (shader-based) ... it's very fast. here are some examples with a million entities: https://github.com/zadvorsky/three.bas

note that you dont need three-bas for this. you have a shader, let it drive all items in there.

[mat100payette]

I see. What I don't get with that method is how to access and modify specific instances, for example adding an instance isn't too bad since the position (x/y/z) and just be appended, but removing or modifying the 459th instance ??? I'll check out Three bas, although I'm very new to shaders, hence why I went for the higher level objects first.

[drcmda]

i know too little about it myself, you will have better luck in threejs own discourse. but from what ive seen, people pump something like a "datatexture" into the shader that contains all their informations.

[mat100payette]

Yeah alright, I'll keep searching and studying and will let you know if I succeed or not. I feel like instancing stuff is still quite recent and there's not a ton of info about the different ways to use it.

[bhushan6]

I'm also stuck at same problem rn, not sure how to add or remove single instance of object from instanced mesh. I mean just how to remove, since adding is straightforward. Did you find anything?