实例化是否适用于由具有不同几何体的ExtrudeGeometry网格组成的Three.js场景？

Question

我有一个由许多建筑物组成的Three.js场景，这些建筑物是通过堆叠ExtrudeGeometry网格形成的(想想Mapbox GL JS中的建筑物)：

​

​

我使用THREE.Shape和THREE.ExtrudeGeometry (我使用react-three-fiber)创建这些网格：

function coordsToShape(coords) {
  const shape = new Shape();
  let [x, z] = coords[0];
  shape.moveTo(x, z);
  for (const [x, z] of coords.slice(1)) {
    shape.lineTo(x, z);
  }
  return shape;
}

function Floor(props) {
  const {coords, bottom, top, color} = props;

  const shape = coordsToShape(coords);
  const geom = new ExtrudeGeometry(shape, {depth: top - bottom, bevelEnabled: false});

  return (
    <mesh castShadow geometry={geom} position={[0, bottom, 0]} rotation-x={-Math.PI / 2}>
      <meshPhongMaterial color={color} />
    </mesh>
  )
}

然后我堆叠地板来生成场景：

export default function App() {
  return (
    <Canvas>
      { /* lights, controls, etc. */ }
      <GroundPlane />
      <Floor coords={coords1} bottom={0} top={1} color="skyblue" />
      <Floor coords={coords2} bottom={1} top={3} color="pink" />
      <Floor coords={coords3} bottom={0} top={1} color="aqua" />
      <Floor coords={coords4} bottom={1} top={3} color="orange" />
    </Canvas>
  )
}

完整代码/演示here。这将导致一个网格用于地平面，一个网格用于每个建筑截面，因此总共有五个网格。

我已经read，使用instancing来减少网格的数量是一个好主意。实例化是否与此场景相关？大多数实例示例显示的identical geometries具有不同的颜色、位置和旋转。但是几何形状可以改变吗？我应该使用mergeBufferGeometries吗？但如果我这样做了，我还能获得性能上的胜利吗？因为我已经有了坐标数组，所以我也很乐意直接使用它们来构造一个大的坐标缓冲区。

Answer 1

是否与此场景相关？

如果要渲染大量具有相同几何体和材质但具有不同变换(以及其他每个实例的属性，如颜色)的对象，则通常使用实例化。

只有当几何体都可以共享相同的材质时，合并几何体才有意义。因此，如果您需要每个对象不同的颜色，您可以通过定义顶点颜色数据来实现。此外，几何图形应该被认为是静态的，因为如果数据已经合并，执行单独的转换是复杂的。

这两种方法都旨在减少应用程序中绘制调用的数量，这是一个重要的性能指标。尽可能地尝试使用它们。