How to quickly update a large BufferGeometry?

Question

I\'m using a BufferGeometry to draw thousands of cubes which makes up the terrain, but having a hard time finding out how to update the geometry if I need to change the posi

Answer 1

I had the same problem with a very large BufferGeometry when updating a few vertices in it.

A solution is to use _gl.bufferSubData instead of _gl.bufferData to update just a part of the buffer. (Three js uses only _gl.bufferData).

So if you update the positions you will do:

// Create a view of the data to update from index offsetSub to offsetSubEnd

var view = geometry.attributes.position.array.subarray(offsetSub, offsetSubEnd);

// Bind the buffer for positions (get the gl context with webglrenderer)

_gl.bindBuffer(_gl.ARRAY_BUFFER, geometry.attributes.position.buffer);

// Insert the new values at good index in gpu buffer (offsetGeometry is in byte)

_gl.bufferSubData(_gl.ARRAY_BUFFER, offsetGeometry,view);

Note that this solution can be slower if you change a large part of the buffer vertices compared to _gl.bufferData.

Answer 2

As of r71 threejs supports bufferSubData.

Use a DynamicBufferAttribute, (or just set updateRange correctly)

var positionAttr = geometry.attributes.position 
// if not using DynamicBufferAttribute initialize updateRange:
// positionAttr.updateRange = {};
positionAttr.updateRange.offset = 0; // where to start updating
positionAttr.updateRange.count = 1; // how many vertices to update
positionAttr.needsUpdate = true;