TSL: Add exponentialHeightFogFactor().

[Mugen87]

Related issue: #32613 (comment)

Description

I've experimented with fog code lately and this is the simplest exponential height fog I can think of. You have a density parameter to control the global fog density (similar to densityFogFactor()) and an additional height parameter in world space that defines the height (y-coordinate) threshold when fragments are affected by fog.

Link for testing: https://rawcdn.githack.com/Mugen87/three.js/c0a7e5ee23e4ec5d5ef209727ed352e97aa192f1/examples/webgpu_fog_height.html

I'll temporarily update the builds for testing.

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	355.36 84.47	355.36 84.47	+0 B +0 B
WebGPU	621.34 172.52	621.49 172.57	+158 B +50 B
WebGPU Nodes	619.94 172.27	620.1 172.32	+158 B +51 B

🌳 Bundle size after tree-shaking

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

	Before	After	Diff
WebGL	487.23 119.23	487.23 119.23	+0 B +0 B
WebGPU	692.28 187.78	692.41 187.81	+131 B +33 B
WebGPU Nodes	642.08 175	642.21 175.03	+131 B +34 B

[mrdoob]

I was trying to improve this example and nicoptere mentioned that the fog was too linear.

I was going to add some noise to it and then I remembered we have this other example.

Do we need both? 🤔

[Mugen87]

Something like exponentialHeightFogFactor() along a simple demo is great for NPR graphic styles that you see frequently in the gaming area. A comparable Unity addon would be: https://assetstore.unity.com/packages/vfx/shaders/vertical-fog-74647

A noise driven fog is too heavy for such use cases. I would recommend to keep it as it is and do not go for just height fogs that aim for PBR style realism. The screenshot from Nicolas Barradeau clearly goes that rounte and will end up more expensive.

[mrdoob]

Oh! This is a very nice example:

I'll update ours to something like that.