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

* CSM shadows - using shadowNode

* remove accidentally included file

* remove test logging

* Update CSMShadowNode.js

Fix main frustum with WebGL backend.

* rework

* handle camera changes

* CSMShadowNode: Clean up.

* CMSShadowNode: Fix cascade sampling.

* E2E: Update screenshot.

* CSMShadowNode: Clean up.

---------

Co-authored-by: aardgoose <angus.sawyer@email.com>
Co-authored-by: Michael Herzog <michael.herzog@human-interactive.org>

examples/files.json

@@ -411,6 +411,7 @@
 		"webgpu_sandbox",
 		"webgpu_shadertoy",
 		"webgpu_shadowmap",
+		"webgpu_shadowmap_csm",
 		"webgpu_shadowmap_opacity",
 		"webgpu_shadowmap_progressive",
 		"webgpu_shadowmap_vsm",

examples/jsm/csm/CSM.js

@@ -11,7 +11,7 @@ import { CSMFrustum } from './CSMFrustum.js';
 import { CSMShader } from './CSMShader.js';
 
 const _cameraToLightMatrix = new Matrix4();
-const _lightSpaceFrustum = new CSMFrustum();
+const _lightSpaceFrustum = new CSMFrustum( { webGL: true } );
 const _center = new Vector3();
 const _bbox = new Box3();
 const _uniformArray = [];
@@ -38,7 +38,7 @@ export class CSM {
 		this.lightMargin = data.lightMargin || 200;
 		this.customSplitsCallback = data.customSplitsCallback;
 		this.fade = false;
-		this.mainFrustum = new CSMFrustum();
+		this.mainFrustum = new CSMFrustum( { webGL: true } );
 		this.frustums = [];
 		this.breaks = [];
 

examples/jsm/csm/CSMFrustum.js

@@ -8,6 +8,8 @@ class CSMFrustum {
 
 		data = data || {};
 
+		this.zNear = data.webGL === true ? - 1 : 0;
+
 		this.vertices = {
 			near: [
 				new Vector3(),
@@ -33,6 +35,7 @@ class CSMFrustum {
 
 	setFromProjectionMatrix( projectionMatrix, maxFar ) {
 
+		const zNear = this.zNear;
 		const isOrthographic = projectionMatrix.elements[ 2 * 4 + 3 ] === 0;
 
 		inverseProjectionMatrix.copy( projectionMatrix ).invert();
@@ -42,10 +45,10 @@ class CSMFrustum {
 		// 2 --- 1
 		// clip space spans from [-1, 1]
 
-		this.vertices.near[ 0 ].set( 1, 1, - 1 );
-		this.vertices.near[ 1 ].set( 1, - 1, - 1 );
-		this.vertices.near[ 2 ].set( - 1, - 1, - 1 );
-		this.vertices.near[ 3 ].set( - 1, 1, - 1 );
+		this.vertices.near[ 0 ].set( 1, 1, zNear );
+		this.vertices.near[ 1 ].set( 1, - 1, zNear );
+		this.vertices.near[ 2 ].set( - 1, - 1, zNear );
+		this.vertices.near[ 3 ].set( - 1, 1, zNear );
 		this.vertices.near.forEach( function ( v ) {
 
 			v.applyMatrix4( inverseProjectionMatrix );

examples/jsm/csm/CSMHelper.js

@@ -78,6 +78,8 @@ class CSMHelper extends Group {
 		const cascadePlanes = this.cascadePlanes;
 		const shadowLines = this.shadowLines;
 
+		if ( camera === null ) return;
+
 		this.position.copy( camera.position );
 		this.quaternion.copy( camera.quaternion );
 		this.scale.copy( camera.scale );