Fade out shadows as one approaches the left/right/top/bottom/near/far clip planes

[bhouston]

Description of the problem

Right now when one has a shadow casting light there is a far plane and a near plane and shadows start and end abruptly at these planes. I think it would be much nicer if we faded in the shadow and faded out the shadow when one approaches the clip plane.s This way limited frustum shadows can be used in larger regions without nasty clip artifacts. Fading out shadows often looks very natural.

I noticed this when playing the game Kingdoms and Castles ( http://store.steampowered.com/app/569480/Kingdoms_and_Castles/ ). See how the shadow fades out at the top. It allows this game to have high quality shadows in the regions right in front of the camera, but they fade out as you scroll the clouds away from the center. This is very effective and also not jarring. Should be relatively easy to implement:

Three.js version

• Dev
• r85

Browser

• All of them

OS

• All of them

[mrdoob]

I think this could be a boolean in WebGLShadowMap 👍

[manthrax]

I like the idea as well. Would also need some parameters to control the feathering radius, but would be a nice addition, and open up the possibility of using the shadowmaps in much tighter/constrained ways.

As it is now, you sorta have to make the shadowmap project over a large enough area that users never see that hard edge, and usually, you can find cases that see it regardless.. thus requiring pretty large shadowmaps to make it work.

[gkjohnson]

The new CSM example has some progress towards this:

https://threejs.org/examples/#webgl_shadowmap_csm

[trusktr]

This is simpler to do with TSL and WebGPURenderer nowadays. Here's a patch that fades shadow out at the shadow map edges:

import { min, sub, mul, add, mix, smoothstep, float } from 'three/tsl';

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 dist = min( uv, uv.oneMinus() );
	const edgeDist = min( dist.x, dist.y );

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

};

Maybe there's a way to patch extend the TSL per object or per light instead of globally, but I wasn't sure. If there isn't that'd be useful.