Question : How to properly use InstanceBufferGeometry and InstanceBufferAttribute ?

[sortofsleepy]

👋 Just getting started with learning for a possible project; familiar with raw WebGL and familiar enough with Three.js but looks like I need to use React for this so react-three-fiber made sense.

This may simply just be a lack of understanding of React, which I have somehow managed to avoid until now, rather than an issue with the react-three-fiber itself but I figured I'd start here.

Issue

So the setup pretty much is, I'd like to setup a bunch of instanced spheres. I'm building the basic sphere shape by just using the existing Three.js geometry and I'm building the positions for each sphere into the instanced attribute iPosition.

Here's my component

export default function (props: JSX.IntrinsicElements['mesh']) {

    const [positionAttribute,updatePosition] = useState(new Float32Array([0,0,0]))

    // build the basic sphere shape
    let sphere = new THREE.SphereBufferGeometry(1,32,16);

    return (
        <mesh>
            <instancedBufferGeometry
                instanceCount={1}
                index = {sphere.index}
                attributes={sphere.attributes}>
                <instancedBufferAttribute
                    needsUpdate={true}
                    attachObject={["attributes","iPosition"]}
                    args={[positionAttribute,3]}
                />

            </instancedBufferGeometry>
            <rawShaderMaterial
                vertexShader={debugShader.vertex}
                fragmentShader={debugShader.fragment}/>
        </mesh>

    )
}

This initial setup renders fine, a sphere shows up at 0,0,0 as expected.

An issue comes up though when I'm ready to set all the positions for each sphere. As an example, when I try to update like so :

    useEffect(()=>{
        updatePosition(new Float32Array([0,0,0]))
    })

nothing shows up anymore. As long as I don't call updatePosition, I get something in the canvas.

Any ideas on what might be happening?

Any help is appreciated. Thank you!

[sortofsleepy]

ahhhh, looks like it might be some kind of misunderstanding about how React works, looks like if I update the initial data that is set up when initializing the state object, rather than updating with a brand new TypedArray, things seem to work.

I still don't understand why I can't update with a new TypedArray - if someone happens to know I'd love to better understand but otherwise, this can be considered closed.

[drcmda]

imo this is still wrong. you should not be re-creating positions but mutate them. threejs explains this in their docs "how to update things". but in any way, did you know that drei has a super simple Instances component? this may not for for multiple thousands of objects, but if you're not dealing with huge numbers it makes it almost trivial. three.instancedmesh is a bit harsh to work with otherwise but that's just how the vanilla api is formed. https://codesandbox.io/s/floating-instanced-shoes-h8o2d