# How to modify shadow node graph in WebGPURenderer?

**URL:** <https://discourse.threejs.org/t/how-to-modify-shadow-node-graph-in-webgpurenderer/89048>\
**Category:** Questions\
**Tags:** shadows, tsl\
**Created:** [January 9, 2026, 8:48pm UTC](https://discourse.threejs.org/t/how-to-modify-shadow-node-graph-in-webgpurenderer/89048 "2026-01-09T20:48:59Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [January 9, 2026, 8:48pm UTC](https://discourse.threejs.org/t/how-to-modify-shadow-node-graph-in-webgpurenderer/89048/1 "2026-01-09T20:48:59Z")

</div>

I am having [issues with shadows in WebGPURenderer](https://discourse.threejs.org/t/shadow-banding-with-webgpurenderer-vsmshadowmap/89017). 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.

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [January 10, 2026, 11:08am UTC](https://discourse.threejs.org/t/how-to-modify-shadow-node-graph-in-webgpurenderer/89048/2 "2026-01-10T11:08:13Z")

</div>

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):

```js
			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:

> [@Shadow banding with WebGPURenderer VSMShadowMap](https://discourse.threejs.org/t/shadow-banding-with-webgpurenderer-vsmshadowmap/89017/3):
>
> However there’s still a “shadow” at the edge to the shadow map that I’m not sure how to get rid of: (other lines are light/camera helpers) How do we get rid of that edge-of-shadow-map artifact? Turning down the resolution from 1024 to 512 (and adjusting blur/samples to get a desired shadow), I can now see three edges of the shadow map: How do we get rid of those? EDIT: same problem here: [Hide line from Shadow - …](https://discourse.threejs.org/t/hide-line-from-shadow/53656/10)