WebGPURenderer: Introduce `initRenderTarget()`. (#32867)

examples/jsm/tsl/display/TRAANode.js

@@ -376,13 +376,10 @@ class TRAANode extends TempNode {
 
 		if ( needsRestart === true ) {
 
-			// bind and clear render target to make sure they are initialized after the resize which triggers a dispose()
+			// make sure render targets are initialized after the resize which triggers a dispose()
 
-			renderer.setRenderTarget( this._historyRenderTarget );
-			renderer.clear();
-
-			renderer.setRenderTarget( this._resolveRenderTarget );
-			renderer.clear();
+			renderer.initRenderTarget( this._historyRenderTarget );
+			renderer.initRenderTarget( this._resolveRenderTarget );
 
 			// make sure to reset the history with the contents of the beauty buffer otherwise subsequent frames after the
 			// resize will fade from a darker color to the correct one because the history was cleared with black.

src/renderers/common/Backend.js

@@ -691,6 +691,14 @@ class Backend {
 
 	}
 
+	/**
+	 * Initializes the render target defined in the given render context.
+	 *
+	 * @abstract
+	 * @param {RenderContext} renderContext - The render context.
+	 */
+	initRenderTarget( /*renderContext*/ ) {}
+
 	/**
 	 * Sets a dictionary for the given object into the
 	 * internal data structure.

src/renderers/common/Renderer.js

@@ -2689,6 +2689,37 @@ class Renderer {
 
 	}
 
+	/**
+	 * Initializes the given render target.
+	 *
+	 * @param {RenderTarget} renderTarget - The render target to intialize.
+	 */
+	initRenderTarget( renderTarget ) {
+
+		if ( this._initialized === false ) {
+
+			throw new Error( 'Renderer: .initRenderTarget() called before the backend is initialized. Use "await renderer.init();" before before using this method.' );
+
+		}
+
+		this._textures.updateRenderTarget( renderTarget );
+
+		const renderTargetData = this._textures.get( renderTarget );
+
+		const renderContext = this._renderContexts.get( renderTarget );
+
+		renderContext.textures = renderTargetData.textures;
+		renderContext.depthTexture = renderTargetData.depthTexture;
+		renderContext.width = renderTargetData.width;
+		renderContext.height = renderTargetData.height;
+		renderContext.renderTarget = renderTarget;
+		renderContext.depth = renderTarget.depthBuffer;
+		renderContext.stencil = renderTarget.stencilBuffer;
+
+		this.backend.initRenderTarget( renderContext );
+
+	}
+
 	/**
 	 * Copies the current bound framebuffer into the given texture.
 	 *

src/renderers/webgl-fallback/WebGLBackend.js

@@ -2011,6 +2011,21 @@ class WebGLBackend extends Backend {
 
 	}
 
+	/**
+	 * Initializes the render target defined in the given render context.
+	 *
+	 * @param {RenderContext} renderContext - The render context.
+	 */
+	initRenderTarget( renderContext ) {
+
+		const { gl, state } = this;
+
+		this._setFramebuffer( renderContext );
+
+		state.bindFramebuffer( gl.FRAMEBUFFER, null );
+
+	}
+
 	/**
 	 * Configures the active framebuffer from the given render context.
 	 *