Added clear color parameter to WebGLRenderer constructor, also added setClearColor API call.

This allows to work around ANGLE antialiasing issue appearing when compositing WebGL framebuffer with transparent background color with HTML canvas element background (while keeping antialiasing on).

WebGLRenderer constructor now takes JSON object with few optional parameters:

    renderer = new THREE.WebGLRenderer { scene: scene,
                                         antialias: true,
                                         clearColor: 0x000000,
                                         clearAlpha: 0 };

Here is how to change clear color in runtime:

    renderer.setClearColor( 0xff0000, 1 );

examples/geometry_large_mesh.html

@@ -151,7 +151,7 @@
 
 				if ( render_gl ) {
 					try {
-						webglRenderer = new THREE.WebGLRenderer( scene );
+						webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
 						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 						container.appendChild( webglRenderer.domElement );
 						has_gl = 1;

examples/geometry_minecraft.html

@@ -154,7 +154,7 @@
 				directionalLight.position.normalize();
 				scene.addLight( directionalLight );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { scene: scene } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.innerHTML = "";

examples/geometry_minecraft_ao.html

@@ -472,7 +472,7 @@
 				directionalLight.position.normalize();
 				scene.addLight( directionalLight );
 
-				renderer = new THREE.WebGLRenderer( scene );
+				renderer = new THREE.WebGLRenderer( { scene: scene } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.innerHTML = "";

examples/geometry_terrain_fog_gl.html

@@ -94,7 +94,7 @@
 				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.addObject( mesh );
 
-				renderer = new THREE.WebGLRenderer( scene, false );
+				renderer = new THREE.WebGLRenderer( { scene: scene, clearColor: 0xefd1b5, clearAlpha: 1 } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.innerHTML = "";

examples/geometry_terrain_gl.html

@@ -93,7 +93,7 @@
 				mesh.rotation.x = - 90 * Math.PI / 180;
 				scene.addObject( mesh );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { scene: scene } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.innerHTML = "";

examples/lights_pointlights_gl.html

@@ -104,7 +104,6 @@
 				scene.addLight( directionalLight );
 				*/
 				
-				scene.addLight( new THREE.AmbientLight( 0x00020 ) );
 				scene.addLight( new THREE.AmbientLight( 0x00000 ) );
 
 				light1 = new THREE.PointLight( 0xff0040 );
@@ -130,8 +129,7 @@
 				l3.position = light3.position;
 				scene.addObject( l3 );
  
-				//renderer = new THREE.CanvasRenderer();
-				renderer = new THREE.WebGLRenderer( scene );
+				renderer = new THREE.WebGLRenderer( { scene: scene } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 				

examples/lights_test.html

@@ -148,7 +148,7 @@
 
 					try {
 
-						webglRenderer = new THREE.WebGLRenderer( scene );
+						webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
 						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 						container.appendChild( webglRenderer.domElement );
 

examples/materials_cars.html

@@ -199,7 +199,7 @@
 
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
 
-				webglRenderer = new THREE.WebGLRenderer( scene );
+				webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
 				webglRenderer.setSize( window.innerWidth, window.innerHeight );
 				webglRenderer.setFaceCulling( 0 );
 				webglRenderer.autoClear = false;

examples/materials_cubemap.html

@@ -112,7 +112,7 @@
 				//SceneUtils.addPanoramaCube( sceneCube, 100000, images );
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, reflectionCube );
 				
-				webglRenderer = new THREE.WebGLRenderer( scene );
+				webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
 				webglRenderer.setSize( window.innerWidth, window.innerHeight );
 				webglRenderer.autoClear = false;
 				//webglRenderer.setFaceCulling( 0 );

examples/materials_cubemap_balls_reflection.html

@@ -104,7 +104,7 @@
 				//SceneUtils.addPanoramaCube( sceneCube, 100000, images );
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
 
-				webglRenderer = new THREE.WebGLRenderer( scene );
+				webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
 				webglRenderer.setSize( window.innerWidth, window.innerHeight );
 				webglRenderer.autoClear = false;
 				container.appendChild( webglRenderer.domElement );

examples/materials_cubemap_balls_refraction.html

@@ -102,7 +102,7 @@
 				//SceneUtils.addPanoramaCube( sceneCube, 100000, images );
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
 
-				webglRenderer = new THREE.WebGLRenderer( scene );
+				webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
 				webglRenderer.setSize( window.innerWidth, window.innerHeight );
 				webglRenderer.autoClear = false;
 				container.appendChild( webglRenderer.domElement );

examples/materials_cubemap_escher.html

@@ -88,7 +88,7 @@
 				//SceneUtils.addPanoramaCube( scene, 6000, images );
 				SceneUtils.addPanoramaCubeWebGL( scene, 6000, textureCube );
 
-				webglRenderer = new THREE.WebGLRenderer( scene );
+				webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
 				webglRenderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( webglRenderer.domElement );
 

examples/materials_cubemap_refraction.html

@@ -110,7 +110,7 @@
 				//SceneUtils.addPanoramaCube( sceneCube, 100000, images );
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
 
-				webglRenderer = new THREE.WebGLRenderer( scene );
+				webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
 				webglRenderer.setSize( window.innerWidth, window.innerHeight );
 				webglRenderer.autoClear = false;
 				container.appendChild( webglRenderer.domElement );

examples/materials_gl.html

@@ -143,7 +143,7 @@
 				pointLight = new THREE.PointLight( 0xffffff, 1 );
 				scene.addLight( pointLight );
 
-				renderer = new THREE.WebGLRenderer( scene );
+				renderer = new THREE.WebGLRenderer( { scene: scene } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );

examples/materials_grass.html

@@ -50,7 +50,7 @@
 
 				}
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { scene: scene } );
 				renderer.sortObjects = false;
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/materials_multimaterials.html

@@ -146,7 +146,7 @@
 
 				if ( render_gl ) {
 					try {
-						webglRenderer = new THREE.WebGLRenderer( scene );
+						webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
 						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 						container.appendChild( webglRenderer.domElement );
 						has_gl = 1;

examples/materials_normalmap.html

@@ -190,7 +190,7 @@
 				
 				loader.loadBinary( "obj/ninja/NinjaLo_bin.js", function( geometry ) { createScene( geometry, scale, material1, material2 ) }, "obj/ninja" );
 
-				webglRenderer = new THREE.WebGLRenderer( scene );
+				webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
 				webglRenderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( webglRenderer.domElement );
 

examples/materials_shaders.html

@@ -171,7 +171,7 @@
 
 				if ( render_gl ) {
 					try {
-						webglRenderer = new THREE.WebGLRenderer( scene );
+						webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
 						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 						container.appendChild( webglRenderer.domElement );
 						has_gl = 1;

examples/materials_shaders_fresnel.html

@@ -115,7 +115,7 @@
 
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
 
-				webglRenderer = new THREE.WebGLRenderer( scene );
+				webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
 				webglRenderer.setSize( window.innerWidth, window.innerHeight );
 				webglRenderer.autoClear = false;
 				container.appendChild( webglRenderer.domElement );

examples/obj_convert_test.html

@@ -167,7 +167,7 @@
 
 				if ( render_gl ) {
 					try {
-						webglRenderer = new THREE.WebGLRenderer( scene );
+						webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
 						webglRenderer.setFaceCulling(0);
 						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 						container.appendChild( webglRenderer.domElement );

examples/uqbiquity_test.html

@@ -220,7 +220,7 @@
 				svgRenderer.setQuality( 'low' );
 				container.appendChild( svgRenderer.domElement );
 
-				webglRenderer = new THREE.WebGLRenderer();
+				webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
 				webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				// webglRenderer.setFaceCulling( 0 );
 				container.appendChild( webglRenderer.domElement );

src/renderers/WebGLRenderer.js

@@ -4,7 +4,7 @@
  * @author alteredq / http://alteredqualia.com/
  */
 
-THREE.WebGLRenderer = function ( scene, antialias ) {
+THREE.WebGLRenderer = function ( parameters ) {
 
 	// Currently you can use just up to 4 directional / point lights total.
 	// Chrome barfs on shader linking when there are more than 4 lights :(
@@ -36,15 +36,18 @@ THREE.WebGLRenderer = function ( scene, antialias ) {
 	// heuristics to create shader parameters according to lights in the scene
 	// (not to blow over maxLights budget)
 
-	maxLightCount = allocateLights( scene, 4 );
-	fog = scene ? scene.fog : null,
+	maxLightCount = allocateLights( parameters.scene, 4 );
+	fog = parameters.scene ? parameters.scene.fog : null,
 	
-	aa = antialias != undefined ? antialias : true;
+	antialias = parameters.antialias != undefined ? parameters.antialias : true,
+	
+	clearColor = parameters.clearColor ? new THREE.Color( parameters.clearColor ) : new THREE.Color( 0x000000 ),
+	clearAlpha = parameters.clearAlpha ? parameters.clearAlpha : 0;
 	
 	this.domElement = _canvas;
 	this.autoClear = true;
 
-	initGL( aa );
+	initGL( antialias, clearColor, clearAlpha );
 
 	_uberProgram = initUbershader( maxLightCount.directional, maxLightCount.point, fog );
 	_oldProgram = _uberProgram;
@@ -59,6 +62,13 @@ THREE.WebGLRenderer = function ( scene, antialias ) {
 
 	};
 
+	this.setClearColor = function( hex, alpha ) {
+		
+		var color = new THREE.Color( hex );
+		_gl.clearColor( color.r, color.g, color.b, alpha );
+		
+	};
+	
 	this.clear = function () {
 
 		_gl.clear( _gl.COLOR_BUFFER_BIT | _gl.DEPTH_BUFFER_BIT );
@@ -899,7 +909,7 @@ THREE.WebGLRenderer = function ( scene, antialias ) {
 	};
 
 
-	function initGL( antialias ) {
+	function initGL( antialias, clearColor, clearAlpha ) {
 
 		try {
 
@@ -926,7 +936,7 @@ THREE.WebGLRenderer = function ( scene, antialias ) {
 
 		_gl.enable( _gl.BLEND );
 		_gl.blendFunc( _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA );
-		_gl.clearColor( 0, 0, 0, 0 );
+		_gl.clearColor( clearColor.r, clearColor.g, clearColor.b, clearAlpha );
 
 	};