x_ite 4.2.17 → 4.7.7

package/src/x_ite/Rendering/X3DRenderObject.js

@@ -78,7 +78,7 @@ function ($,
 {
 "use strict";
 
-	var
+	const
 		DEPTH_BUFFER_WIDTH  = 16,
 		DEPTH_BUFFER_HEIGHT = DEPTH_BUFFER_WIDTH;
 
@@ -87,18 +87,19 @@ function ($,
 	function X3DRenderObject (executionContext)
 	{
 		this .cameraSpaceMatrix        = new MatrixStack (Matrix4);
-		this .inverseCameraSpaceMatrix = new MatrixStack (Matrix4);
+		this .viewMatrix               = new MatrixStack (Matrix4);
 		this .projectionMatrix         = new MatrixStack (Matrix4);
 		this .modelViewMatrix          = new MatrixStack (Matrix4);
 		this .viewVolumes              = [ ];
-		this .shaderObjects            = [ ];
-		this .globalLights             = [ ];
+		this .globalObjects            = [ ];
+		this .localObjects             = [ ];
 		this .lights                   = [ ];
 		this .shadow                   = [ false ];
 		this .localFogs                = [ ];
 		this .layouts                  = [ ];
+		this .textureProjectors        = [ ];
 		this .generatedCubeMapTextures = [ ];
-		this .shaders                  = new Map ();
+		this .shaders                  = new Set ();
 		this .collisions               = [ ];
 		this .numOpaqueShapes          = 0;
 		this .numTransparentShapes     = 0;
@@ -127,9 +128,6 @@ function ($,
 	X3DRenderObject .prototype =
 	{
 		constructor: X3DRenderObject,
-		bboxSize: new Vector3 (0, 0, 0),
-		bboxCenter: new Vector3 (0, 0, 0),
-		translation: new Vector3 (0, 0, 0),
 		initialize: function ()
 		{ },
 		isIndependent: function ()
@@ -140,9 +138,9 @@ function ($,
 		{
 			return this .cameraSpaceMatrix;
 		},
-		getInverseCameraSpaceMatrix: function ()
+		getViewMatrix: function ()
 		{
-			return this .inverseCameraSpaceMatrix;
+			return this .viewMatrix;
 		},
 		getProjectionMatrix: function ()
 		{
@@ -158,15 +156,15 @@ function ($,
 		},
 		getViewVolume: function ()
 		{
-			return this .viewVolumes [this .viewVolumes .length - 1];
+			return this .viewVolumes .at (-1);
 		},
-		getShaderObjects: function ()
+		getGlobalObjects: function ()
 		{
-			return this .shaderObjects;
+			return this .globalObjects;
 		},
-		getGlobalLights: function ()
+		getLocalObjects: function ()
 		{
-			return this .globalLights;
+			return this .localObjects;
 		},
 		getLights: function ()
 		{
@@ -174,21 +172,21 @@ function ($,
 		},
 		pushShadow: function (value)
 		{
-			this .shadow .unshift (value || this .shadow [0]);
+			this .shadow .push (value || this .shadow .at (-1));
 		},
-		popShadow: function (value)
+		popShadow: function ()
 		{
 			this .shadow .pop ();
 		},
 		setGlobalFog: (function ()
 		{
-			var modelViewMatrix = new Matrix4 ();
+			const modelViewMatrix = new Matrix4 ();
 
 			return function (fog)
 			{
-				var fogContainer = this .localFogs [0] || fog .getFogs () .pop ();
+				const fogContainer = this .localFogs [0] || fog .getFogs () .pop ();
 
-				modelViewMatrix .assign (fog .getModelMatrix ()) .multRight (this .getInverseCameraSpaceMatrix () .get ());
+				modelViewMatrix .assign (fog .getModelMatrix ()) .multRight (this .getViewMatrix () .get ());
 				fogContainer .set (fog, modelViewMatrix);
 
 				this .localFog = this .localFogs [0] = fogContainer;
@@ -202,9 +200,9 @@ function ($,
 		},
 		popLocalFog: function ()
 		{
-			var localFog = this .localFogs .pop ();
+			const localFog = this .localFogs .pop ();
 
-			this .localFog = this .localFogs [this .localFogs .length - 1];
+			this .localFog = this .localFogs .at (-1);
 
 			return localFog;
 		},
@@ -214,7 +212,11 @@ function ($,
 		},
 		getParentLayout: function ()
 		{
-			return this .layouts .length ? this .layouts [this .layouts .length - 1] : null;
+			return this .layouts .at (-1);
+		},
+		getTextureProjectors: function ()
+		{
+			return this .textureProjectors;
 		},
 		getGeneratedCubeMapTextures: function ()
 		{
@@ -282,22 +284,20 @@ function ($,
 			///  and obstacle and @a stepBack is true a translation in the opposite directiion is returned.  Future implementation will
 			///  will then return a value where the avatar slides along the wall.  Modifies translation in place.
 
-			var distance = this .getDistance (translation);
-
 			// Constrain translation when the viewer collides with an obstacle.
 
-			distance -= this .getNavigationInfo () .getCollisionRadius ();
+			const distance = this .getDistance (translation) - this .getNavigationInfo () .getCollisionRadius ();
 
 			if (distance > 0)
 			{
 				// Move.
-				
-				var length = translation .abs ();
+
+				const length = translation .abs ();
 
 				if (length > distance)
 				{
 					// Collision, the avatar would intersect with the obstacle.
-					
+
 					return translation .normalize () .multiply (distance);
 				}
 
@@ -315,7 +315,7 @@ function ($,
 		},
 		getDistance: (function ()
 		{
-			var
+			const
 				projectionMatrix            = new Matrix4 (),
 				cameraSpaceProjectionMatrix = new Matrix4 (),
 				localOrientation            = new Rotation4 (0, 0, 1, 0),
@@ -325,23 +325,23 @@ function ($,
 			return function (direction)
 			{
 				///  Returns the distance to the closest object in @a direction.  The maximum determinable value is avatarHeight * 2.
-	
+
 				try
 				{
-				   var t0 = performance .now ();
-	
-					var
+				   const t0 = performance .now ();
+
+					const
 						viewpoint       = this .getViewpoint (),
 						navigationInfo  = this .getNavigationInfo (),
 						collisionRadius = navigationInfo .getCollisionRadius (),
 						bottom          = navigationInfo .getStepHeight () - navigationInfo .getAvatarHeight (),
 						nearValue       = navigationInfo .getNearValue (),
 						avatarHeight    = navigationInfo .getAvatarHeight ();
-	
+
 					// Determine width and height of camera
-	
+
 					// Reshape camera
-	
+
 					Camera .ortho (-collisionRadius,
 					               collisionRadius,
 					               Math .min (bottom, -collisionRadius), /// TODO: bottom could be a positive value if stepHeight > avatarHeight.
@@ -349,27 +349,27 @@ function ($,
 					               nearValue,
 					               Math .max (collisionRadius * 2, avatarHeight * 2),
 					               projectionMatrix);
-	
+
 					// Translate camera to user position and to look in the direction of the direction.
-	
+
 					localOrientation .assign (viewpoint .orientation_ .getValue ()) .inverse () .multRight (viewpoint .getOrientation ());
 					rotation .setFromToVec (Vector3 .zAxis, vector .assign (direction) .negate ()) .multRight (localOrientation);
 					viewpoint .straightenHorizon (rotation);
-	
+
 					cameraSpaceProjectionMatrix .assign (viewpoint .getModelMatrix ());
 					cameraSpaceProjectionMatrix .translate (viewpoint .getUserPosition ());
 					cameraSpaceProjectionMatrix .rotate (rotation);
 					cameraSpaceProjectionMatrix .inverse ();
-	
+
 					cameraSpaceProjectionMatrix .multRight (projectionMatrix);
 					cameraSpaceProjectionMatrix .multLeft (viewpoint .getCameraSpaceMatrix ());
-	
+
 					this .getProjectionMatrix () .pushMatrix (cameraSpaceProjectionMatrix);
-	
-					var depth = this .getDepth (projectionMatrix);
-	
+
+					const depth = this .getDepth (projectionMatrix);
+
 					this .getProjectionMatrix () .pop ();
-	
+
 					this .collisionTime += performance .now () - t0;
 					return -depth;
 				}
@@ -381,7 +381,7 @@ function ($,
 		})(),
 		getDepth: (function ()
 		{
-			var
+			const
 				depthBufferViewport   = new Vector4 (0, 0, DEPTH_BUFFER_WIDTH, DEPTH_BUFFER_HEIGHT),
 				depthBufferViewVolume = new ViewVolume ();
 
@@ -390,21 +390,21 @@ function ($,
 			return function (projectionMatrix)
 			{
 				///  Returns the depth value to the closest object.  The maximum determinable value is avatarHeight * 2.
-	
+
 				this .depthBuffer .bind ();
-	
+
 				this .viewVolumes .push (depthBufferViewVolume);
 				this .depth (this .collisionShapes, this .numCollisionShapes);
-				this .viewVolumes .pop ();	
-	
-				var depth = this .depthBuffer .getDepth (projectionMatrix, depthBufferViewport);
-	
+				this .viewVolumes .pop ();
+
+				const depth = this .depthBuffer .getDepth (projectionMatrix, depthBufferViewport);
+
 				this .depthBuffer .unbind ();
-	
+
 				return depth;
 			};
 		})(),
-		render: function (type, group)
+		render: function (type, callback, group)
 		{
 			switch (type)
 			{
@@ -413,16 +413,16 @@ function ($,
 					// Collect for collide and gravite
 					this .numCollisionShapes = 0;
 
-					group .traverse (type, this);
+					callback .call (group, type, this);
 					this .collide ();
 					this .gravite ();
 					break;
 				}
-				case TraverseType .DEPTH:
+				case TraverseType .SHADOW:
 				{
 					this .numDepthShapes = 0;
 
-					group .traverse (type, this);
+					callback .call (group, type, this);
 					this .depth (this .depthShapes, this .numDepthShapes);
 					break;
 				}
@@ -434,161 +434,170 @@ function ($,
 
 					this .setGlobalFog (this .getFog ());
 
-					group .traverse (type, this);
-					this .draw (group);
+					callback .call (group, type, this);
+					this .draw ();
 					break;
 				}
 			}
 		},
-		addCollisionShape: function (shapeNode)
+		addCollisionShape: (function ()
 		{
-			var
-				modelViewMatrix = this .getModelViewMatrix () .get (),
-				bboxSize        = modelViewMatrix .multDirMatrix (this .bboxSize   .assign (shapeNode .getBBoxSize ())),
-				bboxCenter      = modelViewMatrix .multVecMatrix (this .bboxCenter .assign (shapeNode .getBBoxCenter ())),
-				radius          = bboxSize .abs () / 2,
-				viewVolume      = this .viewVolumes [this .viewVolumes .length - 1];
+			const
+				bboxSize   = new Vector3 (0, 0, 0),
+				bboxCenter = new Vector3 (0, 0, 0);
 
-			if (viewVolume .intersectsSphere (radius, bboxCenter))
+			return function (shapeNode)
 			{
-				if (this .numCollisionShapes === this .collisionShapes .length)
-					this .collisionShapes .push ({ renderer: this, modelViewMatrix: new Float32Array (16), collisions: [ ], clipPlanes: [ ] });
-	
-				var context = this .collisionShapes [this .numCollisionShapes];
-	
-				++ this .numCollisionShapes;
-	
-				context .modelViewMatrix .set (modelViewMatrix);
-				context .shapeNode = shapeNode;
-				context .scissor   = viewVolume .getScissor ();
-	
-				// Collisions
+				const modelViewMatrix = this .getModelViewMatrix () .get ();
 
-				var collisions = context .collisions;
+				modelViewMatrix .multDirMatrix (bboxSize   .assign (shapeNode .getBBoxSize ()));
+				modelViewMatrix .multVecMatrix (bboxCenter .assign (shapeNode .getBBoxCenter ()));
 
-				collisions .length = 0;
-				Array .prototype .push .apply (collisions, this .collisions);
+				const
+					radius     = bboxSize .abs () / 2,
+					viewVolume = this .viewVolumes .at (-1);
 
-				// Clip planes
+				if (viewVolume .intersectsSphere (radius, bboxCenter))
+				{
+					const num = this .numCollisionShapes ++;
 
-				var clipPlanes = context .clipPlanes;
+					if (num === this .collisionShapes .length)
+					{
+						this .collisionShapes .push ({ renderer: this, browser: this .getBrowser (), modelViewMatrix: new Float32Array (16), collisions: [ ], clipPlanes: [ ] });
+					}
 
-				clipPlanes .length = 0;
-				Array .prototype .push .apply (clipPlanes, this .shaderObjects);
+					const context = this .collisionShapes [num];
 
-				return true;
-			}
+					context .modelViewMatrix .set (modelViewMatrix);
+					context .shapeNode = shapeNode;
+					context .scissor   = viewVolume .getScissor ();
 
-			return false;
-		},
-		addDepthShape: function (shapeNode)
-		{
-			var
-				modelViewMatrix = this .getModelViewMatrix () .get (),
-				bboxSize        = modelViewMatrix .multDirMatrix (this .bboxSize   .assign (shapeNode .getBBoxSize ())),
-				bboxCenter      = modelViewMatrix .multVecMatrix (this .bboxCenter .assign (shapeNode .getBBoxCenter ())),
-				radius          = bboxSize .abs () / 2,
-				viewVolume      = this .viewVolumes [this .viewVolumes .length - 1];
+					// Collisions
 
-			if (viewVolume .intersectsSphere (radius, bboxCenter))
-			{
-				if (this .numDepthShapes === this .depthShapes .length)
-					this .depthShapes .push ({ renderer: this, modelViewMatrix: new Float32Array (16), clipPlanes: [ ] });
-	
-				var context = this .depthShapes [this .numDepthShapes];
-	
-				++ this .numDepthShapes;
-	
-				context .modelViewMatrix .set (modelViewMatrix);
-				context .shapeNode = shapeNode;
-				context .scissor   = viewVolume .getScissor ();
-	
-				// Clip planes
-	
-				var clipPlanes = context .clipPlanes;
-
-				clipPlanes .length = 0;
-				Array .prototype .push .apply (clipPlanes, this .shaderObjects);
-
-				return true;
-			}
+					assign (context .collisions, this .collisions);
 
-			return false;
-		},
-		addDisplayShape: function (shapeNode)
+					// Clip planes
+
+					assign (context .clipPlanes, this .localObjects);
+
+					return true;
+				}
+
+				return false;
+			};
+		})(),
+		addDepthShape: (function ()
 		{
-			var
-				modelViewMatrix = this .getModelViewMatrix () .get (),
-				bboxSize        = modelViewMatrix .multDirMatrix (this .bboxSize   .assign (shapeNode .getBBoxSize ())),
-				bboxCenter      = modelViewMatrix .multVecMatrix (this .bboxCenter .assign (shapeNode .getBBoxCenter ())),
-				radius          = bboxSize .abs () / 2,
-				viewVolume      = this .viewVolumes [this .viewVolumes .length - 1];
+			const
+				bboxSize   = new Vector3 (0, 0, 0),
+				bboxCenter = new Vector3 (0, 0, 0);
 
-			if (viewVolume .intersectsSphere (radius, bboxCenter))
+			return function (shapeNode)
 			{
-				if (shapeNode .isTransparent ())
+				const modelViewMatrix = this .getModelViewMatrix () .get ();
+
+				modelViewMatrix .multDirMatrix (bboxSize   .assign (shapeNode .getBBoxSize ()));
+				modelViewMatrix .multVecMatrix (bboxCenter .assign (shapeNode .getBBoxCenter ()));
+
+				const
+					radius     = bboxSize .abs () / 2,
+					viewVolume = this .viewVolumes .at (-1);
+
+				if (viewVolume .intersectsSphere (radius, bboxCenter))
 				{
-					var num = this .numTransparentShapes;
+					const num = this .numDepthShapes ++;
 
-					if (num === this .transparentShapes .length)
-						this .transparentShapes .push (this .createShapeContext (true));
+					if (num === this .depthShapes .length)
+					{
+						this .depthShapes .push ({ renderer: this, browser: this .getBrowser (), modelViewMatrix: new Float32Array (16), clipPlanes: [ ] });
+					}
 
-					var context = this .transparentShapes [num];
+					const context = this .depthShapes [num];
 
-					++ this .numTransparentShapes;
+					context .modelViewMatrix .set (modelViewMatrix);
+					context .shapeNode = shapeNode;
+					context .scissor   = viewVolume .getScissor ();
+
+					// Clip planes
+
+					assign (context .clipPlanes, this .localObjects);
+
+					return true;
 				}
-				else
+
+				return false;
+			};
+		})(),
+		addDisplayShape: (function ()
+		{
+			const
+				bboxSize   = new Vector3 (0, 0, 0),
+				bboxCenter = new Vector3 (0, 0, 0);
+
+			return function (shapeNode)
+			{
+				const modelViewMatrix = this .getModelViewMatrix () .get ();
+
+				modelViewMatrix .multDirMatrix (bboxSize   .assign (shapeNode .getBBoxSize ()));
+				modelViewMatrix .multVecMatrix (bboxCenter .assign (shapeNode .getBBoxCenter ()));
+
+				const
+					radius     = bboxSize .abs () / 2,
+					viewVolume = this .viewVolumes .at (-1);
+
+				if (viewVolume .intersectsSphere (radius, bboxCenter))
 				{
-					var num = this .numOpaqueShapes;
+					if (shapeNode .getTransparent ())
+					{
+						const num = this .numTransparentShapes ++;
 
-					if (num === this .opaqueShapes .length)
-						this .opaqueShapes .push (this .createShapeContext (false));
+						if (num === this .transparentShapes .length)
+							this .transparentShapes .push (this .createShapeContext (true));
 
-					var context = this .opaqueShapes [num];
+						var context = this .transparentShapes [num];
+					}
+					else
+					{
+						const num = this .numOpaqueShapes ++;
 
-					++ this .numOpaqueShapes;
-				}
+						if (num === this .opaqueShapes .length)
+							this .opaqueShapes .push (this .createShapeContext (false));
 
-				context .modelViewMatrix .set (modelViewMatrix);
-				context .scissor .assign (viewVolume .getScissor ());
-				context .shapeNode = shapeNode;
-				context .distance  = bboxCenter .z - radius;
-				context .fogNode   = this .localFog;
-				context .shadow    = this .shadow [0];
+						var context = this .opaqueShapes [num];
+					}
 
-				// Clip planes and local lights
+					context .modelViewMatrix .set (modelViewMatrix);
+					context .scissor .assign (viewVolume .getScissor ());
+					context .shapeNode   = shapeNode;
+					context .textureNode = null;
+					context .distance    = bboxCenter .z;
+					context .fogNode     = this .localFog;
+					context .shadow      = this .shadow .at (-1);
 
-				var shaderObjects = context .shaderObjects;
+					// Clip planes and local lights
 
-				shaderObjects .length = 0;
-				Array .prototype .push .apply (shaderObjects, this .shaderObjects);
+					assign (context .localObjects, this .localObjects);
 
-				return true;
-			}
+					return true;
+				}
 
-			return false;
-		},
+				return false;
+			};
+		})(),
 		createShapeContext: function (transparent)
 		{
 			return {
 				renderer: this,
+				browser: this .getBrowser (),
 				transparent: transparent,
-				geometryType: 3,
-				colorMaterial: false,
 				modelViewMatrix: new Float32Array (16),
 				scissor: new Vector4 (0, 0, 0, 0),
-				shaderObjects: [ ],
-				linePropertiesNode: null,
-				materialNode: null,
-				textureNode: null,
-				textureTransformNode: null,
-				shaderNode: null,
-				shadow: false,
+				localObjects: [ ],
 			};
 		},
 		collide: (function ()
 		{
-			var
+			const
 				invModelViewMatrix = new Matrix4 (),
 				modelViewMatrix    = new Matrix4 (),
 				collisionBox       = new Box3 (Vector3 .Zero, Vector3 .Zero),
@@ -597,30 +606,30 @@ function ($,
 			return function ()
 			{
 				// Collision nodes are handled here.
-	
-				var
+
+				const
 					activeCollisions = { }, // current active Collision nodes
 					collisionRadius2 = 2.2 * this .getNavigationInfo () .getCollisionRadius (); // Make the radius a little bit larger.
-	
+
 				collisionSize .set (collisionRadius2, collisionRadius2, collisionRadius2);
-	
-				for (var i = 0, length = this .numCollisionShapes; i < length; ++ i)
+
+				for (let i = 0, length = this .numCollisionShapes; i < length; ++ i)
 				{
 					try
 					{
-						var
+						const
 							context    = this .collisionShapes [i],
 							collisions = context .collisions;
-	
+
 						if (collisions .length)
 						{
 						   collisionBox .set (collisionSize, Vector3 .Zero);
 							collisionBox .multRight (invModelViewMatrix .assign (context .modelViewMatrix) .inverse ());
-	
+
 							if (context .shapeNode .intersectsBox (collisionBox, context .clipPlanes, modelViewMatrix .assign (context .modelViewMatrix)))
 							{
-							   for (var c = 0; c < collisions .length; ++ c)
-									activeCollisions [collisions [c] .getId ()] = collisions [c];
+							   for (const collision of collisions)
+									activeCollisions [collision .getId ()] = collision;
 							}
 						}
 					}
@@ -629,139 +638,146 @@ function ($,
 						console .log (error);
 					}
 				}
-	
+
 				// Set isActive to FALSE for affected nodes.
-	
+
 				if (! $.isEmptyObject (this .activeCollisions))
 				{
-					var inActiveCollisions = $.isEmptyObject (activeCollisions)
-					                         ? this .activeCollisions
-					                         : Algorithm .set_difference (this .activeCollisions, activeCollisions, { });
-			
-					for (var key in inActiveCollisions)
+					const inActiveCollisions = $.isEmptyObject (activeCollisions)
+					                           ? this .activeCollisions
+					                           : Algorithm .set_difference (this .activeCollisions, activeCollisions, { });
+
+					for (const key in inActiveCollisions)
 						inActiveCollisions [key] .set_active (false);
 				}
-	
+
 				// Set isActive to TRUE for affected nodes.
-	
+
 				this .activeCollisions = activeCollisions;
-	
-				for (var key in activeCollisions)
+
+				for (const key in activeCollisions)
 					activeCollisions [key] .set_active (true);
 			};
 		})(),
 		gravite: (function ()
 		{
-			var
+			const
 				projectionMatrix            = new Matrix4 (),
 				cameraSpaceProjectionMatrix = new Matrix4 (),
-				vector                      = new Vector3 (0, 0, 0),
+				translation                 = new Vector3 (0, 0, 0),
 				rotation                    = new Rotation4 (0, 0, 1, 0);
 
 			return function ()
 			{
 			   try
 			   {
-					// Terrain following and gravitation
-	
-					if (this .getBrowser () .getActiveLayer () === this)
+					const
+						browser    = this .getBrowser (),
+						shaderNode = browser .getDepthShader ();
+
+					if (shaderNode .getValid ())
 					{
-						if (this .getBrowser () .getCurrentViewer () !== "WALK")
+						// Terrain following and gravitation
+
+						if (browser .getActiveLayer () === this)
+						{
+							if (browser .getCurrentViewer () !== "WALK")
+								return;
+						}
+						else if (this .getNavigationInfo () .getViewer () !== "WALK")
 							return;
-					}
-					else if (this .getNavigationInfo () .getViewer () !== "WALK")
-						return;
 
-					// Get NavigationInfo values
+						// Get NavigationInfo values
 
-					var
-						navigationInfo  = this .getNavigationInfo (),
-						viewpoint       = this .getViewpoint (),
-						collisionRadius = navigationInfo .getCollisionRadius (),
-						nearValue       = navigationInfo .getNearValue (),
-						avatarHeight    = navigationInfo .getAvatarHeight (),
-						stepHeight      = navigationInfo .getStepHeight ();
+						const
+							navigationInfo  = this .getNavigationInfo (),
+							viewpoint       = this .getViewpoint (),
+							collisionRadius = navigationInfo .getCollisionRadius (),
+							nearValue       = navigationInfo .getNearValue (),
+							avatarHeight    = navigationInfo .getAvatarHeight (),
+							stepHeight      = navigationInfo .getStepHeight ();
 
-					// Reshape viewpoint for gravite.
+						// Reshape viewpoint for gravite.
 
-					Camera .ortho (-collisionRadius,
-					               collisionRadius,
-					               -collisionRadius,
-					               collisionRadius,
-					               nearValue,
-					               Math .max (collisionRadius * 2, avatarHeight * 2),
-					               projectionMatrix);
+						Camera .ortho (-collisionRadius,
+						               collisionRadius,
+						               -collisionRadius,
+						               collisionRadius,
+						               nearValue,
+						               Math .max (collisionRadius * 2, avatarHeight * 2),
+						               projectionMatrix);
 
-					// Transform viewpoint to look down the up vector
+						// Transform viewpoint to look down the up vector
 
-					var
-						upVector = viewpoint .getUpVector (),
-						down     = rotation .setFromToVec (Vector3 .zAxis, upVector);
+						const
+							upVector = viewpoint .getUpVector (),
+							down     = rotation .setFromToVec (Vector3 .zAxis, upVector);
 
-					cameraSpaceProjectionMatrix .assign (viewpoint .getModelMatrix ());
-					cameraSpaceProjectionMatrix .translate (viewpoint .getUserPosition ());
-					cameraSpaceProjectionMatrix .rotate (down);
-					cameraSpaceProjectionMatrix .inverse ();
+						cameraSpaceProjectionMatrix .assign (viewpoint .getModelMatrix ());
+						cameraSpaceProjectionMatrix .translate (viewpoint .getUserPosition ());
+						cameraSpaceProjectionMatrix .rotate (down);
+						cameraSpaceProjectionMatrix .inverse ();
 
-					cameraSpaceProjectionMatrix .multRight (projectionMatrix);
-					cameraSpaceProjectionMatrix .multLeft (viewpoint .getCameraSpaceMatrix ());
+						cameraSpaceProjectionMatrix .multRight (projectionMatrix);
+						cameraSpaceProjectionMatrix .multLeft (viewpoint .getCameraSpaceMatrix ());
 
-					this .getProjectionMatrix () .pushMatrix (cameraSpaceProjectionMatrix);
+						this .getProjectionMatrix () .pushMatrix (cameraSpaceProjectionMatrix);
 
-					var distance = -this .getDepth (projectionMatrix);
+						let distance = -this .getDepth (projectionMatrix);
 
-					this .getProjectionMatrix () .pop ();
+						this .getProjectionMatrix () .pop ();
 
-					// Gravite or step up
+						// Gravite or step up
 
-					distance -= avatarHeight;
-	
-					var up = rotation .setFromToVec (Vector3 .yAxis, upVector);
-	
-					if (distance > 0)
-					{
-						// Gravite and fall down the to the floor
-	
-						var currentFrameRate = this .speed ? this .getBrowser () .getCurrentFrameRate () : 1000000;
-	
-						this .speed -= this .getBrowser () .getBrowserOptions () .Gravity_ .getValue () / currentFrameRate;
-	
-						var translation = this .speed / currentFrameRate;
-	
-						if (translation < -distance)
+						distance -= avatarHeight;
+
+						const up = rotation .setFromToVec (Vector3 .yAxis, upVector);
+
+						if (distance > 0)
 						{
-							// The ground is reached.
-							translation = -distance;
-							this .speed = 0;
-						}
+							// Gravite and fall down the to the floor
 
-						viewpoint .positionOffset_ = viewpoint .positionOffset_ .getValue () .add (up .multVecRot (vector .set (0, translation, 0)));
-					}
-					else
-					{
-						this .speed = 0;
+							const currentFrameRate = this .speed ? browser .getCurrentFrameRate () : 1000000;
+
+							this .speed -= browser .getBrowserOptions () .Gravity_ .getValue () / currentFrameRate;
 
-						distance = -distance;
-	
-						if (distance > 0.01 && distance < stepHeight)
+							let y = this .speed / currentFrameRate;
+
+							if (y < -distance)
+							{
+								// The ground is reached.
+								y = -distance;
+								this .speed = 0;
+							}
+
+							viewpoint .positionOffset_ = viewpoint .positionOffset_ .getValue () .add (up .multVecRot (translation .set (0, y, 0)));
+						}
+						else
 						{
-							// Step up
-							var translation = this .constrainTranslation (up .multVecRot (this .translation .set (0, distance, 0)), false);
-
-							//if (getBrowser () -> getBrowserOptions () -> animateStairWalks ())
-							//{
-							//	float step = getBrowser () -> getCurrentSpeed () / getBrowser () -> getCurrentFrameRate ();
-							//	step = abs (getInverseCameraSpaceMatrix () .mult_matrix_dir (Vector3f (0, step, 0) * up));
-							//
-							//	Vector3f offset = Vector3f (0, step, 0) * up;
-							//
-							//	if (math::abs (offset) > math::abs (translation) or getBrowser () -> getCurrentSpeed () == 0)
-							//		offset = translation;
-							//
-							//	getViewpoint () -> positionOffset () += offset;
-							//}
-							//else
-								viewpoint .positionOffset_ = translation .add (viewpoint .positionOffset_ .getValue ());
+							this .speed = 0;
+
+							distance = -distance;
+
+							if (distance > 0.01 && distance < stepHeight)
+							{
+								// Step up
+								this .constrainTranslation (up .multVecRot (translation .set (0, distance, 0)), false);
+
+								//if (getBrowser () -> getBrowserOptions () -> animateStairWalks ())
+								//{
+								//	float step = getBrowser () -> getCurrentSpeed () / getBrowser () -> getCurrentFrameRate ();
+								//	step = abs (getViewMatrix () .mult_matrix_dir (Vector3f (0, step, 0) * up));
+								//
+								//	Vector3f offset = Vector3f (0, step, 0) * up;
+								//
+								//	if (math::abs (offset) > math::abs (translation) or getBrowser () -> getCurrentSpeed () == 0)
+								//		offset = translation;
+								//
+								//	getViewpoint () -> positionOffset () += offset;
+								//}
+								//else
+									viewpoint .positionOffset_ = translation .add (viewpoint .positionOffset_ .getValue ());
+							}
 						}
 					}
 				}
@@ -773,245 +789,256 @@ function ($,
 		})(),
 		depth: (function ()
 		{
-			var projectionMatrixArray = new Float32Array (16);
+			const projectionMatrixArray = new Float32Array (16);
 
 			return function (shapes, numShapes)
 			{
-				var
+				const
 					browser    = this .getBrowser (),
 					gl         = browser .getContext (),
 					viewport   = this .getViewVolume () .getViewport (),
 					shaderNode = browser .getDepthShader ();
-	
+
 				// Configure depth shader.
-	
-				shaderNode .enable (gl);
-	
-				projectionMatrixArray .set (this .getProjectionMatrix () .get ());
-	
-				gl .uniformMatrix4fv (shaderNode .x3d_ProjectionMatrix, false, projectionMatrixArray);
-	
-				// Configure viewport and background
-	
-				gl .viewport (viewport [0],
-				              viewport [1],
-				              viewport [2],
-				              viewport [3]);
-	
-				gl .scissor (viewport [0],
-				             viewport [1],
-				             viewport [2],
-				             viewport [3]);
-	
-				gl .clearColor (1, 0, 0, 0);
-				gl .clear (gl .COLOR_BUFFER_BIT | gl .DEPTH_BUFFER_BIT);
-	
-				// Render all objects
-	
-				gl .enable (gl .DEPTH_TEST);
-				gl .depthMask (true);
-				gl .disable (gl .BLEND);
-				gl .disable (gl .CULL_FACE);
-	
-				for (var s = 0; s < numShapes; ++ s)
+
+				if (shaderNode .getValid ())
 				{
-					var
-						context = shapes [s],
-						scissor = context .scissor;
-	
-					// TODO: viewport must not be the browser or layer viewport.
-					gl .scissor (scissor .x,
-					             scissor .y,
-					             scissor .z,
-					             scissor .w);
-	
-					// Clip planes
-	
-					shaderNode .setShaderObjects (gl, context .clipPlanes);
-	
-					// modelViewMatrix
-		
-					gl .uniformMatrix4fv (shaderNode .x3d_ModelViewMatrix, false, context .modelViewMatrix);
-	
-					// Draw
-		
-					context .shapeNode .depth (gl, context, shaderNode);
+					shaderNode .enable (gl);
+
+					projectionMatrixArray .set (this .getProjectionMatrix () .get ());
+
+					gl .uniformMatrix4fv (shaderNode .x3d_ProjectionMatrix, false, projectionMatrixArray);
+
+					// Configure viewport and background
+
+					gl .viewport (viewport [0],
+					              viewport [1],
+					              viewport [2],
+					              viewport [3]);
+
+					gl .scissor (viewport [0],
+					             viewport [1],
+					             viewport [2],
+					             viewport [3]);
+
+					gl .clearColor (1, 0, 0, 0); // Must be '1, 0, 0, 0'.
+					gl .clear (gl .COLOR_BUFFER_BIT | gl .DEPTH_BUFFER_BIT);
+
+					// Render all objects
+
+					gl .enable (gl .DEPTH_TEST);
+					gl .depthMask (true);
+					gl .disable (gl .BLEND);
+					gl .disable (gl .CULL_FACE);
+
+					for (let s = 0; s < numShapes; ++ s)
+					{
+						const
+							context = shapes [s],
+							scissor = context .scissor;
+
+						// TODO: viewport must not be the browser or layer viewport.
+						gl .scissor (scissor .x,
+						             scissor .y,
+						             scissor .z,
+						             scissor .w);
+
+						// Clip planes
+
+						shaderNode .setLocalObjects (gl, context .clipPlanes);
+
+						// modelViewMatrix
+
+						gl .uniformMatrix4fv (shaderNode .x3d_ModelViewMatrix, false, context .modelViewMatrix);
+
+						// Draw
+
+						context .shapeNode .depth (gl, context, shaderNode);
+					}
+
+					shaderNode .disable (gl);
 				}
-	
-				shaderNode .disable (gl);
 			};
 		})(),
 		draw: (function ()
 		{
-			var
+			const
 				viewportArray          = new Int32Array (4),
 				projectionMatrixArray  = new Float32Array (16),
 				cameraSpaceMatrixArray = new Float32Array (16);
 
-			return function (group)
+			return function ()
 			{
-				var
+				const
 					browser                  = this .getBrowser (),
 					gl                       = browser .getContext (),
 					viewport                 = this .getViewVolume () .getViewport (),
 					shaders                  = this .shaders,
 					lights                   = this .lights,
+					textureProjectors        = this .textureProjectors,
 					generatedCubeMapTextures = this .generatedCubeMapTextures;
-	
-	
+
+
 				// PREPARATIONS
-	
-	
+
+
 				if (this .isIndependent ())
 				{
 					// Render shadow maps.
-	
-					for (var i = 0, length = lights .length; i < length; ++ i)
-						lights [i] .renderShadowMap (this);
-		
+
+					for (const light of lights)
+						light .renderShadowMap (this);
+
 					// Render GeneratedCubeMapTextures.
-				
-					for (var i = 0, length = generatedCubeMapTextures .length; i < length; ++ i)
-						generatedCubeMapTextures [i] .renderTexture (this, group);
+
+					for (const generatedCubeMapTexture of generatedCubeMapTextures)
+						generatedCubeMapTexture .renderTexture (this);
 				}
-	
-	
+
+
 				// DRAW
-	
-	
-				// Set shadow matrix for all lights.
-	
+
+
+				// Set up shadow matrix for all lights, and matrix for all projective textures.
+
 				browser .getHeadlight () .setGlobalVariables (this);
-	
-				for (var i = 0, length = lights .length; i < length; ++ i)
-					lights [i] .setGlobalVariables (this);
-	
+
+				for (const light of lights)
+					light .setGlobalVariables (this);
+
+				for (const textureProjector of textureProjectors)
+					textureProjector .setGlobalVariables (this);
+
 				// Configure viewport and background
-	
+
 				gl .viewport (viewport [0],
 				              viewport [1],
 				              viewport [2],
 				              viewport [3]);
-	
+
 				gl .scissor (viewport [0],
 				             viewport [1],
 				             viewport [2],
-				             viewport [3]);
-	
+								 viewport [3]);
+
+				// Draw background.
+
 				gl .clear (gl .DEPTH_BUFFER_BIT);
-	
+
 				this .getBackground () .display (gl, this, viewport);
-	
-				// Sorted blend
-	
+
+				// Set global uniforms.
+
 				viewportArray          .set (viewport);
 				cameraSpaceMatrixArray .set (this .getCameraSpaceMatrix () .get ());
 				projectionMatrixArray  .set (this .getProjectionMatrix () .get ());
-	
-				browser .getPointShader  () .setGlobalUniforms (gl, this, cameraSpaceMatrixArray, projectionMatrixArray, viewportArray);
-				browser .getLineShader   () .setGlobalUniforms (gl, this, cameraSpaceMatrixArray, projectionMatrixArray, viewportArray);
-				browser .getShadowShader () .setGlobalUniforms (gl, this, cameraSpaceMatrixArray, projectionMatrixArray, viewportArray);
-	
-				for (var shader of shaders .values ())
+
+				if (browser .hasPointShader ())  shaders .add (browser .getPointShader ());
+				if (browser .hasLineShader ())   shaders .add (browser .getLineShader ());
+				if (browser .hasUnlitShader ())  shaders .add (browser .getUnlitShader ());
+				if (browser .hasShadowShader ()) shaders .add (browser .getShadowShader ());
+				shaders .add (browser .getDefaultShader ());
+
+				shaders .forEach (function (shader)
+				{
 					shader .setGlobalUniforms (gl, this, cameraSpaceMatrixArray, projectionMatrixArray, viewportArray);
-	
+				},
+				this);
+
+				// Sorted blend
+
 				// Render opaque objects first
-	
+
 				gl .enable (gl .DEPTH_TEST);
 				gl .depthMask (true);
 				gl .disable (gl .BLEND);
-	
-				for (var i = 0; i < this .numOpaqueShapes; ++ i)
+
+				const opaqueShapes = this .opaqueShapes;
+
+				for (let i = 0, length = this .numOpaqueShapes; i < length; ++ i)
 				{
-					var
-						context = this .opaqueShapes [i],
+					const
+						context = opaqueShapes [i],
 						scissor = context .scissor;
-	
+
 					gl .scissor (scissor .x,
 					             scissor .y,
 					             scissor .z,
 					             scissor .w);
-	
+
 					context .shapeNode .display (gl, context);
 				}
-	
+
 				// Render transparent objects
-	
+
 				gl .depthMask (false);
 				gl .enable (gl .BLEND);
-	
+
+				const transparentShapes = this .transparentShapes;
+
 				this .transparencySorter .sort (0, this .numTransparentShapes);
-	
-				for (var i = 0; i < this .numTransparentShapes; ++ i)
+
+				for (let i = 0, length = this .numTransparentShapes; i < length; ++ i)
 				{
-					var
-						context = this .transparentShapes [i],
+					const
+						context = transparentShapes [i],
 						scissor = context .scissor;
-	
+
 					gl .scissor (scissor .x,
 					             scissor .y,
 					             scissor .z,
 					             scissor .w);
-	
+
 					context .shapeNode .display (gl, context);
 				}
-	
+
 				gl .depthMask (true);
 				gl .disable (gl .BLEND);
-	
-	
+
+
 				// POST DRAW
-	
-	
+
+
 				gl .activeTexture (gl .TEXTURE0);
-	
-				// Reset GeneratedCubeMapTextures.
-	
-				generatedCubeMapTextures .length = 0;
-				shaders .clear ();
+
+				const globalObjects = this .globalObjects;
 
 				if (this .isIndependent ())
 				{
-					// Recycle clip planes.
-	
-					var clipPlanes = this .getBrowser () .getClipPlanes ();
-		
-					for (var i = 0, length = clipPlanes .length; i < length; ++ i)
-					   clipPlanes [i] .dispose ();
-		
-					clipPlanes .length = 0;
-	
-					// Recycle global lights.
-		
-					var lights = this .globalLights;
-		
-					for (var i = 0, length = lights .length; i < length; ++ i)
-					   lights [i] .dispose ();
-		
-					// Recycle local lights.
-		
-					var lights = this .getBrowser () .getLocalLights ();
-		
-					for (var i = 0, length = lights .length; i < length; ++ i)
-					   lights [i] .dispose ();
-		
-					lights .length = 0;
-		
-					// Recycle local fogs.
-
-					var fogs = this .getBrowser () .getLocalFogs ();
-		
-					for (var i = 0, length = fogs .length; i < length; ++ i)
-					   fogs [i] .dispose ();
-		
-					fogs .length = 0;
+					// Recycle clip planes, local fogs, local lights, and local projective textures.
+
+					const localObjects = browser .getLocalObjects ();
+
+					for (const localObject of localObjects)
+						localObject .dispose ();
+
+					localObjects .length = 0;
+
+					// Recycle global lights and global projective textures.
+
+					for (const globalObject of globalObjects)
+						globalObject .dispose ();
 				}
 
-				this .globalLights .length = 0;
-				this .lights       .length = 0;
+				// Reset containers.
+
+				shaders .clear ();
+
+				globalObjects            .length = 0;
+				lights                   .length = 0;
+				textureProjectors        .length = 0;
+				generatedCubeMapTextures .length = 0;
 			};
 		})(),
 	};
 
+	function assign (lhs, rhs)
+	{
+		for (var i = 0, length = rhs .length; i < length; ++ i)
+			lhs [i] = rhs [i];
+
+		lhs .length = length;
+	}
+
 	return X3DRenderObject;
 });