x_ite 5.0.2 → 6.0.0

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

@@ -50,6 +50,7 @@
 define ([
    "jquery",
    "x_ite/Fields",
+   "x_ite/Browser/Core/Context",
    "x_ite/Browser/Core/BrowserTimings",
    "x_ite/Browser/Core/BrowserOptions",
    "x_ite/Browser/Core/BrowserProperties",
@@ -64,6 +65,7 @@ define ([
 ],
 function ($,
           Fields,
+          Context,
           BrowserTimings,
           BrowserOptions,
           BrowserProperties,
@@ -80,114 +82,14 @@ function ($,
 
    const WEBGL_LATEST_VERSION = 2;
 
-   const extensions = [
-      "ANGLE_instanced_arrays",
-      "EXT_blend_minmax",
-      "EXT_frag_depth",
-      "EXT_shader_texture_lod",
-      "EXT_texture_filter_anisotropic",
-      "OES_element_index_uint",
-      "OES_standard_derivatives",
-      "OES_texture_float",
-      "OES_texture_float_linear",
-      "OES_texture_half_float",
-      "OES_texture_half_float_linear",
-      "OES_vertex_array_object",
-      "WEBGL_compressed_texture_s3tc",
-      "WEBGL_debug_renderer_info",
-      "WEBGL_debug_shaders",
-      "WEBGL_depth_texture",
-      "WEBGL_draw_buffers",
-      "WEBGL_lose_context",
-
-      "EXT_color_buffer_float",
-      "EXT_color_buffer_half_float",
-      "EXT_disjoint_timer_query",
-      "EXT_disjoint_timer_query_webgl2",
-      "EXT_sRGB",
-      "WEBGL_color_buffer_float",
-      "WEBGL_compressed_texture_astc",
-      "WEBGL_compressed_texture_atc",
-      "WEBGL_compressed_texture_etc",
-      "WEBGL_compressed_texture_etc1",
-      "WEBGL_compressed_texture_pvrtc",
-      "WEBGL_compressed_texture_s3tc",
-      "WEBGL_compressed_texture_s3tc_srgb",
-
-      "EXT_float_blend",
-      "OES_fbo_render_mipmap",
-      "WEBGL_get_buffer_sub_data_async",
-      "WEBGL_multiview",
-      "WEBGL_security_sensitive_resources",
-      "WEBGL_shared_resources",
-
-      "EXT_clip_cull_distance",
-      "WEBGL_debug",
-      "WEBGL_dynamic_texture",
-      "WEBGL_subarray_uploads",
-      "WEBGL_texture_multisample",
-      "WEBGL_texture_source_iframe",
-      "WEBGL_video_texture",
-
-      "EXT_texture_storage",
-      "OES_depth24",
-      "WEBGL_debug_shader_precision",
-      "WEBGL_draw_elements_no_range_check",
-      "WEBGL_subscribe_uniform",
-      "WEBGL_texture_from_depth_video",
-   ];
-
-   function getContext (canvas, version, preserveDrawingBuffer)
-   {
-      const options = { preserveDrawingBuffer: preserveDrawingBuffer };
-
-      let gl = null;
-
-      if (version >= 2 && ! gl)
-      {
-         gl = canvas .getContext ("webgl2", options);
-
-         if (gl)
-            gl .getVersion = function () { return 2; };
-      }
-
-      if (version >= 1 && ! gl)
-      {
-         gl = canvas .getContext ("webgl",              options) ||
-              canvas .getContext ("experimental-webgl", options);
-
-         if (gl)
-            gl .getVersion = function () { return 1; };
-      }
-
-      if (! gl)
-         throw new Error ("Couldn't create WebGL context.");
-
-      // Feature detection:
-
-      // If the aliased lineWidth ranges are both 1, gl.lineWidth is probably not possible,
-      // thus we disable it completely to prevent webgl errors.
-
-      const aliasedLineWidthRange = gl .getParameter (gl .ALIASED_LINE_WIDTH_RANGE);
-
-      if (aliasedLineWidthRange [0] === 1 && aliasedLineWidthRange [1] === 1)
-      {
-         gl .lineWidth = Function .prototype;
-      }
-
-      // Return context.
-
-      return gl;
-   }
-
    const
       _number              = Symbol (),
       _element             = Symbol (),
-      _splashScreen        = Symbol (),
+      _shadow              = Symbol (),
       _surface             = Symbol (),
       _canvas              = Symbol (),
       _context             = Symbol (),
-      _extensions          = Symbol (),
+      _splashScreen        = Symbol (),
       _localStorage        = Symbol (),
       _mobile              = Symbol (),
       _browserTimings      = Symbol (),
@@ -199,40 +101,37 @@ function ($,
       _observer            = Symbol (),
       _privateScene        = Symbol (),
       _keydown             = Symbol (),
-      _keyup               = Symbol ();
+      _keyup               = Symbol (),
+      _pixelPerPoint       = Symbol ();
 
    let browserNumber = 0;
 
    function X3DCoreContext (element)
    {
-      this [_number]  = ++ browserNumber;
-      this [_element] = element;
-
       // Get canvas & context.
 
       const
-          browser      = $("<div></div>") .addClass ("x_ite-private-browser x_ite-private-browser-" + this .getNumber ()) .prependTo (this [_element]),
-         splashScreen = $("<div></div>") .addClass ("x_ite-private-splash-screen") .appendTo (browser),
+         shadow       = $(element .prop ("shadowRoot")),
+         browser      = $("<div></div>") .addClass ("x_ite-private-browser"),
+         surface      = $("<div></div>") .addClass ("x_ite-private-surface") .appendTo (browser),
+         splashScreen = $("<div></div>") .hide () .addClass ("x_ite-private-splash-screen") .appendTo (browser),
          spinner      = $("<div></div>") .addClass ("x_ite-private-spinner") .appendTo (splashScreen),
-         progress     = $("<div></div>") .addClass ("x_ite-private-progress") .appendTo (splashScreen),
-         surface      = $("<div></div>") .addClass ("x_ite-private-surface") .appendTo (browser);
+         progress     = $("<div></div>") .addClass ("x_ite-private-progress") .appendTo (splashScreen);
 
-      $("<div></div>") .addClass ("x_ite-private-x_ite") .html ("X_ITE<span class='x_ite-private-x3d'>X3D</span>") .appendTo (progress);
+      $("<div></div>") .addClass ("x_ite-private-x_ite") .html (this .getName () + "<span class='x_ite-private-x3d'>X3D</span>") .appendTo (progress);
       $("<div></div>") .addClass ("x_ite-private-progressbar")  .appendTo (progress) .append ($("<div></div>"));
       $("<div></div>") .addClass ("x_ite-private-spinner-text") .appendTo (progress);
 
-      this [_splashScreen] = splashScreen;
+      this [_number]       = ++ browserNumber;
+      this [_element]      = element;
+      this [_shadow]       = shadow .length ? shadow .append (browser .hide ()) : this [_element] .prepend (browser);
       this [_surface]      = surface;
       this [_canvas]       = $("<canvas></canvas>") .addClass ("x_ite-private-canvas") .prependTo (surface);
-      this [_context]      = getContext (this [_canvas] [0], WEBGL_LATEST_VERSION, element .attr ("preserveDrawingBuffer") === "true");
-      this [_extensions]   = new Map ();
-
-      const gl = this .getContext ();
+      this [_context]      = Context .create (this [_canvas] [0], WEBGL_LATEST_VERSION, element .attr ("preserveDrawingBuffer") === "true");
+      this [_splashScreen] = splashScreen;
 
-      for (const extension of extensions)
-      {
-         this [_extensions] .set (extension, gl .getExtension (extension));
-      }
+      if (shadow .length)
+         shadow .prop ("loaded") .then (function () { browser .show (); });
 
       this [_localStorage] = new DataStorage (localStorage, "X_ITE.X3DBrowser(" + this [_number] + ").");
       this [_mobile]       = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i .test (navigator .userAgent);
@@ -244,6 +143,10 @@ function ($,
       this [_notification]        = new Notification        (this .getPrivateScene ());
       this [_contextMenu]         = new ContextMenu         (this .getPrivateScene ());
 
+      const inches = $("<div></div>") .hide () .css ("height", "10in") .appendTo (this [_shadow]);
+      this [_pixelPerPoint] = inches .height () / 720;
+      inches .remove ();
+
       $(".x_ite-console") .empty ();
 
       this .addChildObjects ("controlKey",  new Fields .SFBool (),
@@ -259,8 +162,8 @@ function ($,
          // Setup browser nodes.
 
          this [_browserTimings]      .setup ();
-         this [_browserOptions]      .setup ()
-         this [_browserProperties]   .setup ()
+         this [_browserOptions]      .setup ();
+         this [_browserProperties]   .setup ();
          this [_renderingProperties] .setup ();
          this [_notification]        .setup ();
          this [_contextMenu]         .setup ();
@@ -335,6 +238,10 @@ function ($,
       {
          return this [_element];
       },
+      getShadow: function ()
+      {
+         return this [_shadow];
+      },
       getSurface: function ()
       {
          return this [_surface];
@@ -351,10 +258,6 @@ function ($,
       {
          return this [_context];
       },
-      getExtension: function (name)
-      {
-         return this [_extensions] .get (name);
-      },
       getMobile: function ()
       {
          return this [_mobile];
@@ -481,7 +384,7 @@ function ($,
          else
          {
             if (! this .getLoading ())
-               this .getCanvas () .fadeIn (0);
+               this .getCanvas () .show ();
          }
       },
       setBrowserEventHandler: function (name)
@@ -544,15 +447,6 @@ function ($,
                this ._altKey = true;
                break;
             }
-            case 37: // Left
-            case 38: // Up
-            case 39: // Right
-            case 40: // Down
-            {
-               // Prevent bug in Firefox that event loop is broken when pressing these keys.
-               this .requestAnimationFrame ();
-               break;
-            }
             case 49: // 1
             {
                if (this .getDebug ())
@@ -782,15 +676,6 @@ function ($,
                this ._altKey = false;
                break;
             }
-            case 37: // Left
-            case 38: // Up
-            case 39: // Right
-            case 40: // Down
-            {
-               // Prevent bug in Firefox that event loop is broken when pressing these keys.
-               this .requestAnimationFrame ();
-               break;
-            }
             case 225: // Alt Gr
             {
                this ._altGrKey = false;
@@ -802,11 +687,15 @@ function ($,
       {
          // The textarea must be visible to make copy work.
          const $temp = $("<textarea></textarea>");
-         this .getElement () .find (".x_ite-private-browser") .prepend ($temp);
+         this .getShadow () .find (".x_ite-private-browser") .prepend ($temp);
          $temp .text (text) .select ();
          document .execCommand ("copy");
          $temp .remove ();
       },
+      getPixelPerPoint: function ()
+      {
+         return this [_pixelPerPoint];
+      },
    };
 
    return X3DCoreContext;

package/src/x_ite/Browser/Layout/ScreenText.js

@@ -247,6 +247,10 @@ function ($,
             cx .fillRect (0, 0, canvas .width, canvas .height);
             cx .fillStyle = "rgba(255,255,255,1)";
 
+            cx .save ();
+            cx .translate (0, canvas .height);
+            cx .scale (1, -1);
+
             // Draw glyphs.
 
             if (fontStyle ._horizontal .getValue ())
@@ -312,13 +316,16 @@ function ($,
                }
             }
 
+            cx .restore ();
+
             // Transfer texture data.
 
             const imageData = cx .getImageData (0, 0, canvas .width, canvas .height);
 
-            // If the cavas is to large imageData is null.
+            // If the canvas is to large imageData is null.
+
             if (imageData)
-               this .textureNode .setTexture (canvas .width, canvas .height, true, new Uint8Array (imageData .data .buffer), true);
+               this .textureNode .setTexture (canvas .width, canvas .height, true, new Uint8Array (imageData .data .buffer), false);
             else
                this .textureNode .clear ();
          };
@@ -458,12 +465,12 @@ function ($,
       },
       transformLine: function (line)
       {
-         // Apply sceen nodes transformation in place here.
+         // Apply screen nodes transformation in place here.
          return line .multLineMatrix (Matrix4 .inverse (this .matrix));
       },
       transformMatrix: function (matrix)
       {
-         // Apply sceen nodes transformation in place here.
+         // Apply screen nodes transformation in place here.
          return matrix .multLeft (this .matrix);
       },
    });

package/src/x_ite/Browser/Layout/X3DLayoutContext.js

@@ -57,24 +57,13 @@ function ($,
 "use strict";
 
    const
-      _pointSize               = Symbol (),
       _screenTextureProperties = Symbol ();
 
-   function X3DLayoutContext () { }
+   function X3DLayoutContext ()
+   { }
 
    X3DLayoutContext .prototype =
    {
-      getPointSize: function ()
-      {
-         if (this [_pointSize] === undefined)
-         {
-            const div = $("<div></div>") .css ("height", "1in") .css ("display", "none");
-            this [_pointSize] = div .appendTo ($("body")) .height () / 72;
-            div .remove ();
-         }
-
-         return this [_pointSize];
-      },
       getScreenTextureProperties: function ()
       {
          this [_screenTextureProperties] = new TextureProperties (this .getPrivateScene ());
@@ -82,8 +71,8 @@ function ($,
          this [_screenTextureProperties] ._boundaryModeS       = "CLAMP";
          this [_screenTextureProperties] ._boundaryModeT       = "CLAMP";
          this [_screenTextureProperties] ._boundaryModeR       = "CLAMP";
-         this [_screenTextureProperties] ._minificationFilter  = "NEAREST";
-         this [_screenTextureProperties] ._magnificationFilter = "NEAREST";
+         this [_screenTextureProperties] ._minificationFilter  = "NEAREST_PIXEL";
+         this [_screenTextureProperties] ._magnificationFilter = "NEAREST_PIXEL";
          this [_screenTextureProperties] ._generateMipMaps     = false;
 
          this [_screenTextureProperties] .setup ();

package/src/x_ite/Browser/Navigation/ExamineViewer.js

@@ -173,9 +173,6 @@ function ($,
       },
       mousedown: function (event)
       {
-         if (this .getBrowser () .getContextMenu () .getActive ())
-            return;
-
          if (this .button >= 0)
             return;
 
@@ -449,21 +446,24 @@ function ($,
                // End rotate (button 0).
 
                event .button = 0;
+               event .pageX  = this .touch1 .x;
+               event .pageY  = this .touch1 .y;
 
                this .mouseup (event);
 
                // Start dblclick (button 0).
 
-               if (this .getBrowser () .getCurrentTime () - this .tapStart < this .dblTapInterval)
+               if (this .tapedTwice)
                {
-                  event .button = 0;
-                  event .pageX  = this .touch1 .x;
-                  event .pageY  = this .touch1 .y;
-
                   this .dblclick (event);
                }
+               else
+               {
+                  this .tapedTwice = true;
+
+                  setTimeout (function () { this .tapedTwice = false; } .bind (this), 300);
+               }
 
-               this .tapStart = this .getBrowser () .getCurrentTime ();
                break;
             }
             case 1:
@@ -650,17 +650,10 @@ function ($,
 
          return function (rotationChange)
          {
-            try
-            {
-               this .disconnect ();
-               this .getBrowser () .prepareEvents () .addInterest ("spin", this);
+            this .disconnect ();
+            this .getBrowser () .prepareEvents () .addInterest ("spin", this);
 
-               this .rotation .assign (rotation .assign (Rotation4 .Identity) .slerp (rotationChange, SPIN_FACTOR));
-            }
-            catch (error)
-            {
-               console .error (error);
-            }
+            this .rotation .assign (rotation .assign (Rotation4 .Identity) .slerp (rotationChange, SPIN_FACTOR));
          };
       })(),
       addMove: (function ()

package/src/x_ite/Browser/Navigation/LookAtViewer.js

@@ -139,9 +139,6 @@ function ($,
       },
       mousedown: function (event)
       {
-         if (this .getBrowser () .getContextMenu () .getActive ())
-            return;
-
          if (this .button >= 0)
             return;
 

package/src/x_ite/Browser/Navigation/PlaneViewer.js

@@ -108,9 +108,6 @@ function ($,
       },
       mousedown: function (event)
       {
-         if (this .getBrowser () .getContextMenu () .getActive ())
-            return;
-
          if (this .button >= 0)
             return;
 

package/src/x_ite/Browser/Navigation/X3DFlyViewer.js

@@ -51,6 +51,7 @@ define ([
    "jquery",
    "x_ite/Browser/Navigation/X3DViewer",
    "x_ite/Components/Followers/OrientationChaser",
+   "x_ite/Rendering/VertexArray",
    "standard/Math/Numbers/Vector3",
    "standard/Math/Numbers/Rotation4",
    "standard/Math/Numbers/Matrix4",
@@ -60,6 +61,7 @@ define ([
 function ($,
           X3DViewer,
           OrientationChaser,
+          VertexArray,
           Vector3,
           Rotation4,
           Matrix4,
@@ -94,10 +96,11 @@ function ($,
       this .toVector          = new Vector3 (0, 0, 0);
       this .direction         = new Vector3 (0, 0, 0);
       this .startTime         = 0;
-      this .lineBuffer        = gl .createBuffer ();
       this .lineCount         = 2;
       this .lineVertices      = new Array (this .lineCount * 4);
       this .lineArray         = new Float32Array (this .lineVertices);
+      this .lineBuffer        = gl .createBuffer ();
+      this .lineArrayObject   = new VertexArray ();
       this .event             = null;
       this .lookAround        = false;
       this .orientationChaser = new OrientationChaser (executionContext);
@@ -156,9 +159,6 @@ function ($,
       },
       mousedown: function (event)
       {
-         if (this .getBrowser () .getContextMenu () .getActive ())
-            return;
-
          if (this .button >= 0)
             return;
 
@@ -691,10 +691,12 @@ function ($,
                shaderNode = browser .getLineShader (),
                lineWidth  = gl .getParameter (gl .LINE_WIDTH);
 
-            if (shaderNode .getValid ())
+            if (shaderNode .isValid ())
             {
                shaderNode .enable (gl);
-               shaderNode .enableVertexAttribute (gl, this .lineBuffer);
+
+               if (this .lineArrayObject .enable (gl, shaderNode))
+                  shaderNode .enableVertexAttribute (gl, this .lineBuffer, 0, 0);
 
                gl .uniform1i (shaderNode .x3d_NumClipPlanes,         0);
                gl .uniform1i (shaderNode .x3d_FogType,               0);
@@ -744,7 +746,7 @@ function ($,
          // Transfer line.
 
          gl .bindBuffer (gl .ARRAY_BUFFER, this .lineBuffer);
-         gl .bufferData (gl .ARRAY_BUFFER, this .lineArray, gl .STATIC_DRAW);
+         gl .bufferData (gl .ARRAY_BUFFER, this .lineArray, gl .DYNAMIC_DRAW);
       },
       disconnect: function ()
       {
@@ -762,6 +764,11 @@ function ($,
       },
       dispose: function ()
       {
+         const gl = this .getBrowser () .getContext ();
+
+         gl .deleteBuffer (this .lineBuffer);
+         this .lineArrayObject .delete (gl);
+
          this .disconnect ();
          this .getBrowser () ._controlKey .removeInterest ("set_controlKey__", this);
          this .getBrowser () .getSurface () .unbind (".X3DFlyViewer");

package/src/x_ite/Browser/Navigation/X3DViewer.js

@@ -122,29 +122,21 @@ function (X3DBaseNode,
 
          return function (x, y, result)
          {
-            try
-            {
-               const
-                  navigationInfo   = this .getNavigationInfo (),
-                  viewpoint        = this .getActiveViewpoint (),
-                  viewport         = this .getViewport () .getRectangle (this .getBrowser ()),
-                  projectionMatrix = viewpoint .getProjectionMatrixWithLimits (navigationInfo .getNearValue (), navigationInfo .getFarValue (viewpoint), viewport);
+            const
+               navigationInfo   = this .getNavigationInfo (),
+               viewpoint        = this .getActiveViewpoint (),
+               viewport         = this .getViewport () .getRectangle (this .getBrowser ()),
+               projectionMatrix = viewpoint .getProjectionMatrixWithLimits (navigationInfo .getNearValue (), navigationInfo .getFarValue (viewpoint), viewport);
 
-               // Far plane point
-               ViewVolume .unProjectPoint (x, this .getBrowser () .getViewport () [3] - y, 0.9, Matrix4 .Identity, projectionMatrix, viewport, far);
+            // Far plane point
+            ViewVolume .unProjectPoint (x, this .getBrowser () .getViewport () [3] - y, 0.9, Matrix4 .Identity, projectionMatrix, viewport, far);
 
-               if (viewpoint instanceof OrthoViewpoint)
-                  return result .set (far .x, far .y, -this .getDistanceToCenter (distance) .abs ());
+            if (viewpoint instanceof OrthoViewpoint)
+               return result .set (far .x, far .y, -this .getDistanceToCenter (distance) .abs ());
 
-               const direction = far .normalize ();
+            const direction = far .normalize ();
 
-               return result .assign (direction) .multiply (this .getDistanceToCenter (distance) .abs () / direction .dot (axis));
-            }
-            catch (error)
-            {
-               console .error (error);
-               return result .set (0, 0, 0);
-            }
+            return result .assign (direction) .multiply (this .getDistanceToCenter (distance) .abs () / direction .dot (axis));
          };
       })(),
       getDistanceToCenter: function (distance, positionOffset)
@@ -194,7 +186,7 @@ function (X3DBaseNode,
       })(),
       touch: function (x, y)
       {
-         this .getBrowser () .touch (x, y);
+         this .getBrowser () .touch (x, y, false);
 
          return this .getBrowser () .getHits () .length;
       },

package/src/x_ite/Browser/Networking/X3DNetworkingContext.js

@@ -85,10 +85,13 @@ function (Fields,
       this [_loading]        = false;
       this [_location]       = getBaseURI (this .getElement () [0]);
 
-      this .getCanvas () .fadeOut (0);
+      this .getCanvas () .hide ();
 
       if (this .getBrowserOptions () .getSplashScreen ())
-         this .getSplashScreen () .fadeIn (0);
+      {
+         this .getContextMenu () .hide ();
+         this .getSplashScreen () .show ();
+      }
    }
 
    X3DNetworkingContext .prototype =
@@ -127,28 +130,29 @@ function (Fields,
          {
             this .resetLoadCount ();
 
-            this .getElement () .find (".x_ite-private-world-info") .remove ();
+            this .getShadow () .find (".x_ite-private-world-info") .remove ();
 
             if (this .getBrowserOptions () .getSplashScreen ())
             {
+               this .getContextMenu ()  .hide ();
                this .getCanvas ()       .stop (true, true) .animate ({ "delay": 1 }, 1) .fadeOut (0);
                this .getSplashScreen () .stop (true, true) .animate ({ "delay": 1 }, 1) .fadeIn (0);
             }
             else
             {
-               this .getCanvas () .fadeOut (0);
+               this .getCanvas () .hide ();
             }
          }
          else
          {
             if (this .getBrowserOptions () .getSplashScreen ())
             {
-               this .getSplashScreen () .stop (true, true) .fadeIn  (0) .fadeOut (2000);
-               this .getCanvas ()       .stop (true, true) .fadeOut (0) .fadeIn  (2000);
+               this .getSplashScreen () .stop (true, true) .show () .fadeOut (2000);
+               this .getCanvas ()       .stop (true, true) .hide () .fadeIn  (2000);
             }
             else
             {
-               this .getCanvas () .fadeIn (0);
+               this .getCanvas () .show ();
             }
          }
       },