x_ite 8.10.1 → 8.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x_ite",
-	"version": "8.10.1",
+	"version": "8.11.0",
 	"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>",
@@ -72,7 +72,7 @@
 		"opentype.js": "^1.3.4",
 		"pako": "^2.1.0",
 		"string-replace-webpack-plugin": "^0.1.3",
-		"webpack": "^5.88.1",
+		"webpack": "^5.88.2",
 		"webpack-cli": "^5.1.4",
 		"webpack-shell-plugin-next": "^2.3.1"
 	},

package/src/assets/shaders/Types.glsl.js

@@ -52,7 +52,9 @@ struct x3d_LinePropertiesParameters
 {
    mediump int   linetype;
    mediump float lineStippleScale;
+   #if defined (X3D_STYLE_PROPERTIES_TEXTURE)
    sampler2D     texture;
+   #endif
 };
 #endif
 
@@ -64,7 +66,9 @@ struct x3d_FillPropertiesParameters
    bool          filled;
    bool          hatched;
    mediump vec3  hatchColor;
+   #if defined (X3D_STYLE_PROPERTIES_TEXTURE)
    sampler2D     texture;
+   #endif
    mediump float scale;
 };
 #endif

package/src/assets/shaders/webgl1/include/Hatch.glsl.js

@@ -8,13 +8,12 @@ getHatchColor (vec4 color)
 {
    vec4 finalColor = x3d_FillProperties .filled ? color : vec4 (0.0);
 
-   if (x3d_FillProperties .hatched)
-   {
+   #if defined (X3D_STYLE_PROPERTIES_TEXTURE)
       vec4 hatch = texture2D (x3d_FillProperties .texture, gl_FragCoord .xy / (32.0 * x3d_FillProperties .scale));
 
       hatch .rgb *= x3d_FillProperties .hatchColor;
       finalColor  = mix (finalColor, hatch, hatch .a);
-   }
+   #endif
 
    return finalColor;
 }

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

@@ -0,0 +1,29 @@
+export default /* glsl */ `#version 300 es
+
+precision highp float;
+precision highp int;
+precision highp sampler2D;
+
+/* sum(rgb * a), prod(1 - a) */
+uniform sampler2D x3d_AccumRevealageTexture;
+
+/* sum(a) */
+uniform sampler2D x3d_AlphaTexture;
+
+out vec4 x3d_FragColor;
+
+void
+main ()
+{
+   ivec2 fragCoord = ivec2 (gl_FragCoord .xy);
+   vec4  accum     = texelFetch (x3d_AccumRevealageTexture, fragCoord, 0);
+
+   if (accum .a >= 1.0)
+     discard;
+
+   float alpha     = texelFetch (x3d_AlphaTexture, fragCoord, 0) .r;
+   float revealage = 1.0 - accum .a;
+
+   x3d_FragColor = vec4 (revealage * accum .rgb / clamp (alpha, 0.001, 50000.0), revealage);
+}
+`;

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

@@ -0,0 +1,14 @@
+export default /* glsl */ `#version 300 es
+
+precision highp float;
+precision highp int;
+precision highp sampler2D;
+
+layout(location = 0) in vec4 x3d_Vertex;
+
+void
+main ()
+{
+   gl_Position = x3d_Vertex;
+}
+`;

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

@@ -74,7 +74,12 @@ in vec3 vertex;
    in float depth;
 #endif
 
-out vec4 x3d_FragColor;
+#if defined (X3D_ORDER_INDEPENDENT_TRANSPARENCY)
+   layout(location = 0) out vec4 x3d_FragData0;
+   layout(location = 1) out vec4 x3d_FragData1;
+#else
+   out vec4 x3d_FragColor;
+#endif
 
 #pragma X3D include "Texture.glsl"
 #pragma X3D include "ClipPlanes.glsl"
@@ -86,6 +91,14 @@ out vec4 x3d_FragColor;
 vec4
 getMaterialColor ();
 
+#if defined (X3D_ORDER_INDEPENDENT_TRANSPARENCY)
+float
+weight (const in float z, const in float a)
+{
+   return clamp (pow (min (1.0, a * 10.0) + 0.01, 3.0) * 1e8 * pow (1.0 - z * 0.9, 3.0), 1e-2, 3e3);
+}
+#endif
+
 void
 fragment_main ()
 {
@@ -128,7 +141,16 @@ fragment_main ()
       finalColor .a = 1.0;
    #endif
 
-   x3d_FragColor = finalColor;
+   #if defined (X3D_ORDER_INDEPENDENT_TRANSPARENCY)
+      float w = weight (gl_FragCoord .z, finalColor .a);
+
+      finalColor.rgb *= finalColor .a;
+
+      x3d_FragData0 = vec4 (finalColor .rgb * w, finalColor .a);
+      x3d_FragData1 = vec4 (finalColor .a * w);
+   #else
+      x3d_FragColor = finalColor;
+   #endif
 
    #if defined (X3D_LOGARITHMIC_DEPTH_BUFFER)
       //https://outerra.blogspot.com/2013/07/logarithmic-depth-buffer-optimizations.html

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

@@ -8,13 +8,12 @@ getHatchColor (vec4 color)
 {
    vec4 finalColor = x3d_FillProperties .filled ? color : vec4 (0.0);
 
-   if (x3d_FillProperties .hatched)
-   {
+   #if defined (X3D_STYLE_PROPERTIES_TEXTURE)
       vec4 hatch = texture (x3d_FillProperties .texture, gl_FragCoord .xy / (32.0 * x3d_FillProperties .scale));
 
       hatch .rgb *= x3d_FillProperties .hatchColor;
       finalColor  = mix (finalColor, hatch, hatch .a);
-   }
+   #endif
 
    return finalColor;
 }

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

@@ -25,8 +25,10 @@ stipple ()
       #endif
    #endif
 
-   if (x3d_LineProperties .linetype != 16)
-   {
+   #if defined (X3D_STYLE_PROPERTIES_TEXTURE)
+      if (x3d_LineProperties .linetype == 16)
+         return;
+
       int   linetype = x3d_LineProperties .linetype;
       int   height   = textureSize (x3d_LineProperties .texture, 0) .y;
       float t        = 1.0 - float (linetype * 2 + 1) / float (height * 2);
@@ -34,7 +36,7 @@ stipple ()
 
       if (alpha != 1.0)
          discard;
-   }
+   #endif
 }
 
 #endif

package/src/bookmarks.js

@@ -148,6 +148,8 @@ const Bookmarks = (() =>
 
          const t0 = performance .now ();
 
+         this .browser .getBrowserOptions () .reset ();
+
          await this .browser .loadURL (new X3D .MFString (url)) .catch (Function .prototype);
 
          const loadTime = (performance .now () - t0) / 1000;
@@ -158,15 +160,15 @@ const Bookmarks = (() =>
       {
          try
          {
-            $("#animations") .empty ();
+            $("#toolbar") .empty ();
 
             $("<span></span>")
                .text ("▣")
                .attr ("title", "View All")
                .on ("click", () => this .browser .viewAll (0))
-               .appendTo ($("#animations"));
+               .appendTo ($("#toolbar"));
 
-            $("<span></span>") .addClass ("separator") .appendTo ($("#animations"));
+            $("<span></span>") .addClass ("separator") .appendTo ($("#toolbar"));
 
             const animations = this .browser .currentScene .getExportedNode ("Animations");
 
@@ -190,19 +192,104 @@ const Bookmarks = (() =>
                      timeSensor .loop      = true;
                      timeSensor .startTime = Date .now () / 1000;
                   })
-                  .appendTo ($("#animations"));
+                  .appendTo ($("#toolbar"));
             }
 
             $("<span></span>")
                .text ("◼")
                .attr ("title", "Stop")
                .on ("click", stop)
-               .appendTo ($("#animations"));
+               .appendTo ($("#toolbar"));
          }
          catch (error)
          {
             // console .log (error)
          }
+
+         $("<span></span>") .addClass ("separator") .appendTo ($("#toolbar"));
+
+         const antialiased = $("<span></span>")
+            .text ("antialiased")
+            .attr ("title", "Toggle antialiasing.")
+            .addClass (this .browser .getBrowserOption ("Antialiased") ? "selected" : "")
+            .on ("click", () =>
+            {
+               const value = !this .browser .getBrowserOption ("Antialiased");
+
+               this .browser .setBrowserOption ("Antialiased", value);
+
+               antialiased .toggleClass ("selected");
+            })
+            .appendTo ($("#toolbar"));
+
+         $("<span></span>") .addClass ("dot") .appendTo ($("#toolbar"));
+
+         const contentScale = $("<span></span>")
+            .text ("contentScale 1.0")
+            .attr ("title", "Toggle contentScale between 0.1, 1.0 and 2.0.")
+            .on ("click", () =>
+            {
+               const
+                  index = ((contentScale .attr ("index") ?? 1) + 1) % 3,
+                  value = [0.1, 1, 2][index];
+
+               this .browser .setBrowserOption ("ContentScale", value);
+
+               contentScale
+                  .attr ("index", index)
+                  .text ("contentScale " + value .toFixed (1))
+            })
+            .appendTo ($("#toolbar"));
+
+         $("<span></span>") .addClass ("dot") .appendTo ($("#toolbar"));
+
+         const pixelated = $("<span></span>")
+            .text ("pixelated")
+            .attr ("title", "Set CSS property image-rendering to pixelated.")
+            .addClass ($("#browser") .css ("image-rendering") === "pixelated" ? "selected" : "")
+            .on ("click", () =>
+            {
+               $("#browser") .css ("image-rendering", pixelated .hasClass ("selected") ? "unset" : "pixelated");
+
+               pixelated .toggleClass ("selected");
+            })
+            .appendTo ($("#toolbar"));
+
+         $("<span></span>") .addClass ("separator") .appendTo ($("#toolbar"));
+
+         const oit = $("<span></span>")
+            .text ("oit")
+            .attr ("title", "Toggle order independent transparency.")
+            .addClass (this .browser .getBrowserOption ("OrderIndependentTransparency") ? "selected" : "")
+            .on ("click", () =>
+            {
+               const value = !this .browser .getBrowserOption ("OrderIndependentTransparency");
+
+               this .browser .setBrowserOption ("OrderIndependentTransparency", value);
+
+               oit .toggleClass ("selected");
+            })
+            .appendTo ($("#toolbar"));
+
+         $("<span></span>") .addClass ("dot") .appendTo ($("#toolbar"));
+
+         const log = $("<span></span>")
+            .text ("log")
+            .attr ("title", "Toggle logarithmic depth buffer.")
+            .addClass (this .browser .getBrowserOption ("LogarithmicDepthBuffer") ? "selected" : "")
+            .on ("click", () =>
+            {
+               const value = !this .browser .getBrowserOption ("LogarithmicDepthBuffer");
+
+               this .browser .setBrowserOption ("LogarithmicDepthBuffer", value);
+
+               log .toggleClass ("selected");
+            })
+            .appendTo ($("#toolbar"));
+
+         // this .browser .setBrowserOption ("Antialiased", false)
+         // this .browser .setBrowserOption ("OrderIndependentTransparency", true)
+         // this .browser .setBrowserOption ("ContentScale", -1)
       }
    });
 

package/src/examples.js

@@ -1,5 +1,6 @@
 const X_ITE_EXAMPLES = [
    { component: "CADGeometry", test: "QuadSet" },
+   { component: "Core", test: "glTF" },
    { component: "Core", test: "OBJ" },
    { component: "Core", test: "STL" },
    { component: "CubeMapTexturing", test: "ComposedCubeMapTexture" },

package/src/standard/Math/Numbers/Quaternion.js

@@ -163,6 +163,179 @@ Object .assign (Quaternion .prototype,
 
       return matrix;
    },
+   setEuler (x, y, z, order = "XYZ")
+   {
+		// http://www.mathworks.com/matlabcentral/fileexchange/20696-function-to-convert-between-dcm-euler-angles-quaternions-and-euler-vectors/content/SpinCalc.m
+
+      const
+		   c1 = Math .cos (x / 2),
+		   c2 = Math .cos (y / 2),
+		   c3 = Math .cos (z / 2),
+		   s1 = Math .sin (x / 2),
+		   s2 = Math .sin (y / 2),
+		   s3 = Math .sin (z / 2);
+
+		switch (order)
+      {
+			case "XYZ":
+				this .x = s1 * c2 * c3 + c1 * s2 * s3;
+				this .y = c1 * s2 * c3 - s1 * c2 * s3;
+				this .z = c1 * c2 * s3 + s1 * s2 * c3;
+				this .w = c1 * c2 * c3 - s1 * s2 * s3;
+				break;
+
+         case "ZYX":
+            this .x = s1 * c2 * c3 - c1 * s2 * s3;
+            this .y = c1 * s2 * c3 + s1 * c2 * s3;
+            this .z = c1 * c2 * s3 - s1 * s2 * c3;
+            this .w = c1 * c2 * c3 + s1 * s2 * s3;
+            break;
+
+			case "YXZ":
+				this .x = s1 * c2 * c3 + c1 * s2 * s3;
+				this .y = c1 * s2 * c3 - s1 * c2 * s3;
+				this .z = c1 * c2 * s3 - s1 * s2 * c3;
+				this .w = c1 * c2 * c3 + s1 * s2 * s3;
+				break;
+
+			case "ZXY":
+				this .x = s1 * c2 * c3 - c1 * s2 * s3;
+				this .y = c1 * s2 * c3 + s1 * c2 * s3;
+				this .z = c1 * c2 * s3 + s1 * s2 * c3;
+				this .w = c1 * c2 * c3 - s1 * s2 * s3;
+				break;
+
+			case "YZX":
+				this .x = s1 * c2 * c3 + c1 * s2 * s3;
+				this .y = c1 * s2 * c3 + s1 * c2 * s3;
+				this .z = c1 * c2 * s3 - s1 * s2 * c3;
+				this .w = c1 * c2 * c3 - s1 * s2 * s3;
+				break;
+
+			case "XZY":
+				this .x = s1 * c2 * c3 - c1 * s2 * s3;
+				this .y = c1 * s2 * c3 - s1 * c2 * s3;
+				this .z = c1 * c2 * s3 + s1 * s2 * c3;
+				this .w = c1 * c2 * c3 + s1 * s2 * s3;
+				break;
+		}
+
+		return this;
+	},
+   getEuler (euler = [ ], order = "XYZ")
+   {
+      const { 0: m0, 1: m1, 2: m2, 3: m3, 4: m4, 5: m5, 6: m6, 7: m7, 8: m8 } = this .getMatrix (m);
+
+		switch (order)
+      {
+			case "XYZ":
+         {
+				euler [1] = Math .asin (Algorithm .clamp (m6, -1, 1));
+
+				if (Math .abs (m6) < 0.9999999)
+            {
+					euler [0] = Math .atan2 (-m7, m8);
+					euler [2] = Math .atan2 (-m3, m0);
+				}
+            else
+            {
+					euler [0] = Math .atan2 (m5, m4);
+					euler [2] = 0;
+				}
+
+				break;
+         }
+			case "ZYX":
+         {
+				euler [1] = Math .asin (- Algorithm .clamp (m2, -1, 1));
+
+				if (Math .abs (m2) < 0.9999999)
+            {
+					euler [0] = Math .atan2 (m5, m8);
+					euler [2] = Math .atan2 (m1, m0);
+				}
+            else
+            {
+					euler [0] = 0;
+					euler [2] = Math .atan2 (-m3, m4);
+				}
+
+				break;
+         }
+			case "YXZ":
+         {
+				euler [0] = Math .asin (- Algorithm .clamp (m7, -1, 1));
+
+				if (Math .abs (m7) < 0.9999999)
+            {
+					euler [1] = Math .atan2 (m6, m8);
+					euler [2] = Math .atan2 (m1, m4);
+
+				}
+            else
+            {
+					euler [1] = Math .atan2 (-m2, m0);
+					euler [2] = 0;
+				}
+
+				break;
+         }
+			case "ZXY":
+         {
+				euler [0] = Math .asin (Algorithm .clamp (m5, -1, 1));
+
+				if (Math .abs (m5) < 0.9999999)
+            {
+					euler [1] = Math .atan2 (-m2, m8);
+					euler [2] = Math .atan2 (-m3, m4);
+				}
+            else
+            {
+					euler [1] = 0;
+					euler [2] = Math .atan2 (m1, m0);
+				}
+
+				break;
+         }
+			case "YZX":
+         {
+				euler [2] = Math .asin (Algorithm .clamp (m1, -1, 1));
+
+				if (Math .abs (m1) < 0.9999999)
+            {
+					euler [0] = Math .atan2 (-m7, m4);
+					euler [1] = Math .atan2 (-m2, m0);
+				}
+            else
+            {
+					euler [0] = 0;
+					euler [1] = Math .atan2 (m6, m8);
+				}
+
+				break;
+         }
+			case "XZY":
+         {
+				euler [2] = Math .asin (- Algorithm .clamp (m3, -1, 1));
+
+				if (Math .abs (m3) < 0.9999999)
+            {
+					euler [0] = Math .atan2 (m5, m4);
+					euler [1] = Math .atan2 (m6, m0);
+
+				}
+            else
+            {
+					euler [0] = Math .atan2 (-m7, m8);
+					euler [1] = 0;
+				}
+
+				break;
+         }
+		}
+
+		return euler;
+   },
    isReal ()
    {
       return !(this .x || this .y || this .z);
@@ -253,31 +426,35 @@ Object .assign (Quaternion .prototype,
    },
    multVecQuat (vector)
    {
+      // https://en.wikipedia.org/wiki/Conversion_between_quaternions_and_Euler_angles#Vector_rotation
+
       const
          { x: qx, y: qy, z: qz, w: qw } = this,
          { x: vx, y: vy, z: vz } = vector,
-         a = qw * qw - qx * qx - qy * qy - qz * qz,
-         b = 2 * (vx * qx + vy * qy + vz * qz),
-         c = 2 * qw;
+         tx = 2 * (qy * vz - qz * vy),
+         ty = 2 * (qz * vx - qx * vz),
+         tz = 2 * (qx * vy - qy * vx);
 
-      vector .x = a * vx + b * qx + c * (qy * vz - qz * vy);
-      vector .y = a * vy + b * qy + c * (qz * vx - qx * vz);
-      vector .z = a * vz + b * qz + c * (qx * vy - qy * vx);
+      vector .x += qw * tx + qy * tz - qz * ty;
+      vector .y += qw * ty + qz * tx - qx * tz;
+      vector .z += qw * tz + qx * ty - qy * tx;
 
       return vector;
    },
    multQuatVec (vector)
    {
+      // https://en.wikipedia.org/wiki/Conversion_between_quaternions_and_Euler_angles#Vector_rotation
+
       const
          { x: qx, y: qy, z: qz, w: qw } = this,
          { x: vx, y: vy, z: vz } = vector,
-         a = qw * qw - qx * qx - qy * qy - qz * qz,
-         b = 2 * (vx * qx + vy * qy + vz * qz),
-         c = 2 * qw;
+         tx = 2 * (qz * vy - qy * vz),
+         ty = 2 * (qx * vz - qz * vx),
+         tz = 2 * (qy * vx - qx * vy);
 
-      vector .x = a * vx + b * qx - c * (qy * vz - qz * vy);
-      vector .y = a * vy + b * qy - c * (qz * vx - qx * vz);
-      vector .z = a * vz + b * qz - c * (qx * vy - qy * vx);
+      vector .x += qw * tx - qy * tz + qz * ty;
+      vector .y += qw * ty - qz * tx + qx * tz;
+      vector .z += qw * tz - qx * ty + qy * tx;
 
       return vector;
    },
@@ -482,6 +659,7 @@ Object .assign (Quaternion,
 const
    t1 = new Quaternion (0, 0, 0, 1),
    t2 = new Quaternion (0, 0, 0, 1),
-   t3 = new Quaternion (0, 0, 0, 1);
+   t3 = new Quaternion (0, 0, 0, 1),
+   m  = new Matrix3 ();
 
 export default Quaternion;

package/src/standard/Math/Numbers/Rotation4.js

@@ -303,6 +303,17 @@ Object .assign (Rotation4 .prototype,
    {
       return this [_quaternion] .getMatrix (matrix);
    },
+   setEuler (x, y, z, order = "XYZ")
+   {
+      // Quaternion is then already normalized.
+		this [_quaternion] .setEuler (x, y, z, order);
+      this .update ();
+		return this;
+	},
+   getEuler (euler = [ ], order = "XYZ")
+   {
+      return this [_quaternion] .getEuler (euler, order);
+   },
    equals (rotation)
    {
       return this [_quaternion] .equals (rotation [_quaternion]);
@@ -443,6 +454,18 @@ Object .defineProperties (Rotation4 .prototype,
 Object .assign (Rotation4,
 {
    Identity: new Rotation4 (),
+   fromQuaternion (quaternion)
+   {
+      return new Rotation4 () .setQuaternion (quaternion);
+   },
+   fromMatrix (matrix)
+   {
+      return new Rotation4 () .setMatrix (matrix);
+   },
+   fromEuler (x, y, z, order = "XYZ")
+   {
+      return new Rotation4 () .setEuler (x, y, z, order);
+   },
    spline (r0, r1, r2)
    {
       const copy = Object .create (this .prototype);

package/src/standard/Time/{MicroTime.js → Time.js}

@@ -47,38 +47,31 @@
 
 // Return a pseudo accurate timestamp.
 
-function microTime (now)
+const Time =
 {
-   let
-      offset = 0,
-      last   = 0;
-
-   return function ()
+   now: (function ()
    {
-      const current = now .call (this);
+      let
+         offset = 0,
+         last   = 0;
 
-      if (current > last)
+      return function ()
       {
-         offset = 0;
-         last   = current;
+         const current = Date .now ();
 
-         return current;
-      }
-      else
-      {
-         return last = current + (++ offset / 1000);
-      }
-   };
-}
+         if (current > last)
+         {
+            offset = 0;
+            last   = current;
 
-for (const object of [performance, Date])
-{
-   Object .defineProperty (object, "now",
-   {
-      value: microTime (object .now),
-      configurable: true,
-      writable: true,
-   });
-}
+            return current;
+         }
+         else
+         {
+            return last = current + (offset < 1000 ? ++ offset : offset) / 1000;
+         }
+      };
+   })(),
+};
 
-export default undefined;
+export default Time;