# How to do that like Sketchfab setting border fade in shadow ground plane

**URL:** <https://discourse.threejs.org/t/how-to-do-that-like-sketchfab-setting-border-fade-in-shadow-ground-plane/24035>\
**Category:** Questions\
**Tags:** shadows\
**Created:** [March 4, 2021, 1:34am UTC](https://discourse.threejs.org/t/how-to-do-that-like-sketchfab-setting-border-fade-in-shadow-ground-plane/24035 "2021-03-04T01:34:38Z")\
**Posts on this page:** 1\
**Showing post:** 5

<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:18am UTC](https://discourse.threejs.org/t/how-to-do-that-like-sketchfab-setting-border-fade-in-shadow-ground-plane/24035/5 "2026-01-10T11:18:34Z")

</div>

For regular shadows (not contact shadows) a trick is to patch `ShadowNode.prototype.setupShadowFilter` with TSL (when using `WebGPURenderer`) to implement custom logic for the shadow (return a node that calculates values from 0 (shadow) to 1 (no shadow):

```js
			const originalSetupShadowFilter = THREE.ShadowNode.prototype.setupShadowFilter;

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

				// base is the current value 0 to 1 for the current shadow fragment
				const base = originalSetupShadowFilter.call( this, builder, inputs );
				
				return yourCalculation( base, 123 )
			};

```

Here’s [an example](https://discourse.threejs.org/t/shadow-banding-with-webgpurenderer-vsmshadowmap/89017/3).

---

_[View the full topic](https://discourse.threejs.org/t/how-to-do-that-like-sketchfab-setting-border-fade-in-shadow-ground-plane/24035)._