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:
- Is there a way to efficiently perform partial updates to
InstancedBufferAttributesimilar to how
GLBufferAttribute? I tried using
attribute.needsUpdatebut this seem to batch many updates to a single big update which cause fps drop.
- Alternatively, is it possible to use
InstancedMesh? This could perhaps allow me to use the
bufferSubDataapproach for instanced meshes.
Thank you in advance for your help and guidance.