x_ite 8.4.3 → 8.5.3

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

@@ -53,6 +53,7 @@ import X3DConstants         from "../../Base/X3DConstants.js";
 import PrimitiveQuality     from "./PrimitiveQuality.js";
 import Shading              from "./Shading.js";
 import TextureQuality       from "./TextureQuality.js";
+import Algorithm            from "../../../standard/Math/Algorithm.js";
 
 function BrowserOptions (executionContext)
 {
@@ -82,10 +83,16 @@ BrowserOptions .prototype = Object .assign (Object .create (X3DBaseNode .prototy
       new X3DFieldDefinition (X3DConstants .inputOutput, "QualityWhenMoving",      new Fields .SFString ("MEDIUM")),
       new X3DFieldDefinition (X3DConstants .inputOutput, "Shading",                new Fields .SFString ("GOURAUD")),
       new X3DFieldDefinition (X3DConstants .inputOutput, "MotionBlur",             new Fields .SFBool ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "Cache",                  new Fields .SFBool (true)),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "ContentScale",           new Fields .SFFloat (1)),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "ContextMenu",            new Fields .SFBool (true)),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "Debug",                  new Fields .SFBool ()),
       new X3DFieldDefinition (X3DConstants .inputOutput, "Gravity",                new Fields .SFFloat (9.80665)),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "LogarithmicDepthBuffer", new Fields .SFBool ()),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "Notifications",          new Fields .SFBool (true)),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "Multisampling",          new Fields .SFInt32 (4)),
       new X3DFieldDefinition (X3DConstants .inputOutput, "StraightenHorizon",      new Fields .SFBool (true)),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "LogarithmicDepthBuffer", new Fields .SFBool (false)),
-      new X3DFieldDefinition (X3DConstants .inputOutput, "Timings",                new Fields .SFBool (false)),
+      new X3DFieldDefinition (X3DConstants .inputOutput, "Timings",                new Fields .SFBool ()),
    ]),
    getTypeName: function ()
    {
@@ -112,90 +119,80 @@ BrowserOptions .prototype = Object .assign (Object .create (X3DBaseNode .prototy
       });
 
       this ._Rubberband             .addInterest ("set_rubberband__",             this);
+      this ._Antialiased            .addInterest ("set_antialiased__",            this);
       this ._PrimitiveQuality       .addInterest ("set_primitiveQuality__",       this);
       this ._TextureQuality         .addInterest ("set_textureQuality__",         this);
       this ._Shading                .addInterest ("set_shading__",                this);
       this ._StraightenHorizon      .addInterest ("set_straightenHorizon__",      this);
+      this ._ContentScale           .addInterest ("set_contentScale__",           this);
       this ._LogarithmicDepthBuffer .addInterest ("set_logarithmicDepthBuffer__", this);
+      this ._Multisampling          .addInterest ("set_multisampling__",          this);
       this ._Timings                .addInterest ("set_timings__",                this);
 
       this .configure ();
    },
-   configure: function ()
+   configure: (function ()
    {
-      const localStorage = this .localStorage;
-
-      for (const fieldDefinition of this .getFieldDefinitions ())
+      const globals = new Set ([
+         "Antialiased",
+         "Cache",
+         "ContentScale",
+         "ContextMenu",
+         "Debug",
+         "Multisampling",
+         "Notifications",
+         "SplashScreen",
+      ]);
+
+      return function ()
       {
-         const field = this .getField (fieldDefinition .name);
+         const
+            browser      = this .getBrowser (),
+            localStorage = this .localStorage;
 
-         if (localStorage [fieldDefinition .name] !== undefined)
-            continue;
+         for (const { name, value } of this .getFieldDefinitions ())
+         {
+            if (globals .has (name))
+            {
+               const attribute = name [0] .toLowerCase () + name .slice (1);
+               browser .attributeChangedCallback (attribute, null, browser .getElement () .attr (name));
+               continue;
+            }
 
-         if (! field .equals (fieldDefinition .value))
-            field .assign (fieldDefinition .value);
-      }
+            if (localStorage [name] !== undefined)
+               continue;
 
-      const
-         rubberband        = localStorage .Rubberband,
-         primitiveQuality  = localStorage .PrimitiveQuality,
-         textureQuality    = localStorage .TextureQuality,
-         straightenHorizon = localStorage .StraightenHorizon,
-         timings           = localStorage .Timings;
+            const field = this .getField (name);
 
-      if (rubberband !== this ._Rubberband .getValue ())
-         this ._Rubberband = rubberband;
+            if (field .equals (value))
+               continue;
 
-      if (primitiveQuality !== this ._PrimitiveQuality .getValue ())
-         this ._PrimitiveQuality = primitiveQuality;
+            field .assign (value);
+         }
 
-      if (textureQuality !== this ._TextureQuality .getValue ())
-         this ._TextureQuality = textureQuality;
+         const
+            rubberband        = localStorage .Rubberband,
+            primitiveQuality  = localStorage .PrimitiveQuality,
+            textureQuality    = localStorage .TextureQuality,
+            straightenHorizon = localStorage .StraightenHorizon,
+            timings           = localStorage .Timings;
 
-      if (straightenHorizon !== this ._StraightenHorizon .getValue ())
-         this ._StraightenHorizon = straightenHorizon;
+         if (rubberband !== this ._Rubberband .getValue ())
+            this ._Rubberband = rubberband;
 
-      if (timings !== this ._Timings .getValue ())
-         this ._Timings = timings;
-   },
-   getAttribute: function (name)
-   {
-      const element = this .getBrowser () .getElement ();
+         if (primitiveQuality !== this ._PrimitiveQuality .getValue ())
+            this ._PrimitiveQuality = primitiveQuality;
 
-      return element .attr (name) || element .attr (name .toLowerCase ());
-   },
-   toBoolean: function  (value, defaultValue)
-   {
-      value = String (value) .toLowerCase ();
-
-      if (value === "true")
-         return true;
+         if (textureQuality !== this ._TextureQuality .getValue ())
+            this ._TextureQuality = textureQuality;
 
-      if (value === "false")
-         return false;
+         if (straightenHorizon !== this ._StraightenHorizon .getValue ())
+            this ._StraightenHorizon = straightenHorizon;
 
-      return defaultValue;
-   },
-   getCache: function ()
-   {
-      return this .toBoolean (this .getAttribute ("cache"), true);
-   },
-   getContextMenu: function ()
-   {
-      return this .toBoolean (this .getAttribute ("contextMenu"), true);
-   },
-   getDebug: function ()
-   {
-      return this .toBoolean (this .getAttribute ("debug"), false);
-   },
-   getNotifications: function ()
-   {
-      return this .toBoolean (this .getAttribute ("notifications"), true);
-   },
-   getSplashScreen: function ()
-   {
-      return this .toBoolean (this .getAttribute ("splashScreen"), this ._SplashScreen .getValue ());
-   },
+         if (timings !== this ._Timings .getValue ())
+            this ._Timings = timings;
+      };
+   })(),
    getPrimitiveQuality: function ()
    {
       return this .primitiveQuality;
@@ -212,6 +209,10 @@ BrowserOptions .prototype = Object .assign (Object .create (X3DBaseNode .prototy
    {
       this .localStorage .Rubberband = rubberband .getValue ();
    },
+   set_antialiased__: function ()
+   {
+      this .set_multisampling__ (this ._Multisampling);
+   },
    set_primitiveQuality__: function (value)
    {
       const
@@ -265,6 +266,38 @@ BrowserOptions .prototype = Object .assign (Object .create (X3DBaseNode .prototy
    {
       this .localStorage .StraightenHorizon = straightenHorizon .getValue ();
    },
+   updateContentScale: function ()
+   {
+      const
+         browser = this .getBrowser (),
+         media   = window .matchMedia (`(resolution: ${window .devicePixelRatio}dppx)`),
+         update  = this .updateContentScale .bind (this);
+
+      if (this .removeUpdateContentScale)
+         this .removeUpdateContentScale ();
+
+      this .removeUpdateContentScale = function () { media .removeEventListener ("change", update) };
+
+      media .addEventListener ("change", update);
+
+      browser .getRenderingProperties () ._ContentScale = window .devicePixelRatio;
+
+      browser .reshape ();
+   },
+   set_contentScale__: function (contentScale)
+   {
+      const browser = this .getBrowser ();
+
+      if (this .removeUpdateContentScale)
+         this .removeUpdateContentScale ();
+
+      if (contentScale .getValue () === -1)
+         this .updateContentScale ();
+      else
+         browser .getRenderingProperties () ._ContentScale = Math .max (contentScale .getValue (), 0) || 1;
+
+      browser .reshape ();
+   },
    set_logarithmicDepthBuffer__: function (logarithmicDepthBuffer)
    {
       const
@@ -273,6 +306,17 @@ BrowserOptions .prototype = Object .assign (Object .create (X3DBaseNode .prototy
 
       browser .getRenderingProperties () ._LogarithmicDepthBuffer = logarithmicDepthBuffer .getValue () && gl .HAS_FEATURE_FRAG_DEPTH;
    },
+   set_multisampling__: function (multisampling)
+   {
+      const
+         browser = this .getBrowser (),
+         samples = Algorithm .clamp (multisampling .getValue (), 0, browser .getMaxSamples ());
+
+      browser .getRenderingProperties () ._Multisampling = this ._Antialiased .getValue () ? samples : 0;
+      browser .getRenderingProperties () ._Antialiased   = browser .getAntialiased ();
+
+      browser .reshape ();
+   },
    set_timings__: function (timings)
    {
       this .localStorage .Timings = timings .getValue ();

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

@@ -114,7 +114,7 @@ const Context =
 
       if (version >= 2 && ! gl)
       {
-         gl = canvas .getContext ("webgl2", options);
+         gl = canvas .getContext ("webgl2", { ... options, antialias: false });
 
          if (gl)
             gl .getVersion = function () { return 2; };

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

@@ -118,7 +118,7 @@ ContextMenu .prototype = Object .assign (Object .create (X3DBaseNode .prototype)
          browser    = this .getBrowser (),
          fullscreen = browser .getElement () .fullScreen ();
 
-      if (! browser .getBrowserOptions () .getContextMenu ())
+      if (! browser .getBrowserOption ("ContextMenu"))
          return;
 
       const menu = {
@@ -455,7 +455,7 @@ ContextMenu .prototype = Object .assign (Object .create (X3DBaseNode .prototype)
          delete menu .items ["straighten-horizon"];
       }
 
-      if (! browser .getDebug ())
+      if (! browser .getBrowserOption ("Debug"))
       {
          delete menu .items ["shading"];
       }

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

@@ -95,7 +95,7 @@ Notification .prototype = Object .assign (Object .create (X3DBaseNode .prototype
    },
    set_string__: function ()
    {
-      if (! this .getBrowser () .getBrowserOptions () .getNotifications ())
+      if (! this .getBrowser () .getBrowserOption ("Notifications"))
          return;
 
       if (this ._string .length === 0)

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

@@ -69,7 +69,10 @@ RenderingProperties .prototype = Object .assign (Object .create (X3DBaseNode .pr
       new X3DFieldDefinition (X3DConstants .outputOnly, "Antialiased",            new Fields .SFBool (true)),
       new X3DFieldDefinition (X3DConstants .outputOnly, "ColorDepth",             new Fields .SFInt32 ()),
       new X3DFieldDefinition (X3DConstants .outputOnly, "TextureMemory",          new Fields .SFDouble ()),
+      new X3DFieldDefinition (X3DConstants .outputOnly, "ContentScale",           new Fields .SFFloat (1)),
       new X3DFieldDefinition (X3DConstants .outputOnly, "LogarithmicDepthBuffer", new Fields .SFBool (false)),
+      new X3DFieldDefinition (X3DConstants .outputOnly, "MaxSamples",             new Fields .SFInt32 ()),
+      new X3DFieldDefinition (X3DConstants .outputOnly, "Multisampling",          new Fields .SFInt32 (4)),
    ]),
    getTypeName: function ()
    {
@@ -94,6 +97,7 @@ RenderingProperties .prototype = Object .assign (Object .create (X3DBaseNode .pr
       this ._MaxLights      = browser .getMaxLights ();
       this ._ColorDepth     = browser .getColorDepth ();
       this ._TextureMemory  = browser .getTextureMemory ();
+      this ._MaxSamples     = browser .getMaxSamples ();
    },
 });
 

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

@@ -57,29 +57,30 @@ import Scene               from "../../Execution/Scene.js";
 import DataStorage         from "../../../standard/Utility/DataStorage.js";
 import Vector3             from "../../../standard/Math/Numbers/Vector3.js";
 import _                   from "../../../locale/gettext.js";
+import DEBUG from "../../DEBUG.js";
 
 const WEBGL_LATEST_VERSION = 2;
 
 const
-   _instanceId          = Symbol (),
-   _element             = Symbol (),
-   _shadow              = Symbol (),
-   _surface             = Symbol (),
-   _canvas              = Symbol (),
-   _context             = Symbol (),
-   _splashScreen        = Symbol (),
-   _localStorage        = Symbol (),
-   _mobile              = Symbol (),
-   _browserTimings      = Symbol (),
-   _browserOptions      = Symbol (),
-   _browserProperties   = Symbol (),
-   _renderingProperties = Symbol (),
-   _notification        = Symbol (),
-   _contextMenu         = Symbol (),
-   _privateScene        = Symbol (),
-   _keydown             = Symbol (),
-   _keyup               = Symbol (),
-   _pixelPerPoint       = Symbol ();
+   _instanceId               = Symbol (),
+   _element                  = Symbol (),
+   _shadow                   = Symbol (),
+   _surface                  = Symbol (),
+   _canvas                   = Symbol (),
+   _context                  = Symbol (),
+   _splashScreen             = Symbol (),
+   _localStorage             = Symbol (),
+   _mobile                   = Symbol (),
+   _browserTimings           = Symbol (),
+   _browserOptions           = Symbol (),
+   _browserProperties        = Symbol (),
+   _renderingProperties      = Symbol (),
+   _notification             = Symbol (),
+   _contextMenu              = Symbol (),
+   _privateScene             = Symbol (),
+   _keydown                  = Symbol (),
+   _keyup                    = Symbol (),
+   _pixelPerPoint            = Symbol ();
 
 let instanceId = 0;
 
@@ -122,10 +123,10 @@ function X3DCoreContext (element)
 
    this [_pixelPerPoint] = 1; // default 72 dpi
 
-   this .addChildObjects ("controlKey",  new Fields .SFBool (),
-                          "shiftKey",    new Fields .SFBool (),
-                          "altKey",      new Fields .SFBool (),
-                          "altGrKey",    new Fields .SFBool ());
+   this .addChildObjects ("controlKey", new Fields .SFBool (),
+                          "shiftKey",   new Fields .SFBool (),
+                          "altKey",     new Fields .SFBool (),
+                          "altGrKey",   new Fields .SFBool ());
 }
 
 X3DCoreContext .prototype =
@@ -145,32 +146,28 @@ X3DCoreContext .prototype =
 
       Object .defineProperty (this .getElement () .get (0), "src",
       {
-         get: function ()
+         get: () =>
          {
             return this .getExecutionContext () .getWorldURL ();
-         }
-         .bind (this),
-         set: function (value)
+         },
+         set: (value) =>
          {
             this .loadURL (new Fields .MFString (value), new Fields .MFString ());
-         }
-         .bind (this),
+         },
          enumerable: true,
          configurable: false,
       });
 
       Object .defineProperty (this .getElement () .get (0), "url",
       {
-         get: function ()
+         get: () =>
          {
             return new Fields .MFString (this .getExecutionContext () .getWorldURL ());
-         }
-         .bind (this),
-         set: function (value)
+         },
+         set: (value) =>
          {
             this .loadURL (value, new Fields .MFString ());
-         }
-         .bind (this),
+         },
          enumerable: true,
          configurable: false,
       });
@@ -180,10 +177,6 @@ X3DCoreContext .prototype =
       this .getElement () .on ("keydown.X3DCoreContext", this [_keydown] .bind (this));
       this .getElement () .on ("keyup.X3DCoreContext",   this [_keyup]   .bind (this));
    },
-   getDebug: function ()
-   {
-      return this .getBrowserOptions () .getDebug ();
-   },
    getInstanceId: function ()
    {
       return this [_instanceId];
@@ -265,7 +258,7 @@ X3DCoreContext .prototype =
    },
    getPixelPerPoint: function ()
    {
-      return this [_pixelPerPoint];
+      return this [_pixelPerPoint] * this .getRenderingProperty ("ContentScale");
    },
    connectedCallback: function ()
    {
@@ -275,11 +268,53 @@ X3DCoreContext .prototype =
    },
    attributeChangedCallback: function (name, oldValue, newValue)
    {
-      switch (name .toLowerCase ())
+      switch (name)
       {
+         case "antialiased":
+         {
+            this .setBrowserOption ("Antialiased", this .parseBooleanAttribute (newValue, true));
+            break;
+         }
+         case "cache":
+         {
+            this .setBrowserOption ("Cache", this .parseBooleanAttribute (newValue, true));
+            break;
+         }
+         case "contentScale":
+         case "contentscale":
+         {
+            this .setBrowserOption ("ContentScale", newValue === "auto" ? -1 : parseFloat (newValue));
+            break;
+         }
+         case "contextMenu":
+         case "contextmenu":
+         {
+            this .setBrowserOption ("ContextMenu", this .parseBooleanAttribute (newValue, true));
+            break;
+         }
+         case "debug":
+         {
+            this .setBrowserOption ("Debug", this .parseBooleanAttribute (newValue, false));
+            break;
+         }
+         case "multisampling":
+         {
+            const samples = parseInt (newValue);
+
+            this .setBrowserOption ("Multisampling", isNaN (samples) ? 4 : samples);
+            break;
+         }
+         case "notifications":
+         {
+            this .setBrowserOption ("Notifications", this .parseBooleanAttribute (newValue, true));
+            break;
+         }
+         case "splashScreen":
          case "splashscreen":
          {
-            if (newValue .toLowerCase () !== "true")
+            this .setBrowserOption ("SplashScreen", this .parseBooleanAttribute (newValue, true));
+
+            if (! this .getBrowserOption ("SplashScreen"))
             {
                this .getCanvas () .show ();
                this .getSplashScreen () .stop (true, true) .hide ();
@@ -299,6 +334,16 @@ X3DCoreContext .prototype =
          }
       }
    },
+   parseBooleanAttribute: function  (value, defaultValue)
+   {
+      if (value === "true")
+         return true;
+
+      if (value === "false")
+         return false;
+
+      return defaultValue;
+   },
    parseUrlAttribute: function (urlCharacters)
    {
       const url = new Fields .MFString ();
@@ -355,7 +400,7 @@ X3DCoreContext .prototype =
          }
          case 49: // 1
          {
-            if (this .getDebug ())
+            if (this .getBrowserOption ("Debug"))
             {
                if (this .getControlKey ())
                {
@@ -369,7 +414,7 @@ X3DCoreContext .prototype =
          }
          case 50: // 2
          {
-            if (this .getDebug ())
+            if (this .getBrowserOption ("Debug"))
             {
                if (this .getControlKey ())
                {
@@ -383,7 +428,7 @@ X3DCoreContext .prototype =
          }
          case 51: // 3
          {
-            if (this .getDebug ())
+            if (this .getBrowserOption ("Debug"))
             {
                if (this .getControlKey ())
                {
@@ -397,7 +442,7 @@ X3DCoreContext .prototype =
          }
          case 52: // 4
          {
-            if (this .getDebug ())
+            if (this .getBrowserOption ("Debug"))
             {
                if (this .getControlKey ())
                {
@@ -411,7 +456,7 @@ X3DCoreContext .prototype =
          }
          case 53: // 5
          {
-            if (this .getDebug ())
+            if (this .getBrowserOption ("Debug"))
             {
                if (this .getControlKey ())
                {
@@ -425,7 +470,7 @@ X3DCoreContext .prototype =
          }
          case 83: // s
          {
-            if (this .getDebug ())
+            if (this .getBrowserOption ("Debug"))
             {
                if (this .getControlKey ())
                {
@@ -551,9 +596,9 @@ X3DCoreContext .prototype =
                text += "\n";
 
                this .copyToClipboard (text);
-               this .getNotification () ._string = _ ("Viewpoint is copied to clipboard.");
+               this .getNotification () ._string = _ ("Viewpoint copied to clipboard.");
 
-               console .log ("Copied Viewpoint to Clipboard.");
+               console .log ("Viewpoint copied to clipboard.");
                console .debug (text);
             }
 
@@ -592,11 +637,11 @@ X3DCoreContext .prototype =
    copyToClipboard: function (text)
    {
       // The textarea must be visible to make copy work.
-      const $temp = $("<textarea></textarea>");
-      this .getShadow () .find (".x_ite-private-browser") .prepend ($temp);
-      $temp .text (text) .select ();
+      const tmp = $("<textarea></textarea>");
+      this .getShadow () .find (".x_ite-private-browser") .prepend (tmp);
+      tmp .text (text) .trigger ("select");
       document .execCommand ("copy");
-      $temp .remove ();
+      tmp .remove ();
    },
 };
 

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

@@ -175,10 +175,7 @@ ExamineViewer .prototype = Object .assign (Object .create (X3DViewer .prototype)
 
       this .pressTime = Date .now ();
 
-      const
-         offset = this .getBrowser () .getSurface () .offset (),
-         x      = event .pageX - offset .left,
-         y      = event .pageY - offset .top;
+      const [x, y] = this .getPointer (event);
 
       switch (this .getButton (event .button))
       {
@@ -285,11 +282,7 @@ ExamineViewer .prototype = Object .assign (Object .create (X3DViewer .prototype)
       event .preventDefault ();
       event .stopImmediatePropagation ();
 
-      const
-         element = this .getBrowser () .getSurface (),
-         offset  = element .offset (),
-         x       = event .pageX - offset .left - parseFloat (element .css ('borderLeftWidth')),
-         y       = element .innerHeight () - (event .pageY - offset .top - parseFloat (element .css ('borderTopWidth')));
+      const [x, y] = this .getPointer (event);
 
       this .disconnect ();
       this .lookAtBBox (x, y, this .getStraightenHorizon ());
@@ -300,10 +293,7 @@ ExamineViewer .prototype = Object .assign (Object .create (X3DViewer .prototype)
 
       return function (event)
       {
-         const
-            offset = this .getBrowser () .getSurface () .offset (),
-            x      = event .pageX - offset .left,
-            y      = event .pageY - offset .top;
+         const [x, y] = this .getPointer (event);
 
          switch (this .getButton (this .button))
          {
@@ -643,7 +633,7 @@ ExamineViewer .prototype = Object .assign (Object .create (X3DViewer .prototype)
 
          this .axis .assign (axis);
 
-         if (rotation .getAxis () .dot (Vector3 .yAxis) < 0 !== rotation .angle < 0)
+         if (rotation .getAxis (new Vector3 (0, 0, 0)) .dot (Vector3 .yAxis) < 0 !== rotation .angle < 0)
             this .axis .negate ();
 
          this .timeSensor ._cycleInterval = Math .PI / (rotationChange .angle * SPIN_FACTOR * 30);

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

@@ -126,10 +126,7 @@ LookAtViewer .prototype = Object .assign (Object .create (X3DViewer .prototype),
       if (this .button >= 0)
          return;
 
-      const
-         offset = this .getBrowser () .getSurface () .offset (),
-         x      = event .pageX - offset .left,
-         y      = event .pageY - offset .top;
+      const [x, y] = this .getPointer (event);
 
       switch (event .button)
       {
@@ -187,11 +184,7 @@ LookAtViewer .prototype = Object .assign (Object .create (X3DViewer .prototype),
       event .preventDefault ();
       event .stopImmediatePropagation ();
 
-      const
-         element = this .getBrowser () .getSurface (),
-         offset  = element .offset (),
-         x       = event .pageX - offset .left - parseFloat (element .css ('borderLeftWidth')),
-         y       = element .innerHeight () - (event .pageY - offset .top - parseFloat (element .css ('borderTopWidth')));
+      const [x, y] = this .getPointer (event);
 
       this .disconnect ();
       this .lookAtPoint (x, y, this .getStraightenHorizon ());
@@ -202,10 +195,7 @@ LookAtViewer .prototype = Object .assign (Object .create (X3DViewer .prototype),
 
       this .event = event;
 
-      const
-         offset = this .getBrowser () .getSurface () .offset (),
-         x      = event .pageX - offset .left,
-         y      = event .pageY - offset .top;
+      const [x, y] = this .getPointer (event);
 
       switch (this .button)
       {