How to modify shadow node graph in WebGPURenderer?

Questions
,
1

I am having issues with shadows in WebGPURenderer. How do I customize the VSM shadow node graph to inject and tweak logic?

For example, I want to add edge fade for the shadow map to the existing logic.

2

I wasn’t able to figure out how to patch the shader TSL for a particular object or light, but was able to do so globally by patching the ShadowNode.prototype.setupShadowFilter method (and other methods can be similarly patched):

			const originalSetupShadowFilter = THREE.ShadowNode.prototype.setupShadowFilter;

			THREE.ShadowNode.prototype.setupShadowFilter = function ( builder, inputs ) {

				// portion of shadow map UV space along edges to fade
				const fadePortion = 0.05;

				const base = originalSetupShadowFilter.call( this, builder, inputs );
				const uv = inputs.shadowCoord.xy;

				// Distance to nearest edge of the shadow UV box
				const edgeDist = min( min( uv.x, uv.x.oneMinus() ), min( uv.y, uv.y.oneMinus() ) );

				// Fade: 1 at the very edge, 0 inside (only if in a shadow)
				const fade = sub( 1, smoothstep( 0, fadePortion, edgeDist ) );
				return mix( base, 1, fade );

			};

This helped me solve the issue I had here: