Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

WebGLRenderer - use alpha: true by default

See original GitHub issue

Describe the bug

As shown in the docs here, the WebGLRenderer has alpha: false by default. But also in the same page there is a list to WebGL best practices from MDN which has a section specifically saying to avoid alpha: false.

It looks like this decision was originally made in #1104 and maybe should be re-evaluated.

To Reproduce

N/A

Code

N/A

Live example

N/A

Expected behavior

The WebGLRenderer should use the most optimized/recommended settings by default.

Screenshots

N/A

Platform:

N/A

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:13 (6 by maintainers)

Top GitHub Comments

2reactions

Mugen87commented, Jan 11, 2022

At least it is not possible with WebGPU 😁 .

1reaction

Mugen87commented, Jan 11, 2022

Related Chromium issue: https://crbug.com/1103485

Top Results From Across the Web

WebGLRenderer#alpha – three.js docs

Default is true . logarithmicDepthBuffer - whether to use a logarithmic depth buffer. It may be necessary to use this if dealing with...

WebGL and Alpha

The default is true. Of course the result will still be composited over the page with whatever background color ends up being under...

true to have transparent background in Three.js - Stack Overflow

Code for settings, if i remove the alpha: true, the problem goes. renderer = new THREE.WebGLRenderer( { alpha: true } ); renderer.

WebGLRenderer( parameters )

canvas — A Canvas where the renderer draws its output. precision — shader precision. Can be "highp", "mediump" or "lowp". alpha — Boolean,...

How to use the three.WebGLRenderer function in three - Snyk

createRenderer() { // Create the renderer and set some defaults. this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.alpha = true; ...