WebGPURenderer: Fix alpha canvas in WebGPU (#27442)

* fix alpha background in webgpu

* fix whitespace

examples/jsm/renderers/common/Renderer.js

@@ -30,6 +30,7 @@ class Renderer {
 
 		const {
 			logarithmicDepthBuffer = false,
+			alpha = true
 		} = parameters;
 
 		// public
@@ -43,6 +44,8 @@ class Renderer {
 		this.autoClearDepth = true;
 		this.autoClearStencil = true;
 
+		this.alpha = alpha;
+
 		this.logarithmicDepthBuffer = logarithmicDepthBuffer;
 
 		this.outputColorSpace = SRGBColorSpace;
@@ -85,7 +88,10 @@ class Renderer {
 		this._opaqueSort = null;
 		this._transparentSort = null;
 
-		this._clearColor = new Color4( 0x000000 );
+
+		const alphaClear = this.alpha === true ? 0 : 1;
+
+		this._clearColor = new Color4( 0, 0, 0, alphaClear );
 		this._clearDepth = 1;
 		this._clearStencil = 0;
 

examples/jsm/renderers/webgpu/WebGPUBackend.js

@@ -36,6 +36,7 @@ class WebGPUBackend extends Backend {
 		this.isWebGPUBackend = true;
 
 		// some parameters require default values other than "undefined"
+		this.parameters.alpha = ( parameters.alpha === undefined ) ? true : parameters.alpha;
 
 		this.parameters.antialias = ( parameters.antialias === true );
 
@@ -114,11 +115,13 @@ class WebGPUBackend extends Backend {
 		this.device = device;
 		this.context = context;
 
+		const alphaMode = parameters.alpha ? 'premultiplied' : 'opaque';
+
 		this.context.configure( {
 			device: this.device,
 			format: GPUTextureFormat.BGRA8Unorm,
 			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
-			alphaMode: 'premultiplied'
+			alphaMode: alphaMode
 		} );
 
 		this.updateSize();