WebGPURenderer: add clearAsync() clear[color|depth|stencil]Async() (#…

…27613)

Co-authored-by: aardgoose <angus.sawyer@email.com>

examples/jsm/renderers/common/Renderer.js

@@ -608,7 +608,9 @@ class Renderer {
 
 	}
 
-	clear( color = true, depth = true, stencil = true ) {
+	async clearAsync( color = true, depth = true, stencil = true ) {
+
+		if ( this._initialized === false ) await this.init();
 
 		let renderTargetData = null;
 		const renderTarget = this._renderTarget;
@@ -625,21 +627,21 @@ class Renderer {
 
 	}
 
-	clearColor() {
+	clearColorAsync() {
 
-		this.clear( true, false, false );
+		return this.clearAsync( true, false, false );
 
 	}
 
-	clearDepth() {
+	clearDepthAsync() {
 
-		this.clear( false, true, false );
+		return this.clearAsync( false, true, false );
 
 	}
 
-	clearStencil() {
+	clearStencilAsync() {
 
-		this.clear( false, false, true );
+		return this.clearAsync( false, false, true );
 
 	}
 
@@ -1059,6 +1061,30 @@ class Renderer {
 
 	}
 
+	get clear() {
+
+		return this.clearAsync;
+
+	}
+
+	get clearColor() {
+
+		return this.clearColorAsync;
+
+	}
+
+	get clearDepth() {
+
+		return this.clearDepthAsync;
+
+	}
+
+	get clearStencil() {
+
+		return this.clearStencilAsync;
+
+	}
+
 }
 
 export default Renderer;