x_ite 8.9.6 → 8.10.1

package/docs/laboratory/gltf-sample-viewer.html

@@ -108,9 +108,11 @@ tags: [glTF, Sample, Viewer]
 <script>
 /* find ./docs/glTF/ -type f  -name "*.gltf" -o -name "*.glb" | sort */
 const models = [
+   "Animated Bee/animated_bee.glb",
    "Bonsai 1/Bonsai 1.gltf",
    "Bus Stop 1/Bus Stop 1.gltf",
    "NeilArmstrong/NeilArmstrong.glb",
+   "Walking Alien/Walking Alien.gltf",
    "YetiWarrior/scene.gltf",
 ];
 
@@ -392,18 +394,25 @@ async function loadURL (filename, server, event)
       {
          const timeSensor = group .children [0];
 
-         timeSensor .loop     = true;
-         timeSensor .stopTime = Date .now () / 1000;
-
          $("<input></input>")
             .attr ("id", "animation" + i)
             .attr ("type", "checkbox")
             .on ("change", event =>
             {
-               if ($(event .target) .is (":checked"))
-                  timeSensor .startTime = Date .now () / 1000;
-               else
-                  timeSensor .stopTime = Date .now () / 1000;
+               for (const group of animations .children)
+                  group .children [0] .stopTime = Date .now () / 1000;
+
+               if (!event .target .checked)
+                  return;
+
+               $("#animations") .children () .each ((i, element) =>
+               {
+                  if (element !== event .target)
+                     element .checked = false;
+               });
+
+               timeSensor .loop      = true;
+               timeSensor .startTime = Date .now () / 1000;
             })
             .appendTo ($("#animations"));
 
@@ -423,7 +432,7 @@ async function loadURL (filename, server, event)
    { }
 
    if (!Browser .getActiveViewpoint () ._description .getValue ())
-      Browser .viewAll ();
+      Browser .viewAll (0);
 }
 
 createList ("glTF Random Models",          models);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x_ite",
-	"version": "8.9.6",
+	"version": "8.10.1",
 	"description": "X_ITE X3D Browser, view and manipulate X3D and VRML scenes in HTML.",
 	"homepage": "https://create3000.github.io/x_ite/",
 	"author": "Holger Seelig <holger.seelig@gmail.com>",

package/src/assets/shaders/webgl1/Depth.vs.js

@@ -14,6 +14,10 @@ varying vec3 vertex;
 void
 main ()
 {
+   vec4 position = x3d_ModelViewMatrix * x3d_Vertex;
+
+   vertex = position .xyz;
+
    #if defined (X3D_GEOMETRY_0D)
       #if defined (X3D_STYLE_PROPERTIES)
          gl_PointSize = max (pointSize = getPointSize (vertex), 2.0);
@@ -22,10 +26,6 @@ main ()
       #endif
    #endif
 
-   vec4 position = x3d_ModelViewMatrix * x3d_Vertex;
-
-   vertex = position .xyz;
-
    gl_Position = x3d_ProjectionMatrix * position;
 }
 `;

package/src/assets/shaders/webgl1/Pointing.fs.js

@@ -30,7 +30,7 @@ main ()
       if (getPointColor (vec4 (1.0)) .a < 0.5)
          discard;
 
-      setPointTexCoords ();
+      texCoord0 = vec4 (gl_PointCoord .x, 1.0 - gl_PointCoord .y, 0.0, 1.0);
    #endif
 
    gl_FragData [0] = vec4 (vertex, x3d_Id);

package/src/assets/shaders/webgl2/Depth.vs.js

@@ -11,12 +11,19 @@ in vec4 x3d_Vertex;
 
 out vec3 vertex;
 
+#pragma X3D include "include/Utils.glsl"
+#pragma X3D include "include/Skin.glsl"
 #pragma X3D include "include/Particle.glsl"
 #pragma X3D include "include/PointSize.glsl"
 
 void
 main ()
 {
+   vec4 x3d_TransformedVertex = getParticleVertex (getSkinVertex (x3d_Vertex, vec3 (0.0)));
+   vec4 position              = x3d_ModelViewMatrix * x3d_TransformedVertex;
+
+   vertex = position .xyz;
+
    #if defined (X3D_GEOMETRY_0D)
       #if defined (X3D_STYLE_PROPERTIES)
          gl_PointSize = max (pointSize = getPointSize (vertex), 2.0);
@@ -25,10 +32,6 @@ main ()
       #endif
    #endif
 
-   vec4 position = x3d_ModelViewMatrix * getVertex (x3d_Vertex);
-
-   vertex = position .xyz;
-
    gl_Position = x3d_ProjectionMatrix * position;
 }
 `;

package/src/assets/shaders/webgl2/LineTransform.vs.js

@@ -7,12 +7,24 @@ uniform mat4  modelViewProjectionMatrix;
 uniform mat4  invModelViewProjectionMatrix;
 uniform float scale;
 
-in vec3 x3d_LineStipple0; in float x3d_FogDepth0; in vec4 x3d_Color0; in vec3 x3d_Normal0; in vec4 x3d_Vertex0;
-in vec3 x3d_LineStipple1; in float x3d_FogDepth1; in vec4 x3d_Color1; in vec3 x3d_Normal1; in vec4 x3d_Vertex1;
-
-out vec3 lineStipple0; out float fogDepth0; out vec4 color0; out vec3 normal0; out vec4 vertex0;
-out vec3 lineStipple1; out float fogDepth1; out vec4 color1; out vec3 normal1; out vec4 vertex1;
-out vec3 lineStipple2; out float fogDepth2; out vec4 color2; out vec3 normal2; out vec4 vertex2;
+in float x3d_CoordIndex0;
+in vec3 x3d_LineStipple0;
+in float x3d_FogDepth0;
+in vec4 x3d_Color0;
+in vec3 x3d_Normal0;
+in vec4 x3d_Vertex0;
+
+in float x3d_CoordIndex1;
+in vec3 x3d_LineStipple1;
+in float x3d_FogDepth1;
+in vec4 x3d_Color1;
+in vec3 x3d_Normal1;
+in vec4 x3d_Vertex1;
+
+// Registered in X3DShapeContext.
+out float coordIndex0; out vec3 lineStipple0; out float fogDepth0; out vec4 color0; out vec3 normal0; out vec4 vertex0;
+out float coordIndex1; out vec3 lineStipple1; out float fogDepth1; out vec4 color1; out vec3 normal1; out vec4 vertex1;
+out float coordIndex2; out vec3 lineStipple2; out float fogDepth2; out vec4 color2; out vec3 normal2; out vec4 vertex2;
 
 vec3
 projectPoint (const in vec4 point, const in mat4 modelViewProjectionMatrix, const in vec4 viewport)
@@ -56,9 +68,9 @@ main ()
       vec4 p1 = unProjectPoint (vec3 (pq1 .xy, projected0 .z), invModelViewProjectionMatrix, viewport);
       vec4 p2 = unProjectPoint (vec3 (pq2 .xy, projected1 .z), invModelViewProjectionMatrix, viewport);
 
-      lineStipple0 = x3d_LineStipple0; fogDepth0 = x3d_FogDepth0; color0 = x3d_Color0; normal0 = x3d_Normal0; vertex0 = p0;
-      lineStipple1 = x3d_LineStipple0; fogDepth1 = x3d_FogDepth0; color1 = x3d_Color0; normal1 = x3d_Normal0; vertex1 = p1;
-      lineStipple2 = x3d_LineStipple1; fogDepth2 = x3d_FogDepth1; color2 = x3d_Color1; normal2 = x3d_Normal1; vertex2 = p2;
+      coordIndex0 = x3d_CoordIndex0; lineStipple0 = x3d_LineStipple0; fogDepth0 = x3d_FogDepth0; color0 = x3d_Color0; normal0 = x3d_Normal0; vertex0 = p0;
+      coordIndex1 = x3d_CoordIndex0; lineStipple1 = x3d_LineStipple0; fogDepth1 = x3d_FogDepth0; color1 = x3d_Color0; normal1 = x3d_Normal0; vertex1 = p1;
+      coordIndex2 = x3d_CoordIndex1; lineStipple2 = x3d_LineStipple1; fogDepth2 = x3d_FogDepth1; color2 = x3d_Color1; normal2 = x3d_Normal1; vertex2 = p2;
    }
    else
    {
@@ -70,9 +82,9 @@ main ()
       vec4 p2 = unProjectPoint (vec3 (pq2 .xy, projected1 .z), invModelViewProjectionMatrix, viewport);
       vec4 p3 = unProjectPoint (vec3 (pq3 .xy, projected1 .z), invModelViewProjectionMatrix, viewport);
 
-      lineStipple0 = x3d_LineStipple0; fogDepth0 = x3d_FogDepth0; color0 = x3d_Color0; normal0 = x3d_Normal0; vertex0 = p0;
-      lineStipple1 = x3d_LineStipple1; fogDepth1 = x3d_FogDepth1; color1 = x3d_Color1; normal1 = x3d_Normal1; vertex1 = p2;
-      lineStipple2 = x3d_LineStipple1; fogDepth2 = x3d_FogDepth1; color2 = x3d_Color1; normal2 = x3d_Normal1; vertex2 = p3;
+      coordIndex0 = x3d_CoordIndex0; lineStipple0 = x3d_LineStipple0; fogDepth0 = x3d_FogDepth0; color0 = x3d_Color0; normal0 = x3d_Normal0; vertex0 = p0;
+      coordIndex1 = x3d_CoordIndex1; lineStipple1 = x3d_LineStipple1; fogDepth1 = x3d_FogDepth1; color1 = x3d_Color1; normal1 = x3d_Normal1; vertex1 = p2;
+      coordIndex2 = x3d_CoordIndex1; lineStipple2 = x3d_LineStipple1; fogDepth2 = x3d_FogDepth1; color2 = x3d_Color1; normal2 = x3d_Normal1; vertex2 = p3;
    }
 }
 `;

package/src/assets/shaders/webgl2/Pointing.fs.js

@@ -35,7 +35,7 @@ main ()
       if (getPointColor (vec4 (1.0)) .a < 0.5)
          discard;
 
-      setPointTexCoords ();
+      texCoord0 = vec4 (gl_PointCoord .x, 1.0 - gl_PointCoord .y, 0.0, 1.0);
    #endif
 
    #if defined (X3D_GEOMETRY_1D) && defined (X3D_STYLE_PROPERTIES)

package/src/assets/shaders/webgl2/Pointing.vs.js

@@ -31,31 +31,34 @@ out vec3 normal;
    out vec2       midPoint;
 #endif
 
+#pragma X3D include "include/Utils.glsl"
+#pragma X3D include "include/Skin.glsl"
 #pragma X3D include "include/Particle.glsl"
 #pragma X3D include "include/PointSize.glsl"
 
 void
 main ()
 {
-   #if defined (X3D_GEOMETRY_0D)
-      #if defined (X3D_STYLE_PROPERTIES)
-         gl_PointSize = max (pointSize = getPointSize (vertex), 2.0);
-      #else
-         gl_PointSize = 2.0;
-      #endif
-   #endif
-
    #if defined (X3D_GEOMETRY_1D) && defined (X3D_STYLE_PROPERTIES)
       lengthSoFar = x3d_LineStipple .z;
       startPoint  = x3d_LineStipple .xy;
       midPoint    = x3d_LineStipple .xy;
    #endif
 
-   vec4 position = x3d_ModelViewMatrix * getVertex (x3d_Vertex);
+   vec4 x3d_TransformedVertex = getParticleVertex (getSkinVertex (x3d_Vertex, vec3 (0.0)));
+   vec4 position              = x3d_ModelViewMatrix * x3d_TransformedVertex;
 
    vertex = position .xyz;
    normal = x3d_Normal;
 
+   #if defined (X3D_GEOMETRY_0D)
+      #if defined (X3D_STYLE_PROPERTIES)
+         gl_PointSize = max (pointSize = getPointSize (vertex), 2.0);
+      #else
+         gl_PointSize = 2.0;
+      #endif
+   #endif
+
    #if ! defined (X3D_GEOMETRY_0D) && ! defined (X3D_GEOMETRY_1D)
       texCoord0 = x3d_TexCoord0;
    #endif

package/src/assets/shaders/webgl2/include/Particle.glsl.js

@@ -7,17 +7,7 @@ uniform sampler2D x3d_TexCoordRamp;
 in vec4 x3d_Particle;
 
 vec4
-texelFetch (const in sampler2D sampler, const in int index, const in int lod)
-{
-   int   x = textureSize (sampler, lod) .x;
-   ivec2 p = ivec2 (index % x, index / x);
-   vec4  t = texelFetch (sampler, p, lod);
-
-   return t;
-}
-
-vec4
-getTexCoord (const in vec4 texCoord)
+getParticleTexCoord (const in vec4 texCoord)
 {
    const int map [6] = int [6] (0, 1, 2, 0, 2, 3);
 
@@ -26,19 +16,19 @@ getTexCoord (const in vec4 texCoord)
    return texelFetch (x3d_TexCoordRamp, index0 + map [gl_VertexID % 6], 0);
 }
 #else
-   #define getTexCoord(texCoord) (texCoord)
+   #define getParticleTexCoord(texCoord) (texCoord)
 #endif
 
 in mat4 x3d_ParticleMatrix;
 
 vec4
-getVertex (const in vec4 vertex)
+getParticleVertex (const in vec4 vertex)
 {
    return x3d_ParticleMatrix * vertex;
 }
 
 #else
-   #define getVertex(vertex) (vertex)
-   #define getTexCoord(texCoord) (texCoord)
+   #define getParticleVertex(vertex) (vertex)
+   #define getParticleTexCoord(texCoord) (texCoord)
 #endif
 `;

package/src/assets/shaders/webgl2/include/Skin.glsl.js

@@ -0,0 +1,88 @@
+export default /* glsl */ `
+#if defined (X3D_SKINNING)
+
+in float x3d_CoordIndex;
+
+uniform sampler2D x3d_JointsTexture;
+uniform sampler2D x3d_DisplacementsTexture;
+uniform sampler2D x3d_JointMatricesTexture;
+
+mat4
+getJointMatrix (const in int joint)
+{
+   vec4 a = texelFetch (x3d_JointMatricesTexture, joint * 8,     0);
+   vec4 b = texelFetch (x3d_JointMatricesTexture, joint * 8 + 1, 0);
+   vec4 c = texelFetch (x3d_JointMatricesTexture, joint * 8 + 2, 0);
+   vec4 d = texelFetch (x3d_JointMatricesTexture, joint * 8 + 3, 0);
+
+   return mat4 (a, b, c, d);
+}
+
+mat3
+getDisplacementJointMatrix (const in int joint)
+{
+   mat4 m = getJointMatrix (joint);
+
+   return mat3 (m [0] .xyz, m [1] .xyz, m [2] .xyz);
+}
+
+#if defined (X3D_NORMALS)
+vec3 skinNormal = vec3 (0.0);
+
+mat3
+getJointNormalMatrix (const in int joint)
+{
+   vec4 a = texelFetch (x3d_JointMatricesTexture, joint * 8 + 4, 0);
+   vec4 b = texelFetch (x3d_JointMatricesTexture, joint * 8 + 5, 0);
+   vec4 c = texelFetch (x3d_JointMatricesTexture, joint * 8 + 6, 0);
+
+   return mat3 (a .xyz, vec3 (a .w, b .xy), vec3 (b .zw, c .x));
+}
+#endif
+
+vec4
+getSkinVertex (const in vec4 vertex, const in vec3 normal)
+{
+   int   coordIndex2 = int (x3d_CoordIndex) * 2;
+   ivec4 joints      = ivec4 (texelFetch (x3d_JointsTexture, coordIndex2, 0));
+   vec4  weights     = texelFetch (x3d_JointsTexture, coordIndex2 + 1, 0);
+   int   width       = textureSize (x3d_DisplacementsTexture, 0) .x;
+   int   offset      = (width * width) / 2;
+   vec4  skin        = vertex;
+
+   for (int i = 0; i < 2; ++ i)
+   {
+      vec4  displacement = texelFetch (x3d_DisplacementsTexture, coordIndex2 + i,      0);
+      float weight       = texelFetch (x3d_DisplacementsTexture, coordIndex2 + offset, 0) [i];
+
+      skin .xyz += (getDisplacementJointMatrix (int (displacement .w)) * displacement .xyz) * weight;
+   }
+
+   for (int i = 0; i < 4; ++ i)
+      skin += (getJointMatrix (joints [i]) * vertex - vertex) * weights [i];
+
+   #if defined (X3D_NORMALS)
+   {
+      skinNormal = normal;
+
+      for (int i = 0; i < 4; ++ i)
+         skinNormal += (getJointNormalMatrix (joints [i]) * normal - normal) * weights [i];
+   }
+   #endif
+
+   return skin;
+}
+
+#if defined (X3D_NORMALS)
+vec3
+getSkinNormal (const in vec3)
+{
+   return skinNormal;
+}
+#endif
+
+#else
+   #define getSkinVertex(vertex,normal) (vertex)
+   #define getSkinNormal(normal) (normal)
+#endif
+`;

package/src/assets/shaders/webgl2/include/Utils.glsl.js

@@ -0,0 +1,13 @@
+export default /* glsl */ `
+#if defined (X3D_SKINNING) || defined (X3D_PARTICLE_SYSTEM)
+vec4
+texelFetch (const in sampler2D sampler, const in int index, const in int lod)
+{
+   int   x = textureSize (sampler, lod) .x;
+   ivec2 p = ivec2 (index % x, index / x);
+   vec4  t = texelFetch (sampler, p, lod);
+
+   return t;
+}
+#endif
+`;

package/src/assets/shaders/webgl2/include/Vertex.glsl.js

@@ -98,13 +98,22 @@ out vec3 vertex;
 
 // Main
 
+#pragma X3D include "Utils.glsl"
+#pragma X3D include "Skin.glsl"
 #pragma X3D include "Particle.glsl"
 #pragma X3D include "PointSize.glsl"
 
 void
 vertex_main ()
 {
-   vec4 position = x3d_ModelViewMatrix * getVertex (x3d_Vertex);
+   #if defined (X3D_NORMALS)
+      vec4 x3d_TransformedVertex = getParticleVertex (getSkinVertex (x3d_Vertex, x3d_Normal));
+      vec3 x3d_TransformedNormal = getSkinNormal (x3d_Normal);
+   #else
+      vec4 x3d_TransformedVertex = getParticleVertex (getSkinVertex (x3d_Vertex, vec3 (0.0)));
+   #endif
+
+   vec4 position = x3d_ModelViewMatrix * x3d_TransformedVertex;
 
    vertex = position .xyz;
 
@@ -133,33 +142,33 @@ vertex_main ()
    #if ! defined (X3D_GEOMETRY_0D) && ! defined (X3D_GEOMETRY_1D)
       #if defined (X3D_TEXTURE) || defined (X3D_MATERIAL_TEXTURES)
          #if X3D_NUM_TEXTURE_COORDINATES > 0
-            texCoord0 = getTexCoord (x3d_TexCoord0);
+            texCoord0 = getParticleTexCoord (x3d_TexCoord0);
          #endif
 
          #if X3D_NUM_TEXTURE_COORDINATES > 1
-            texCoord1 = getTexCoord (x3d_TexCoord1);
+            texCoord1 = getParticleTexCoord (x3d_TexCoord1);
          #endif
 
          #if X3D_NUM_TEXTURE_COORDINATES > 2
-            texCoord2 = getTexCoord (x3d_TexCoord2);
+            texCoord2 = getParticleTexCoord (x3d_TexCoord2);
          #endif
 
          #if X3D_NUM_TEXTURE_COORDINATES > 3
-            texCoord3 = getTexCoord (x3d_TexCoord3);
+            texCoord3 = getParticleTexCoord (x3d_TexCoord3);
          #endif
       #endif
    #endif
 
    #if defined (X3D_NORMALS)
-      normal = x3d_NormalMatrix * x3d_Normal;
+      normal = x3d_NormalMatrix * x3d_TransformedNormal;
 
       #if defined (X3D_TEXTURE) || defined (X3D_MATERIAL_TEXTURES)
-         localNormal = x3d_Normal;
+         localNormal = x3d_TransformedNormal;
       #endif
    #endif
 
    #if defined (X3D_TEXTURE) || defined (X3D_MATERIAL_TEXTURES)
-      localVertex = x3d_Vertex .xyz;
+      localVertex = x3d_TransformedVertex .xyz;
    #endif
 
    gl_Position = x3d_ProjectionMatrix * position;

package/src/bookmarks.js

@@ -54,11 +54,13 @@ const Bookmarks = (() =>
    {
       this .browser = browser;
       this .element = element;
+
+      browser .addBrowserCallback ("bookmarks", X3D .X3DConstants .INITIALIZED_EVENT, event => this .browserEvent (event));
    }
 
    Object .assign (Bookmarks .prototype,
    {
-      setup: function (array)
+      setup (array)
       {
          for (const bookmarks of array)
          {
@@ -120,7 +122,7 @@ const Bookmarks = (() =>
             this .browser .getLocalStorage () ["Bookmarks.scrollLeft"] = this .element .scrollLeft ();
          });
       },
-      loadURL: async function (url)
+      async loadURL (url)
       {
          const
             base  = url .replace (/(?:\.O)?\.[^\.]+$/, ""),
@@ -152,6 +154,56 @@ const Bookmarks = (() =>
 
          console .log (`Scene loaded in ${loadTime .toPrecision (3)}s.`)
       },
+      browserEvent (event)
+      {
+         try
+         {
+            $("#animations") .empty ();
+
+            $("<span></span>")
+               .text ("▣")
+               .attr ("title", "View All")
+               .on ("click", () => this .browser .viewAll (0))
+               .appendTo ($("#animations"));
+
+            $("<span></span>") .addClass ("separator") .appendTo ($("#animations"));
+
+            const animations = this .browser .currentScene .getExportedNode ("Animations");
+
+            const stop = function ()
+            {
+               for (const animation of animations .children)
+                  animation .children [0] .stopTime = Date .now () / 1000;
+            };
+
+            for (const animation of animations .children)
+            {
+               const timeSensor = animation .children [0];
+
+               $("<span></span>")
+                  .text ("▶")
+                  .attr ("title", timeSensor .description)
+                  .on ("click", () =>
+                  {
+                     stop ();
+
+                     timeSensor .loop      = true;
+                     timeSensor .startTime = Date .now () / 1000;
+                  })
+                  .appendTo ($("#animations"));
+            }
+
+            $("<span></span>")
+               .text ("◼")
+               .attr ("title", "Stop")
+               .on ("click", stop)
+               .appendTo ($("#animations"));
+         }
+         catch (error)
+         {
+            // console .log (error)
+         }
+      }
    });
 
    return Bookmarks;