WebGPURenderer: Clear of MRT render targets executed differently in WebGL and WebGPU backend.

[WREQI]

Description

Reproduction steps

1. open demo url
2. change forceWebGL param

Code

// code goes here

Live example

https://codesandbox.io/p/devbox/nameless-thunder-qjzqxt?workspaceId=ws_4mXDziRfBeoC3AxqXCn3rR

Screenshots

No response

Version

173

Device

No response

Browser

No response

OS

No response

[WREQI]

https://codesandbox.io/p/devbox/nameless-thunder-qjzqxt?workspaceId=ws_4mXDziRfBeoC3AxqXCn3rR

[mrdoob]

Do you mean that bloom does overexpose when using the WebGL backend of WebGPURenderer?

[Mugen87]

I'm unable to access the codesandbox. Do you mind sharing the live example as a fiddle (which requires no login)?

Use the following as a starter template: https://jsfiddle.net/mnqr9oj0/

[WREQI]

I'm unable to access the codesandbox. Do you mind sharing the live example as a fiddle (which requires no login)?

Use the following as a starter template: https://jsfiddle.net/mnqr9oj0/

https://jsfiddle.net/03b2gy5n/

[WREQI]

@Mugen87 There is no difference on a black background, but it will be very bright on a white background
The sharing link above

[Mugen87]

Thanks for sharing the link.

The issue is that the WebGL backend uses the clear color to clear all color attachments whereas the WebGPU backend only clears the first one with the color. The other attachments with { r: 0, g: 0, b: 0, a: 1 }.

three.js/src/renderers/webgl-fallback/WebGLBackend.js

Lines 794 to 798 in a5df72e

	for ( let i = 0; i < descriptor.textures.length; i ++ ) {
	gl.clearBufferfv( gl.COLOR, i, [ clearColor.r, clearColor.g, clearColor.b, clearColor.a ] );
	}

three.js/src/renderers/webgpu/WebGPUBackend.js

Line 555 in a5df72e

colorAttachment.clearValue = i === 0 ? renderContext.clearColorValue : { r: 0, g: 0, b: 0, a: 1 };

The behavior of WebGPUBackend seems more correct to me since we never know how additional attachments are configured and if they hold color values or not. Does that sounds reasonable to everyone?

[Mugen87]

At some point we maybe need the ability to define clear values for each attachment 🤔 ? How about this:

renderer.setClearValues( [ clearValue1, clearValue2 ] );

Each clear value is of type Array<number> and holds the clear values for its corresponding attachment.