x_ite 8.4.3 → 8.5.3

package/src/x_ite/Parser/XMLParser.js

@@ -88,13 +88,13 @@ function XMLParser (scene)
 XMLParser .prototype = Object .assign (Object .create (X3DParser .prototype),
 {
    constructor: XMLParser,
-   isValid: function ()
+   getEncoding: function ()
    {
-      return (this .input instanceof XMLDocument) || (this .input instanceof HTMLElement) || (this .input === null);
+      return "XML";
    },
-   getInput: function ()
+   isValid: function ()
    {
-      return this .input;
+      return (this .input instanceof XMLDocument) || (this .input instanceof HTMLElement) || (this .input === null);
    },
    setInput (xmlElement)
    {
@@ -106,7 +106,7 @@ XMLParser .prototype = Object .assign (Object .create (X3DParser .prototype),
          this .input = xmlElement;
          this .xml   = this .isXML (xmlElement);
 
-         if (! this .xml)
+         if (!this .xml)
             Object .assign (this, HTMLParser);
       }
       catch (error)
@@ -143,12 +143,12 @@ XMLParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       {
          case "#document":
          {
-            var X3D = $(xmlElement) .children ("X3D");
+            const X3D = $(xmlElement) .children ("X3D");
 
             if (X3D .length)
             {
-               for (var i = 0; i < X3D .length; ++ i)
-                  this .x3dElement (X3D [i]);
+               for (const xmlElement of X3D)
+                  this .x3dElement (xmlElement);
             }
             else
             {
@@ -264,6 +264,9 @@ XMLParser .prototype = Object .assign (Object .create (X3DParser .prototype),
       for (var i = 0; i < childNodes .length; ++ i)
          this .x3dElementChildHead (childNodes [i])
 
+      if (!this .xml)
+         this .headElement (xmlElement);
+
       if (this .success)
       {
          this .loadComponents () .then (function ()
@@ -1190,107 +1193,6 @@ XMLParser .prototype .fieldTypes [X3DConstants .MFVec3f]     = VRMLParser .proto
 XMLParser .prototype .fieldTypes [X3DConstants .MFVec4d]     = VRMLParser .prototype .sfvec4dValues;
 XMLParser .prototype .fieldTypes [X3DConstants .MFVec4f]     = VRMLParser .prototype .sfvec4fValues;
 
-/*
- * Lazy parse functions.
- */
-
-const
-   infs            = /\binf\b/g,
-   nans            = /\bnan\b/g,
-   trimWhitespaces = /^[\x20\n,\t\r"]+|[\x20\n,\t\r"]+$/g,
-   whitespaces     = /[\x20\n,\t\r"]+/,
-   strings         = new RegExp ('"((?:[^\\\\"]|\\\\\\\\|\\\\\\")*)"', 'g');
-
-function prepareBools (string)
-{
-   return string .replace (trimWhitespaces, "") .split (whitespaces);
-}
-
-function prepareFloats (string)
-{
-   return (string
-      .replace (infs, "Infinity")
-      .replace (nans, "NaN")
-      .replace (trimWhitespaces, "")
-      .split (whitespaces));
-}
-
-function prepareInts (string)
-{
-   return string .replace (trimWhitespaces, "") .split (whitespaces);
-}
-
-function prepareStrings (string)
-{
-   var
-      match = null,
-      array = [ ];
-
-   while (match = strings .exec (string))
-      array .push (match [1]);
-
-   return array .map (Fields .SFString .unescape);
-}
-
-// Unitless fields.
-
-XMLParser .prototype .fieldTypes [X3DConstants .MFColor] =
-XMLParser .prototype .fieldTypes [X3DConstants .MFColorRGBA] =
-XMLParser .prototype .fieldTypes [X3DConstants .MFMatrix3d] =
-XMLParser .prototype .fieldTypes [X3DConstants .MFMatrix3f] =
-XMLParser .prototype .fieldTypes [X3DConstants .MFMatrix4d] =
-XMLParser .prototype .fieldTypes [X3DConstants .MFMatrix4f] =
-XMLParser .prototype .fieldTypes [X3DConstants .MFVec4d] =
-XMLParser .prototype .fieldTypes [X3DConstants .MFVec4f] = function (field)
-{
-   field .setValue (prepareFloats (this .getInput ()) .map (function (value)
-   {
-      return parseFloat (value);
-   }));
-};
-
-XMLParser .prototype .fieldTypes [X3DConstants .MFBool] = function (field)
-{
-   field .setValue (prepareBools (this .getInput ()) .map (function (value)
-   {
-      if (value === "true" || value === "TRUE")
-         return true;
-
-      return false;
-   }));
-};
-
-XMLParser .prototype .fieldTypes [X3DConstants .MFInt32] = function (field)
-{
-   field .setValue (prepareInts (this .getInput ()) .map (function (value)
-   {
-      return parseInt (value);
-   }));
-};
-
-// Unit fields.
-
-XMLParser .prototype .fieldTypes [X3DConstants .MFDouble] =
-XMLParser .prototype .fieldTypes [X3DConstants .MFFloat] =
-XMLParser .prototype .fieldTypes [X3DConstants .MFVec2d] =
-XMLParser .prototype .fieldTypes [X3DConstants .MFVec2f] =
-XMLParser .prototype .fieldTypes [X3DConstants .MFVec3d] =
-XMLParser .prototype .fieldTypes [X3DConstants .MFVec3f] = function (field)
-{
-   var category = field .getUnit ();
-
-   field .setValue (prepareFloats (this .getInput ()) .map (function (value)
-   {
-      return this .fromUnit (category, parseFloat (value));
-   },
-   this));
-};
-
-XMLParser .prototype .fieldTypes [X3DConstants .MFString] = function (field)
-{
-   field .setValue (prepareStrings (this .getInput ()));
-};
-
 // HTML Support
 
 const HTMLParser =

package/src/x_ite/Prototype/X3DExternProtoDeclaration.js

@@ -224,9 +224,9 @@ X3DExternProtoDeclaration .prototype = Object .assign (Object .create (X3DProtoD
    toVRMLStreamUserDefinedField: function (generator, field, fieldTypeLength, accessTypeLength)
    {
       generator .string += generator .Indent ();
-      generator .string += generator .PadRight (generator .AccessType (field .getAccessType ()), accessTypeLength);
+      generator .string += generator .AccessType (field .getAccessType ()) .padEnd (accessTypeLength, " ");
       generator .string += generator .Space ();
-      generator .string += generator .PadRight (field .getTypeName (), fieldTypeLength);
+      generator .string += field .getTypeName () .padEnd (fieldTypeLength, " ");
       generator .string += generator .Space ();
       generator .string += field .getName ();
    },

package/src/x_ite/Prototype/X3DProtoDeclaration.js

@@ -164,9 +164,9 @@ X3DProtoDeclaration .prototype = Object .assign (Object .create (X3DProtoDeclara
    toVRMLStreamUserDefinedField: function (generator, field, fieldTypeLength, accessTypeLength)
    {
       generator .string += generator .Indent ();
-      generator .string += generator .PadRight (generator .AccessType (field .getAccessType ()), accessTypeLength);
+      generator .string += generator .AccessType (field .getAccessType ()) .padEnd (accessTypeLength, " ");
       generator .string += generator .Space ();
-      generator .string += generator .PadRight (field .getTypeName (), fieldTypeLength);
+      generator .string += field .getTypeName () .padEnd (fieldTypeLength, " ");
       generator .string += generator .Space ();
       generator .string += field .getName ();
 
@@ -513,7 +513,7 @@ X3DProtoDeclaration .prototype = Object .assign (Object .create (X3DProtoDeclara
 
       this [_body] .toJSONStream (generator);
 
-      generator .string = generator .string .replace (/,(\s*)$/s, "$1");
+      generator .JSONRemoveComma ();
 
       generator .string += generator .DecIndent ();
       generator .string += generator .Indent ();

package/src/x_ite/Rendering/DependentRenderer.js

@@ -119,7 +119,7 @@ DependentRenderer .prototype = Object .assign (Object .create (X3DBaseNode .prot
             X3DRenderObject .prototype .render .call (this, type, callback, group);
 
             for (const light of this .renderObject .getLights ())
-               light .getModelViewMatrix () .pop ();
+               light .modelViewMatrix .pop ();
 
             break;
          }

package/src/x_ite/Rendering/MultiSampleFrameBuffer.js

@@ -0,0 +1,150 @@
+/*******************************************************************************
+ *
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * Copyright create3000, Scheffelstraße 31a, Leipzig, Germany 2011 - 2022.
+ *
+ * All rights reserved. Holger Seelig <holger.seelig@yahoo.de>.
+ *
+ * The copyright notice above does not evidence any actual of intended
+ * publication of such source code, and is an unpublished work by create3000.
+ * This material contains CONFIDENTIAL INFORMATION that is the property of
+ * create3000.
+ *
+ * No permission is granted to copy, distribute, or create derivative works from
+ * the contents of this software, in whole or in part, without the prior written
+ * permission of create3000.
+ *
+ * NON-MILITARY USE ONLY
+ *
+ * All create3000 software are effectively free software with a non-military use
+ * restriction. It is free. Well commented source is provided. You may reuse the
+ * source in any way you please with the exception anything that uses it must be
+ * marked to indicate is contains 'non-military use only' components.
+ *
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * Copyright 2011 - 2022, Holger Seelig <holger.seelig@yahoo.de>.
+ *
+ * This file is part of the X_ITE Project.
+ *
+ * X_ITE is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU General Public License version 3 only, as published by the
+ * Free Software Foundation.
+ *
+ * X_ITE is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU General Public License version 3 for more
+ * details (a copy is included in the LICENSE file that accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version 3
+ * along with X_ITE.  If not, see <https://www.gnu.org/licenses/gpl.html> for a
+ * copy of the GPLv3 License.
+ *
+ * For Silvio, Joy and Adi.
+ *
+ ******************************************************************************/
+
+function MultiSampleFrameBuffer (browser, width, height, samples)
+{
+   const gl = browser .getContext ();
+
+   if (gl .getVersion () === 1 || width === 0 || height === 0)
+      return Fallback;
+
+   this .browser = browser;
+   this .width   = width;
+   this .height  = height;
+   this .samples = Math .min (samples, gl .getParameter (gl .MAX_SAMPLES));
+
+   this .lastBuffer  = gl .getParameter (gl .FRAMEBUFFER_BINDING);
+   this .framebuffer = gl .createFramebuffer ();
+
+   this .colorRenderbuffer = gl .createRenderbuffer ();
+
+   gl .bindRenderbuffer (gl .RENDERBUFFER, this .colorRenderbuffer);
+   gl .renderbufferStorageMultisample (gl .RENDERBUFFER, this .samples, gl .RGBA8, this .width, this .height);
+
+   this .depthRenderbuffer = gl .createRenderbuffer ();
+
+   gl .bindRenderbuffer (gl .RENDERBUFFER, this .depthRenderbuffer);
+   gl .renderbufferStorageMultisample (gl .RENDERBUFFER, this .samples, gl .DEPTH_COMPONENT24, this .width, this .height);
+
+   gl .bindFramebuffer (gl .FRAMEBUFFER, this .framebuffer);
+   gl .framebufferRenderbuffer (gl .FRAMEBUFFER, gl .COLOR_ATTACHMENT0, gl .RENDERBUFFER, this .colorRenderbuffer);
+   gl .framebufferRenderbuffer (gl .FRAMEBUFFER, gl .DEPTH_ATTACHMENT,  gl .RENDERBUFFER, this .depthRenderbuffer);
+
+   gl .bindFramebuffer (gl .FRAMEBUFFER, this .lastBuffer);
+
+   // Always check that our framebuffer is ok.
+
+   if (gl .checkFramebufferStatus (gl .FRAMEBUFFER) === gl .FRAMEBUFFER_COMPLETE)
+      return;
+
+   throw new Error ("Couldn't create frame buffer.");
+}
+
+MultiSampleFrameBuffer .prototype =
+{
+   constructor: MultiSampleFrameBuffer,
+   getWidth: function ()
+   {
+      return this .width;
+   },
+   getHeight: function ()
+   {
+      return this .height;
+   },
+   getSamples: function ()
+   {
+      return this .samples;
+   },
+   bind: function ()
+   {
+      const gl = this .browser .getContext ();
+
+      this .lastBuffer = gl .getParameter (gl .FRAMEBUFFER_BINDING);
+
+      gl .bindFramebuffer (gl .FRAMEBUFFER, this .framebuffer);
+   },
+   unbind: function ()
+   {
+      const gl = this .browser .getContext ();
+
+      gl .bindFramebuffer (gl .FRAMEBUFFER, this .lastBuffer);
+   },
+   blit: function ()
+   {
+      const gl = this .browser .getContext ();
+
+      gl .viewport (0, 0, this .width, this .height);
+      gl .scissor  (0, 0, this .width, this .height);
+
+      gl .bindFramebuffer (gl .READ_FRAMEBUFFER, this .framebuffer);
+      gl .bindFramebuffer (gl .DRAW_FRAMEBUFFER, null);
+
+      gl .blitFramebuffer (0, 0, this .width, this .height,
+                           0, 0, this .width, this .height,
+                           gl .COLOR_BUFFER_BIT, gl .LINEAR);
+   },
+   dispose: function ()
+   {
+      const gl = this .browser .getContext ();
+
+      gl .deleteFramebuffer (this .framebuffer);
+      gl .deleteRenderbuffer (this .colorRenderbuffer);
+      gl .deleteRenderbuffer (this .depthRenderbuffer);
+   },
+};
+
+const Fallback = {
+   getWidth: Function .prototype,
+   getHeight: Function .prototype,
+   getSamples: Function .prototype,
+   bind: Function .prototype,
+   unbind: Function .prototype,
+   blit: Function .prototype,
+   dispose: Function .prototype,
+};
+
+export default MultiSampleFrameBuffer;

package/src/x_ite/Rendering/TextureBuffer.js

@@ -105,14 +105,12 @@ function TextureBuffer (browser, width, height)
       gl .framebufferRenderbuffer (gl .FRAMEBUFFER, gl .DEPTH_ATTACHMENT, gl .RENDERBUFFER, this .depthBuffer);
    }
 
-   // Always check that our framebuffer is ok.
-
-   const complete = gl .checkFramebufferStatus (gl .FRAMEBUFFER) === gl .FRAMEBUFFER_COMPLETE;
-
    gl .bindTexture (gl .TEXTURE_2D, null);
    gl .bindFramebuffer (gl .FRAMEBUFFER, this .lastBuffer);
 
-   if (complete)
+   // Always check that our framebuffer is ok.
+
+   if (gl .checkFramebufferStatus (gl .FRAMEBUFFER) === gl .FRAMEBUFFER_COMPLETE)
       return;
 
    throw new Error ("Couldn't create frame buffer.");

package/src/x_ite/Rendering/X3DRenderObject.js

@@ -82,7 +82,6 @@ function X3DRenderObject (executionContext)
    this .localShadows             = [ false ];
    this .localFogs                = [ null ];
    this .layouts                  = [ ];
-   this .jointNodes               = [ ];
    this .textureProjectors        = [ ];
    this .generatedCubeMapTextures = [ ];
    this .collisions               = [ ];
@@ -220,10 +219,6 @@ X3DRenderObject .prototype =
    {
       return this .layouts;
    },
-   getJoints: function ()
-   {
-      return this .jointNodes;
-   },
    getParentLayout: function ()
    {
       return this .layouts .at (-1);
@@ -842,8 +837,8 @@ X3DRenderObject .prototype =
          globalShadows              = this .globalShadows,
          shadows                    = globalShadows .at (-1),
          headlight                  = this .getNavigationInfo () ._headlight .getValue (),
-         numGlobalLights            = globalObjects .reduce ((v, c) => v + !!c .lightNode, 0),
-         numGlobalTextureProjectors = globalObjects .reduce ((v, c) => v + !!c .textureProjectorNode, 0);
+         numGlobalLights            = globalObjects .reduce ((n, c) => n + !!c .lightNode, 0),
+         numGlobalTextureProjectors = globalObjects .reduce ((n, c) => n + !!c .textureProjectorNode, 0);
 
 
       this .renderTime = Date .now ();

package/src/x_ite/X3D.js

@@ -73,6 +73,7 @@ import X3DConstants                from "./Base/X3DConstants.js";
 import Fallback                    from "./Fallback.js";
 import MicroTime                   from "../standard/Time/MicroTime.js";
 import jQuery                      from "../lib/jquery.js";
+import libtess                     from "../lib/libtess.js";
 
 const
    callbacks = $.Deferred (),

package/src/x_ite/X3DCanvas.js

@@ -87,6 +87,16 @@ class X3DCanvas extends HTMLElement
    static get observedAttributes ()
    {
       return [
+         "antialiased",
+         "cache",
+         "contentScale",
+         "contentscale",
+         "contextMenu",
+         "contextmenu",
+         "debug",
+         "multisampling",
+         "notifications",
+         "splashScreen",
          "splashscreen",
          "src",
          "url",

package/src/x_ite.html

@@ -11,6 +11,7 @@
    <script src="../node_modules/css-element-queries/src/ResizeSensor.js"></script>
    <script src="../node_modules/pako/dist/pako_inflate.js"></script>
    <script src="../node_modules/libtess/libtess.cat.js"></script>
+   <script src="lib/libgif/libgif.js"></script>
    <!-- Text -->
    <script src="../node_modules/opentype.js/dist/opentype.js"></script>
    <!-- Texturing3D -->
@@ -37,15 +38,43 @@ X3D (function ()
       Browser      = X3D .getBrowser (),
       localStorage = Browser .getLocalStorage ();
 
-   Browser .getContextMenu () .setUserMenu (createTestMenu);
+   Browser .getContextMenu () .setUserMenu (function ()
+   {
+      function antialiasing (antialiased, contentScale, imageRendering)
+      {
+         $("#browser")
+            .attr ("antialiased", antialiased)
+            .attr ("contentScale", contentScale)
+            .css ("image-rendering", imageRendering);
+      }
+
+      return {
+         ... (typeof createTestMenu !== "undefined" ? createTestMenu () : { }),
+         "antialiasing": {
+            "name": "Antialiasing",
+            "items": {
+               "default": {
+                  "name": "Default",
+                  "callback": antialiasing .bind (this, null, null, ""),
+               },
+               "auto": {
+                  "name": "Auto",
+                  "callback": antialiasing .bind (this, true, "auto", ""),
+               },
+               "pixelated": {
+                  "name": "Pixelated",
+                  "callback": antialiasing .bind (this, false, 0.1, "pixelated"),
+               },
+            },
+         },
+      };
+   });
 
    localStorage .addDefaultValues ({
       "Bookmarks.history": ["https://www.web3d.org/x3d/content/examples/Basic/ChemicalMarkupLanguage/ButanedioicAcid.x3d"],
    });
 
-   let
-      loadTime = 0,
-      index    = localStorage ["Bookmarks.history"] .length - 1;
+   let index = localStorage ["Bookmarks.history"] .length - 1;
 
    function loadURL (url)
    {
@@ -66,11 +95,7 @@ X3D (function ()
 
       $(".file") .removeClass ("loaded");
 
-      loadTime = performance .now ();
-
       bookmarks .loadURL (url);
-
-      return false;
    }
 
    function toVRMLString ()
@@ -94,15 +119,12 @@ X3D (function ()
    loadURL (localStorage ["Bookmarks.url"] || "https://create3000.github.io/media/x_ite/info/info.x3d");
 
    $(".version") .text (Browser .name + " v" + Browser .version);
-   $(".browser") .on ("initialized", () => $(".console") .empty ());
-   $(".browser") .on ("initialized", () => Browser .println ("Scene loaded in " + ((performance .now () - loadTime) / 1000) .toFixed (3) + " s."));
-   $(".browser") .on ("initialized", () => localStorage ["Bookmarks.url"] = Browser .getWorldURL ());
-   $(".browser") .on ("shutdown", () => Browser .println ("Shutdown at " + new Date () .toUTCString () + "."));
    $(".location-entry") .val (localStorage ["Bookmarks.history"] [index])
    $(".location-go") .on ("click", () => loadURL ($(".location-entry") .val ()));
    $(".print-vrml") .on ("click", toVRMLString);
    $(".print-xml") .on ("click", toXMLString);
    $(".print-json") .on ("click", toJSONString);
+   $("#browser") .on ("initialized", () => localStorage ["Bookmarks.url"] = Browser .getWorldURL ());
 
    $(".location-entry") .keydown (event =>
    {
@@ -200,8 +222,9 @@ main.color-management .browser {
 .browser {
    display: block;
    margin: 10px 0px;
+   aspect-ratio: 16 / 9;
    width: 100%;
-   height: 563px;
+   height: auto;
    box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.75);
 }
 
@@ -371,7 +394,7 @@ main.color-management .browser {
       <main>
          <div>
             <form action="javascript:alert('form submitted')">
-               <x3d-canvas id="browser" class="browser" splashScreen="true" contextMenu="true" cache="false" debug="true" preserveDrawingBuffer="false" onload="$('.file') .addClass ('loaded')" x-url='"tests/Empty.x3dv"'>
+               <x3d-canvas id="browser" class="browser" splashScreen="true" contextMenu="true" cache="false" debug="true" preserveDrawingBuffer="false" onload="$('.file') .addClass ('loaded')" x-url='"tests/empty.x3dv"'>
                   <p class="fallback">
                      Sorry,<br/>
                      it wasn't me!<br/>
@@ -387,13 +410,12 @@ main.color-management .browser {
                <button class="location-go" type="button">Load URL</button>
             </div>
             <div class="buttons">
-               <a class="print-xml" href="#">XML</a><a class="print-vrml" href="#">VRML</a><a class="print-json" href="#">JSON</a><a href="../dist/example.html">Example Page</a><a href="tests/d3-x3d/AreaChartExample.html">d3-x3d</a><a href="tests/dom-integration/">dom-integration</a><a href="tests/legacy/">legacy</a>
+               <a class="print-xml" href="#">XML</a><a class="print-vrml" href="#">VRML</a><a class="print-json" href="#">JSON</a><a href="../dist/example.html">example page</a><a href="tests/d3-x3d/">d3-x3d</a><a href="tests/dom-integration/">dom-integration</a><a href="tests/legacy/">legacy</a>
             </div>
             <div class="links">
                <a href="../x_ite.min.html">x_ite.min.html</a><a href="https://rawgit.com/create3000/x_ite/main/x_ite.min.html">github</a>
             </div>
-            <div class="examples-box">
-            </div>
+            <div class="examples-box"></div>
          </div>
       </main>
       <footer><div class="console x_ite-console"></div></footer>

package/webpack.config.js

@@ -105,6 +105,7 @@ export default __default__;`;
             libtess: "libtess/libtess.cat.js",
             pako: "pako/dist/pako_inflate.js",
             ResizeSensor: "css-element-queries/src/ResizeSensor.js",
+            SuperGif: path .resolve (__dirname, "src/lib/libgif/libgif.js"),
          }),
          new WebpackShellPluginNext ({
             logging: false,

package/x_ite.min.html

@@ -19,15 +19,43 @@ X3D (function ()
       Browser      = X3D .getBrowser (),
       localStorage = Browser .getLocalStorage ();
 
-   Browser .getContextMenu () .setUserMenu (createTestMenu);
+   Browser .getContextMenu () .setUserMenu (function ()
+   {
+      function antialiasing (antialiased, contentScale, imageRendering)
+      {
+         $("#browser")
+            .attr ("antialiased", antialiased)
+            .attr ("contentScale", contentScale)
+            .css ("image-rendering", imageRendering);
+      }
+
+      return {
+         ... (typeof createTestMenu !== "undefined" ? createTestMenu () : { }),
+         "antialiasing": {
+            "name": "Antialiasing",
+            "items": {
+               "default": {
+                  "name": "Default",
+                  "callback": antialiasing .bind (this, null, null, ""),
+               },
+               "auto": {
+                  "name": "Auto",
+                  "callback": antialiasing .bind (this, true, "auto", ""),
+               },
+               "pixelated": {
+                  "name": "Pixelated",
+                  "callback": antialiasing .bind (this, false, 0.1, "pixelated"),
+               },
+            },
+         },
+      };
+   });
 
    localStorage .addDefaultValues ({
       "Bookmarks.history": ["https://www.web3d.org/x3d/content/examples/Basic/ChemicalMarkupLanguage/ButanedioicAcid.x3d"],
    });
 
-   let
-      loadTime = 0,
-      index    = localStorage ["Bookmarks.history"] .length - 1;
+   let index = localStorage ["Bookmarks.history"] .length - 1;
 
    function loadURL (url)
    {
@@ -48,11 +76,7 @@ X3D (function ()
 
       $(".file") .removeClass ("loaded");
 
-      loadTime = performance .now ();
-
       bookmarks .loadURL (url);
-
-      return false;
    }
 
    function toVRMLString ()
@@ -76,15 +100,12 @@ X3D (function ()
    loadURL (localStorage ["Bookmarks.url"] || "https://create3000.github.io/media/x_ite/info/info.x3d");
 
    $(".version") .text (Browser .name + " v" + Browser .version);
-   $(".browser") .on ("initialized", () => $(".console") .empty ());
-   $(".browser") .on ("initialized", () => Browser .println ("Scene loaded in " + ((performance .now () - loadTime) / 1000) .toFixed (3) + " s."));
-   $(".browser") .on ("initialized", () => localStorage ["Bookmarks.url"] = Browser .getWorldURL ());
-   $(".browser") .on ("shutdown", () => Browser .println ("Shutdown at " + new Date () .toUTCString () + "."));
    $(".location-entry") .val (localStorage ["Bookmarks.history"] [index])
    $(".location-go") .on ("click", () => loadURL ($(".location-entry") .val ()));
    $(".print-vrml") .on ("click", toVRMLString);
    $(".print-xml") .on ("click", toXMLString);
    $(".print-json") .on ("click", toJSONString);
+   $("#browser") .on ("initialized", () => localStorage ["Bookmarks.url"] = Browser .getWorldURL ());
 
    $(".location-entry") .keydown (event =>
    {
@@ -182,8 +203,9 @@ main.color-management .browser {
 .browser {
    display: block;
    margin: 10px 0px;
+   aspect-ratio: 16 / 9;
    width: 100%;
-   height: 563px;
+   height: auto;
    box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.75);
 }
 
@@ -353,7 +375,7 @@ main.color-management .browser {
       <main>
          <div>
             <form action="javascript:alert('form submitted')">
-               <x3d-canvas id="browser" class="browser" splashScreen="true" contextMenu="true" cache="false" debug="true" preserveDrawingBuffer="false" onload="$('.file') .addClass ('loaded')" x-url='"src/tests/Empty.x3dv"'>
+               <x3d-canvas id="browser" class="browser" splashScreen="true" contextMenu="true" cache="false" debug="true" preserveDrawingBuffer="false" onload="$('.file') .addClass ('loaded')" x-url='"src/tests/empty.x3dv"'>
                   <p class="fallback">
                      Sorry,<br/>
                      it wasn't me!<br/>
@@ -369,13 +391,12 @@ main.color-management .browser {
                <button class="location-go" type="button">Load URL</button>
             </div>
             <div class="buttons">
-               <a class="print-xml" href="#">XML</a><a class="print-vrml" href="#">VRML</a><a class="print-json" href="#">JSON</a><a href="dist/example.html">Example Page</a><a href="src/tests/d3-x3d/AreaChartExample.html">d3-x3d</a><a href="src/tests/dom-integration/">dom-integration</a><a href="src/tests/legacy/">legacy</a>
+               <a class="print-xml" href="#">XML</a><a class="print-vrml" href="#">VRML</a><a class="print-json" href="#">JSON</a><a href="dist/example.html">example page</a><a href="src/tests/d3-x3d/">d3-x3d</a><a href="src/tests/dom-integration/">dom-integration</a><a href="src/tests/legacy/">legacy</a>
             </div>
             <div class="links min-links">
                <a href="src/x_ite.html">src/x_ite.html</a><a href="https://rawgit.com/create3000/x_ite/main/x_ite.min.html">github</a>
             </div>
-            <div class="examples-box">
-            </div>
+            <div class="examples-box"></div>
          </div>
       </main>
       <footer><div class="console x_ite-console"></div></footer>