instanceColor matrix not updating every time

[marcelpi]

Hi there,

I'm working on a color interpolation exercise using r3f and leva and for some reason when I click the 'fill space' checkbox repeatedly, sometimes the instancedMesh is displayed with the proper colors, sometimes is displayed blank.

I've been trying to wrap my head around this for 2 days, but no luck.

Please give this code a try: https://codesandbox.io/s/controls-bug-test-7bys3?file=/src/App.js

As you can see, the controls.fill(which is controlled by the checkbox) is used a lot as a condition to display things in the return of the component.

Click on a few times on the 'fill space' box and you'll see what I mean.
Also, check the attached images.

Does anyone know what is going wrong here? How can I correct this?

Thanks for your help.

[joshuaellis]

I'm not getting this breakage, but my two cents on what you've done is instead of conditionally rendering items, why not just set their opacity to 0? IIRC building pieces e.g. a mesh is an expensive operation, so if you know you need it in a complex scene, it can sometimes be easier just to have it invisible until you require.

[drcmda]

it's too much code to just look at. some obvious errors i see:

• you don't key the fragment. it should be

{latticePoints.map((el, idx) => {
        return (
          <Fragment key={idx}>
            <Sphere

• there is no need for suspense, instancedmesh isn't async

not sure if that makes it better, but there's probably no need to redo it all the time:

<instancedMesh
        visible={controls.fill}
        ref={meshRef}
        key={(range / step + 1) ** 3}
        args={[null, null, (range / step + 1) ** 3]}
      >

it looks almost like the instancedmesh isn't disposed of properly, maybe the key helps?

[marcelpi]

Ok, managed to avoid this problem by rewriting the code.

Instead of recreating items based on a leva control, I'm just toggling visibility on and off using
mesh.current.visible = true or false.
It seems to be doing the job.

I'm also using a pretty old laptop(old cpu&gpu) that's probably why it doesn't manage to compute all colors before render.

In any case, thanks for your answers, appreciated. I will close this issue.