three.js Apply fog before tonemapping and encoding

Related issue: #26208

Sep 27 '23 10:09 mrdoob

📦 Bundle size

Full ESM build, minified and gzipped.

Filesize `dev`	Filesize PR	Diff
649 kB (160.9 kB)	649.6 kB (160.9 kB)	+581 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

Filesize `dev`	Filesize PR	Diff
442.3 kB (107 kB)	442.9 kB (107.1 kB)	+581 B

Sep 27 '23 10:09 github-actions[bot]

So yeah... scene.background should be tonemapped too.

Sep 27 '23 13:09 mrdoob

Refactored WebGLBackground background.isColor code path.

Sep 27 '23 14:09 mrdoob

So yeah... scene.background should be tonemapped too.

This would make my life a lot easier, and this solves one of the problems I'm having when porting transmission materials node-based. To work correctly, the process must work in linear color space while rendering objects and only at the output apply tone mapping and output color space.

Sep 27 '23 14:09 sunag

I agree this is the more correct way to do things! But there will unfortunately be users with problems because they need the background to match something in HTML/CSS. I wish we had some way to apply the inverse of the tone mapping to a color, so users can at least compute a fog or background color that will give them the final background color they want.

Many colors in the sRGB gamut cannot be reached by ACES tone mapping outputs though, so this would also limit your choice of background color. Perhaps AgX will be more flexible there, but I'm not sure.

Or perhaps THREE.Fog could take an alpha value?

Sep 27 '23 14:09 donmccurdy

I like the idea of rendering with alpha and applying it in Fog too, I think it could solve this issue with HTML/CSS? since the transparent background can provide much more possibilities than a single color. This principle could also follow this reasoning https://github.com/mrdoob/three.js/pull/26857#issuecomment-1737487823

Sep 27 '23 15:09 sunag

Some tests using opacity Fog:

Sep 29 '23 17:09 sunag

Considering that many people use gradient backgrounds, this would fit perfectly into any HTML/CSS.

https://github.com/mrdoob/three.js/assets/502810/8406c1a0-ecf6-4160-9f29-a542bdf54170

Sep 29 '23 17:09 sunag

Is this related to https://github.com/mrdoob/three.js/pull/25819?

Sep 30 '23 04:09 LeviPesin

What are the open points in this PR? Do we need add an alpha property to the fog classes?

As mentioned earlier, the status quo is especially confusing when devs use post processing with a scene using fog. As soon as they integrate OutputPass in their pass chain, the scene looks suddenly different compared to the inline tone mapping and color space conversion. Most devs initially think FX is buggy although it actually renders the scene correctly (see https://github.com/mrdoob/three.js/issues/26954#issuecomment-1759574593).

Oct 18 '23 08:10 Mugen87

I'm unable to find the discussion right now... but @elalish was recently dealing with some browsers not doing alpha compositing properly.

That's why I'm not sure about the transparent fog approach.

Oct 19 '23 07:10 mrdoob

As soon as they integrate OutputPass in their pass chain, the scene looks suddenly different compared to the inline tone mapping and color space conversion.

Perhaps related ... when using post-processing: should fog be part of OutputPass, or another effect pass, rather than inline?

Oct 21 '23 18:10 donmccurdy

Perhaps related ... when using post-processing: should fog be part of OutputPass, or another effect pass, rather than inline?

Answering my own question... I think I'd prefer not putting fog into OutputPass.

Mar 05 '24 23:03 donmccurdy

cc https://github.com/mrdoob/three.js/pull/26208#issuecomment-1979865285

Mar 06 '24 00:03 donmccurdy