WebGPURenderer: Add individual dispose for `CanvasTarget` caching (#33106)

src/renderers/common/Renderer.js

@@ -1360,6 +1360,18 @@ class Renderer {
 
 			frameBufferTarget.isPostProcessingRenderTarget = true;
 
+			const dispose = () => {
+
+				canvasTarget.removeEventListener( 'dispose', dispose );
+
+				frameBufferTarget.dispose();
+
+				this._frameBufferTargets.delete( canvasTarget );
+
+			};
+
+			canvasTarget.addEventListener( 'dispose', dispose );
+
 			this._frameBufferTargets.set( canvasTarget, frameBufferTarget );
 
 		}
@@ -2409,14 +2421,12 @@ class Renderer {
 			this._renderContexts.dispose();
 			this._textures.dispose();
 
-			for ( const frameBufferTarget of this._frameBufferTargets.values() ) {
+			for ( const canvasTarget of this._frameBufferTargets.keys() ) {
 
-				frameBufferTarget.dispose();
+				canvasTarget.dispose();
 
 			}
 
-			this._frameBufferTargets.clear();
-
 			Object.values( this.backend.timestampQueryPool ).forEach( queryPool => {
 
 				if ( queryPool !== null ) queryPool.dispose();
@@ -2517,14 +2527,12 @@ class Renderer {
 		this.setOutputRenderTarget( null );
 		this.setRenderTarget( null );
 
-		for ( const frameBufferTarget of this._frameBufferTargets.values() ) {
+		for ( const canvasTarget of this._frameBufferTargets.keys() ) {
 
-			frameBufferTarget.dispose();
+			canvasTarget.dispose();
 
 		}
 
-		this._frameBufferTargets.clear();
-
 	}
 
 	/**