Efficient partial update of InstancedBufferAttribute

Questions
,
1

Hello Three.js Community,

I’m currently working on a project that involves rendering a large number of geometries (approximately 2 million) using InstancedMesh. For positioning these instances, I use InstancedBufferAttribute and update this large attribute buffer every 5 seconds. However, there is a noticeable drop in FPS during these updates, as sending the attribute buffer to the GPU seems to be quite resource-intensive.

To mitigate this issue, I’ve implemented a form of double buffering. Specifically, I update a buffer that isn’t currently visible and then switch between them. This approach has helped, but I’m still facing performance challenges.

In a previous version of the project, before adopting instanced rendering, I was using GLBufferAttribute for the meshes. Back then, I could progressively update an invisible mesh over a few frames using the bufferSubData method from webgl context. This method was working well even though the attribute buffers were six times larger.

Given this context, I’m reaching out for advice on two fronts:

  1. Is there a way to efficiently perform partial updates to InstancedBufferAttribute similar to how bufferSubData works with GLBufferAttribute? I tried using attribute.addUpdateRange and attribute.needsUpdate but this seem to batch many updates to a single big update which cause fps drop.
  2. Alternatively, is it possible to use GLBufferAttribute with InstancedMesh? This could perhaps allow me to use the bufferSubData approach for instanced meshes.

Thank you in advance for your help and guidance.