WebGPURenderer: Apply fog before tonemapping and encoding

[sunag]

Related: #26857

@mrdoob Do you think we can advance this implementation in WebGPURenderer? it seems important to add transmission in this architecture.

[sunag]

I created an example of how we can solve this in TSL without needing a transparent background.

• webgpu_custom_fog_background

// render scene pass ( the same of css )
const scenePass = pass( scene, camera );
const scenePassViewZ = scenePass.getViewZNode();

// background color
const backgroundColor = color( 0x0066ff );

// get fog factor from scene pass context
// equivalent to: scene.fog = new THREE.Fog( 0x0066ff, 2.5, 4 );
const fogFactor = rangeFog( backgroundColor, 2.5, 4 ).context( { viewZ: scenePassViewZ } );

// tone mapping scene pass
const scenePassTM = scenePass.toneMapping( THREE.ACESFilmicToneMapping );

// mix fog from fog factor and background color
const compose = fogFactor.mix( scenePassTM, backgroundColor );

postProcessing = new PostProcessing( renderer );
postProcessing.outputNode = compose;

/cc @donmccurdy @Mugen87 @LeviPesin

[LeviPesin]

Maybe we can do these just as getters? I.e. something like get viewZ(), get depth() instead of getViewZNode(), getDepthNode()?

[sunag]

I think it's a good idea move to getters, I just will add *Node suffix.

[LeviPesin]

I think this may be quite confusing...

[mrdoob]

@mrdoob Do you think we can advance this implementation in WebGPURenderer? it seems important to add transmission in this architecture.

Sounds good yep!