WebGPU multiple render targets with different formats causes error

Questions
, , , ,
1

I have a custom mesh material that writes both colours and normals using multiple render targets. For my WebGPU implementation, I set the material’s outputNode to be an outputStruct containing my custom colour and normal nodes.

My normal render target is of FloatType and RGBAFormat. My material sometimes needs to support transparency, and blend the colour output (but not the normals).

When the material is transparent, I get the following error:

Blending is enabled but color format (TextureFormat::RGBA32Float) is not blendable.
 - While validating targets[1] framebuffer output.
 - While validating fragment state.
 - While calling [Device].CreateRenderPipeline([RenderPipelineDescriptor ""renderPipeline_MeshBasicNodeMaterial_52""]).

When inspecting the Three.js source code, it is indeed trying to blend also the normals, which is unsupported in WebGPU due to their format. In WebGPUPipelineUtils.js:createRenderPipeline() (link to source), it does the following:

		// blending

		let blending;

		if ( material.blending !== NoBlending && ( material.blending !== NormalBlending || material.transparent !== false ) ) {

			blending = this._getBlending( material );

		}

		// stencil

		let stencilFront = {};

		if ( material.stencilWrite === true ) {

			stencilFront = {
				compare: this._getStencilCompare( material ),
				failOp: this._getStencilOperation( material.stencilFail ),
				depthFailOp: this._getStencilOperation( material.stencilZFail ),
				passOp: this._getStencilOperation( material.stencilZPass )
			};

		}

		const colorWriteMask = this._getColorWriteMask( material );

		const targets = [];

		if ( renderObject.context.textures !== null ) {

			const textures = renderObject.context.textures;

			for ( let i = 0; i < textures.length; i ++ ) {

				const colorFormat = utils.getTextureFormatGPU( textures[ i ] );

				targets.push( {
					format: colorFormat,
					blend: blending,
					writeMask: colorWriteMask
				} );

			}

		} else {

			const colorFormat = utils.getCurrentColorFormat( renderObject.context );

			targets.push( {
				format: colorFormat,
				blend: blending,
				writeMask: colorWriteMask
			} );

		}

Crucially, we can only specify blending per material, not per render target. Ideally, I would be able to specify that my normals should not be blended. Alternatively, would it make sense for the Three.js backend to identify when a format is not blendable and not specify blending options for those targets? To illustrate what I mean, I can “fix” the issue for my project by injecting something like this:

for (const target of targets)
	if (target.format === "rgba32float")
		target.blend = undefined;

Would it make sense for the Three.js code to perform a similar check?

Or, is there already a solution and I’m approaching the issue wrong? I’d appreciate any insight.