WebGPURenderer: Add clear color/alpha interface.

examples/jsm/renderers/webgpu/WebGPUBackground.js

@@ -3,22 +3,34 @@ import { Color } from '../../../../build/three.module.js';
 
 class WebGPUBackground {
 
-	constructor() {
+	constructor( renderer ) {
 
-		this.clearAlpha = 0;
+		this.renderer = renderer;
+
+		this.clearAlpha = 1;
 		this.clearColor = new Color( 0x000000 );
 
 	}
 
-	render( scene, renderPassDescriptor, autoClear ) {
+	render( scene ) {
 
+		const renderer = this.renderer;
 		const background = ( scene.isScene === true ) ? scene.background : null;
 		const clearColor = this.clearColor;
 		let clearAlpha = this.clearAlpha;
 
 		let forceClear = false;
 
-		if ( background !== null && background.isColor === true ) {
+		if ( background === null ) {
+
+			// no background settings, use clear color configuration from the renderer
+
+			this.clearColor.copy( renderer._clearColor );
+			this.clearAlpha = renderer._clearAlpha;
+
+		} else if ( background !== null && background.isColor === true ) {
+
+			// background is an opaque color
 
 			clearColor.copy( background );
 			clearAlpha = 1;
@@ -26,9 +38,12 @@ class WebGPUBackground {
 
 		}
 
+		// configure render pass descriptor
+
+		const renderPassDescriptor = renderer._renderPassDescriptor;
 		const colorAttachment = renderPassDescriptor.colorAttachments[ 0 ];
 
-		if ( autoClear === true || forceClear === true ) {
+		if ( renderer.autoClear === true || forceClear === true ) {
 
 			colorAttachment.loadValue = { r: clearColor.r, g: clearColor.g, b: clearColor.b, a: clearAlpha };
 

examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -10,7 +10,7 @@ import WebGPURenderLists from './WebGPURenderLists.js';
 import WebGPUTextures from './WebGPUTextures.js';
 import WebGPUBackground from './WebGPUBackground.js';
 
-import { Frustum, Matrix4, Vector3 } from '../../../../build/three.module.js';
+import { Frustum, Matrix4, Vector3, Color } from '../../../../build/three.module.js';
 
 const _frustum = new Frustum();
 const _projScreenMatrix = new Matrix4();
@@ -60,6 +60,9 @@ class WebGPURenderer {
 		this._opaqueSort = null;
 		this._transparentSort = null;
 
+		this._clearAlpha = 1;
+		this._clearColor = new Color( 0x000000 );
+
 	}
 
 	init() {
@@ -98,7 +101,7 @@ class WebGPURenderer {
 		const depthStencilAttachment = this._renderPassDescriptor.depthStencilAttachment;
 		depthStencilAttachment.attachment = this._depthBuffer.createView();
 
-		this._background.render( scene, this._renderPassDescriptor, this.autoClear );
+		this._background.render( scene );
 
 		const opaqueObjects = this._currentRenderList.opaque;
 		const transparentObjects = this._currentRenderList.transparent;
@@ -253,6 +256,31 @@ class WebGPURenderer {
 
 	}
 
+	getClearColor() {
+
+		return this._clearColor;
+
+	}
+
+	setClearColor( color, alpha = 1 ) {
+
+		this._clearColor.set( color );
+		this._clearAlpha = alpha;
+
+	}
+
+	getClearAlpha() {
+
+		return this._clearAlpha;
+
+	}
+
+	setClearAlpha( alpha ) {
+
+		this._clearAlpha = alpha;
+
+	}
+
 	dispose() {
 
 		this._objects.dispose();
@@ -579,7 +607,7 @@ async function initWebGPU( scope ) {
 	scope._objects = new WebGPUObjects( scope._geometries, scope._info );
 	scope._renderPipelines = new WebGPURenderPipelines( device, compiler, scope._bindings );
 	scope._renderLists = new WebGPURenderLists();
-	scope._background = new WebGPUBackground();
+	scope._background = new WebGPUBackground( scope );
 
 	//