MeshTransmissionMaterial got strange behaviour

Questions
,
1

Hi guys,
I am currently trying to achieve this scene logic:

Capture d’écran 2024-12-14 à 12.34.52
Capture d’écran 2024-12-14 à 12.34.521920×1376 51.8 KB

So having MeshTransmission Material in center of the scene, creating some “blurry” effect with the text and red plane behind the transmission mesh.

With Three (r3f) and the MeshTransmissionMaterial currently got this behaviour:

Capture d’écran 2024-12-14 à 12.39.16
Capture d’écran 2024-12-14 à 12.39.161920×1474 67.3 KB

Why the green plane is “reflected” one the mesh transmission material ? And does somebody know how to prevent that ?
Here the current sandbox

2

Did you find a solution for this? If so would love a breakdown.

3

If you check the codesandbox link posted above, it looks like the solution has been found (here’s the part with the code).

2 Likes
4

Yeah I did notice the use of the ‘useFBO’ hook but at the time I was unsuccessful in integrating it in my own project. I was hoping for a bit of context so I could better understand what the solution was doing…

However in the meantime I kept taking stabs at it and I managed to implement the solution with a bit of help from AI to understand what was happening in the useFrame.

For anyone else who comes across this, and wishes to ‘exclude’ a ‘mesh’ from being ‘visible’ to another mesh, the logic is as follows:

  1. Get reference to the mesh you wish to exclude
  2. Create a ‘render target’ using ‘useFBO’ hook
  3. Pass the render target to the ‘buffer’ property on the MeshTransmissionMaterial
  4. Use useFrame hook to:
    • Hide the object you don’t want effected by the transmission material
    • Set the created ‘render target’ using the useFBO hook by with the setRenderTarget method
    • Render the scene by passing in the current scene + camera
    • Set the render target to null using the setRenderTarget method
    • Unhide the initial object that we hid from the scene.

Hope that provides clarity on the solution.

Happy coding!

1 Like
5

Hey, sorry didn’t got time to!
For you and for the others: MeshTransmissionMaterial - Drei , as you can see on the MeshTransmissionMat doc :

  buffer?: THREE.Texture
  /** transmissionSampler, you can use the threejs transmission sampler texture that is
   *  generated once for all transmissive materials. The upside is that it can be faster if you
   *  use multiple MeshPhysical and Transmission materials, the downside is that transmissive materials
   *  using this can't see other transparent or transmissive objects nor do you have control over the
   *  buffer and its resolution, default: false */

That was the trick!

2 Likes