WebGPURenderer: Completed clear interface.

examples/jsm/renderers/webgpu/WebGPUBackground.js

@@ -1,14 +1,22 @@
 import { GPULoadOp } from './constants.js';
 import { Color } from '../../../../build/three.module.js';
 
+let _clearAlpha;
+const _clearColor = new Color();
+
 class WebGPUBackground {
 
 	constructor( renderer ) {
 
 		this.renderer = renderer;
 
-		this.clearAlpha = 1;
-		this.clearColor = new Color( 0x000000 );
+		this.forceClear = false;
+
+	}
+
+	clear() {
+
+		this.forceClear = true;
 
 	}
 
@@ -16,43 +24,77 @@ class WebGPUBackground {
 
 		const renderer = this.renderer;
 		const background = ( scene.isScene === true ) ? scene.background : null;
-		const clearColor = this.clearColor;
-		let clearAlpha = this.clearAlpha;
-
-		let forceClear = false;
+		let forceClear = this.forceClear;
 
 		if ( background === null ) {
 
 			// no background settings, use clear color configuration from the renderer
 
-			this.clearColor.copy( renderer._clearColor );
-			this.clearAlpha = renderer._clearAlpha;
+			_clearColor.copy( renderer._clearColor );
+			_clearAlpha = renderer._clearAlpha;
 
 		} else if ( background !== null && background.isColor === true ) {
 
 			// background is an opaque color
 
-			clearColor.copy( background );
-			clearAlpha = 1;
+			_clearColor.copy( background );
+			_clearAlpha = 1;
 			forceClear = true;
 
+		} else {
+
+			console.error( 'WebGPURenderer: Unsupported background configuration.', background );
+
 		}
 
 		// configure render pass descriptor
 
 		const renderPassDescriptor = renderer._renderPassDescriptor;
 		const colorAttachment = renderPassDescriptor.colorAttachments[ 0 ];
+		const depthStencilAttachment = renderPassDescriptor.depthStencilAttachment;
 
 		if ( renderer.autoClear === true || forceClear === true ) {
 
-			colorAttachment.loadValue = { r: clearColor.r, g: clearColor.g, b: clearColor.b, a: clearAlpha };
+			if ( renderer.autoClearColor === true ) {
+
+				colorAttachment.loadValue = { r: _clearColor.r, g: _clearColor.g, b: _clearColor.b, a: _clearAlpha };
+
+			} else {
+
+				colorAttachment.loadValue = GPULoadOp.Load;
+
+			}
+
+			if ( renderer.autoClearDepth === true ) {
+
+				depthStencilAttachment.depthLoadValue = renderer._clearDepth;
+
+			} else {
+
+				depthStencilAttachment.depthLoadValue = GPULoadOp.Load;
+
+			}
+
+			if ( renderer.autoClearStencil === true ) {
+
+				depthStencilAttachment.stencilLoadValue = renderer._clearDepth;
+
+			} else {
+
+				depthStencilAttachment.stencilLoadValue = GPULoadOp.Load;
+
+			}
 
 		} else {
 
 			colorAttachment.loadValue = GPULoadOp.Load;
+			depthStencilAttachment.depthLoadValue = GPULoadOp.Load;
+			depthStencilAttachment.stencilLoadValue = GPULoadOp.Load;
 
 		}
 
+		this.forceClear = false;
+
 	}
 
 }

examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -26,6 +26,10 @@ class WebGPURenderer {
 		this.parameters = parameters;
 
 		this.autoClear = true;
+		this.autoClearColor = true;
+		this.autoClearDepth = true;
+		this.autoClearStencil = true;
+
 		this.sortObjects = true;
 
 		// internals
@@ -62,6 +66,8 @@ class WebGPURenderer {
 
 		this._clearAlpha = 1;
 		this._clearColor = new Color( 0x000000 );
+		this._clearDepth = 1;
+		this._clearStencil = 0;
 
 	}
 
@@ -281,6 +287,36 @@ class WebGPURenderer {
 
 	}
 
+	getClearDepth() {
+
+		return this._clearDepth;
+
+	}
+
+	setClearDepth( depth ) {
+
+		this._clearDepth = depth;
+
+	}
+
+	getClearStencil() {
+
+		return this._clearStencil;
+
+	}
+
+	setClearStencil( stencil ) {
+
+		this._clearStencil = stencil;
+
+	}
+
+	clear() {
+
+		this._background.clear();
+
+	}
+
 	dispose() {
 
 		this._objects.dispose();
@@ -617,9 +653,7 @@ async function initWebGPU( scope ) {
 		} ],
 		 depthStencilAttachment: {
 			attachment: null,
-			depthLoadValue: 1,
 			depthStoreOp: GPUStoreOp.Store,
-			stencilLoadValue: 0,
 			stencilStoreOp: GPUStoreOp.Store
 		}
 	};