WebGLShadowMap: Dispose of unique depth/distance materials. (#27326)

* WebGLShadowMap: Dispose of unique depth/distance materials.

* Update WebGLShadowMap.js

Fix comment.

* Update WebGLShadowMap.js

src/renderers/webgl/WebGLShadowMap.js

@@ -279,6 +279,7 @@ function WebGLShadowMap( _renderer, _objects, _capabilities ) {
 
 					cachedMaterial = result.clone();
 					materialsForVariant[ keyB ] = cachedMaterial;
+					material.addEventListener( 'dispose', onMaterialDispose );
 
 				}
 
@@ -391,6 +392,32 @@ function WebGLShadowMap( _renderer, _objects, _capabilities ) {
 
 	}
 
+	function onMaterialDispose( event ) {
+
+		const material = event.target;
+
+		material.removeEventListener( 'dispose', onMaterialDispose );
+
+		// make sure to remove the unique distance/depth materials used for shadow map rendering
+
+		for ( const id in _materialCache ) {
+
+			const cache = _materialCache[ id ];
+
+			const uuid = event.target.uuid;
+
+			if ( uuid in cache ) {
+
+				const shadowMaterial = cache[ uuid ];
+				shadowMaterial.dispose();
+				delete cache[ uuid ];
+
+			}
+
+		}
+
+	}
+
 }