WebGPURenderer: Evaluate format of render target.

examples/jsm/renderers/webgpu/WebGPURenderPipelines.js

@@ -11,8 +11,10 @@ import {
 
 class WebGPURenderPipelines {
 
-	constructor( device, glslang, sampleCount ) {
+	constructor( renderer, properties, device, glslang, sampleCount ) {
 
+		this.renderer = renderer;
+		this.properties = properties;
 		this.device = device;
 		this.glslang = glslang;
 		this.sampleCount = sampleCount;
@@ -154,6 +156,8 @@ class WebGPURenderPipelines {
 			const rasterizationState = this._getRasterizationStateDescriptor( material );
 			const colorWriteMask = this._getColorWriteMask( material );
 			const depthCompare = this._getDepthCompare( material );
+			const colorFormat = this._getColorFormat( this.renderer );
+			const depthStencilFormat = this._getDepthStencilFormat( this.renderer );
 
 			pipeline = device.createRenderPipeline( {
 				vertexStage: moduleVertex,
@@ -161,13 +165,13 @@ class WebGPURenderPipelines {
 				primitiveTopology: primitiveTopology,
 				rasterizationState: rasterizationState,
 				colorStates: [ {
-					format: GPUTextureFormat.BRGA8Unorm,
+					format: colorFormat,
 					alphaBlend: alphaBlend,
 					colorBlend: colorBlend,
 					writeMask: colorWriteMask
 				} ],
 				depthStencilState: {
-					format: GPUTextureFormat.Depth24PlusStencil8,
+					format: depthStencilFormat,
 					depthWriteEnabled: material.depthWrite,
 					depthCompare: depthCompare,
 					stencilFront: stencilFront,
@@ -467,6 +471,27 @@ class WebGPURenderPipelines {
 
 	}
 
+	_getColorFormat( renderer ) {
+
+		let format;
+
+		const renderTarget = renderer.getRenderTarget();
+
+		if ( renderTarget !== null ) {
+
+			const renderTargetProperties = this.properties.get( renderTarget );
+			format = renderTargetProperties.colorTextureFormat;
+
+		} else {
+
+			format = GPUTextureFormat.BRGA8Unorm; // default swap chain format
+
+		}
+
+		return format;
+
+	}
+
 	_getColorWriteMask( material ) {
 
 		return ( material.colorWrite === true ) ? GPUColorWriteFlags.All : GPUColorWriteFlags.None;
@@ -530,6 +555,27 @@ class WebGPURenderPipelines {
 
 	}
 
+	_getDepthStencilFormat( renderer ) {
+
+		let format;
+
+		const renderTarget = renderer.getRenderTarget();
+
+		if ( renderTarget !== null ) {
+
+			const renderTargetProperties = this.properties.get( renderTarget );
+			format = renderTargetProperties.depthTextureFormat;
+
+		} else {
+
+			format = GPUTextureFormat.Depth24PlusStencil8;
+
+		}
+
+		return format;
+
+	}
+
 	_getPrimitiveTopology( object ) {
 
 		if ( object.isMesh ) return GPUPrimitiveTopology.TriangleList;

examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -173,7 +173,7 @@ class WebGPURenderer {
 		this._geometries = new WebGPUGeometries( this._attributes, this._info );
 		this._textures = new WebGPUTextures( device, this._properties, this._info, compiler );
 		this._objects = new WebGPUObjects( this._geometries, this._info );
-		this._renderPipelines = new WebGPURenderPipelines( device, compiler, parameters.sampleCount );
+		this._renderPipelines = new WebGPURenderPipelines( this, this._properties, device, compiler, parameters.sampleCount );
 		this._bindings = new WebGPUBindings( device, this._info, this._properties, this._textures, this._renderPipelines );
 		this._renderLists = new WebGPURenderLists();
 		this._background = new WebGPUBackground( this );
@@ -529,6 +529,12 @@ class WebGPURenderer {
 
 	}
 
+	getRenderTarget() {
+
+		return this._renderTarget;
+
+	}
+
 	_projectObject( object, camera, groupOrder ) {
 
 		const info = this._info;

examples/jsm/renderers/webgpu/WebGPUTextures.js

@@ -197,6 +197,7 @@ class WebGPUTextures {
 
 			const width = renderTarget.width;
 			const height = renderTarget.height;
+			const colorTextureFormat = this._getFormat( renderTarget.texture );
 
 			const colorTextureGPU = device.createTexture( {
 				size: {
@@ -204,11 +205,12 @@ class WebGPUTextures {
 					height: height,
 					depth: 1
 				},
-				format: GPUTextureFormat.BRGA8Unorm, // @TODO: Make configurable
+				format: colorTextureFormat,
 				usage: GPUTextureUsage.OUTPUT_ATTACHMENT | GPUTextureUsage.SAMPLED
 			} );
 
 			renderTargetProperties.colorTextureGPU = colorTextureGPU;
+			renderTargetProperties.colorTextureFormat = colorTextureFormat;
 
 			// When the ".texture" or ".depthTexture" property of a render target is used as a map,
 			// the renderer has to find the respective GPUTexture objects to setup the bind groups.
@@ -221,17 +223,20 @@ class WebGPUTextures {
 
 			if ( renderTarget.depthBuffer === true ) {
 
+				const depthTextureFormat = GPUTextureFormat.Depth24PlusStencil8; // @TODO: Make configurable
+
 				const depthTextureGPU = device.createTexture( {
 					size: {
 						width: width,
 						height: height,
 						depth: 1
 					},
-					format: GPUTextureFormat.Depth24PlusStencil8, // @TODO: Make configurable
+					format: depthTextureFormat,
 					usage: GPUTextureUsage.OUTPUT_ATTACHMENT
 				} );
 
 				renderTargetProperties.depthTextureGPU = depthTextureGPU;
+				renderTargetProperties.depthTextureFormat = depthTextureFormat;
 
 				if ( renderTarget.depthTexture !== null ) {