ShaderChunk: Modulate transmission.a with transmissionFactor

[mrdoob]

Related issue: #22425

Description

Before	After

/cc @elalish

[elalish]

I have no idea what's happening here, but I love the result!

[mrdoob]

By the way, this is how it would look like without the + 0.1 hack:

With the hack:

@elalish what do you think?

[elalish]

The hack looks like it's definitely doing the right thing. The color seems pretty faint; are you sure it should be so low at 0.1? What happens adversely when it's raised?

[mrdoob]

May try to modulate with the reflection too... some other day 😇

[WestLangley]

I would revert these hacks. It makes testing of new features difficult.

This approach is not going to work, because the CSS background needs to be attenuated by the material color.

I expect the only way to possibly do this is to pass a screenshot of the CSS background as a uniform to the shader.

[elalish]

Does it have an effect when the canvas is not set to use alpha? The idea was that it would be constrained only to changing the transparent canvas situation.

You're absolutely right that there's no physical way to do this, but I think it's still important to make a best effort: #22425 (comment)

[WestLangley]

You're absolutely right that there's no physical way to do this

Actually, I was not concerned about being physically correct. I was concerned about being remotely correct. :-)

[mrdoob]

Unfortunately it's not possible to take a screenshot of the css background. So we are trying to get something that looks decent.

But I think this code should only affect cases where alpha: true is passed to WebGLRenderer. Are you saying this is affecting the alpha: false case too?

[WestLangley]

Sorry, I can not comprehend this code, so I do not know what the hacks are doing.

export default /* glsl */`
#ifdef OPAQUE
diffuseColor.a = 1.0;
#endif

// https://github.com/mrdoob/three.js/pull/22425
#ifdef USE_TRANSMISSION
diffuseColor.a *= transmissionAlpha + 0.1;
#endif

gl_FragColor = vec4( outgoingLight, diffuseColor.a );
`;

I think the spheres in the test case all have opaque true. What is the blending function being used ? No blending? Normal blending? As far as I know, we have not agreed on what the alpha type means for three.js.

And diffuseColor.a can be 1.1? What does the compositor do with a value greater than 1? Is it clamped?

I really do not want to have to be concerned about these issues while I am trying to fix the remaining deficiencies in the shaders.

[mrdoob]

You can ignore this

#ifdef OPAQUE
diffuseColor.a = 1.0;
#endif

I'm thinking about reverting the material.format change and setting texture.format = THREE.RGBFormat in GLTFLoader instead.

This is my understanding:

// OPAQUE
material.map.format = THREE.RGBFormat;
material.transparent = false;

// MASK
material.map.format = THREE.RGBAFormat;
// TODO the alpha needs to be used for the mask only
material.alphaTest = alphaCutoff;
material.transparent = false;

// BLEND
material.map.format = THREE.RGBAFormat;
material.transparent = true;

[mrdoob]

@WestLangley

I think the spheres in the test case all have opaque true. What is the blending function being used ? No blending? Normal blending? As far as I know, we have not agreed on what the alpha type means for three.js.

As far as I understand... OPAQUE, MASK and BLEND only apply to material.map.

And diffuseColor.a can be 1.1? What does the compositor do with a value greater than 1? Is it clamped?

As far as I know, values greater than 1 get clamped.

[WestLangley]

// OPAQUE
material.map.format = THREE.RGBFormat;
material.transparent = false;

I would tend to agree. Of course, that means no alpha test using map.a.

// MASK
material.map.format = THREE.RGBAFormat;
// TODO the alpha needs to be used for the mask only
material.alphaTest = alphaCutoff;
material.transparent = false;

Maybe to avoid the transparent restriction it may be sufficient to modify the three.js alpha test code so alpha > alphaTest is set to 1.

// BLEND
material.map.format = THREE.RGBAFormat;
material.transparent = true;

Yes, I think so.

Maybe we need is a material.alphaMask flag? -- or do we just leave this as a GLTFLoader thing?

[WestLangley]

As far as I understand... OPAQUE, MASK and BLEND only apply to material.map.

Based on above, they also control the blending function in three.js

[mrdoob]

Maybe to avoid the transparent restriction it may be sufficient to modify the three.js alpha test code so alpha > alphaTest is set to 1.

Do you mean that if alphaTest > 0 we can force diffuse.a to 1.0 after the discard?

[WestLangley]

Yes. It is my understanding that is what the spec calls for -- when using MASK, set alpha to 1.

When using alpha test with normal blending, then perhaps what we are doing now is OK -- leaving non-discarded alpha as-is.