WebGPURenderer: Fix texture view caching and dispose event stacking (#30647)

* WebGPURenderer: Fix texture view caching and dispose event stacking

* cleanup log

* cleanup

* cleanup

src/renderers/common/Renderer.js

@@ -1932,6 +1932,8 @@ class Renderer {
 			renderContext.stencil = renderTarget.stencilBuffer;
 			// #30329
 			renderContext.clearColorValue = this.backend.getClearColor();
+			renderContext.activeCubeFace = this.getActiveCubeFace();
+			renderContext.activeMipmapLevel = this.getActiveMipmapLevel();
 
 		}
 

src/renderers/webgpu/WebGPUBackend.js

@@ -369,10 +369,9 @@ class WebGPUBackend extends Backend {
 			renderTargetData.width !== renderTarget.width ||
 			renderTargetData.height !== renderTarget.height ||
 			renderTargetData.dimensions !== renderTarget.dimensions ||
-			renderTargetData.activeMipmapLevel !== renderTarget.activeMipmapLevel ||
+			renderTargetData.activeMipmapLevel !== renderContext.activeMipmapLevel ||
 			renderTargetData.activeCubeFace !== renderContext.activeCubeFace ||
-			renderTargetData.samples !== renderTarget.samples ||
-			renderTargetData.loadOp !== colorAttachmentsConfig.loadOp
+			renderTargetData.samples !== renderTarget.samples
 		) {
 
 			descriptors = {};
@@ -384,23 +383,25 @@ class WebGPUBackend extends Backend {
 			const onDispose = () => {
 
 				renderTarget.removeEventListener( 'dispose', onDispose );
-
 				this.delete( renderTarget );
 
 			};
 
-			renderTarget.addEventListener( 'dispose', onDispose );
+			if ( renderTarget.hasEventListener( 'dispose', onDispose ) === false ) {
+
+				renderTarget.addEventListener( 'dispose', onDispose );
+
+			}
 
 		}
 
 		const cacheKey = renderContext.getCacheKey();
+		let descriptorBase = descriptors[ cacheKey ];
 
-		let descriptor = descriptors[ cacheKey ];
-
-		if ( descriptor === undefined ) {
+		if ( descriptorBase === undefined ) {
 
 			const textures = renderContext.textures;
-			const colorAttachments = [];
+			const textureViews = [];
 
 			let sliceIndex;
 
@@ -448,44 +449,24 @@ class WebGPUBackend extends Backend {
 
 				}
 
-				// only apply the user-defined clearValue to the first color attachment like in beginRender()
-
-				let clearValue = { r: 0, g: 0, b: 0, a: 1 };
-
-				if ( i === 0 && colorAttachmentsConfig.clearValue ) {
-
-					clearValue = colorAttachmentsConfig.clearValue;
-
-				}
-
-				colorAttachments.push( {
+				textureViews.push( {
 					view,
-					depthSlice: sliceIndex,
 					resolveTarget,
-					loadOp: colorAttachmentsConfig.loadOP || GPULoadOp.Load,
-					storeOp: colorAttachmentsConfig.storeOP || GPUStoreOp.Store,
-					clearValue: clearValue
+					depthSlice: sliceIndex
 				} );
 
 			}
 
-
-			descriptor = {
-				colorAttachments,
-			};
+			descriptorBase = { textureViews };
 
 			if ( renderContext.depth ) {
 
 				const depthTextureData = this.get( renderContext.depthTexture );
-
-				const depthStencilAttachment = {
-					view: depthTextureData.texture.createView()
-				};
-				descriptor.depthStencilAttachment = depthStencilAttachment;
+				descriptorBase.depthStencilView = depthTextureData.texture.createView();
 
 			}
 
-			descriptors[ cacheKey ] = descriptor;
+			descriptors[ cacheKey ] = descriptorBase;
 
 			renderTargetData.width = renderTarget.width;
 			renderTargetData.height = renderTarget.height;
@@ -493,8 +474,41 @@ class WebGPUBackend extends Backend {
 			renderTargetData.activeMipmapLevel = renderContext.activeMipmapLevel;
 			renderTargetData.activeCubeFace = renderContext.activeCubeFace;
 			renderTargetData.dimensions = renderTarget.dimensions;
-			renderTargetData.depthSlice = sliceIndex;
-			renderTargetData.loadOp = colorAttachments[ 0 ].loadOp;
+
+		}
+
+		const descriptor = {
+			colorAttachments: []
+		};
+
+		// Apply dynamic properties to cached views
+		for ( let i = 0; i < descriptorBase.textureViews.length; i ++ ) {
+
+			const viewInfo = descriptorBase.textureViews[ i ];
+
+			let clearValue = { r: 0, g: 0, b: 0, a: 1 };
+			if ( i === 0 && colorAttachmentsConfig.clearValue ) {
+
+				clearValue = colorAttachmentsConfig.clearValue;
+
+			}
+
+			descriptor.colorAttachments.push( {
+				view: viewInfo.view,
+				depthSlice: viewInfo.depthSlice,
+				resolveTarget: viewInfo.resolveTarget,
+				loadOp: colorAttachmentsConfig.loadOp || GPULoadOp.Load,
+				storeOp: colorAttachmentsConfig.storeOp || GPUStoreOp.Store,
+				clearValue: clearValue
+			} );
+
+		}
+
+		if ( descriptorBase.depthStencilView ) {
+
+			descriptor.depthStencilAttachment = {
+				view: descriptorBase.depthStencilView
+			};
 
 		}
 
@@ -873,7 +887,6 @@ class WebGPUBackend extends Backend {
 		const renderer = this.renderer;
 
 		let colorAttachments = [];
-
 		let depthStencilAttachment;
 		let clearValue;
 
@@ -917,29 +930,35 @@ class WebGPUBackend extends Backend {
 			supportsDepth = renderTargetContext.depth;
 			supportsStencil = renderTargetContext.stencil;
 
-			if ( color ) {
+			const clearConfig = {
+				loadOp: color ? GPULoadOp.Clear : GPULoadOp.Load,
+				clearValue: color ? clearValue : undefined
+			};
 
-				const descriptor = this._getRenderPassDescriptor( renderTargetContext, { loadOp: GPULoadOp.Clear, clearValue } );
+			if ( supportsDepth ) {
 
-				colorAttachments = descriptor.colorAttachments;
+				clearConfig.depthLoadOp = depth ? GPULoadOp.Clear : GPULoadOp.Load;
+				clearConfig.depthClearValue = depth ? renderer.getClearDepth() : undefined;
+				clearConfig.depthStoreOp = GPUStoreOp.Store;
 
 			}
 
-			if ( supportsDepth || supportsStencil ) {
+			if ( supportsStencil ) {
 
-				const depthTextureData = this.get( renderTargetContext.depthTexture );
-
-				depthStencilAttachment = {
-					view: depthTextureData.texture.createView()
-				};
+				clearConfig.stencilLoadOp = stencil ? GPULoadOp.Clear : GPULoadOp.Load;
+				clearConfig.stencilClearValue = stencil ? renderer.getClearStencil() : undefined;
+				clearConfig.stencilStoreOp = GPUStoreOp.Store;
 
 			}
 
-		}
+			const descriptor = this._getRenderPassDescriptor( renderTargetContext, clearConfig );
 
-		//
+			colorAttachments = descriptor.colorAttachments;
+			depthStencilAttachment = descriptor.depthStencilAttachment;
+
+		}
 
-		if ( supportsDepth ) {
+		if ( supportsDepth && depthStencilAttachment && depthStencilAttachment.depthLoadOp === undefined ) {
 
 			if ( depth ) {
 
@@ -958,7 +977,7 @@ class WebGPUBackend extends Backend {
 
 		//
 
-		if ( supportsStencil ) {
+		if ( supportsStencil && depthStencilAttachment && depthStencilAttachment.stencilLoadOp === undefined ) {
 
 			if ( stencil ) {