在 react-three/fiber 中渲染 100 万个盒子

Question

我正在 react-three/fiber 中测试 100 万框的渲染。性能很慢。

function App() {
  const boxes = [];

  for (let i = 0; i < 1000; i++) {
    const x = Math.random();
    const y = Math.random();
    const z = Math.random();

    const box = (
      <mesh position={[x, y, z]}>
        <boxGeometry args={[0.01, 0.01, 0.01]} />
        <meshLambertMaterial color={"red"} />
      </mesh>
    );

    boxes.push(box);
  }

  return (
    <MBox style={{ height: "100vh", width: "100vw" }}>
      <Canvas camera={{ position: [10, 10, 10] }}>
        <pointLight position={[15, 15, 15]} />
        {boxes}
        <OrbitControls />
        <Stats />
      </Canvas>
    </MBox>
  );
}

渲染响应 1000 个框（60 FPS）。有 10000 个盒子时，它会下降到 7 FPS，有点不足。浏览器死于 100000 个框。

计算机专用GPU NVIDIA根本没有使用。

有什么改进性能的想法吗？

Answer 1

使用@Mugen87 的建议得到它。

function Boxes() {
  const meshRef = useRef<InstancedMesh>();
  const tempObject = new Object3D();

  useEffect(() => {
    if (meshRef == null) return;
    if (meshRef.current == null) return;

    let i = 0;
    for (let x = 0; x < 100; x++)
      for (let y = 0; y < 100; y++)
        for (let z = 0; z < 100; z++) {
          const id = i++;
          tempObject.position.set(x, y, z);
          tempObject.scale.set(1, 0.5, 1.5);
          tempObject.updateMatrix();
          meshRef.current.setMatrixAt(id, tempObject.matrix);
        }
    meshRef.current.instanceMatrix.needsUpdate = true;
  }, []);

  return (
    <instancedMesh ref={meshRef} args={[null as any, null as any, 1000000]}>
      <boxGeometry args={[0.1, 0.1, 0.1]}></boxGeometry>
      <meshBasicMaterial />
    </instancedMesh>
  );
}

在 react-three/fiber 中渲染 100 万个盒子

rendering 1 million boxes in react-three/fiber

webgl

three.js

reactjs

react-three-fiber