WebGPURenderer: Add PointShadowNode (#1411)

* WebGPURenderer: Add PointShadowNode * Update three.js * Add examples * Update patch and delete examples
three-types · Dec 14, 2024 · ec4e203 · ec4e203
1 parent 3e8a5d8
commit ec4e203
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 4 deletions.
diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch
@@ -13673,6 +13673,70 @@ index 41b56de8..8f7abe1f 100644
      time = (time / 1000) * 2.0;
 
      for (let i = 0; i < lights.length; i++) {
+diff --git a/examples-testing/examples/webgpu_lights_physical.ts b/examples-testing/examples/webgpu_lights_physical.ts
+index 6a050726..7af6c37e 100644
+--- a/examples-testing/examples/webgpu_lights_physical.ts
++++ b/examples-testing/examples/webgpu_lights_physical.ts
+@@ -1,12 +1,18 @@
+-import * as THREE from 'three';
++import * as THREE from 'three/webgpu';
+
+ import Stats from 'three/addons/libs/stats.module.js';
+ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+-let camera, scene, renderer, bulbLight, bulbMat, hemiLight, stats;
+-let ballMat, cubeMat, floorMat;
++let camera: THREE.PerspectiveCamera,
++    scene: THREE.Scene,
++    renderer: THREE.WebGPURenderer,
++    bulbLight: THREE.PointLight,
++    bulbMat: THREE.MeshStandardMaterial,
++    hemiLight: THREE.HemisphereLight,
++    stats: Stats;
++let ballMat: THREE.MeshStandardMaterial, cubeMat: THREE.MeshStandardMaterial, floorMat: THREE.MeshStandardMaterial;
+
+ let previousShadowMap = false;
+
+@@ -37,17 +43,22 @@ const hemiLuminousIrradiances = {
+     '50000 lx (Direct Sun)': 50000,
+ };
+
+-const params = {
++const params: {
++    shadows: boolean;
++    exposure: number;
++    bulbPower: keyof typeof bulbLuminousPowers;
++    hemiIrradiance: keyof typeof hemiLuminousIrradiances;
++} = {
+     shadows: true,
+     exposure: 0.68,
+-    bulbPower: Object.keys(bulbLuminousPowers)[4],
+-    hemiIrradiance: Object.keys(hemiLuminousIrradiances)[0],
++    bulbPower: Object.keys(bulbLuminousPowers)[4] as keyof typeof bulbLuminousPowers,
++    hemiIrradiance: Object.keys(hemiLuminousIrradiances)[0] as keyof typeof hemiLuminousIrradiances,
+ };
+
+ init();
+
+ function init() {
+-    const container = document.getElementById('container');
++    const container = document.getElementById('container')!;
+
+     stats = new Stats();
+     container.appendChild(stats.dom);
+@@ -201,8 +212,8 @@ function init() {
+
+     const gui = new GUI();
+
+-    gui.add(params, 'hemiIrradiance', Object.keys(hemiLuminousIrradiances));
+-    gui.add(params, 'bulbPower', Object.keys(bulbLuminousPowers));
++    gui.add(params, 'hemiIrradiance', Object.keys(hemiLuminousIrradiances) as (keyof typeof hemiLuminousIrradiances)[]);
++    gui.add(params, 'bulbPower', Object.keys(bulbLuminousPowers) as (keyof typeof bulbLuminousPowers)[]);
+     gui.add(params, 'exposure', 0, 1);
+     gui.add(params, 'shadows');
+     gui.open();
 diff --git a/examples-testing/examples/webgpu_lights_rectarealight.ts b/examples-testing/examples/webgpu_lights_rectarealight.ts
 index 5638c902..a274a953 100644
 --- a/examples-testing/examples/webgpu_lights_rectarealight.ts

diff --git a/three.js b/three.js
diff --git a/types/three/src/nodes/lighting/AnalyticLightNode.d.ts b/types/three/src/nodes/lighting/AnalyticLightNode.d.ts
@@ -1,6 +1,8 @@
 import { Light } from "../../lights/Light.js";
 import Node from "../core/Node.js";
+import { ShaderNodeObject } from "../tsl/TSLCore.js";
 import LightingNode from "./LightingNode.js";
+import ShadowNode from "./ShadowNode.js";
 
 declare module "../../lights/LightShadow.js" {
     export interface LightShadow {
@@ -12,4 +14,6 @@ export default class AnalyticLightNode<T extends Light> extends LightingNode {
     light: T | null;
 
     constructor(light?: T | null);
+
+    setupShadowNode(): ShaderNodeObject<ShadowNode>;
 }
diff --git a/types/three/src/nodes/lighting/PointLightNode.d.ts b/types/three/src/nodes/lighting/PointLightNode.d.ts
@@ -2,6 +2,7 @@ import { PointLight } from "../../lights/PointLight.js";
 import Node from "../core/Node.js";
 import { NodeRepresentation, ShaderNodeObject } from "../tsl/TSLCore.js";
 import AnalyticLightNode from "./AnalyticLightNode.js";
+import PointShadowNode from "./PointShadowNode.js";
 
 export const directPointLight: (
     color: NodeRepresentation,
@@ -15,6 +16,8 @@ declare class PointLightNode extends AnalyticLightNode<PointLight> {
     decayExponentNode: Node;
 
     constructor(light?: PointLight | null);
+
+    setupShadowNode(): ShaderNodeObject<PointShadowNode>;
 }
 
 export default PointLightNode;
diff --git a/types/three/src/nodes/lighting/PointShadowNode.d.ts b/types/three/src/nodes/lighting/PointShadowNode.d.ts
@@ -0,0 +1,30 @@
+import { Light } from "../../lights/Light.js";
+import { LightShadow } from "../../lights/LightShadow.js";
+import Node from "../core/Node.js";
+import { NodeRepresentation, ShaderNodeObject } from "../tsl/TSLCore.js";
+import ShadowNode from "./ShadowNode.js";
+
+export const cubeToUV: (pos: NodeRepresentation, texelSizeY: NodeRepresentation) => ShaderNodeObject<Node>;
+
+export const BasicPointShadowFilter: (
+    depthTexture: NodeRepresentation,
+    bd3D: NodeRepresentation,
+    dp: NodeRepresentation,
+    texelSize: NodeRepresentation,
+) => ShaderNodeObject<Node>;
+
+export const PointShadowFilter: (
+    depthTexture: NodeRepresentation,
+    bd3D: NodeRepresentation,
+    dp: NodeRepresentation,
+    texelSize: NodeRepresentation,
+    shadow: NodeRepresentation,
+) => ShaderNodeObject<Node>;
+
+declare class PointShadowNode extends ShadowNode {
+    constructor(light: Light, shadow: LightShadow | null);
+}
+
+export default PointShadowNode;
+
+export const pointShadow: (light: Light, shadow?: LightShadow | null) => ShaderNodeObject<PointShadowNode>;
diff --git a/types/three/src/nodes/lighting/ShadowNode.d.ts b/types/three/src/nodes/lighting/ShadowNode.d.ts
@@ -1,13 +1,35 @@
 import { Light } from "../../lights/Light.js";
 import { LightShadow } from "../../lights/LightShadow.js";
 import Node from "../core/Node.js";
-import { ShaderNodeObject } from "../tsl/TSLCore.js";
+import { NodeRepresentation, ShaderNodeObject } from "../tsl/TSLCore.js";
+
+export const BasicShadowFilter: (
+    depthTexture: NodeRepresentation,
+    shadowCoord: NodeRepresentation,
+) => ShaderNodeObject<Node>;
+
+export const PCFShadowFilter: (
+    depthTexture: NodeRepresentation,
+    shadowCoord: NodeRepresentation,
+    shadow: NodeRepresentation,
+) => ShaderNodeObject<Node>;
+
+export const PCFSoftShadowFilter: (
+    depthTexture: NodeRepresentation,
+    shadowCoord: NodeRepresentation,
+    shadow: NodeRepresentation,
+) => ShaderNodeObject<Node>;
+
+export const VSMShadowFilter: (
+    depthTexture: NodeRepresentation,
+    shadowCoord: NodeRepresentation,
+) => ShaderNodeObject<Node>;
 
 declare class ShadowNode extends Node {
-    constructor(light: Light, shadow: LightShadow);
+    constructor(light: Light, shadow: LightShadow | null);
 }
 
 export default ShadowNode;
 
-export const shadow: (light: Light, shadow: LightShadow) => ShaderNodeObject<ShadowNode>;
+export const shadow: (light: Light, shadow?: LightShadow) => ShaderNodeObject<ShadowNode>;
 export const shadows: ShaderNodeObject<Node>;
+1 −0		examples/files.json
+ −		examples/screenshots/webgpu_lights_physical.jpg
+297 −0		examples/webgpu_lights_physical.html
+13 −10		src/materials/nodes/manager/NodeMaterialObserver.js
+7 −1		src/nodes/lighting/AnalyticLightNode.js
+10 −1		src/nodes/lighting/PointLightNode.js
+254 −0		src/nodes/lighting/PointShadowNode.js
+129 −61		src/nodes/lighting/ShadowNode.js
+2 −0		src/renderers/common/RenderObject.js