x_ite 4.0.5 → 4.7.5

package/src/x_ite/Components/Lighting/PointLight.js

@@ -48,7 +48,6 @@
 
 
 define ([
-	"jquery",
 	"x_ite/Fields",
 	"x_ite/Basic/X3DFieldDefinition",
 	"x_ite/Basic/FieldDefinitionArray",
@@ -56,31 +55,30 @@ define ([
 	"x_ite/Components/Grouping/X3DGroupingNode",
 	"x_ite/Bits/TraverseType",
 	"x_ite/Bits/X3DConstants",
-	"standard/Math/Geometry/Box3",
 	"standard/Math/Geometry/Camera",
 	"standard/Math/Geometry/ViewVolume",
 	"standard/Math/Numbers/Vector3",
 	"standard/Math/Numbers/Vector4",
 	"standard/Math/Numbers/Rotation4",
+	"standard/Math/Numbers/Matrix3",
 	"standard/Math/Numbers/Matrix4",
 	"standard/Math/Utility/MatrixStack",
 	"standard/Math/Algorithm",
 	"standard/Utility/ObjectCache",
 ],
-function ($,
-          Fields,
+function (Fields,
           X3DFieldDefinition,
           FieldDefinitionArray,
-          X3DLightNode, 
-          X3DGroupingNode, 
+          X3DLightNode,
+          X3DGroupingNode,
           TraverseType,
           X3DConstants,
-          Box3,
           Camera,
           ViewVolume,
           Vector3,
           Vector4,
           Rotation4,
+          Matrix3,
           Matrix4,
           MatrixStack,
           Algorithm,
@@ -88,45 +86,49 @@ function ($,
 {
 "use strict";
 
-	var biasMatrix = new Matrix4 (1.0 / 6.0, 0.0,  0.0, 0.0,
-	                              0.0,  0.25, 0.0, 0.0,
-	                              0.0,  0.0,  0.5, 0.0,
-	                              1.0 / 6.0, 0.25, 0.5, 1.0);
-
-	// Negated directions
-	var directions = [
-		new Vector3 ( 1,  0,  0), // left
-		new Vector3 (-1,  0,  0), // right
-		new Vector3 ( 0,  0,  1), // back
-		new Vector3 ( 0,  0, -1), // front
-		new Vector3 ( 0,  1,  0), // bottom
-		new Vector3 ( 0, -1,  0), // top
+	// Shadow map layout
+	// Compact layout:
+	//
+	// xzXZ		Char: Axis
+	// yyYY		Case: Sign
+
+	var orientationMatrices = [
+		new Matrix4 () .setRotation (new Rotation4 (new Vector3 ( 1,  0,  0), Vector3 .zAxis)), // left
+		new Matrix4 () .setRotation (new Rotation4 (new Vector3 (-1,  0,  0), Vector3 .zAxis)), // right
+		new Matrix4 () .setRotation (new Rotation4 (new Vector3 ( 0,  0, -1), Vector3 .zAxis)), // front
+		new Matrix4 () .setRotation (new Rotation4 (new Vector3 ( 0,  0,  1), Vector3 .zAxis)), // back
+		new Matrix4 () .setRotation (new Rotation4 (new Vector3 ( 0,  1,  0), Vector3 .zAxis)), // bottom
+		new Matrix4 () .setRotation (new Rotation4 (new Vector3 ( 0, -1,  0), Vector3 .zAxis)), // top
+	];
+
+	var viewports = [
+		new Vector4 (0,    0.5, 0.25, 0.5), // left
+		new Vector4 (0.5,  0.5, 0.25, 0.5), // right
+		new Vector4 (0.75, 0.5, 0.25, 0.5), // front
+		new Vector4 (0.25, 0.5, 0.25, 0.5), // back
+		new Vector4 (0.0,  0,   0.5,  0.5), // bottom
+		new Vector4 (0.5,  0,   0.5,  0.5), // top
 	];
 
 	var PointLights = ObjectCache (PointLightContainer);
-	
+
 	function PointLightContainer ()
 	{
-		var
-			nearValue        = 0.125,
-			farValue         = 1000,
-			projectionMatrix = Camera .perspective (Algorithm .radians (120), nearValue, farValue, 1, 1, new Matrix4 ());
-
-		this .location             = new Vector3 (0, 0, 0);
-		this .direction            = new Vector3 (0, 0, 0);
-		this .shadowBuffer         = null;
-		this .viewVolume           = new ViewVolume ();
-		this .viewport             = new Vector4 (0, 0, 0, 0);
-		this .projectionMatrix     = projectionMatrix;
-		this .modelViewMatrix      = new MatrixStack (Matrix4);
-		this .transformationMatrix = new Matrix4 ();
-		this .invLightSpaceMatrix  = new Matrix4 ();
-		this .shadowMatrix         = new Matrix4 ();
-		this .shadowMatrixArray    = new Float32Array (16);
-		this .invGroupMatrix       = new Matrix4 ();
-		this .rotation             = new Rotation4 ();
-		this .rotationMatrix       = new Matrix4 ();
-		this .textureUnit          = 0;
+		this .location                      = new Vector3 (0, 0, 0);
+		this .matrixArray                   = new Float32Array (9);
+		this .shadowBuffer                  = null;
+		this .viewVolume                    = new ViewVolume ();
+		this .viewport                      = new Vector4 (0, 0, 0, 0);
+		this .projectionMatrix              = new Matrix4 ();
+		this .modelViewMatrix               = new MatrixStack (Matrix4);
+		this .modelMatrix                   = new Matrix4 ();
+		this .invLightSpaceMatrix           = new Matrix4 ();
+		this .invLightSpaceProjectionMatrix = new Matrix4 ();
+		this .shadowMatrix                  = new Matrix4 ();
+		this .shadowMatrixArray             = new Float32Array (16);
+		this .rotation                      = new Rotation4 ();
+		this .rotationMatrix                = new Matrix4 ();
+		this .textureUnit                   = 0;
 	}
 
 	PointLightContainer .prototype =
@@ -146,6 +148,15 @@ function ($,
 			this .lightNode = lightNode;
 			this .groupNode = groupNode;
 
+			try
+			{
+				this .matrixArray .set (modelViewMatrix .submatrix .inverse ());
+			}
+			catch (error)
+			{
+				this .matrixArray .set (Matrix3 .Identity);
+			}
+
 			this .modelViewMatrix .pushMatrix (modelViewMatrix);
 
 			// Get shadow buffer from browser.
@@ -161,7 +172,12 @@ function ($,
 						this .textureUnit = browser .getCombinedTextureUnits () .pop ();
 
 						gl .activeTexture (gl .TEXTURE0 + this .textureUnit);
-						gl .bindTexture (gl .TEXTURE_2D, this .shadowBuffer .getDepthTexture ());
+
+						if (gl .getVersion () >= 2 || browser .getExtension ("WEBGL_depth_texture"))
+							gl .bindTexture (gl .TEXTURE_2D, this .shadowBuffer .getDepthTexture ());
+						else
+							gl .bindTexture (gl .TEXTURE_2D, this .shadowBuffer .getColorTexture ());
+
 						gl .activeTexture (gl .TEXTURE0);
 					}
 					else
@@ -183,51 +199,43 @@ function ($,
 					return;
 
 				var
-					lightNode            = this .lightNode,
-					cameraSpaceMatrix    = renderObject .getCameraSpaceMatrix () .get (),
-					transformationMatrix = this .transformationMatrix .assign (this .modelViewMatrix .get ()) .multRight (cameraSpaceMatrix),
-					invLightSpaceMatrix  = this .invLightSpaceMatrix  .assign (lightNode .getGlobal () ? transformationMatrix : Matrix4 .Identity);
+					lightNode           = this .lightNode,
+					cameraSpaceMatrix   = renderObject .getCameraSpaceMatrix () .get (),
+					modelMatrix         = this .modelMatrix .assign (this .modelViewMatrix .get ()) .multRight (cameraSpaceMatrix),
+					invLightSpaceMatrix = this .invLightSpaceMatrix .assign (lightNode .getGlobal () ? modelMatrix : Matrix4 .Identity);
 
 				invLightSpaceMatrix .translate (lightNode .getLocation ());
 				invLightSpaceMatrix .inverse ();
 
-				var
-					shadowMapSize1_2 = lightNode .getShadowMapSize () / 2,
-					shadowMapSize1_3 = lightNode .getShadowMapSize () / 3,
-					projectionMatrix = this .projectionMatrix,
-					invGroupMatrix   = this .invGroupMatrix .assign (this .groupNode .getMatrix ()) .inverse ();
+				var shadowMapSize  = lightNode .getShadowMapSize ();
 
 				this .shadowBuffer .bind ();
-				renderObject .getProjectionMatrix () .pushMatrix (this .projectionMatrix);
 
-				for (var y = 0; y < 2; ++ y)
+				for (var i = 0; i < 6; ++ i)
 				{
-					for (var x = 0; x < 3; ++ x)
-					{
-						var
-							rotation = this .rotation .setFromToVec (this .direction .assign (directions [y * 3 + x]), Vector3 .zAxis), // inversed rotation
-							viewport = this .viewport .set (x * shadowMapSize1_3, y * shadowMapSize1_2, shadowMapSize1_3, shadowMapSize1_2);
-		
-						renderObject .getViewVolumes () .push (this .viewVolume .set (projectionMatrix, viewport, viewport));
-
-						renderObject .getModelViewMatrix  () .pushMatrix (this .rotationMatrix .setRotation (rotation));
-						renderObject .getModelViewMatrix  () .multLeft (invLightSpaceMatrix);
-						renderObject .getModelViewMatrix  () .multLeft (invGroupMatrix);
-		
-						renderObject .render (TraverseType .DEPTH, this .groupNode);
-		
-						renderObject .getModelViewMatrix  () .pop ();
-						renderObject .getViewVolumes () .pop ();
-
-						//console .log (y * 3 + x, this .rotationMatrix .multRight (this .projectionMatrix) .multRight (biasMatrix) .toString ());
-					}
+					var
+						v                = viewports [i],
+						viewport         = this .viewport .set (v [0] * shadowMapSize, v [1] * shadowMapSize, v [2] * shadowMapSize, v [3] * shadowMapSize),
+						projectionMatrix = Camera .perspective2 (Algorithm .radians (90), 0.125, 10000, viewport [2], viewport [3], this .projectionMatrix); // Use higher far value for better precision.
+
+					renderObject .getViewVolumes      () .push (this .viewVolume .set (projectionMatrix, viewport, viewport));
+					renderObject .getProjectionMatrix () .pushMatrix (this .projectionMatrix);
+					renderObject .getModelViewMatrix  () .pushMatrix (orientationMatrices [i]);
+					renderObject .getModelViewMatrix  () .multLeft (invLightSpaceMatrix);
+
+					renderObject .render (TraverseType .SHADOW, X3DGroupingNode .prototype .traverse, this .groupNode);
+
+					renderObject .getModelViewMatrix  () .pop ();
+					renderObject .getProjectionMatrix () .pop ();
+					renderObject .getViewVolumes () .pop ();
 				}
 
-				renderObject .getProjectionMatrix () .pop ();
 				this .shadowBuffer .unbind ();
-	
+
 				if (! lightNode .getGlobal ())
-					invLightSpaceMatrix .multLeft (transformationMatrix .inverse ());
+					invLightSpaceMatrix .multLeft (modelMatrix .inverse ());
+
+				this .invLightSpaceProjectionMatrix .assign (invLightSpaceMatrix);
 			}
 			catch (error)
 			{
@@ -239,40 +247,47 @@ function ($,
 		{
 			this .modelViewMatrix .get () .multVecMatrix (this .location .assign (this .lightNode .location_ .getValue ()));
 
-			this .shadowMatrix .assign (renderObject .getCameraSpaceMatrix () .get ()) .multRight (this .invLightSpaceMatrix);
+			this .shadowMatrix .assign (renderObject .getCameraSpaceMatrix () .get ()) .multRight (this .invLightSpaceProjectionMatrix);
 			this .shadowMatrixArray .set (this .shadowMatrix);
 		},
-		setShaderUniforms: function (gl, shaderObject, i)
+		setShaderUniforms: function (gl, shaderObject)
 		{
-			// For correct results the radius must be transform by the modelViewMatrix. This can only be done in the shader.
-			// distanceOfLightToFragmentInLightSpace = |(FragmentPosition - LightPosition) * inverseModelViewMatrixOfLight|
-			// distanceOfLightToFragmentInLightSpace can then be compared with radius.
+			var i = shaderObject .numLights ++;
+
+			if (shaderObject .hasLight (i, this))
+				return;
 
-			var 
+			var
 				lightNode   = this .lightNode,
 				color       = lightNode .getColor (),
 				attenuation = lightNode .getAttenuation (),
-				location    = this .location,
-				shadowColor = lightNode .getShadowColor ();
+				location    = this .location;
 
-			gl .uniform1i (shaderObject .x3d_LightType [i],             2);
-			gl .uniform3f (shaderObject .x3d_LightColor [i],            color .r, color .g, color .b);
-			gl .uniform1f (shaderObject .x3d_LightIntensity [i],        lightNode .getIntensity ());
-			gl .uniform1f (shaderObject .x3d_LightAmbientIntensity [i], lightNode .getAmbientIntensity ());
-			gl .uniform3f (shaderObject .x3d_LightAttenuation [i],      Math .max (0, attenuation .x), Math .max (0, attenuation .y), Math .max (0, attenuation .z));
-			gl .uniform3f (shaderObject .x3d_LightLocation [i],         location .x, location .y, location .z);
-			gl .uniform1f (shaderObject .x3d_LightRadius [i],           lightNode .getRadius ());
+			gl .uniform1i        (shaderObject .x3d_LightType [i],             2);
+			gl .uniform3f        (shaderObject .x3d_LightColor [i],            color .r, color .g, color .b);
+			gl .uniform1f        (shaderObject .x3d_LightIntensity [i],        lightNode .getIntensity ());
+			gl .uniform1f        (shaderObject .x3d_LightAmbientIntensity [i], lightNode .getAmbientIntensity ());
+			gl .uniform3f        (shaderObject .x3d_LightAttenuation [i],      Math .max (0, attenuation .x), Math .max (0, attenuation .y), Math .max (0, attenuation .z));
+			gl .uniform3f        (shaderObject .x3d_LightLocation [i],         location .x, location .y, location .z);
+			gl .uniform1f        (shaderObject .x3d_LightRadius [i],           lightNode .getRadius ());
+			gl .uniformMatrix3fv (shaderObject .x3d_LightMatrix [i], false,    this .matrixArray);
 
 			if (this .textureUnit)
 			{
-				gl .uniform1f        (shaderObject .x3d_ShadowIntensity [i],     lightNode .getShadowIntensity ());
-				gl .uniform1f        (shaderObject .x3d_ShadowDiffusion [i],     lightNode .getShadowDiffusion ());
+				var shadowColor = lightNode .getShadowColor ();
+
 				gl .uniform3f        (shaderObject .x3d_ShadowColor [i],         shadowColor .r, shadowColor .g, shadowColor .b);
+				gl .uniform1f        (shaderObject .x3d_ShadowIntensity [i],     lightNode .getShadowIntensity ());
+				gl .uniform1f        (shaderObject .x3d_ShadowBias [i],          lightNode .getShadowBias ());
 				gl .uniformMatrix4fv (shaderObject .x3d_ShadowMatrix [i], false, this .shadowMatrixArray);
+				gl .uniform1i        (shaderObject .x3d_ShadowMapSize [i],       lightNode .getShadowMapSize ());
 				gl .uniform1i        (shaderObject .x3d_ShadowMap [i],           this .textureUnit);
 			}
 			else
+			{
+				// Must be set to zero in case of multiple lights.
 				gl .uniform1f (shaderObject .x3d_ShadowIntensity [i], 0);
+			}
 		},
 		dispose: function ()
 		{
@@ -301,9 +316,12 @@ function ($,
 		X3DLightNode .call (this, executionContext);
 
 		this .addType (X3DConstants .PointLight);
+
+		this .location_ .setUnit ("length");
+		this .radius_   .setUnit ("length");
 	}
 
-	PointLight .prototype = $.extend (Object .create (X3DLightNode .prototype),
+	PointLight .prototype = Object .assign (Object .create (X3DLightNode .prototype),
 	{
 		constructor: PointLight,
 		fieldDefinitions: new FieldDefinitionArray ([
@@ -316,11 +334,12 @@ function ($,
 			new X3DFieldDefinition (X3DConstants .inputOutput,    "attenuation",      new Fields .SFVec3f (1, 0, 0)),
 			new X3DFieldDefinition (X3DConstants .inputOutput,    "location",         new Fields .SFVec3f ()),
 			new X3DFieldDefinition (X3DConstants .inputOutput,    "radius",           new Fields .SFFloat (100)),
-																				   
-			new X3DFieldDefinition (X3DConstants .inputOutput,    "shadowColor",      new  Fields .SFColor ()),        // Color of shadow.
-			new X3DFieldDefinition (X3DConstants .inputOutput,    "shadowIntensity",  new  Fields .SFFloat ()),        // Intensity of shadow color in the range (0, 1).
-			new X3DFieldDefinition (X3DConstants .inputOutput,    "shadowDiffusion",  new  Fields .SFFloat ()),        // Diffusion of the shadow in length units in the range (0, inf).
-			new X3DFieldDefinition (X3DConstants .initializeOnly, "shadowMapSize",    new  Fields .SFInt32 (1024)),    // Size of the shadow map in pixels in the range (0, inf).
+
+			new X3DFieldDefinition (X3DConstants .inputOutput,    "shadows",         new  Fields .SFBool ()),
+			new X3DFieldDefinition (X3DConstants .inputOutput,    "shadowColor",     new  Fields .SFColor ()),        // Color of shadow.
+			new X3DFieldDefinition (X3DConstants .inputOutput,    "shadowIntensity", new  Fields .SFFloat (1)),        // Intensity of shadow color in the range (0, 1).
+			new X3DFieldDefinition (X3DConstants .inputOutput,    "shadowBias",      new  Fields .SFFloat (0.005)),   // Bias of the shadow.
+			new X3DFieldDefinition (X3DConstants .initializeOnly, "shadowMapSize",   new  Fields .SFInt32 (1024)),    // Size of the shadow map in pixels in the range (0, inf).
 		]),
 		getTypeName: function ()
 		{
@@ -346,10 +365,6 @@ function ($,
 		{
 			return Math .max (0, this .radius_ .getValue ());
 		},
-		getBiasMatrix: function ()
-		{
-			return biasMatrix;
-		},
 		getLights: function ()
 		{
 			return PointLights;
@@ -358,5 +373,3 @@ function ($,
 
 	return PointLight;
 });
-
-

package/src/x_ite/Components/Lighting/SpotLight.js

@@ -48,7 +48,6 @@
 
 
 define ([
-	"jquery",
 	"x_ite/Fields",
 	"x_ite/Basic/X3DFieldDefinition",
 	"x_ite/Basic/FieldDefinitionArray",
@@ -62,17 +61,17 @@ define ([
 	"standard/Math/Numbers/Vector3",
 	"standard/Math/Numbers/Vector4",
 	"standard/Math/Numbers/Rotation4",
+	"standard/Math/Numbers/Matrix3",
 	"standard/Math/Numbers/Matrix4",
 	"standard/Math/Utility/MatrixStack",
 	"standard/Math/Algorithm",
 	"standard/Utility/ObjectCache",
 ],
-function ($,
-          Fields,
+function (Fields,
           X3DFieldDefinition,
           FieldDefinitionArray,
-          X3DLightNode, 
-          X3DGroupingNode, 
+          X3DLightNode,
+          X3DGroupingNode,
           TraverseType,
           X3DConstants,
           Box3,
@@ -81,6 +80,7 @@ function ($,
           Vector3,
           Vector4,
           Rotation4,
+          Matrix3,
           Matrix4,
           MatrixStack,
           Algorithm,
@@ -89,24 +89,24 @@ function ($,
 "use strict";
 
 	var SpotLights = ObjectCache (SpotLightContainer);
-	
+
 	function SpotLightContainer ()
 	{
 		this .location                      = new Vector3 (0, 0, 0);
 		this .direction                     = new Vector3 (0, 0, 0);
-		this .renderShadow                  = true; 
+		this .matrixArray                   = new Float32Array (9);
+		this .renderShadow                  = true;
 		this .shadowBuffer                  = null;
 		this .bbox                          = new Box3 ();
 		this .viewVolume                    = new ViewVolume ();
 		this .viewport                      = new Vector4 (0, 0, 0, 0);
 		this .projectionMatrix              = new Matrix4 ();
 		this .modelViewMatrix               = new MatrixStack (Matrix4);
-		this .transformationMatrix          = new Matrix4 ();
+		this .modelMatrix                   = new Matrix4 ();
 		this .invLightSpaceMatrix           = new Matrix4 ();
 		this .invLightSpaceProjectionMatrix = new Matrix4 ();
 		this .shadowMatrix                  = new Matrix4 ();
 		this .shadowMatrixArray             = new Float32Array (16);
-		this .invGroupMatrix                = new Matrix4 ();
 		this .rotation                      = new Rotation4 ();
 		this .lightBBoxMin                  = new Vector3 (0, 0, 0);
 		this .lightBBoxMax                  = new Vector3 (0, 0, 0);
@@ -130,6 +130,15 @@ function ($,
 			this .lightNode = lightNode;
 			this .groupNode = groupNode;
 
+			try
+			{
+				this .matrixArray .set (modelViewMatrix .submatrix .inverse ());
+			}
+			catch (error)
+			{
+				this .matrixArray .set (Matrix3 .Identity);
+			}
+
 			this .modelViewMatrix .pushMatrix (modelViewMatrix);
 
 			// Get shadow buffer from browser.
@@ -145,7 +154,12 @@ function ($,
 						this .textureUnit = browser .getCombinedTextureUnits () .pop ();
 
 						gl .activeTexture (gl .TEXTURE0 + this .textureUnit);
-						gl .bindTexture (gl .TEXTURE_2D, this .shadowBuffer .getDepthTexture ());
+
+						if (gl .getVersion () >= 2 || browser .getExtension ("WEBGL_depth_texture"))
+							gl .bindTexture (gl .TEXTURE_2D, this .shadowBuffer .getDepthTexture ());
+						else
+							gl .bindTexture (gl .TEXTURE_2D, this .shadowBuffer .getColorTexture ());
+
 						gl .activeTexture (gl .TEXTURE0);
 					}
 					else
@@ -169,22 +183,21 @@ function ($,
 				var
 					lightNode            = this .lightNode,
 					cameraSpaceMatrix    = renderObject .getCameraSpaceMatrix () .get (),
-					transformationMatrix = this .transformationMatrix .assign (this .modelViewMatrix .get ()) .multRight (cameraSpaceMatrix),
-					invLightSpaceMatrix  = this .invLightSpaceMatrix  .assign (lightNode .getGlobal () ? transformationMatrix : Matrix4 .Identity);
+					modelMatrix          = this .modelMatrix .assign (this .modelViewMatrix .get ()) .multRight (cameraSpaceMatrix),
+					invLightSpaceMatrix  = this .invLightSpaceMatrix .assign (lightNode .getGlobal () ? modelMatrix : Matrix4 .Identity);
 
 				invLightSpaceMatrix .translate (lightNode .getLocation ());
 				invLightSpaceMatrix .rotate (this .rotation .setFromToVec (Vector3 .zAxis, this .direction .assign (lightNode .getDirection ()) .negate ()));
 				invLightSpaceMatrix .inverse ();
 
 				var
-					groupBBox        = X3DGroupingNode .prototype .getBBox .call (this .groupNode, this .bbox), // Group bbox.
-					lightBBox        = groupBBox .multRight (invLightSpaceMatrix),                              // Group bbox from the perspective of the light.
+					groupBBox        = this .groupNode .getSubBBox (this .bbox, true),                 // Group bbox.
+					lightBBox        = groupBBox .multRight (invLightSpaceMatrix),                     // Group bbox from the perspective of the light.
+					lightBBoxExtents = lightBBox .getExtents (this .lightBBoxMin, this .lightBBoxMax), // Result not used, but arguments.
 					shadowMapSize    = lightNode .getShadowMapSize (),
-					lightBBoxExtents = lightBBox .getExtents (this .lightBBoxMin, this .lightBBoxMax),
 					farValue         = Math .min (lightNode .getRadius (), -this .lightBBoxMin .z),
 					viewport         = this .viewport .set (0, 0, shadowMapSize, shadowMapSize),
-					projectionMatrix = Camera .perspective (lightNode .getCutOffAngle () * 2, 0.125, farValue, shadowMapSize, shadowMapSize, this .projectionMatrix),
-					invGroupMatrix   = this .invGroupMatrix .assign (this .groupNode .getMatrix ()) .inverse ();
+					projectionMatrix = Camera .perspective (lightNode .getCutOffAngle () * 2, 0.125, Math .max (10000, farValue), shadowMapSize, shadowMapSize, this .projectionMatrix); // Use higher far value for better precision.
 
 				this .renderShadow = farValue > 0;
 
@@ -193,18 +206,17 @@ function ($,
 				renderObject .getViewVolumes      () .push (this .viewVolume .set (projectionMatrix, viewport, viewport));
 				renderObject .getProjectionMatrix () .pushMatrix (projectionMatrix);
 				renderObject .getModelViewMatrix  () .pushMatrix (invLightSpaceMatrix);
-				renderObject .getModelViewMatrix  () .multLeft (invGroupMatrix);
 
-				renderObject .render (TraverseType .DEPTH, this .groupNode);
+				renderObject .render (TraverseType .SHADOW, X3DGroupingNode .prototype .traverse, this .groupNode);
 
 				renderObject .getModelViewMatrix  () .pop ();
 				renderObject .getProjectionMatrix () .pop ();
 				renderObject .getViewVolumes      () .pop ();
 
 				this .shadowBuffer .unbind ();
-	
+
 				if (! lightNode .getGlobal ())
-					invLightSpaceMatrix .multLeft (transformationMatrix .inverse ());
+					invLightSpaceMatrix .multLeft (modelMatrix .inverse ());
 
 				this .invLightSpaceProjectionMatrix .assign (invLightSpaceMatrix) .multRight (projectionMatrix) .multRight (lightNode .getBiasMatrix ());
 			}
@@ -216,7 +228,7 @@ function ($,
 		},
 		setGlobalVariables: function (renderObject)
 		{
-			var 
+			var
 				lightNode       = this .lightNode,
 				modelViewMatrix = this .modelViewMatrix .get ();
 
@@ -226,40 +238,48 @@ function ($,
 			this .shadowMatrix .assign (renderObject .getCameraSpaceMatrix () .get ()) .multRight (this .invLightSpaceProjectionMatrix);
 			this .shadowMatrixArray .set (this .shadowMatrix);
 		},
-		setShaderUniforms: function (gl, shaderObject, i)
+		setShaderUniforms: function (gl, shaderObject)
 		{
-			var 
-				lightNode       = this .lightNode,
-				color           = lightNode .getColor (),
-				attenuation     = lightNode .getAttenuation (),
-				modelViewMatrix = this .modelViewMatrix .get (),
-				location        = this .location,
-				direction       = this .direction,
-				shadowColor     = lightNode .getShadowColor ();
-
-			gl .uniform1i (shaderObject .x3d_LightType [i],             3);
-			gl .uniform3f (shaderObject .x3d_LightColor [i],            color .r, color .g, color .b);
-			gl .uniform1f (shaderObject .x3d_LightIntensity [i],        lightNode .getIntensity ());
-			gl .uniform1f (shaderObject .x3d_LightAmbientIntensity [i], lightNode .getAmbientIntensity ());
-			gl .uniform3f (shaderObject .x3d_LightAttenuation [i],      Math .max (0, attenuation .x), Math .max (0, attenuation .y), Math .max (0, attenuation .z));
-			gl .uniform3f (shaderObject .x3d_LightLocation [i],         location .x, location .y, location .z);
-			gl .uniform3f (shaderObject .x3d_LightDirection [i],        direction .x, direction .y, direction .z);
-			gl .uniform1f (shaderObject .x3d_LightRadius [i],           lightNode .getRadius ());
-			gl .uniform1f (shaderObject .x3d_LightBeamWidth [i],        lightNode .getBeamWidth ());
-			gl .uniform1f (shaderObject .x3d_LightCutOffAngle [i],      lightNode .getCutOffAngle ());
+			var i = shaderObject .numLights ++;
+
+			if (shaderObject .hasLight (i, this))
+				return;
+
+			var
+				lightNode   = this .lightNode,
+				color       = lightNode .getColor (),
+				attenuation = lightNode .getAttenuation (),
+				location    = this .location,
+				direction   = this .direction;
+
+			gl .uniform1i        (shaderObject .x3d_LightType [i],             3);
+			gl .uniform3f        (shaderObject .x3d_LightColor [i],            color .r, color .g, color .b);
+			gl .uniform1f        (shaderObject .x3d_LightIntensity [i],        lightNode .getIntensity ());
+			gl .uniform1f        (shaderObject .x3d_LightAmbientIntensity [i], lightNode .getAmbientIntensity ());
+			gl .uniform3f        (shaderObject .x3d_LightAttenuation [i],      Math .max (0, attenuation .x), Math .max (0, attenuation .y), Math .max (0, attenuation .z));
+			gl .uniform3f        (shaderObject .x3d_LightLocation [i],         location .x, location .y, location .z);
+			gl .uniform3f        (shaderObject .x3d_LightDirection [i],        direction .x, direction .y, direction .z);
+			gl .uniform1f        (shaderObject .x3d_LightRadius [i],           lightNode .getRadius ());
+			gl .uniform1f        (shaderObject .x3d_LightBeamWidth [i],        lightNode .getBeamWidth ());
+			gl .uniform1f        (shaderObject .x3d_LightCutOffAngle [i],      lightNode .getCutOffAngle ());
+			gl .uniformMatrix3fv (shaderObject .x3d_LightMatrix [i], false,    this .matrixArray);
 
 			if (this .renderShadow && this .textureUnit)
 			{
-				this .shadowMatrixArray .set (this .shadowMatrix);
+				var shadowColor = lightNode .getShadowColor ();
 
-				gl .uniform1f        (shaderObject .x3d_ShadowIntensity [i],     lightNode .getShadowIntensity ());
-				gl .uniform1f        (shaderObject .x3d_ShadowDiffusion [i],     lightNode .getShadowDiffusion ());
 				gl .uniform3f        (shaderObject .x3d_ShadowColor [i],         shadowColor .r, shadowColor .g, shadowColor .b);
+				gl .uniform1f        (shaderObject .x3d_ShadowIntensity [i],     lightNode .getShadowIntensity ());
+				gl .uniform1f        (shaderObject .x3d_ShadowBias [i],          lightNode .getShadowBias ());
 				gl .uniformMatrix4fv (shaderObject .x3d_ShadowMatrix [i], false, this .shadowMatrixArray);
+				gl .uniform1i        (shaderObject .x3d_ShadowMapSize [i],       lightNode .getShadowMapSize ());
 				gl .uniform1i        (shaderObject .x3d_ShadowMap [i],           this .textureUnit);
 			}
 			else
+			{
+				// Must be set to zero in case of multiple lights.
 				gl .uniform1f (shaderObject .x3d_ShadowIntensity [i], 0);
+			}
 		},
 		dispose: function ()
 		{
@@ -288,9 +308,14 @@ function ($,
 		X3DLightNode .call (this, executionContext);
 
 		this .addType (X3DConstants .SpotLight);
+
+		this .location_    .setUnit ("length");
+		this .radius_      .setUnit ("length");
+		this .beamWidth_   .setUnit ("angle");
+		this .cutOffAngle_ .setUnit ("angle");
 	}
 
-	SpotLight .prototype = $.extend (Object .create (X3DLightNode .prototype),
+	SpotLight .prototype = Object .assign (Object .create (X3DLightNode .prototype),
 	{
 		constructor: SpotLight,
 		fieldDefinitions: new FieldDefinitionArray ([
@@ -306,11 +331,12 @@ function ($,
 			new X3DFieldDefinition (X3DConstants .inputOutput,    "radius",           new Fields .SFFloat (100)),
 			new X3DFieldDefinition (X3DConstants .inputOutput,    "beamWidth",        new Fields .SFFloat (0.785398)),
 			new X3DFieldDefinition (X3DConstants .inputOutput,    "cutOffAngle",      new Fields .SFFloat (1.5708)),
-																				   
-			new X3DFieldDefinition (X3DConstants .inputOutput,    "shadowColor",      new  Fields .SFColor ()),        // Color of shadow.
-			new X3DFieldDefinition (X3DConstants .inputOutput,    "shadowIntensity",  new  Fields .SFFloat ()),        // Intensity of shadow color in the range (0, 1).
-			new X3DFieldDefinition (X3DConstants .inputOutput,    "shadowDiffusion",  new  Fields .SFFloat ()),        // Diffusion of the shadow in length units in the range (0, inf).
-			new X3DFieldDefinition (X3DConstants .initializeOnly, "shadowMapSize",    new  Fields .SFInt32 (1024)),    // Size of the shadow map in pixels in the range (0, inf).
+
+			new X3DFieldDefinition (X3DConstants .inputOutput,    "shadows",         new  Fields .SFBool ()),
+			new X3DFieldDefinition (X3DConstants .inputOutput,    "shadowColor",     new  Fields .SFColor ()),        // Color of shadow.
+			new X3DFieldDefinition (X3DConstants .inputOutput,    "shadowIntensity", new  Fields .SFFloat (1)),       // Intensity of shadow color in the range (0, 1).
+			new X3DFieldDefinition (X3DConstants .inputOutput,    "shadowBias",      new  Fields .SFFloat (0.005)),   // Bias of the shadow.
+			new X3DFieldDefinition (X3DConstants .initializeOnly, "shadowMapSize",   new  Fields .SFInt32 (1024)),    // Size of the shadow map in pixels in the range (0, inf).
 		]),
 		getTypeName: function ()
 		{
@@ -361,5 +387,3 @@ function ($,
 
 	return SpotLight;
 });
-
-