x_ite 8.6.3 → 8.6.4

package/docs/_config.yml

@@ -20,7 +20,7 @@ timezone:
 # ↓ --------------------------
 
 title: X_ITE X3D Browser               # the main title
-version: 8.6.3                         # x_ite latest version
+version: 8.6.4                         # x_ite latest version
 size: 287                              # size in kb
 x3d_latest_version: 4.0                # x3d latest version
 

package/docs/_posts/getting-started.md

@@ -645,7 +645,7 @@ X_ITE can load several file formats, either directly as the source of the \<x3d-
 >**Tip:** All files can be compressed using GZip compression. This saves bandwidth and speeds up download time.
 {: .prompt-tip }
 
-If you have an own web-server see [How to Configure Your Web Server](how-to-configure-your-web-server). If you are looking for an online file format converter [see here](laboratory/x3d-file-converter).
+If you have an own web-server see [How to Configure Your Web Server](how-to-configure-your-web-server). If you are looking for an online X3D file format converter [see here](laboratory/x3d-file-converter).
 
 ### Fallback Content
 

package/docs/_posts/laboratory/x3d-file-converter.md

@@ -180,4 +180,4 @@ Your converted files will appear here.
 
 ## Command Line Tool
 
-If you are looking for a command line tool to convert files, have a look at [x3d-tidy](https://www.npmjs.com/package/x3d-tidy){:target="_blank"}. It is a Node program and it can be run via `npx x3d-tidy`.
+If you are looking for a command line tool to convert files, have a look at [x3d-tidy](https://www.npmjs.com/package/x3d-tidy){:target="_blank"}. It is a [Node](https://nodejs.org/) program and it can be run via `npx x3d-tidy`.

package/docs/_tabs/laboratory.md

@@ -41,6 +41,12 @@ table.examples td {
   </tr>
 </table>
 
+Also have a look at the [Online X3D File Format Converter](x3d-file-converter).
+
+## X3D-Tidy
+
+[x3d-tidy](https://www.npmjs.com/package/x3d-tidy){:target="_blank"} is a command line X3D file format converter, compressor and beautifier and available on NPM.
+
 ## D3-X3D
 
 [D3-X3D](https://github.com/jamesleesaunders/d3-x3d#d3-x3d){:target="_blank"} is an external JavaScript library that combines the power of **D3.js** with X3D and can be found on GitHub.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x_ite",
-	"version": "8.6.3",
+	"version": "8.6.4",
 	"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/x_ite/Browser/VERSION.js

@@ -45,4 +45,4 @@
  *
  ******************************************************************************/
 
-export default "8.6.3";
+export default "8.6.4";

package/src/x_ite/Parser/OBJParser.js

@@ -272,37 +272,44 @@ OBJParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    },
    mtllib: async function (path)
    {
-      const
-         scene = this .getExecutionContext (),
-         url   = new URL (path, scene .getWorldURL ());
+      try
+      {
+         const
+            scene = this .getExecutionContext (),
+            url   = new URL (path, scene .getWorldURL ());
 
-      const input  = await fetch (url)
-         .then (response => response .arrayBuffer ())
-         .then (arrayBuffer => $.decodeText ($.ungzip (arrayBuffer)))
-         .catch (Function .prototype);
+         const input = await fetch (url)
+            .then (response => response .arrayBuffer ())
+            .then (arrayBuffer => $.decodeText ($.ungzip (arrayBuffer)))
+            .catch (Function .prototype);
 
-      const parser = new MaterialParser (scene, input);
+         const parser = new MaterialParser (scene, input);
 
-      parser .parse ();
+         parser .parse ();
 
-      for (const [name, material] of parser .materials)
-      {
-         const nodeName = this .sanitizeName (name);
+         for (const [name, material] of parser .materials)
+         {
+            const nodeName = this .sanitizeName (name);
 
-         if (nodeName)
-            scene .addNamedNode (scene .getUniqueName (nodeName), material);
+            if (nodeName)
+               scene .addNamedNode (scene .getUniqueName (nodeName), material);
 
-         this .materials .set (name, material);
-      }
+            this .materials .set (name, material);
+         }
 
-      for (const [name, texture] of parser .textures)
-      {
-         const nodeName = this .sanitizeName (name);
+         for (const [name, texture] of parser .textures)
+         {
+            const nodeName = this .sanitizeName (name);
 
-         if (nodeName)
-            scene .addNamedNode (scene .getUniqueName (nodeName), texture);
+            if (nodeName)
+               scene .addNamedNode (scene .getUniqueName (nodeName), texture);
 
-         this .textures .set (name, texture);
+            this .textures .set (name, texture);
+         }
+      }
+      catch (error)
+      {
+         console .warn (error);
       }
    },
    usemtl: function ()

package/src/x_ite/Parser/SVGParser.js

@@ -143,7 +143,7 @@ function SVGParser (scene)
       fillURL: "",
       fillOpacity: 1,
       fillRule: "nonzero",
-      strokeType: "NONE",
+      strokeType: "none",
       strokeColor: Color4 .Black,
       strokeURL: "",
       strokeOpacity: 1,
@@ -151,6 +151,7 @@ function SVGParser (scene)
       opacity: 1,
       stopColor: Color4 .Black,
       stopOpacity: 1,
+      vectorEffect: "none",
    }];
 }
 
@@ -260,17 +261,31 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       // Get attributes of svg element.
 
       const
-         defaultWidth   = this .lengthAttribute (xmlElement .getAttribute ("width", 100)),
-         defaultHeight  = this .lengthAttribute (xmlElement .getAttribute ("height", 100)),
+         defaultWidth   = this .lengthAttribute (xmlElement .getAttribute ("width"), 300),
+         defaultHeight  = this .lengthAttribute (xmlElement .getAttribute ("height"), 150),
          defaultViewBox = new Vector4 (0, 0, defaultWidth, defaultHeight),
          viewBox        = this .viewBoxAttribute (xmlElement .getAttribute ("viewBox"), defaultViewBox),
-         width          = this .lengthAttribute (xmlElement .getAttribute ("width", viewBox [2])),
-         height         = this .lengthAttribute (xmlElement .getAttribute ("height", viewBox [3]));
+         width          = this .lengthAttribute (xmlElement .getAttribute ("width"), viewBox [2]),
+         height         = this .lengthAttribute (xmlElement .getAttribute ("height"), viewBox [3]);
+
+      if (true) // default
+      {
+         // preserveAspectRatio="xMidYMid meet"
+
+         const
+            r  = width / height,
+            rv = viewBox [2] / viewBox [3];
+
+         if (rv > r)
+            viewBox [3] += viewBox [2] / r - viewBox [3];
+         else
+            viewBox [2] += viewBox [3] * r - viewBox [2];
+      }
 
       // Create viewpoint.
 
       const
-         viewpoint = scene .createNode ("OrthoViewpoint",),
+         viewpoint = scene .createNode ("OrthoViewpoint"),
          x         =  (viewBox .x + width  / 2) * PIXEL,
          y         = -(viewBox .y + height / 2) * PIXEL;
 
@@ -512,7 +527,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       // Create nodes.
 
-      if (this .style .fillType !== "NONE")
+      if (this .style .fillType !== "none")
       {
          const
             shapeNode     = scene .createNode ("Shape"),
@@ -526,7 +541,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          transformNode .children .push (shapeNode);
       }
 
-      if (this .style .strokeType !== "NONE")
+      if (this .style .strokeType !== "none")
       {
          const
             shapeNode     = scene .createNode ("Shape"),
@@ -574,7 +589,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       // Create nodes.
 
-      if (this .style .fillType !== "NONE")
+      if (this .style .fillType !== "none")
       {
          const
             shapeNode = scene .createNode ("Shape"),
@@ -588,7 +603,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          transformNode .children .push (shapeNode);
       }
 
-      if (this .style .strokeType !== "NONE")
+      if (this .style .strokeType !== "none")
       {
          const
             shapeNode  = scene .createNode ("Shape"),
@@ -631,7 +646,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       // Create nodes.
 
-      if (this .style .fillType !== "NONE")
+      if (this .style .fillType !== "none")
       {
          const
             shapeNode = scene .createNode ("Shape"),
@@ -645,7 +660,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          transformNode .children .push (shapeNode);
       }
 
-      if (this .style .strokeType !== "NONE")
+      if (this .style .strokeType !== "none")
       {
          const
             shapeNode  = scene .createNode ("Shape"),
@@ -732,7 +747,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       coordinateNode .point .push (... points);
 
-      if (this .style .fillType !== "NONE")
+      if (this .style .fillType !== "none")
       {
          const
             shapeNode    = scene .createNode ("Shape"),
@@ -748,7 +763,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          transformNode .children .push (shapeNode);
       }
 
-      if (this .style .strokeType !== "NONE")
+      if (this .style .strokeType !== "none")
       {
          const
             shapeNode    = scene .createNode ("Shape"),
@@ -804,7 +819,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       for (const points of contours)
          coordinateNode .point .push (... points);
 
-      if (this .style .fillType !== "NONE")
+      if (this .style .fillType !== "none")
       {
          const
             shapeNode    = scene .createNode ("Shape"),
@@ -820,7 +835,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          transformNode .children .push (shapeNode);
       }
 
-      if (this .style .strokeType !== "NONE")
+      if (this .style .strokeType !== "none")
       {
          const
             shapeNode    = scene .createNode ("Shape"),
@@ -858,7 +873,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       for (const [o, c, a] of g .stops)
          gradient .addColorStop (o, `rgba(${c .r * 255},${c .g * 255},${c .b * 255},${a})`);
 
-      return this .drawGradient (gradient, g .transform, bbox, g .units);
+      return this .drawGradient (gradient, g, bbox);
    },
    linearGradientElement: function (xmlElement, gradient)
    {
@@ -897,7 +912,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       for (const [o, c, a] of g .stops)
          gradient .addColorStop (o, `rgba(${c .r * 255},${c .g * 255},${c .b * 255},${a})`);
 
-      return this .drawGradient (gradient, g .transform, bbox, g .units);
+      return this .drawGradient (gradient, g, bbox);
    },
    radialGradientElement: function (xmlElement, gradient)
    {
@@ -958,7 +973,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .styles .pop ();
    },
-   drawGradient: function (gradient, transform, bbox, units)
+   drawGradient: function (gradient, g, bbox)
    {
       const m = new Matrix3 ();
 
@@ -966,12 +981,12 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       m .translate (Vector2 .One);
       m .scale (new Vector2 (1, -1));
 
-      if (units === "userSpaceOnUse")
+      if (g .units === "userSpaceOnUse")
          m .multLeft (Matrix3 .inverse (bbox .matrix));
       else
          m .multLeft (new Matrix3 (2, 0, 0, 0, 2, 0, -1, -1, 1));
 
-      m .multLeft (transform);
+      m .multLeft (g .transform);
 
       // Paint.
 
@@ -1764,16 +1779,20 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
                   {
                      if (this .double ())
                      {
-                        const ty = this .value;
+                        var ty = this .value;
+                     }
+                  }
+                  else
+                  {
+                     var ty = 0;
+                  }
 
-                        this .whitespaces ();
+                  this .whitespaces ();
 
-                        if (Grammar .closeParenthesis .parse (this))
-                        {
-                           matrix .translate (new Vector2 (tx, ty));
-                           continue;
-                        }
-                     }
+                  if (Grammar .closeParenthesis .parse (this))
+                  {
+                     matrix .translate (new Vector2 (tx, ty));
+                     continue;
                   }
                }
             }
@@ -1840,16 +1859,20 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
                   {
                      if (this .double ())
                      {
-                        const sy = this .value;
+                        var sy = this .value;
+                     }
+                  }
+                  else
+                  {
+                     var sy = sx;
+                  }
 
-                        this .whitespaces ();
+                  this .whitespaces ();
 
-                        if (Grammar .closeParenthesis .parse (this))
-                        {
-                           matrix .scale (new Vector2 (sx, sy));
-                           continue;
-                        }
-                     }
+                  if (Grammar .closeParenthesis .parse (this))
+                  {
+                     matrix .scale (new Vector2 (sx, sy));
+                     continue;
                   }
                }
             }
@@ -1913,6 +1936,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          "opacity",
          "stop-color",
          "stop-opacity",
+         "vector-effect",
       ];
 
       return function (xmlElement)
@@ -1991,6 +2015,9 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          case "stop-opacity":
             this .stopOpacityStyle (value);
             break;
+         case "vector-effect":
+            this .vectorEffectStyle (value);
+            break;
       }
    },
    displayStyle: function (value)
@@ -2020,13 +2047,13 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       if (value === "transparent")
       {
-         this .style .fillType = "NONE";
+         this .style .fillType = "none";
          return;
       }
 
       if (value === "none")
       {
-         this .style .fillType ="NONE";
+         this .style .fillType ="none";
          return;
       }
 
@@ -2079,13 +2106,13 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       if (value === "transparent")
       {
-         this .style .strokeType = "NONE";
+         this .style .strokeType = "none";
          return;
       }
 
       if (value === "none")
       {
-         this .style .strokeType ="NONE";
+         this .style .strokeType ="none";
          return;
       }
 
@@ -2127,7 +2154,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    {
       if (this .double ())
       {
-         this .style .strokeWidth = this .value / (1000 * PIXEL);
+         this .style .strokeWidth = this .lengthAttribute (this .value);
          return;
       }
 
@@ -2177,6 +2204,18 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          return;
       }
    },
+   vectorEffectStyle: function (value)
+   {
+      if (value !== "inherit")
+      {
+         this .style .vectorEffect = value;
+         return;
+      }
+
+      // inherit
+
+      this .style .vectorEffect = this .styles .at (-1) .vectorEffect;
+   },
    parseValue: function (value)
    {
       this .input     = value;
@@ -2291,7 +2330,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       switch (this .style .fillType)
       {
-         case "NONE":
+         case "none":
          {
             return null;
          }
@@ -2356,16 +2395,28 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       materialNode .emissiveColor = new Color3 (... this .style .strokeColor);
       materialNode .transparency  = 1 - this .style .strokeOpacity * this .style .opacity;
 
-      if (this .style .strokeWidth !== 1)
+      const strokeWidth = this .vectorEffect === "non-scaling-stroke"
+         ? this .style .strokeWidth
+         : this .getStokeWidth ();
+
+      if (strokeWidth > 1)
       {
          const lineProperties = scene .createNode ("LineProperties");
 
          appearanceNode .lineProperties       = lineProperties;
-         lineProperties .linewidthScaleFactor = this .style .strokeWidth;
+         lineProperties .linewidthScaleFactor = strokeWidth;
       }
 
       return appearanceNode;
    },
+   getStokeWidth: function ()
+   {
+      const
+         modelMatrix = this .getModelMatrix (),
+         strokeWidth = modelMatrix .multDirMatrix (new Vector3 (this .style .strokeWidth, this .style .strokeWidth, 0));
+
+      return (strokeWidth .x + strokeWidth .y) / 2;
+   },
    createTextureProperties: function ()
    {
       const
@@ -2394,6 +2445,26 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       return texCoordNode;
    },
+   getModelMatrix: function ()
+   {
+      const modelMatrix = new Matrix4 ();
+
+      for (let i = 1; i < this .groupNodes .length; ++ i)
+      {
+         const
+            node   = this .groupNodes [i],
+            matrix = new Matrix4 ();
+
+         matrix .set (node .translation .getValue (),
+                      node .rotation .getValue (),
+                      node .scale .getValue (),
+                      node .scaleOrientation .getValue ());
+
+         modelMatrix .multLeft (matrix);
+      }
+
+      return modelMatrix;
+   },
    createTesselator: function ()
    {
       // Function called for each vertex of tessellator output.