WebGLRenderer: background is not set to transparent on 0.137.0 version

[japie1235813]

Describe the bug
We upgrades the threejs version recently from 0.131.3 to 0.137.0 tensorflow/tensorboard@420916a. It breaks our repo by not setting the background to black. (see screenshots before)
After debugging we found the cause is from the background is not set to transparent by "alpha: true". (which means, we can fix our issue by adding renderer.setClearColor(0x000000, 0);)
Is there any changes from the version that makes this stop working?

To Reproduce
You can reproduce the issue by clone our repo. Checkout to the upgrade comment and run TensorBoard (https://github.com/tensorflow/tensorboard).
However it requires some demo data to run the card. Let me know how I can assist.

Code
code point

//ts
   this.renderer = new THREE.WebGLRenderer({
      canvas: canvas as HTMLCanvasElement,
      context: canvas.getContext('webgl2', {
        antialias: true,
        precision: 'highp',
        alpha: true,
      } as WebGLContextAttributes) as WebGLRenderingContext,
    });

Screenshots
before (0.131.3)

after (0.137.0)

Platform:

• Device: Desktop
• OS: MacOS
• Browser: Chrome
• Three.js version: 0.131.3 (works) 0.137.0 (breaks)

[Mugen87]

Instead of creating the context by yourself, the following should fix the issue:

this.renderer = new THREE.WebGLRenderer({
  canvas: canvas as HTMLCanvasElement,
  antialias: true,
  alpha: true
});

BTW: AFAIK, precision is no WebGL context attribute.

In r137 the renderer always uses alpha: true when creating the WebGL rendering context. A fallback was implemented to support existing setups however it does not work for your case since you create the context by yourself. Meaning since you pass no alpha parameter when creating the renderer, the following line assigns false to _alpha:

three.js/src/renderers/WebGLRenderer.js

Line 62 in 766b95b

_alpha = parameters.alpha !== undefined ? parameters.alpha : false,

And this value leads to a wrong alpha clear value in WebGLBackground:

three.js/src/renderers/webgl/WebGLBackground.js

Line 13 in 766b95b

let clearAlpha = alpha === true ? 0 : 1;

[Mugen87]

@mrdoob We could fix this issue on our side however it means we have to call getContextAttributes() on the user provided context and then evaluate the defined alpha value.

[japie1235813]

Thanks for the reply! Moving the params out of context fixes the issue.

[mrdoob]

@mrdoob We could fix this issue on our side however it means we have to call getContextAttributes() on the user provided context and then evaluate the defined alpha value.

That sounds good 👍

[Mugen87]

@japie1235813 The PR you have filed at tensorboard is not entirely correct. If you pass in context parameters like alpha or antialias to WebGLRenderer, you have to let three.js create the rendering context. You have to use:

this.renderer = new THREE.WebGLRenderer({
  canvas: canvas as HTMLCanvasElement,
  antialias: true,
  alpha: true
});

/cc @bmd3k

[japie1235813]

so after #23504
it's one of the two usage?

this.renderer = new THREE.WebGLRenderer({
  canvas: canvas as HTMLCanvasElement,
  antialias: true,
  alpha: true
});

or

this.renderer = new THREE.WebGLRenderer({
      canvas: canvas as HTMLCanvasElement,
      context: canvas.getContext('webgl2', {
        antialias: true, // this looks not being taken?
        alpha: true,
      } as WebGLContextAttributes) as WebGLRenderingContext,
    });

[Mugen87]

Correct. I recommend the first one though. Creating a rendering context manually should only be done if there is a compelling reason.