WebGPURenderer: Fix call clear() before rendering (#27835)

* WebGPURenderer: Fix call clear() before rendering

* cleanup

* trying to make it clearer to the dev

examples/jsm/renderers/common/RenderContext.js

@@ -34,6 +34,8 @@ class RenderContext {
 		this.width = 0;
 		this.height = 0;
 
+		this.isRenderContext = true;
+
 	}
 
 }

examples/jsm/renderers/common/Textures.js

@@ -62,6 +62,7 @@ class Textures extends DataMap {
 		renderTargetData.depthTexture = depthTexture;
 		renderTargetData.depth = renderTarget.depthBuffer;
 		renderTargetData.stencil = renderTarget.stencilBuffer;
+		renderTargetData.renderTarget = renderTarget;
 
 		if ( renderTargetData.sampleCount !== sampleCount ) {
 

examples/jsm/renderers/webgl/WebGLBackend.js

@@ -84,7 +84,7 @@ class WebGLBackend extends Backend {
 
 		this._setFramebuffer( renderContext );
 
-		this.clear( renderContext.clearColor, renderContext.clearDepth, renderContext.clearStencil, renderContext );
+		this.clear( renderContext.clearColor, renderContext.clearDepth, renderContext.clearStencil, renderContext, false );
 
 		//
 		if ( renderContext.viewport ) {
@@ -313,7 +313,7 @@ class WebGLBackend extends Backend {
 
 	}
 
-	clear( color, depth, stencil, descriptor = null ) {
+	clear( color, depth, stencil, descriptor = null, setFrameBuffer = true ) {
 
 		const { gl } = this;
 
@@ -336,7 +336,7 @@ class WebGLBackend extends Backend {
 
 		if ( clear !== 0 ) {
 
-			const clearColor = descriptor.clearColorValue;
+			const clearColor = descriptor.clearColorValue || this.getClearColor();
 
 			if ( depth ) this.state.setDepthMask( true );
 
@@ -347,6 +347,8 @@ class WebGLBackend extends Backend {
 
 			} else {
 
+				if ( setFrameBuffer ) this._setFramebuffer( descriptor );
+
 				if ( color ) {
 
 					for ( let i = 0; i < descriptor.textures.length; i ++ ) {

examples/jsm/renderers/webgpu/WebGPUBackend.js

@@ -602,9 +602,6 @@ class WebGPUBackend extends Backend {
 			supportsDepth = renderer.depth;
 			supportsStencil = renderer.stencil;
 
-			depth = depth && supportsDepth;
-			stencil = stencil && supportsStencil;
-
 			const descriptor = this._getDefaultRenderPassDescriptor();
 
 			if ( color ) {
@@ -619,7 +616,7 @@ class WebGPUBackend extends Backend {
 
 			}
 
-			if ( depth || stencil ) {
+			if ( supportsDepth || supportsStencil ) {
 
 				depthStencilAttachment = descriptor.depthStencilAttachment;
 
@@ -630,9 +627,6 @@ class WebGPUBackend extends Backend {
 			supportsDepth = renderTargetData.depth;
 			supportsStencil = renderTargetData.stencil;
 
-			depth = depth && supportsDepth;
-			stencil = stencil && supportsStencil;
-
 			if ( color ) {
 
 				for ( const texture of renderTargetData.textures ) {
@@ -666,7 +660,7 @@ class WebGPUBackend extends Backend {
 
 			}
 
-			if ( depth || stencil ) {
+			if ( supportsDepth || supportsStencil ) {
 
 				const depthTextureData = this.get( renderTargetData.depthTexture );
 
@@ -680,7 +674,7 @@ class WebGPUBackend extends Backend {
 
 		//
 
-		if ( depthStencilAttachment !== undefined ) {
+		if ( supportsDepth ) {
 
 			if ( depth ) {
 
@@ -695,7 +689,11 @@ class WebGPUBackend extends Backend {
 
 			}
 
-			//
+		}
+
+		//
+
+		if ( supportsStencil ) {
 
 			if ( stencil ) {