Why is transmission property not working?

Questions
,
1

I have a MeshPhysicalMaterial,

const material = new MeshPhysicalMaterial({
      roughness: 0.1,
      metalness: 0,
      opacity:0.5,
      thickness:5,
      transparent:true,
      transmission:0.8,
      depthWrite:false,
    });

As soon as I set the transmission property to anything above 0, the object just turns completely transparent. Does the transmission property overrides the opacity to 0?
The scene is having a transparent background (alpha=true).

2

From docs : MeshPhysicalMaterial.transmission
“When transmission is non-zero, opacity should be set to 0 .”

1 Like
3

Yeah, but I hv seen enough codepens that play with the opacity also in combination with the transmission property. Codepen
Maybe they are not using the latest version of threejs but even if I set the opacity to 0 and transmission to a non zero value, the transmission property must work right? And the material should not be completely transparent!

4

The docs recommend keeping opacity=0 and transparent=false for transmissive materials because transmission and alpha blending transparency are two separate techniques and you usually only want one, but you’re correct that there shouldn’t be any real problem with using both. The object shouldn’t disappear.

Since it works in the codepen shared above, it sounds like something different is happening in your application … would it be possible to share a new codepen that reproduces the issue?

5

“When transmission is non-zero, opacity should be set to 0 .”

This documentation seems to be incorrect, no? Opacity of 0 means the the object will be fully faded out (though transparent === false then no blending will happen anyway). For a pure transmissive glass look opacity should be left at 1.0 as it defaults to. Then opacity can be thought of as a “fade” to remove objects from the scene. It’s fine to use both together but I agree it’s a bit more of a nuanced and advanced use case.

Here’s a demos letting you adjust both fields: Edit fiddle - JSFiddle - Code Playground

1 Like
6

As soon as I set the transmission property to anything above 0, the object just turns completely transparent. Does the transmission property overrides the opacity to 0?
The scene is having a transparent background (alpha=true).

In terms of help for this issue you’ll have to create a minimal example to demonstrate the problem otherwise people are just guessing at what a fix might be.

7

So, while I was writing a minimal code reproducing the issue, I saw that on the OBJ format of the asset the properties did work as expected but not on the glb format.

8

Ah good catch, thanks! Yes, other forms of transparency should (usually) be disabled when using transmission, thanks for the fix in the docs.

2 Likes