javascript - 如何快速更新一个大的 BufferGeometry？

Question

我正在使用 BufferGeometry 来绘制构成地形的数千个立方体，但是如果我需要更改其中一个立方体的位置，我很难找到如何更新几何体。例如，我有这段代码来初始化我的几何图形:(我正在对 this example 的更新版本进行测试)

// 12 triangles per cube (6 quads)
var triangles = 12 * 150000;

var geometry = new THREE.BufferGeometry();
geometry.attributes = {

    position: {
        itemSize: 3,
        array: new Float32Array( triangles * 3 * 3 ),
        numItems: triangles * 3 * 3
    },

    normal: {
        itemSize: 3,
        array: new Float32Array( triangles * 3 * 3 ),
        numItems: triangles * 3 * 3
    },

    color: {
        itemSize: 3,
        array: new Float32Array( triangles * 3 * 3 ),
        numItems: triangles * 3 * 3
    }
}

positions = geometry.attributes.position.array;
normals = geometry.attributes.normal.array;
colors = geometry.attributes.color.array;

如果我移动一个立方体，在我这样做之前它不会显示为已移动:

geometry.attributes.position.needsUpdate = true;

这会导致 FPS 在更新时下降。还有其他方法可以做到这一点吗？当我只改变一个立方体(12 个三 Angular 形/36 个顶点)时，似乎有点不必要。虽然它可能是 - 我还没有检查 needsUpdate 实际做了什么。猜测它再次将数组发送到着色器。

我想我可以将几何体拆分成单独的较小 BufferGeometries，但我不确定这是否有助于提高整体性能。据我了解，更多的几何图形 = 更少的 FPS。

如果有人知道我将如何做到这一点，我将不胜感激! :) 除了更新问题，BufferGeometry 似乎正是我所需要的。谢谢!

Answer 1

自 r71 threejs 支持 bufferSubData .

使用 DynamicBufferAttribute , (或者正确设置 updateRange)

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;