ShaderChunk: Added transmission alpha support

[mrdoob]

Related issue: #22009 (comment) #22196

Description

The bad news is that these spheres have ALPHA_MODE: OPAQUE set.
And just multiplying the alpha doesn't produce satisfactory results.

Screen.Recording.2021-08-25.at.2.59.00.PM.mov

/cc @elalish

[mrdoob]

I've merged #22428 here and this is how it looks like now:

Screen.Recording.2021-08-25.at.9.46.08.PM.mov

Now it just needs the reflections to be visible on top of red (transparent) somehow...

[elalish]

That's awesome! To recount an offline conversation, I believe there is no way to apply true physically-based rendering to the compositing step where a transparent canvas is stacked on an HTML background. Fundamentally, background-color does not represent light intensity, refraction is impossible, etc. However, it is still a very valuable use case (transparent objects in AR require this since the camera image is not available to JS, not to mention all kinds of cute web design cases). I think it's worth making a non-physical heuristic to handle this situation.

I propose we transform output alpha, where 1 = 1 and 0 = x, where x > 0. I suppose we could try 0.5 and see how it goes. The idea is that opaque objects are opaque, but completely transparent objects are not completely transparent because we calculated specular reflections for them which we do not want composited away. It will definitely have all kinds of weird edges cases, but if we can make it look halfway decent, I think it'll be quite valuable. And it'll have no effect on alpha = false canvases.

[mrdoob]

Okay, now I've bumped again into the TransmissionTexture issue...

Screen.Recording.2021-08-25.at.11.00.10.PM.mov

Notice how TransmissionTexture + Rough Transmission gets bluer the farther it is?

I think these are the roughest areas... It's fetching the smallest mipmaps and the transparent areas and opaque areas gets blurred so end up producing half transparent pixels 😬

[mrdoob]

As per out offline conversation, we decided that the issue above "works as intended".

[mrdoob]

@elalish suggested increasing the transmissionAlpha a bit and we were both surprised with the result 😮

This workaround shouldn't affect alpha: false as it'd clamp at 1.0.

[mrdoob]

White background doesn't look that great though. But I guess better than nothing?

[elalish]

Do you know why the red bands on the top sphere are not showing through? Aren't they alpha = 1, alternating with alpha = 0?

[mrdoob]

Not sure... We'll have to look into it in the next cycle.