Strange interaction between `MeshTransmissionMaterial` and `InstancedMesh`

Questions
, , ,
1

Hi there, I just had something strange happen and I’m hoping someone can explain it to me.

In short, it seems that if there’s a mesh with MeshTransmissionMaterial anywhere on the canvas, Then if the camera looks away from the origin, any instanced meshes vanish. Specifically, this happens when any part of a sphere with radius 1 centered at the origin clips outside the canvas.

As a minimal example:

import { Instance, Instances, MapControls, MeshTransmissionMaterial } from "@react-three/drei"
import { Canvas } from "@react-three/fiber"

export default function App() {
  return (
    <Canvas>
      <MapControls maxPolarAngle={Math.PI / 2} maxDistance={20} minDistance={2} />
      <mesh position={[-4, 4, 1]}>
        <sphereGeometry args={[0.1]} />
        <MeshTransmissionMaterial color={0xcdcdcd} thickness={0.2} anisotropy={0.1} chromaticAberration={0.04} />
      </mesh>
      <mesh>
        <sphereGeometry />
        <meshBasicMaterial color={0xa00505} />
      </mesh>
      <Instances>
        <boxGeometry args={[0.5, 0.5, 0.5]} />
        <meshBasicMaterial color={0x05a005} />
        {[...Array(100)].map((_, i) => <Instance key={'cube-' + i} position={[(i % 10) - 4.5, i / 10 - 4.5, 0]} />)}
      </Instances>
      {[...Array(81)].map((_, i) => <mesh key={'sphere-' + i} position={[(i % 9) - 4, Math.floor(i / 9) - 4, 0]} >
        <sphereGeometry args={[0.25]} />
        <meshBasicMaterial color={0x0505a0} />
      </mesh>)}
    </Canvas>
  )
}

(Sandbox here)

If you pan away from the red sphere at the center, you’ll see the (instanced) cubes disappear, while the (not instanced) spheres remain. You can also see the small sphere with MeshTransmissionMaterial, this is the only mesh with this material and the issue doesn’t seem to be affected by where this mesh is in relation to the camera.

I ended up replacing MeshTransmissionMaterial with MeshPhysicalMaterial and the issue went away, but that solution isn’t satisfying to me. I’d like to understand why it was happening in the first place. My best guess is it’s something to do with the reflections/refractions somehow causing the instanced meshes to be frustum culled, but I’m obviously not a graphics expert and that’s probably way off.

Anyway, if anyone can explain what was happening, I’d greatly appreciate it!

2

Try to set frustumCulled = false for your instanced mesh :thinking:

1 Like
3

Yep, the issue is with frustum culling, the mesh disappears as soon as the red sphere hits the border of the browser window.

replace the Instances component with this:

<Instances frustumCulled={false}>
        <boxGeometry args={[0.5, 0.5, 0.5]} />
        <meshBasicMaterial color={0x05a005} />
        {[...Array(100)].map((_, i) => (
          <Instance
            key={"cube-" + i}
            position={[(i % 10) - 4.5, Math.floor(i / 10) - 4.5, 0]}
          />
        ))}
      </Instances>
1 Like
4

Yep, frustumCulled = false did the trick. Also, thanks @AshhadDevLab for pointing out that it needs to be set on the base instanced mesh, not on each instance, since I got that wrong the first time around.

I’d still love to hear an explanation of how a material caused this behavior, just to satisfy my curiosity.

1 Like