Addons: WebGPU CSM shadows - using shadowNode (#1362)

* Addons: WebGPU CSM shadows - using shadowNode

* Update three.js

* Add examples

* Update patch and delete examples

* Updates

* Add examples

* Updates

* Update patch and delete examples

examples-testing/changes.patch

@@ -15598,6 +15598,81 @@ index 4ce8b0a7..d41bc6f4 100644
 
  init();
 
+diff --git a/examples-testing/examples/webgpu_shadowmap_csm.ts b/examples-testing/examples/webgpu_shadowmap_csm.ts
+index fae69709..c503e42a 100644
+--- a/examples-testing/examples/webgpu_shadowmap_csm.ts
++++ b/examples-testing/examples/webgpu_shadowmap_csm.ts
+@@ -1,13 +1,34 @@
+-import * as THREE from 'three';
++import * as THREE from 'three/webgpu';
+
+ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+-import { CSMShadowNode } from 'three/addons/csm/CSMShadowNode.js';
++import { CSMShadowNode, CSMShadowNodeMode } from 'three/addons/csm/CSMShadowNode.js';
+ import { CSMHelper } from 'three/addons/csm/CSMHelper.js';
+
+-let renderer, scene, camera, orthoCamera, controls, csm, csmHelper, csmDirectionalLight;
+-
+-const params = {
++let renderer: THREE.WebGPURenderer,
++    scene: THREE.Scene,
++    camera: THREE.PerspectiveCamera,
++    orthoCamera: THREE.OrthographicCamera,
++    controls: OrbitControls,
++    csm: CSMShadowNode,
++    csmHelper: CSMHelper,
++    csmDirectionalLight: THREE.DirectionalLight;
++
++const params: {
++    orthographic: boolean;
++    fade: boolean;
++    shadows: boolean;
++    maxFar: number;
++    mode: CSMShadowNodeMode;
++    lightX: number;
++    lightY: number;
++    lightZ: number;
++    margin: number;
++    shadowNear: number;
++    shadowFar: number;
++    autoUpdateHelper: boolean;
++    updateHelper: () => void;
++} = {
+     orthographic: false,
+     fade: false,
+     shadows: true,
+@@ -87,8 +108,6 @@ function init() {
+
+     csmDirectionalLight.position.set(params.lightX, params.lightY, params.lightZ).normalize().multiplyScalar(-200);
+
+-    csmDirectionalLight.shadow.shadowNode = csm;
+-
+     scene.add(csmDirectionalLight);
+
+     csmHelper = new CSMHelper(csm);
+@@ -196,8 +215,8 @@ function init() {
+         .name('shadow near')
+         .onChange(function (value) {
+             for (let i = 0; i < csm.lights.length; i++) {
+-                csm.lights[i].shadow.camera.near = value;
+-                csm.lights[i].shadow.camera.updateProjectionMatrix();
++                csm.lights[i].shadow!.camera.near = value;
++                csm.lights[i].shadow!.camera.updateProjectionMatrix();
+             }
+         });
+
+@@ -205,8 +224,8 @@ function init() {
+         .name('shadow far')
+         .onChange(function (value) {
+             for (let i = 0; i < csm.lights.length; i++) {
+-                csm.lights[i].shadow.camera.far = value;
+-                csm.lights[i].shadow.camera.updateProjectionMatrix();
++                csm.lights[i].shadow!.camera.far = value;
++                csm.lights[i].shadow!.camera.updateProjectionMatrix();
+             }
+         });
+
 diff --git a/examples-testing/examples/webgpu_shadowmap_progressive.ts b/examples-testing/examples/webgpu_shadowmap_progressive.ts
 index 5290c670..3bf0ecf6 100644
 --- a/examples-testing/examples/webgpu_shadowmap_progressive.ts

types/three/examples/jsm/csm/CSMFrustum.d.ts

@@ -6,14 +6,20 @@ export interface CSMFrustumVerticies {
 }
 
 export interface CSMFrustumParameters {
+    webGL?: boolean;
     projectionMatrix?: Matrix4;
     maxFar?: number;
 }
 
-export class CSMFrustum {
-    constructor(data?: CSMFrustumParameters);
+declare class CSMFrustum {
+    zNear: number;
     vertices: CSMFrustumVerticies;
+
+    constructor(data?: CSMFrustumParameters);
+
     setFromProjectionMatrix(projectionMatrix: Matrix4, maxFar: number): CSMFrustumVerticies;
     split(breaks: number[], target: CSMFrustum[]): void;
     toSpace(cameraMatrix: Matrix4, target: CSMFrustum): void;
 }
+
+export { CSMFrustum };

types/three/examples/jsm/csm/CSMHelper.d.ts

@@ -10,8 +10,9 @@ import {
 } from "three";
 
 import { CSM } from "./CSM.js";
+import { CSMShadowNode } from "./CSMShadowNode.js";
 
-export class CSMHelper<TCSM extends CSM = CSM> extends Group {
+export class CSMHelper<TCSM extends CSM | CSMShadowNode = CSM | CSMShadowNode> extends Group {
     constructor(csm: TCSM);
     csm: TCSM;
     displayFrustum: boolean;

types/three/examples/jsm/csm/CSMShadowNode.d.ts

@@ -0,0 +1,46 @@
+import { Camera, DirectionalLightShadow, Light, Object3D } from "three";
+import { Node } from "three/tsl";
+import { CSMFrustum } from "./CSMFrustum.js";
+
+export type CSMShadowNodeMode = "uniform" | "logarithmic" | "practical" | "custom";
+
+export interface CSMShadowNodeData {
+    cascades?: number | undefined;
+    maxFar?: number | undefined;
+    mode?: CSMShadowNodeMode | undefined;
+    lightMargin?: number | undefined;
+    customSplitsCallback?:
+        | ((cascades: number, cameraNear: number, cameraFar: number, breaks: number[]) => void)
+        | undefined;
+}
+
+declare class LwLight extends Object3D {
+    target: Object3D;
+    shadow?: DirectionalLightShadow;
+
+    constructor();
+}
+
+declare class CSMShadowNode extends Node {
+    light: Light;
+    camera: Camera | null;
+    cascades: number;
+    maxFar: number;
+    mode: CSMShadowNodeMode;
+    lightMargin: number;
+    customSplitsCallback: (cascades: number, cameraNear: number, cameraFar: number, breaks: number[]) => void;
+
+    fade: boolean;
+
+    breaks: number[];
+    mainFrustum: CSMFrustum | null;
+    frustums: CSMFrustum[];
+
+    lights: LwLight[];
+
+    constructor(light: Light, data?: CSMShadowNodeData);
+
+    updateFrustums(): void;
+}
+
+export { CSMShadowNode };