Use nearest cascade edge to compute fade

examples/jsm/csm/Shader.js

@@ -84,10 +84,15 @@ IncidentLight directLight;
 		directionalLight = directionalLights[ i ];
 		getDirectionalDirectLightIrradiance( directionalLight, geometry, directLight );
 
-		float margin = 0.25 * pow( linearDepth, 2.0 );
-		float csmx = CSM_cascades[ i ].x - margin / 2.0;
-		float csmy = CSM_cascades[ i ].y + margin / 2.0;
-		if( i < NUM_DIR_LIGHT_SHADOWS && linearDepth >= csmx && ( linearDepth < csmy ||  i == CSM_CASCADES - 1 ) ) {
+		// NOTE: Depth gets larger away from the camera.
+		// cascade.x is closer, cascade.y is further
+		vec2 cascade = CSM_cascades[ i ];
+		float cascadeCenter = ( cascade.x + cascade.y ) / 2.0;
+		float closestEdge = linearDepth < cascadeCenter ? cascade.x : cascade.y;
+		float margin = 0.25 * pow( closestEdge, 2.0 );
+		float csmx = cascade.x - margin / 2.0;
+		float csmy = cascade.y + margin / 2.0;
+		if( i < NUM_DIR_LIGHT_SHADOWS && linearDepth >= csmx && ( linearDepth < csmy || i == CSM_CASCADES - 1 ) ) {
 
 			float dist = min( linearDepth - csmx, csmy - linearDepth );
 			float ratio = clamp( dist / margin, 0.0, 1.0 );