Add fade toggle

examples/jsm/csm/CSM.js

@@ -47,11 +47,13 @@ export default class CSM {
 		this.lightFar = data.lightFar || 2000;
 		this.lightMargin = data.lightMargin || 200;
 		this.customSplitsCallback = data.customSplitsCallback;
+		this.fade = false;
 		this.mainFrustum = new Frustum();
 		this.frustums = [];
 		this.breaks = [];
 
 		this.lights = [];
+		this.shaders = [];
 		this.materials = [];
 		this.createLights();
 
@@ -214,6 +216,12 @@ export default class CSM {
 		material.defines.USE_CSM = 1;
 		material.defines.CSM_CASCADES = this.cascades;
 
+		if ( this.fade ) {
+
+			material.defines.CSM_FADE = '';
+
+		}
+
 		const breaksVec2 = [];
 		this.getExtendedBreaks( breaksVec2 );
 
@@ -226,9 +234,10 @@ export default class CSM {
 			shader.uniforms.cameraNear = { value: self.camera.near };
 			shader.uniforms.shadowFar = { value: far };
 
-			self.materials.push( shader );
+			self.shaders.push( shader );
 
 		};
+		this.materials.push( material );
 
 	}
 
@@ -236,15 +245,33 @@ export default class CSM {
 
 		const far = Math.min(this.camera.far, this.maxFar);
 
-		for ( let i = 0; i < this.materials.length; i ++ ) {
+		for ( let i = 0; i < this.shaders.length; i ++ ) {
 
-			const uniforms = this.materials[ i ].uniforms;
+			const shader = this.shaders[ i ];
+			const uniforms = shader.uniforms;
 			this.getExtendedBreaks( uniforms.CSM_cascades.value );
 			uniforms.cameraNear.value = this.camera.near;
 			uniforms.shadowFar.value = far;
 
 		}
 
+		for ( let i = 0; i < this.materials.length; i ++ ) {
+
+			const material = this.materials[ i ];
+			if ( ! this.fade && 'CSM_FADE' in material.defines ) {
+
+				delete material.defines.CSM_FADE;
+				material.needsUpdate = true;
+
+			} else {
+
+				material.defines.CSM_FADE = '';
+				material.needsUpdate = true;
+
+			}
+
+		}
+
 	}
 
 	getExtendedBreaks( target ) {

examples/jsm/csm/Shader.js

@@ -78,6 +78,7 @@ IncidentLight directLight;
 	DirectionalLightShadow directionalLightShadow;
 	#endif
 
+	#if defined( CSM_FADE )
 	for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {
 
 		directionalLight = directionalLights[ i ];
@@ -114,6 +115,26 @@ IncidentLight directLight;
 		}
 
 	}
+	#else
+
+	#pragma unroll_loop
+	for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {
+
+		directionalLight = directionalLights[ i ];
+		getDirectionalDirectLightIrradiance( directionalLight, geometry, directLight );
+
+		#if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS )
+
+		directionalLightShadow = directionalLightShadows[ i ];
+		if(linearDepth >= CSM_cascades[UNROLLED_LOOP_INDEX].x && linearDepth < CSM_cascades[UNROLLED_LOOP_INDEX].y) directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getShadow( directionalShadowMap[ i ], directionalLightShadow.shadowMapSize, directionalLightShadow.shadowBias, directionalLightShadow.shadowRadius, vDirectionalShadowCoord[ i ] ) : 1.0;
+
+		#endif
+
+		if(linearDepth >= CSM_cascades[UNROLLED_LOOP_INDEX].x && (linearDepth < CSM_cascades[UNROLLED_LOOP_INDEX].y || UNROLLED_LOOP_INDEX == CSM_CASCADES - 1)) RE_Direct( directLight, geometry, material, reflectedLight );
+
+	}
+
+	#endif
 
 #endif
 

examples/webgl_shadowmap_csm.html

@@ -26,6 +26,7 @@
 
 			var params = {
 				orthographic: false,
+				fade: false,
 				far: 1000,
 				mode: 'practical',
 				lightX: - 1,
@@ -129,6 +130,8 @@
 
 				var gui = new GUI();
 
+				window.csm = csm;
+
 				gui.add( params, 'orthographic' ).onChange( function ( value ) {
 
 					csm.camera = value ? orthoCamera : camera;
@@ -136,6 +139,13 @@
 
 				} );
 
+				gui.add( params, 'fade' ).onChange( function ( value ) { 
+
+					csm.fade = value;
+					csm.updateUniforms();
+
+				} );
+
 				gui.add( params, 'far', 1, 5000 ).step( 1 ).name( 'shadow far' ).onChange( function ( value ) {
 
 					csm.maxFar = value;