Changed WebGLRenderTarget / FBO default color format to RGBA.

This makes lens flares work with postprocessing.

Had to change lines color example to use clearAlpha = 1 to get back bloom.

build/Three.js

@@ -334,7 +334,7 @@ J;B.__dirtyVertices=!0;B.__dirtyColors=!0}V(u.__webglObjects,B,C)}else if(C inst
 e.createBuffer();x.__webglColorBuffer=e.createBuffer();x=B;J=x.vertices.length;x.__vertexArray=new Float32Array(J*3);x.__colorArray=new Float32Array(J*3);x.__sortArray=[];x.__webglParticleCount=J;B.__dirtyVertices=!0;B.__dirtyColors=!0}V(u.__webglObjects,B,C)}else THREE.MarchingCubes!==undefined&&C instanceof THREE.MarchingCubes&&u.__webglObjectsImmediate.push({object:C,opaque:{list:[],count:0},transparent:{list:[],count:0}});n.__objectsAdded.splice(0,1)}for(;n.__objectsRemoved.length;){C=n.__objectsRemoved[0];
 u=n;B=void 0;x=void 0;for(B=u.__webglObjects.length-1;B>=0;B--){x=u.__webglObjects[B].object;C==x&&u.__webglObjects.splice(B,1)}n.__objectsRemoved.splice(0,1)}C=0;for(u=n.__webglObjects.length;C<u;C++)G(n.__webglObjects[C].object,n);C=0;for(u=n.__webglShadowVolumes.length;C<u;C++)G(n.__webglShadowVolumes[C].object,n);C=0;for(u=n.__webglLensFlares.length;C<u;C++)G(n.__webglLensFlares[C].object,n);C=0;for(u=n.__webglSprites.length;C<u;C++)G(n.__webglSprites[C].object,n)};this.setFaceCulling=function(n,
 C){if(n){!C||C=="ccw"?e.frontFace(e.CCW):e.frontFace(e.CW);if(n=="back")e.cullFace(e.BACK);else n=="front"?e.cullFace(e.FRONT):e.cullFace(e.FRONT_AND_BACK);e.enable(e.CULL_FACE)}else e.disable(e.CULL_FACE)};this.supportsVertexTextures=function(){return e.getParameter(e.MAX_VERTEX_TEXTURE_IMAGE_UNITS)>0}};
-THREE.WebGLRenderTarget=function(b,c,d){this.width=b;this.height=c;d=d||{};this.wrapS=d.wrapS!==undefined?d.wrapS:THREE.ClampToEdgeWrapping;this.wrapT=d.wrapT!==undefined?d.wrapT:THREE.ClampToEdgeWrapping;this.magFilter=d.magFilter!==undefined?d.magFilter:THREE.LinearFilter;this.minFilter=d.minFilter!==undefined?d.minFilter:THREE.LinearMipMapLinearFilter;this.format=d.format!==undefined?d.format:THREE.RGBFormat;this.type=d.type!==undefined?d.type:THREE.UnsignedByteType;this.depthBuffer=d.depthBuffer!==
+THREE.WebGLRenderTarget=function(b,c,d){this.width=b;this.height=c;d=d||{};this.wrapS=d.wrapS!==undefined?d.wrapS:THREE.ClampToEdgeWrapping;this.wrapT=d.wrapT!==undefined?d.wrapT:THREE.ClampToEdgeWrapping;this.magFilter=d.magFilter!==undefined?d.magFilter:THREE.LinearFilter;this.minFilter=d.minFilter!==undefined?d.minFilter:THREE.LinearMipMapLinearFilter;this.format=d.format!==undefined?d.format:THREE.RGBAFormat;this.type=d.type!==undefined?d.type:THREE.UnsignedByteType;this.depthBuffer=d.depthBuffer!==
 undefined?d.depthBuffer:!0;this.stencilBuffer=d.stencilBuffer!==undefined?d.stencilBuffer:!0};
 THREE.SoundRenderer=function(){this.volume=1;this.domElement=document.createElement("div");this.domElement.id="THREESound";this.cameraPosition=new THREE.Vector3;this.soundPosition=new THREE.Vector3;this.render=function(b,c,d){d&&b.update(undefined,!1,c);d=b.sounds;var f,g=d.length;for(f=0;f<g;f++){b=d[f];this.soundPosition.set(b.matrixWorld.n14,b.matrixWorld.n24,b.matrixWorld.n34);this.soundPosition.subSelf(c.position);if(b.isPlaying&&b.isLoaded){b.isAddedToDOM||b.addToDOM(this.domElement);b.calculateVolumeAndPan(this.soundPosition)}}}};
 THREE.RenderableVertex=function(){this.positionWorld=new THREE.Vector3;this.positionScreen=new THREE.Vector4;this.visible=!0};THREE.RenderableVertex.prototype.copy=function(b){this.positionWorld.copy(b.positionWorld);this.positionScreen.copy(b.positionScreen)};

build/custom/ThreeWebGL.js

@@ -286,5 +286,5 @@ z;r.__dirtyVertices=!0;r.__dirtyColors=!0}ca(n.__webglObjects,r,s)}else if(s ins
 c.createBuffer();m.__webglColorBuffer=c.createBuffer();m=r;z=m.vertices.length;m.__vertexArray=new Float32Array(z*3);m.__colorArray=new Float32Array(z*3);m.__sortArray=[];m.__webglParticleCount=z;r.__dirtyVertices=!0;r.__dirtyColors=!0}ca(n.__webglObjects,r,s)}else THREE.MarchingCubes!==undefined&&s instanceof THREE.MarchingCubes&&n.__webglObjectsImmediate.push({object:s,opaque:{list:[],count:0},transparent:{list:[],count:0}});f.__objectsAdded.splice(0,1)}for(;f.__objectsRemoved.length;){s=f.__objectsRemoved[0];
 n=f;r=void 0;m=void 0;for(r=n.__webglObjects.length-1;r>=0;r--){m=n.__webglObjects[r].object;s==m&&n.__webglObjects.splice(r,1)}f.__objectsRemoved.splice(0,1)}s=0;for(n=f.__webglObjects.length;s<n;s++)T(f.__webglObjects[s].object,f);s=0;for(n=f.__webglShadowVolumes.length;s<n;s++)T(f.__webglShadowVolumes[s].object,f);s=0;for(n=f.__webglLensFlares.length;s<n;s++)T(f.__webglLensFlares[s].object,f);s=0;for(n=f.__webglSprites.length;s<n;s++)T(f.__webglSprites[s].object,f)};this.setFaceCulling=function(f,
 s){if(f){!s||s=="ccw"?c.frontFace(c.CCW):c.frontFace(c.CW);if(f=="back")c.cullFace(c.BACK);else f=="front"?c.cullFace(c.FRONT):c.cullFace(c.FRONT_AND_BACK);c.enable(c.CULL_FACE)}else c.disable(c.CULL_FACE)};this.supportsVertexTextures=function(){return c.getParameter(c.MAX_VERTEX_TEXTURE_IMAGE_UNITS)>0}};
-THREE.WebGLRenderTarget=function(b,d,e){this.width=b;this.height=d;e=e||{};this.wrapS=e.wrapS!==undefined?e.wrapS:THREE.ClampToEdgeWrapping;this.wrapT=e.wrapT!==undefined?e.wrapT:THREE.ClampToEdgeWrapping;this.magFilter=e.magFilter!==undefined?e.magFilter:THREE.LinearFilter;this.minFilter=e.minFilter!==undefined?e.minFilter:THREE.LinearMipMapLinearFilter;this.format=e.format!==undefined?e.format:THREE.RGBFormat;this.type=e.type!==undefined?e.type:THREE.UnsignedByteType;this.depthBuffer=e.depthBuffer!==
+THREE.WebGLRenderTarget=function(b,d,e){this.width=b;this.height=d;e=e||{};this.wrapS=e.wrapS!==undefined?e.wrapS:THREE.ClampToEdgeWrapping;this.wrapT=e.wrapT!==undefined?e.wrapT:THREE.ClampToEdgeWrapping;this.magFilter=e.magFilter!==undefined?e.magFilter:THREE.LinearFilter;this.minFilter=e.minFilter!==undefined?e.minFilter:THREE.LinearMipMapLinearFilter;this.format=e.format!==undefined?e.format:THREE.RGBAFormat;this.type=e.type!==undefined?e.type:THREE.UnsignedByteType;this.depthBuffer=e.depthBuffer!==
 undefined?e.depthBuffer:!0;this.stencilBuffer=e.stencilBuffer!==undefined?e.stencilBuffer:!0};

examples/webgl_lines_colors.html

@@ -60,8 +60,8 @@
 
 			camera, scene, renderer, material;
 
-			var cameraOrtho, sceneScreen, rtTexture1, rtTexture2, rtTexture3, materialScreen, materialConvolution, blurx, blury, quadScreen;
-
+			var postprocessing = { enabled: true };
+			
 			init();
 			animate();
 
@@ -77,9 +77,9 @@
 
 				scene = new THREE.Scene();
 
-				renderer = new THREE.WebGLRenderer( { antialias: false } );
+				renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.autoClear = false;
+
 				container.appendChild( renderer.domElement );
 
 				var geometry = new THREE.Geometry(),
@@ -132,59 +132,7 @@
 
 				}
 
-				// postprocessing
-
-				cameraOrtho = new THREE.Camera();
-				cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
-				cameraOrtho.position.z = 100;
-
-				sceneScreen = new THREE.Scene();
-
-				var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter };
-				rtTexture1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
-				rtTexture2 = new THREE.WebGLRenderTarget( 512, 512, pars );
-				rtTexture3 = new THREE.WebGLRenderTarget( 512, 512, pars );
-
-				var screen_shader = ShaderUtils.lib["screen"];
-				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
-
-				screen_uniforms["tDiffuse"].texture = rtTexture1;
-				screen_uniforms["opacity"].value = 1.0;
-
-				materialScreen = new THREE.MeshShaderMaterial( {
-
-					uniforms: screen_uniforms,
-					vertexShader: screen_shader.vertexShader,
-					fragmentShader: screen_shader.fragmentShader,
-					blending: THREE.AdditiveBlending,
-					transparent: true
-
-				} );
-
-				var convolution_shader = ShaderUtils.lib["convolution"];
-				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
-
-				blurx = new THREE.Vector2( 0.001953125, 0.0 ),
-				blury = new THREE.Vector2( 0.0, 0.001953125 );
-
-				convolution_uniforms["tDiffuse"].texture = rtTexture1;
-				convolution_uniforms["uImageIncrement"].value = blurx;
-				convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
-
-				materialConvolution = new THREE.MeshShaderMaterial( {
-
-					uniforms: convolution_uniforms,
-					vertexShader:   "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
-					fragmentShader: "#define KERNEL_SIZE 25\n"   + convolution_shader.fragmentShader
-
-				} );
-
-				var plane = new Plane( window.innerWidth, window.innerHeight );
-
-				quadScreen = new THREE.Mesh( plane, materialConvolution );
-				quadScreen.position.z = -100;
-				sceneScreen.addObject( quadScreen );
-
+				
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
@@ -195,6 +143,9 @@
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
+				initPostprocessing();
+				renderer.autoClear = false;
+
 			}
 
 			// port of Processing Java code by Thomas Diewald
@@ -240,6 +191,59 @@
 			}
 
 			//
+			
+			function initPostprocessing() {
+
+				postprocessing.scene = new THREE.Scene();
+
+				postprocessing.camera = new THREE.Camera();
+				postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
+				postprocessing.camera.position.z = 100;
+
+				var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter };
+				postprocessing.rtTexture1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
+				postprocessing.rtTexture2 = new THREE.WebGLRenderTarget( 512, 512, pars );
+				postprocessing.rtTexture3 = new THREE.WebGLRenderTarget( 512, 512, pars );
+
+				var screen_shader = ShaderUtils.lib["screen"];
+				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
+
+				screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
+				screen_uniforms["opacity"].value = 1.0;
+
+				postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
+
+					uniforms: screen_uniforms,
+					vertexShader: screen_shader.vertexShader,
+					fragmentShader: screen_shader.fragmentShader,
+					blending: THREE.AdditiveBlending,
+					transparent: true
+
+				} );
+
+				var convolution_shader = ShaderUtils.lib["convolution"];
+				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
+
+				postprocessing.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
+				postprocessing.blury = new THREE.Vector2( 0.0, 0.001953125 );
+
+				convolution_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
+				convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
+				convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
+
+				postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
+
+					uniforms: convolution_uniforms,
+					vertexShader:   "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
+					fragmentShader: "#define KERNEL_SIZE 25\n"   + convolution_shader.fragmentShader
+
+				} );
+
+				postprocessing.quad = new THREE.Mesh( new Plane( window.innerWidth, window.innerHeight ), postprocessing.materialConvolution );
+				postprocessing.quad.position.z = -500;
+				postprocessing.scene.addObject( postprocessing.quad );
+
+			}			
 
 			function onDocumentMouseMove(event) {
 
@@ -283,7 +287,6 @@
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
-				camera.updateMatrix();
 
 				var time = new Date().getTime() * 0.0005;
 
@@ -293,43 +296,50 @@
 
 				}
 
-				//renderer.render( scene, camera );
+				if ( postprocessing.enabled ) {
 
-				renderer.clear();
+					renderer.clear();
 
-				// Render scene into texture
+					// Render scene into texture
 
-				renderer.render( scene, camera, rtTexture1, true );
+					renderer.render( scene, camera, postprocessing.rtTexture1, true );
 
-				// Render quad with blured scene into texture (convolution pass 1)
+					// Render quad with blured scene into texture (convolution pass 1)
 
-				quadScreen.materials = [ materialConvolution ];
+					postprocessing.quad.materials = [ postprocessing.materialConvolution ];
 
-				materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
-				materialConvolution.uniforms.uImageIncrement.value = blurx;
+					postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
+					postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blurx;
 
-				renderer.render( sceneScreen, cameraOrtho, rtTexture2, true );
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture2, true );
 
-				// Render quad with blured scene into texture (convolution pass 2)
+					// Render quad with blured scene into texture (convolution pass 2)
 
-				materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
-				materialConvolution.uniforms.uImageIncrement.value = blury;
+					postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture2;
+					postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blury;
 
-				renderer.render( sceneScreen, cameraOrtho, rtTexture3, true );
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture3, true );
 
-				// Render original scene with superimposed blur to texture
+					// Render original scene with superimposed blur to texture
 
-				quadScreen.materials = [ materialScreen ];
+					postprocessing.quad.materials = [ postprocessing.materialScreen ];
 
-				materialScreen.uniforms.tDiffuse.texture = rtTexture3;
-				materialScreen.uniforms.opacity.value = 1.3;
+					postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
+					postprocessing.materialScreen.uniforms.opacity.value = 1.3;
 
-				renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false );
 
-				// Render to screen
+					// Render to screen
 
-				materialScreen.uniforms.tDiffuse.texture = rtTexture1;
-				renderer.render( sceneScreen, cameraOrtho );
+					postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
+					renderer.render( postprocessing.scene, postprocessing.camera );
+
+				} else {
+
+					renderer.clear();
+					renderer.render( scene, camera );
+
+				}
 
 			}
 

src/renderers/WebGLRenderTarget.js

@@ -15,7 +15,7 @@ THREE.WebGLRenderTarget = function ( width, height, options ) {
 	this.magFilter = options.magFilter !== undefined ? options.magFilter : THREE.LinearFilter;
 	this.minFilter = options.minFilter !== undefined ? options.minFilter : THREE.LinearMipMapLinearFilter;
 
-	this.format = options.format !== undefined ? options.format : THREE.RGBFormat;
+	this.format = options.format !== undefined ? options.format : THREE.RGBAFormat;
 	this.type = options.type !== undefined ? options.type : THREE.UnsignedByteType;
 	
 	this.depthBuffer = options.depthBuffer !== undefined ? options.depthBuffer : true;