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

【问题标题】：Is instancing applicable to a Three.js scene consisting of ExtrudeGeometry meshes with varying geometries?实例化是否适用于由具有不同几何形状的 ExtrudeGeometry 网格组成的 Three.js 场景？
【发布时间】：2021-08-24 22:58:00
【问题描述】：

我有一个 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 吗？但如果我这样做，我还能获得性能上的胜利吗？由于我已经有了坐标数组，我也很乐意使用它们直接构造一个大的坐标缓冲区。

【问题讨论】：

标签： three.js react-three-fiber

【解决方案1】：

实例化与这个场景相关吗？

如果您要渲染大量具有相同几何形状和材质但具有不同变换（以及其他每个实例属性，例如颜色）的对象，则通常可以使用实例化。 p>

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

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

【讨论】：