x_ite 8.7.5 → 8.7.6

package/docs/_posts/components/VolumeRendering/VolumeData.md

@@ -81,7 +81,7 @@ Bounding box size is usually omitted, and can easily be calculated automatically
 
 ## Example
 
-<x3d-canvas src="https://create3000.github.io/media/examples/VolumeRendering/VolumeData/VolumeData.x3d"></x3d-canvas>
+<x3d-canvas src="https://create3000.github.io/media/examples/VolumeRendering/VolumeData/VolumeData.x3d" update="auto"></x3d-canvas>
 
 ## External Links
 

package/docs/_posts/components/X_ITE/BlendMode.md

@@ -87,7 +87,7 @@ Specifies the alpha blend equation, how the alpha component of the source and de
 
 ## Example
 
-<x3d-canvas src="https://create3000.github.io/media/examples/X_ITE/BlendMode/BlendMode.x3d"></x3d-canvas>
+<x3d-canvas src="https://create3000.github.io/media/examples/X_ITE/BlendMode/BlendMode.x3d" update="auto"></x3d-canvas>
 
 ## See Also
 

package/docs/_posts/custom-shaders.md

@@ -13,7 +13,7 @@ However, you will often want to perform special effects or special cases for you
 
 ## Example
 
-<x3d-canvas src="https://create3000.github.io/media/examples/X3D/WaterQuality/WaterQuality.x3d">
+<x3d-canvas src="https://create3000.github.io/media/examples/X3D/WaterQuality/WaterQuality.x3d" update="auto">
   <img src="https://create3000.github.io/media/images/water-quality.png" alt="Shader Example"/>
 </x3d-canvas>
 

package/docs/_posts/getting-started.md

@@ -10,6 +10,7 @@ x_ite: true
 <x3d-canvas
   class="teaser"
   src="/x_ite/assets/X3D/teaser/teaser.x3d"
+  update="auto"
   splashScreen="false"
   contextMenu="false"
   notifications="false"
@@ -739,14 +740,18 @@ A String value containing the URL to load on page load. If no *src* attribute is
 
 A Boolean value (`true` or `false`) to indicate whether the Timings Panel should be displayed. The default value for the *timings* attribute is restored from the previous session, otherwise it is `false`.
 
+### update
+
+A Boolean value (`true`, `false` or `auto`) to indicate whether browser events should be processed. The default value for the *update* attribute is `true`. A value of `true` will effectively call `Browser.beginUpdate`, a value of `false` will call `Browser.endUpdate`. If the value is `auto`, the effective value is determined by the visibility of the \<x3d-canvas\> element.
+
 ### url
 
 An MFString value of URLs to load on page load. If no *url* attribute is specified or the attribute is empty, an empty scene will be displayed. If both *src* and *url* attributes are given, the last given attribute takes precedence.
 
-### Example
+### Example of Use
 
 ```html
-<x3d-canvas cache="true" src="path/to/your/X3D/world.x3d"></x3d-canvas>
+<x3d-canvas src="path/to/your/X3D/world.x3d" cache="true" update="auto"></x3d-canvas>
 ```
 
 ### More Options

package/docs/_posts/reference/browser-services.md

@@ -215,6 +215,12 @@ Returns a browser option with the corresponding name.
          <td>LOW, MEDIUM, HIGH</td>
          <td>MEDIUM</td>
       </tr>
+      <tr>
+         <td>AutoUpdate</td>
+         <td>Whether the update control of the browser should be done automatically or not. (non standard)</td>
+         <td>Boolean</td>
+         <td>false</td>
+      </tr>
       <tr>
          <td>Cache</td>
          <td>Whether or not files should be cached. (non standard)</td>

package/docs/_posts/tutorials/adding-backgrounds.md

@@ -137,7 +137,7 @@ DEF Summer Background {
 
 ### Example
 
-<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/background1/background1.x3dv">
+<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/background1/background1.x3dv" update="auto">
   <img src="https://create3000.github.io/media/tutorials/scenes/background1/screenshot.png" alt="Background 1"/>
 </x3d-canvas>
 
@@ -257,7 +257,7 @@ DEF Summer Background {
 
 ### Example
 
-<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/background2/background2.x3dv">
+<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/background2/background2.x3dv" update="auto">
   <img src="https://create3000.github.io/media/tutorials/scenes/background2/screenshot.png" alt="Background 1"/>
 </x3d-canvas>
 

package/docs/_posts/tutorials/adding-sound.md

@@ -241,7 +241,7 @@ ROUTE C4.touchTime TO PitchC4.set_startTime
 
 ### Example
 
-<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/sound/sound.x3dv">
+<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/sound/sound.x3dv" update="auto">
   <img src="https://create3000.github.io/media/tutorials/scenes/sound/screenshot.png" alt="Sound"/>
 </x3d-canvas>
 

package/docs/_posts/tutorials/building-a-x3d-world.md

@@ -56,7 +56,7 @@ Shape {
 
 ### Example
 
-<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/cylinder1/cylinder1.x3dv">
+<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/cylinder1/cylinder1.x3dv" update="auto">
   <img src="https://create3000.github.io/media/tutorials/scenes/cylinder1/screenshot.png" alt="Cylinder"/>
 </x3d-canvas>
 

package/docs/_posts/tutorials/building-elevation-grids.md

@@ -163,7 +163,7 @@ Shape {
 
 ### Example
 
-<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/elevation-grid/elevation-grid.x3dv">
+<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/elevation-grid/elevation-grid.x3dv" update="auto">
   <img src="https://create3000.github.io/media/tutorials/scenes/elevation-grid/screenshot.png" alt="Elevation Grid"/>
 </x3d-canvas>
 

package/docs/_posts/tutorials/building-primitive-shapes.md

@@ -131,7 +131,7 @@ Shape {
 
 ### Example
 
-<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/cylinder1/cylinder1.x3dv">
+<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/cylinder1/cylinder1.x3dv" update="auto">
   <img src="https://create3000.github.io/media/tutorials/scenes/cylinder1/screenshot.png" alt="Cylinder"/>
 </x3d-canvas>
 
@@ -198,7 +198,7 @@ Shape {
 
 ### Example
 
-<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/multiple-shapes/multiple-shapes.x3dv">
+<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/multiple-shapes/multiple-shapes.x3dv" update="auto">
   <img src="https://create3000.github.io/media/tutorials/scenes/multiple-shapes/screenshot.png" alt="Multiple Shapes"/>
 </x3d-canvas>
 

package/docs/_posts/tutorials/controlling-appearance-with-materials.md

@@ -174,7 +174,7 @@ Shape {
 
 ### Example
 
-<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/box1/box1.x3dv">
+<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/box1/box1.x3dv" update="auto">
   <img src="https://create3000.github.io/media/tutorials/scenes/box1/screenshot.png" alt="Box 1"/>
 </x3d-canvas>
 

package/docs/_posts/tutorials/controlling-detail.md

@@ -118,7 +118,7 @@ LOD {
 
 ### Example
 
-<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/lod/lod.x3dv">
+<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/lod/lod.x3dv" update="auto">
   <img src="https://create3000.github.io/media/tutorials/scenes/lod/screenshot.png" alt="LOD"/>
 </x3d-canvas>
 

package/docs/_posts/tutorials/hello-world.md

@@ -19,7 +19,7 @@ In this tutorial, you will learn how to create a simple hello world scene with X
 
 ### Example
 
-<x3d-canvas src="https://create3000.github.io/media/tutorials/hello-world/hello-world.x3d">
+<x3d-canvas src="https://create3000.github.io/media/tutorials/hello-world/hello-world.x3d" update="auto">
   <img src="https://create3000.github.io/media/tutorials/hello-world/screenshot.png" alt="Hello World Image"/>
 </x3d-canvas>
 

package/docs/_posts/tutorials/naming-nodes.md

@@ -156,7 +156,7 @@ Transform {
 
 ### Example
 
-<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/dinette/dinette.x3dv">
+<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/dinette/dinette.x3dv" update="auto">
   <img src="https://create3000.github.io/media/tutorials/scenes/dinette/screenshot.png" alt="Dinette"/>
 </x3d-canvas>
 

package/docs/_posts/tutorials/writing-program-scripts-with-ecmascript.md

@@ -448,7 +448,7 @@ ROUTE Bouncer.value_changed  TO Ball.set_translation
 
 ### Example
 
-<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/bouncer/bouncer.x3dv">
+<x3d-canvas src="https://create3000.github.io/media/tutorials/scenes/bouncer/bouncer.x3dv" update="auto">
   <img src="https://create3000.github.io/media/tutorials/scenes/bouncer/screenshot.png" alt="Bouncer"/>
 </x3d-canvas>
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x_ite",
-	"version": "8.7.5",
+	"version": "8.7.6",
 	"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>",
@@ -66,12 +66,12 @@
 		"libgif": "^0.0.3",
 		"libtess": "^1.2.2",
 		"madge": "^6.0.0",
-		"node-sass": "^8.0.0",
+		"node-sass": "^9.0.0",
 		"OpenJPEG.js": "^0.10.2",
 		"opentype.js": "^1.3.4",
 		"pako": "^2.1.0",
 		"string-replace-webpack-plugin": "^0.1.3",
-		"webpack": "^5.82.1",
+		"webpack": "^5.84.1",
 		"webpack-cli": "^5.1.1",
 		"webpack-shell-plugin-next": "^2.3.1"
 	},

package/src/lib/jquery.js

@@ -23,4 +23,17 @@ $.toLowerCaseFirst = function (string)
    return string [0] .toLowerCase () + string .slice (1);
 };
 
+$.fn.isInViewport = function ()
+{
+   const
+      $this          = $(this),
+      $window        = $(window),
+      elementTop     = $this .offset () .top,
+      elementBottom  = elementTop + $this .outerHeight (),
+      viewportTop    = $window .scrollTop (),
+      viewportBottom = viewportTop + $window .height ();
+
+   return elementBottom > viewportTop && elementTop < viewportBottom;
+};
+
 export default $;

package/src/standard/Geospatial/UniversalTransverseMercator.js

@@ -201,7 +201,6 @@ UniversalTransverseMercator .prototype =
 
       return result .set (northing, easting, geodetic .z);
    },
-   //lerp: Vector3 .lerp,
 };
 
 export default UniversalTransverseMercator;

package/src/standard/Math/Geometry/Box2.js

@@ -93,10 +93,11 @@ Box2 .prototype =
 
             return this;
          }
-         case 3:
-         {
-            return this .setExtents (arguments [0], arguments [1]);
-         }
+         // case 3:
+         // {
+         //    console .trace ()
+         //    return this .setExtents (arguments [0], arguments [1]);
+         // }
       }
    },
    setExtents: function (min, max)
@@ -136,7 +137,7 @@ Box2 .prototype =
          this .getExtents (lhs_min, lhs_max);
          box  .getExtents (rhs_min, rhs_max);
 
-         return this .set (lhs_min .min (rhs_min), lhs_max .max (rhs_max), true);
+         return this .setExtents (lhs_min .min (rhs_min), lhs_max .max (rhs_max));
       };
    })(),
    multLeft: function (matrix)
@@ -203,6 +204,18 @@ Box2 .prototype =
    },
 };
 
+Object .assign (Box2,
+{
+   Extents: function (min, max)
+   {
+      return new Box2 () .setExtents (min, max);
+   },
+   Points: function (... points)
+   {
+      return new Box2 () .setExtents (points [0] .copy () .min (... points), points [0] .copy () .max (... points));
+   },
+});
+
 Object .defineProperties (Box2 .prototype,
 {
    size:

package/src/standard/Math/Geometry/Box3.js

@@ -101,10 +101,11 @@ Box3 .prototype =
 
             return this;
          }
-         case 3:
-         {
-            return this .setExtents (arguments [0], arguments [1]);
-         }
+         // case 3:
+         // {
+         //    console .trace ()
+         //    return this .setExtents (arguments [0], arguments [1]);
+         // }
       }
    },
    setExtents: function (min, max)
@@ -373,7 +374,7 @@ Box3 .prototype =
          this .getExtents (lhs_min, lhs_max);
          box  .getExtents (rhs_min, rhs_max);
 
-         return this .set (lhs_min .min (rhs_min), lhs_max .max (rhs_max), true);
+         return this .setExtents (lhs_min .min (rhs_min), lhs_max .max (rhs_max));
       };
    })(),
    multLeft: function (matrix)
@@ -611,6 +612,18 @@ Box3 .prototype =
    },
 };
 
+Object .assign (Box3,
+{
+   Extents: function (min, max)
+   {
+      return new Box3 () .setExtents (min, max);
+   },
+   Points: function (... points)
+   {
+      return new Box3 () .setExtents (points [0] .copy () .min (... points), points [0] .copy () .max (... points));
+   },
+});
+
 Object .defineProperties (Box3 .prototype,
 {
    size:

package/src/standard/Math/Geometry/Cylinder3.js

@@ -89,7 +89,7 @@ Cylinder3 .prototype =
 
       // find the given line un-translated
       const
-         point             = Vector3 .subtract (line .point, this .axis .point),
+         point             = line .point .copy () .subtract (this .axis .point),
          noTranslationLine = new Line3 (point, line .direction);
 
       // find the un-translated line in unit cylinder's space

package/src/standard/Math/Geometry/Line2.js

@@ -146,7 +146,7 @@ Line2 .Points = function (point1, point2)
 {
    const line = Object .create (Line2 .prototype);
    line .point     = point1 .copy ();
-   line .direction = Vector2 .subtract (point2, point1) .normalize ();
+   line .direction = point2 .copy () .subtract (point1) .normalize ();
    return line;
 };
 

package/src/standard/Math/Geometry/Line3.js

@@ -226,7 +226,7 @@ Line3 .Points = function (point1, point2)
 {
    const line = Object .create (Line3 .prototype);
    line .point     = point1 .copy ();
-   line .direction = Vector3 .subtract (point2, point1) .normalize ();
+   line .direction = point2 .copy () .subtract (point1) .normalize ();
    return line;
 };
 

package/src/standard/Math/Geometry/Plane3.js

@@ -133,7 +133,7 @@ Plane3 .prototype =
    },
    getDistanceToPoint: function (point)
    {
-      return Vector3 .dot (point, this .normal) - this .distanceFromOrigin;
+      return point .dot (this .normal) - this .distanceFromOrigin;
    },
    intersectsLine: function (line, intersection)
    {

package/src/standard/Math/Geometry/Sphere3.js

@@ -129,8 +129,8 @@ Sphere3 .prototype =
          const
             rr   = r * r,
             V    = AB .cross (AC),
-            d    = Vector3 .dot (A, V),
-            e    = Vector3 .dot (V, V),
+            d    = A .dot (V),
+            e    = V .dot (V),
             sep1 = d * d > rr * e;
 
          if (sep1)
@@ -138,12 +138,12 @@ Sphere3 .prototype =
 
          // Testing if sphere lies outside a triangle vertex.
          const
-            aa   = Vector3 .dot (A, A),
-            ab   = Vector3 .dot (A, B),
-            ac   = Vector3 .dot (A, C),
-            bb   = Vector3 .dot (B, B),
-            bc   = Vector3 .dot (B, C),
-            cc   = Vector3 .dot (C, C),
+            aa   = A .dot (A),
+            ab   = A .dot (B),
+            ac   = A .dot (C),
+            bb   = B .dot (B),
+            bc   = B .dot (C),
+            cc   = C .dot (C),
             sep2 = (aa > rr) && (ab > aa) && (ac > aa),
             sep3 = (bb > rr) && (ab > bb) && (bc > bb),
             sep4 = (cc > rr) && (ac > cc) && (bc > cc);
@@ -161,9 +161,9 @@ Sphere3 .prototype =
             d1   = ab - aa,
             d2   = bc - bb,
             d3   = ac - cc,
-            e1   = Vector3 .dot (AB, AB),
-            e2   = Vector3 .dot (BC, BC),
-            e3   = Vector3 .dot (CA, CA);
+            e1   = AB .dot (AB),
+            e2   = BC .dot (BC),
+            e3   = CA .dot (CA);
 
          Q1 .assign (A) .multiply (e1) .subtract (AB .multiply (d1));
          Q2 .assign (B) .multiply (e2) .subtract (BC .multiply (d2));
@@ -173,9 +173,9 @@ Sphere3 .prototype =
             QC   = C .multiply (e1) .subtract (Q1),
             QA   = A .multiply (e2) .subtract (Q2),
             QB   = B .multiply (e3) .subtract (Q3),
-            sep5 = (Vector3 .dot (Q1, Q1) > rr * e1 * e1) && (Vector3 .dot (Q1, QC) > 0),
-            sep6 = (Vector3 .dot (Q2, Q2) > rr * e2 * e2) && (Vector3 .dot (Q2, QA) > 0),
-            sep7 = (Vector3 .dot (Q3, Q3) > rr * e3 * e3) && (Vector3 .dot (Q3, QB) > 0);
+            sep5 = (Q1 .dot (Q1) > rr * e1 * e1) && (Q1 .dot (QC) > 0),
+            sep6 = (Q2 .dot (Q2) > rr * e2 * e2) && (Q2 .dot (QA) > 0),
+            sep7 = (Q3 .dot (Q3) > rr * e3 * e3) && (Q3 .dot (QB) > 0);
 
          if (sep5 || sep6 || sep7)
             return false;

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

@@ -242,10 +242,6 @@ Object .assign (Complex,
    {
       return lhs .copy () .multiply (rhs);
    },
-   multComp: function (lhs, rhs)
-   {
-      return lhs .copy () .multComp (rhs);
-   },
 });
 
 export default Complex;

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

@@ -444,80 +444,40 @@ Object .defineProperties (Quaternion .prototype,
 
 Object .assign (Quaternion,
 {
-   negate: function (quat)
+   Identity: new Quaternion (0, 0, 0, 1),
+   spline: (function ()
    {
-      return quat .copy () .negate ();
-   },
-   inverse: function (quat)
-   {
-      return quat .copy () .inverse ();
-   },
-   add: function (lhs, rhs)
-   {
-      return lhs .copy () .add (rhs);
-   },
-   subtract: function (lhs, rhs)
-   {
-      return lhs .copy () .subtract (rhs);
-   },
-   multiply: function (lhs, rhs)
-   {
-      return lhs .copy () .multiply (rhs);
-   },
-   multLeft: function (lhs, rhs)
-   {
-      return lhs .copy () .multLeft (rhs);
-   },
-   multRight: function (lhs, rhs)
-   {
-      return lhs .copy () .multRight (rhs);
-   },
-   divide: function (lhs, rhs)
-   {
-      return lhs .copy () .divide (rhs);
-   },
-   normalize: function (quat)
-   {
-      return quat .copy () .normalize ();
-   },
-   slerp: function (source, destination, t)
-   {
-      return source .copy () .slerp (destination, t);
-   },
-   squad: function (source, a, b, destination, t)
-   {
-      return source .copy () .squad (a, b, destination, t);
-   },
-   /*
-   bezier: function (q0, a, b, q1, t)
-   {
-      return q0 .copy () .squad (a, b, q1, t);
-   },
-   */
-   spline: function (Q0, Q1, Q2)
-   {
-      q0 .assign (Q0);
-      q1 .assign (Q1);
-      q2 .assign (Q2);
+      const
+         q0   = new Quaternion (0, 0, 0, 1),
+         q1   = new Quaternion (0, 0, 0, 1),
+         q2   = new Quaternion (0, 0, 0, 1),
+         q1_i = new Quaternion (0, 0, 0, 1);
 
-      // If the dot product is smaller than 0 we must negate the quaternion to prevent flipping. If we negate all
-      // the terms we get a different quaternion but it represents the same rotation.
+      return function (Q0, Q1, Q2)
+      {
+         q0 .assign (Q0);
+         q1 .assign (Q1);
+         q2 .assign (Q2);
 
-      if (q0 .dot (q1) < 0)
-         q0 .negate ();
+         // If the dot product is smaller than 0 we must negate the quaternion to prevent flipping. If we negate all
+         // the terms we get a different quaternion but it represents the same rotation.
 
-      if (q2 .dot (q1) < 0)
-         q2 .negate ();
+         if (q0 .dot (q1) < 0)
+            q0 .negate ();
 
-      q1_i .assign (q1) .inverse ();
+         if (q2 .dot (q1) < 0)
+            q2 .negate ();
 
-      // The result must be normalized as it will be used in slerp and we can only slerp normalized vectors.
+         q1_i .assign (q1) .inverse ();
 
-      return q1 .multRight (
-         t1 .assign (q1_i) .multRight (q0) .log () .add (t2 .assign (q1_i) .multRight (q2) .log ()) .divide (-4) .exp ()
-      )
-      .normalize () .copy ();
-   },
+         // The result must be normalized as it will be used in slerp and we can only slerp normalized vectors.
+
+         return q1 .multRight (
+            t1 .assign (q1_i) .multRight (q0) .log () .add (t2 .assign (q1_i) .multRight (q2) .log ()) .divide (-4) .exp ()
+         )
+         .normalize () .copy ();
+      };
+   })(),
 });
 
 const
@@ -525,10 +485,4 @@ const
    t2 = new Quaternion (0, 0, 0, 1),
    t3 = new Quaternion (0, 0, 0, 1);
 
-const
-   q0   = new Quaternion (0, 0, 0, 1),
-   q1   = new Quaternion (0, 0, 0, 1),
-   q2   = new Quaternion (0, 0, 0, 1),
-   q1_i = new Quaternion (0, 0, 0, 1);
-
 export default Quaternion;

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

@@ -444,35 +444,6 @@ Object .defineProperties (Rotation4 .prototype,
 Object .assign (Rotation4,
 {
    Identity: new Rotation4 (),
-   inverse: function (rotation)
-   {
-      return rotation .copy () .inverse ();
-   },
-   multRight: function (lhs, rhs)
-   {
-      return lhs .copy () .multRight (rhs);
-   },
-   normalize: function (rotation)
-   {
-      return rotation .copy () .normalize ();
-   },
-   slerp: function (source, destination, t)
-   {
-      return source .copy () .slerp (destination, t);
-   },
-   squad: function (source, a, b, destination, t)
-   {
-      return source .copy () .squad (a, b, destination, t);
-   },
-   /*
-   bezier: function (source, a, b, destination, t)
-   {
-      const copy = Object .create (this .prototype);
-      copy [_quaternion] = Quaternion .bezier (source [_quaternion], a, b, destination [_quaternion], t);
-      copy .update ();
-      return copy;
-   },
-   */
    spline: function (r0, r1, r2)
    {
       const copy = Object .create (this .prototype);