Different default background colors of WebGLRenderer and WebGPURenderer

[boytchev]

Description

The default background color of WebGLRenderer is black.
The default background color of WebGPURenderer is white.

It will improve the consistency if both renderers have the same default background colors.

Reproduction steps

1. Create a WebGL renderer, a scene, a camera and render the scene. The background color is black.
2. Create a WebGPU renderer, a scene, a camera and renderasync the scene. The background is white.

Code

(See the live examples for code)

Live example

• WebGL: https://codepen.io/boytchev/pen/yLWwxNZ
• WebGPU: https://codepen.io/boytchev/pen/dyErjXB

Screenshots

WebGL black background (the canvas has red border):

WebGPU white background (the canvas has red border):

Version

r165

Device

Desktop

Browser

Chrome, Firefox

OS

Windows

[WestLangley]

1. Create a WebGL renderer, a scene, a camera and render the scene. The background color is black.
2. Create a WebGPU renderer, a scene, a camera and renderasync the scene. The background is white.

Actually, that is not quite true.

renderer = new THREE.WebGLRenderer(); // clear color is black; clear alpha is 1

renderer = new THREE.WebGLRenderer( { alpha: false } ); // clear color is black; clear alpha is 1

renderer = new THREE.WebGLRenderer( { alpha: true } ); // clear color is black; clear alpha is 0

And regardless of the backend,

renderer = new WebGPURenderer(); // clear color is black; clear alpha is 0

renderer = new WebGPURenderer( { alpha: false } ); // clear color is black; clear alpha is 1

renderer = new WebGPURenderer( { alpha: true } ); // clear color is black; clear alpha is 0

[boytchev]

Thanks for the clarification. It's my bad I didn't check the alpha, I was only considering the visual effect.

So, in the vec3 interpretation of background color both renderers work the same, but sill in the vec4 interpretation they act differently.

[Mugen87]

This issue has two aspects. The value of clear alpha and whether the rendering context is created as transparent or opaque.

In WebGLRenderer, the rendering context is always created with alpha: true, regardless of the alpha parameter. That has been done for performance reasons (see https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#avoid_alphafalse_which_can_be_expensive). The alpha parameter just controls the clear alpha value. Since it is false by default, the clear alpha value is 1.

In WebGPURenderer the implementation initially always created a transparent canvas but it has been made configurable via #27442. So the WebGPU backend can have a transparent or opaque canvas whereas the WebGL backend always creates its context with alpha: true. However, since the alpha parameter defaults to true, the clear value is now 0.

If we want to strictly align WebGPURenderer to WebGLRenderer, it would be necessary to set alpha to false in WebGPURenderer and always create its context with premultiplied as alphaMode.

IMO, the default clear alpha value should be 1 and the clear color black. We have to agree on a policy in that regard, then we can file a PR.

Ideally, I would remove alpha from WebGLRenderer and let the clear alpha be defined by WebGLRenderer.setClearAlpha(). In WebGPURenderer I would also decouple the alpha parameter from the clear alpha value (and maybe rename to alphaMode). We can keep the parameter since there seem to be no performance issues with an opaque canvas like in WebGL but the clear alpha value should be changed to 1.