x_ite 5.0.3 → 6.1.0

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

@@ -52,69 +52,70 @@ define ([
    "x_ite/Base/X3DFieldDefinition",
    "x_ite/Base/FieldDefinitionArray",
    "x_ite/Components/Shape/X3DShapeNode",
+   "x_ite/Browser/ParticleSystems/GeometryTypes",
+   "x_ite/Rendering/VertexArray",
    "x_ite/Rendering/TraverseType",
    "x_ite/Base/X3DConstants",
    "x_ite/Base/X3DCast",
    "x_ite/Browser/Shape/AlphaMode",
    "standard/Math/Numbers/Vector3",
-   "standard/Math/Numbers/Vector4",
    "standard/Math/Numbers/Matrix4",
    "standard/Math/Numbers/Matrix3",
-   "standard/Math/Algorithms/QuickSort",
-   "standard/Math/Algorithm",
    "standard/Math/Utility/BVH",
 ],
 function (Fields,
           X3DFieldDefinition,
           FieldDefinitionArray,
           X3DShapeNode,
+          GeometryTypes,
+          VertexArray,
           TraverseType,
           X3DConstants,
           X3DCast,
           AlphaMode,
           Vector3,
-          Vector4,
           Matrix4,
           Matrix3,
-          QuickSort,
-          Algorithm,
           BVH)
 {
 "use strict";
 
-   var i = 0;
-
-   const
-      POINT    = i ++,
-      LINE     = i ++,
-      TRIANGLE = i ++,
-      QUAD     = i ++,
-      GEOMETRY = i ++,
-      SPRITE   = i ++;
-
-   const GeometryTypes = {
-      POINT:    POINT,
-      LINE:     LINE,
-      TRIANGLE: TRIANGLE,
-      QUAD:     QUAD,
-      GEOMETRY: GEOMETRY,
-      SPRITE:   SPRITE,
-   };
-
-   const
-      invModelViewMatrix = new Matrix4 (),
-      billboardToScreen  = new Vector3 (0, 0, 0),
-      viewerYAxis        = new Vector3 (0, 0, 0),
-      vector             = new Vector3 (0, 0, 0),
-      normal             = new Vector3 (0, 0, 0),
-      s1                 = new Vector3 (0, 0, 0),
-      s2                 = new Vector3 (0, 0, 0),
-      s3                 = new Vector3 (0, 0, 0),
-      s4                 = new Vector3 (0, 0, 0),
-      x                  = new Vector3 (0, 0, 0),
-      y                  = new Vector3 (0, 0, 0);
-
-   function compareDistance (lhs, rhs) { return lhs .distance < rhs .distance; }
+   const PointGeometry = new Float32Array ([0, 0, 0, 1]);
+
+   const LineGeometry = new Float32Array ([
+      // TexCoords
+      0, 0, 0, 1,
+      1, 0, 0, 1,
+      // Vertices
+      0, 0, -0.5, 1,
+      0, 0,  0.5, 1,
+   ]);
+
+   // p4 ------ p3
+   // |       / |
+   // |     /   |
+   // |   /     |
+   // | /       |
+   // p1 ------ p2
+
+   const QuadGeometry = new Float32Array ([
+      // TexCoords
+      0, 0, 0, 1,
+      1, 0, 0, 1,
+      1, 1, 0, 1,
+      0, 0, 0, 1,
+      1, 1, 0, 1,
+      0, 1, 0, 1,
+      // Normal
+      0, 0, 1,
+      // Vertices
+      -0.5, -0.5, 0, 1,
+       0.5, -0.5, 0, 1,
+       0.5,  0.5, 0, 1,
+      -0.5, -0.5, 0, 1,
+       0.5,  0.5, 0, 1,
+      -0.5,  0.5, 0, 1,
+   ]);
 
    function ParticleSystem (executionContext)
    {
@@ -124,39 +125,25 @@ function (Fields,
 
       this ._particleSize .setUnit ("length");
 
-      this .createParticles          = true;
-      this .particles                = [ ];
-      this .velocities               = [ ];
-      this .speeds                   = [ ];
-      this .turbulences              = [ ];
-      this .geometryType             = POINT;
       this .maxParticles             = 0;
       this .numParticles             = 0;
-      this .particleLifetime         = 0;
-      this .lifetimeVariation        = 0;
-      this .emitterNode              = null;
       this .forcePhysicsModelNodes   = [ ];
+      this .forces                   = new Float32Array (4);
       this .boundedPhysicsModelNodes = [ ];
       this .boundedNormals           = [ ];
       this .boundedVertices          = [ ];
-      this .boundedVolume            = null;
+      this .colorRamp                = new Float32Array ();
+      this .texCoordRamp             = new Float32Array ();
+      this .geometryContext          = { };
       this .creationTime             = 0;
       this .pauseTime                = 0;
       this .deltaTime                = 0;
-      this .numForces                = 0;
-      this .colorKeys                = [ ];
-      this .colorRamppNode           = null;
-      this .colorRamp                = [ ];
-      this .texCoordKeys             = [ ];
-      this .texCoordRampNode         = null;
-      this .texCoordRamp             = [ ];
-      this .texCoordAnim             = false;
-      this .vertexCount              = 0;
-      this .shaderNode               = null;
-      this .rotation                 = new Matrix3 ();
-      this .particleSorter           = new QuickSort (this .particles, compareDistance);
-      this .sortParticles            = false;
-      this .geometryContext          = { };
+      this .particleStride           = Float32Array .BYTES_PER_ELEMENT * 7 * 4; // 7 x vec4
+      this .particleOffsets          = Array .from ({length: 7}, (_, i) => Float32Array .BYTES_PER_ELEMENT * 4 * i); // i x vec4
+      this .particleOffset           = this .particleOffsets [0];
+      this .colorOffset              = this .particleOffsets [1];
+      this .matrixOffset             = this .particleOffsets [3];
+      this .texCoordOffset           = 0;
    }
 
    ParticleSystem .prototype = Object .assign (Object .create (X3DShapeNode .prototype),
@@ -206,6 +193,9 @@ function (Fields,
             browser = this .getBrowser (),
             gl      = browser .getContext ();
 
+         if (browser .getContext () .getVersion () < 2)
+            return;
+
          this .isLive () .addInterest ("set_live__", this);
 
          browser .getBrowserOptions () ._Shading .addInterest ("set_shader__", this);
@@ -213,6 +203,7 @@ function (Fields,
          this ._enabled           .addInterest ("set_enabled__",           this);
          this ._createParticles   .addInterest ("set_createParticles__",   this);
          this ._geometryType      .addInterest ("set_geometryType__",      this);
+         this ._geometryType      .addInterest ("set_texCoord__",          this);
          this ._maxParticles      .addInterest ("set_enabled__",           this);
          this ._particleLifetime  .addInterest ("set_particleLifetime__",  this);
          this ._lifetimeVariation .addInterest ("set_lifetimeVariation__", this);
@@ -223,38 +214,42 @@ function (Fields,
          this ._texCoordKey       .addInterest ("set_texCoord__",          this);
          this ._texCoordRamp      .addInterest ("set_texCoordRamp__",      this);
 
-         this .idBuffer           = gl .createBuffer ();
-         this .positionBuffer     = gl .createBuffer ();
-         this .elapsedTimeBuffer  = gl .createBuffer ();
-         this .lifeBuffer         = gl .createBuffer ();
-         this .colorBuffer        = gl .createBuffer ();
-         this .texCoordBuffers    = [ gl .createBuffer () ];
-         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 ();
-         this .lifeArray        = new Float32Array ();
-         this .colorArray       = new Float32Array ();
-         this .texCoordArray    = new Float32Array ();
-         this .normalArray      = new Float32Array ();
-         this .vertexArray      = new Float32Array ();
-
-         this .primitiveMode = gl .TRIANGLES;
+         // Create particles stuff.
+
+         this .inputParticles  = this .createBuffer ();
+         this .outputParticles = this .createBuffer ();
+
+         this .inputParticles . emitterArrayObject = new VertexArray ();
+         this .inputParticles . vertexArrayObject  = new VertexArray ();
+         this .inputParticles  .shadowArrayObject  = new VertexArray ();
+         this .outputParticles .emitterArrayObject = new VertexArray ();
+         this .outputParticles .vertexArrayObject  = new VertexArray ();
+         this .outputParticles .shadowArrayObject  = new VertexArray ();
+
+         // Create forces stuff.
+
+         this .forcesTexture       = this .createTexture ();
+         this .boundedTexture      = this .createTexture ();
+         this .colorRampTexture    = this .createTexture ();
+         this .texCoordRampTexture = this .createTexture ();
+
+         // Create GL stuff.
+
+         this .geometryBuffer  = this .createBuffer ();
+         this .texCoordBuffers = new Array (browser .getMaxTextures ()) .fill (this .geometryBuffer);
 
          // Geometry context
 
-         this .geometryContext .fogCoords                 = false;
+         this .geometryContext .fogCoords                = false;
          this .geometryContext .textureCoordinateNode    = browser .getDefaultTextureCoordinate ();
          this .geometryContext .textureCoordinateMapping = new Map ();
 
-         // Call order is higly important at startup.
+         // Init fields.
+         // Call order is very important at startup.
+
          this .set_emitter__ ();
          this .set_enabled__ ();
+         this .set_geometryType__ ();
          this .set_createParticles__ ();
          this .set_particleLifetime__ ();
          this .set_lifetimeVariation__ ();
@@ -278,7 +273,7 @@ function (Fields,
          {
             switch (this .geometryType)
             {
-               case POINT:
+               case GeometryTypes .POINT:
                {
                   this .setTransparent (true);
                   break;
@@ -287,7 +282,7 @@ function (Fields,
                {
                   this .setTransparent (this .getAppearance () .getTransparent () ||
                                         (this .colorRampNode && this .colorRampNode .getTransparent ()) ||
-                                        (this .geometryType === GEOMETRY && this .geometryNode && this .geometryNode .getTransparent ()));
+                                        (this .geometryType === GeometryTypes .GEOMETRY && this .geometryNode && this .geometryNode .getTransparent ()));
                   break;
                }
             }
@@ -327,7 +322,7 @@ function (Fields,
       {
          if (this ._enabled .getValue () && this ._maxParticles .getValue ())
          {
-            if (! this ._isActive .getValue ())
+            if (!this ._isActive .getValue ())
             {
                if (this .isLive () .getValue ())
                {
@@ -339,6 +334,8 @@ function (Fields,
                   this .pauseTime = performance .now () / 1000;
 
                this ._isActive = true;
+
+               delete this .traverse;
             }
          }
          else
@@ -353,6 +350,7 @@ function (Fields,
                this ._isActive = false;
 
                this .numParticles = 0;
+               this .traverse     = Function .prototype;
             }
          }
 
@@ -364,161 +362,83 @@ function (Fields,
       },
       set_geometryType__: function ()
       {
-         var
-            gl           = this .getBrowser () .getContext (),
-            maxParticles = this .maxParticles;
-
-         // geometryType
+         const
+            browser = this .getBrowser (),
+            gl      = browser .getContext ();
 
-         this .geometryType = GeometryTypes [this ._geometryType .getValue ()];
+         // Set geometryType.
 
-         if (! this .geometryType)
-            this .geometryType = POINT;
+         this .geometryType = GeometryTypes .hasOwnProperty (this ._geometryType .getValue ())
+            ? GeometryTypes [this ._geometryType .getValue ()]
+            : GeometryTypes .QUAD;
 
-         // Create buffers
+         // Create buffers.
 
          switch (this .geometryType)
          {
-            case POINT:
+            case GeometryTypes .POINT:
             {
-               this .idArray          = new Float32Array (maxParticles);
-               this .positionArray    = new Float32Array (3 * maxParticles);
-               this .elapsedTimeArray = new Float32Array (maxParticles);
-               this .lifeArray        = new Float32Array (maxParticles);
-               this .colorArray       = new Float32Array (4 * maxParticles);
-               this .texCoordArray    = new Float32Array ();
-               this .normalArray      = new Float32Array ();
-               this .vertexArray      = new Float32Array (4 * maxParticles);
-
-               for (var i = 0, a = this .idArray, l = a .length; i < l; ++ i)
-                  a [i] = i;
-
-               this .colorArray  .fill (1);
-               this .vertexArray .fill (1);
-
-               this .testWireframe = false;
-               this .primitiveMode = gl .POINTS;
+               this .geometryContext .geometryType = 0;
+
                this .texCoordCount = 0;
                this .vertexCount   = 1;
+               this .hasNormals    = false;
+               this .primitiveMode = gl .POINTS;
+
+               this .verticesOffset = 0;
+
+               gl .bindBuffer (gl .ARRAY_BUFFER, this .geometryBuffer);
+               gl .bufferData (gl .ARRAY_BUFFER, PointGeometry, gl .DYNAMIC_DRAW);
 
-               this .geometryContext .geometryType = 0;
                break;
             }
-            case LINE:
+            case GeometryTypes .LINE:
             {
-               this .idArray          = new Float32Array (2 * maxParticles);
-               this .positionArray    = new Float32Array (2 * 3 * maxParticles);
-               this .elapsedTimeArray = new Float32Array (2 * maxParticles);
-               this .lifeArray        = new Float32Array (2 * maxParticles);
-               this .colorArray       = new Float32Array (2 * 4 * maxParticles);
-               this .texCoordArray    = new Float32Array ();
-               this .normalArray      = new Float32Array ();
-               this .vertexArray      = new Float32Array (2 * 4 * maxParticles);
-
-               for (var i = 0, a = this .idArray, l = a .length; i < l; ++ i)
-                  a [i] = Math .floor (i / 2);
-
-               this .colorArray  .fill (1);
-               this .vertexArray .fill (1);
-
-               this .testWireframe = false;
-               this .primitiveMode = gl .LINES;
+               this .geometryContext .geometryType = 1;
+
                this .texCoordCount = 2;
                this .vertexCount   = 2;
+               this .hasNormals    = false;
+               this .primitiveMode = gl .LINES;
+
+               this .texCoordsOffset = 0;
+               this .verticesOffset  = Float32Array .BYTES_PER_ELEMENT * 8;
+
+               gl .bindBuffer (gl .ARRAY_BUFFER, this .geometryBuffer);
+               gl .bufferData (gl .ARRAY_BUFFER, LineGeometry, gl .DYNAMIC_DRAW);
 
-               this .geometryContext .geometryType = 1;
                break;
             }
-            case TRIANGLE:
-            case QUAD:
-            case SPRITE:
+            case GeometryTypes .TRIANGLE:
+            case GeometryTypes .QUAD:
+            case GeometryTypes .SPRITE:
             {
-               this .idArray          = new Float32Array (6 * maxParticles);
-               this .positionArray    = new Float32Array (6 * 3 * maxParticles);
-               this .elapsedTimeArray = new Float32Array (6 * maxParticles);
-               this .lifeArray        = new Float32Array (6 * maxParticles);
-               this .colorArray       = new Float32Array (6 * 4 * maxParticles);
-               this .texCoordArray    = new Float32Array (6 * 4 * maxParticles);
-               this .normalArray      = new Float32Array (6 * 3 * maxParticles);
-               this .vertexArray      = new Float32Array (6 * 4 * maxParticles);
-
-               for (var i = 0, a = this .idArray, l = a .length; i < l; ++ i)
-                  a [i] = Math .floor (i / 6);
-
-               this .colorArray  .fill (1);
-               this .vertexArray .fill (1);
-
-               var
-                  texCoordArray = this .texCoordArray,
-                  normalArray   = this .normalArray;
-
-               for (var i = 0, length = 6 * 3 * maxParticles; i < length; i += 3)
-               {
-                  normalArray [i]     = 0;
-                  normalArray [i + 1] = 0;
-                  normalArray [i + 2] = 1;
-               }
-
-               gl .bindBuffer (gl .ARRAY_BUFFER, this .normalBuffer);
-               gl .bufferData (gl .ARRAY_BUFFER, this .normalArray, gl .STATIC_DRAW);
-
-               for (var i = 0; i < maxParticles; ++ i)
-               {
-                  var i24 = i * 24;
-
-                  // p4 ------ p3
-                  // |       / |
-                  // |     /   |
-                  // |   /     |
-                  // | /       |
-                  // p1 ------ p2
-
-                  // p1
-                  texCoordArray [i24]     = texCoordArray [i24 + 12] = 0;
-                  texCoordArray [i24 + 1] = texCoordArray [i24 + 13] = 0;
-                  texCoordArray [i24 + 2] = texCoordArray [i24 + 14] = 0;
-                  texCoordArray [i24 + 3] = texCoordArray [i24 + 15] = 1;
-
-                  // p2
-                  texCoordArray [i24 + 4] = 1;
-                  texCoordArray [i24 + 5] = 0;
-                  texCoordArray [i24 + 6] = 0;
-                  texCoordArray [i24 + 7] = 1;
-
-                  // p3
-                  texCoordArray [i24 + 8]  = texCoordArray [i24 + 16] = 1;
-                  texCoordArray [i24 + 9]  = texCoordArray [i24 + 17] = 1;
-                  texCoordArray [i24 + 10] = texCoordArray [i24 + 18] = 0;
-                  texCoordArray [i24 + 11] = texCoordArray [i24 + 19] = 1;
-
-                  // p4
-                  texCoordArray [i24 + 20] = 0;
-                  texCoordArray [i24 + 21] = 1;
-                  texCoordArray [i24 + 22] = 0;
-                  texCoordArray [i24 + 23] = 1;
-               }
-
-               gl .bindBuffer (gl .ARRAY_BUFFER, this .texCoordBuffers [0]);
-               gl .bufferData (gl .ARRAY_BUFFER, this .texCoordArray, gl .STATIC_DRAW);
+               this .geometryContext .geometryType = 2;
 
-               this .testWireframe = true;
-               this .primitiveMode = gl .TRIANGLES;
                this .texCoordCount = 4;
                this .vertexCount   = 6;
+               this .hasNormals    = true;
+               this .primitiveMode = gl .TRIANGLES;
+
+               this .texCoordsOffset = 0;
+               this .normalOffset    = Float32Array .BYTES_PER_ELEMENT * 24;
+               this .verticesOffset  = Float32Array .BYTES_PER_ELEMENT * 27;
+
+               gl .bindBuffer (gl .ARRAY_BUFFER, this .geometryBuffer);
+               gl .bufferData (gl .ARRAY_BUFFER, QuadGeometry, gl .DYNAMIC_DRAW);
 
-               this .geometryContext .geometryType = 2;
                break;
             }
-            case GEOMETRY:
+            case GeometryTypes .GEOMETRY:
             {
                this .texCoordCount = 0;
                this .vertexCount   = 0;
+
                break;
             }
          }
 
-         gl .bindBuffer (gl .ARRAY_BUFFER, this .idBuffer);
-         gl .bufferData (gl .ARRAY_BUFFER, this .idArray, gl .STATIC_DRAW);
+         this .updateVertexArrays ();
 
          this .set_shader__ ();
          this .set_transparent__ ();
@@ -527,20 +447,17 @@ function (Fields,
       {
          switch (this .geometryType)
          {
-            case POINT:
+            case GeometryTypes .POINT:
             {
                this .shaderNode = this .getBrowser () .getPointShader ();
                break;
             }
-            case LINE:
+            case GeometryTypes .LINE:
             {
                this .shaderNode = this .getBrowser () .getLineShader ();
                break;
             }
-            case TRIANGLE:
-            case QUAD:
-            case SPRITE:
-            case GEOMETRY:
+            default:
             {
                this .shaderNode = null;
                break;
@@ -549,37 +466,18 @@ function (Fields,
       },
       set_maxParticles__: function ()
       {
-         var
-            particles    = this .particles,
-            maxParticles = Math .max (0, this ._maxParticles .getValue ());
-
-         for (var i = this .numParticles, length = Math .min (particles .length, maxParticles); i < length; ++ i)
-         {
-            particles [i] .life     = 1;
-            particles [i] .lifetime = -1;
-         }
-
-         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),
-               distance: 0,
-            };
-         }
+         const
+            lastNumParticles = this .numParticles,
+            maxParticles     = Math .max (0, this ._maxParticles .getValue ());
 
          this .maxParticles = maxParticles;
-         this .numParticles = Math .min (this .numParticles, maxParticles);
+         this .numParticles = Math .min (lastNumParticles, maxParticles);
 
-         if (! this .emitterNode .isExplosive ())
+         if (!this .emitterNode .isExplosive ())
             this .creationTime = performance .now () / 1000;
 
-         this .set_geometryType__ ();
+         this .resizeBuffers (lastNumParticles);
+         this .updateVertexArrays ();
       },
       set_particleLifetime__: function ()
       {
@@ -593,33 +491,33 @@ function (Fields,
       {
          this .emitterNode = X3DCast (X3DConstants .X3DParticleEmitterNode, this ._emitter);
 
-         if (! this .emitterNode)
+         if (!this .emitterNode)
             this .emitterNode = this .getBrowser () .getDefaultEmitter ();
 
          this .createParticles = this ._createParticles .getValue ();
       },
       set_physics__: function ()
       {
-         var
+         const
             physics                  = this ._physics .getValue (),
             forcePhysicsModelNodes   = this .forcePhysicsModelNodes,
             boundedPhysicsModelNodes = this .boundedPhysicsModelNodes;
 
-         for (var i = 0, length = boundedPhysicsModelNodes .length; i < length; ++ i)
+         for (let i = 0, length = boundedPhysicsModelNodes .length; i < length; ++ i)
             boundedPhysicsModelNodes [i] .removeInterest ("set_boundedPhysics__", this);
 
          forcePhysicsModelNodes   .length = 0;
          boundedPhysicsModelNodes .length = 0;
 
-         for (var i = 0, length = physics .length; i < length; ++ i)
+         for (let i = 0, length = physics .length; i < length; ++ i)
          {
             try
             {
-               var
+               const
                   innerNode = physics [i] .getValue () .getInnerNode (),
                   type      = innerNode .getType ();
 
-               for (var t = type .length - 1; t >= 0; -- t)
+               for (let t = type .length - 1; t >= 0; -- t)
                {
                   switch (type [t])
                   {
@@ -650,7 +548,8 @@ function (Fields,
       },
       set_boundedPhysics__: function ()
       {
-         var
+         const
+            gl                       = this .getBrowser () .getContext (),
             boundedPhysicsModelNodes = this .boundedPhysicsModelNodes,
             boundedNormals           = this .boundedNormals,
             boundedVertices          = this .boundedVertices;
@@ -658,13 +557,43 @@ function (Fields,
          boundedNormals  .length = 0;
          boundedVertices .length = 0;
 
-         for (var i = 0, length = boundedPhysicsModelNodes .length; i < length; ++ i)
+         for (let i = 0, length = boundedPhysicsModelNodes .length; i < length; ++ i)
          {
             boundedPhysicsModelNodes [i] .addGeometry (boundedNormals, boundedVertices);
          }
 
-         this .boundedVolume = new BVH (boundedVertices, boundedNormals);
-      },
+         // Texture
+
+         const
+            boundedHierarchy       = new BVH (boundedVertices, boundedNormals) .toArray ([ ]),
+            numBoundedVertices     = boundedVertices .length / 4,
+            numBoundedNormals      = boundedNormals .length / 3,
+            boundedHierarchyLength = boundedHierarchy .length / 4,
+            boundedArraySize       = Math .ceil (Math .sqrt (numBoundedVertices + numBoundedNormals + boundedHierarchyLength)),
+            boundedArray           = new Float32Array (boundedArraySize * boundedArraySize * 4);
+
+         this .boundedVerticesIndex  = 0;
+         this .boundedNormalsIndex   = numBoundedVertices;
+         this .boundedHierarchyIndex = this .boundedNormalsIndex + numBoundedNormals;
+         this .boundedHierarchyRoot  = this .boundedHierarchyIndex + boundedHierarchyLength - 1;
+
+         boundedArray .set (boundedVertices);
+
+         for (let s = this .boundedNormalsIndex * 4, n = 0, l = boundedNormals .length; n < l; s += 4, n += 3)
+         {
+            boundedArray [s + 0] = boundedNormals [n + 0];
+            boundedArray [s + 1] = boundedNormals [n + 1];
+            boundedArray [s + 2] = boundedNormals [n + 2];
+         }
+
+         boundedArray .set (boundedHierarchy, this .boundedHierarchyIndex * 4);
+
+         if (boundedArraySize)
+         {
+            gl .bindTexture (gl .TEXTURE_2D, this .boundedTexture);
+            gl .texImage2D (gl .TEXTURE_2D, 0, gl .RGBA32F, boundedArraySize, boundedArraySize, 0, gl .RGBA, gl .FLOAT, boundedArray);
+         }
+       },
       set_colorRamp__: function ()
       {
          if (this .colorRampNode)
@@ -680,25 +609,35 @@ function (Fields,
       },
       set_color__: function ()
       {
-         var
-            colorKey  = this ._colorKey,
-            colorKeys = this .colorKeys,
-            colorRamp = this .colorRamp;
+         const
+            gl           = this .getBrowser () .getContext (),
+            colorKey     = this ._colorKey,
+            numColors    = colorKey .length,
+            textureSize  = Math .ceil (Math .sqrt (numColors * 2));
 
-         for (var i = 0, length = colorKey .length; i < length; ++ i)
-            colorKeys [i] = colorKey [i];
+         let colorRamp = this .colorRamp;
 
-         colorKeys .length = length;
+         if (textureSize * textureSize * 4 > colorRamp .length)
+            colorRamp = this .colorRamp = new Float32Array (textureSize * textureSize * 4);
+
+         for (let i = 0; i < numColors; ++ i)
+            colorRamp [i * 4] = colorKey [i];
 
          if (this .colorRampNode)
-            this .colorRampNode .getVectors (this .colorRamp);
+            colorRamp .set (this .colorRampNode .addColors ([ ], numColors) .slice (0, numColors * 4), numColors * 4);
+         else
+            colorRamp .fill (1, numColors * 4);
 
-         for (var i = colorRamp .length, length = colorKey .length; i < length; ++ i)
-            colorRamp [i] = new Vector4 (1, 1, 1, 1);
+         if (textureSize)
+         {
+            gl .bindTexture (gl .TEXTURE_2D, this .colorRampTexture);
+            gl .texImage2D (gl .TEXTURE_2D, 0, gl .RGBA32F, textureSize, textureSize, 0, gl .RGBA, gl .FLOAT, colorRamp);
+        }
 
-         colorRamp .length = length;
+         this .numColors                      = numColors;
+         this .geometryContext .colorMaterial = !! (numColors && this .colorRampNode);
 
-         this .geometryContext .colorMaterial = !! (colorKeys .length && this .colorRampNode);
+         this .updateVertexArrays ();
       },
       set_texCoordRamp__: function ()
       {
@@ -714,48 +653,117 @@ function (Fields,
       },
       set_texCoord__: function ()
       {
-         var
+         const
+            gl           = this .getBrowser () .getContext (),
             texCoordKey  = this ._texCoordKey,
-            texCoordKeys = this .texCoordKeys,
-            texCoordRamp = this .texCoordRamp;
+            numTexCoords = texCoordKey .length,
+            textureSize  = Math .ceil (Math .sqrt (numTexCoords + numTexCoords * this .texCoordCount));
+
+         let texCoordRamp = this .texCoordRamp;
 
-         for (var i = 0, length = texCoordKey .length; i < length; ++ i)
-            texCoordKeys [i] = texCoordKey [i];
+         if (textureSize * textureSize * 4 > texCoordRamp .length)
+            texCoordRamp = this .texCoordRamp = new Float32Array (textureSize * textureSize * 4);
+         else
+            texCoordRamp .fill (0);
 
-         texCoordKeys .length = length;
+         for (let i = 0; i < numTexCoords; ++ i)
+            texCoordRamp [i * 4] = texCoordKey [i];
 
          if (this .texCoordRampNode)
-            this .texCoordRampNode .getTexCoord (texCoordRamp);
+            texCoordRamp .set (this .texCoordRampNode .getTexCoord ([ ]) .slice (0, numTexCoords * this .texCoordCount * 4), numTexCoords * 4);
+
+         if (textureSize)
+         {
+            gl .bindTexture (gl .TEXTURE_2D, this .texCoordRampTexture);
+            gl .texImage2D (gl .TEXTURE_2D, 0, gl .RGBA32F, textureSize, textureSize, 0, gl .RGBA, gl .FLOAT, texCoordRamp);
+         }
+
+         this .numTexCoords = this .texCoordRampNode ? numTexCoords : 0;
+
+         this .updateVertexArrays ();
+      },
+      updateVertexArrays: function ()
+      {
+         this .inputParticles  .vertexArrayObject  .update ();
+         this .inputParticles  .shadowArrayObject  .update ();
+         this .inputParticles  .emitterArrayObject .update ();
+         this .outputParticles .vertexArrayObject  .update ();
+         this .outputParticles .shadowArrayObject  .update ();
+         this .outputParticles .emitterArrayObject .update ();
+      },
+      createTexture: function ()
+      {
+         const
+            gl      = this .getBrowser () .getContext (),
+            texture = gl .createTexture ();
+
+         gl .bindTexture (gl .TEXTURE_2D, texture);
 
-         for (var i = texCoordRamp .length, length = texCoordKey .length * this .texCoordCount; i < length; ++ i)
-            texCoordRamp [i] = new Vector4 (0, 0, 0, 0);
+         gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_WRAP_S,     gl .CLAMP_TO_EDGE);
+         gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_WRAP_T,     gl .CLAMP_TO_EDGE);
+         gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_MAG_FILTER, gl .NEAREST);
+         gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_MIN_FILTER, gl .NEAREST);
 
-         texCoordRamp .length = length;
+         gl .texImage2D (gl .TEXTURE_2D, 0, gl .RGBA32F, 1, 1, 0, gl .RGBA, gl .FLOAT, new Float32Array (4));
 
-         this .texCoordAnim = !! (texCoordKeys .length && this .texCoordRampNode);
+         return texture;
       },
-      intersectsBox: function (box, clipPlanes)
+      createBuffer: function ()
       {
-         // TODO: implement me.
+         const
+            gl     = this .getBrowser () .getContext (),
+            buffer = gl .createBuffer ();
+
+         gl .bindBuffer (gl .ARRAY_BUFFER, buffer);
+         gl .bufferData (gl .ARRAY_BUFFER, new Uint32Array (), gl .DYNAMIC_DRAW);
+
+         return buffer;
+      },
+      resizeBuffers: function (lastNumParticles)
+      {
+         const
+            gl              = this .getBrowser () .getContext (),
+            maxParticles    = this .maxParticles,
+            particleStride  = this .particleStride,
+            outputParticles = Object .assign (gl .createBuffer (), this .outputParticles),
+            data            = new Uint8Array (maxParticles * particleStride);
+
+         // Resize input buffer.
+
+         gl .bindBuffer (gl .ARRAY_BUFFER, this .inputParticles);
+         gl .bufferData (gl .ARRAY_BUFFER, data, gl .DYNAMIC_DRAW);
+
+         // Resize output buffer.
+
+         gl .bindBuffer (gl .COPY_READ_BUFFER, this .outputParticles);
+         gl .bindBuffer (gl .ARRAY_BUFFER, outputParticles);
+         gl .bufferData (gl .ARRAY_BUFFER, data, gl .DYNAMIC_DRAW);
+         gl .copyBufferSubData (gl .COPY_READ_BUFFER, gl .ARRAY_BUFFER, 0, 0, Math .min (maxParticles * particleStride, lastNumParticles * particleStride));
+         gl .deleteBuffer (this .outputParticles);
+
+         this .outputParticles = outputParticles;
       },
       animateParticles: function ()
       {
-         var emitterNode = this .emitterNode;
+         const
+            browser     = this .getBrowser (),
+            gl          = browser .getContext (),
+            emitterNode = this .emitterNode;
 
          // Determine delta time
 
-         var
-            DELAY = 15, // Delay in frames when dt full applys.
+         const
+            DELAY = 15, // Delay in frames when dt fully applies.
             dt    = 1 / Math .max (10, this .getBrowser () .getCurrentFrameRate ());
 
-         // var deltaTime is only for the emitter, this.deltaTime is for the forces.
-         var deltaTime = this .deltaTime = ((DELAY - 1) * this .deltaTime + dt) / DELAY; // Moving average about DELAY frames.
+         // let deltaTime is only for the emitter, this.deltaTime is for the forces.
+         let deltaTime = this .deltaTime = ((DELAY - 1) * this .deltaTime + dt) / DELAY; // Moving average about DELAY frames.
 
          // Determine numParticles
 
          if (emitterNode .isExplosive ())
          {
-            var
+            const
                now              = performance .now () / 1000,
                particleLifetime = this .particleLifetime + this .particleLifetime * this .lifetimeVariation;
 
@@ -774,7 +782,7 @@ function (Fields,
          {
             if (this .numParticles < this .maxParticles)
             {
-               var
+               const
                   now          = performance .now () / 1000,
                   newParticles = Math .max (0, Math .floor ((now - this .creationTime) * this .maxParticles / this .particleLifetime));
 
@@ -789,548 +797,106 @@ function (Fields,
 
          if (emitterNode .getMass ())
          {
-            var
-               forcePhysicsModelNodes = this .forcePhysicsModelNodes,
-               velocities             = this .velocities,
-               speeds                 = this .speeds,
-               turbulences            = this .turbulences,
-               deltaMass              = this .deltaTime / emitterNode .getMass ();
+            const forcePhysicsModelNodes = this .forcePhysicsModelNodes;
 
-            // Collect forces in velocities and collect turbulences.
+            let
+               numForces  = forcePhysicsModelNodes .length,
+               forces     = this .forces,
+               timeByMass = deltaTime / emitterNode .getMass ();
 
-            for (var i = velocities .length, length = forcePhysicsModelNodes .length; i < length; ++ i)
-               velocities [i] = new Vector3 (0, 0, 0);
+            // Collect forces in velocities and collect turbulences.
 
-            for (var i = 0, length = forcePhysicsModelNodes .length; i < length; ++ i)
-               forcePhysicsModelNodes [i] .addForce (i, emitterNode, velocities, turbulences);
+            if (numForces * 4 > forces .length)
+               forces = this .forces = new Float32Array (numForces * 4);
 
-            // Determine velocities from forces and determine speed.
+            let disabledForces = 0;
 
-            for (var i = 0, length = velocities .length; i < length; ++ i)
+            for (let i = 0; i < numForces; ++ i)
             {
-               velocities [i] .multiply (deltaMass);
-               speeds [i] = velocities [i] .abs ();
+               disabledForces += !forcePhysicsModelNodes [i] .addForce (i - disabledForces, emitterNode, timeByMass, forces);
             }
 
-            this .numForces = length;
-         }
-         else
-         {
-            this .numForces = 0;
-         }
+            this .numForces = numForces -= disabledForces;
 
-         // Determine particle position, velocity and colors
-
-         emitterNode .animate (this, deltaTime);
-
-         this .updateGeometry (null);
-
-         this .getBrowser () .addBrowserEvent ();
-      },
-      updateGeometry: function (modelViewMatrix)
-      {
-         switch (this .geometryType)
-         {
-            case POINT:
-               if (! modelViewMatrix)
-                  this .updatePoint ();
-               break;
-            case LINE:
-               if (! modelViewMatrix)
-                  this .updateLine ();
-               break;
-            case TRIANGLE:
-            case QUAD:
-            case SPRITE:
-               this .updateQuad (modelViewMatrix);
-               break;
-            case GEOMETRY:
-               break;
-         }
-      },
-      updatePoint: function ()
-      {
-         var
-            gl               = this .getBrowser () .getContext (),
-            particles        = this .particles,
-            numParticles     = this .numParticles,
-            positionArray    = this .positionArray,
-            elapsedTimeArray = this .elapsedTimeArray,
-            lifeArray        = this .lifeArray,
-            colorArray       = this .colorArray,
-            vertexArray      = this .vertexArray;
-
-         // Colors
-
-         if (this .geometryContext .colorMaterial)
-         {
-            for (var i = 0; i < numParticles; ++ i)
+            if (numForces)
             {
-               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 .bindTexture (gl .TEXTURE_2D, this .forcesTexture);
+               gl .texImage2D (gl .TEXTURE_2D, 0, gl .RGBA32F, numForces, 1, 0, gl .RGBA, gl .FLOAT, forces);
             }
-
-            gl .bindBuffer (gl .ARRAY_BUFFER, this .colorBuffer);
-            gl .bufferData (gl .ARRAY_BUFFER, this .colorArray, gl .STATIC_DRAW);
          }
-
-         // Vertices
-
-         for (var i = 0; i < numParticles; ++ i)
+         else
          {
-            var
-               position    = particles [i] .position,
-               elapsedTime = particles [i] .elapsedTime / particles [i] .lifetime,
-               i3          = i * 3,
-               i4          = i * 4;
-
-            positionArray [i3]     = position .x;
-            positionArray [i3 + 1] = position .y;
-            positionArray [i3 + 2] = position .z;
-
-            elapsedTimeArray [i] = elapsedTime;
-            lifeArray [i]        = particles [i] .life;
-
-            vertexArray [i4]     = position .x;
-            vertexArray [i4 + 1] = position .y;
-            vertexArray [i4 + 2] = position .z;
+            this .numForces = 0;
          }
 
-         gl .bindBuffer (gl .ARRAY_BUFFER, this .positionBuffer);
-         gl .bufferData (gl .ARRAY_BUFFER, this .positionArray, gl .STATIC_DRAW);
-         gl .bindBuffer (gl .ARRAY_BUFFER, this .elapsedTimeBuffer);
-         gl .bufferData (gl .ARRAY_BUFFER, this .elapsedTimeArray, gl .STATIC_DRAW);
-         gl .bindBuffer (gl .ARRAY_BUFFER, this .lifeBuffer);
-         gl .bufferData (gl .ARRAY_BUFFER, this .lifeArray, gl .STATIC_DRAW);
-         gl .bindBuffer (gl .ARRAY_BUFFER, this .vertexBuffer);
-         gl .bufferData (gl .ARRAY_BUFFER, this .vertexArray, gl .STATIC_DRAW);
-      },
-      updateLine: function ()
-      {
-         var
-            gl               = this .getBrowser () .getContext (),
-            particles        = this .particles,
-            numParticles     = this .numParticles,
-            positionArray    = this .positionArray,
-            elapsedTimeArray = this .elapsedTimeArray,
-            lifeArray        = this .lifeArray,
-            colorArray       = this .colorArray,
-            vertexArray      = this .vertexArray,
-            sy1_2            = this ._particleSize .y / 2;
-
-         // Colors
-
-         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;
-               colorArray [i8 + 3] = color .w;
-
-               colorArray [i8 + 4] = color .x;
-               colorArray [i8 + 5] = color .y;
-               colorArray [i8 + 6] = color .z;
-               colorArray [i8 + 7] = color .w;
-            }
+         // Swap buffers.
 
-            gl .bindBuffer (gl .ARRAY_BUFFER, this .colorBuffer);
-            gl .bufferData (gl .ARRAY_BUFFER, this .colorArray, gl .STATIC_DRAW);
-         }
+         const inputParticles  = this .outputParticles;
+         this .outputParticles = this .inputParticles;
+         this .inputParticles  = inputParticles;
 
-         // Vertices
+         // Determine particle position, velocity and colors.
 
-         for (var i = 0; i < numParticles; ++ i)
-         {
-            var
-               particle    = particles [i],
-               position    = particle .position,
-               elapsedTime = particles [i] .elapsedTime / particles [i] .lifetime,
-               life        = particles [i] .life,
-               x           = position .x,
-               y           = position .y,
-               z           = position .z,
-               i2          = i * 2,
-               i6          = i * 6,
-               i8          = i * 8;
-
-            positionArray [i6]     = x;
-            positionArray [i6 + 1] = y;
-            positionArray [i6 + 2] = z;
-            positionArray [i6 + 3] = x;
-            positionArray [i6 + 4] = y;
-            positionArray [i6 + 5] = z;
-
-            elapsedTimeArray [i2]     = elapsedTime;
-            elapsedTimeArray [i2 + 1] = elapsedTime;
-
-            lifeArray [i2]     = life;
-            lifeArray [i2 + 1] = life;
-
-            // Length of line / 2.
-            normal .assign (particle .velocity) .normalize () .multiply (sy1_2);
-
-            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;
-         }
+         emitterNode .animate (this, deltaTime);
 
-         gl .bindBuffer (gl .ARRAY_BUFFER, this .positionBuffer);
-         gl .bufferData (gl .ARRAY_BUFFER, this .positionArray, gl .STATIC_DRAW);
-         gl .bindBuffer (gl .ARRAY_BUFFER, this .elapsedTimeBuffer);
-         gl .bufferData (gl .ARRAY_BUFFER, this .elapsedTimeArray, gl .STATIC_DRAW);
-         gl .bindBuffer (gl .ARRAY_BUFFER, this .lifeBuffer);
-         gl .bufferData (gl .ARRAY_BUFFER, this .lifeArray, gl .STATIC_DRAW);
-         gl .bindBuffer (gl .ARRAY_BUFFER, this .vertexBuffer);
-         gl .bufferData (gl .ARRAY_BUFFER, this .vertexArray, gl .STATIC_DRAW);
+         browser .addBrowserEvent ();
       },
-      updateQuad: function (modelViewMatrix)
+      updateSprite: (function ()
       {
-         try
-         {
-            var
-               gl               = this .getBrowser () .getContext (),
-               particles        = this .particles,
-               maxParticles     = this .maxParticles,
-               numParticles     = this .numParticles,
-               positionArray    = this .positionArray,
-               elapsedTimeArray = this .elapsedTimeArray,
-               lifeArray        = this .lifeArray,
-               colorArray       = this .colorArray,
-               texCoordArray    = this .texCoordArray,
-               normalArray      = this .normalArray,
-               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)
-//					{
-//						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 .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;
+         const data = new Float32Array (QuadGeometry);
 
-                  var
-                     length = texCoordKeys .length,
-                     index0 = 0;
+         const quad = [
+            new Vector3 (-0.5, -0.5, 0),
+            new Vector3 ( 0.5, -0.5, 0),
+            new Vector3 ( 0.5,  0.5, 0),
+            new Vector3 (-0.5, -0.5, 0),
+            new Vector3 ( 0.5,  0.5, 0),
+            new Vector3 (-0.5,  0.5, 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 .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;
-                     }
+         const
+            vertex = new Vector3 (0, 0, 0),
+            size   = new Vector3 (0, 0, 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;
-                  }
+         return function (gl, rotation)
+         {
+            // Normal
 
-                  gl .bindBuffer (gl .ARRAY_BUFFER, this .texCoordBuffers [0]);
-                  gl .bufferData (gl .ARRAY_BUFFER, this .texCoordArray, gl .STATIC_DRAW);
-               }
-            }
+            for (let i = 0; i < 3; ++ i)
+               data [24 + i] = rotation [6 + i];
 
             // 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);
+            size .set (this ._particleSize .x, this ._particleSize .y, 1);
 
-                  // 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 (let i = 0; i < 6; ++ i)
+            {
+               const index = 27 + i * 4;
 
-                  for (var i = 0; i < numParticles; ++ i)
-                  {
-                     var
-                        position    = particles [i] .position,
-                        elapsedTime = particles [i] .elapsedTime / particles [i] .lifetime,
-                        x           = position .x,
-                        y           = position .y,
-                        z           = position .z,
-                        i6          = i * 6,
-                        i18         = i * 18,
-                        i24         = i * 24;
-
-                     // p4 ------ p3
-                     // |       / |
-                     // |     /   |
-                     // |   /     |
-                     // | /       |
-                     // p1 ------ p2
-
-
-                     positionArray [i18]     = positionArray [i18 + 3] = positionArray [i18 + 6] = positionArray [i18 +  9] = positionArray [i18 + 12] = positionArray [i18 + 15] = x;
-                     positionArray [i18 + 1] = positionArray [i18 + 4] = positionArray [i18 + 7] = positionArray [i18 + 10] = positionArray [i18 + 13] = positionArray [i18 + 16] = y;
-                     positionArray [i18 + 2] = positionArray [i18 + 5] = positionArray [i18 + 8] = positionArray [i18 + 11] = positionArray [i18 + 14] = positionArray [i18 + 17] = z;
-
-                     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 + 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;
-                  }
+               rotation .multVecMatrix (vertex .assign (quad [i]) .multVec (size))
 
-                  gl .bindBuffer (gl .ARRAY_BUFFER, this .positionBuffer);
-                  gl .bufferData (gl .ARRAY_BUFFER, this .positionArray, gl .STATIC_DRAW);
-                  gl .bindBuffer (gl .ARRAY_BUFFER, this .elapsedTimeBuffer);
-                  gl .bufferData (gl .ARRAY_BUFFER, this .elapsedTimeArray, gl .STATIC_DRAW);
-                  gl .bindBuffer (gl .ARRAY_BUFFER, this .lifeBuffer);
-                  gl .bufferData (gl .ARRAY_BUFFER, this .lifeArray, gl .STATIC_DRAW);
-                  gl .bindBuffer (gl .ARRAY_BUFFER, this .vertexBuffer);
-                  gl .bufferData (gl .ARRAY_BUFFER, this .vertexArray, gl .STATIC_DRAW);
-               }
+               data [index + 0] = vertex .x;
+               data [index + 1] = vertex .y;
+               data [index + 2] = vertex .z;
             }
-            else
-            {
-               if (! modelViewMatrix) // if called from animateParticles
-               {
-                  for (var i = 0; i < numParticles; ++ i)
-                  {
-                     var
-                        position    = particles [i] .position,
-                        elapsedTime = particles [i] .elapsedTime / particles [i] .lifetime,
-                        x           = position .x,
-                        y           = position .y,
-                        z           = position .z,
-                        i6          = i * 6,
-                        i18         = i * 18,
-                        i24         = i * 24;
-
-                     // p4 ------ p3
-                     // |       / |
-                     // |     /   |
-                     // |   /     |
-                     // | /       |
-                     // p1 ------ p2
-
-                     positionArray [i18]     = positionArray [i18 + 3] = positionArray [i18 + 6] = positionArray [i18 +  9] = positionArray [i18 + 12] = positionArray [i18 + 15] = x;
-                     positionArray [i18 + 1] = positionArray [i18 + 4] = positionArray [i18 + 7] = positionArray [i18 + 10] = positionArray [i18 + 13] = positionArray [i18 + 16] = y;
-                     positionArray [i18 + 2] = positionArray [i18 + 5] = positionArray [i18 + 8] = positionArray [i18 + 11] = positionArray [i18 + 14] = positionArray [i18 + 17] = z;
-
-                     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);
-                  gl .bufferData (gl .ARRAY_BUFFER, this .elapsedTimeArray, gl .STATIC_DRAW);
-                  gl .bindBuffer (gl .ARRAY_BUFFER, this .lifeBuffer);
-                  gl .bufferData (gl .ARRAY_BUFFER, this .lifeArray, gl .STATIC_DRAW);
-                  gl .bindBuffer (gl .ARRAY_BUFFER, this .vertexBuffer);
-                  gl .bufferData (gl .ARRAY_BUFFER, this .vertexArray, gl .STATIC_DRAW);
-               }
-            }
-         }
-         catch (error)
-         {
-            console .error (error);
-         }
-      },
+            gl .bindBuffer (gl .ARRAY_BUFFER, this .geometryBuffer);
+            gl .bufferData (gl .ARRAY_BUFFER, data, gl .DYNAMIC_DRAW);
+         };
+      })(),
+      intersectsBox: function (box, clipPlanes)
+      { },
       traverse: function (type, renderObject)
       {
-         if (! this ._isActive .getValue ())
+         if (this .numParticles === 0)
             return;
 
          switch (type)
          {
             case TraverseType .POINTER:
-            {
-               break;
-            }
             case TraverseType .PICKING:
-            {
-               break;
-            }
             case TraverseType .COLLISION:
             {
-               // TODO: to be implemented.
                break;
             }
             case TraverseType .SHADOW:
@@ -1349,7 +915,7 @@ function (Fields,
             }
          }
 
-         if (this .geometryType === GEOMETRY)
+         if (this .geometryType === GeometryTypes .GEOMETRY)
          {
             if (this .getGeometry ())
                this .getGeometry () .traverse (type, renderObject); // Currently used for ScreenText.
@@ -1357,76 +923,88 @@ function (Fields,
       },
       depth: function (gl, context, shaderNode)
       {
-         // Update geometry if SPRITE.
-
-         this .updateGeometry (context .modelViewMatrix);
-
          // Display geometry.
 
-         if (this .geometryType === GEOMETRY)
+         switch (this .geometryType)
          {
-            var geometryNode = this .getGeometry ();
+            case GeometryTypes .GEOMETRY:
+            {
+               const geometryNode = this .getGeometry ();
 
-            if (geometryNode)
-               geometryNode .displayParticlesDepth (gl, context, shaderNode, this .particles, this .numParticles);
-         }
-         else
-         {
-            if (this .numParticles <= 0)
-               return;
+               if (geometryNode)
+                  geometryNode .displayParticlesDepth (gl, context, shaderNode, this);
 
-            if (shaderNode .getValid ())
+               break;
+            }
+            case GeometryTypes .SPRITE:
             {
-               // Setup vertex attributes.
+               this .updateSprite (gl, this .getScreenAlignedRotation (context .modelViewMatrix));
+               // [fall trough]
+            }
+            default:
+            {
+               const outputParticles = this .outputParticles;
+
+               if (outputParticles .shadowArrayObject .enable (gl, shaderNode))
+               {
+                  const particleStride = this .particleStride;
 
-               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 .enableParticleAttribute       (gl, outputParticles, particleStride, this .particleOffset, 1);
+                  shaderNode .enableParticleMatrixAttribute (gl, outputParticles, particleStride, this .matrixOffset,   1);
+                  shaderNode .enableVertexAttribute         (gl, this .geometryBuffer, 0, this .verticesOffset);
+               }
 
-               gl .drawArrays (this .primitiveMode, 0, this .numParticles * this .vertexCount);
+               gl .drawArraysInstanced (this .primitiveMode, 0, this .vertexCount, this .numParticles);
 
-               shaderNode .disableFloatAttrib (gl, "x3d_ParticleId");
-               shaderNode .disableFloatAttrib (gl, "x3d_ParticlePosition");
-               shaderNode .disableFloatAttrib (gl, "x3d_ParticleElapsedTime");
-               shaderNode .disableFloatAttrib (gl, "x3d_ParticleLife");
+               break;
             }
          }
       },
       display: function (gl, context)
       {
-         try
-         {
-            if (this .numParticles <= 0)
-               return;
-
-            // Update geometry if SPRITE.
-
-            this .updateGeometry (context .modelViewMatrix);
-
-            // Display geometry.
+         // Display geometry.
 
-            if (this .geometryType === GEOMETRY)
+         switch (this .geometryType)
+         {
+            case GeometryTypes .GEOMETRY:
             {
                const geometryNode = this .getGeometry ();
 
                if (geometryNode)
-                  geometryNode .displayParticles (gl, context, this .particles, this .numParticles);
+                  geometryNode .displayParticles (gl, context, this);
+
+               break;
             }
-            else
+            case GeometryTypes .SPRITE:
+            {
+               this .updateSprite (gl, this .getScreenAlignedRotation (context .modelViewMatrix));
+               // [fall trough]
+            }
+            case GeometryTypes .QUAD:
+            case GeometryTypes .TRIANGLE:
+            {
+               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);
+
+               // [fall trough]
+            }
+            default:
             {
                const
                   appearanceNode = this .getAppearance (),
-                  shaderNode     = appearanceNode .shaderNode || this .shaderNode || appearanceNode .materialNode .getShader (context .browser, context .shadow);
+                  shaderNode     = appearanceNode .getShader () || this .shaderNode || appearanceNode .getMaterial () .getShader (context .browser, context .shadow),
+                  primitiveMode  = shaderNode .getPrimitiveMode (this .primitiveMode);
 
                // Setup shader.
 
-               if (shaderNode .getValid ())
+               if (shaderNode .isValid ())
                {
                   context .geometryContext = this .geometryContext;
 
-                  const blendModeNode = appearanceNode .blendModeNode;
+                  const blendModeNode = appearanceNode .getBlendMode ();
 
                   if (blendModeNode)
                      blendModeNode .enable (gl);
@@ -1434,85 +1012,88 @@ function (Fields,
                   shaderNode .enable (gl);
                   shaderNode .setLocalUniforms (gl, context);
 
-                  // Setup vertex attributes.
+                  if (this .numTexCoords)
+                  {
+                     const textureUnit = context .browser .getTexture2DUnit ();
 
-                  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);
+                     gl .activeTexture (gl .TEXTURE0 + textureUnit);
+                     gl .bindTexture (gl .TEXTURE_2D, this .texCoordRampTexture);
+                     gl .uniform1i (shaderNode .x3d_TexCoordRamp, textureUnit);
+                  }
 
-                  if (this .geometryContext .colorMaterial)
-                     shaderNode .enableColorAttribute (gl, this .colorBuffer);
+                  // Setup vertex attributes.
 
-                  if (this .texCoordArray .length)
-                     shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers);
+                  const outputParticles = this .outputParticles;
 
-                  if (this .normalArray .length)
-                     shaderNode .enableNormalAttribute (gl, this .normalBuffer);
+                  if (outputParticles .vertexArrayObject .enable (gl, shaderNode))
+                  {
+                     const particleStride = this .particleStride;
 
-                  shaderNode .enableVertexAttribute (gl, this .vertexBuffer);
+                     shaderNode .enableParticleAttribute       (gl, outputParticles, particleStride, this .particleOffset, 1);
+                     shaderNode .enableParticleMatrixAttribute (gl, outputParticles, particleStride, this .matrixOffset,   1);
 
-                  if (shaderNode .wireframe && this .testWireframe)
-                  {
-                     // Wireframes are always solid so only one drawing call is needed.
+                     if (this .geometryContext .colorMaterial)
+                     {
+                        shaderNode .enableColorAttribute (gl, outputParticles, particleStride, this .colorOffset);
+                        shaderNode .colorAttributeDivisor (gl, 1);
+                     }
 
-                     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;
+                     if (this .texCoordCount)
+                        shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers, 0, this .texCoordOffset);
 
-                     gl .frontFace (positiveScale ? gl .CCW : gl .CW);
-                     gl .enable (gl .CULL_FACE);
-                     gl .cullFace (gl .BACK);
+                     if (this .hasNormals)
+                     {
+                        shaderNode .enableNormalAttribute (gl, this .geometryBuffer, 0, this .normalOffset);
+                        shaderNode .normalAttributeDivisor (gl, this .maxParticles);
+                     }
 
-                     gl .drawArrays (this .primitiveMode, 0, this .numParticles * this .vertexCount);
+                     shaderNode .enableVertexAttribute (gl, this .geometryBuffer, 0, this .verticesOffset);
                   }
 
-                  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);
+                  gl .drawArraysInstanced (primitiveMode, 0, this .vertexCount, this .numParticles);
 
                   if (blendModeNode)
                      blendModeNode .disable (gl);
 
-                  context .geometryContext = null;
+                  delete context .geometryContext;
                }
+
+               break;
             }
          }
-         catch (error)
-         {
-            // Catch error from setLocalUniforms.
-            console .error (error);
-         }
       },
-      getScreenAlignedRotation: function (modelViewMatrix)
+      getScreenAlignedRotation: (function ()
       {
-         invModelViewMatrix .assign (modelViewMatrix) .inverse ();
+         const
+            invModelViewMatrix = new Matrix4 (),
+            billboardToScreen  = new Vector3 (0, 0, 0),
+            viewerYAxis        = new Vector3 (0, 0, 0),
+            y                  = new Vector3 (0, 0, 0),
+            rotation           = new Matrix3 (9);
 
-         invModelViewMatrix .multDirMatrix (billboardToScreen .assign (Vector3 .zAxis));
-         invModelViewMatrix .multDirMatrix (viewerYAxis .assign (Vector3 .yAxis));
+         return 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;
+            const x = viewerYAxis .cross (billboardToScreen);
+            y .assign (billboardToScreen) .cross (x);
+            const z = billboardToScreen;
 
-         // Compose rotation
+            // Compose rotation matrix.
 
-         x .normalize ();
-         y .normalize ();
-         z .normalize ();
+            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);
-      },
+            rotation .set (x .x, x .y, x .z,
+                           y .x, y .y, y .z,
+                           z .x, z .y, z .z);
+
+            return rotation;
+         };
+      })(),
    });
 
    return ParticleSystem;