x_ite 5.0.3 → 6.1.0

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

@@ -49,15 +49,27 @@
 
 define ([
    "x_ite/Components/Rendering/X3DGeometryNode",
+   "x_ite/Rendering/VertexArray",
+   "standard/Math/Geometry/ViewVolume",
+   "standard/Math/Geometry/Box3",
+   "standard/Math/Geometry/Line2",
    "standard/Math/Geometry/Line3",
    "standard/Math/Numbers/Vector2",
    "standard/Math/Numbers/Vector3",
+   "standard/Math/Numbers/Vector4",
+   "standard/Math/Numbers/Matrix2",
    "standard/Math/Numbers/Matrix4",
 ],
 function (X3DGeometryNode,
+          VertexArray,
+          ViewVolume,
+          Box3,
+          Line2,
           Line3,
           Vector2,
           Vector3,
+          Vector4,
+          Matrix2,
           Matrix4)
 {
 "use strict";
@@ -67,174 +79,354 @@ function (X3DGeometryNode,
       if (!this .getExecutionContext ())
          X3DGeometryNode .call (this, executionContext);
 
-      const browser = this .getBrowser ();
+      const
+         browser = this .getBrowser (),
+         gl      = browser .getContext ();
+
+      this .transformVertexArrayObject = new VertexArray ();
+      this .thickVertexArrayObject     = new VertexArray ();
+      this .trianglesBuffer            = gl .createBuffer ();
+      this .trianglesTexCoordBuffers   = new Array (browser .getMaxTextures ()) .fill (this .trianglesBuffer);
 
       this .setGeometryType (1);
-      this .setPrimitiveMode (browser .getContext () .LINES);
+      this .setPrimitiveMode (gl .LINES);
       this .setSolid (false);
    }
 
    X3DLineGeometryNode .prototype = Object .assign (Object .create (X3DGeometryNode .prototype),
    {
       constructor: X3DLineGeometryNode,
-      intersectsLine: (function ()
+      updateVertexArrays: function ()
       {
-         const PICK_DISTANCE_FACTOR = 1 / 300;
+         X3DGeometryNode .prototype .updateVertexArrays .call (this);
 
+         this .transformVertexArrayObject .update ();
+         this .thickVertexArrayObject     .update ();
+      },
+      intersectsLine: (function ()
+      {
          const
-            point1    = new Vector3 (0, 0, 0),
-            point2    = new Vector3 (0, 0, 0),
-            line      = new Line3 (Vector3 .Zero, Vector3 .zAxis),
-            point     = new Vector3 (0, 0, 0),
-            vector    = new Vector3 (0, 0, 0),
-            clipPoint = new Vector3 (0, 0, 0);
-
-         return function (hitRay, clipPlanes, modelViewMatrix, intersections)
+            bbox                      = new Box3 (),
+            min                       = new Vector3 (0, 0, 0),
+            max                       = new Vector3 (0, 0, 0),
+            screenScale1_             = new Vector3 (0, 0, 0),
+            screenScale2_             = new Vector3 (0, 0, 0),
+            modelViewProjectionMatrix = new Matrix4 (),
+            point1                    = new Vector3 (0, 0, 0),
+            point2                    = new Vector3 (0, 0, 0),
+            projected1                = new Vector2 (0, 0),
+            projected2                = new Vector2 (0, 0),
+            projected                 = new Line2 (Vector2 .Zero, Vector2 .yAxis),
+            closest                   = new Vector2 (0, 0),
+            ray                       = new Line3 (Vector3 .Zero, Vector3 .zAxis),
+            line                      = new Line3 (Vector3 .Zero, Vector3 .zAxis),
+            point                     = new Vector3 (0, 0, 0),
+            rotation                  = new Matrix2 (),
+            clipPoint                 = new Vector3 (0, 0, 0);
+
+         return function (hitRay, renderObject, invModelViewMatrix, appearanceNode, intersections)
          {
-            if (this .intersectsBBox (hitRay, 1))
+            const
+               modelViewMatrix    = renderObject .getModelViewMatrix () .get (),
+               viewport           = renderObject .getViewVolume () .getViewport (),
+               extents            = bbox .assign (this .getBBox ()) .multRight (modelViewMatrix) .getExtents (min, max),
+               linePropertiesNode = appearanceNode .getLineProperties (),
+               lineWidth1_2       = Math .max (1.5, linePropertiesNode .getApplied () ? linePropertiesNode .getLinewidthScaleFactor () / 2 : 0),
+               screenScale1       = renderObject .getViewpoint () .getScreenScale (min, viewport, screenScale1_), // in m/px
+               offsets1           = invModelViewMatrix .multDirMatrix (screenScale1 .multiply (lineWidth1_2)),
+               screenScale2       = renderObject .getViewpoint () .getScreenScale (max, viewport, screenScale2_), // in m/px
+               offsets2           = invModelViewMatrix .multDirMatrix (screenScale2 .multiply (lineWidth1_2));
+
+            if (this .intersectsBBox (hitRay, offsets1 .abs () .max (offsets2 .abs ())))
             {
-               const vertices = this .getVertices ();
+               const
+                  pointer          = renderObject .getBrowser () .getPointer (),
+                  projectionMatrix = renderObject .getProjectionMatrix () .get (),
+                  clipPlanes       = renderObject .getLocalObjects (),
+                  vertices         = this .getVertices (),
+                  numVertices      = vertices .length;
+
+               modelViewProjectionMatrix .assign (modelViewMatrix) .multRight (projectionMatrix);
 
-               for (let i = 0, length = vertices .length; i < length; i += 8)
+               for (let i = 0; i < numVertices; i += 8)
                {
                   point1 .set (vertices [i + 0], vertices [i + 1], vertices [i + 2]);
                   point2 .set (vertices [i + 4], vertices [i + 5], vertices [i + 6]);
 
-                  line .setPoints (point1, point2);
+                  ViewVolume .projectPointMatrix (point1, modelViewProjectionMatrix, viewport, projected1);
+                  ViewVolume .projectPointMatrix (point2, modelViewProjectionMatrix, viewport, projected2);
 
-                  if (line .getClosestPointToLine (hitRay, point))
+                  projected .setPoints (projected1, projected2);
+
+                  if (projected .getClosestPointToPoint (pointer, closest))
                   {
-                     if (line .getPerpendicularVectorToLine (hitRay, vector) .abs () < hitRay .point .distance (point) * PICK_DISTANCE_FACTOR)
-                     {
-                        const distance = point1 .distance (point2);
+                     const
+                        distance  = projected1 .distance (projected2),
+                        distance1 = projected1 .distance (closest),
+                        distance2 = projected2 .distance (closest);
 
-                        if (point1 .distance (point) <= distance && point2 .distance (point) <= distance)
+                     if (distance1 <= distance && distance2 <= distance)
+                     {
+                        if (closest .distance (pointer) <= lineWidth1_2)
                         {
-                           if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (point)), clipPlanes))
-                              continue;
+                           if (clipPlanes .length)
+                           {
+                              if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (closest)), clipPlanes))
+                                 continue;
+                           }
+
+                           const
+                              direction = projected .direction,
+                              texCoordY = rotation .set (direction .x, direction .y, -direction .y, direction .x) .inverse () .multVecMatrix (pointer .copy () .subtract (closest)),
+                              texCoord  = texCoordY .set (distance1 / distance, (texCoordY .y / lineWidth1_2 + 1) / 2),
+                              normal    = point2 .copy () .subtract (point1) .normalize ();
 
-                           intersections .push ({ texCoord: new Vector2 (0, 0), normal: new Vector3 (0, 0, 0), point: point .copy () });
-                           return true;
+                           ViewVolume .unProjectRay (closest .x, closest .y, modelViewMatrix, projectionMatrix, viewport, ray);
+
+                           line .setPoints (point1, point2) .getClosestPointToLine (ray, point);
+
+                           intersections .push ({ texCoord: texCoord, normal: normal, point: point .copy () });
                         }
                      }
                   }
                }
             }
 
-            return false;
+            return intersections .length;
          };
       })(),
+      intersectsLineWithGeometry: function ()
+      {
+         return false;
+      },
       intersectsBox: function (box, clipPlanes, modelViewMatrix)
       {
          return false;
       },
-      transfer: function ()
+      buildTexCoords: function ()
       {
          // Line stipple support.
 
-         const
-            texCoords = this .getTexCoords (),
-            vertices  = this .getVertices ();
-
-         this .getMultiTexCoords () .push (texCoords);
+         const texCoords = this .getTexCoords ();
 
-         for (let i = 0, length = vertices .length; i < length; i += 8)
+         if (texCoords .getValue () .length !== this .getVertices () .length)
          {
-            texCoords .push (vertices [i],
-                             vertices [i + 1],
-                             vertices [i + 2],
-                             vertices [i + 3],
-                             vertices [i],
-                             vertices [i + 1],
-                             vertices [i + 2],
-                             vertices [i + 3]);
-         }
+            const
+               gl       = this .getBrowser () .getContext (),
+               numLines = this .getVertices () .length / 8;
+
+            texCoords .length = this .getVertices () .length;
 
-         texCoords .shrinkToFit ();
+            texCoords .fill (0);
+            texCoords .shrinkToFit ();
 
-         X3DGeometryNode .prototype .transfer .call (this);
+            gl .bindBuffer (gl .ARRAY_BUFFER, this .trianglesBuffer);
+            gl .bufferData (gl .ARRAY_BUFFER, new Float32Array (13 * 6 * numLines), gl .DYNAMIC_DRAW);
+         }
+
+         this .getMultiTexCoords () .push (texCoords);
       },
-      display: function (gl, context)
+      updateLengthSoFar: (function ()
       {
-         try
+         const
+            modelViewProjectionMatrix = new Matrix4 (),
+            point0                    = new Vector4 (0, 0, 0),
+            point1                    = new Vector4 (0, 0, 0),
+            projectedPoint0           = new Vector2 (0, 0),
+            projectedPoint1           = new Vector2 (0, 0);
+
+         return function (gl, context)
          {
             const
-               browser        = context .browser,
-               appearanceNode = context .shapeNode .getAppearance (),
-               shaderNode     = appearanceNode .shaderNode || browser .getLineShader ();
+               viewport         = context .renderer .getViewVolume () .getViewport (),
+               projectionMatrix = context .renderer .getProjectionMatrix () .get (),
+               texCoordArray    = this .getTexCoords () .getValue (),
+               vertices         = this .getVertices (),
+               numVertices      = vertices .length;
+
+            modelViewProjectionMatrix .assign (context .modelViewMatrix) .multRight (projectionMatrix);
+
+            let lengthSoFar = 0;
 
-            if (shaderNode .getValid ())
+            for (let i = 0; i < numVertices; i += 8)
             {
-               const
-                  blendModeNode = appearanceNode .blendModeNode,
-                  attribNodes   = this .attribNodes,
-                  attribBuffers = this .attribBuffers;
+               point0 .set (vertices [i],     vertices [i + 1], vertices [i + 2], vertices [i + 3]);
+               point1 .set (vertices [i + 4], vertices [i + 5], vertices [i + 6], vertices [i + 7]);
 
-               if (blendModeNode)
-                  blendModeNode .enable (gl);
+               ViewVolume .projectPointMatrix (point0, modelViewProjectionMatrix, viewport, projectedPoint0);
+               ViewVolume .projectPointMatrix (point1, modelViewProjectionMatrix, viewport, projectedPoint1);
 
-               // Setup shader.
+               texCoordArray [i]     = projectedPoint1 .x;
+               texCoordArray [i + 1] = projectedPoint1 .y;
 
-               shaderNode .enable (gl);
-               shaderNode .setLocalUniforms (gl, context);
+               texCoordArray [i + 4] = projectedPoint0 .x;
+               texCoordArray [i + 5] = projectedPoint0 .y;
+               texCoordArray [i + 6] = lengthSoFar;
 
-               // Setup vertex attributes.
+               lengthSoFar += projectedPoint1 .subtract (projectedPoint0) .magnitude ();
+            }
 
-               for (let i = 0, length = attribNodes .length; i < length; ++ i)
-                  attribNodes [i] .enable (gl, shaderNode, attribBuffers [i]);
+            gl .bindBuffer (gl .ARRAY_BUFFER, this .texCoordBuffers [0]);
+            gl .bufferData (gl .ARRAY_BUFFER, texCoordArray, gl .DYNAMIC_DRAW);
+         };
+      })(),
+      display: (function ()
+      {
+         const
+            matrix                            = new Matrix4 (),
+            modelViewProjectionMatrixArray    = new Float32Array (16),
+            invModelViewProjectionMatrixArray = new Float32Array (16);
 
-               if (this .fogCoords)
-                  shaderNode .enableFogDepthAttribute (gl, this .fogDepthBuffer);
+         return function (gl, context)
+         {
+            const
+               browser            = context .browser,
+               appearanceNode     = context .shapeNode .getAppearance (),
+               linePropertiesNode = appearanceNode .getLineProperties (),
+               shaderNode         = appearanceNode .getShader () || browser .getLineShader (),
+               blendModeNode      = appearanceNode .getBlendMode (),
+               attribNodes        = this .getAttrib (),
+               attribBuffers      = this .getAttribBuffers ();
+
+            if (linePropertiesNode .getApplied () && linePropertiesNode .getLinetype () !== 1)
+               this .updateLengthSoFar (gl, context);
+
+            if (linePropertiesNode .getMustTransformLines ())
+            {
+               const transformShaderNode = browser .getLineTransformShader ();
 
-               if (this .colorMaterial)
-                  shaderNode .enableColorAttribute (gl, this .colorBuffer);
+               if (transformShaderNode .isValid ())
+               {
+                  const
+                     viewport         = context .renderer .getViewVolume () .getViewport (),
+                     projectionMatrix = context .renderer .getProjectionMatrix () .get (),
+                     primitiveMode    = shaderNode .getPrimitiveMode (gl .TRIANGLES);
 
-               if (this .getMultiTexCoords () .length)
-                  shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers, true);
+                  modelViewProjectionMatrixArray .set (matrix .assign (context .modelViewMatrix) .multRight (projectionMatrix));
+                  invModelViewProjectionMatrixArray .set (matrix .inverse ());
 
-               shaderNode .enableVertexAttribute (gl, this .vertexBuffer);
+                  // Start
 
-               // WireFrames are always solid so only one drawing call is needed.
+                  transformShaderNode .enable (gl);
 
-               gl .drawArrays (shaderNode .primitiveMode === gl .POINTS ? gl .POINTS : this .primitiveMode, 0, this .vertexCount);
+                  gl .uniform4f (transformShaderNode .viewport, viewport .x, viewport .y, viewport .z, viewport .w);
+                  gl .uniformMatrix4fv (transformShaderNode .modelViewProjectionMatrix,    false, modelViewProjectionMatrixArray);
+                  gl .uniformMatrix4fv (transformShaderNode .invModelViewProjectionMatrix, false, invModelViewProjectionMatrixArray);
+                  gl .uniform1f (transformShaderNode .scale, linePropertiesNode .getLinewidthScaleFactor () / 2);
 
-               for (const attribNode of attribNodes)
-                  attribNode .disable (gl, shaderNode);
+                  // Setup vertex attributes.
 
-               if (this .fogCoords)
-                  shaderNode .disableFogDepthAttribute (gl);
+                  if (this .transformVertexArrayObject .enable (gl, shaderNode))
+                  {
+                     const
+                        fogDepthStride  = 2 * Float32Array .BYTES_PER_ELEMENT,
+                        fogDepthOffset0 = 0,
+                        fogDepthOffset1 = 1 * Float32Array .BYTES_PER_ELEMENT,
+                        colorStride     = 8 * Float32Array .BYTES_PER_ELEMENT,
+                        colorOffset0    = 0,
+                        colorOffset1    = 4 * Float32Array .BYTES_PER_ELEMENT,
+                        texCoordStride  = 8 * Float32Array .BYTES_PER_ELEMENT,
+                        texCoordOffset0 = 0,
+                        texCoordOffset1 = 4 * Float32Array .BYTES_PER_ELEMENT,
+                        vertexStride    = 8 * Float32Array .BYTES_PER_ELEMENT,
+                        vertexOffset0   = 0,
+                        vertexOffset1   = 4 * Float32Array .BYTES_PER_ELEMENT;
+
+                     // for (let i = 0, length = attribNodes .length; i < length; ++ i)
+                     //    attribNodes [i] .enable (gl, shaderNode, attribBuffers [i]);
+
+                     if (this .fogCoords)
+                     {
+                        transformShaderNode .enableFloatAttrib (gl, "x3d_FogDepth0", this .fogDepthBuffer, 1, fogDepthStride, fogDepthOffset0);
+                        transformShaderNode .enableFloatAttrib (gl, "x3d_FogDepth1", this .fogDepthBuffer, 1, fogDepthStride, fogDepthOffset1);
+                     }
 
-               if (this .colorMaterial)
-                  shaderNode .disableColorAttribute (gl);
+                     if (this .colorMaterial)
+                     {
+                        transformShaderNode .enableFloatAttrib (gl, "x3d_Color0", this .colorBuffer, 4, colorStride, colorOffset0);
+                        transformShaderNode .enableFloatAttrib (gl, "x3d_Color1", this .colorBuffer, 4, colorStride, colorOffset1);
+                     }
 
-               if (this .getMultiTexCoords () .length)
-                  shaderNode .disableTexCoordAttribute (gl);
+                     transformShaderNode .enableFloatAttrib (gl, "x3d_TexCoord0", this .texCoordBuffers [0], 4, texCoordStride, texCoordOffset0);
+                     transformShaderNode .enableFloatAttrib (gl, "x3d_TexCoord1", this .texCoordBuffers [0], 4, texCoordStride, texCoordOffset1);
 
-               if (blendModeNode)
-                  blendModeNode .disable (gl);
-            }
-         }
-         catch (error)
-         {
-            // Catch error from setLocalUniforms.
-            console .error (error);
-         }
-      },
-      displayParticles: function (gl, context, particles, numParticles)
-      {
-         try
-         {
-            const
-               browser        = context .browser,
-               appearanceNode = context .shapeNode .getAppearance (),
-               shaderNode     = appearanceNode .shaderNode || this .getShader (browser);
+                     transformShaderNode .enableFloatAttrib (gl, "x3d_Vertex0", this .vertexBuffer, 4, vertexStride, vertexOffset0);
+                     transformShaderNode .enableFloatAttrib (gl, "x3d_Vertex1", this .vertexBuffer, 4, vertexStride, vertexOffset1);
+                  }
+
+                  // Transform lines.
+
+                  gl .bindTransformFeedback (gl .TRANSFORM_FEEDBACK, browser .getLineTransformFeedback ());
+                  gl .bindBufferBase (gl .TRANSFORM_FEEDBACK_BUFFER, 0, this .trianglesBuffer);
+                  gl .enable (gl .RASTERIZER_DISCARD);
+                  gl .beginTransformFeedback (gl .POINTS);
+                  gl .drawArraysInstanced (gl .POINTS, 0, this .vertexCount / 2, 2);
+                  gl .endTransformFeedback ();
+                  gl .disable (gl .RASTERIZER_DISCARD);
+                  gl .bindTransformFeedback (gl .TRANSFORM_FEEDBACK, null);
+
+                  // DEBUG
+
+                  // const data = new Float32Array (13 * 6 * this .vertexCount / 2);
+                  // gl .bindBuffer (gl .ARRAY_BUFFER, this .trianglesBuffer);
+                  // gl .getBufferSubData (gl .ARRAY_BUFFER, 0, data);
+                  // console .log (data);
+
+                  // Render triangles.
+
+                  if (blendModeNode)
+                     blendModeNode .enable (gl);
+
+                  // Setup shader.
+
+                  shaderNode .enable (gl);
+                  shaderNode .setLocalUniforms (gl, context);
+
+                  // Setup vertex attributes.
+
+                  if (this .thickVertexArrayObject .enable (gl, shaderNode))
+                  {
+                     const
+                        stride         = 13 * Float32Array .BYTES_PER_ELEMENT,
+                        fogCoordOffset = 0,
+                        colorOffset    = 1 * Float32Array .BYTES_PER_ELEMENT,
+                        texCoordOffset = 5 * Float32Array .BYTES_PER_ELEMENT,
+                        vertexOffset   = 9 * Float32Array .BYTES_PER_ELEMENT;
+
+                     // for (let i = 0, length = attribNodes .length; i < length; ++ i)
+                     //    attribNodes [i] .enable (gl, shaderNode, attribBuffers [i]);
+
+                     if (this .fogCoords)
+                        shaderNode .enableFogDepthAttribute (gl, this .trianglesBuffer, stride, fogCoordOffset);
+
+                     if (this .colorMaterial)
+                        shaderNode .enableColorAttribute (gl, this .trianglesBuffer, stride, colorOffset);
+
+                     shaderNode .enableTexCoordAttribute (gl, this .trianglesTexCoordBuffers, stride, texCoordOffset);
+                     shaderNode .enableVertexAttribute   (gl, this .trianglesBuffer,          stride, vertexOffset);
+
+                     gl .bindBuffer (gl .ARRAY_BUFFER, null);
+                  }
+
+                  if (shaderNode .getWireframe ())
+                  {
+                     for (let i = 0, length = this .vertexCount * 3; i < length; i += 3)
+                        gl .drawArrays (primitiveMode, i, 3);
+                  }
+                  else
+                  {
+                     gl .frontFace (gl .CCW);
+                     gl .enable (gl .CULL_FACE);
+                     gl .drawArrays (primitiveMode, 0, this .vertexCount * 3);
+                  }
 
-            if (shaderNode .getValid ())
+                  if (blendModeNode)
+                     blendModeNode .disable (gl);
+               }
+            }
+            else if (shaderNode .isValid ())
             {
-               const
-                  blendModeNode = appearanceNode .blendModeNode,
-                  attribNodes   = this .attribNodes,
-                  attribBuffers = this .attribBuffers;
+               const primitiveMode = shaderNode .getPrimitiveMode (this .primitiveMode);
 
                if (blendModeNode)
                   blendModeNode .enable (gl);
@@ -246,63 +438,81 @@ function (X3DGeometryNode,
 
                // 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);
 
-               if (this .getMultiTexCoords () .length)
-                  shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers);
+                  shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers, 0, 0);
+                  shaderNode .enableVertexAttribute   (gl, this .vertexBuffer,    0, 0);
+               }
 
-               shaderNode .enableVertexAttribute   (gl, this .vertexBuffer);
+               gl .drawArrays (primitiveMode, 0, this .vertexCount);
 
-               // Wireframes are always solid so only one drawing call is needed.
+               if (blendModeNode)
+                  blendModeNode .disable (gl);
+            }
+         };
+      })(),
+      displayParticles: function (gl, context, particleSystem)
+      {
+         const
+            browser        = context .browser,
+            appearanceNode = context .shapeNode .getAppearance (),
+            shaderNode     = appearanceNode .getShader () || browser .getLineShader (),
+            blendModeNode  = appearanceNode .getBlendMode (),
+            attribNodes    = this .getAttrib (),
+            attribBuffers  = this .getAttribBuffers (),
+            primitiveMode  = shaderNode .getPrimitiveMode (this .primitiveMode);
+
+         if (shaderNode .isValid ())
+         {
+            if (blendModeNode)
+               blendModeNode .enable (gl);
 
-               const
-                  modelViewMatrix = context .modelViewMatrix,
-                  x               = modelViewMatrix [12],
-                  y               = modelViewMatrix [13],
-                  z               = modelViewMatrix [14],
-                  primitiveMode   = shaderNode .primitiveMode === gl .POINTS ? gl .POINTS : this .primitiveMode;
+            // Setup shader.
 
-               for (let p = 0; p < numParticles; ++ p)
-               {
-                  const particle = particles [p];
+            shaderNode .enable (gl);
+            shaderNode .setLocalUniforms (gl, context);
 
-                  modelViewMatrix [12] = x;
-                  modelViewMatrix [13] = y;
-                  modelViewMatrix [14] = z;
+            // Setup vertex attributes.
 
-                  Matrix4 .prototype .translate .call (modelViewMatrix, particle .position);
+            const outputParticles = particleSystem .outputParticles;
 
-                  shaderNode .setParticle (gl, particle, modelViewMatrix);
+            if (outputParticles .vertexArrayObject .update (this .updateParticles) .enable (gl, shaderNode))
+            {
+               const particleStride = particleSystem .particleStride;
 
-                  gl .drawArrays (primitiveMode, 0, this .vertexCount);
-               }
+               shaderNode .enableParticleAttribute (gl, outputParticles, particleStride, particleSystem .particleOffset, 1);
+               shaderNode .enableParticleMatrixAttribute (gl, outputParticles, particleStride, particleSystem .matrixOffset, 1);
 
-               for (const attribNode of attribNodes)
-                  attribNode .disable (gl, shaderNode);
+               for (let i = 0, length = attribNodes .length; i < length; ++ i)
+                  attribNodes [i] .enable (gl, shaderNode, attribBuffers [i]);
 
                if (this .fogCoords)
-                  shaderNode .disableFogDepthAttribute (gl);
+                  shaderNode .enableFogDepthAttribute (gl, this .fogDepthBuffer, 0, 0);
 
                if (this .colorMaterial)
-                  shaderNode .disableColorAttribute (gl);
+                  shaderNode .enableColorAttribute (gl, this .colorBuffer, 0, 0);
 
-               shaderNode .disableTexCoordAttribute (gl);
+               shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers, 0, 0);
+               shaderNode .enableVertexAttribute   (gl, this .vertexBuffer,    0, 0);
 
-               if (blendModeNode)
-                  blendModeNode .disable (gl);
+               this .updateParticles = false;
             }
-         }
-         catch (error)
-         {
-            // Catch error from setLocalUniforms.
-            console .error (error);
+
+            // Wireframes are always solid so only one drawing call is needed.
+
+            gl .drawArraysInstanced (primitiveMode, 0, this .vertexCount, particleSystem .numParticles);
+
+            if (blendModeNode)
+               blendModeNode .disable (gl);
          }
       },
    });