x_ite 5.0.2 → 6.0.0

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

@@ -49,15 +49,21 @@
 
 define ([
    "x_ite/Components/Rendering/X3DGeometryNode",
+   "x_ite/Rendering/VertexArray",
+   "standard/Math/Geometry/ViewVolume",
    "standard/Math/Geometry/Line3",
    "standard/Math/Numbers/Vector2",
    "standard/Math/Numbers/Vector3",
+   "standard/Math/Numbers/Vector4",
    "standard/Math/Numbers/Matrix4",
 ],
 function (X3DGeometryNode,
+          VertexArray,
+          ViewVolume,
           Line3,
           Vector2,
           Vector3,
+          Vector4,
           Matrix4)
 {
 "use strict";
@@ -67,7 +73,14 @@ 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);
@@ -77,25 +90,44 @@ function (X3DGeometryNode,
    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)
+            modelViewProjectionMatrix    = new Matrix4 (),
+            invModelViewProjectionMatrix = new Matrix4 (),
+            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),
+            win                          = new Vector3 (0, 0, 0),
+            radius                       = new Vector3 (0, 0, 0),
+            clipPoint                    = new Vector3 (0, 0, 0);
+
+         return function (hitRay, renderObject, appearanceNode, intersections)
          {
             if (this .intersectsBBox (hitRay, 1))
             {
-               const vertices = this .getVertices ();
-
-               for (let i = 0, length = vertices .length; i < length; i += 8)
+               const
+                  modelViewMatrix    = renderObject .getModelViewMatrix () .get (),
+                  projectionMatrix   = renderObject .getProjectionMatrix () .get (),
+                  viewport           = renderObject .getViewVolume () .getViewport (),
+                  linePropertiesNode = appearanceNode .getLineProperties (),
+                  lineWidth1_2       = linePropertiesNode .getApplied () ? Math .max (1, linePropertiesNode .getLinewidthScaleFactor () / (2 * Math .SQRT2)) : 1,
+                  vertices           = this .getVertices (),
+                  numVertices        = vertices .length;
+
+               modelViewProjectionMatrix .assign (modelViewMatrix) .multRight (projectionMatrix);
+               invModelViewProjectionMatrix .assign (modelViewProjectionMatrix) .inverse ();
+
+               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]);
@@ -104,14 +136,23 @@ function (X3DGeometryNode,
 
                   if (line .getClosestPointToLine (hitRay, point))
                   {
-                     if (line .getPerpendicularVectorToLine (hitRay, vector) .abs () < hitRay .point .distance (point) * PICK_DISTANCE_FACTOR)
+                     const distance = point1 .distance (point2);
+
+                     if (point1 .distance (point) <= distance && point2 .distance (point) <= distance)
                      {
-                        const distance = point1 .distance (point2);
+                        ViewVolume .projectPointMatrix (point, modelViewProjectionMatrix, viewport, win);
 
-                        if (point1 .distance (point) <= distance && point2 .distance (point) <= distance)
+                        win .x += lineWidth1_2;
+                        win .y += lineWidth1_2;
+
+                        ViewVolume .unProjectPointMatrix (win .x, win .y, win .z, invModelViewProjectionMatrix, viewport, radius);
+
+                        if (line .getPerpendicularVectorToLine (hitRay, vector) .abs () < point .distance (radius))
                         {
-                           if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (point)), clipPlanes))
+                           if (this .isClipped (modelViewMatrix .multVecMatrix (clipPoint .assign (point)), renderObject .getLocalObjects ()))
+                           {
                               continue;
+                           }
 
                            intersections .push ({ texCoord: new Vector2 (0, 0), normal: new Vector3 (0, 0, 0), point: point .copy () });
                            return true;
@@ -128,114 +169,220 @@ function (X3DGeometryNode,
       {
          return false;
       },
-      transfer: function ()
+      buildTexCoords: function ()
       {
          // Line stipple support.
 
-         const
-            texCoords = this .getTexCoords (),
-            vertices  = this .getVertices ();
+         const texCoords = this .getTexCoords ();
 
-         this .getMultiTexCoords () .push (texCoords);
-
-         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 .shrinkToFit ();
+            texCoords .length = this .getVertices () .length;
 
-         X3DGeometryNode .prototype .transfer .call (this);
+            texCoords .fill (0);
+            texCoords .shrinkToFit ();
+
+            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) .abs ();
+            }
 
-               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 .shaderNode || browser .getLineShader (),
+               blendModeNode      = appearanceNode .blendModeNode,
+               attribNodes        = this .attribNodes,
+               attribBuffers      = this .attribBuffers;
+
+            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 ();
 
-               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);
+                  }
 
-            if (shaderNode .getValid ())
-            {
-               const
-                  blendModeNode = appearanceNode .blendModeNode,
-                  attribNodes   = this .attribNodes,
-                  attribBuffers = this .attribBuffers;
+                  // 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);
+                  }
+
+                  gl .frontFace (gl .CCW);
+                  gl .enable (gl .CULL_FACE);
+                  gl .drawArrays (shaderNode .primitiveMode === gl .POINTS ? gl .POINTS : gl .TRIANGLES, 0, this .vertexCount * 3);
+
+                  if (blendModeNode)
+                     blendModeNode .disable (gl);
+               }
+            }
+            else if (shaderNode .isValid ())
+            {
                if (blendModeNode)
                   blendModeNode .enable (gl);
 
@@ -246,63 +393,87 @@ 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 (shaderNode .primitiveMode === gl .POINTS ? gl .POINTS : this .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 .shaderNode || browser .getLineShader (),
+            blendModeNode  = appearanceNode .blendModeNode,
+            attribNodes    = this .attribNodes,
+            attribBuffers  = this .attribBuffers;
+
+         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 (this .updateParticles)
+            {
+               this .updateParticles = false;
 
-                  gl .drawArrays (primitiveMode, 0, this .vertexCount);
-               }
+               outputParticles .vertexArrayObject .update ();
+            }
 
-               for (const attribNode of attribNodes)
-                  attribNode .disable (gl, shaderNode);
+            if (outputParticles .vertexArrayObject .enable (gl, shaderNode))
+            {
+               const particleStride = particleSystem .particleStride;
+
+               shaderNode .enableParticleAttribute (gl, outputParticles, particleStride, particleSystem .particleOffset, 1);
+               shaderNode .enableParticleMatrixAttribute (gl, outputParticles, particleStride, particleSystem .matrixOffset, 1);
+
+               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 .disableTexCoordAttribute (gl);
+                  shaderNode .enableColorAttribute (gl, this .colorBuffer, 0, 0);
 
-               if (blendModeNode)
-                  blendModeNode .disable (gl);
+               shaderNode .enableTexCoordAttribute (gl, this .texCoordBuffers, 0, 0);
+               shaderNode .enableVertexAttribute   (gl, this .vertexBuffer,    0, 0);
             }
-         }
-         catch (error)
-         {
-            // Catch error from setLocalUniforms.
-            console .error (error);
+
+            // Wireframes are always solid so only one drawing call is needed.
+
+            const primitiveMode = shaderNode .primitiveMode === gl .POINTS ? gl .POINTS : this .primitiveMode;
+
+            gl .drawArraysInstanced (primitiveMode, 0, this .vertexCount, particleSystem .numParticles);
+
+            if (blendModeNode)
+               blendModeNode .disable (gl);
          }
       },
    });