WebGLDeferredRenderer: taking into account material color and light intensity for area lights.

Also added forgotten AreaLight.js

build/three.js

@@ -7976,16 +7976,18 @@ THREE.AmbientLight = function ( hex ) {
 THREE.AmbientLight.prototype = Object.create( THREE.Light.prototype );
 /**
  * @author MPanknin / http://www.redplant.de/
+ * @author alteredq / http://alteredqualia.com/
  */
 
-THREE.AreaLight = function ( hex ) {
+THREE.AreaLight = function ( hex, intensity ) {
 
 	THREE.Light.call( this, hex );
 
 	this.normal = new THREE.Vector3( 0, -1, 0 );
 	this.right = new THREE.Vector3( 1, 0, 0 );
 
-	this.intensity = 1.0;
+	this.intensity = ( intensity !== undefined ) ? intensity : 1;
+
 	this.width = 1.0;
 	this.height = 1.0;
 

build/three.min.js

@@ -163,7 +163,7 @@ this.attributes.uv)console.warn("Missing required attributes (index, position, n
 var n,p,m,r,s,l,q,u,B,x,t,F,C,z,A,f=new THREE.Vector3,g=new THREE.Vector3,H,G,I,$,D,L,y,K=this.offsets;I=0;for($=K.length;I<$;++I){G=K[I].start;D=K[I].count;var J=K[I].index;H=G;for(G+=D;H<G;H+=3)D=J+b[H],L=J+b[H+1],y=J+b[H+2],n=c[3*D],p=c[3*D+1],m=c[3*D+2],r=c[3*L],s=c[3*L+1],l=c[3*L+2],q=c[3*y],u=c[3*y+1],B=c[3*y+2],x=e[2*D],t=e[2*D+1],F=e[2*L],C=e[2*L+1],z=e[2*y],A=e[2*y+1],r-=n,n=q-n,s-=p,p=u-p,l-=m,m=B-m,F-=x,x=z-x,C-=t,t=A-t,A=1/(F*t-x*C),f.set((t*r-C*n)*A,(t*s-C*p)*A,(t*l-C*m)*A),g.set((F*
 n-x*r)*A,(F*p-x*s)*A,(F*m-x*l)*A),i[D].addSelf(f),i[L].addSelf(f),i[y].addSelf(f),k[D].addSelf(g),k[L].addSelf(g),k[y].addSelf(g)}var R=new THREE.Vector3,P=new THREE.Vector3,ca=new THREE.Vector3,xa=new THREE.Vector3,M,pa,ya;I=0;for($=K.length;I<$;++I){G=K[I].start;D=K[I].count;J=K[I].index;H=G;for(G+=D;H<G;H+=3)D=J+b[H],L=J+b[H+1],y=J+b[H+2],a(D),a(L),a(y)}this.tangentsNeedUpdate=this.hasTangents=!0}},dispose:function(){this.dispatchEvent({type:"dispose"})}};THREE.Camera=function(){THREE.Object3D.call(this);this.matrixWorldInverse=new THREE.Matrix4;this.projectionMatrix=new THREE.Matrix4;this.projectionMatrixInverse=new THREE.Matrix4};THREE.Camera.prototype=Object.create(THREE.Object3D.prototype);THREE.Camera.prototype.lookAt=function(a){this.matrix.lookAt(this.position,a,this.up);!0===this.rotationAutoUpdate&&(!1===this.useQuaternion?this.rotation.setEulerFromRotationMatrix(this.matrix,this.eulerOrder):this.quaternion.copy(this.matrix.decompose()[1]))};THREE.OrthographicCamera=function(a,b,c,d,e,f){THREE.Camera.call(this);this.left=a;this.right=b;this.top=c;this.bottom=d;this.near=void 0!==e?e:0.1;this.far=void 0!==f?f:2E3;this.updateProjectionMatrix()};THREE.OrthographicCamera.prototype=Object.create(THREE.Camera.prototype);THREE.OrthographicCamera.prototype.updateProjectionMatrix=function(){this.projectionMatrix.makeOrthographic(this.left,this.right,this.top,this.bottom,this.near,this.far)};THREE.PerspectiveCamera=function(a,b,c,d){THREE.Camera.call(this);this.fov=void 0!==a?a:50;this.aspect=void 0!==b?b:1;this.near=void 0!==c?c:0.1;this.far=void 0!==d?d:2E3;this.updateProjectionMatrix()};THREE.PerspectiveCamera.prototype=Object.create(THREE.Camera.prototype);THREE.PerspectiveCamera.prototype.setLens=function(a,b){void 0===b&&(b=24);this.fov=2*THREE.Math.radToDeg(Math.atan(b/(2*a)));this.updateProjectionMatrix()};
 THREE.PerspectiveCamera.prototype.setViewOffset=function(a,b,c,d,e,f){this.fullWidth=a;this.fullHeight=b;this.x=c;this.y=d;this.width=e;this.height=f;this.updateProjectionMatrix()};
-THREE.PerspectiveCamera.prototype.updateProjectionMatrix=function(){if(this.fullWidth){var a=this.fullWidth/this.fullHeight,b=Math.tan(THREE.Math.degToRad(0.5*this.fov))*this.near,c=-b,d=a*c,a=Math.abs(a*b-d),c=Math.abs(b-c);this.projectionMatrix.makeFrustum(d+this.x*a/this.fullWidth,d+(this.x+this.width)*a/this.fullWidth,b-(this.y+this.height)*c/this.fullHeight,b-this.y*c/this.fullHeight,this.near,this.far)}else this.projectionMatrix.makePerspective(this.fov,this.aspect,this.near,this.far)};THREE.Light=function(a){THREE.Object3D.call(this);this.color=new THREE.Color(a)};THREE.Light.prototype=Object.create(THREE.Object3D.prototype);THREE.AmbientLight=function(a){THREE.Light.call(this,a)};THREE.AmbientLight.prototype=Object.create(THREE.Light.prototype);THREE.AreaLight=function(a){THREE.Light.call(this,a);this.normal=new THREE.Vector3(0,-1,0);this.right=new THREE.Vector3(1,0,0);this.height=this.width=this.intensity=1};THREE.AreaLight.prototype=Object.create(THREE.Light.prototype);THREE.DirectionalLight=function(a,b){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.target=new THREE.Object3D;this.intensity=void 0!==b?b:1;this.onlyShadow=this.castShadow=!1;this.shadowCameraNear=50;this.shadowCameraFar=5E3;this.shadowCameraLeft=-500;this.shadowCameraTop=this.shadowCameraRight=500;this.shadowCameraBottom=-500;this.shadowCameraVisible=!1;this.shadowBias=0;this.shadowDarkness=0.5;this.shadowMapHeight=this.shadowMapWidth=512;this.shadowCascade=!1;this.shadowCascadeOffset=
+THREE.PerspectiveCamera.prototype.updateProjectionMatrix=function(){if(this.fullWidth){var a=this.fullWidth/this.fullHeight,b=Math.tan(THREE.Math.degToRad(0.5*this.fov))*this.near,c=-b,d=a*c,a=Math.abs(a*b-d),c=Math.abs(b-c);this.projectionMatrix.makeFrustum(d+this.x*a/this.fullWidth,d+(this.x+this.width)*a/this.fullWidth,b-(this.y+this.height)*c/this.fullHeight,b-this.y*c/this.fullHeight,this.near,this.far)}else this.projectionMatrix.makePerspective(this.fov,this.aspect,this.near,this.far)};THREE.Light=function(a){THREE.Object3D.call(this);this.color=new THREE.Color(a)};THREE.Light.prototype=Object.create(THREE.Object3D.prototype);THREE.AmbientLight=function(a){THREE.Light.call(this,a)};THREE.AmbientLight.prototype=Object.create(THREE.Light.prototype);THREE.AreaLight=function(a,b){THREE.Light.call(this,a);this.normal=new THREE.Vector3(0,-1,0);this.right=new THREE.Vector3(1,0,0);this.intensity=void 0!==b?b:1;this.height=this.width=1};THREE.AreaLight.prototype=Object.create(THREE.Light.prototype);THREE.DirectionalLight=function(a,b){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.target=new THREE.Object3D;this.intensity=void 0!==b?b:1;this.onlyShadow=this.castShadow=!1;this.shadowCameraNear=50;this.shadowCameraFar=5E3;this.shadowCameraLeft=-500;this.shadowCameraTop=this.shadowCameraRight=500;this.shadowCameraBottom=-500;this.shadowCameraVisible=!1;this.shadowBias=0;this.shadowDarkness=0.5;this.shadowMapHeight=this.shadowMapWidth=512;this.shadowCascade=!1;this.shadowCascadeOffset=
 new THREE.Vector3(0,0,-1E3);this.shadowCascadeCount=2;this.shadowCascadeBias=[0,0,0];this.shadowCascadeWidth=[512,512,512];this.shadowCascadeHeight=[512,512,512];this.shadowCascadeNearZ=[-1,0.99,0.998];this.shadowCascadeFarZ=[0.99,0.998,1];this.shadowCascadeArray=[];this.shadowMatrix=this.shadowCamera=this.shadowMapSize=this.shadowMap=null};THREE.DirectionalLight.prototype=Object.create(THREE.Light.prototype);THREE.HemisphereLight=function(a,b,c){THREE.Light.call(this,a);this.groundColor=new THREE.Color(b);this.position=new THREE.Vector3(0,100,0);this.intensity=void 0!==c?c:1};THREE.HemisphereLight.prototype=Object.create(THREE.Light.prototype);THREE.PointLight=function(a,b,c){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,0,0);this.intensity=void 0!==b?b:1;this.distance=void 0!==c?c:0};THREE.PointLight.prototype=Object.create(THREE.Light.prototype);THREE.SpotLight=function(a,b,c,d,e){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.target=new THREE.Object3D;this.intensity=void 0!==b?b:1;this.distance=void 0!==c?c:0;this.angle=void 0!==d?d:Math.PI/2;this.exponent=void 0!==e?e:10;this.onlyShadow=this.castShadow=!1;this.shadowCameraNear=50;this.shadowCameraFar=5E3;this.shadowCameraFov=50;this.shadowCameraVisible=!1;this.shadowBias=0;this.shadowDarkness=0.5;this.shadowMapHeight=this.shadowMapWidth=512;this.shadowMatrix=this.shadowCamera=
 this.shadowMapSize=this.shadowMap=null};THREE.SpotLight.prototype=Object.create(THREE.Light.prototype);THREE.Loader=function(a){this.statusDomElement=(this.showStatus=a)?THREE.Loader.prototype.addStatusElement():null;this.onLoadStart=function(){};this.onLoadProgress=function(){};this.onLoadComplete=function(){}};
 THREE.Loader.prototype={constructor:THREE.Loader,crossOrigin:"anonymous",addStatusElement:function(){var a=document.createElement("div");a.style.position="absolute";a.style.right="0px";a.style.top="0px";a.style.fontSize="0.8em";a.style.textAlign="left";a.style.background="rgba(0,0,0,0.25)";a.style.color="#fff";a.style.width="120px";a.style.padding="0.5em 0.5em 0.5em 0.5em";a.style.zIndex=1E3;a.innerHTML="Loading ...";return a},updateProgress:function(a){var b="Loaded ",b=a.total?b+((100*a.loaded/

examples/js/ShaderDeferred.js

@@ -916,15 +916,21 @@ THREE.ShaderDeferred = {
 				"float attenuation = calculateAttenuation( dist );",
 
 				"vec3 lightDir = normalize( nearestPointInside - vertexPositionVS.xyz );",
-				"vec3 color = vec3( 0.0 );",
+				"vec3 diffuse = vec3( 0.0 );",
 
 				"float NdotL = dot( lightNormalVS, -lightDir );",
 
 				"if ( NdotL != 0.0 && sideOfPlane( vertexPositionVS.xyz, lightPositionVS, lightNormalVS ) ) {",
 
-					"color.xyz = vec3( lightColor * attenuation * NdotL * 1.5 );",
+					"diffuse = vec3( lightColor * attenuation * NdotL * 1.5 );",
 
-					"gl_FragColor = vec4( color, 1.0 );",
+					//
+
+					"vec3 specular = vec3( 0.0 );",
+
+					"const float attenuation = 1.0;",
+
+					THREE.DeferredShaderChunk[ "combine" ],
 
 				"} else {",
 

examples/webgl_lights_deferred_arealights.html

@@ -182,7 +182,7 @@
 
 			function initLights() {
 
-				var areaLight1 = new THREE.AreaLight( 0xffffff );
+				var areaLight1 = new THREE.AreaLight( 0xffffff, 1 );
 				areaLight1.position.set( 0.0001, 10.0001, -19.5001 );
 				areaLight1.rotation.set( -0.74719, 0.0001, 0.0001 );
 				areaLight1.width = 10;
@@ -195,7 +195,7 @@
 
 				//
 
-				var areaLight2 = new THREE.AreaLight( 0x00ff00 );
+				var areaLight2 = new THREE.AreaLight( 0x33ff66, 1.5 );
 				areaLight2.position.set( -19.0001, 3.0001, 0.0001 );
 				areaLight2.rotation.set( -1.5707, 0.0001, 1.5707 );
 				areaLight2.width = 8;
@@ -208,7 +208,7 @@
 
 				//
 
-				var areaLight3 = new THREE.AreaLight( 0x0000ff );
+				var areaLight3 = new THREE.AreaLight( 0x3366ff, 1.5 );
 				areaLight3.position.set( 19.0001, 3.0001, 0.0001 );
 				areaLight3.rotation.set( 1.5707, 0.0001, -1.5707 );
 				areaLight3.width = 8;
@@ -228,7 +228,7 @@
 				var loader = new THREE.BinaryLoader();
 				loader.load( "obj/box/box.js", function( geometry, materials ) {
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( ) );
+					var object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: 0xffaa55 } ) );
 					object.position.x = 0;
 					object.position.y = 0;
 					object.scale.multiplyScalar( 2 );

src/lights/AreaLight.js

+/**
+ * @author MPanknin / http://www.redplant.de/
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+THREE.AreaLight = function ( hex, intensity ) {
+
+	THREE.Light.call( this, hex );
+
+	this.normal = new THREE.Vector3( 0, -1, 0 );
+	this.right = new THREE.Vector3( 1, 0, 0 );
+
+	this.intensity = ( intensity !== undefined ) ? intensity : 1;
+
+	this.width = 1.0;
+	this.height = 1.0;
+
+};
+
+THREE.AreaLight.prototype = Object.create( THREE.Light.prototype );
+