x_ite 4.0.5 → 4.7.5

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

@@ -48,28 +48,24 @@
 
 
 define ([
-	"jquery",
 	"x_ite/Fields",
 	"x_ite/Components/Core/X3DNode",
 	"x_ite/Bits/X3DConstants",
-	"standard/Math/Numbers/Color3",
+	"x_ite/Browser/Core/Shading",
 	"standard/Math/Numbers/Vector2",
 	"standard/Math/Numbers/Vector3",
-	"standard/Math/Numbers/Matrix3",
 	"standard/Math/Numbers/Matrix4",
 	"standard/Math/Geometry/Box3",
 	"standard/Math/Geometry/Plane3",
 	"standard/Math/Geometry/Triangle3",
 	"standard/Math/Algorithm",
 ],
-function ($,
-          Fields,
+function (Fields,
           X3DNode,
           X3DConstants,
-          Color3,
+          Shading,
           Vector2,
           Vector3,
-          Matrix3,
           Matrix4,
           Box3,
           Plane3,
@@ -78,15 +74,10 @@ function ($,
 {
 "use strict";
 
-	var
-		min             = new Vector3 (0, 0, 0),
-		max             = new Vector3 (0, 0, 0),
-		clipPoint       = new Vector3 (0, 0, 0),
-		modelViewMatrix = new Matrix4 (),
-		invMatrix       = new Matrix4 ();
+	const ARRAY_TYPE = "Array"; // For color, texCoord, normal, and vertex array, can be MFFloat or Array;
 
 	// Box normals for bbox / line intersection.
-	var boxNormals = [
+	const boxNormals = [
 		new Vector3 (0,  0,  1), // front
 		new Vector3 (0,  0, -1), // back
 		new Vector3 (0,  1,  0), // top
@@ -100,33 +91,84 @@ function ($,
 		X3DNode .call (this, executionContext);
 
 		this .addType (X3DConstants .X3DGeometryNode);
-			
+
 		this .addChildObjects ("transparent",  new Fields .SFBool (),
-		                       "bbox_changed", new Fields .SFTime ());
+		                       "bbox_changed", new Fields .SFTime (),
+		                       "rebuild",      new Fields .SFTime ());
+
+		this .transparent_  .setAccessType (X3DConstants .outputOnly);
+		this .bbox_changed_ .setAccessType (X3DConstants .outputOnly);
+		this .rebuild_      .setAccessType (X3DConstants .outputOnly);
+
+		// 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 .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;
+		this .display          = Function .prototype;
+		this .displayParticles = Function .prototype;
+	}
+
+	// Function to select ether Array or MFFloat for color/normal/vertex arrays.
+	X3DGeometryNode .createArray = function ()
+	{
+		if (ARRAY_TYPE == "MFFloat")
+			return new Fields .MFFloat ();
+
+		const array = [ ];
+
+		array .typedArray = new Float32Array ();
+
+		array .assign = function (value)
+		{
+			for (var i = 0, length = value .length; i < length; ++ i)
+				this [i] = value [i];
+
+			this .length = length;
+		};
+
+		array .getValue = function ()
+		{
+			return this .typedArray;
+		};
+
+		array .shrinkToFit = function ()
+		{
+			if (this .length !== this .typedArray .length)
+				this .typedArray = new Float32Array (this);
+			else
+				this .typedArray .set (this);
+		};
 
-		this .geometryType        = 3;
-		this .currentTexCoordNode = this .getBrowser () .getDefaultTextureCoordinate (); // For TextureCoordinateGenerator needed.
+		return array;
 	}
 
-	X3DGeometryNode .prototype = $.extend (Object .create (X3DNode .prototype),
+	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 ()
 		{
-			this .setTainted (true);
-		
 			X3DNode .prototype .setup .call (this);
 
-			this .addInterest ("eventsProcessed", this);
-			this .eventsProcessed ();
-
-			this .setTainted (false);
+			this .rebuild ();
 		},
 		initialize: function ()
 		{
@@ -134,53 +176,29 @@ function ($,
 
 			this .isLive () .addInterest ("set_live__", this);
 
-			var gl = this .getBrowser () .getContext ();
-
-			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 .flatShading      = undefined;
-			this .attribNodes      = [ ];
-			this .attribs          = [ ];
-			this .colors           = [ ];
-			this .texCoords        = [ ];
-			this .defaultTexCoords = [ ];
-			this .texCoordParams   = { min: new Vector3 (0, 0, 0) };
-			this .normals          = [ ];
-			this .flatNormals      = [ ];
-			this .vertices         = [ ];
-			this .vertexCount      = 0;
+			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 .colorBuffer     = gl .createBuffer ();
 			this .texCoordBuffers = [ ];
+			this .fogDepthBuffer  = gl .createBuffer ();
+			this .colorBuffer     = gl .createBuffer ();
 			this .normalBuffer    = gl .createBuffer ();
 			this .vertexBuffer    = gl .createBuffer ();
-			this .attribArray     = [ ];
-			this .colorArray      = new Float32Array ();
-			this .texCoordArray   = [ ];
-			this .vertexArray     = new Float32Array ();
 			this .planes          = [ ];
 
 			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 .depth            = Function .prototype;
-			this .display          = Function .prototype;
-			this .displayParticles = Function .prototype;
-
 			this .set_live__ ();
 		},
-		getExtendedEventHandling: function ()
-		{
-			return false;
-		},
 		setGeometryType: function (value)
 		{
 			this .geometryType = value;
@@ -189,6 +207,15 @@ function ($,
 		{
 			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.
@@ -196,19 +223,17 @@ function ($,
 		},
 		setBBox: function (bbox)
 		{
-			if (! bbox .equals (this .bbox))
-			{
-			   bbox .getExtents (min, max);
-	
-				this .min  .assign (min);
-				this .max  .assign (max);
-				this .bbox .assign (bbox);
-	
-				for (var i = 0; i < 5; ++ i)
-					this .planes [i] .set (i % 2 ? min : 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 ()
 		{
@@ -248,72 +273,57 @@ function ($,
 		{
 			return this .attribs;
 		},
-		addColor: function (color)
+		setFogDepths: function (value)
 		{
-			this .colors .push (color .r, color .g, color .b, color .length === 3 ? 1 : color .a);
+			this .fogDepths .assign (value);
+		},
+		getFogDepths: function ()
+		{
+			return this .fogDepths;
 		},
 		setColors: function (value)
 		{
-			var colors = this .colors;
-
-			for (var i = 0, length = value .length; i < length; ++ i)
-				colors [i] = value [i];
-
-			colors .length = length;
+			this .colors .assign (value);
 		},
 		getColors: function ()
 		{
 			return this .colors;
 		},
-		setTexCoords: function (value)
+		setMultiTexCoords: function (value)
 		{
-			var texCoords = this .texCoords;
+			const multiTexCoords = this .multiTexCoords;
 
 			for (var i = 0, length = value .length; i < length; ++ i)
-				texCoords [i] = value [i];
+				multiTexCoords [i] = value [i];
 
-			texCoords .length = length;
+			multiTexCoords .length = length;
 		},
-		getTexCoords: function ()
+		getMultiTexCoords: function ()
 		{
-			return this .texCoords;
+			return this .multiTexCoords;
 		},
-		setCurrentTexCoord: function (value)
+		getTexCoords: function ()
 		{
-			this .currentTexCoordNode = value || this .getBrowser () .getDefaultTextureCoordinate ();
+			return this .texCoords;
 		},
-		addNormal: function (normal)
+		setTextureCoordinate: function (value)
 		{
-			this .normals .push (normal .x, normal .y, normal .z);
+			if (value)
+				this .textureCoordinateNode = value;
+			else
+				this .textureCoordinateNode = this .getBrowser () .getDefaultTextureCoordinate ();
 		},
 		setNormals: function (value)
 		{
-			var normals = this .normals;
-
-			for (var i = 0, length = value .length; i < length; ++ i)
-				normals [i] = value [i];
-
-			normals .length = length;
+			this .normals .assign (value);
 		},
 		getNormals: function ()
 		{
 			return this .normals;
 		},
-		addVertex: function (vertex)
-		{
-			this .min .min (vertex);
-			this .max .max (vertex);
-
-			this .vertices .push (vertex .x, vertex .y, vertex .z, 1);
-		},
 		setVertices: function (value)
 		{
-			var vertices = this .vertices;
-
-			for (var i = 0, length = value .length; i < length; ++ i)
-				vertices [i] = value [i];
-
-			vertices .length = length;
+			this .vertices .assign (value);
 		},
 		getVertices: function ()
 		{
@@ -321,102 +331,110 @@ function ($,
 		},
 		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 .defaultTexCoords,
-				vertices  = this .vertices;
-
-			texCoords .length = 0;
-			this .texCoords .push (texCoords);
-
-			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 ();
 			}
+
+			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 (Xsize >= Ysize)
-					p .Tindex = 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 >= 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 ();
 				}
 			}
 
@@ -437,182 +455,196 @@ function ($,
 		{
 			// 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 .texCoords [0],
-						normals    = this .normals,
-						vertices   = this .vertices,
-						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 + 0]; 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 = 1 - u - v;
+							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 + 0] + 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 + 0] + 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]);
+
+								if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (point)), clipPlanes))
+									continue;
 
-							var i3 = i * 3;
+								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]);
 
-							var normal = new Vector3 (t * normals [i3 + 0] + 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 i3 = i * 3;
 
-							intersections .push ({ texCoord: texCoord, normal: normal, point: this .getMatrix () .multVecMatrix (point) });
-							intersected = true;
+								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,
-						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 + 0]; 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))
+						const vertices = this .vertices .getValue ();
+
+						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 ())
@@ -620,87 +652,146 @@ function ($,
 			else
 				this .getBrowser () .getBrowserOptions () .Shading_ .removeInterest ("set_shading__", this);
 		},
-		set_shading__: function (shading)
+		set_shading__: (function ()
 		{
-			if (this .geometryType < 2)
-				return;
-			
-			var flatShading = shading .getValue () === "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;
-		   
-		   this .flatShading = flatShading;
+			return function (shading)
+			{
+				if (this .geometryType < 2)
+					return;
 
-		   // Generate flat normals if needed.
+				const flatShading = this .getBrowser () .getBrowserOptions () .getShading () === Shading .FLAT;
 
-			var gl = this .getBrowser () .getContext ();
+				if (flatShading === this .flatShading)
+					return;
 
-			if (flatShading)
-			{
-				if (! this .flatNormals .length)
+				this .flatShading = flatShading;
+
+				// Generate flat normals if needed.
+
+				const gl = this .getBrowser () .getContext ();
+
+				if (flatShading)
 				{
-					var
-						cw          = this .frontFace === gl .CW,
-						flatNormals = this .flatNormals,
-						vertices    = this .vertices,
-						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 + 0], 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);
+
+							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, new Float32Array (flatShading ? this .flatNormals : this .normals), 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 ();
 		},
-		eventsProcessed: function ()
+		rebuild: (function ()
 		{
-			X3DNode .prototype .eventsProcessed .call (this);
+			const point = new Vector3 (0, 0, 0);
 
-			this .clear ();
-			this .build ();
+			return function ()
+			{
+				this .clear ();
+				this .build ();
 
-			if (this .vertices .length)
-				this .bbox .setExtents (this .min, this .max);
-			else
-				this .bbox .setExtents (this .min .set (0, 0, 0), this .max .set (0, 0, 0));
+				// Shrink arrays before transfer to graphics card.
 
-			this .bbox_changed_ .addEvent ();
+				for (const attrib of this .attribs)
+					attrib .shrinkToFit ();
 
-			if (this .geometryType > 1)
-			{
-				var
-					min = this .min,
-					max = this .max;
+				for (const multiTexCoord of this .multiTexCoords)
+					multiTexCoord .shrinkToFit ();
 
-				for (var i = 0; i < 5; ++ i)
-					this .planes [i] .set (i % 2 ? min : max, boxNormals [i]);
+				this .fogDepths .shrinkToFit ();
+				this .colors    .shrinkToFit ();
+				this .normals   .shrinkToFit ();
+				this .vertices  .shrinkToFit ();
 
-				if (this .texCoords .length === 0)
-					this .buildTexCoords ();
-			}
+				// Determine bbox.
 
-			this .set_shading__ (this .getBrowser () .getBrowserOptions () .Shading_);
-			this .transfer ();
-		},
+				const
+					min      = this .min,
+					max      = this .max,
+					vertices = this .vertices .getValue ();
+
+				if (vertices .length)
+				{
+					if (min .x === Number .POSITIVE_INFINITY)
+					{
+						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_changed_ .addEvent ();
+
+				// 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 .multiTexCoords .length === 0)
+						this .multiTexCoords .push (this .buildTexCoords ());
+
+					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.
+
+				this .set_shading__ (this .getBrowser () .getBrowserOptions () .Shading_);
+
+				// Upload arrays.
+
+				this .transfer ();
+			};
+		})(),
 		clear: function ()
 		{
 			// BBox
@@ -708,97 +799,73 @@ function ($,
 			this .min .set (Number .POSITIVE_INFINITY, Number .POSITIVE_INFINITY, Number .POSITIVE_INFINITY);
 			this .max .set (Number .NEGATIVE_INFINITY, Number .NEGATIVE_INFINITY, Number .NEGATIVE_INFINITY);
 
-			// Attrib
+			// Create attrib arrays.
+
+			const attribs = this .attribs;
 
-			var
-				attrib    = this .getAttrib (),
-				numAttrib = attrib .length,
-				attribs   = this .getAttribs ();
-			
 			for (var a = 0, length = attribs .length; a < length; ++ a)
-				attribs [a] .length = 0;;
-			
-			for (var a = attribs .length; a < numAttrib; ++ a)
-				attribs [a] = [ ];
-			
-			attribs .length = numAttrib;
+				attribs [a] .length = 0;
+
+			for (var a = attribs .length, length = this .attribNodes .length; a < length; ++ a)
+				attribs [a] = X3DGeometryNode .createArray ();
+
+			attribs .length = length;
 
 			// Buffer
 
 			this .flatShading = undefined;
-			this .colors      .length = 0;
-			this .texCoords   .length = 0;
-			this .normals     .length = 0;
-			this .flatNormals .length = 0;
-			this .vertices    .length = 0;
+
+			this .fogDepths      .length = 0;
+			this .colors         .length = 0;
+			this .multiTexCoords .length = 0;
+			this .texCoords      .length = 0;
+			this .normals        .length = 0;
+			this .flatNormals    .length = 0;
+			this .vertices       .length = 0;
 		},
 		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 ());
-				this .attribArray   .push (new Float32Array ());
-			}
 
-			this .attribBuffers .length = this .attribs .length;
-			
-			for (var i = 0, length = this .attribs .length; i < length; ++ i)
+			for (let i = 0, length = this .attribs .length; i < length; ++ i)
 			{
-				if (this .attribArray [i] .length !== this .attribs [i] .length)
-					this .attribArray [i] = new Float32Array (this .attribs [i]);
-				else
-					this .attribArray [i] .set (this .attribs [i]);
-
 				gl .bindBuffer (gl .ARRAY_BUFFER, this .attribBuffers [i]);
-				gl .bufferData (gl .ARRAY_BUFFER, this .attribArray [i], gl .STATIC_DRAW);
+				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.
-	
-			if (this .colorArray .length !== this .colors .length)
-				this .colorArray = new Float32Array (this .colors);
-			else
-				this .colorArray .set (this .colors);
 
 			gl .bindBuffer (gl .ARRAY_BUFFER, this .colorBuffer);
-			gl .bufferData (gl .ARRAY_BUFFER, this .colorArray, gl .STATIC_DRAW);
+			gl .bufferData (gl .ARRAY_BUFFER, this .colors .getValue (), gl .STATIC_DRAW);
+			this .colorMaterial = !! (this .colors .length);
 
-			// Transfer texCoords.
+			// Transfer multiTexCoords.
 
-			for (var i = this .texCoordBuffers .length, length = this .texCoords .length; i < length; ++ i)
-			{
+			for (let i = this .texCoordBuffers .length, length = this .multiTexCoords .length; i < length; ++ i)
 				this .texCoordBuffers .push (gl .createBuffer ());
-				this .texCoordArray   .push (new Float32Array ());
-			}
 
-			this .texCoordBuffers .length = this .texCoords .length;
-			
-			for (var i = 0, length = this .texCoords .length; i < length; ++ i)
+			for (let i = 0, length = this .multiTexCoords .length; i < length; ++ i)
 			{
-				if (this .texCoordArray [i] .length !== this .texCoords [i] .length)
-					this .texCoordArray [i] = new Float32Array (this .texCoords [i]);
-				else
-					this .texCoordArray [i] .set (this .texCoords [i]);
-
 				gl .bindBuffer (gl .ARRAY_BUFFER, this .texCoordBuffers [i]);
-				gl .bufferData (gl .ARRAY_BUFFER, this .texCoordArray [i], gl .STATIC_DRAW);
+				gl .bufferData (gl .ARRAY_BUFFER, this .multiTexCoords [i] .getValue (), gl .STATIC_DRAW);
 			}
 
 			// Transfer vertices.
 
-			if (this .vertexArray .length !== this .vertices .length)
-				this .vertexArray = new Float32Array (this .vertices);
-			else
-				this .vertexArray .set (this .vertices);
-
 			gl .bindBuffer (gl .ARRAY_BUFFER, this .vertexBuffer);
-			gl .bufferData (gl .ARRAY_BUFFER, this .vertexArray, gl .STATIC_DRAW);
+			gl .bufferData (gl .ARRAY_BUFFER, this .vertices .getValue (), gl .STATIC_DRAW);
 			this .vertexCount = count;
 
 			// Setup render functions.
@@ -820,10 +887,8 @@ function ($,
 	  	},
 		traverse: function (type, renderObject)
 		{ },
-		depth: function (context, shaderNode)
+		depth: function (gl, context, shaderNode)
 		{
-			var gl = context .renderer .getBrowser () .getContext ();
-
 			// Setup vertex attributes.
 
 			// Attribs in depth rendering are not supported.
@@ -837,268 +902,334 @@ function ($,
 
 			gl .drawArrays (this .primitiveMode, 0, this .vertexCount);
 		},
-		display: function (context)
+		display: function (gl, context)
 		{
 			try
 			{
-				var
-					browser       = context .renderer .getBrowser (),
-					gl            = browser .getContext (),
-					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 || context .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 .colors .length;
-				shaderNode .setLocalUniforms (gl, context);
-	
+
+				if (blendModeNode)
+					blendModeNode .enable (gl);
+
+				shaderNode .enable (gl);
+				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 .colors .length)
+
+				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)
+
+				if (context .wireframe)
 				{
 					// Wireframes are always solid so only one drawing call is needed.
-	
-					for (var i = 0, length = this .vertexCount; i < length; i += 3)
+
+					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)
+						{
+							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);
-			}
-			catch (error)
-			{
-				// Catch error from setLocalUniforms.
-				console .log (error);
+				shaderNode .disable                  (gl);
+
+				if (blendModeNode)
+					blendModeNode .disable (gl);
 			}
 		},
-		displayParticlesDepth: function (context, shaderNode, particles, numParticles)
+		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]);
 
-			shaderNode .enableVertexAttribute   (gl, this .vertexBuffer);
+			shaderNode .enableVertexAttribute (gl, this .vertexBuffer);
 
 			// 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)
 			{
+				const particle = particles [p];
+
 				modelViewMatrix [12] = x;
 				modelViewMatrix [13] = y;
 				modelViewMatrix [14] = z;
 
-				Matrix4 .prototype .translate .call (modelViewMatrix, particles [p] .position);
+				Matrix4 .prototype .translate .call (modelViewMatrix, particle .position);
 
-				gl .uniformMatrix4fv (shaderNode .x3d_ModelViewMatrix, false, modelViewMatrix);
+				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 (context, particles, numParticles)
+		displayParticles: function (gl, context, particles, numParticles)
 		{
 			try
 			{
-				var
-					browser       = context .renderer .getBrowser (),
-					gl            = browser .getContext (),
-					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 || context .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 .colors .length;
-				shaderNode .setLocalUniforms (gl, context);
-	
+
+				shaderNode .enable (gl);
+				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 .colors .length)
+				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,
-					lighting        = materialNode || shaderNode .getCustom (),
-					normalMatrix    = shaderNode .normalMatrixArray,
+
+				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)
+
+					for (let p = 0; p < numParticles; ++ p)
 					{
+						const particle = particles [p];
+
 						modelViewMatrix [12] = x;
 						modelViewMatrix [13] = y;
 						modelViewMatrix [14] = z;
-		
-						Matrix4 .prototype .translate .call (modelViewMatrix, particles [p] .position);
-		
-						if (lighting)
-						{
-							// Set normal matrix.
-							normalMatrix [0] = modelViewMatrix [0]; normalMatrix [1] = modelViewMatrix [4]; normalMatrix [2] = modelViewMatrix [ 8];
-							normalMatrix [3] = modelViewMatrix [1]; normalMatrix [4] = modelViewMatrix [5]; normalMatrix [5] = modelViewMatrix [ 9];
-							normalMatrix [6] = modelViewMatrix [2]; normalMatrix [7] = modelViewMatrix [6]; normalMatrix [8] = modelViewMatrix [10];
-							Matrix3 .prototype .inverse .call (normalMatrix);
-							gl .uniformMatrix3fv (shaderNode .x3d_NormalMatrix, false, normalMatrix);
-						}
-		
-						gl .uniformMatrix4fv (shaderNode .x3d_ModelViewMatrix, false, modelViewMatrix);
-		
-						for (var i = 0, length = this .vertexCount; i < length; i += 3)
+
+						Matrix4 .prototype .translate .call (modelViewMatrix, particle .position);
+
+						shaderNode .setParticle (gl, particle, modelViewMatrix);
+
+						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)
 						{
+							const particle = particles [p];
+
 							modelViewMatrix [12] = x;
 							modelViewMatrix [13] = y;
 							modelViewMatrix [14] = z;
-	
-							Matrix4 .prototype .translate .call (modelViewMatrix, particles [p] .position);
-	
-							if (lighting)
+
+							Matrix4 .prototype .translate .call (modelViewMatrix, particle .position);
+
+							shaderNode .setParticle (gl, particle, modelViewMatrix);
+
+							gl .enable (gl .CULL_FACE);
+
+							if (back)
 							{
-								// Set normal matrix.
-								normalMatrix [0] = modelViewMatrix [0]; normalMatrix [1] = modelViewMatrix [4]; normalMatrix [2] = modelViewMatrix [ 8];
-								normalMatrix [3] = modelViewMatrix [1]; normalMatrix [4] = modelViewMatrix [5]; normalMatrix [5] = modelViewMatrix [ 9];
-								normalMatrix [6] = modelViewMatrix [2]; normalMatrix [7] = modelViewMatrix [6]; normalMatrix [8] = modelViewMatrix [10];
-								Matrix3 .prototype .inverse .call (normalMatrix);
-								gl .uniformMatrix3fv (shaderNode .x3d_NormalMatrix, false, normalMatrix);
+								gl .cullFace (gl .FRONT);
+								gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
 							}
-	
-							gl .uniformMatrix4fv (shaderNode .x3d_ModelViewMatrix, false, 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 (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)
 						{
+							const particle = particles [p];
+
 							modelViewMatrix [12] = x;
 							modelViewMatrix [13] = y;
 							modelViewMatrix [14] = z;
-	
-							Matrix4 .prototype .translate .call (modelViewMatrix, particles [p] .position);
-	
-							if (materialNode || shaderNode .getCustom ())
-							{
-								// Set normal matrix.
-								normalMatrix [0] = modelViewMatrix [0]; normalMatrix [1] = modelViewMatrix [4]; normalMatrix [2] = modelViewMatrix [ 8];
-								normalMatrix [3] = modelViewMatrix [1]; normalMatrix [4] = modelViewMatrix [5]; normalMatrix [5] = modelViewMatrix [ 9];
-								normalMatrix [6] = modelViewMatrix [2]; normalMatrix [7] = modelViewMatrix [6]; normalMatrix [8] = modelViewMatrix [10];
-								Matrix3 .prototype .inverse .call (normalMatrix);
-								gl .uniformMatrix3fv (shaderNode .x3d_NormalMatrix, false, normalMatrix);
-							}
-	
-							gl .uniformMatrix4fv (shaderNode .x3d_ModelViewMatrix, false, modelViewMatrix);
-	
+
+							Matrix4 .prototype .translate .call (modelViewMatrix, particle .position);
+
+							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);
-			}
-			catch (error)
-			{
-				// Catch error from setLocalUniforms.
-				console .log (error);
+				shaderNode .disable                  (gl);
+
+				if (blendModeNode)
+					blendModeNode .disable (gl);
 			}
 		},
 	});
 
 	return X3DGeometryNode;
 });
-