x_ite 8.6.7 → 8.6.9

package/docs/_config.yml

@@ -20,8 +20,8 @@ timezone:
 # ↓ --------------------------
 
 title: X_ITE X3D Browser               # the main title
-version: 8.6.7                         # x_ite latest version
-size: 288                              # size in kb
+version: 8.6.9                         # x_ite latest version
+size: 289                              # size in kb
 x3d_latest_version: 4.0                # x3d latest version
 
 tagline: Step Into The Future          # it will display as the sub-title

package/docs/laboratory/gltf-sample-viewer.html

@@ -192,7 +192,7 @@ const glTF = [
    "WaterBottle/glTF/WaterBottle.gltf",
 ];
 
-glTF .server = "https://github.khronos.org/glTF-Sample-Viewer-Release/assets/models/2.0/";
+glTF .server = "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/";
 
 /* find . -type f -name "*.glb" | grep "/glTF-Binary/" | sort */
 const glb = [
@@ -262,7 +262,7 @@ const glb = [
    "WaterBottle/glTF-Binary/WaterBottle.glb",
 ];
 
-glb .server = "https://github.khronos.org/glTF-Sample-Viewer-Release/assets/models/2.0/";
+glb .server = "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/";
 
 /* find . -type f -name "*.gltf" | grep "/glTF-Draco/" | sort */
 const draco = [
@@ -287,7 +287,7 @@ const draco = [
    "WaterBottle/glTF-Draco/WaterBottle.gltf",
 ];
 
-draco .server = "https://github.khronos.org/glTF-Sample-Viewer-Release/assets/models/2.0/";
+draco .server = "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/";
 
 /* find . -type f -name "*.gltf" | grep "/glTF-Embedded//" | sort */
 const embedded = [
@@ -329,7 +329,7 @@ const embedded = [
    "VertexColorTest/glTF-Embedded/VertexColorTest.gltf",
 ];
 
-embedded .server = "https://github.khronos.org/glTF-Sample-Viewer-Release/assets/models/2.0/";
+embedded .server = "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/";
 
 function createList (description, array)
 {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x_ite",
-	"version": "8.6.7",
+	"version": "8.6.9",
 	"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/assets/shaders/webgl1/Pointing.fs.js

@@ -30,7 +30,7 @@ main ()
       if (getPointColor (vec4 (1.0)) .a < 0.5)
          discard;
 
-      setTexCoords ();
+      setPointTexCoords ();
    #endif
 
    gl_FragData [0] = vec4 (vertex, x3d_Id);

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

@@ -26,6 +26,14 @@ uniform float x3d_AlphaCutoff;
       #if X3D_NUM_TEXTURE_COORDINATES > 1
          varying vec4 texCoord1;
       #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 2
+         varying vec4 texCoord2;
+      #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 3
+         varying vec4 texCoord3;
+      #endif
    #endif
 #else
    #if defined (X3D_TEXTURE) || defined (X3D_MATERIAL_TEXTURES)
@@ -36,6 +44,14 @@ uniform float x3d_AlphaCutoff;
       #if X3D_NUM_TEXTURE_COORDINATES > 1
          vec4 texCoord1 = vec4 (0.0, 0.0, 0.0, 1.0);
       #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 2
+         vec4 texCoord2 = vec4 (0.0, 0.0, 0.0, 1.0);
+      #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 3
+         vec4 texCoord3 = vec4 (0.0, 0.0, 0.0, 1.0);
+      #endif
    #endif
 #endif
 
@@ -81,7 +97,7 @@ fragment_main ()
    #endif
 
    #if defined (X3D_GEOMETRY_0D) && defined (X3D_STYLE_PROPERTIES)
-      setTexCoords ();
+      setPointTexCoords ();
    #endif
 
    vec4 finalColor = getMaterialColor ();

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

@@ -2,7 +2,7 @@ export default /* glsl */ `
 #if defined (X3D_GEOMETRY_0D) && defined (X3D_STYLE_PROPERTIES)
 #if defined (X3D_TEXTURE) || defined (X3D_MATERIAL_TEXTURES)
 void
-setTexCoords ()
+setPointTexCoords ()
 {
    vec4 texCoord = vec4 (gl_PointCoord .x, 1.0 - gl_PointCoord .y, 0.0, 1.0);
 
@@ -13,13 +13,21 @@ setTexCoords ()
    #if X3D_NUM_TEXTURE_COORDINATES > 1
       texCoord1 = texCoord;
    #endif
+
+   #if X3D_NUM_TEXTURE_COORDINATES > 2
+      texCoord2 = texCoord;
+   #endif
+
+   #if X3D_NUM_TEXTURE_COORDINATES > 3
+      texCoord3 = texCoord;
+   #endif
 }
 
 #define getPointColor(color) (color)
 
 #else
 
-#define setTexCoords()
+#define setPointTexCoords()
 
 varying float pointSize;
 

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

@@ -21,6 +21,16 @@ getTextureMatrix (const in int i)
          textureMatrix = x3d_TextureMatrix [1];
       #endif
 
+      #if X3D_NUM_TEXTURE_TRANSFORMS > 2
+      else if (i == 2)
+         textureMatrix = x3d_TextureMatrix [2];
+      #endif
+
+      #if X3D_NUM_TEXTURE_TRANSFORMS > 3
+      else if (i == 3)
+         textureMatrix = x3d_TextureMatrix [3];
+      #endif
+
       return textureMatrix;
    #else
       return x3d_TextureMatrix [0];
@@ -43,6 +53,16 @@ getTexCoord (const in int i)
          texCoord = texCoord1;
       #endif
 
+      #if X3D_NUM_TEXTURE_COORDINATES > 2
+      else if (i == 2)
+         texCoord = texCoord2;
+      #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 3
+      else if (i == 3)
+         texCoord = texCoord3;
+      #endif
+
       return texCoord;
    #else
       return texCoord0;
@@ -144,6 +164,16 @@ getTexCoord (const in int textureTransformMapping, const in int textureCoordinat
       texCoord = getTexCoord (x3d_TextureCoordinateGenerator [1], textureTransformMapping, textureCoordinateMapping);
    #endif
 
+   #if X3D_NUM_TEXTURE_COORDINATES > 2
+   else if (textureCoordinateMapping == 2)
+      texCoord = getTexCoord (x3d_TextureCoordinateGenerator [2], textureTransformMapping, textureCoordinateMapping);
+   #endif
+
+   #if X3D_NUM_TEXTURE_COORDINATES > 3
+   else if (textureCoordinateMapping == 3)
+      texCoord = getTexCoord (x3d_TextureCoordinateGenerator [3], textureTransformMapping, textureCoordinateMapping);
+   #endif
+
    texCoord .stp /= texCoord .q;
 
    #if defined (X3D_GEOMETRY_2D)
@@ -208,7 +238,7 @@ getTextureColor (const in vec4 diffuseColor, const in vec4 specularColor)
       {
          // Get texture color.
 
-         vec3 texCoord     = getTexCoord (i, i);
+         vec3 texCoord     = getTexCoord (min (i, X3D_NUM_TEXTURE_TRANSFORMS - 1), min (i, X3D_NUM_TEXTURE_COORDINATES - 1));
          vec4 textureColor = getTexture (i, texCoord);
 
          // Multi texturing

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

@@ -23,6 +23,14 @@ uniform mat4 x3d_ModelViewMatrix;
       #if X3D_NUM_TEXTURE_COORDINATES > 1
          attribute vec4 x3d_TexCoord1;
       #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 2
+         attribute vec4 x3d_TexCoord2;
+      #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 3
+         attribute vec4 x3d_TexCoord3;
+      #endif
    #endif
 #endif
 
@@ -47,6 +55,14 @@ attribute vec4 x3d_Vertex;
       #if X3D_NUM_TEXTURE_COORDINATES > 1
          varying vec4 texCoord1;
       #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 2
+         varying vec4 texCoord2;
+      #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 3
+         varying vec4 texCoord3;
+      #endif
    #endif
 #endif
 
@@ -72,7 +88,6 @@ varying vec3 vertex;
 
 // Main
 
-#pragma X3D include "Particle.glsl"
 #pragma X3D include "PointSize.glsl"
 
 void
@@ -101,11 +116,19 @@ vertex_main ()
    #if ! defined (X3D_GEOMETRY_0D) && ! defined (X3D_GEOMETRY_1D)
       #if defined (X3D_TEXTURE) || defined (X3D_MATERIAL_TEXTURES)
          #if X3D_NUM_TEXTURE_COORDINATES > 0
-            texCoord0 = getTexCoord (x3d_TexCoord0);
+            texCoord0 = x3d_TexCoord0;
          #endif
 
          #if X3D_NUM_TEXTURE_COORDINATES > 1
-            texCoord1 = getTexCoord (x3d_TexCoord1);
+            texCoord1 = x3d_TexCoord1;
+         #endif
+
+         #if X3D_NUM_TEXTURE_COORDINATES > 2
+            texCoord2 = x3d_TexCoord2;
+         #endif
+
+         #if X3D_NUM_TEXTURE_COORDINATES > 3
+            texCoord3 = x3d_TexCoord3;
          #endif
       #endif
    #endif

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

@@ -35,7 +35,7 @@ main ()
       if (getPointColor (vec4 (1.0)) .a < 0.5)
          discard;
 
-      setTexCoords ();
+      setPointTexCoords ();
    #endif
 
    #if defined (X3D_GEOMETRY_1D) && defined (X3D_STYLE_PROPERTIES)

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

@@ -18,6 +18,14 @@ uniform float x3d_AlphaCutoff;
       #if X3D_NUM_TEXTURE_COORDINATES > 1
          in vec4 texCoord1;
       #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 2
+         in vec4 texCoord2;
+      #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 3
+         in vec4 texCoord3;
+      #endif
    #endif
 #else
    #if defined (X3D_TEXTURE) || defined (X3D_MATERIAL_TEXTURES)
@@ -28,6 +36,14 @@ uniform float x3d_AlphaCutoff;
       #if X3D_NUM_TEXTURE_COORDINATES > 1
          vec4 texCoord1 = vec4 (0.0, 0.0, 0.0, 1.0);
       #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 2
+         vec4 texCoord2 = vec4 (0.0, 0.0, 0.0, 1.0);
+      #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 3
+         vec4 texCoord3 = vec4 (0.0, 0.0, 0.0, 1.0);
+      #endif
    #endif
 #endif
 
@@ -80,6 +96,8 @@ fragment_main ()
    #endif
 
    #if defined (X3D_GEOMETRY_0D) && defined (X3D_STYLE_PROPERTIES)
+      setPointTexCoords ();
+   #elif defined (X3D_TEXTURE) || defined (X3D_MATERIAL_TEXTURES)
       setTexCoords ();
    #endif
 

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

@@ -1,8 +1,10 @@
 export default /* glsl */ `
 #if defined (X3D_PARTICLE_SYSTEM)
+#if defined (X3D_TEX_COORD_RAMP)
+
+uniform sampler2D x3d_TexCoordRamp;
 
 in vec4 x3d_Particle;
-in mat4 x3d_ParticleMatrix;
 
 vec4
 texelFetch (const in sampler2D sampler, const in int index, const in int lod)
@@ -14,12 +16,8 @@ texelFetch (const in sampler2D sampler, const in int index, const in int lod)
    return t;
 }
 
-#if defined (X3D_TEX_COORD_RAMP)
-
-uniform sampler2D x3d_TexCoordRamp;
-
 vec4
-getParticleTexCoord (const in vec4 texCoord)
+getTexCoord (const in vec4 texCoord)
 {
    const int map [6] = int [6] (0, 1, 2, 0, 2, 3);
 
@@ -28,9 +26,11 @@ getParticleTexCoord (const in vec4 texCoord)
    return texelFetch (x3d_TexCoordRamp, index0 + map [gl_VertexID % 6], 0);
 }
 #else
-   #define getParticleTexCoord(texCoord) (texCoord)
+   #define getTexCoord(texCoord) (texCoord)
 #endif
 
+in mat4 x3d_ParticleMatrix;
+
 vec4
 getVertex (const in vec4 vertex)
 {
@@ -38,21 +38,7 @@ getVertex (const in vec4 vertex)
 }
 
 #else
-
-#define getVertex(vertex) (vertex)
-#define getParticleTexCoord(texCoord) (texCoord)
-
-#endif
-
-#if defined (X3D_PHYSICAL_MATERIAL)
-vec4
-getTexCoord (const in vec4 texCoord)
-{
-   vec4 t = getParticleTexCoord (texCoord);
-
-   return vec4 (t .x, 1.0 - t .y, t .z, t .w);
-}
-#else
-#define getTexCoord(texCoord) getParticleTexCoord(texCoord)
+   #define getVertex(vertex) (vertex)
+   #define getTexCoord(texCoord) (texCoord)
 #endif
 `;

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

@@ -2,16 +2,24 @@ export default /* glsl */ `
 #if defined (X3D_GEOMETRY_0D) && defined (X3D_STYLE_PROPERTIES)
 #if defined (X3D_TEXTURE) || defined (X3D_MATERIAL_TEXTURES)
 void
-setTexCoords ()
+setPointTexCoords ()
 {
    vec4 texCoord = vec4 (gl_PointCoord .x, 1.0 - gl_PointCoord .y, 0.0, 1.0);
 
    #if X3D_NUM_TEXTURE_COORDINATES > 0
-      texCoord0 = texCoord;
+      texCoords [0] = texCoord;
    #endif
 
    #if X3D_NUM_TEXTURE_COORDINATES > 1
-      texCoord1 = texCoord;
+      texCoords [1] = texCoord;
+   #endif
+
+   #if X3D_NUM_TEXTURE_COORDINATES > 2
+      texCoords [2] = texCoord;
+   #endif
+
+   #if X3D_NUM_TEXTURE_COORDINATES > 3
+      texCoords [3] = texCoord;
    #endif
 }
 
@@ -19,7 +27,7 @@ setTexCoords ()
 
 #else
 
-#define setTexCoords()
+#define setPointTexCoords()
 
 in float pointSize;
 

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

@@ -3,25 +3,22 @@ export default /* glsl */ `
 
 #pragma X3D include "Perlin.glsl"
 
-vec4
-getTexCoord (const in int i)
+vec4 texCoords [X3D_NUM_TEXTURE_COORDINATES];
+
+void
+setTexCoords ()
 {
+   #if X3D_NUM_TEXTURE_COORDINATES > 0
+   texCoords [0] = texCoord0;
+   #endif
    #if X3D_NUM_TEXTURE_COORDINATES > 1
-      switch (i)
-      {
-         #if X3D_NUM_TEXTURE_COORDINATES > 0
-         case 0:
-            return texCoord0;
-         #endif
-         #if X3D_NUM_TEXTURE_COORDINATES > 1
-         case 1:
-            return texCoord1;
-         #endif
-      }
-
-      return vec4 (0.0);
-   #else
-      return texCoord0;
+   texCoords [1] = texCoord1;
+   #endif
+   #if X3D_NUM_TEXTURE_COORDINATES > 2
+   texCoords [2] = texCoord2;
+   #endif
+   #if X3D_NUM_TEXTURE_COORDINATES > 3
+   texCoords [3] = texCoord3;
    #endif
 }
 
@@ -36,7 +33,7 @@ getTexCoord (const in x3d_TextureCoordinateGeneratorParameters textureCoordinate
    {
       case x3d_None:
       {
-         return x3d_TextureMatrix [textureTransformMapping] * getTexCoord (textureCoordinateMapping);
+         return x3d_TextureMatrix [textureTransformMapping] * texCoords [textureCoordinateMapping];
       }
       case x3d_Sphere:
       {
@@ -105,7 +102,7 @@ getTexCoord (const in x3d_TextureCoordinateGeneratorParameters textureCoordinate
       }
       default:
       {
-         return x3d_TextureMatrix [textureTransformMapping] * getTexCoord (textureCoordinateMapping);
+         return x3d_TextureMatrix [textureTransformMapping] * texCoords [textureCoordinateMapping];
       }
    }
 }
@@ -183,7 +180,7 @@ getTextureColor (const in vec4 diffuseColor, const in vec4 specularColor)
       {
          // Get texture color.
 
-         vec3 texCoord     = getTexCoord (i, i);
+         vec3 texCoord     = getTexCoord (min (i, X3D_NUM_TEXTURE_TRANSFORMS - 1), min (i, X3D_NUM_TEXTURE_COORDINATES - 1));
          vec4 textureColor = getTexture (i, texCoord);
 
          // Multi texturing

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

@@ -27,6 +27,14 @@ uniform mat4 x3d_ModelViewMatrix;
       #if X3D_NUM_TEXTURE_COORDINATES > 1
          in vec4 x3d_TexCoord1;
       #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 2
+         in vec4 x3d_TexCoord2;
+      #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 3
+         in vec4 x3d_TexCoord3;
+      #endif
    #endif
 #endif
 
@@ -51,6 +59,14 @@ in vec4 x3d_Vertex;
       #if X3D_NUM_TEXTURE_COORDINATES > 1
          out vec4 texCoord1;
       #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 2
+         out vec4 texCoord2;
+      #endif
+
+      #if X3D_NUM_TEXTURE_COORDINATES > 3
+         out vec4 texCoord3;
+      #endif
    #endif
 #endif
 
@@ -123,6 +139,14 @@ vertex_main ()
          #if X3D_NUM_TEXTURE_COORDINATES > 1
             texCoord1 = getTexCoord (x3d_TexCoord1);
          #endif
+
+         #if X3D_NUM_TEXTURE_COORDINATES > 2
+            texCoord2 = getTexCoord (x3d_TexCoord2);
+         #endif
+
+         #if X3D_NUM_TEXTURE_COORDINATES > 3
+            texCoord3 = getTexCoord (x3d_TexCoord3);
+         #endif
       #endif
    #endif
 

package/src/bookmarks.js

@@ -125,7 +125,7 @@ const Bookmarks = (function ()
             base  = url .replace (/(?:\.O)?\.[^\.]+$/, ""),
             local = base .replace (/https:\/\/create3000.github.io\/(.*?)\//, "http://192.168.0.18/$1/docs/");
 
-         $(".file") .text (url)
+         $("#file") .text (url)
             .append ($("<a/>")
             .attr ('href', base + ".x3d")
             .on ("click", () => this .loadURL (base + ".x3d") && false)

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

@@ -47,7 +47,7 @@
 
 import Algorithm from "../Algorithm.js";
 
-const clamp = Algorithm .clamp;
+const { clamp, interval, degrees } = Algorithm;
 
 const
    _r = Symbol .for ("X_ITE.Color3.r"),
@@ -157,7 +157,7 @@ Color3 .prototype =
       }
       else
       {
-         const w = Algorithm .degrees (Algorithm .interval (h, 0, Math .PI * 2)) / 60;     // sector 0 to 5
+         const w = degrees (interval (h, 0, Math .PI * 2)) / 60;     // sector 0 to 5
 
          const i = Math .floor (w);
          const f = w - i;                      // factorial part of h

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

@@ -48,7 +48,7 @@
 import Color3    from "./Color3.js";
 import Algorithm from "../Algorithm.js";
 
-const clamp = Algorithm .clamp;
+const { clamp } = Algorithm;
 
 const
    _r = Symbol .for ("X_ITE.Color3.r"),

package/src/tests.js

@@ -107,6 +107,7 @@ const X_ITE_TESTS = [
    { path: "Interpolation/Cube.wrl" },
    { path: "Interpolation/EaseInEaseOut.wrl" },
    { path: "Interpolation/Interpolators.wrl" },
+   { path: "Interpolation/Jumps.x3dv" },
    { path: "Interpolation/LineTrail.wrl" },
    { path: "Interpolation/NormalInterpolator.x3d" },
    { path: "Interpolation/OrientationInterpolator.x3d" },

package/src/x_ite/Browser/Core/BrowserOptions.js

@@ -265,6 +265,9 @@ BrowserOptions .prototype = Object .assign (Object .create (X3DBaseNode .prototy
    set_straightenHorizon__: function (straightenHorizon)
    {
       this .localStorage .StraightenHorizon = straightenHorizon .getValue ();
+
+      if (straightenHorizon .getValue ())
+         this .getBrowser () .getActiveLayer ()?.straightenView ();
    },
    updateContentScale: function ()
    {

package/src/x_ite/Browser/Core/BrowserTimings.js

@@ -49,8 +49,6 @@ import X3DBaseNode from "../../Base/X3DBaseNode.js";
 import StopWatch   from "../../../standard/Time/StopWatch.js";
 import _           from "../../../locale/gettext.js";
 
-function f2 (n) { return n .toFixed (2); }
-
 function BrowserTimings (executionContext)
 {
    X3DBaseNode .call (this, executionContext);
@@ -111,6 +109,7 @@ BrowserTimings .prototype = Object .assign (Object .create (X3DBaseNode .prototy
          this .fps .reset ();
          this .getBrowser () .prepareEvents () .addInterest ("update", this);
          this .update ();
+         this .build ();
       }
       else
       {
@@ -158,7 +157,7 @@ BrowserTimings .prototype = Object .assign (Object .create (X3DBaseNode .prototy
       let r = 0;
 
       rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Frame rate") + ":")) .append ($("<td></td>") .text (f2(1000 / this .fps .averageTime) .toLocaleString (language, fixed) + " " + _("fps")));
-      rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Speed")      + ":")) .append ($("<td></td>") .text (f2(this .getSpeed (browser .currentSpeed))         .toLocaleString (language, fixed) + " " + this .getSpeedUnit (browser .currentSpeed)));
+      rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Speed") + ":")) .append ($("<td></td>") .text (f2(this .getSpeed (browser .currentSpeed)) .toLocaleString (language, fixed) + " " + this .getSpeedUnit (browser .currentSpeed)));
 
       if (this .localStorage .type === "MORE")
       {
@@ -183,14 +182,14 @@ BrowserTimings .prototype = Object .assign (Object .create (X3DBaseNode .prototy
 
          rows [1] .addClass ("x_ite-private-more");
 
-         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Browser")   + ":")) .append ($("<td></td>") .text (f2(browser .getSystemTime () .averageTime)           .toLocaleString (language, fixed) + " " + _("ms")));
-         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("X3D total")       + ":")) .append ($("<td></td>") .text (f2(browser .getBrowserTime () .averageTime) .toLocaleString (language, fixed) + " " + _("ms")));
-         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Event Processing")   + ":")) .append ($("<td></td>") .text (f2(routingTime)          .toLocaleString (language, fixed) + " " + _("ms")));
-         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Pointer")   + ":")) .append ($("<td></td>") .text (f2(browser .getPointingTime () .averageTime) .toLocaleString (language, fixed) + " " + _("ms")));
-         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Camera")    + ":")) .append ($("<td></td>") .text (f2(browser .getCameraTime () .averageTime)  .toLocaleString (language, fixed) + " " + _("ms")));
-         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Picking")   + ":")) .append ($("<td></td>") .text (f2(browser .getPickingTime () .averageTime) .toLocaleString (language, fixed) + " " + _("ms")));
-         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Collision Detection") + ":")) .append ($("<td></td>") .text (f2(collisionTime)        .toLocaleString (language, fixed) + " " + _("ms")));
-         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Rendering")   + ":")) .append ($("<td></td>") .text (f2(browser .getDisplayTime () .averageTime) .toLocaleString (language, fixed) + " " + _("ms")));
+         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Browser") + ":")) .append ($("<td></td>") .text (f2(browser .getSystemTime () .averageTime)           .toLocaleString (language, fixed) + " " + _("ms")));
+         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("X3D total") + ":")) .append ($("<td></td>") .text (f2(browser .getBrowserTime () .averageTime) .toLocaleString (language, fixed) + " " + _("ms")));
+         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Event Processing") + ":")) .append ($("<td></td>") .text (f2(routingTime) .toLocaleString (language, fixed) + " " + _("ms")));
+         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Pointer") + ":")) .append ($("<td></td>") .text (f2(browser .getPointingTime () .averageTime) .toLocaleString (language, fixed) + " " + _("ms")));
+         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Camera") + ":")) .append ($("<td></td>") .text (f2(browser .getCameraTime () .averageTime)  .toLocaleString (language, fixed) + " " + _("ms")));
+         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Picking") + ":")) .append ($("<td></td>") .text (f2(browser .getPickingTime () .averageTime) .toLocaleString (language, fixed) + " " + _("ms")));
+         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Collision Detection") + ":")) .append ($("<td></td>") .text (f2(collisionTime) .toLocaleString (language, fixed) + " " + _("ms")));
+         rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Rendering") + ":")) .append ($("<td></td>") .text (f2(browser .getDisplayTime () .averageTime) .toLocaleString (language, fixed) + " " + _("ms")));
          rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Number of Shapes")    + ":")) .append ($("<td></td>") .text (opaqueShapes + " + " + transparentShapes));
          rows [r++] = $("<tr></tr>") .append ($("<td></td>") .text (_("Number of Sensors")   + ":")) .append ($("<td></td>") .text (prepareEvents + sensors));
 
@@ -228,4 +227,6 @@ BrowserTimings .prototype = Object .assign (Object .create (X3DBaseNode .prototy
    },
 });
 
+function f2 (n) { return isFinite (n) ? n .toFixed (2) : 0 .toFixed (2); }
+
 export default BrowserTimings;