Как эффективно обновить топологию геометрии в ThreeJS?

Question

Я хочу избежать создания новых типизированных массивов и последующего gc(). Я сделал свою геометрию с использованием BufferedGeometry. После получения событий обновляются мои вершины и индексы faces. Я могу обновить координаты, установив verticesNeedUpdate, но он не обновляет лица. Обновление называется ~ 20-50 раз в секунду, что может быть тяжелым в браузере. Как я могу это сделать, избегая создания мусора для сборщика мусора JavaScript? (См. Метод update() ниже).

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. Мой код написан в Emscripten, что делает что-то вроде этого:

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

То, что я хочу сделать, это почти анимировать, или динамической геометрии (рассчитанной с использованием марширует кубы). Но моя топология (график сетки) также обновляется. Какой класс 3JS я должен использовать? Если такого класса нет, следует ли создать новый класс, например UpdatableBufferedGeometry?

Answer 1

Чтобы обновить THREE.BufferGeometry после его визуализации, вы можете использовать этот шаблон:

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

geometry.attributes.position.needsUpdate = true; 

индексированных BufferGeometry, вы можете изменить index массив так:

geometry.index.array[ index ] = value; 

geometry.index.needsUpdate = true; 

Вы не можете RESI ze buffers - только изменить их содержимое. Вы можете предварительно выделить большие массивы и использовать

geometry.setDrawRange(0, numVertices); 

Three.js R.78

Answer 2

Если вам нужна эффективность, вы должны создать BufferGeometry вместо Geometry.

Вы можете использовать исходный код этого примера в качестве ссылки: http://threejs.org/examples/#webgl_buffergeometry_uint