What's the most practical way to animate dynamically delivered geometry?

[unphased]

I have frames of geometry that are coming in over a websocket. Let's for the sake of exposition imagine that these are voxels that a backend system has computed out of point clouds from, say, a 3D sensor. This is a realtime application, and so latency & throughput is somewhat important.

For the time being, the initial implementation is such that this data has already been pre-computed and packaged as uint8array. We use redux, and immer helpfully is hands-off when it comes to expensive processing of TypedArrays, so we are able to use Redux selectors directly in our R3F component which renders voxels. I use this code to define the geometry:

  <mesh
    renderOrder={-3}
    frustumCulled={false}
    receiveShadow
    position={[p[0], p[1], p[2]]}
    scale={[d[0], d[1], d[2]]}
  >
    <bufferGeometry attach="geometry">
      <bufferAttribute
        key={pvn.ts}
        attachObject={["attributes", "position"]}
        array={pvn.voxels}
        normalized={false}
        itemSize={3}
        count={pvn.voxels.length / 3}
      />
    </bufferGeometry>
    <meshBasicMaterial
      attach="material"
      color={color}
      transparent
      opacity={0.15}
    />
  </mesh>

As you can see here since a timestamp is used as key, we are certainly relying on full render logic to happen each time a new frame comes in. It's only the nature of this as a stream with a websocket that puts this into questionable territory given the overhead of animating via proper react renders.

So I've been working on redoing this by pulling this state out of redux, and simply having the websocket handler update a global variable with the latest content. It seems like I can keep the render of this component identical, and handle this by adding a useFrame which looks up the global variable and will be able to imperatively update the bufferAttribute/bufferGeometry.

The trouble I'm having is in how to determine from inside the useFrame what the key is and setting the key, so that subsequent actual renders will not do unnecessary work. It does not seem like there is a way that's provided in the imperative mode to manipulate the relevant react key here. Is this possible, or am I reinventing the Zustand wheel and need to use that instead?

[unphased]

I worked it out by doing it the imperative way. I just reach in and replace the bufferGeometry every time. No longer using a key when rendering (previously that was used to force the re-render when new data comes in, but now we do not re-render)