Depth-based fog transparency effect to blend with the page background

[Oletus]

Description

A way to seamlessly blend a scene with the page background color can be useful for cases that mix together 3D and other page content. Leaving the background blank is already possible, but in addition to this, it could be good to also have fog-like fading to the page background (whether it's a solid color or something else).

This would also add a way to match the "fog color" with the page background color in case we start applying regular fog before tone mapping. Applying fog before tone mapping which would be more physically correct, but would make it more difficult to match the fog color with the page background. Or in some cases impossible - see #26208 (comment) .

Solution

To support fog-like fading to the page background, we could render a depth pass in addition to the normal color pass, and then set the alpha values of the WebGL default framebuffer according to fog computed from the depth pass.

This could be implemented as an EffectComposer pass without changing any of the core library.

There are fairly significant downsides like the extra performance cost and not having control over blending between the rendered color and the background color, but these might be worthwhile tradeoffs for some use cases.

Alternatives

Simply rendering objects as semi-transparent according to their depth wouldn't work, since we want the scene objects to be blended only with the page background, not with each other.

The use case is probably uncommon enough that it doesn't need to be supported inside the core library.

Additional context

Reference discussion: #26208 (comment)