WebGPURenderer: Volumetric lighting

examples-testing/changes.patch

@@ -16378,7 +16378,7 @@ index f20978b8..46c08191 100644
  init();
 
 diff --git a/examples-testing/examples/webgpu_postprocessing_ao.ts b/examples-testing/examples/webgpu_postprocessing_ao.ts
-index 1957d7a9..d76a7142 100644
+index 1957d7a9..b38fb89f 100644
 --- a/examples-testing/examples/webgpu_postprocessing_ao.ts
 +++ b/examples-testing/examples/webgpu_postprocessing_ao.ts
 @@ -1,7 +1,7 @@
@@ -16410,7 +16410,7 @@ index 1957d7a9..d76a7142 100644
 +    denoisePass: ShaderNodeObject<DenoiseNode>,
 +    blendPassAO: ShaderNodeObject<THREE.Node>,
 +    blendPassDenoise: ShaderNodeObject<THREE.Node>,
-+    scenePassColor: ShaderNodeObject<THREE.Node>;
++    scenePassColor: ShaderNodeObject<THREE.TextureNode>;
 
  const params = {
      distanceExponent: 1,
@@ -17896,6 +17896,103 @@ index 679ce01a..50b5dadf 100644
 
      // Material
 
+diff --git a/examples-testing/examples/webgpu_volume_lighting.ts b/examples-testing/examples/webgpu_volume_lighting.ts
+index feff77f6..ca2a596b 100644
+--- a/examples-testing/examples/webgpu_volume_lighting.ts
++++ b/examples-testing/examples/webgpu_volume_lighting.ts
+@@ -1,5 +1,5 @@
+-import * as THREE from 'three';
+-import { vec3, Fn, time, texture3D, screenUV, uniform, screenCoordinate, pass } from 'three/tsl';
++import * as THREE from 'three/webgpu';
++import { vec3, Fn, time, texture3D, screenUV, uniform, screenCoordinate, pass, ShaderNodeObject } from 'three/tsl';
+
+ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+ import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
+@@ -12,10 +12,10 @@ import Stats from 'three/addons/libs/stats.module.js';
+
+ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+-let renderer, scene, camera;
+-let volumetricMesh, teapot, pointLight, spotLight;
+-let postProcessing;
+-let stats;
++let renderer: THREE.WebGPURenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera;
++let volumetricMesh: THREE.Mesh, teapot: THREE.Mesh, pointLight: THREE.PointLight, spotLight: THREE.SpotLight;
++let postProcessing: THREE.PostProcessing;
++let stats: Stats;
+
+ init();
+
+@@ -91,12 +91,12 @@ function init() {
+     const volumetricMaterial = new THREE.VolumeNodeMaterial();
+     volumetricMaterial.steps = 12;
+     volumetricMaterial.offsetNode = bayer16(screenCoordinate); // Add dithering to reduce banding
+-    volumetricMaterial.scatteringNode = Fn(({ positionRay }) => {
++    volumetricMaterial.scatteringNode = Fn(({ positionRay }: { positionRay: ShaderNodeObject<THREE.Node> }) => {
+         // Return the amount of fog based on the noise texture
+
+         const timeScaled = vec3(time, 0, time.mul(0.3));
+
+-        const sampleGrain = (scale, timeScale = 1) =>
++        const sampleGrain = (scale: number, timeScale = 1) =>
+             texture3D(noiseTexture3D, positionRay.add(timeScaled.mul(timeScale)).mul(scale).mod(1), 0).r.add(0.5);
+
+         let density = sampleGrain(0.1);
+diff --git a/examples-testing/examples/webgpu_volume_lighting_rectarea.ts b/examples-testing/examples/webgpu_volume_lighting_rectarea.ts
+index 23ec92a0..876c0299 100644
+--- a/examples-testing/examples/webgpu_volume_lighting_rectarea.ts
++++ b/examples-testing/examples/webgpu_volume_lighting_rectarea.ts
+@@ -1,5 +1,5 @@
+-import * as THREE from 'three';
+-import { vec3, Fn, time, texture3D, screenUV, uniform, screenCoordinate, pass } from 'three/tsl';
++import * as THREE from 'three/webgpu';
++import { vec3, Fn, time, texture3D, screenUV, uniform, screenCoordinate, pass, ShaderNodeObject } from 'three/tsl';
+
+ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+ import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
+@@ -12,12 +12,12 @@ import Stats from 'three/addons/libs/stats.module.js';
+
+ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+-let renderer, scene, camera;
+-let volumetricMesh, meshKnot;
+-let rectLight1, rectLight2, rectLight3;
+-let clock;
+-let postProcessing;
+-let stats;
++let renderer: THREE.WebGPURenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera;
++let volumetricMesh: THREE.Mesh, meshKnot: THREE.Mesh;
++let rectLight1: THREE.RectAreaLight, rectLight2: THREE.RectAreaLight, rectLight3: THREE.RectAreaLight;
++let clock: THREE.Clock;
++let postProcessing: THREE.PostProcessing;
++let stats: Stats;
+
+ init();
+
+@@ -93,12 +93,12 @@ function init() {
+     const volumetricMaterial = new THREE.VolumeNodeMaterial();
+     volumetricMaterial.steps = 12;
+     volumetricMaterial.offsetNode = bayer16(screenCoordinate); // Add dithering to reduce banding
+-    volumetricMaterial.scatteringNode = Fn(({ positionRay }) => {
++    volumetricMaterial.scatteringNode = Fn(({ positionRay }: { positionRay: ShaderNodeObject<THREE.Node> }) => {
+         // Return the amount of fog based on the noise texture
+
+         const timeScaled = vec3(time, 0, time.mul(0.3));
+
+-        const sampleGrain = (scale, timeScale = 1) =>
++        const sampleGrain = (scale: number, timeScale = 1) =>
+             texture3D(noiseTexture3D, positionRay.add(timeScaled.mul(timeScale)).mul(scale).mod(1), 0).r.add(0.5);
+
+         let density = sampleGrain(0.1);
+@@ -134,7 +134,7 @@ function init() {
+
+     //
+
+-    const createRectLightMesh = rectLight => {
++    const createRectLightMesh = (rectLight: THREE.RectAreaLight) => {
+         const geometry = new THREE.PlaneGeometry(4, 10);
+         const frontMaterial = new THREE.MeshBasicMaterial({ color: rectLight.color, side: THREE.BackSide });
+         const backMaterial = new THREE.MeshStandardMaterial({ color: 0x111111 });
 diff --git a/examples-testing/examples/webgpu_water.ts b/examples-testing/examples/webgpu_water.ts
 index 76e09f1f..edefce0e 100644
 --- a/examples-testing/examples/webgpu_water.ts

src-testing/changes.patch

@@ -3139,7 +3139,7 @@ index 1fe2dbbd..a431897f 100644
 +export const shaderStages: NodeShaderStage[] = [...defaultShaderStages, 'compute'];
  export const vectorComponents = ['x', 'y', 'z', 'w'];
 diff --git a/src-testing/src/nodes/lighting/LightingContextNode.ts b/src-testing/src/nodes/lighting/LightingContextNode.ts
-index e5cac583..821c3c48 100644
+index ee5cf92a..c58f0886 100644
 --- a/src-testing/src/nodes/lighting/LightingContextNode.ts
 +++ b/src-testing/src/nodes/lighting/LightingContextNode.ts
 @@ -1,5 +1,23 @@
@@ -3186,20 +3186,22 @@ index e5cac583..821c3c48 100644
      /**
       * Constructs a new lighting context node.
       *
-@@ -21,7 +45,12 @@ class LightingContextNode extends ContextNode {
+@@ -21,8 +45,13 @@ class LightingContextNode extends ContextNode {
       * @param {?Node<vec3>} [backdropNode=null] - A backdrop node.
       * @param {?Node<float>} [backdropAlphaNode=null] - A backdrop alpha node.
       */
--    constructor(node, lightingModel = null, backdropNode = null, backdropAlphaNode = null) {
+-    constructor(lightsNode, lightingModel = null, backdropNode = null, backdropAlphaNode = null) {
+-        super(lightsNode);
 +    constructor(
-+        node: Node,
++        lightsNode: Node,
 +        lightingModel: LightingModel | null = null,
 +        backdropNode: Node | null = null,
 +        backdropAlphaNode: Node | null = null,
 +    ) {
-         super(node);
++        super(node);
 
          /**
+          * The current lighting model.
 @@ -79,7 +108,7 @@ class LightingContextNode extends ContextNode {
              indirectSpecular,
          };

types/three/examples/jsm/tsl/math/Bayer.d.ts

@@ -0,0 +1,4 @@
+import { ShaderNodeObject } from "three/tsl";
+import { Node } from "three/webgpu";
+
+export const bayer16: (uv: Node) => ShaderNodeObject<Node>;

types/three/src/Three.TSL.d.ts

@@ -285,6 +285,7 @@ export const modInt: typeof TSL.modInt;
 export const modelDirection: typeof TSL.modelDirection;
 export const modelNormalMatrix: typeof TSL.modelNormalMatrix;
 export const modelPosition: typeof TSL.modelPosition;
+export const modelRadius: typeof TSL.modelRadius;
 export const modelScale: typeof TSL.modelScale;
 export const modelViewMatrix: typeof TSL.modelViewMatrix;
 export const modelViewPosition: typeof TSL.modelViewPosition;
@@ -336,6 +337,7 @@ export const numWorkgroups: typeof TSL.numWorkgroups;
 export const objectDirection: typeof TSL.objectDirection;
 export const objectGroup: typeof TSL.objectGroup;
 export const objectPosition: typeof TSL.objectPosition;
+export const objectRadius: typeof TSL.objectRadius;
 export const objectScale: typeof TSL.objectScale;
 export const objectViewPosition: typeof TSL.objectViewPosition;
 export const objectWorldMatrix: typeof TSL.objectWorldMatrix;
@@ -380,6 +382,7 @@ export const range: typeof TSL.range;
 export const rangeFog: typeof TSL.rangeFog;
 export const rangeFogFactor: typeof TSL.rangeFogFactor;
 export const reciprocal: typeof TSL.reciprocal;
+export const lightProjectionUV: typeof TSL.lightProjectionUV;
 export const reference: typeof TSL.reference;
 export const referenceBuffer: typeof TSL.referenceBuffer;
 export const reflect: typeof TSL.reflect;
@@ -416,6 +419,7 @@ export const select: typeof TSL.select;
 export const setCurrentStack: typeof TSL.setCurrentStack;
 export const shaderStages: typeof TSL.shaderStages;
 export const shadow: typeof TSL.shadow;
+export const pointShadow: typeof TSL.pointShadow;
 export const shadowPositionWorld: typeof TSL.shadowPositionWorld;
 export const sharedUniformGroup: typeof TSL.sharedUniformGroup;
 export const shapeCircle: typeof TSL.shapeCircle;

types/three/src/materials/nodes/NodeMaterial.d.ts

@@ -60,7 +60,7 @@ declare class NodeMaterial extends Material {
 
     depthNode: Node | null;
     shadowPositionNode: Node | null;
-    receivedShadowNode: Node | null;
+    receivedShadowNode: () => Node | null;
     castShadowNode: Node | null;
 
     outputNode: Node | null;
@@ -89,6 +89,7 @@ declare class NodeMaterial extends Material {
     setupOutgoingLight(): Node;
     setupLightingModel(builder: NodeBuilder): LightingModel;
     setupLighting(builder: NodeBuilder): Node;
+    setupFog(builder: NodeBuilder, outputNode: Node): Node;
     setupOutput(builder: NodeBuilder, outputNode: Node): Node;
 
     setDefaultValues(material: Material): void;

types/three/src/materials/nodes/VolumeNodeMaterial.d.ts

@@ -1,10 +1,22 @@
+import FunctionNode from "../../nodes/code/FunctionNode.js";
 import Node from "../../nodes/core/Node.js";
+import { ShaderNodeObject } from "../../nodes/tsl/TSLCore.js";
 import NodeMaterial, { NodeMaterialParameters } from "./NodeMaterial.js";
 
+export interface VolumeNodeMaterialParameters extends NodeMaterialParameters {
+    steps?: number | undefined;
+
+    scatteringNode?: Node | null | undefined;
+}
+
 export default class VolumeNodeMaterial extends NodeMaterial {
-    lights: boolean;
     readonly isVolumeNodeMaterial: true;
-    testNode: Node | null;
+
+    steps: number;
+
+    scatteringNode: (params: { positionRay: ShaderNodeObject<Node> }) => Node | null;
+
+    offsetNode?: Node | undefined;
 
     constructor(parameters?: NodeMaterialParameters);
 }

types/three/src/nodes/Nodes.d.ts

@@ -14,7 +14,6 @@ export {
     default as LightingModel,
     LightingModelDirectInput,
     LightingModelDirectRectAreaInput,
-    LightingModelIndirectInput,
     LightingModelReflectedLight,
 } from "./core/LightingModel.js";
 export { default as MRTNode } from "./core/MRTNode.js";
@@ -134,7 +133,7 @@ export { default as EnvironmentNode } from "./lighting/EnvironmentNode.js";
 export { default as HemisphereLightNode } from "./lighting/HemisphereLightNode.js";
 export { default as IESSpotLightNode } from "./lighting/IESSpotLightNode.js";
 export { default as IrradianceNode } from "./lighting/IrradianceNode.js";
-export { default as LightingContextNode } from "./lighting/LightingContextNode.js";
+export { default as LightingContextNode, LightingContext } from "./lighting/LightingContextNode.js";
 export { default as LightingNode } from "./lighting/LightingNode.js";
 export { default as LightProbeNode } from "./lighting/LightProbeNode.js";
 export { default as LightsNode } from "./lighting/LightsNode.js";

types/three/src/nodes/TSL.d.ts

@@ -133,6 +133,7 @@ export * from "./accessors/Lights.js";
 export * from "./lighting/LightingContextNode.js";
 export * from "./lighting/LightsNode.js";
 export * from "./lighting/PointLightNode.js";
+export * from "./lighting/PointShadowNode.js";
 export * from "./lighting/ShadowBaseNode.js";
 export * from "./lighting/ShadowNode.js";
 

types/three/src/nodes/accessors/Lights.d.ts

@@ -4,7 +4,7 @@ import { ShaderNodeObject } from "../tsl/TSLCore.js";
 
 export function lightShadowMatrix(light: Light): ShaderNodeObject<Node>;
 
-export function lightProjectionUV(light: Light): ShaderNodeObject<Node>;
+export function lightProjectionUV(light: Light, position?: Node): ShaderNodeObject<Node>;
 
 export function lightPosition(light: Light): ShaderNodeObject<Node>;
 

types/three/src/nodes/accessors/ModelNode.d.ts

@@ -16,6 +16,7 @@ export const modelWorldMatrix: ShaderNodeObject<ModelNode>;
 export const modelPosition: ShaderNodeObject<ModelNode>;
 export const modelScale: ShaderNodeObject<ModelNode>;
 export const modelViewPosition: ShaderNodeObject<ModelNode>;
+export const modelRadius: ShaderNodeObject<ModelNode>;
 export const modelNormalMatrix: ShaderNodeObject<Node>;
 export const modelWorldMatrixInverse: ShaderNodeObject<UniformNode<Matrix4>>;
 

types/three/src/nodes/accessors/Object3DNode.d.ts

@@ -13,10 +13,12 @@ export default class Object3DNode extends Node {
     static SCALE: "scale";
     static VIEW_POSITION: "viewPosition";
     static DIRECTION: "direction";
+    static RADIUS: "radius";
 }
 
-export const objectDirection: (object3d: Object3D) => ShaderNodeObject<Object3DNode>;
-export const objectWorldMatrix: (object3d: Object3D) => ShaderNodeObject<Object3DNode>;
-export const objectPosition: (object3d: Object3D) => ShaderNodeObject<Object3DNode>;
-export const objectScale: (object3d: Object3D) => ShaderNodeObject<Object3DNode>;
-export const objectViewPosition: (object3d: Object3D) => ShaderNodeObject<Object3DNode>;
+export const objectDirection: (object3d?: Object3D | null) => ShaderNodeObject<Object3DNode>;
+export const objectWorldMatrix: (object3d?: Object3D | null) => ShaderNodeObject<Object3DNode>;
+export const objectPosition: (object3d?: Object3D | null) => ShaderNodeObject<Object3DNode>;
+export const objectScale: (object3d?: Object3D | null) => ShaderNodeObject<Object3DNode>;
+export const objectViewPosition: (object3d?: Object3D | null) => ShaderNodeObject<Object3DNode>;
+export const objectRadius: (object3d?: Object3D | null) => ShaderNodeObject<Object3DNode>;

types/three/src/nodes/core/LightingModel.d.ts

@@ -1,6 +1,6 @@
+import { DirectLightData, DirectRectAreaLightData } from "../lighting/LightsNode.js";
 import Node from "./Node.js";
 import NodeBuilder from "./NodeBuilder.js";
-import StackNode from "./StackNode.js";
 
 export interface LightingModelReflectedLight {
     directDiffuse: Node;
@@ -9,38 +9,23 @@ export interface LightingModelReflectedLight {
     indirectSpecular: Node;
 }
 
-export interface LightingModelDirectInput {
-    lightDirection: Node;
-    lightColor: Node;
+export interface LightingModelDirectInput extends DirectLightData {
+    lightNode: Node;
     reflectedLight: LightingModelReflectedLight;
 }
 
-export interface LightingModelDirectRectAreaInput {
-    lightColor: Node;
-    lightPosition: Node;
-    halfWidth: Node;
-    halfHeight: Node;
+export interface LightingModelDirectRectAreaInput extends DirectRectAreaLightData {
+    lightNode: Node;
     reflectedLight: LightingModelReflectedLight;
-    ltc_1: Node;
-    ltc_2: Node;
 }
 
-export interface LightingModelIndirectInput {
-    radiance: Node;
-    irradiance: Node;
-    iblIrradiance: Node;
-    ambientOcclusion: Node;
-    reflectedLight: LightingModelReflectedLight;
-    backdrop: Node;
-    backdropAlpha: Node;
-    outgoingLight: Node;
+declare class LightingModel {
+    start(builder: NodeBuilder): void;
+    finish(builder: NodeBuilder): void;
+    direct(lightData: LightingModelDirectInput, builder: NodeBuilder): void;
+    directRectArea(lightData: LightingModelDirectRectAreaInput, builder: NodeBuilder): void;
+    indirect(builder: NodeBuilder): void;
+    ambientOcclusion(builder: NodeBuilder): void;
 }
 
-export default class LightingModel {
-    start(input: LightingModelIndirectInput, stack: StackNode, builder: NodeBuilder): void;
-    finish(input: LightingModelIndirectInput, stack: StackNode, builder: NodeBuilder): void;
-    direct(input: LightingModelDirectInput, stack: StackNode, builder: NodeBuilder): void;
-    directRectArea(input: LightingModelDirectRectAreaInput, stack: StackNode, builder: NodeBuilder): void;
-    indirect(input: LightingModelIndirectInput, stack: StackNode, builder: NodeBuilder): void;
-    ambientOcclusion(input: LightingModelIndirectInput, stack: StackNode, builder: NodeBuilder): void;
-}
+export default LightingModel;

types/three/src/nodes/display/PassNode.d.ts

@@ -1,4 +1,5 @@
 import { Camera } from "../../cameras/Camera.js";
+import { Layers } from "../../core/Layers.js";
 import { RenderTarget, RenderTargetOptions } from "../../core/RenderTarget.js";
 import { Scene } from "../../scenes/Scene.js";
 import { Texture } from "../../textures/Texture.js";
@@ -34,6 +35,14 @@ declare class PassNode extends TempNode {
 
     constructor(scope: PassNodeScope, scene: Scene, camera: Camera, options?: RenderTargetOptions);
 
+    setResolution(resolution: number): this;
+
+    getResolution(): number;
+
+    setLayers(layers: Layers): this;
+
+    getLayers(): Layers;
+
     setMRT(mrt: MRTNode | null): this;
 
     getMRT(): MRTNode | null;
@@ -44,7 +53,7 @@ declare class PassNode extends TempNode {
 
     toggleTexture(name: string): void;
 
-    getTextureNode(name?: string): ShaderNodeObject<Node>;
+    getTextureNode(name?: string): ShaderNodeObject<TextureNode>;
 
     getPreviousTextureNode(name?: string): ShaderNodeObject<Node>;
 

types/three/src/nodes/functions/BSDF/LTC.d.ts

@@ -6,4 +6,8 @@ declare const LTC_Evaluate: (
     args: { N: Node; V: Node; P: Node; mInv: Node; p0: Node; p1: Node; p2: Node; p3: Node },
 ) => Node;
 
-export { LTC_Evaluate, LTC_Uv };
+declare const LTC_Evaluate_Volume: (
+    args: { P: Node; p0: Node; p1: Node; p2: Node; p3: Node },
+) => Node;
+
+export { LTC_Evaluate, LTC_Evaluate_Volume, LTC_Uv };