javascript - THREE.js:如何提高多个合并立方体上多种 Material 的性能？

Question

我使用 THREE.js 一次显示数千个立方体。这些立方体的几何形状已经合并(我一次显示几千个，如果不合并就太慢了)我的一个要求是根据一个值给立方体上色。此处的示例分别为每个立方体着色，但一旦生成超过 1000 个立方体，速度就会非常慢。如果我简单地为所有对象使用一种 Material ，我可以渲染 100,000 多个立方体并且动画仍然流畅。

是否有更好的方法来完成我的需要？

代码

/* snip */
materials = [];
geometry = new THREE.CubeGeometry(20, 20, 20);
mesh = new THREE.Mesh(geometry);
mergedCubes = new THREE.Geometry();

// Create randomly positioned cubes
for (var i = 0; i < numCubes; i++) {
    material = new THREE.MeshBasicMaterial({color:0xffffff * Math.random(),wireframe:false});
    materials.push(material);
    THREE.GeometryUtils.setMaterialIndex(mesh.geometry, i);
    mesh.position.x = Math.random() * 300 - 150;
    mesh.position.y = Math.random() * 300 - 150;
    mesh.position.z = Math.random() * 300 - 150;
    THREE.GeometryUtils.merge(mergedCubes, mesh);
}

// Create merged mesh
group = new THREE.Mesh(mergedCubes, new THREE.MeshFaceMaterial( materials ));
group.matrixAutoUpdate = false;
group.updateMatrix();
/* snip */

jsfiddle

Answer 1

一种方法是拆分差异 - 如果您计算较少数量的 Material 并将它们分配给立方体会怎么样。如果使用一种 Material 的性能快几个数量级，那么我敢猜测，拥有数十种甚至数百种 Material 会比拥有数千种 Material 快得多。

因此，在立方体循环之外计算您的 Material 数组，然后根据 Material 数组中的随机位置分配它们。