WebGPURenderer: Apply fog before tonemapping and encoding (#868)

* WebGPURenderer: Apply fog before tonemapping and encoding

* Add examples

* Updates

* Update patch

* Delete examples

examples-testing/changes.patch

@@ -3384,7 +3384,7 @@ index 5f45e45..cb3cbdf 100644
 
              render();
 diff --git a/examples-testing/examples/webgl_clipping_stencil.ts b/examples-testing/examples/webgl_clipping_stencil.ts
-index 365087d..9dd56a1 100644
+index aec09f6..5f0feae 100644
 --- a/examples-testing/examples/webgl_clipping_stencil.ts
 +++ b/examples-testing/examples/webgl_clipping_stencil.ts
 @@ -3,9 +3,13 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -12918,10 +12918,10 @@ index 2e42ab5..9ea1dde 100644
      renderer.render(scene, camera);
 
 diff --git a/examples-testing/examples/webgl_shadowmesh.ts b/examples-testing/examples/webgl_shadowmesh.ts
-index fd26313..203f44d 100644
+index 01fd853..4cf69fe 100644
 --- a/examples-testing/examples/webgl_shadowmesh.ts
 +++ b/examples-testing/examples/webgl_shadowmesh.ts
-@@ -12,18 +12,18 @@ const renderer = new THREE.WebGLRenderer();
+@@ -12,18 +12,18 @@ const renderer = new THREE.WebGLRenderer({ stencil: true });
 
  const sunLight = new THREE.DirectionalLight('rgb(255,255,255)', 3);
  let useDirectionalLight = true;
@@ -13591,7 +13591,7 @@ index 6aadaf2..bb7fa30 100644
  init();
  animate();
 diff --git a/examples-testing/examples/webgpu_backdrop_area.ts b/examples-testing/examples/webgpu_backdrop_area.ts
-index a40092c..9dc155c 100644
+index 5561ada..74fed79 100644
 --- a/examples-testing/examples/webgpu_backdrop_area.ts
 +++ b/examples-testing/examples/webgpu_backdrop_area.ts
 @@ -24,8 +24,8 @@ import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
@@ -13605,7 +13605,7 @@ index a40092c..9dc155c 100644
 
  init();
 
-@@ -137,13 +137,13 @@ function init() {
+@@ -136,13 +136,13 @@ function init() {
      };
 
      const gui = new GUI();
@@ -13864,6 +13864,21 @@ index c89b95f..60e0571 100644
      const time = (currentTime - startTime) / 1000;
 
      object.position.y = 0.8;
+diff --git a/examples-testing/examples/webgpu_custom_fog_background.ts b/examples-testing/examples/webgpu_custom_fog_background.ts
+index 9f06a5a..5b5f93c 100644
+--- a/examples-testing/examples/webgpu_custom_fog_background.ts
++++ b/examples-testing/examples/webgpu_custom_fog_background.ts
+@@ -10,8 +10,8 @@ import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
+-let camera, scene, renderer;
+-let postProcessing;
++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: WebGPURenderer;
++let postProcessing: PostProcessing;
+
+ init();
+
 diff --git a/examples-testing/examples/webgpu_lights_ies_spotlight.ts b/examples-testing/examples/webgpu_lights_ies_spotlight.ts
 index 1430a29..58b951d 100644
 --- a/examples-testing/examples/webgpu_lights_ies_spotlight.ts

types/three/examples/jsm/nodes/Nodes.d.ts

@@ -274,6 +274,7 @@ export {
 } from "./accessors/PositionNode.js";
 export { default as ReferenceNode, reference, referenceBuffer } from "./accessors/ReferenceNode.js";
 export { default as ReflectVectorNode, reflectVector } from "./accessors/ReflectVectorNode.js";
+export { default as RendererReferenceNode, rendererReference } from "./accessors/RendererReferenceNode.js";
 export { default as SkinningNode, skinning } from "./accessors/SkinningNode.js";
 export { default as StorageBufferNode, storage, storageObject } from "./accessors/StorageBufferNode.js";
 export {

types/three/examples/jsm/nodes/accessors/RendererReferenceNode.d.ts

@@ -0,0 +1,16 @@
+import Renderer from "../../renderers/common/Renderer.js";
+import { NodeTypeOption } from "../core/constants.js";
+import { ShaderNodeObject } from "../shadernode/ShaderNode.js";
+import ReferenceNode from "./ReferenceNode.js";
+
+export default class RendererReferenceNode extends ReferenceNode<Renderer> {
+    renderer: Renderer | null;
+
+    constructor(property: string, inputType: NodeTypeOption, renderer?: Renderer | null);
+}
+
+export const rendererReference: (
+    name: string,
+    type: NodeTypeOption,
+    renderer?: Renderer | null,
+) => ShaderNodeObject<RendererReferenceNode>;

types/three/examples/jsm/nodes/display/PassNode.d.ts

@@ -25,6 +25,8 @@ export default class PassNode extends TempNode {
 
     getTextureDepthNode(): ShaderNodeObject<PassTextureNode>;
 
+    getViewZNode(): ShaderNodeObject<Node>;
+
     getDepthNode(): ShaderNodeObject<Node>;
 
     setSize(width: number, height: number): void;

types/three/examples/jsm/nodes/display/ToneMappingNode.d.ts

@@ -1,4 +1,5 @@
 import { ToneMapping } from "three";
+import RendererReferenceNode from "../accessors/RendererReferenceNode.js";
 import Node from "../core/Node.js";
 import TempNode from "../core/TempNode.js";
 import { NodeRepresentation, ShaderNodeObject } from "../shadernode/ShaderNode.js";
@@ -19,3 +20,14 @@ export const toneMapping: (
     exposure: NodeRepresentation,
     color?: NodeRepresentation,
 ) => ShaderNodeObject<ToneMappingNode>;
+export const toneMappingExposure: ShaderNodeObject<RendererReferenceNode>;
+
+declare module "../shadernode/ShaderNode.js" {
+    interface NodeElements {
+        toneMapping: (
+            color: NodeRepresentation,
+            mapping?: NodeRepresentation,
+            exposure?: NodeRepresentation,
+        ) => ShaderNodeObject<ToneMappingNode>;
+    }
+}

types/three/examples/jsm/nodes/fog/FogNode.d.ts

@@ -1,16 +1,21 @@
 import Node from "../core/Node.js";
+import NodeBuilder from "../core/NodeBuilder.js";
 import { NodeRepresentation, ShaderNodeObject } from "../shadernode/ShaderNode.js";
 
 export default class FogNode extends Node {
     isFogNode: true;
-    colorNode: Node;
-    factorNode: Node;
+    colorNode: Node | null;
+    factorNode: Node | null;
 
-    constructor(colorNode: Node, factorNode: Node);
-    mixAssign(outputNode: Node): Node;
+    constructor(colorNode: Node | null, factorNode: Node | null);
+
+    getViewZNode(builder: NodeBuilder): Node;
 }
 
-export const fog: (colorNode: NodeRepresentation, factorNode: NodeRepresentation) => ShaderNodeObject<FogNode>;
+export const fog: (
+    colorNode: NodeRepresentation | null,
+    factorNode: NodeRepresentation | null,
+) => ShaderNodeObject<FogNode>;
 
 declare module "../shadernode/ShaderNode.js" {
     interface NodeElements {

types/three/examples/jsm/nodes/fog/FogRangeNode.d.ts

@@ -1,16 +1,20 @@
 import Node from "../core/Node.js";
-import { ShaderNodeObject } from "../shadernode/ShaderNode.js";
+import { NodeRepresentation, ShaderNodeObject } from "../shadernode/ShaderNode.js";
 import FogNode from "./FogNode.js";
 
 export default class FogRangeNode extends FogNode {
     isFogRangeNode: true;
-    nearNode: Node;
-    farNode: Node;
+    nearNode: Node | null;
+    farNode: Node | null;
 
-    constructor(colorNode: Node, nearNode: Node, farNode: Node);
+    constructor(colorNode: Node | null, nearNode: Node | null, farNode: Node | null);
 }
 
-export const rangeFog: (colorNode: Node, nearNode: Node, farNode: Node) => ShaderNodeObject<FogRangeNode>;
+export const rangeFog: (
+    colorNode: NodeRepresentation | null,
+    nearNode: NodeRepresentation | null,
+    farNode: NodeRepresentation | null,
+) => ShaderNodeObject<FogRangeNode>;
 
 declare module "../shadernode/ShaderNode.js" {
     interface NodeElements {