Examples: Add basic fog scattering demo.

[Mugen87]

Related issue: -

Description

The main purpose of fog in three.js is to fade objects into the background color. Just this fade-out on its own does not look very realistic though since fog has the property to scatter light that travels through it. One way to simulate this is with volumetric rendering but that's in general an expensive technique. The PR demonstrates a simple approach that works on a wide variety of devices and produces a slightly more realistic fog.

The idea is to render the scene with fog as usual but then an additional (downsampled) blurred version. The fog factor is then used to compose both together. Since blurring and fog factor computation are decoupled, you can choose any technique for fog (range, density) and blur (gauss, box, hash) you like.

Related Unity discussion: https://discussions.unity.com/t/screen-space-multiple-scattering/649273

Live link: https://rawcdn.githack.com/Mugen87/three.js/42e4d545dba4e9b821f5e35391e7bb809d8653b4/examples/webgpu_custom_fog_scattering.html

The demo reuses the scene setup of webgpu_custom_fog which is ideal to showcase the effect.

[sunag]

I loved it, it looks so much nicer :)

[Mugen87]

@sunag I've seen you have already implemented a custom "height fog" in webgpu_custom_fog which is great!

Certain Game Engines like Unreal or Unity provide a (exponential) height fog (built-in or via addons). Sometimes this is also called "vertical fog".

https://dev.epicgames.com/documentation/en-us/unreal-engine/exponential-height-fog-in-unreal-engine
https://assetstore.unity.com/packages/vfx/shaders/vertical-fog-74647
https://assetstore.unity.com/packages/tools/urp-vertical-fog-175935

Do you think it makes sense to add THREE.FogHeight next to THREE.Fog (range) and THREE.FogExp2 (density)? We could support it for WebGPURenderer first and when there is a demand backport it to WebGLRenderer. The Unreal component has a lot of parameters but for starters color, density and height should be sufficient. The latter one would be a y-coordinate in world space which defines where the fog starts meaning everything below this height is affected by fog. Decreasing height means increasing fog density. The density parameter controls the general, global density of the fog. An additional heightFalloff parameter could provide even more control about how fast the fog becomes dense.

What do you think?

[sunag]

I created an experimental example just to show the possibilities; we could rework it to do something better too.

About THREE.FogHeight, I find the old method using scene.fog = THREE.Fog* is more limited compared to scene.fogNode = node;

I saw an example of its use on the X. I think we should encourage this usage?
https://x.com/Andersonmancini/status/1998696760554701127

Some reasons that I see currently using node:

• You can import custom fog from NPM.
• Everything is procedural; you can even replace the uniforms with constants to optimize, or modify anything.
• No internal shader library needed, tree-shaking compatible. ( We can improve this in the future using TSL to restructuring the classes, but that's just considering the current scenario. )

I think instead we could simplify it using TSL Fn to something like:

import { exponentialHeightFog } from '...';

scene.sceneFog = exponentialHeightFog( ... );

The old method will probably start needing more and more parameters to meet different needs, as we saw happen in Unreal. I can't see it in a very positive way; I think it's moving away from a modular system.

[Mugen87]

Indeed! The node system is much more modular and starting with a TSL function is the right thing to do.