WebGLRenderer: Create WebGL context with alpha: true. (#23230)

* WebGLBackground: Set clearAlpha to 1 by default.

* Examples: Fixed alpha: true breakage.

* WebGLRenderer: Try setting clearAlpha automatically.

* Revert "Examples: Fixed alpha: true breakage."

This reverts commit 05471ee22650386c06fc8b210b9088cec203d0b0.

* Example: Added workaround in webgl_materials_blending_custom.

* Examples: Fixed webgl_shadow_contact.

* Clean up.

examples/webgl_materials_blending_custom.html

@@ -298,7 +298,10 @@
 
 				// RENDERER
 
-				renderer = new THREE.WebGLRenderer();
+				const canvas = document.createElement( 'canvas' );
+				const context = canvas.getContext( 'webgl', { alpha: false } ); // TODO Remove workaround
+
+				renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_shadow_contact.html

@@ -288,6 +288,10 @@
 				cameraHelper.visible = false;
 				scene.overrideMaterial = depthMaterial;
 
+				// set renderer clear alpha
+				const initialClearAlpha = renderer.getClearAlpha();
+				renderer.setClearAlpha( 0 );
+
 				// render to the render target to get the depths
 				renderer.setRenderTarget( renderTarget );
 				renderer.render( scene, shadowCamera );
@@ -304,6 +308,7 @@
 
 				// reset and render the normal scene
 				renderer.setRenderTarget( null );
+				renderer.setClearAlpha( initialClearAlpha );
 				scene.background = initialBackground;
 
 				renderer.render( scene, camera );

src/renderers/WebGLRenderer.js

@@ -201,7 +201,7 @@ function WebGLRenderer( parameters = {} ) {
 	try {
 
 		const contextAttributes = {
-			alpha: _alpha,
+			alpha: true,
 			depth: _depth,
 			stencil: _stencil,
 			antialias: _antialias,
@@ -300,7 +300,7 @@ function WebGLRenderer( parameters = {} ) {
 		materials = new WebGLMaterials( properties );
 		renderLists = new WebGLRenderLists();
 		renderStates = new WebGLRenderStates( extensions, capabilities );
-		background = new WebGLBackground( _this, cubemaps, state, objects, _premultipliedAlpha );
+		background = new WebGLBackground( _this, cubemaps, state, objects, _alpha, _premultipliedAlpha );
 		shadowMap = new WebGLShadowMap( _this, objects, capabilities );
 
 		bufferRenderer = new WebGLBufferRenderer( _gl, extensions, info, capabilities );

src/renderers/webgl/WebGLBackground.js

@@ -7,10 +7,10 @@ import { Mesh } from '../../objects/Mesh.js';
 import { ShaderLib } from '../shaders/ShaderLib.js';
 import { cloneUniforms } from '../shaders/UniformsUtils.js';
 
-function WebGLBackground( renderer, cubemaps, state, objects, premultipliedAlpha ) {
+function WebGLBackground( renderer, cubemaps, state, objects, alpha, premultipliedAlpha ) {
 
 	const clearColor = new Color( 0x000000 );
-	let clearAlpha = 0;
+	let clearAlpha = alpha === true ? 0 : 1;
 
 	let planeMesh;
 	let boxMesh;