x_ite 4.2.17 → 4.7.7

package/src/x_ite/Components/Rendering/X3DGeometryNode.js

@@ -52,10 +52,8 @@ define ([
 	"x_ite/Components/Core/X3DNode",
 	"x_ite/Bits/X3DConstants",
 	"x_ite/Browser/Core/Shading",
-	"standard/Math/Numbers/Color3",
 	"standard/Math/Numbers/Vector2",
 	"standard/Math/Numbers/Vector3",
-	"standard/Math/Numbers/Matrix3",
 	"standard/Math/Numbers/Matrix4",
 	"standard/Math/Geometry/Box3",
 	"standard/Math/Geometry/Plane3",
@@ -66,10 +64,8 @@ function (Fields,
           X3DNode,
           X3DConstants,
           Shading,
-          Color3,
           Vector2,
           Vector3,
-          Matrix3,
           Matrix4,
           Box3,
           Plane3,
@@ -80,12 +76,6 @@ function (Fields,
 
 	const ARRAY_TYPE = "Array"; // For color, texCoord, normal, and vertex array, can be MFFloat or Array;
 
-	const
-		point           = new Vector3 (0, 0, 0),
-		clipPoint       = new Vector3 (0, 0, 0),
-		modelViewMatrix = new Matrix4 (),
-		invMatrix       = new Matrix4 ();
-
 	// Box normals for bbox / line intersection.
 	const boxNormals = [
 		new Vector3 (0,  0,  1), // front
@@ -101,7 +91,7 @@ function (Fields,
 		X3DNode .call (this, executionContext);
 
 		this .addType (X3DConstants .X3DGeometryNode);
-			
+
 		this .addChildObjects ("transparent",  new Fields .SFBool (),
 		                       "bbox_changed", new Fields .SFTime (),
 		                       "rebuild",      new Fields .SFTime ());
@@ -112,24 +102,24 @@ function (Fields,
 
 		// Members
 
-		this .min                 = new Vector3 (0, 0, 0);
-		this .max                 = new Vector3 (0, 0, 0);
-		this .bbox                = new Box3 (this .min, this .max, true);
-		this .solid               = true;
-		this .geometryType        = 3;
-		this .flatShading         = undefined;
-		this .colorMaterial       = false;
-		this .attribNodes         = [ ];
-		this .attribs             = [ ];
-		this .currentTexCoordNode = this .getBrowser () .getDefaultTextureCoordinate (); // For TextureCoordinateGenerator needed.
-		this .texCoordParams      = { min: new Vector3 (0, 0, 0) };
-		this .multiTexCoords      = [ ];
-		this .texCoords           = X3DGeometryNode .createArray ();
-		this .colors              = X3DGeometryNode .createArray ();
-		this .normals             = X3DGeometryNode .createArray ();
-		this .flatNormals         = X3DGeometryNode .createArray ();
-		this .vertices            = X3DGeometryNode .createArray ();
-		this .vertexCount         = 0;
+		this .min                   = new Vector3 (0, 0, 0);
+		this .max                   = new Vector3 (0, 0, 0);
+		this .bbox                  = new Box3 (this .min, this .max, true);
+		this .solid                 = true;
+		this .geometryType          = 3;
+		this .flatShading           = undefined;
+		this .colorMaterial         = false;
+		this .attribNodes           = [ ];
+		this .attribs               = [ ];
+		this .textureCoordinateNode = this .getBrowser () .getDefaultTextureCoordinate ();
+		this .multiTexCoords        = [ ];
+		this .texCoords             = X3DGeometryNode .createArray ();
+		this .fogDepths             = X3DGeometryNode .createArray ();
+		this .colors                = X3DGeometryNode .createArray ();
+		this .normals               = X3DGeometryNode .createArray ();
+		this .flatNormals           = X3DGeometryNode .createArray ();
+		this .vertices              = X3DGeometryNode .createArray ();
+		this .vertexCount           = 0;
 
 		// This methods are configured in transfer.
 		this .depth            = Function .prototype;
@@ -143,15 +133,16 @@ function (Fields,
 		if (ARRAY_TYPE == "MFFloat")
 			return new Fields .MFFloat ();
 
-		var array = [ ];
+		const array = [ ];
 
 		array .typedArray = new Float32Array ();
 
 		array .assign = function (value)
 		{
-			this .length = 0;
+			for (var i = 0, length = value .length; i < length; ++ i)
+				this [i] = value [i];
 
-			Array .prototype .push .apply (this, value);
+			this .length = length;
 		};
 
 		array .getValue = function ()
@@ -173,19 +164,10 @@ function (Fields,
 	X3DGeometryNode .prototype = Object .assign (Object .create (X3DNode .prototype),
 	{
 		constructor: X3DGeometryNode,
-		intersection: new Vector3 (0, 0, 0),
-		uvt: { u: 0, v: 0, t: 0 },
-		v0: new Vector3 (0, 0, 0),
-		v1: new Vector3 (0, 0, 0),
-		v2: new Vector3 (0, 0, 0),
-		normal: new Vector3 (0, 0, 0),
 		setup: function ()
 		{
 			X3DNode .prototype .setup .call (this);
 
-			this .addInterest ("requestRebuild", this);
-			this .rebuild_ .addInterest ("rebuild", this);
-
 			this .rebuild ();
 		},
 		initialize: function ()
@@ -194,12 +176,16 @@ function (Fields,
 
 			this .isLive () .addInterest ("set_live__", this);
 
-			var gl = this .getBrowser () .getContext ();
+			this .addInterest ("requestRebuild", this);
+			this .rebuild_ .addInterest ("rebuild", this);
+
+			const gl = this .getBrowser () .getContext ();
 
 			this .primitiveMode   = gl .TRIANGLES;
 			this .frontFace       = gl .CCW;
 			this .attribBuffers   = [ ];
 			this .texCoordBuffers = [ ];
+			this .fogDepthBuffer  = gl .createBuffer ();
 			this .colorBuffer     = gl .createBuffer ();
 			this .normalBuffer    = gl .createBuffer ();
 			this .vertexBuffer    = gl .createBuffer ();
@@ -207,8 +193,8 @@ function (Fields,
 
 			if (this .geometryType > 1)
 			{
-				for (var i = 0; i < 5; ++ i)
-					this .planes [i] = new Plane3 (Vector3 .Zero, boxNormals [0]);
+				for (let i = 0; i < 5; ++ i)
+					this .planes [i] = new Plane3 (Vector3 .Zero, Vector3 .zAxis);
 			}
 
 			this .set_live__ ();
@@ -221,6 +207,15 @@ function (Fields,
 		{
 			return this .geometryType;
 		},
+		setTransparent: function (value)
+		{
+			if (value !== this .transparent_ .getValue ())
+				this .transparent_ = value;
+		},
+		getTransparent: function ()
+		{
+			return this .transparent_ .getValue ();
+		},
 		getBBox: function ()
 		{
 			// With screen matrix applied.
@@ -228,17 +223,17 @@ function (Fields,
 		},
 		setBBox: function (bbox)
 		{
-			if (! bbox .equals (this .bbox))
-			{
-			   bbox .getExtents (this .min, this .max);
-	
-				this .bbox .assign (bbox);
-	
-				for (var i = 0; i < 5; ++ i)
-					this .planes [i] .set (i % 2 ? this .min : this .max, boxNormals [i]);
-	
-				this .bbox_changed_ .addEvent ();
-			}
+			if (bbox .equals (this .bbox))
+				return;
+
+		   bbox .getExtents (this .min, this .max);
+
+			this .bbox .assign (bbox);
+
+			for (let i = 0; i < 5; ++ i)
+				this .planes [i] .set (i % 2 ? this .min : this .max, boxNormals [i]);
+
+			this .bbox_changed_ .addEvent ();
 		},
 		getMin: function ()
 		{
@@ -278,6 +273,14 @@ function (Fields,
 		{
 			return this .attribs;
 		},
+		setFogDepths: function (value)
+		{
+			this .fogDepths .assign (value);
+		},
+		getFogDepths: function ()
+		{
+			return this .fogDepths;
+		},
 		setColors: function (value)
 		{
 			this .colors .assign (value);
@@ -288,11 +291,12 @@ function (Fields,
 		},
 		setMultiTexCoords: function (value)
 		{
-			var multiTexCoords = this .multiTexCoords;
+			const multiTexCoords = this .multiTexCoords;
 
-			multiTexCoords .length = 0;
+			for (var i = 0, length = value .length; i < length; ++ i)
+				multiTexCoords [i] = value [i];
 
-			Array .prototype .push .apply (multiTexCoords, value);
+			multiTexCoords .length = length;
 		},
 		getMultiTexCoords: function ()
 		{
@@ -302,9 +306,12 @@ function (Fields,
 		{
 			return this .texCoords;
 		},
-		setCurrentTexCoord: function (value)
+		setTextureCoordinate: function (value)
 		{
-			this .currentTexCoordNode = value || this .getBrowser () .getDefaultTextureCoordinate ();
+			if (value)
+				this .textureCoordinateNode = value;
+			else
+				this .textureCoordinateNode = this .getBrowser () .getDefaultTextureCoordinate ();
 		},
 		setNormals: function (value)
 		{
@@ -324,101 +331,110 @@ function (Fields,
 		},
 		buildTexCoords: function ()
 		{
-			var
-				p         = this .getTexCoordParams (),
-				min       = p .min,
-				Sindex    = p .Sindex,
-				Tindex    = p .Tindex,
-				Ssize     = p .Ssize,
-				S         = min [Sindex],
-				T         = min [Tindex],
-				texCoords = this .texCoords,
-				vertices  = this .vertices .getValue ();
-
-			for (var i = 0, length = vertices .length; i < length; i += 4)
+			const texCoords = this .texCoords;
+
+			if (texCoords .length === 0)
 			{
-				texCoords .push ((vertices [i + Sindex] - S) / Ssize,
-				                 (vertices [i + Tindex] - T) / Ssize,
-				                 0,
-				                 1);
+				const
+					p         = this .getTexCoordParams (),
+					min       = p .min,
+					Sindex    = p .Sindex,
+					Tindex    = p .Tindex,
+					Ssize     = p .Ssize,
+					S         = min [Sindex],
+					T         = min [Tindex],
+					vertices  = this .vertices .getValue ();
+
+				for (let i = 0, length = vertices .length; i < length; i += 4)
+				{
+					texCoords .push ((vertices [i + Sindex] - S) / Ssize,
+					                 (vertices [i + Tindex] - T) / Ssize,
+					                 0,
+					                 1);
+				}
+
+				texCoords .shrinkToFit ();
 			}
 
-			this .multiTexCoords .push (texCoords);
+			return texCoords;
 		},
-		getTexCoordParams: function ()
+		getTexCoordParams: (function ()
 		{
-			var
-				p     = this .texCoordParams,
-				bbox  = this .getBBox (),
-				size  = bbox .size,
-				Xsize = size .x,
-				Ysize = size .y,
-				Zsize = size .z;
-
-			p .min .assign (bbox .center) .subtract (size .divide (2));
+			const texCoordParams = { min: new Vector3 (0, 0, 0), Ssize: 0, Sindex: 0, Tindex: 0 };
 
-			if ((Xsize >= Ysize) && (Xsize >= Zsize))
+			return function ()
 			{
-				// X size largest
-				p .Ssize = Xsize; p .Sindex = 0;
+				const
+					bbox  = this .getBBox (),
+					size  = bbox .size,
+					Xsize = size .x,
+					Ysize = size .y,
+					Zsize = size .z;
 
-				if (Ysize >= Zsize)
-					p .Tindex = 1;
-				else
-					p .Tindex = 2;
-			}
-			else if ((Ysize >= Xsize) && (Ysize >= Zsize))
-			{
-				// Y size largest
-				p .Ssize = Ysize; p .Sindex = 1;
+				texCoordParams .min .assign (bbox .center) .subtract (size .divide (2));
 
-				if (Xsize >= Zsize)
-					p .Tindex = 0;
-				else
-					p .Tindex = 2;
-			}
-			else
-			{
-				// Z is the largest
-				p .Ssize = Zsize; p .Sindex = 2;
+				if ((Xsize >= Ysize) && (Xsize >= Zsize))
+				{
+					// X size largest
+					texCoordParams .Ssize = Xsize; texCoordParams .Sindex = 0;
+
+					if (Ysize >= Zsize)
+						texCoordParams .Tindex = 1;
+					else
+						texCoordParams .Tindex = 2;
+				}
+				else if ((Ysize >= Xsize) && (Ysize >= Zsize))
+				{
+					// Y size largest
+					texCoordParams .Ssize = Ysize; texCoordParams .Sindex = 1;
 
-				if (Xsize >= Ysize)
-					p .Tindex = 0;
+					if (Xsize >= Zsize)
+						texCoordParams .Tindex = 0;
+					else
+						texCoordParams .Tindex = 2;
+				}
 				else
-					p .Tindex = 1;
-			}
+				{
+					// Z is the largest
+					texCoordParams .Ssize = Zsize; texCoordParams .Sindex = 2;
 
-			return p;
-		},
+					if (Xsize >= Ysize)
+						texCoordParams .Tindex = 0;
+					else
+						texCoordParams .Tindex = 1;
+				}
+
+				return texCoordParams;
+			};
+		})(),
 		refineNormals: function (normalIndex, normals, creaseAngle)
 		{
 			if (creaseAngle === 0)
 				return normals;
 
-			var
+			const
 				cosCreaseAngle = Math .cos (Algorithm .clamp (creaseAngle, 0, Math .PI)),
 				normals_       = [ ];
 
-			for (var i in normalIndex) // Don't use forEach
+			for (const i in normalIndex) // Don't use forEach
 			{
-				var vertex = normalIndex [i];
+				const vertex = normalIndex [i];
 
-				for (var p = 0, length = vertex .length; p < length; ++ p)
+				for (const p of vertex)
 				{
-					var
-						P = vertex [p],
-						m = normals [P],
-						n = new Vector3 (0, 0, 0);
+					const
+						P = normals [p],
+						N = new Vector3 (0, 0, 0);
 
-					for (var q = 0; q < length; ++ q)
+					for (const q of vertex)
 					{
-						var Q = normals [vertex [q]];
-	
-						if (Q .dot (m) >= cosCreaseAngle)
-							n .add (Q);
+						const Q = normals [q];
+
+						if (Q .dot (P) >= cosCreaseAngle)
+							N .add (Q);
 					}
 
-					normals_ [P] = n .normalize ();
+					normals_ [p] = N .normalize ();
 				}
 			}
 
@@ -439,182 +455,196 @@ function (Fields,
 		{
 			// Apply sceen nodes transformation in place here.
 		},
-		intersectsLine: function (line, clipPlanes, modelViewMatrix_, intersections)
+		intersectsLine: (function ()
 		{
-			try
+			const
+				modelViewMatrix = new Matrix4 (),
+				uvt             = { u: 0, v: 0, t: 0 },
+				v0              = new Vector3 (0, 0, 0),
+				v1              = new Vector3 (0, 0, 0),
+				v2              = new Vector3 (0, 0, 0),
+				clipPoint       = new Vector3 (0, 0, 0);
+
+			return function (line, clipPlanes, modelViewMatrix_, intersections)
 			{
-				var intersected = false;
-
-				if (this .intersectsBBox (line))
+				try
 				{
-					this .transformLine   (line);                                       // Apply screen transformations from screen nodes.
-					this .transformMatrix (modelViewMatrix .assign (modelViewMatrix_)); // Apply screen transformations from screen nodes.
-
-					var
-						texCoords  = this .multiTexCoords [0] .getValue (),
-						normals    = this .normals .getValue (),
-						vertices   = this .vertices .getValue (),
-						uvt        = this .uvt,
-						v0         = this .v0,
-						v1         = this .v1,
-						v2         = this .v2;
-
-					for (var i = 0, length = this .vertexCount; i < length; i += 3)
+					if (this .intersectsBBox (line))
 					{
-						var i4 = i * 4;
+						this .transformLine   (line);                                       // Apply screen transformations from screen nodes.
+						this .transformMatrix (modelViewMatrix .assign (modelViewMatrix_)); // Apply screen transformations from screen nodes.
 
-						v0 .x = vertices [i4];     v0 .y = vertices [i4 + 1]; v0 .z = vertices [i4 +  2];
-						v1 .x = vertices [i4 + 4]; v1 .y = vertices [i4 + 5]; v1 .z = vertices [i4 +  6];
-						v2 .x = vertices [i4 + 8]; v2 .y = vertices [i4 + 9]; v2 .z = vertices [i4 + 10];
+						const
+							texCoords  = this .multiTexCoords [0] .getValue (),
+							normals    = this .normals .getValue (),
+							vertices   = this .vertices .getValue ();
 
-						if (line .intersectsTriangle (v0, v1, v2, uvt))
+						for (let i = 0, length = this .vertexCount; i < length; i += 3)
 						{
-							// Get barycentric coordinates.
+							const i4 = i * 4;
 
-							var
-								u = uvt .u,
-								v = uvt .v,
-								t = uvt .t;
+							v0 .x = vertices [i4];     v0 .y = vertices [i4 + 1]; v0 .z = vertices [i4 +  2];
+							v1 .x = vertices [i4 + 4]; v1 .y = vertices [i4 + 5]; v1 .z = vertices [i4 +  6];
+							v2 .x = vertices [i4 + 8]; v2 .y = vertices [i4 + 9]; v2 .z = vertices [i4 + 10];
 
-							// Determine vectors for X3DPointingDeviceSensors.
+							if (line .intersectsTriangle (v0, v1, v2, uvt))
+							{
+								// Get barycentric coordinates.
 
-							var point = new Vector3 (t * vertices [i4]     + u * vertices [i4 + 4] + v * vertices [i4 +  8],
-							                         t * vertices [i4 + 1] + u * vertices [i4 + 5] + v * vertices [i4 +  9],
-							                         t * vertices [i4 + 2] + u * vertices [i4 + 6] + v * vertices [i4 + 10]);
+								const
+									u = uvt .u,
+									v = uvt .v,
+									t = uvt .t;
 
-							if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (point)), clipPlanes))
-								continue;
+								// Determine vectors for X3DPointingDeviceSensors.
 
-							var texCoord = new Vector2 (t * texCoords [i4]     + u * texCoords [i4 + 4] + v * texCoords [i4 + 8],
-							                            t * texCoords [i4 + 1] + u * texCoords [i4 + 5] + v * texCoords [i4 + 9]);
+								const point = new Vector3 (t * vertices [i4]     + u * vertices [i4 + 4] + v * vertices [i4 +  8],
+								                           t * vertices [i4 + 1] + u * vertices [i4 + 5] + v * vertices [i4 +  9],
+								                           t * vertices [i4 + 2] + u * vertices [i4 + 6] + v * vertices [i4 + 10]);
 
-							var i3 = i * 3;
+								if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (point)), clipPlanes))
+									continue;
 
-							var normal = new Vector3 (t * normals [i3]     + u * normals [i3 + 3] + v * normals [i3 + 6],
-							                          t * normals [i3 + 1] + u * normals [i3 + 4] + v * normals [i3 + 7],
-							                          t * normals [i3 + 2] + u * normals [i3 + 5] + v * normals [i3 + 8]);
+								const texCoord = new Vector2 (t * texCoords [i4]     + u * texCoords [i4 + 4] + v * texCoords [i4 + 8],
+																		t * texCoords [i4 + 1] + u * texCoords [i4 + 5] + v * texCoords [i4 + 9]);
 
-							intersections .push ({ texCoord: texCoord, normal: normal, point: this .getMatrix () .multVecMatrix (point) });
-							intersected = true;
+								const i3 = i * 3;
+
+								const normal = new Vector3 (t * normals [i3]     + u * normals [i3 + 3] + v * normals [i3 + 6],
+								                            t * normals [i3 + 1] + u * normals [i3 + 4] + v * normals [i3 + 7],
+								                            t * normals [i3 + 2] + u * normals [i3 + 5] + v * normals [i3 + 8]);
+
+								intersections .push ({ texCoord: texCoord, normal: normal, point: this .getMatrix () .multVecMatrix (point) });
+							}
 						}
 					}
-				}
 
-				return intersected;
-			}
-			catch (error)
-			{
-				console .log (error);
-				return false;
-			}
-		},
-		intersectsBBox: function (line)
+					return intersections .length;
+				}
+				catch (error)
+				{
+					console .log (error);
+					return false;
+				}
+			};
+		})(),
+		intersectsBBox: (function ()
 		{
-			var
-				planes       = this .planes,
-				min          = this .min,
-				max          = this .max,
-				minX         = min .x,
-				maxX         = max .x,
-				minY         = min .y,
-				maxY         = max .y,
-				minZ         = min .z,
-				maxZ         = max .z,
-				intersection = this .intersection;
-
-		   // front
-			if (planes [0] .intersectsLine (line, intersection))
-			{
-				if (intersection .x >= minX && intersection .x <= maxX &&
-				    intersection .y >= minY && intersection .y <= maxY)
-					return true;
-			}
+			const intersection = new Vector3 (0, 0, 0);
 
-			// back
-			if (planes [1] .intersectsLine (line, intersection))
+			return function (line)
 			{
-				if (intersection .x >= minX && intersection .x <= maxX &&
-				    intersection .y >= minY && intersection .y <= maxY)
-					return true;
-			}
+				const
+					planes = this .planes,
+					min    = this .min,
+					max    = this .max,
+					minX   = min .x,
+					maxX   = max .x,
+					minY   = min .y,
+					maxY   = max .y,
+					minZ   = min .z,
+					maxZ   = max .z;
+
+			   // front
+				if (planes [0] .intersectsLine (line, intersection))
+				{
+					if (intersection .x >= minX && intersection .x <= maxX &&
+					    intersection .y >= minY && intersection .y <= maxY)
+						return true;
+				}
 
-			// top
-			if (planes [2] .intersectsLine (line, intersection))
-			{
-				if (intersection .x >= minX && intersection .x <= maxX &&
-				    intersection .z >= minZ && intersection .z <= maxZ)
-					return true;
-			}
+				// back
+				if (planes [1] .intersectsLine (line, intersection))
+				{
+					if (intersection .x >= minX && intersection .x <= maxX &&
+					    intersection .y >= minY && intersection .y <= maxY)
+						return true;
+				}
 
-			// bottom
-			if (planes [3] .intersectsLine (line, intersection))
-			{
-				if (intersection .x >= minX && intersection .x <= maxX &&
-				    intersection .z >= minZ && intersection .z <= maxZ)
-					return true;
-			}
+				// top
+				if (planes [2] .intersectsLine (line, intersection))
+				{
+					if (intersection .x >= minX && intersection .x <= maxX &&
+					    intersection .z >= minZ && intersection .z <= maxZ)
+						return true;
+				}
 
-			// right
-			if (planes [4] .intersectsLine (line, intersection))
-			{
-				if (intersection .y >= minY && intersection .y <= maxY &&
-				    intersection .z >= minZ && intersection .z <= maxZ)
-					return true;
-			}
+				// bottom
+				if (planes [3] .intersectsLine (line, intersection))
+				{
+					if (intersection .x >= minX && intersection .x <= maxX &&
+					    intersection .z >= minZ && intersection .z <= maxZ)
+						return true;
+				}
 
-			return false;
-		},
-		intersectsBox: function (box, clipPlanes, modelViewMatrix)
+				// right
+				if (planes [4] .intersectsLine (line, intersection))
+				{
+					if (intersection .y >= minY && intersection .y <= maxY &&
+					    intersection .z >= minZ && intersection .z <= maxZ)
+						return true;
+				}
+
+				return false;
+			};
+		})(),
+		intersectsBox: (function ()
 		{
-			try
+			const
+				v0        = new Vector3 (0, 0, 0),
+				v1        = new Vector3 (0, 0, 0),
+				v2        = new Vector3 (0, 0, 0),
+				invMatrix = new Matrix4 (),
+				clipPoint = new Vector3 (0, 0, 0);
+
+			return function (box, clipPlanes, modelViewMatrix)
 			{
-				if (box .intersectsBox (this .bbox))
+				try
 				{
-					box .multRight (invMatrix .assign (this .getMatrix ()) .inverse ());
+					if (box .intersectsBox (this .bbox))
+					{
+						box .multRight (invMatrix .assign (this .getMatrix ()) .inverse ());
 
-					this .transformMatrix (modelViewMatrix); // Apply screen transformations from screen nodes.
+						this .transformMatrix (modelViewMatrix); // Apply screen transformations from screen nodes.
 
-					var
-						vertices = this .vertices .getValue (),
-						v0       = this .v0,
-						v1       = this .v1,
-						v2       = this .v2;
-		
-					for (var i = 0, length = this .vertexCount; i < length; i += 3)
-					{
-						var i4 = i * 4;
-		
-						v0 .x = vertices [i4];     v0 .y = vertices [i4 + 1]; v0 .z = vertices [i4 +  2];
-						v1 .x = vertices [i4 + 4]; v1 .y = vertices [i4 + 5]; v1 .z = vertices [i4 +  6];
-						v2 .x = vertices [i4 + 8]; v2 .y = vertices [i4 + 9]; v2 .z = vertices [i4 + 10];
+						const vertices = this .vertices .getValue ();
 
-						if (box .intersectsTriangle (v0, v1, v2))
+						for (let i = 0, length = this .vertexCount; i < length; i += 3)
 						{
-							if (clipPlanes .length)
+							const i4 = i * 4;
+
+							v0 .x = vertices [i4];     v0 .y = vertices [i4 + 1]; v0 .z = vertices [i4 +  2];
+							v1 .x = vertices [i4 + 4]; v1 .y = vertices [i4 + 5]; v1 .z = vertices [i4 +  6];
+							v2 .x = vertices [i4 + 8]; v2 .y = vertices [i4 + 9]; v2 .z = vertices [i4 + 10];
+
+							if (box .intersectsTriangle (v0, v1, v2))
 							{
-								if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (v0)), clipPlanes))
-									continue;
-				
-								if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (v1)), clipPlanes))
-									continue;
-				
-								if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (v2)), clipPlanes))
-									continue;
+								if (clipPlanes .length)
+								{
+									if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (v0)), clipPlanes))
+										continue;
+
+									if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (v1)), clipPlanes))
+										continue;
+
+									if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (v2)), clipPlanes))
+										continue;
+								}
+
+							   return true;
 							}
-		
-						   return true;
-						}
-				   }
-				}
+					   }
+					}
 
-			   return false;
-			}
-			catch (error)
-			{
-				console .log (error);
-				return false;
-			}
-		},
+				   return false;
+				}
+				catch (error)
+				{
+					console .log (error);
+					return false;
+				}
+			};
+		})(),
 		set_live__: function ()
 		{
 			if (this .isLive () .getValue ())
@@ -622,132 +652,146 @@ function (Fields,
 			else
 				this .getBrowser () .getBrowserOptions () .Shading_ .removeInterest ("set_shading__", this);
 		},
-		set_shading__: function (shading)
+		set_shading__: (function ()
 		{
-			if (this .geometryType < 2)
-				return;
-			
-			var flatShading = this .getBrowser () .getBrowserOptions () .getShading () === Shading .FLAT;
+			const
+				v0     = new Vector3 (0, 0, 0),
+				v1     = new Vector3 (0, 0, 0),
+				v2     = new Vector3 (0, 0, 0),
+				normal = new Vector3 (0, 0, 0);
 
-			if (flatShading === this .flatShading)
-				return;
+			return function (shading)
+			{
+				if (this .geometryType < 2)
+					return;
 
-			this .flatShading = flatShading;
+				const flatShading = this .getBrowser () .getBrowserOptions () .getShading () === Shading .FLAT;
 
-			// Generate flat normals if needed.
+				if (flatShading === this .flatShading)
+					return;
 
-			var gl = this .getBrowser () .getContext ();
+				this .flatShading = flatShading;
 
-			if (flatShading)
-			{
-				if (! this .flatNormals .length)
+				// Generate flat normals if needed.
+
+				const gl = this .getBrowser () .getContext ();
+
+				if (flatShading)
 				{
-					var
-						cw          = this .frontFace === gl .CW,
-						flatNormals = this .flatNormals,
-						vertices    = this .vertices .getValue (),
-						v0          = this .v0,
-						v1          = this .v1,
-						v2          = this .v2,
-						normal      = this .normal;
-
-					for (var i = 0, length = vertices .length; i < length; i += 12)
+					if (! this .flatNormals .length)
 					{
-					   Triangle3 .normal (v0 .set (vertices [i],     vertices [i + 1], vertices [i + 2]),
-					                      v1 .set (vertices [i + 4], vertices [i + 5], vertices [i + 6]),
-					                      v2 .set (vertices [i + 8], vertices [i + 9], vertices [i + 10]),
-					                      normal);
-					   
-						if (cw)
-							normal .negate ();
-
-						flatNormals .push (normal .x, normal .y, normal .z,
-						                   normal .x, normal .y, normal .z,
-						                   normal .x, normal .y, normal .z);
-					}
+						const
+							cw          = this .frontFace === gl .CW,
+							flatNormals = this .flatNormals,
+							vertices    = this .vertices .getValue ();
+
+						for (let i = 0, length = vertices .length; i < length; i += 12)
+						{
+						   Triangle3 .normal (v0 .set (vertices [i],     vertices [i + 1], vertices [i + 2]),
+						                      v1 .set (vertices [i + 4], vertices [i + 5], vertices [i + 6]),
+						                      v2 .set (vertices [i + 8], vertices [i + 9], vertices [i + 10]),
+						                      normal);
 
-					flatNormals .shrinkToFit ();
+							if (cw)
+								normal .negate ();
+
+							flatNormals .push (normal .x, normal .y, normal .z,
+							                   normal .x, normal .y, normal .z,
+							                   normal .x, normal .y, normal .z);
+						}
+
+						flatNormals .shrinkToFit ();
+					}
 				}
-			}
 
-			// Transfer normals.
+				// Transfer normals.
 
-			gl .bindBuffer (gl .ARRAY_BUFFER, this .normalBuffer);
-			gl .bufferData (gl .ARRAY_BUFFER, flatShading ? this .flatNormals .getValue () : this .normals .getValue (), gl .STATIC_DRAW);
-		},
+				gl .bindBuffer (gl .ARRAY_BUFFER, this .normalBuffer);
+				gl .bufferData (gl .ARRAY_BUFFER, flatShading ? this .flatNormals .getValue () : this .normals .getValue (), gl .STATIC_DRAW);
+			};
+		})(),
 		requestRebuild: function ()
 		{
 			this .rebuild_ .addEvent ();
 		},
-		rebuild: function ()
+		rebuild: (function ()
 		{
-			this .clear ();
-			this .build ();
+			const point = new Vector3 (0, 0, 0);
 
-			// Shrink arrays before transfer to graphics card.
+			return function ()
+			{
+				this .clear ();
+				this .build ();
 
-			for (var i = 0, length = this .attribs .length; i < length; ++ i)
-				this .attribs [i] .shrinkToFit ();
+				// Shrink arrays before transfer to graphics card.
 
-			for (var i = 0, length = this .multiTexCoords .length; i < length; ++ i)
-				this .multiTexCoords [i] .shrinkToFit ();
-	
-			this .colors   .shrinkToFit ();
-			this .normals  .shrinkToFit ();
-			this .vertices .shrinkToFit ();
+				for (const attrib of this .attribs)
+					attrib .shrinkToFit ();
 
-			// Determine bbox.
+				for (const multiTexCoord of this .multiTexCoords)
+					multiTexCoord .shrinkToFit ();
 
-			var
-				min      = this .min,
-				max      = this .max,
-				vertices = this .vertices .getValue ();
+				this .fogDepths .shrinkToFit ();
+				this .colors    .shrinkToFit ();
+				this .normals   .shrinkToFit ();
+				this .vertices  .shrinkToFit ();
 
-			if (vertices .length)
-			{
-				if (min .x === Number .POSITIVE_INFINITY)
+				// Determine bbox.
+
+				const
+					min      = this .min,
+					max      = this .max,
+					vertices = this .vertices .getValue ();
+
+				if (vertices .length)
 				{
-					for (var i = 0, length = vertices .length; i < length; i += 4)
+					if (min .x === Number .POSITIVE_INFINITY)
 					{
-						point .set (vertices [i], vertices [i + 1], vertices [i + 2]);
-	
-						min .min (point);
-						max .max (point);
+						for (let i = 0, length = vertices .length; i < length; i += 4)
+						{
+							point .set (vertices [i], vertices [i + 1], vertices [i + 2]);
+
+							min .min (point);
+							max .max (point);
+						}
 					}
+
+					this .bbox .setExtents (min, max);
+				}
+				else
+				{
+					this .bbox .setExtents (min .set (0, 0, 0), max .set (0, 0, 0));
 				}
 
-				this .bbox .setExtents (min, max);
-			}
-			else
-			{
-				this .bbox .setExtents (min .set (0, 0, 0), max .set (0, 0, 0));
-			}
+				this .bbox_changed_ .addEvent ();
 
-			this .bbox_changed_ .addEvent ();
+				// Generate texCoord if needed.
 
-			// Generate texCoord if needed.
+				if (this .geometryType > 1)
+				{
+					for (let i = 0; i < 5; ++ i)
+						this .planes [i] .set (i % 2 ? min : max, boxNormals [i]);
 
-			if (this .geometryType > 1)
-			{
-				for (var i = 0; i < 5; ++ i)
-					this .planes [i] .set (i % 2 ? min : max, boxNormals [i]);
+					if (this .multiTexCoords .length === 0)
+						this .multiTexCoords .push (this .buildTexCoords ());
 
-				if (this .multiTexCoords .length === 0)
-				{
-					this .buildTexCoords ();
-	
-					this .texCoords .shrinkToFit ();
+					const last = this .multiTexCoords .length - 1;
+
+					for (var i = this .multiTexCoords .length, length = this .getBrowser () .getMaxTextures (); i < length; ++ i)
+						this .multiTexCoords [i] = this .multiTexCoords [last];
+
+					this .multiTexCoords .length = length;
 				}
-			}
 
-			// Upload normals or flat normals.
+				// Upload normals or flat normals.
 
-			this .set_shading__ (this .getBrowser () .getBrowserOptions () .Shading_);
+				this .set_shading__ (this .getBrowser () .getBrowserOptions () .Shading_);
 
-			// Upload arrays.
+				// Upload arrays.
 
-			this .transfer ();
-		},
+				this .transfer ();
+			};
+		})(),
 		clear: function ()
 		{
 			// BBox
@@ -757,7 +801,7 @@ function (Fields,
 
 			// Create attrib arrays.
 
-			var attribs = this .attribs;
+			const attribs = this .attribs;
 
 			for (var a = 0, length = attribs .length; a < length; ++ a)
 				attribs [a] .length = 0;
@@ -771,6 +815,7 @@ function (Fields,
 
 			this .flatShading = undefined;
 
+			this .fogDepths      .length = 0;
 			this .colors         .length = 0;
 			this .multiTexCoords .length = 0;
 			this .texCoords      .length = 0;
@@ -780,44 +825,43 @@ function (Fields,
 		},
 		transfer: function ()
 		{
-			var
+			const
 				gl    = this .getBrowser () .getContext (),
 				count = this .vertices .length / 4;
 
 			// Transfer attribs.
 
-			for (var i = this .attribBuffers .length, length = this .attribs .length; i < length; ++ i)
+			for (let i = this .attribBuffers .length, length = this .attribs .length; i < length; ++ i)
 				this .attribBuffers .push (gl .createBuffer ());
 
-			// Only grow.
-			//this .attribBuffers .length = length;
-			
-			for (var i = 0, length = this .attribs .length; i < length; ++ i)
+			for (let i = 0, length = this .attribs .length; i < length; ++ i)
 			{
 				gl .bindBuffer (gl .ARRAY_BUFFER, this .attribBuffers [i]);
 				gl .bufferData (gl .ARRAY_BUFFER, this .attribs [i] .getValue (), gl .STATIC_DRAW);
 			}
 
+			// Transfer fog depths.
+
+			gl .bindBuffer (gl .ARRAY_BUFFER, this .fogDepthBuffer);
+			gl .bufferData (gl .ARRAY_BUFFER, this .fogDepths .getValue (), gl .STATIC_DRAW);
+			this .fogCoords = !! (this .fogDepths .length);
+			// Transfer colors.
+
+			gl .bindBuffer (gl .ARRAY_BUFFER, this .colorBuffer);
+			gl .bufferData (gl .ARRAY_BUFFER, this .colors .getValue (), gl .STATIC_DRAW);
+			this .colorMaterial = !! (this .colors .length);
+
 			// Transfer multiTexCoords.
 
-			for (var i = this .texCoordBuffers .length, length = this .multiTexCoords .length; i < length; ++ i)
+			for (let i = this .texCoordBuffers .length, length = this .multiTexCoords .length; i < length; ++ i)
 				this .texCoordBuffers .push (gl .createBuffer ());
 
-			// Only grow.
-			//this .texCoordBuffers .length = length;
-			
-			for (var i = 0, length = this .multiTexCoords .length; i < length; ++ i)
+			for (let i = 0, length = this .multiTexCoords .length; i < length; ++ i)
 			{
 				gl .bindBuffer (gl .ARRAY_BUFFER, this .texCoordBuffers [i]);
 				gl .bufferData (gl .ARRAY_BUFFER, this .multiTexCoords [i] .getValue (), gl .STATIC_DRAW);
 			}
 
-			// Transfer colors.
-
-			gl .bindBuffer (gl .ARRAY_BUFFER, this .colorBuffer);
-			gl .bufferData (gl .ARRAY_BUFFER, this .colors .getValue (), gl .STATIC_DRAW);
-			this .colorMaterial = Boolean (this .colors .length);
-
 			// Transfer vertices.
 
 			gl .bindBuffer (gl .ARRAY_BUFFER, this .vertexBuffer);
@@ -862,84 +906,136 @@ function (Fields,
 		{
 			try
 			{
-				var
-					shaderNode    = context .shaderNode,
+				const
+					appearanceNode   = context .shapeNode .getAppearance (),
+					materialNode     = appearanceNode .materialNode,
+					backMaterialNode = appearanceNode .backMaterialNode,
+					frontShaderNode  = appearanceNode .shaderNode || materialNode .getShader (context .browser, context .shadow);
+
+				if (this .solid || !backMaterialNode || frontShaderNode .wireframe)
+				{
+					this .displayGeometry (gl, context, appearanceNode, frontShaderNode, true, true);
+				}
+				else
+				{
+					const backShaderNode = appearanceNode .shaderNode || backMaterialNode .getShader (context .browser, context .shadow)
+
+					this .displayGeometry (gl, context, appearanceNode, backShaderNode,  true,  false);
+					this .displayGeometry (gl, context, appearanceNode, frontShaderNode, false, true);
+				}
+			}
+			catch (error)
+			{
+				// Catch error from setLocalUniforms.
+				console .log (error);
+			}
+		},
+		displayGeometry: function (gl, context, appearanceNode, shaderNode, back, front)
+		{
+			if (shaderNode .getValid ())
+			{
+				const
+					blendModeNode = appearanceNode .blendModeNode,
 					attribNodes   = this .attribNodes,
 					attribBuffers = this .attribBuffers;
 
-				// Setup shader.
-	
-				context .geometryType  = this .geometryType;
-				context .colorMaterial = this .colorMaterial;
+				if (blendModeNode)
+					blendModeNode .enable (gl);
 
 				shaderNode .enable (gl);
-				shaderNode .setLocalUniforms (gl, context);
-	
+				shaderNode .setLocalUniforms (gl, context, front);
+
 				// Setup vertex attributes.
-	
-				for (var i = 0, length = attribNodes .length; i < length; ++ i)
+
+				for (let i = 0, length = attribNodes .length; i < length; ++ i)
 					attribNodes [i] .enable (gl, shaderNode, attribBuffers [i]);
-	
+
+				if (this .fogCoords)
+					shaderNode .enableFogDepthAttribute (gl, this .fogDepthBuffer);
+
 				if (this .colorMaterial)
 					shaderNode .enableColorAttribute (gl, this .colorBuffer);
-	
+
 				shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers);
 				shaderNode .enableNormalAttribute   (gl, this .normalBuffer);
 				shaderNode .enableVertexAttribute   (gl, this .vertexBuffer);
-	
+
 				// Draw depending on wireframe, solid and transparent.
-	
+
 				if (shaderNode .wireframe)
 				{
-					// Wireframes are always solid so only one drawing call is needed.
+					// Points and Wireframes.
 
-					for (var i = 0, length = this .vertexCount; i < length; i += 3)
-						gl .drawArrays (shaderNode .primitiveMode, i, 3);
+					if (shaderNode .primitiveMode === gl .POINTS)
+					{
+						gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
+					}
+					else
+					{
+						for (let i = 0, length = this .vertexCount; i < length; i += 3)
+							gl .drawArrays (shaderNode .primitiveMode, i, 3);
+					}
 				}
 				else
 				{
-					var positiveScale = Matrix4 .prototype .determinant3 .call (context .modelViewMatrix) > 0;
-	
+					const positiveScale = Matrix4 .prototype .determinant3 .call (context .modelViewMatrix) > 0;
+
 					gl .frontFace (positiveScale ? this .frontFace : (this .frontFace === gl .CCW ? gl .CW : gl .CCW));
-	
-					if (context .transparent && ! this .solid)
+
+					if (context .transparent || back !== front)
 					{
+						// Render transparent or back or front.
+
 						gl .enable (gl .CULL_FACE);
-						gl .cullFace (gl .FRONT);
-						gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);		
-	
-						gl .cullFace (gl .BACK);
-						gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);		
+
+						// Render back.
+
+						if (back && !this .solid)
+						{
+							gl .cullFace (gl .FRONT);
+							gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
+						}
+
+						// Render front.
+
+						if (front)
+						{
+							gl .cullFace (gl .BACK);
+							gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
+						}
 					}
 					else
 					{
+						// Render solid or both sides.
+
 						if (this .solid)
 							gl .enable (gl .CULL_FACE);
 						else
 							gl .disable (gl .CULL_FACE);
-	
+
 						gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
 					}
 				}
-	
-				for (var i = 0, length = attribNodes .length; i < length; ++ i)
-					attribNodes [i] .disable (gl, shaderNode);
-	
-				shaderNode .disableColorAttribute    (gl);
+
+				for (const attribNode of attribNodes)
+					attribNode .disable (gl, shaderNode);
+
+				if (this .fogCoords)
+					shaderNode .disableFogDepthAttribute (gl);
+
+				if (this .colorMaterial)
+					shaderNode .disableColorAttribute (gl);
+
 				shaderNode .disableTexCoordAttribute (gl);
 				shaderNode .disableNormalAttribute   (gl);
 				shaderNode .disable                  (gl);
-			}
-			catch (error)
-			{
-				// Catch error from setLocalUniforms.
-				console .log (error);
+
+				if (blendModeNode)
+					blendModeNode .disable (gl);
 			}
 		},
 		displayParticlesDepth: function (gl, context, shaderNode, particles, numParticles)
 		{
-			var gl = context .renderer .getBrowser () .getContext ();
-
 			// Attribs in depth rendering are not supported:
 			//for (var i = 0, length = attribNodes .length; i < length; ++ i)
 			//	attribNodes [i] .enable (gl, shaderNode, attribBuffers [i]);
@@ -948,15 +1044,15 @@ function (Fields,
 
 			// Draw depending on wireframe, solid and transparent.
 
-			var
+			const
 				modelViewMatrix = context .modelViewMatrix,
 				x               = modelViewMatrix [12],
 				y               = modelViewMatrix [13],
 				z               = modelViewMatrix [14];
 
-			for (var p = 0; p < numParticles; ++ p)
+			for (let p = 0; p < numParticles; ++ p)
 			{
-				var particle = particles [p];
+				const particle = particles [p];
 
 				modelViewMatrix [12] = x;
 				modelViewMatrix [13] = y;
@@ -964,111 +1060,158 @@ function (Fields,
 
 				Matrix4 .prototype .translate .call (modelViewMatrix, particle .position);
 
-				shaderNode .setParticle (gl, p, particle, modelViewMatrix, false);
+				shaderNode .setParticle (gl, particle, modelViewMatrix);
 
 				gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
 			}
-	
-			//for (var i = 0, length = attribNodes .length; i < length; ++ i)
+
+			//for (let i = 0, length = attribNodes .length; i < length; ++ i)
 			//	attribNodes [i] .disable (gl, shaderNode);
 		},
 		displayParticles: function (gl, context, particles, numParticles)
 		{
 			try
 			{
-				var
-					shaderNode    = context .shaderNode,
+				const
+					appearanceNode   = context .shapeNode .getAppearance (),
+					materialNode     = appearanceNode .materialNode,
+					backMaterialNode = appearanceNode .backMaterialNode,
+					frontShaderNode  = appearanceNode .shaderNode || materialNode .getShader (context .browser, context .shadow);
+
+				if (this .solid || !backMaterialNode || frontShaderNode .wireframe)
+				{
+					this .displayParticlesGeometry (gl, context, appearanceNode, frontShaderNode, true, true, particles, numParticles);
+				}
+				else
+				{
+					const backShaderNode = appearanceNode .shaderNode || backMaterialNode .getShader (context .browser, context .shadow);
+
+					this .displayParticlesGeometry (gl, context, appearanceNode, backShaderNode,  true,  false, particles, numParticles);
+					this .displayParticlesGeometry (gl, context, appearanceNode, frontShaderNode, false, true,  particles, numParticles);
+				}
+			}
+			catch (error)
+			{
+				// Catch error from setLocalUniforms.
+				console .log (error);
+			}
+		},
+		displayParticlesGeometry: function (gl, context, appearanceNode, shaderNode, back, front, particles, numParticles)
+		{
+			if (shaderNode .getValid ())
+			{
+				const
+					blendModeNode = appearanceNode .blendModeNode,
 					attribNodes   = this .attribNodes,
 					attribBuffers = this .attribBuffers;
-	
+
+				if (blendModeNode)
+					blendModeNode .enable (gl);
+
 				// Setup shader.
-	
-				context .geometryType  = this .geometryType;
-				context .colorMaterial = this .colorMaterial;
 
 				shaderNode .enable (gl);
-				shaderNode .setLocalUniforms (gl, context);
-	
+				shaderNode .setLocalUniforms (gl, context, front);
+
 				// Setup vertex attributes.
-	
-				for (var i = 0, length = attribNodes .length; i < length; ++ i)
+
+				for (let i = 0, length = attribNodes .length; i < length; ++ i)
 					attribNodes [i] .enable (gl, shaderNode, attribBuffers [i]);
 
+				if (this .fogCoords)
+					shaderNode .enableFogDepthAttribute (gl, this .fogDepthBuffer);
+
 				if (this .colorMaterial)
 					shaderNode .enableColorAttribute (gl, this .colorBuffer);
-	
+
 				shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers);
 				shaderNode .enableNormalAttribute   (gl, this .normalBuffer);
 				shaderNode .enableVertexAttribute   (gl, this .vertexBuffer);
-	
+
 				// Draw depending on wireframe, solid and transparent.
-	
-				var
-					materialNode    = context .materialNode,
-					normalMatrix    = materialNode || shaderNode .getCustom (),
+
+				const
 					modelViewMatrix = context .modelViewMatrix,
 					x               = modelViewMatrix [12],
 					y               = modelViewMatrix [13],
 					z               = modelViewMatrix [14];
-	
+
 				if (shaderNode .wireframe)
 				{
-					// Wireframes are always solid so only one drawing call is needed.
-	
-					for (var p = 0; p < numParticles; ++ p)
+					// Points and Wireframes.
+
+					for (let p = 0; p < numParticles; ++ p)
 					{
-						var particle = particles [p];
+						const particle = particles [p];
 
 						modelViewMatrix [12] = x;
 						modelViewMatrix [13] = y;
 						modelViewMatrix [14] = z;
-		
+
 						Matrix4 .prototype .translate .call (modelViewMatrix, particle .position);
 
-						shaderNode .setParticle (gl, p, particle, modelViewMatrix, normalMatrix);
-		
-						for (var i = 0, length = this .vertexCount; i < length; i += 3)
-							gl .drawArrays (shaderNode .primitiveMode, i, 3);
+						shaderNode .setParticle (gl, particle, modelViewMatrix);
+
+						if (shaderNode .primitiveMode === gl .POINTS)
+						{
+							gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
+						}
+						else
+						{
+							for (let i = 0, length = this .vertexCount; i < length; i += 3)
+								gl .drawArrays (shaderNode .primitiveMode, i, 3);
+						}
 					}
 				}
 				else
 				{
-					var positiveScale = Matrix4 .prototype .determinant3 .call (context .modelViewMatrix) > 0;
-	
+					const positiveScale = Matrix4 .prototype .determinant3 .call (context .modelViewMatrix) > 0;
+
 					gl .frontFace (positiveScale ? this .frontFace : (this .frontFace === gl .CCW ? gl .CW : gl .CCW));
-	
-					if (context .transparent && ! this .solid)
+
+					if (context .transparent || back !== front)
 					{
-						for (var p = 0; p < numParticles; ++ p)
+						// Render transparent or back or front.
+
+						for (let p = 0; p < numParticles; ++ p)
 						{
-							var particle = particles [p];
+							const particle = particles [p];
 
 							modelViewMatrix [12] = x;
 							modelViewMatrix [13] = y;
 							modelViewMatrix [14] = z;
-	
+
 							Matrix4 .prototype .translate .call (modelViewMatrix, particle .position);
-	
-							shaderNode .setParticle (gl, p, particle, modelViewMatrix, normalMatrix);
+
+							shaderNode .setParticle (gl, particle, modelViewMatrix);
 
 							gl .enable (gl .CULL_FACE);
-							gl .cullFace (gl .FRONT);
-							gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
-		
-							gl .cullFace (gl .BACK);
-							gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
-						}	
+
+							if (back && !this .solid)
+							{
+								gl .cullFace (gl .FRONT);
+								gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
+							}
+
+							if (front)
+							{
+								gl .cullFace (gl .BACK);
+								gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
+							}
+						}
 					}
 					else
 					{
+						// Render solid or both sides.
+
 						if (this .solid)
 							gl .enable (gl .CULL_FACE);
 						else
 							gl .disable (gl .CULL_FACE);
-	
-						for (var p = 0; p < numParticles; ++ p)
+
+						for (let p = 0; p < numParticles; ++ p)
 						{
-							var particle = particles [p];
+							const particle = particles [p];
 
 							modelViewMatrix [12] = x;
 							modelViewMatrix [13] = y;
@@ -1076,29 +1219,31 @@ function (Fields,
 
 							Matrix4 .prototype .translate .call (modelViewMatrix, particle .position);
 
-							shaderNode .setParticle (gl, p, particle, modelViewMatrix, normalMatrix);
+							shaderNode .setParticle (gl, particle, modelViewMatrix);
 
 							gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
 						}
 					}
 				}
-	
-				for (var i = 0, length = attribNodes .length; i < length; ++ i)
-					attribNodes [i] .disable (gl, shaderNode);
-	
-				shaderNode .disableColorAttribute    (gl);
+
+				for (const attribNode of attribNodes)
+					attribNode .disable (gl, shaderNode);
+
+				if (this .fogCoords)
+					shaderNode .disableFogDepthAttribute (gl);
+
+				if (this .colorMaterial)
+					shaderNode .disableColorAttribute (gl);
+
 				shaderNode .disableTexCoordAttribute (gl);
 				shaderNode .disableNormalAttribute   (gl);
 				shaderNode .disable                  (gl);
-			}
-			catch (error)
-			{
-				// Catch error from setLocalUniforms.
-				console .log (error);
+
+				if (blendModeNode)
+					blendModeNode .disable (gl);
 			}
 		},
 	});
 
 	return X3DGeometryNode;
 });
-