x_ite 8.6.2 → 8.6.4

package/docs/_config.yml

@@ -20,7 +20,7 @@ timezone:
 # ↓ --------------------------
 
 title: X_ITE X3D Browser               # the main title
-version: 8.6.2                         # 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 }
 
-For more information see [How to Configure Your Web Server](how-to-configure-your-web-server).
+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

@@ -37,13 +37,12 @@ x_ite: true
 #drop-zone select {
   color: unset;
   position: relative;
-  top: -8px;
+  top: -6px;
 }
 </style>
 
-<script defer="" src="https://create3000.github.io/media/laboratory/l-system/FileSaver.js-2.0.0/dist/FileSaver.min.js"></script>
-
-<script defer="">
+<script defer src="https://create3000.github.io/media/laboratory/l-system/FileSaver.js-2.0.0/dist/FileSaver.min.js"></script>
+<script defer>
 $(() =>
 {
    $("#drop-zone") .on ("dragover", event =>
@@ -118,7 +117,7 @@ $(() =>
 
             await Browser .loadURL (new X3D .MFString (url));
 
-            link (mimeType, file .name + extension, Browser .currentScene [toString] ());
+            link (mimeType, file .name .replace (/\.[^.]+$/, "") + extension, Browser .currentScene [toString] ());
          }
          catch (error)
          {
@@ -151,7 +150,9 @@ $(() =>
 });
 </script>
 
-<p>Convert X3D, VRML, glTF, GLB, OBJ, STL, and SVG to a X3D format.</p>
+## Upload and Convert
+
+Convert **X3D, VRML, glTF (GLB), OBJ, STL,** and **SVG** to a X3D format of your choice.
 
 <div id="drop-zone">
    <p id="open-files" class="center">
@@ -171,8 +172,12 @@ $(() =>
    </p>
 </div>
 
-## Converted Files
+### Converted Files
 
 Your converted files will appear here.
 
 <ul id="download-links"></ul>
+
+## 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](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.2",
+	"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.2";
+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,14 +261,31 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       // Get attributes of svg element.
 
       const
-         viewBox = this .viewBoxAttribute (xmlElement .getAttribute ("viewBox"), new Vector4 (0, 0, 100, 100)),
-         width   = this .lengthAttribute (xmlElement .getAttribute ("width", viewBox [2])),
-         height  = this .lengthAttribute (xmlElement .getAttribute ("height", viewBox [3]));
+         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]);
+
+      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;
 
@@ -509,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"),
@@ -523,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"),
@@ -571,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"),
@@ -585,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"),
@@ -628,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"),
@@ -642,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"),
@@ -729,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"),
@@ -745,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"),
@@ -801,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"),
@@ -817,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"),
@@ -855,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);
+      return this .drawGradient (gradient, g, bbox);
    },
    linearGradientElement: function (xmlElement, gradient)
    {
@@ -873,9 +891,9 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       gradient .x1        = this .lengthAttribute (xmlElement .getAttribute ("x1"), gradient .x1 || 0);
       gradient .y1        = this .lengthAttribute (xmlElement .getAttribute ("y1"), gradient .y1 || 0);
-      gradient .x2        = this .lengthAttribute (xmlElement .getAttribute ("x2"), gradient .x2 || 0);
+      gradient .x2        = this .lengthAttribute (xmlElement .getAttribute ("x2"), gradient .x2 || 1);
       gradient .y2        = this .lengthAttribute (xmlElement .getAttribute ("y2"), gradient .y2 || 0);
-      gradient .units     = xmlElement .getAttribute ("gradientUnits");
+      gradient .units     = xmlElement .getAttribute ("gradientUnits") || "objectBoundingBox";
       gradient .transform = this .transformAttribute (xmlElement .getAttribute ("gradientTransform"));
 
       // Stops
@@ -889,12 +907,12 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    {
       const
          g        = this .radialGradientElement (xmlElement, { stops: [ ] }),
-         gradient = this .context .createRadialGradient (g .fx, g .fy, 0, g .cx, g .cy, g .r);
+         gradient = this .context .createRadialGradient (g .fx, g .fy, g. fr, g .cx, g .cy, g .r);
 
       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);
+      return this .drawGradient (gradient, g, bbox);
    },
    radialGradientElement: function (xmlElement, gradient)
    {
@@ -907,14 +925,13 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       // Attributes
 
-      gradient .cx           = this .lengthAttribute (xmlElement .getAttribute ("cx"), gradient .cx || 0),
-      gradient .cy           = this .lengthAttribute (xmlElement .getAttribute ("cy"), gradient .cy || 0),
-      gradient .x2           = this .lengthAttribute (xmlElement .getAttribute ("x2"), gradient .x2 || 0),
-      gradient .y2           = this .lengthAttribute (xmlElement .getAttribute ("y2"), gradient .y2 || 0),
-      gradient .r            = this .lengthAttribute (xmlElement .getAttribute ("r"),  gradient .cx),
-      gradient .fx           = this .lengthAttribute (xmlElement .getAttribute ("fx"), gradient .cx),
-      gradient .fy           = this .lengthAttribute (xmlElement .getAttribute ("fy"), gradient .cy),
-      gradient .units        = xmlElement .getAttribute ("gradientUnits");
+      gradient .cx           = this .lengthAttribute (xmlElement .getAttribute ("cx"), gradient .cx || 0.5),
+      gradient .cy           = this .lengthAttribute (xmlElement .getAttribute ("cy"), gradient .cy || 0.5),
+      gradient .r            = this .lengthAttribute (xmlElement .getAttribute ("r"),  gradient .r  || 0.5),
+      gradient .fx           = this .lengthAttribute (xmlElement .getAttribute ("fx"), gradient .fx || gradient .cx),
+      gradient .fy           = this .lengthAttribute (xmlElement .getAttribute ("fy"), gradient .fy || gradient .cy),
+      gradient .fr           = this .lengthAttribute (xmlElement .getAttribute ("fr"), gradient .fr || 0),
+      gradient .units        = xmlElement .getAttribute ("gradientUnits") || "objectBoundingBox";
       gradient .spreadMethod = xmlElement .getAttribute ("spreadMethod");
       gradient .transform    = this .transformAttribute (xmlElement .getAttribute ("gradientTransform"));
 
@@ -956,15 +973,20 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       this .styles .pop ();
    },
-   drawGradient: function (gradient, transform, bbox)
+   drawGradient: function (gradient, g, bbox)
    {
       const m = new Matrix3 ();
 
       m .scale (new Vector2 (GRADIENT_SIZE / 2, GRADIENT_SIZE / 2));
       m .translate (Vector2 .One);
       m .scale (new Vector2 (1, -1));
-      m .multLeft (Matrix3 .inverse (bbox .matrix));
-      m .multLeft (transform);
+
+      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 (g .transform);
 
       // Paint.
 
@@ -1028,7 +1050,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
    {
       if (!attribute)
          return;
-         
+
       const
          scene = this .getExecutionContext (),
          hash  = new URL (attribute, scene .getWorldURL ()) .hash .slice (1);
@@ -1535,14 +1557,14 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
                                  case 'S':
                                  case 's':
                                  {
-                                    x1 = ax + (ax - px);
-                                    y1 = ay + (ay - py);
+                                    var x1 = ax + (ax - px);
+                                    var y1 = ay + (ay - py);
                                     break;
                                  }
                                  default:
                                  {
-                                    x1 = ax;
-                                    y1 = ay;
+                                    var x1 = ax;
+                                    var y1 = ay;
                                     break;
                                  }
                               }
@@ -1757,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;
                   }
                }
             }
@@ -1833,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;
                   }
                }
             }
@@ -1906,6 +1936,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          "opacity",
          "stop-color",
          "stop-opacity",
+         "vector-effect",
       ];
 
       return function (xmlElement)
@@ -1984,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)
@@ -2013,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;
       }
 
@@ -2072,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;
       }
 
@@ -2120,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;
       }
 
@@ -2170,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;
@@ -2284,7 +2330,7 @@ SVGParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 
       switch (this .style .fillType)
       {
-         case "NONE":
+         case "none":
          {
             return null;
          }
@@ -2349,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
@@ -2387,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.

package/src/x_ite/Parser/X3DParser.js

@@ -142,11 +142,12 @@ X3DParser .prototype = {
    convertColor: function (value)
    {
       const
-         div    = $("<div></div>") .hide () .css ("color", value) .appendTo ($("body")),
+         wrap   = $("<div></div>") .hide () .css ("color", "black") .appendTo ($("body")),
+         div    = $("<div></div>").css ("color", value) .appendTo (wrap),
          rgb    = window .getComputedStyle (div [0]) .color,
          values = rgb .replace (/^rgba?\(|\)$/g, "") .split (/[\s,]+/) .map (s => parseFloat (s));
 
-      div .remove ();
+      wrap .remove ();
 
       values [0] /= 255;
       values [1] /= 255;