x_ite 4.2.17 → 4.7.7

package/src/x_ite/Components/ParticleSystems/ParticleSystem.js

@@ -55,7 +55,7 @@ define ([
 	"x_ite/Bits/TraverseType",
 	"x_ite/Bits/X3DConstants",
 	"x_ite/Bits/X3DCast",
-	"standard/Math/Numbers/Color4",
+	"x_ite/Browser/Shape/AlphaMode",
 	"standard/Math/Numbers/Vector3",
 	"standard/Math/Numbers/Vector4",
 	"standard/Math/Numbers/Matrix4",
@@ -71,7 +71,7 @@ function (Fields,
           TraverseType,
           X3DConstants,
           X3DCast,
-          Color4,
+			 AlphaMode,
           Vector3,
           Vector4,
           Matrix4,
@@ -82,8 +82,9 @@ function (Fields,
 {
 "use strict";
 
-	var
-		i        = 0,
+	var i = 0;
+
+	const
 		POINT    = i ++,
 		LINE     = i ++,
 		TRIANGLE = i ++,
@@ -91,7 +92,7 @@ function (Fields,
 		GEOMETRY = i ++,
 		SPRITE   = i ++;
 
-	var GeometryTypes = {
+	const GeometryTypes = {
 		POINT:    POINT,
 		LINE:     LINE,
 		TRIANGLE: TRIANGLE,
@@ -100,7 +101,7 @@ function (Fields,
 		SPRITE:   SPRITE,
 	};
 
-	var
+	const
 		invModelViewMatrix = new Matrix4 (),
 		billboardToScreen  = new Vector3 (0, 0, 0),
 		viewerYAxis        = new Vector3 (0, 0, 0),
@@ -146,16 +147,16 @@ function (Fields,
 		this .colorKeys                = [ ];
 		this .colorRamppNode           = null;
 		this .colorRamp                = [ ];
-		this .colorMaterial            = false;
 		this .texCoordKeys             = [ ];
 		this .texCoordRampNode         = null;
 		this .texCoordRamp             = [ ];
 		this .texCoordAnim             = false;
 		this .vertexCount              = 0;
-		this .shaderNode               = this .getBrowser () .getPointShader ();
+		this .shaderNode               = null;
 		this .rotation                 = new Matrix3 ();
 		this .particleSorter           = new QuickSort (this .particles, compareDistance);
 		this .sortParticles            = false;
+		this .geometryContext          = { };
 	}
 
 	ParticleSystem .prototype = Object .assign (Object .create (X3DShapeNode .prototype),
@@ -177,6 +178,9 @@ function (Fields,
 			new X3DFieldDefinition (X3DConstants .initializeOnly, "texCoordKey",       new Fields .MFFloat ()),
 			new X3DFieldDefinition (X3DConstants .initializeOnly, "texCoordRamp",      new Fields .SFNode ()),
 			new X3DFieldDefinition (X3DConstants .outputOnly,     "isActive",          new Fields .SFBool ()),
+			new X3DFieldDefinition (X3DConstants .inputOutput,    "visible",           new Fields .SFBool (true)),
+			new X3DFieldDefinition (X3DConstants .inputOutput,    "castShadow",        new Fields .SFBool (true)),
+			new X3DFieldDefinition (X3DConstants .inputOutput,    "bboxDisplay",       new Fields .SFBool ()),
 			new X3DFieldDefinition (X3DConstants .initializeOnly, "bboxSize",          new Fields .SFVec3f (-1, -1, -1)),
 			new X3DFieldDefinition (X3DConstants .initializeOnly, "bboxCenter",        new Fields .SFVec3f ()),
 			new X3DFieldDefinition (X3DConstants .inputOutput,    "appearance",        new Fields .SFNode ()),
@@ -198,12 +202,13 @@ function (Fields,
 		{
 			X3DShapeNode .prototype .initialize .call (this);
 
-			var gl = this .getBrowser () .getContext ();
+			const
+				browser = this .getBrowser (),
+				gl      = browser .getContext ();
 
 			this .isLive () .addInterest ("set_live__", this);
 
-			this .getBrowser () .getBrowserOptions () .Shading_ .addInterest ("set_shader__", this);
-			//this .getBrowser () .getDefaultShader () .addInterest ("set_shader__", this);
+			browser .getBrowserOptions () .Shading_ .addInterest ("set_shader__", this);
 
 			this .enabled_           .addInterest ("set_enabled__",           this);
 			this .createParticles_   .addInterest ("set_createParticles__",   this);
@@ -227,6 +232,9 @@ function (Fields,
 			this .normalBuffer       = gl .createBuffer ();
 			this .vertexBuffer       = gl .createBuffer ();
 
+			for (var i = 1, channels = this .getBrowser () .getMaxTextures (); i < channels; ++ i)
+				this .texCoordBuffers .push (this .texCoordBuffers [0]);
+
 			this .idArray          = new Float32Array ();
 			this .positionArray    = new Float32Array ();
 			this .elapsedTimeArray = new Float32Array ();
@@ -238,6 +246,11 @@ function (Fields,
 
 			this .primitiveMode = gl .TRIANGLES;
 
+			// Geometry context
+
+			this .geometryContext .fogCoords             = false;
+			this .geometryContext .textureCoordinateNode = browser .getDefaultTextureCoordinate ();
+
 			// Call order is higly important at startup.
 			this .set_emitter__ ();
 			this .set_enabled__ ();
@@ -250,31 +263,38 @@ function (Fields,
 		},
 		set_bbox__: function ()
 		{
-			if (this .bboxSize_ .getValue () .equals (this .defaultBBoxSize))
+			if (this .bboxSize_ .getValue () .equals (this .getDefaultBBoxSize ()))
 				this .bbox .set ();
 			else
 				this .bbox .set (this .bboxSize_ .getValue (), this .bboxCenter_ .getValue ());
-			
-			this .bboxSize   = this .bbox .size;
-			this .bboxCenter = this .bbox .center;
+
+			this .bboxSize   .assign (this .bbox .size);
+			this .bboxCenter .assign (this .bbox .center);
 		},
 		set_transparent__: function ()
 		{
-			switch (this .geometryType)
+			if (this .getAppearance () .getAlphaMode () === AlphaMode .AUTO)
 			{
-				case POINT:
-				{
-					this .setTransparent (true);
-					break;
-				}
-				default:
+				switch (this .geometryType)
 				{
-					this .setTransparent ((this .getAppearance () && this .getAppearance () .transparent_ .getValue ()) ||
-					                      (this .colorRampNode && this .colorRampNode .isTransparent ()) ||
-					                      (this .geometryType === GEOMETRY && this .geometryNode && this .geometryNode .transparent_ .getValue ()));
-					break;
+					case POINT:
+					{
+						this .setTransparent (true);
+						break;
+					}
+					default:
+					{
+						this .setTransparent (this .getAppearance () .getTransparent () ||
+													 (this .colorRampNode && this .colorRampNode .getTransparent ()) ||
+													 (this .geometryType === GEOMETRY && this .geometryNode && this .geometryNode .getTransparent ()));
+						break;
+					}
 				}
 			}
+			else
+			{
+				this .setTransparent (this .getAppearance () .getTransparent ());
+			}
 		},
 		set_live__: function ()
 		{
@@ -283,7 +303,7 @@ function (Fields,
 				if (this .isActive_ .getValue () && this .maxParticles_ .getValue ())
 				{
 					this .getBrowser () .sensorEvents () .addInterest ("animateParticles", this);
-		
+
 					if (this .pauseTime)
 					{
 						this .creationTime += performance .now () / 1000 - this .pauseTime;
@@ -296,7 +316,7 @@ function (Fields,
 				if (this .isActive_ .getValue () && this .maxParticles_ .getValue ())
 				{
 					this .getBrowser () .sensorEvents () .removeInterest ("animateParticles", this);
-		
+
 					if (this .pauseTime === 0)
 						this .pauseTime = performance .now () / 1000;
 				}
@@ -311,7 +331,7 @@ function (Fields,
 					if (this .isLive () .getValue ())
 					{
 						this .getBrowser () .sensorEvents () .addInterest ("animateParticles", this);
-			
+
 						this .pauseTime = 0;
 					}
 					else
@@ -328,9 +348,9 @@ function (Fields,
 					{
 						this .getBrowser () .sensorEvents () .removeInterest ("animateParticles", this);
 					}
-	
+
 					this .isActive_ = false;
-					
+
 					this .numParticles = 0;
 				}
 			}
@@ -375,9 +395,12 @@ function (Fields,
 					this .colorArray  .fill (1);
 					this .vertexArray .fill (1);
 
+					this .testWireframe = false;
 					this .primitiveMode = gl .POINTS;
 					this .texCoordCount = 0;
 					this .vertexCount   = 1;
+
+					this .geometryContext .geometryType = 0;
 					break;
 				}
 				case LINE:
@@ -397,9 +420,12 @@ function (Fields,
 					this .colorArray  .fill (1);
 					this .vertexArray .fill (1);
 
+					this .testWireframe = false;
 					this .primitiveMode = gl .LINES;
 					this .texCoordCount = 2;
 					this .vertexCount   = 2;
+
+					this .geometryContext .geometryType = 1;
 					break;
 				}
 				case TRIANGLE:
@@ -474,9 +500,12 @@ function (Fields,
 					gl .bindBuffer (gl .ARRAY_BUFFER, this .texCoordBuffers [0]);
 					gl .bufferData (gl .ARRAY_BUFFER, this .texCoordArray, gl .STATIC_DRAW);
 
+					this .testWireframe = true;
 					this .primitiveMode = gl .TRIANGLES;
 					this .texCoordCount = 4;
 					this .vertexCount   = 6;
+
+					this .geometryContext .geometryType = 2;
 					break;
 				}
 				case GEOMETRY:
@@ -499,28 +528,20 @@ function (Fields,
 			{
 				case POINT:
 				{
-					this .shaderGeometryType = 0;
-					this .shaderNode         = this .getBrowser () .getPointShader ();
+					this .shaderNode = this .getBrowser () .getPointShader ();
 					break;
 				}
 				case LINE:
 				{
-					this .shaderGeometryType = 1;
-					this .shaderNode         = this .getBrowser () .getLineShader ();
+					this .shaderNode = this .getBrowser () .getLineShader ();
 					break;
 				}
 				case TRIANGLE:
 				case QUAD:
 				case SPRITE:
-				{
-					this .shaderGeometryType = 3;
-					this .shaderNode         = this .getBrowser () .getDefaultShader ();
-					break;
-				}
 				case GEOMETRY:
 				{
-					this .shaderGeometryType = 3; // determine from geometry node.
-					this .shaderNode         = this .getBrowser () .getDefaultShader ();
+					this .shaderNode = null;
 					break;
 				}
 			}
@@ -540,12 +561,13 @@ function (Fields,
 			for (var i = particles .length, length = maxParticles; i < length; ++ i)
 			{
 				particles [i] = {
+					id: i,
 					life: 1,
 					lifetime: -1,
 					elapsedTime: 0,
 					position: new Vector3 (0, 0, 0),
 					velocity: new Vector3 (0, 0, 0),
-					color:    new Vector4 (1, 1, 1, 1),
+					color: new Vector4 (1, 1, 1, 1),
 					distance: 0,
 				};
 			}
@@ -572,7 +594,7 @@ function (Fields,
 
 			if (! this .emitterNode)
 				this .emitterNode = this .getBrowser () .getDefaultEmitter ();
-				
+
 			this .createParticles = this .createParticles_ .getValue ();
 		},
 		set_physics__: function ()
@@ -675,7 +697,7 @@ function (Fields,
 
 			colorRamp .length = length;
 
-			this .colorMaterial = Boolean (colorKeys .length && this .colorRampNode);
+			this .geometryContext .colorMaterial = !! (colorKeys .length && this .colorRampNode);
 		},
 		set_texCoordRamp__: function ()
 		{
@@ -709,7 +731,7 @@ function (Fields,
 
 			texCoordRamp .length = length;
 
-			this .texCoordAnim = Boolean (texCoordKeys .length && this .texCoordRampNode);
+			this .texCoordAnim = !! (texCoordKeys .length && this .texCoordRampNode);
 		},
 		intersectsBox: function (box, clipPlanes)
 		{
@@ -735,14 +757,14 @@ function (Fields,
 				var
 					now              = performance .now () / 1000,
 					particleLifetime = this .particleLifetime + this .particleLifetime * this .lifetimeVariation;
-	
+
 				if (this .numParticles === 0 || now - this .creationTime > particleLifetime)
 				{
 					this .creationTime    = now;
 					this .numParticles    = this .maxParticles;
 					this .createParticles = this .createParticles_ .getValue ();
 
-					deltaTime = Number .POSITIVE_INFINITY; 
+					deltaTime = Number .POSITIVE_INFINITY;
 				}
 				else
 					this .createParticles = false;
@@ -754,7 +776,7 @@ function (Fields,
 					var
 						now          = performance .now () / 1000,
 						newParticles = Math .max (0, Math .floor ((now - this .creationTime) * this .maxParticles / this .particleLifetime));
-	
+
 					if (newParticles)
 						this .creationTime = now;
 
@@ -839,20 +861,20 @@ function (Fields,
 
 			// Colors
 
-			if (this .colorMaterial)
+			if (this .geometryContext .colorMaterial)
 			{
 				for (var i = 0; i < numParticles; ++ i)
 				{
 					var
 						color = particles [i] .color,
 						i4    = i * 4;
-	
+
 					colorArray [i4]     = color .x;
 					colorArray [i4 + 1] = color .y;
 					colorArray [i4 + 2] = color .z;
 					colorArray [i4 + 3] = color .w;
 				}
-	
+
 				gl .bindBuffer (gl .ARRAY_BUFFER, this .colorBuffer);
 				gl .bufferData (gl .ARRAY_BUFFER, this .colorArray, gl .STATIC_DRAW);
 			}
@@ -903,14 +925,14 @@ function (Fields,
 
 			// Colors
 
-			if (this .colorMaterial)
+			if (this .geometryContext .colorMaterial)
 			{
 				for (var i = 0; i < numParticles; ++ i)
 				{
 					var
 						color = particles [i] .color,
 						i8    = i * 8;
-	
+
 					colorArray [i8]     = color .x;
 					colorArray [i8 + 1] = color .y;
 					colorArray [i8 + 2] = color .z;
@@ -921,7 +943,7 @@ function (Fields,
 					colorArray [i8 + 6] = color .z;
 					colorArray [i8 + 7] = color .w;
 				}
-	
+
 				gl .bindBuffer (gl .ARRAY_BUFFER, this .colorBuffer);
 				gl .bufferData (gl .ARRAY_BUFFER, this .colorArray, gl .STATIC_DRAW);
 			}
@@ -961,7 +983,7 @@ function (Fields,
 				vertexArray [i8]     = x - normal .x;
 				vertexArray [i8 + 1] = y - normal .y;
 				vertexArray [i8 + 2] = z - normal .z;
-											  
+
 				vertexArray [i8 + 4] = x + normal .x;
 				vertexArray [i8 + 5] = y + normal .y;
 				vertexArray [i8 + 6] = z + normal .z;
@@ -994,9 +1016,9 @@ function (Fields,
 					vertexArray      = this .vertexArray,
 					sx1_2            = this .particleSize_ .x / 2,
 					sy1_2            = this .particleSize_ .y / 2;
-	
+
 				// Sort particles
-	
+
 //				if (this .sortParticles) // always false
 //				{
 //					for (var i = 0; i < numParticles; ++ i)
@@ -1004,167 +1026,167 @@ function (Fields,
 //						var particle = particles [i];
 //						particle .distance = modelViewMatrix .getDepth (particle .position);
 //					}
-//					
+//
 //					// Expensisive function!!!
 //					this .particleSorter .sort (0, numParticles);
 //				}
-	
+
 				// Colors
-	
+
 				if (! modelViewMatrix) // if called from animateParticles
 				{
-					if (this .colorMaterial)
+					if (this .geometryContext .colorMaterial)
 					{
 						for (var i = 0; i < maxParticles; ++ i)
 						{
 							var
 								color = particles [i] .color,
 								i24   = i * 24;
-		
+
 							// p4 ------ p3
 							// |       / |
 							// |     /   |
 							// |   /     |
 							// | /       |
 							// p1 ------ p2
-		
+
 							// p1, p2, p3; p1, p3, p4
 							colorArray [i24]     = colorArray [i24 + 4] = colorArray [i24 + 8]  = colorArray [i24 + 12] = colorArray [i24 + 16] = colorArray [i24 + 20] = color .x;
 							colorArray [i24 + 1] = colorArray [i24 + 5] = colorArray [i24 + 9]  = colorArray [i24 + 13] = colorArray [i24 + 17] = colorArray [i24 + 21] = color .y;
 							colorArray [i24 + 2] = colorArray [i24 + 6] = colorArray [i24 + 10] = colorArray [i24 + 14] = colorArray [i24 + 18] = colorArray [i24 + 22] = color .z;
 							colorArray [i24 + 3] = colorArray [i24 + 7] = colorArray [i24 + 11] = colorArray [i24 + 15] = colorArray [i24 + 19] = colorArray [i24 + 23] = color .w;
 						}
-			
+
 						gl .bindBuffer (gl .ARRAY_BUFFER, this .colorBuffer);
 						gl .bufferData (gl .ARRAY_BUFFER, this .colorArray, gl .STATIC_DRAW);
 					}
-		
+
 					if (this .texCoordAnim && this .texCoordArray .length)
 					{
 						var
 							texCoordKeys = this .texCoordKeys,
 							texCoordRamp = this .texCoordRamp;
-		
+
 						var
 							length = texCoordKeys .length,
 							index0 = 0;
-				
+
 						for (var i = 0; i < maxParticles; ++ i)
 						{
 							// Determine index0.
-				
+
 							var
 								particle = particles [i],
 								fraction = particle .elapsedTime / particle .lifetime;
-			
+
 							if (length == 1 || fraction <= texCoordKeys [0])
 							{
 								index0 = 0;
 							}
-							else if (fraction >= texCoordKeys [length - 1])
+							else if (fraction >= texCoordKeys .at (-1))
 							{
 								index0 = length - 2;
 							}
 							else
 							{
 								var index = Algorithm .upperBound (texCoordKeys, 0, length, fraction, Algorithm .less);
-		
+
 								if (index < length)
 									index0 = index - 1;
 								else
 									index0 = 0;
 							}
-		
+
 							// Set texCoord.
-				
+
 							index0 *= this .texCoordCount;
-		
+
 							var
 								texCoord1 = texCoordRamp [index0],
 								texCoord2 = texCoordRamp [index0 + 1],
 								texCoord3 = texCoordRamp [index0 + 2],
 								texCoord4 = texCoordRamp [index0 + 3],
 								i24 = i * 24;
-		
+
 							// p4 ------ p3
 							// |       / |
 							// |     /   |
 							// |   /     |
 							// | /       |
 							// p1 ------ p2
-		
+
 							// p1
 							texCoordArray [i24]     = texCoordArray [i24 + 12] = texCoord1 .x;
 							texCoordArray [i24 + 1] = texCoordArray [i24 + 13] = texCoord1 .y;
 							texCoordArray [i24 + 2] = texCoordArray [i24 + 14] = texCoord1 .z;
 							texCoordArray [i24 + 3] = texCoordArray [i24 + 15] = texCoord1 .w;
-		
+
 							// p2
 							texCoordArray [i24 + 4] = texCoord2 .x;
 							texCoordArray [i24 + 5] = texCoord2 .y;
 							texCoordArray [i24 + 6] = texCoord2 .z;
 							texCoordArray [i24 + 7] = texCoord2 .w;
-		
+
 							// p3
 							texCoordArray [i24 + 8]  = texCoordArray [i24 + 16] = texCoord3 .x;
 							texCoordArray [i24 + 9]  = texCoordArray [i24 + 17] = texCoord3 .y;
 							texCoordArray [i24 + 10] = texCoordArray [i24 + 18] = texCoord3 .z;
 							texCoordArray [i24 + 11] = texCoordArray [i24 + 19] = texCoord3 .w;
-		
+
 							// p4
 							texCoordArray [i24 + 20] = texCoord4 .x;
 							texCoordArray [i24 + 21] = texCoord4 .y;
 							texCoordArray [i24 + 22] = texCoord4 .z;
 							texCoordArray [i24 + 23] = texCoord4 .w;
 						}
-			
+
 						gl .bindBuffer (gl .ARRAY_BUFFER, this .texCoordBuffers [0]);
 						gl .bufferData (gl .ARRAY_BUFFER, this .texCoordArray, gl .STATIC_DRAW);
 					}
 				}
 
 				// Vertices
-	
+
 				if (this .geometryType === SPRITE)
 				{
 					if (modelViewMatrix) // if called from depth or draw
 					{
 						// Normals
-		
+
 						var rotation = this .getScreenAlignedRotation (modelViewMatrix);
-		
+
 						normal
 							.set (rotation [0], rotation [1], rotation [2])
 							.cross (vector .set (rotation [3], rotation [4], rotation [5]))
 							.normalize ();
-		
+
 						var
 							nx = normal .x,
 							ny = normal .y,
 							nz = normal .z;
-		
+
 						for (var i = 0, length = 6 * 3 * maxParticles; i < length; i += 3)
 						{
 							normalArray [i]     = nx;
 							normalArray [i + 1] = ny;
 							normalArray [i + 2] = nz;
 						}
-		
+
 						gl .bindBuffer (gl .ARRAY_BUFFER, this .normalBuffer);
 						gl .bufferData (gl .ARRAY_BUFFER, this .normalArray, gl .STATIC_DRAW);
-		
+
 						// Vertices
-		
+
 						s1 .set (-sx1_2, -sy1_2, 0);
 						s2 .set ( sx1_2, -sy1_2, 0);
 						s3 .set ( sx1_2,  sy1_2, 0);
 						s4 .set (-sx1_2,  sy1_2, 0);
-		
+
 						rotation .multVecMatrix (s1);
 						rotation .multVecMatrix (s2);
 						rotation .multVecMatrix (s3);
 						rotation .multVecMatrix (s4);
-		
+
 						for (var i = 0; i < numParticles; ++ i)
 						{
 							var
@@ -1176,7 +1198,7 @@ function (Fields,
 								i6          = i * 6,
 								i18         = i * 18,
 								i24         = i * 24;
-			
+
 							// p4 ------ p3
 							// |       / |
 							// |     /   |
@@ -1196,23 +1218,23 @@ function (Fields,
 							vertexArray [i24]     = vertexArray [i24 + 12] = x + s1 .x;
 							vertexArray [i24 + 1] = vertexArray [i24 + 13] = y + s1 .y;
 							vertexArray [i24 + 2] = vertexArray [i24 + 14] = z + s1 .z;
-			
+
 							// p2
 							vertexArray [i24 + 4] = x + s2 .x;
 							vertexArray [i24 + 5] = y + s2 .y;
 							vertexArray [i24 + 6] = z + s2 .z;
-			
+
 							// p3
 							vertexArray [i24 + 8]  = vertexArray [i24 + 16] = x + s3 .x;
 							vertexArray [i24 + 9]  = vertexArray [i24 + 17] = y + s3 .y;
 							vertexArray [i24 + 10] = vertexArray [i24 + 18] = z + s3 .z;
-			
+
 							// p4
 							vertexArray [i24 + 20] = x + s4 .x;
 							vertexArray [i24 + 21] = y + s4 .y;
 							vertexArray [i24 + 22] = z + s4 .z;
 						}
-	
+
 						gl .bindBuffer (gl .ARRAY_BUFFER, this .positionBuffer);
 						gl .bufferData (gl .ARRAY_BUFFER, this .positionArray, gl .STATIC_DRAW);
 						gl .bindBuffer (gl .ARRAY_BUFFER, this .elapsedTimeBuffer);
@@ -1238,7 +1260,7 @@ function (Fields,
 								i6          = i * 6,
 								i18         = i * 18,
 								i24         = i * 24;
-			
+
 							// p4 ------ p3
 							// |       / |
 							// |     /   |
@@ -1252,28 +1274,28 @@ function (Fields,
 
 							elapsedTimeArray [i6] = elapsedTimeArray [i6 + 1] = elapsedTimeArray [i6 + 2] = elapsedTimeArray [i6 + 3] = elapsedTimeArray [i6 + 4] = elapsedTimeArray [i6 + 5] = elapsedTime;
 							lifeArray [i6]        = lifeArray [i6 + 1]        = lifeArray [i6 + 2]        = lifeArray [i6 + 3]        = lifeArray [i6 + 4]        = lifeArray [i6 + 5]        = particles [i] .life;
-			
+
 							// p1
 							vertexArray [i24]     = vertexArray [i24 + 12] = x - sx1_2;
 							vertexArray [i24 + 1] = vertexArray [i24 + 13] = y - sy1_2;
 							vertexArray [i24 + 2] = vertexArray [i24 + 14] = z;
-			
+
 							// p2
 							vertexArray [i24 + 4] = x + sx1_2;
 							vertexArray [i24 + 5] = y - sy1_2;
 							vertexArray [i24 + 6] = z;
-			
+
 							// p3
 							vertexArray [i24 + 8]  = vertexArray [i24 + 16] = x + sx1_2;
 							vertexArray [i24 + 9]  = vertexArray [i24 + 17] = y + sy1_2;
 							vertexArray [i24 + 10] = vertexArray [i24 + 18] = z;
-			
+
 							// p4
 							vertexArray [i24 + 20] = x - sx1_2;
 							vertexArray [i24 + 21] = y + sy1_2;
 							vertexArray [i24 + 22] = z;
 						}
-			
+
 						gl .bindBuffer (gl .ARRAY_BUFFER, this .positionBuffer);
 						gl .bufferData (gl .ARRAY_BUFFER, this .positionArray, gl .STATIC_DRAW);
 						gl .bindBuffer (gl .ARRAY_BUFFER, this .elapsedTimeBuffer);
@@ -1301,14 +1323,20 @@ function (Fields,
 				{
 					break;
 				}
+				case TraverseType .PICKING:
+				{
+					break;
+				}
 				case TraverseType .COLLISION:
 				{
 					// TODO: to be implemented.
 					break;
 				}
-				case TraverseType .DEPTH:
+				case TraverseType .SHADOW:
 				{
-					renderObject .addDepthShape (this);
+					if (this .castShadow_ .getValue ())
+						renderObject .addDepthShape (this);
+
 					break;
 				}
 				case TraverseType .DISPLAY:
@@ -1346,20 +1374,23 @@ function (Fields,
 				if (this .numParticles <= 0)
 					return;
 
-				// Setup vertex attributes.
+				if (shaderNode .getValid ())
+				{
+					// Setup vertex attributes.
 
-				shaderNode .enableFloatAttrib (gl, "x3d_ParticleId",          this .idBuffer,          1);
-				shaderNode .enableFloatAttrib (gl, "x3d_ParticlePosition",    this .positionBuffer,    3);
-				shaderNode .enableFloatAttrib (gl, "x3d_ParticleElapsedTime", this .elapsedTimeBuffer, 1);
-				shaderNode .enableFloatAttrib (gl, "x3d_ParticleLife",        this .lifeBuffer,        1);
-				shaderNode .enableVertexAttribute (gl, this .vertexBuffer);
+					shaderNode .enableFloatAttrib (gl, "x3d_ParticleId",          this .idBuffer,          1);
+					shaderNode .enableFloatAttrib (gl, "x3d_ParticlePosition",    this .positionBuffer,    3);
+					shaderNode .enableFloatAttrib (gl, "x3d_ParticleElapsedTime", this .elapsedTimeBuffer, 1);
+					shaderNode .enableFloatAttrib (gl, "x3d_ParticleLife",        this .lifeBuffer,        1);
+					shaderNode .enableVertexAttribute (gl, this .vertexBuffer);
 
-				gl .drawArrays (this .primitiveMode, 0, this .numParticles * this .vertexCount);
+					gl .drawArrays (this .primitiveMode, 0, this .numParticles * this .vertexCount);
 
-				shaderNode .disableFloatAttrib (gl, "x3d_ParticleId");
-				shaderNode .disableFloatAttrib (gl, "x3d_ParticlePosition");
-				shaderNode .disableFloatAttrib (gl, "x3d_ParticleElapsedTime");
-				shaderNode .disableFloatAttrib (gl, "x3d_ParticleLife");
+					shaderNode .disableFloatAttrib (gl, "x3d_ParticleId");
+					shaderNode .disableFloatAttrib (gl, "x3d_ParticlePosition");
+					shaderNode .disableFloatAttrib (gl, "x3d_ParticleElapsedTime");
+					shaderNode .disableFloatAttrib (gl, "x3d_ParticleLife");
+				}
 			}
 		},
 		display: function (gl, context)
@@ -1369,10 +1400,6 @@ function (Fields,
 				if (this .numParticles <= 0)
 					return;
 
-				// Traverse appearance before everything.
-
-				this .getAppearance () .enable (gl, context);
-
 				// Update geometry if SPRITE.
 
 				this .updateGeometry (context .modelViewMatrix);
@@ -1381,92 +1408,83 @@ function (Fields,
 
 				if (this .geometryType === GEOMETRY)
 				{
-					var geometryNode = this .getGeometry ();
+					const geometryNode = this .getGeometry ();
 
 					if (geometryNode)
 						geometryNode .displayParticles (gl, context, this .particles, this .numParticles);
 				}
 				else
 				{
-					var
-						browser    = context .renderer .getBrowser (),
-						shaderNode = context .shaderNode;
-	
-					if (shaderNode === browser .getDefaultShader ())
-						shaderNode = this .shaderNode;
-		
+					const
+						appearanceNode = this .getAppearance (),
+						shaderNode     = appearanceNode .shaderNode || this .shaderNode || appearanceNode .materialNode .getShader (context .browser, context .shadow);
+
 					// Setup shader.
-	
-					context .geometryType  = this .shaderGeometryType;
-					context .colorMaterial = this .colorMaterial;
 
-					shaderNode .enable (gl);
-					shaderNode .setLocalUniforms (gl, context);
-		
-					// Setup vertex attributes.
+					if (shaderNode .getValid ())
+					{
+						context .geometryContext = this .geometryContext;
 
-					shaderNode .enableFloatAttrib (gl, "x3d_ParticleId",          this .idBuffer,          1);
-					shaderNode .enableFloatAttrib (gl, "x3d_ParticlePosition",    this .positionBuffer,    3);
-					shaderNode .enableFloatAttrib (gl, "x3d_ParticleElapsedTime", this .elapsedTimeBuffer, 1);
-					shaderNode .enableFloatAttrib (gl, "x3d_ParticleLife",        this .lifeBuffer,        1);
+						const blendModeNode = appearanceNode .blendModeNode;
 
-					if (this .colorMaterial)
-						shaderNode .enableColorAttribute (gl, this .colorBuffer);
-	
-					if (this .texCoordArray .length)
-						shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers);
-	
-					if (this .normalArray .length)
-						shaderNode .enableNormalAttribute (gl, this .normalBuffer);
-	
-					shaderNode .enableVertexAttribute (gl, this .vertexBuffer);
-	
-					var testWireframe = false;
-	
-					switch (this .geometryType)
-					{
-						case POINT:
-						case LINE:
-							break;
-						case TRIANGLE:
-						case QUAD:
-						case SPRITE:
-							testWireframe = true;
-							break;
-						case GEOMETRY:
-							break;
-					}
-	
-					if (shaderNode .wireframe && testWireframe)
-					{
-						// Wireframes are always solid so only one drawing call is needed.
-		
-						for (var i = 0, length = this .numParticles * this .vertexCount; i < length; i += 3)
-							gl .drawArrays (shaderNode .primitiveMode, i, 3);
-					}
-					else
-					{
-						var positiveScale = Matrix4 .prototype .determinant3 .call (context .modelViewMatrix) > 0;
-			
-						gl .frontFace (positiveScale ? gl .CCW : gl .CW);
-						gl .enable (gl .CULL_FACE);
-						gl .cullFace (gl .BACK);
+						if (blendModeNode)
+							blendModeNode .enable (gl);
 
-						gl .drawArrays (this .primitiveMode, 0, this .numParticles * this .vertexCount);
-					}
-		
-					shaderNode .disableFloatAttrib (gl, "x3d_ParticleId");
-					shaderNode .disableFloatAttrib (gl, "x3d_ParticlePosition");
-					shaderNode .disableFloatAttrib (gl, "x3d_ParticleElapsedTime");
-					shaderNode .disableFloatAttrib (gl, "x3d_ParticleLife");
+						shaderNode .enable (gl);
+						shaderNode .setLocalUniforms (gl, context);
 
-					shaderNode .disableColorAttribute    (gl);
-					shaderNode .disableTexCoordAttribute (gl);
-					shaderNode .disableNormalAttribute   (gl);
-					shaderNode .disable                  (gl);
-				}
+						// Setup vertex attributes.
+
+						shaderNode .enableFloatAttrib (gl, "x3d_ParticleId",          this .idBuffer,          1);
+						shaderNode .enableFloatAttrib (gl, "x3d_ParticlePosition",    this .positionBuffer,    3);
+						shaderNode .enableFloatAttrib (gl, "x3d_ParticleElapsedTime", this .elapsedTimeBuffer, 1);
+						shaderNode .enableFloatAttrib (gl, "x3d_ParticleLife",        this .lifeBuffer,        1);
+
+						if (this .geometryContext .colorMaterial)
+							shaderNode .enableColorAttribute (gl, this .colorBuffer);
+
+						if (this .texCoordArray .length)
+							shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers);
+
+						if (this .normalArray .length)
+							shaderNode .enableNormalAttribute (gl, this .normalBuffer);
+
+						shaderNode .enableVertexAttribute (gl, this .vertexBuffer);
+
+						if (shaderNode .wireframe && this .testWireframe)
+						{
+							// Wireframes are always solid so only one drawing call is needed.
 
-				this .getAppearance () .disable (gl, context);
+							for (var i = 0, length = this .numParticles * this .vertexCount; i < length; i += 3)
+								gl .drawArrays (shaderNode .primitiveMode, i, 3);
+						}
+						else
+						{
+							const positiveScale = Matrix4 .prototype .determinant3 .call (context .modelViewMatrix) > 0;
+
+							gl .frontFace (positiveScale ? gl .CCW : gl .CW);
+							gl .enable (gl .CULL_FACE);
+							gl .cullFace (gl .BACK);
+
+							gl .drawArrays (this .primitiveMode, 0, this .numParticles * this .vertexCount);
+						}
+
+						shaderNode .disableFloatAttrib (gl, "x3d_ParticleId");
+						shaderNode .disableFloatAttrib (gl, "x3d_ParticlePosition");
+						shaderNode .disableFloatAttrib (gl, "x3d_ParticleElapsedTime");
+						shaderNode .disableFloatAttrib (gl, "x3d_ParticleLife");
+
+						shaderNode .disableColorAttribute    (gl);
+						shaderNode .disableTexCoordAttribute (gl);
+						shaderNode .disableNormalAttribute   (gl);
+						shaderNode .disable                  (gl);
+
+						if (blendModeNode)
+							blendModeNode .disable (gl);
+
+						context .geometryContext = null;
+					}
+				}
 			}
 			catch (error)
 			{
@@ -1477,20 +1495,20 @@ function (Fields,
 		getScreenAlignedRotation: function (modelViewMatrix)
 		{
 			invModelViewMatrix .assign (modelViewMatrix) .inverse ();
-		
+
 			invModelViewMatrix .multDirMatrix (billboardToScreen .assign (Vector3 .zAxis));
 			invModelViewMatrix .multDirMatrix (viewerYAxis .assign (Vector3 .yAxis));
-		
+
 			x .assign (viewerYAxis) .cross (billboardToScreen);
 			y .assign (billboardToScreen) .cross (x);
 			var z = billboardToScreen;
-		
+
 			// Compose rotation
-		
+
 			x .normalize ();
 			y .normalize ();
 			z .normalize ();
-		
+
 			return this .rotation .set (x .x, x .y, x .z,
 			                            y .x, y .y, y .z,
 			                            z .x, z .y, z .z);
@@ -1499,5 +1517,3 @@ function (Fields,
 
 	return ParticleSystem;
 });
-
-