three.js - 实例化是否适用于由具有不同几何形状的 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

Is instancing relevant to this scene?

如果您要渲染大量具有相同几何形状和 Material 但具有不同变换(以及其他每个实例属性，例如颜色)的对象，则实例化通常适用。
合并几何图形只有在它们都可以共享相同的 Material 时才有意义。因此，如果每个对象需要不同的颜色，则可以通过定义顶点颜色数据来实现。此外，几何图形应被视为静态的，因为如果数据已经合并，则执行单独的转换会很复杂。
这两种方法都旨在降低应用中绘制调用的数量，这是一个重要的性能指标。尽可能尝试使用它们。