How to update the topology of a geometry efficiently in ThreeJS?

Question

I want to avoid creating new typed arrays and the consequent gc(). I made my geometry using BufferedGeometry. Upon receiving events, my vertex and the faces indices are updated. I can update the coordinates by setting verticesNeedUpdate but it does not update the faces. The update is called ~20-50 times per second, which can be heavy on the browser. How can I do this by avoiding creating heavy garbage for the JavaScript Garbage Collector? (See method update() below).

function WGeometry77(verts, faces) {
    THREE.Geometry.call( this );
    this.type = 'WGeometry77';
    this.parameters = {};
    // Initially create the mesh the easy way, by copying from a BufferGeometry
    this.fromBufferGeometry( new MyBufferGeometry77( verts, faces ) ); 
};

WGeometry77.prototype = Object.create( THREE.Geometry.prototype );
WGeometry77.prototype.constructor = WGeometry77;

WGeometry77.prototype.update = function(verts, faces) {
    var geom = this;
    var nl = Math.min(geom.vertices.length, verts.length/3);
    for ( var vi = 0; vi < nl; vi ++ ) {
        geom.vertices[ vi ].x = verts[vi*3+0];
        geom.vertices[ vi ].y = verts[vi*3+1];
        geom.vertices[ vi ].z = verts[vi*3+2];
    }
    var nf = Math.min(geom.faces.length, faces.length/3);
    for ( var fi = 0; fi < nf; fi ++ ) {
        geom.faces[ fi ].a = faces[fi*3+0];
        geom.faces[ fi ].b = faces[fi*3+1];
        geom.faces[ fi ].c = faces[fi*3+2];
    }
    geom.verticesNeedUpdate = true;  // Does not update the geom.faces
}

PS. My code is written in Emscripten, which does something like this:

var verts = Module.HEAPF32.subarray(verts_address/_FLOAT_SIZE, verts_address/_FLOAT_SIZE + 3*nverts);

What I want to do is almost animating, or a dynamic geometry (calculated using Marching Cubes). But my topology (the graph of the mesh) is also updated. Which ThreeJS class I should use? If there exists no such class, should I create we create a new class like UpdatableBufferedGeometry?

Answer 1

To update THREE.BufferGeometry after it has rendered, you can use this pattern:

geometry.attributes.position.setXYZ( index, x, y, z );

geometry.attributes.position.needsUpdate = true;

For indexed BufferGeometry, you can change the index array like so:

geometry.index.array[ index ] = value;

geometry.index.needsUpdate = true;

You cannot resize buffers -- only change their contents. You can pre-allocate larger arrays and use

geometry.setDrawRange( 0, numVertices );

three.js r.78