BVH rebuilds its internal tree at each frame which makes it unusable

[merwaaan]

• three version: 0.158.0
• @react-three/fiber version: 8.15.10
• @react-three/drei version: 0.88.11

Problem description:

The BVH component rebuilds its internal tree at each frame, which makes it unusably slow.

It uses a useEffect without dependencies, so the effect and its cleanup function are ran at each render. The effect computes an internal tree for each child mesh that does not have one. The cleanup destroys those trees. So at each render, all the trees are recomputed which is very slow for large meshes.

Given that this component aims at speeding up raycasting for large meshes, this behavior makes it unusable.

Relevant code:

https://github.com/pmndrs/drei/blob/3a3e3ec9c5292144df8e12ec3759af46ffdca74a/src/core/useBVH.tsx#L79-L106

[mynameisgump]

If you're looking for a potential work around I had luck with this issue previously by memoizing the BVH component wrapped around the meshes I wanted to use it on. Example:

const Example1 = () => (
  // This will re-calc the bounds tree on re-render and cause lag
  <Canvas>
    <Bvh>
      <BigMesh />
    </Bvh>
  </Canvas>
);
const Example2 = () => {
  // Bounds tree is only calculated once since BVH component persists on re-render
  const bvhMesh = useMemo(
    () => (
      <Bvh>
        <BigMesh />
      </Bvh>
    ),
    []
  );
  return <Canvas>{bvhMesh}</Canvas>;
};

[mynameisgump]

Solved by https://github.com/pmndrs/drei/pull/1718#issue-1993705837, so issue can be closed