x_ite 5.0.2 → 6.0.0

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

@@ -49,6 +49,7 @@
 
 define ([
    "x_ite/Fields",
+   "x_ite/Rendering/VertexArray",
    "x_ite/Components/Core/X3DNode",
    "x_ite/Base/X3DConstants",
    "x_ite/Browser/Core/Shading",
@@ -61,6 +62,7 @@ define ([
    "standard/Math/Algorithm",
 ],
 function (Fields,
+          VertexArray,
           X3DNode,
           X3DConstants,
           Shading,
@@ -108,13 +110,12 @@ function (Fields,
       this .max                      = new Vector3 (0, 0, 0);
       this .bbox                     = new Box3 (this .min, this .max, true);
       this .solid                    = true;
-      this .geometryType             = 3;
       this .primitiveMode            = browser .getContext () .TRIANGLES;
+      this .geometryType             = 3;
       this .flatShading              = undefined;
       this .colorMaterial            = false;
       this .attribNodes              = [ ];
-      this .attribs                  = [ ];
-      this .textureCoordinateNode    = browser .getDefaultTextureCoordinate ();
+      this .attribArrays             = [ ];
       this .textureCoordinateMapping = new Map ();
       this .multiTexCoords           = [ ];
       this .texCoords                = X3DGeometryNode .createArray ();
@@ -123,12 +124,12 @@ function (Fields,
       this .normals                  = X3DGeometryNode .createArray ();
       this .flatNormals              = X3DGeometryNode .createArray ();
       this .vertices                 = X3DGeometryNode .createArray ();
+      this .fogCoords                = false;
       this .vertexCount              = 0;
+      this .planes                   = [ ];
 
-      // This methods are configured in transfer.
-      this .depth            = Function .prototype;
-      this .display          = Function .prototype;
-      this .displayParticles = Function .prototype;
+      for (let i = 0; i < 5; ++ i)
+         this .planes [i] = new Plane3 (Vector3 .Zero, Vector3 .zAxis);
    }
 
    // Function to select ether Array or MFFloat for color/normal/vertex arrays.
@@ -158,10 +159,10 @@ function (Fields,
 
       array .shrinkToFit = function ()
       {
-         if (this .length !== this .typedArray .length)
-            this .typedArray = new Float32Array (this);
-         else
+         if (this .length === this .typedArray .length)
             this .typedArray .set (this);
+         else
+            this .typedArray = new Float32Array (this);
       };
 
       return array;
@@ -180,24 +181,25 @@ function (Fields,
       {
          X3DNode .prototype .initialize .call (this);
 
+         const
+            browser = this .getBrowser (),
+            gl      = browser .getContext ();
+
          this .isLive () .addInterest ("set_live__", this);
 
          this .addInterest ("requestRebuild", this);
          this ._rebuild .addInterest ("rebuild", this);
 
-         const gl = this .getBrowser () .getContext ();
-
-         this .frontFace       = gl .CCW;
-         this .attribBuffers   = [ ];
-         this .texCoordBuffers = [ ];
-         this .fogDepthBuffer  = gl .createBuffer ();
-         this .colorBuffer     = gl .createBuffer ();
-         this .normalBuffer    = gl .createBuffer ();
-         this .vertexBuffer    = gl .createBuffer ();
-         this .planes          = [ ];
-
-         for (let i = 0; i < 5; ++ i)
-            this .planes [i] = new Plane3 (Vector3 .Zero, Vector3 .zAxis);
+         this .frontFace             = gl .CCW;
+         this .attribBuffers         = [ ];
+         this .textureCoordinateNode = browser .getDefaultTextureCoordinate ();
+         this .texCoordBuffers       = Array .from ({length: browser .getMaxTextures ()}, () => gl .createBuffer ());
+         this .fogDepthBuffer        = gl .createBuffer ();
+         this .colorBuffer           = gl .createBuffer ();
+         this .normalBuffer          = gl .createBuffer ();
+         this .vertexBuffer          = gl .createBuffer ();
+         this .vertexArrayObject           = new VertexArray ();
+         this .shadowArrayObject           = new VertexArray ();
 
          this .set_live__ ();
       },
@@ -273,7 +275,7 @@ function (Fields,
       },
       getAttribs: function ()
       {
-         return this .attribs;
+         return this .attribArrays;
       },
       setFogDepths: function (value)
       {
@@ -345,6 +347,14 @@ function (Fields,
       {
          return this .vertices;
       },
+      updateVertexArrays: function ()
+      {
+         this .vertexArrayObject .update ();
+         this .shadowArrayObject .update ();
+
+         this .updateParticlesShadow = true;
+         this .updateParticles       = true;
+      },
       buildTexCoords: function ()
       {
          const texCoords = this .texCoords;
@@ -372,7 +382,7 @@ function (Fields,
             texCoords .shrinkToFit ();
          }
 
-         return texCoords;
+         this .getMultiTexCoords () .push (texCoords);
       },
       getTexCoordParams: (function ()
       {
@@ -481,67 +491,62 @@ function (Fields,
             v2              = new Vector3 (0, 0, 0),
             clipPoint       = new Vector3 (0, 0, 0);
 
-         return function (hitRay, clipPlanes, modelViewMatrix_, intersections)
+         return function (hitRay, renderObject, appearanceNode, intersections)
          {
-            try
+            if (this .intersectsBBox (hitRay))
             {
-               if (this .intersectsBBox (hitRay))
-               {
-                  this .transformLine   (hitRay);                                       // Apply screen transformations from screen nodes.
-                  this .transformMatrix (modelViewMatrix .assign (modelViewMatrix_)); // Apply screen transformations from screen nodes.
+               this .transformLine (hitRay); // Apply screen transformations from screen nodes.
+               this .transformMatrix (modelViewMatrix .assign (renderObject .getModelViewMatrix () .get ())); // Apply screen transformations from screen nodes.
 
-                  const
-                     texCoords  = this .multiTexCoords [0] .getValue (),
-                     normals    = this .normals .getValue (),
-                     vertices   = this .vertices .getValue ();
+               const
+                  texCoords   = this .multiTexCoords [0] .getValue (),
+                  normals     = this .normals .getValue (),
+                  vertices    = this .vertices .getValue (),
+                  vertexCount = this .vertexCount;
 
-                  for (let i = 0, length = this .vertexCount; i < length; i += 3)
-                  {
-                     const i4 = i * 4;
+               for (let i = 0; i < vertexCount; i += 3)
+               {
+                  const i4 = i * 4;
 
-                     v0 .x = vertices [i4];     v0 .y = vertices [i4 + 1]; v0 .z = vertices [i4 +  2];
-                     v1 .x = vertices [i4 + 4]; v1 .y = vertices [i4 + 5]; v1 .z = vertices [i4 +  6];
-                     v2 .x = vertices [i4 + 8]; v2 .y = vertices [i4 + 9]; v2 .z = vertices [i4 + 10];
+                  v0 .x = vertices [i4];     v0 .y = vertices [i4 + 1]; v0 .z = vertices [i4 +  2];
+                  v1 .x = vertices [i4 + 4]; v1 .y = vertices [i4 + 5]; v1 .z = vertices [i4 +  6];
+                  v2 .x = vertices [i4 + 8]; v2 .y = vertices [i4 + 9]; v2 .z = vertices [i4 + 10];
 
-                     if (hitRay .intersectsTriangle (v0, v1, v2, uvt))
-                     {
-                        // Get barycentric coordinates.
+                  if (hitRay .intersectsTriangle (v0, v1, v2, uvt))
+                  {
+                     // Get barycentric coordinates.
 
-                        const
-                           u = uvt .u,
-                           v = uvt .v,
-                           t = uvt .t;
+                     const
+                        u = uvt .u,
+                        v = uvt .v,
+                        t = uvt .t;
 
-                        // Determine vectors for X3DPointingDeviceSensors.
+                     // Determine vectors for X3DPointingDeviceSensors.
 
-                        const point = new Vector3 (t * vertices [i4]     + u * vertices [i4 + 4] + v * vertices [i4 +  8],
-                                                   t * vertices [i4 + 1] + u * vertices [i4 + 5] + v * vertices [i4 +  9],
-                                                   t * vertices [i4 + 2] + u * vertices [i4 + 6] + v * vertices [i4 + 10]);
+                     const point = new Vector3 (t * vertices [i4]     + u * vertices [i4 + 4] + v * vertices [i4 +  8],
+                                                t * vertices [i4 + 1] + u * vertices [i4 + 5] + v * vertices [i4 +  9],
+                                                t * vertices [i4 + 2] + u * vertices [i4 + 6] + v * vertices [i4 + 10]);
 
-                        if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (point)), clipPlanes))
-                           continue;
+                     if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (point)), renderObject .getLocalObjects ()))
+                     {
+                        continue;
+                     }
 
-                        const texCoord = new Vector2 (t * texCoords [i4]     + u * texCoords [i4 + 4] + v * texCoords [i4 + 8],
-                                                      t * texCoords [i4 + 1] + u * texCoords [i4 + 5] + v * texCoords [i4 + 9]);
+                     const texCoord = new Vector2 (t * texCoords [i4]     + u * texCoords [i4 + 4] + v * texCoords [i4 + 8],
+                                                   t * texCoords [i4 + 1] + u * texCoords [i4 + 5] + v * texCoords [i4 + 9]);
 
-                        const i3 = i * 3;
+                     const i3 = i * 3;
 
-                        const normal = new Vector3 (t * normals [i3]     + u * normals [i3 + 3] + v * normals [i3 + 6],
-                                                    t * normals [i3 + 1] + u * normals [i3 + 4] + v * normals [i3 + 7],
-                                                    t * normals [i3 + 2] + u * normals [i3 + 5] + v * normals [i3 + 8]);
+                     const normal = new Vector3 (t * normals [i3]     + u * normals [i3 + 3] + v * normals [i3 + 6],
+                                                 t * normals [i3 + 1] + u * normals [i3 + 4] + v * normals [i3 + 7],
+                                                 t * normals [i3 + 2] + u * normals [i3 + 5] + v * normals [i3 + 8]);
 
-                        intersections .push ({ texCoord: texCoord, normal: normal, point: this .getMatrix () .multVecMatrix (point) });
-                     }
+                     intersections .push ({ texCoord: texCoord, normal: normal, point: this .getMatrix () .multVecMatrix (point) });
                   }
                }
-
-               return intersections .length;
-            }
-            catch (error)
-            {
-               console .log (error);
-               return false;
             }
+
+            return intersections .length;
          };
       })(),
       intersectsBBox: (function ()
@@ -615,50 +620,42 @@ function (Fields,
 
          return function (box, clipPlanes, modelViewMatrix)
          {
-            try
+            if (box .intersectsBox (this .bbox))
             {
-               if (box .intersectsBox (this .bbox))
-               {
-                  box .multRight (invMatrix .assign (this .getMatrix ()) .inverse ());
+               box .multRight (invMatrix .assign (this .getMatrix ()) .inverse ());
 
-                  this .transformMatrix (modelViewMatrix); // Apply screen transformations from screen nodes.
+               this .transformMatrix (modelViewMatrix); // Apply screen transformations from screen nodes.
 
-                  const vertices = this .vertices .getValue ();
+               const vertices = this .vertices .getValue ();
 
-                  for (let i = 0, length = this .vertexCount; i < length; i += 3)
-                  {
-                     const i4 = i * 4;
+               for (let i = 0, length = this .vertexCount; i < length; i += 3)
+               {
+                  const i4 = i * 4;
 
-                     v0 .x = vertices [i4];     v0 .y = vertices [i4 + 1]; v0 .z = vertices [i4 +  2];
-                     v1 .x = vertices [i4 + 4]; v1 .y = vertices [i4 + 5]; v1 .z = vertices [i4 +  6];
-                     v2 .x = vertices [i4 + 8]; v2 .y = vertices [i4 + 9]; v2 .z = vertices [i4 + 10];
+                  v0 .x = vertices [i4];     v0 .y = vertices [i4 + 1]; v0 .z = vertices [i4 +  2];
+                  v1 .x = vertices [i4 + 4]; v1 .y = vertices [i4 + 5]; v1 .z = vertices [i4 +  6];
+                  v2 .x = vertices [i4 + 8]; v2 .y = vertices [i4 + 9]; v2 .z = vertices [i4 + 10];
 
-                     if (box .intersectsTriangle (v0, v1, v2))
+                  if (box .intersectsTriangle (v0, v1, v2))
+                  {
+                     if (clipPlanes .length)
                      {
-                        if (clipPlanes .length)
-                        {
-                           if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (v0)), clipPlanes))
-                              continue;
-
-                           if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (v1)), clipPlanes))
-                              continue;
+                        if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (v0)), clipPlanes))
+                           continue;
 
-                           if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (v2)), clipPlanes))
-                              continue;
-                        }
+                        if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (v1)), clipPlanes))
+                           continue;
 
-                        return true;
+                        if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (v2)), clipPlanes))
+                           continue;
                      }
+
+                     return true;
                   }
                }
-
-               return false;
-            }
-            catch (error)
-            {
-               console .log (error);
-               return false;
             }
+
+            return false;
          };
       })(),
       set_live__: function ()
@@ -723,7 +720,7 @@ function (Fields,
             // Transfer normals.
 
             gl .bindBuffer (gl .ARRAY_BUFFER, this .normalBuffer);
-            gl .bufferData (gl .ARRAY_BUFFER, flatShading ? this .flatNormals .getValue () : this .normals .getValue (), gl .STATIC_DRAW);
+            gl .bufferData (gl .ARRAY_BUFFER, flatShading ? this .flatNormals .getValue () : this .normals .getValue (), gl .DYNAMIC_DRAW);
          };
       })(),
       requestRebuild: function ()
@@ -741,8 +738,8 @@ function (Fields,
 
             // Shrink arrays before transfer to graphics card.
 
-            for (const attrib of this .attribs)
-               attrib .shrinkToFit ();
+            for (const attribArray of this .attribArrays)
+               attribArray .shrinkToFit ();
 
             for (const multiTexCoord of this .multiTexCoords)
                multiTexCoord .shrinkToFit ();
@@ -786,19 +783,17 @@ function (Fields,
 
             // Generate texCoord if needed.
 
-            if (this .geometryType > 1)
-            {
-               if (this .multiTexCoords .length === 0)
-                  this .multiTexCoords .push (this .buildTexCoords ());
+            if (this .multiTexCoords .length === 0)
+               this .buildTexCoords ();
 
-               const
-                  last   = this .multiTexCoords .length - 1,
-                  length = this .getBrowser () .getMaxTextures ();
+            if (this .multiTexCoords .length)
+            {
+               const maxTextures = this .getBrowser () .getMaxTextures ();
 
-               for (let i = this .multiTexCoords .length; i < length; ++ i)
-                  this .multiTexCoords [i] = this .multiTexCoords [last];
+               for (let i = this .multiTexCoords .length; i < maxTextures; ++ i)
+                  this .multiTexCoords [i] = this .multiTexCoords .at (-1);
 
-               this .multiTexCoords .length = length;
+               this .multiTexCoords .length = maxTextures;
             }
 
             // Upload normals or flat normals.
@@ -817,19 +812,19 @@ function (Fields,
          this .min .set (Number .POSITIVE_INFINITY, Number .POSITIVE_INFINITY, Number .POSITIVE_INFINITY);
          this .max .set (Number .NEGATIVE_INFINITY, Number .NEGATIVE_INFINITY, Number .NEGATIVE_INFINITY);
 
-         // Create attrib arrays.
+         // Create attribArray arrays.
          {
-            const attribs = this .attribs;
+            const attribArrays = this .attribArrays;
 
-            for (const attrib of attribs)
-               attrib .length = 0;
+            for (const attribArray of attribArrays)
+               attribArray .length = 0;
 
             const length = this .attribNodes .length;
 
-            for (let a = attribs .length; a < length; ++ a)
-               attribs [a] = X3DGeometryNode .createArray ();
+            for (let a = attribArrays .length; a < length; ++ a)
+               attribArrays [a] = X3DGeometryNode .createArray ();
 
-            attribs .length = length;
+            attribArrays .length = length;
          }
 
          // Buffer
@@ -846,114 +841,111 @@ function (Fields,
       },
       transfer: function ()
       {
-         const
-            gl    = this .getBrowser () .getContext (),
-            count = this .vertices .length / 4;
+         const gl = this .getBrowser () .getContext ();
 
-         // Transfer attribs.
+         // Transfer attribArrays.
 
-         for (let i = this .attribBuffers .length, length = this .attribs .length; i < length; ++ i)
+         for (let i = this .attribBuffers .length, length = this .attribArrays .length; i < length; ++ i)
             this .attribBuffers .push (gl .createBuffer ());
 
-         for (let i = 0, length = this .attribs .length; i < length; ++ i)
+         for (let i = 0, length = this .attribArrays .length; i < length; ++ i)
          {
             gl .bindBuffer (gl .ARRAY_BUFFER, this .attribBuffers [i]);
-            gl .bufferData (gl .ARRAY_BUFFER, this .attribs [i] .getValue (), gl .STATIC_DRAW);
+            gl .bufferData (gl .ARRAY_BUFFER, this .attribArrays [i] .getValue (), gl .DYNAMIC_DRAW);
          }
 
          // Transfer fog depths.
 
+         const lastFogCoords = this .fogCoords;
+
          gl .bindBuffer (gl .ARRAY_BUFFER, this .fogDepthBuffer);
-         gl .bufferData (gl .ARRAY_BUFFER, this .fogDepths .getValue (), gl .STATIC_DRAW);
+         gl .bufferData (gl .ARRAY_BUFFER, this .fogDepths .getValue (), gl .DYNAMIC_DRAW);
+
          this .fogCoords = !! (this .fogDepths .length);
+
+         if (this .fogCoords !== lastFogCoords)
+            this .updateVertexArrays ();
+
          // Transfer colors.
 
+         const lastColorMaterial = this .colorMaterial;
+
          gl .bindBuffer (gl .ARRAY_BUFFER, this .colorBuffer);
-         gl .bufferData (gl .ARRAY_BUFFER, this .colors .getValue (), gl .STATIC_DRAW);
+         gl .bufferData (gl .ARRAY_BUFFER, this .colors .getValue (), gl .DYNAMIC_DRAW);
+
          this .colorMaterial = !! (this .colors .length);
 
-         // Transfer multiTexCoords.
+         if (this .colorMaterial !== lastColorMaterial)
+            this .updateVertexArrays ();
 
-         for (let i = this .texCoordBuffers .length, length = this .multiTexCoords .length; i < length; ++ i)
-            this .texCoordBuffers .push (gl .createBuffer ());
+         // Transfer multiTexCoords.
 
          for (let i = 0, length = this .multiTexCoords .length; i < length; ++ i)
          {
             gl .bindBuffer (gl .ARRAY_BUFFER, this .texCoordBuffers [i]);
-            gl .bufferData (gl .ARRAY_BUFFER, this .multiTexCoords [i] .getValue (), gl .STATIC_DRAW);
+            gl .bufferData (gl .ARRAY_BUFFER, this .multiTexCoords [i] .getValue (), gl .DYNAMIC_DRAW);
          }
 
          // Transfer vertices.
 
          gl .bindBuffer (gl .ARRAY_BUFFER, this .vertexBuffer);
-         gl .bufferData (gl .ARRAY_BUFFER, this .vertices .getValue (), gl .STATIC_DRAW);
-         this .vertexCount = count;
+         gl .bufferData (gl .ARRAY_BUFFER, this .vertices .getValue (), gl .DYNAMIC_DRAW);
+
+         this .vertexCount = this .vertices .length / 4;
 
          // Setup render functions.
 
          if (this .vertexCount)
          {
             // Use default render functions.
+
             delete this .depth;
             delete this .display;
+            delete this .displayParticlesDepth;
             delete this .displayParticles;
          }
          else
          {
             // Use no render function.
-            this .depth            = Function .prototype;
-            this .display          = Function .prototype;
-            this .displayParticles = Function .prototype;
+
+            this .depth                 = Function .prototype;
+            this .display               = Function .prototype;
+            this .displayParticlesDepth = Function .prototype;
+            this .displayParticles      = Function .prototype;
          }
-        },
+      },
       traverse: function (type, renderObject)
       { },
       depth: function (gl, context, shaderNode)
       {
-         // Setup vertex attributes.
-
-         // Attribs in depth rendering are not supported.
-         //for (let i = 0, length = attribNodes .length; i < length; ++ i)
-         //	attribNodes [i] .enable (gl, shaderNode, attribBuffers [i]);
-
-         shaderNode .enableVertexAttribute (gl, this .vertexBuffer);
-
-         //for (let i = 0, length = attribNodes .length; i < length; ++ i)
-         //	attribNodes [i] .disable (gl, shaderNode);
+         if (this .shadowArrayObject .enable (gl, shaderNode))
+            shaderNode .enableVertexAttribute (gl, this .vertexBuffer, 0, 0);
 
          gl .drawArrays (this .primitiveMode, 0, this .vertexCount);
       },
       display: function (gl, context)
       {
-         try
-         {
-            const
-               appearanceNode   = context .shapeNode .getAppearance (),
-               materialNode     = appearanceNode .materialNode,
-               backMaterialNode = appearanceNode .backMaterialNode,
-               frontShaderNode  = appearanceNode .shaderNode || materialNode .getShader (context .browser, context .shadow);
-
-            if (this .solid || !backMaterialNode || frontShaderNode .wireframe)
-            {
-               this .displayGeometry (gl, context, appearanceNode, frontShaderNode, true, true);
-            }
-            else
-            {
-               const backShaderNode = appearanceNode .shaderNode || backMaterialNode .getShader (context .browser, context .shadow)
+         const
+            appearanceNode   = context .shapeNode .getAppearance (),
+            materialNode     = appearanceNode .materialNode,
+            backMaterialNode = appearanceNode .backMaterialNode,
+            frontShaderNode  = appearanceNode .shaderNode || materialNode .getShader (context .browser, context .shadow);
 
-               this .displayGeometry (gl, context, appearanceNode, backShaderNode,  true,  false);
-               this .displayGeometry (gl, context, appearanceNode, frontShaderNode, false, true);
-            }
+         if (this .solid || !backMaterialNode || frontShaderNode .wireframe)
+         {
+            this .displayGeometry (gl, context, appearanceNode, frontShaderNode, true, true);
          }
-         catch (error)
+         else
          {
-            // Catch error from setLocalUniforms.
-            console .log (error);
+            const backShaderNode = appearanceNode .shaderNode || backMaterialNode .getShader (context .browser, context .shadow)
+
+            this .displayGeometry (gl, context, appearanceNode, backShaderNode,  true,  false);
+            this .displayGeometry (gl, context, appearanceNode, frontShaderNode, false, true);
          }
       },
       displayGeometry: function (gl, context, appearanceNode, shaderNode, back, front)
       {
-         if (shaderNode .getValid ())
+         if (shaderNode .isValid ())
          {
             const
                blendModeNode = appearanceNode .blendModeNode,
@@ -968,18 +960,21 @@ function (Fields,
 
             // Setup vertex attributes.
 
-            for (let i = 0, length = attribNodes .length; i < length; ++ i)
-               attribNodes [i] .enable (gl, shaderNode, attribBuffers [i]);
+            if (this .vertexArrayObject .enable (gl, shaderNode))
+            {
+               for (let i = 0, length = attribNodes .length; i < length; ++ i)
+                  attribNodes [i] .enable (gl, shaderNode, attribBuffers [i]);
 
-            if (this .fogCoords)
-               shaderNode .enableFogDepthAttribute (gl, this .fogDepthBuffer);
+               if (this .fogCoords)
+                  shaderNode .enableFogDepthAttribute (gl, this .fogDepthBuffer, 0, 0);
 
-            if (this .colorMaterial)
-               shaderNode .enableColorAttribute (gl, this .colorBuffer);
+               if (this .colorMaterial)
+                  shaderNode .enableColorAttribute (gl, this .colorBuffer, 0, 0);
 
-            shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers);
-            shaderNode .enableNormalAttribute   (gl, this .normalBuffer);
-            shaderNode .enableVertexAttribute   (gl, this .vertexBuffer);
+               shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers, 0, 0);
+               shaderNode .enableNormalAttribute   (gl, this .normalBuffer,    0, 0);
+               shaderNode .enableVertexAttribute   (gl, this .vertexBuffer,    0, 0);
+            }
 
             // Draw depending on wireframe, solid and transparent.
 
@@ -1038,87 +1033,55 @@ function (Fields,
                }
             }
 
-            for (const attribNode of attribNodes)
-               attribNode .disable (gl, shaderNode);
-
-            if (this .fogCoords)
-               shaderNode .disableFogDepthAttribute (gl);
-
-            if (this .colorMaterial)
-               shaderNode .disableColorAttribute (gl);
-
-            shaderNode .disableTexCoordAttribute (gl);
-            shaderNode .disableNormalAttribute   (gl);
-
             if (blendModeNode)
                blendModeNode .disable (gl);
          }
       },
-      displayParticlesDepth: function (gl, context, shaderNode, particles, numParticles)
+      displayParticlesDepth: function (gl, context, shaderNode, particleSystem)
       {
-         // Attribs in depth rendering are not supported:
-         //for (let i = 0, length = attribNodes .length; i < length; ++ i)
-         //	attribNodes [i] .enable (gl, shaderNode, attribBuffers [i]);
+         const outputParticles = particleSystem .outputParticles;
 
-         shaderNode .enableVertexAttribute (gl, this .vertexBuffer);
-
-         // Draw depending on wireframe, solid and transparent.
-
-         const
-            modelViewMatrix = context .modelViewMatrix,
-            x               = modelViewMatrix [12],
-            y               = modelViewMatrix [13],
-            z               = modelViewMatrix [14];
-
-         for (let p = 0; p < numParticles; ++ p)
+         if (this .updateParticlesShadow)
          {
-            const particle = particles [p];
-
-            modelViewMatrix [12] = x;
-            modelViewMatrix [13] = y;
-            modelViewMatrix [14] = z;
+            this .updateParticlesShadow = false;
 
-            Matrix4 .prototype .translate .call (modelViewMatrix, particle .position);
+            outputParticles .shadowArrayObject .update ();
+         }
 
-            shaderNode .setParticle (gl, particle, modelViewMatrix);
+         if (outputParticles .shadowArrayObject .enable (gl, shaderNode))
+         {
+            const particleStride = particleSystem .particleStride;
 
-            gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
+            shaderNode .enableParticleAttribute       (gl, outputParticles, particleStride, particleSystem .particleOffset, 1);
+            shaderNode .enableParticleMatrixAttribute (gl, outputParticles, particleStride, particleSystem .matrixOffset,   1);
+            shaderNode .enableVertexAttribute         (gl, this .vertexBuffer, 0, 0);
          }
 
-         //for (let i = 0, length = attribNodes .length; i < length; ++ i)
-         //	attribNodes [i] .disable (gl, shaderNode);
+         gl .drawArraysInstanced (shaderNode .primitiveMode, 0, this .vertexCount, particleSystem .numParticles);
       },
-      displayParticles: function (gl, context, particles, numParticles)
+      displayParticles: function (gl, context, particleSystem)
       {
-         try
-         {
-            const
-               appearanceNode   = context .shapeNode .getAppearance (),
-               materialNode     = appearanceNode .materialNode,
-               backMaterialNode = appearanceNode .backMaterialNode,
-               frontShaderNode  = appearanceNode .shaderNode || materialNode .getShader (context .browser, context .shadow);
-
-            if (this .solid || !backMaterialNode || frontShaderNode .wireframe)
-            {
-               this .displayParticlesGeometry (gl, context, appearanceNode, frontShaderNode, true, true, particles, numParticles);
-            }
-            else
-            {
-               const backShaderNode = appearanceNode .shaderNode || backMaterialNode .getShader (context .browser, context .shadow);
+         const
+            appearanceNode   = context .shapeNode .getAppearance (),
+            materialNode     = appearanceNode .materialNode,
+            backMaterialNode = appearanceNode .backMaterialNode,
+            frontShaderNode  = appearanceNode .shaderNode || materialNode .getShader (context .browser, context .shadow);
 
-               this .displayParticlesGeometry (gl, context, appearanceNode, backShaderNode,  true,  false, particles, numParticles);
-               this .displayParticlesGeometry (gl, context, appearanceNode, frontShaderNode, false, true,  particles, numParticles);
-            }
+         if (this .solid || !backMaterialNode || frontShaderNode .wireframe)
+         {
+            this .displayParticlesGeometry (gl, context, appearanceNode, frontShaderNode, true, true, particleSystem);
          }
-         catch (error)
+         else
          {
-            // Catch error from setLocalUniforms.
-            console .log (error);
+            const backShaderNode = appearanceNode .shaderNode || backMaterialNode .getShader (context .browser, context .shadow);
+
+            this .displayParticlesGeometry (gl, context, appearanceNode, backShaderNode,  true,  false, particleSystem);
+            this .displayParticlesGeometry (gl, context, appearanceNode, frontShaderNode, false, true,  particleSystem);
          }
       },
-      displayParticlesGeometry: function (gl, context, appearanceNode, shaderNode, back, front, particles, numParticles)
+      displayParticlesGeometry: function (gl, context, appearanceNode, shaderNode, back, front, particleSystem)
       {
-         if (shaderNode .getValid ())
+         if (shaderNode .isValid ())
          {
             const
                blendModeNode = appearanceNode .blendModeNode,
@@ -1135,52 +1098,50 @@ function (Fields,
 
             // Setup vertex attributes.
 
-            for (let i = 0, length = attribNodes .length; i < length; ++ i)
-               attribNodes [i] .enable (gl, shaderNode, attribBuffers [i]);
+            const outputParticles = particleSystem .outputParticles;
 
-            if (this .fogCoords)
-               shaderNode .enableFogDepthAttribute (gl, this .fogDepthBuffer);
+            if (this .updateParticles)
+            {
+               this .updateParticles = false;
 
-            if (this .colorMaterial)
-               shaderNode .enableColorAttribute (gl, this .colorBuffer);
+               outputParticles .vertexArrayObject .update ();
+            }
 
-            shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers);
-            shaderNode .enableNormalAttribute   (gl, this .normalBuffer);
-            shaderNode .enableVertexAttribute   (gl, this .vertexBuffer);
+            if (outputParticles .vertexArrayObject .enable (gl, shaderNode))
+            {
+               const particleStride = particleSystem .particleStride;
 
-            // Draw depending on wireframe, solid and transparent.
+               shaderNode .enableParticleAttribute       (gl, outputParticles, particleStride, particleSystem .particleOffset, 1);
+               shaderNode .enableParticleMatrixAttribute (gl, outputParticles, particleStride, particleSystem .matrixOffset,   1);
 
-            const
-               modelViewMatrix = context .modelViewMatrix,
-               x               = modelViewMatrix [12],
-               y               = modelViewMatrix [13],
-               z               = modelViewMatrix [14];
+               for (let i = 0, length = attribNodes .length; i < length; ++ i)
+                  attribNodes [i] .enable (gl, shaderNode, attribBuffers [i]);
 
-            if (shaderNode .wireframe)
-            {
-               // Points and Wireframes.
+               if (this .fogCoords)
+                  shaderNode .enableFogDepthAttribute (gl, this .fogDepthBuffer, 0, 0);
 
-               for (let p = 0; p < numParticles; ++ p)
-               {
-                  const particle = particles [p];
+               if (this .colorMaterial)
+                  shaderNode .enableColorAttribute (gl, this .colorBuffer, 0, 0);
 
-                  modelViewMatrix [12] = x;
-                  modelViewMatrix [13] = y;
-                  modelViewMatrix [14] = z;
+               shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers, 0, 0);
+               shaderNode .enableNormalAttribute   (gl, this .normalBuffer,    0, 0);
+               shaderNode .enableVertexAttribute   (gl, this .vertexBuffer,    0, 0);
+            }
 
-                  Matrix4 .prototype .translate .call (modelViewMatrix, particle .position);
+            // Draw depending on wireframe, solid and transparent.
 
-                  shaderNode .setParticle (gl, particle, modelViewMatrix);
+            if (shaderNode .wireframe)
+            {
+               // Points and Wireframes.
 
-                  if (shaderNode .primitiveMode === gl .POINTS)
-                  {
-                     gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
-                  }
-                  else
-                  {
-                     for (let i = 0, length = this .vertexCount; i < length; i += 3)
-                        gl .drawArrays (shaderNode .primitiveMode, i, 3);
-                  }
+               if (shaderNode .primitiveMode === gl .POINTS)
+               {
+                  gl .drawArraysInstanced (shaderNode .primitiveMode, 0, this .vertexCount, particleSystem .numParticles);
+               }
+               else
+               {
+                  for (let i = 0, length = this .vertexCount; i < length; i += 3)
+                     gl .drawArraysInstanced (shaderNode .primitiveMode, i, 3, particleSystem .numParticles);
                }
             }
             else
@@ -1193,31 +1154,18 @@ function (Fields,
                {
                   // Render transparent or back or front.
 
-                  for (let p = 0; p < numParticles; ++ p)
-                  {
-                     const particle = particles [p];
-
-                     modelViewMatrix [12] = x;
-                     modelViewMatrix [13] = y;
-                     modelViewMatrix [14] = z;
-
-                     Matrix4 .prototype .translate .call (modelViewMatrix, particle .position);
-
-                     shaderNode .setParticle (gl, particle, modelViewMatrix);
-
-                     gl .enable (gl .CULL_FACE);
+                  gl .enable (gl .CULL_FACE);
 
-                     if (back && !this .solid)
-                     {
-                        gl .cullFace (gl .FRONT);
-                        gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
-                     }
+                  if (back && !this .solid)
+                  {
+                     gl .cullFace (gl .FRONT);
+                     gl .drawArraysInstanced (shaderNode .primitiveMode, 0, this .vertexCount, particleSystem .numParticles);
+                  }
 
-                     if (front)
-                     {
-                        gl .cullFace (gl .BACK);
-                        gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
-                     }
+                  if (front)
+                  {
+                     gl .cullFace (gl .BACK);
+                     gl .drawArraysInstanced (shaderNode .primitiveMode, 0, this .vertexCount, particleSystem .numParticles);
                   }
                }
                else
@@ -1229,35 +1177,10 @@ function (Fields,
                   else
                      gl .disable (gl .CULL_FACE);
 
-                  for (let p = 0; p < numParticles; ++ p)
-                  {
-                     const particle = particles [p];
-
-                     modelViewMatrix [12] = x;
-                     modelViewMatrix [13] = y;
-                     modelViewMatrix [14] = z;
-
-                     Matrix4 .prototype .translate .call (modelViewMatrix, particle .position);
-
-                     shaderNode .setParticle (gl, particle, modelViewMatrix);
-
-                     gl .drawArrays (shaderNode .primitiveMode, 0, this .vertexCount);
-                  }
+                  gl .drawArraysInstanced (shaderNode .primitiveMode, 0, this .vertexCount, particleSystem .numParticles);
                }
             }
 
-            for (const attribNode of attribNodes)
-               attribNode .disable (gl, shaderNode);
-
-            if (this .fogCoords)
-               shaderNode .disableFogDepthAttribute (gl);
-
-            if (this .colorMaterial)
-               shaderNode .disableColorAttribute (gl);
-
-            shaderNode .disableTexCoordAttribute (gl);
-            shaderNode .disableNormalAttribute   (gl);
-
             if (blendModeNode)
                blendModeNode .disable (gl);
          }