How can you dynamically add and remove objects using THREE.InstancedBufferGeometry?

Question

I'm trying to get a grip on how the new THREE.InstancedBufferGeometry functionality works so I can evaluate it for my use-case. Specifically, I need an approach where I can add new instances of an object at some point in the future and update them through their attributes, however I won't know how many I need to add during the initial setup. Ideally I'd like to perform as few calls to the GPU during setup and during attribute updates, which is why THREE.InstancedBufferGeometry looks appealing.

I understand how objects can be added all at once and have their attributes dynamically updated, as per these demos:

• http://threejs.org/examples/#webgl_buffergeometry_instancing_dynamic
• http://threejs.org/examples/#webgl_buffergeometry_instancing_interleaved_dynamic

What I'm not clear on is whether it's possible to dynamically add and remove objects after the initial batch have been created, of if it's actually more like how merging geometry works in Three.js where it's not really possible to easily remove a specific, single object after merging.

In an effort to keep this focussed, how would I dynamically add and remove objects using THREE.InstancedBufferGeometry?

Answer 1

You can draw less than the number of instances then increase or decrease the count; so if you over allocated in your instance buffer to begin with.

For example you could have an InstancedBufferAttribute representing 2000 objects, then set .maxInstancedCount = 1 on the InstancedBufferGeometry to only draw one of them.

When you want to add another item update the InstancedBufferAttribute and set .maxInstancedCount = 2 etc, and decrease the same way; you may need to do some rearranging as its a continuous range.

You can also use updateRange with .needsUpdate(true) to only update part of the buffer rather than the whole buffer if you just want to update the buffer for your newly "added" instances.