MeshRefractionMaterial buggy when used on multiple meshes

[philly-d]

The new MeshRefractionMaterial is awesome - thanks for open-sourcing it!

Problem description:

The new material is working great, except something weird happens when it's used in a scene multiple times with different models. It's hard to explain without a demo, so here's a sandbox link. You can see that the second diamond model appears inside the first.

Relevant code:

It looks like the issue is that the bvh uniform on the shader is reused across instances of the material (I don't think it gets cloned during instantiation like other Three.js uniform types)

Suggested solution:

Creating an instance of the bvh uniform inside the MeshRefractionMaterial component with useMemo and passing it to the shader material as a prop resolves the issue for me. You can see this by setting fix = true on line 17 of the sandbox

• three version: 0.144.0
• @react-three/fiber version: 8.8.1
• @react-three/drei version: 9.32.0
• node version: 16.14.0
• yarn version: 1.22.17