x_ite 8.4.3 → 8.5.3

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

@@ -96,10 +96,7 @@ PlaneViewer .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 (this .getButton (event .button))
       {
@@ -147,10 +144,7 @@ PlaneViewer .prototype = Object .assign (Object .create (X3DViewer .prototype),
    },
    mousemove: 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))
       {
@@ -183,10 +177,7 @@ PlaneViewer .prototype = Object .assign (Object .create (X3DViewer .prototype),
       event .preventDefault ();
       event .stopImmediatePropagation ();
 
-      const
-         offset = this .getBrowser () .getSurface () .offset (),
-         x      = event .pageX - offset .left,
-         y      = event .pageY - offset .top;
+      const [x, y] = this .getPointer (event);
 
       // Change viewpoint position.
 

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

@@ -140,10 +140,7 @@ X3DFlyViewer .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 .getButton (event .button))
       {
@@ -177,7 +174,7 @@ X3DFlyViewer .prototype = Object .assign (Object .create (X3DViewer .prototype),
             {
                // Move.
 
-               this .fromVector .set (x, 0, y);
+               this .fromVector .set (x, 0, -y);
                this .toVector   .assign (this .fromVector);
 
                this .getFlyDirection (this .fromVector, this .toVector, this .direction);
@@ -208,7 +205,7 @@ X3DFlyViewer .prototype = Object .assign (Object .create (X3DViewer .prototype),
             this .getBrowser () .setCursor ("MOVE");
             this .addCollision ();
 
-            this .fromVector .set (x, -y, 0);
+            this .fromVector .set (x, y, 0);
             this .toVector   .assign (this .fromVector);
             this .direction  .set (0, 0, 0);
 
@@ -242,20 +239,19 @@ X3DFlyViewer .prototype = Object .assign (Object .create (X3DViewer .prototype),
    },
    mousemove: function (event)
    {
-      this .getBrowser () .addBrowserEvent ();
+      const browser = this .getBrowser ();
+
+      browser .addBrowserEvent ();
 
       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 .getButton (this .button))
       {
          case 0:
          {
-            if (this .getBrowser () .getControlKey () || this .lookAround)
+            if (browser .getControlKey () || this .lookAround)
             {
                // Stop event propagation.
                event .preventDefault ();
@@ -273,8 +269,9 @@ X3DFlyViewer .prototype = Object .assign (Object .create (X3DViewer .prototype),
             {
                // Fly
 
-               this .toVector .set (x, 0, y);
+               this .toVector .set (x, 0, -y);
                this .getFlyDirection (this .fromVector, this .toVector, this .direction);
+               this .direction .divide (browser .getRenderingProperty ("ContentScale"));
                break;
             }
          }
@@ -286,8 +283,9 @@ X3DFlyViewer .prototype = Object .assign (Object .create (X3DViewer .prototype),
 
             // Pan
 
-            this .toVector  .set (x, -y, 0);
+            this .toVector  .set (x, y, 0);
             this .direction .assign (this .toVector) .subtract (this .fromVector);
+            this .direction .divide (browser .getRenderingProperty ("ContentScale"));
             break;
          }
       }
@@ -639,15 +637,20 @@ X3DFlyViewer .prototype = Object .assign (Object .create (X3DViewer .prototype),
 
          // Display Rubberband.
 
-         if (type === MOVE)
-         {
-            fromPoint .set (this .fromVector .x, height - this .fromVector .z, 0);
-            toPoint   .set (this .toVector   .x, height - this .toVector   .z, 0);
-         }
-         else
+         switch (type)
          {
-            fromPoint .set (this .fromVector .x, height + this .fromVector .y, 0);
-            toPoint   .set (this .toVector   .x, height + this .toVector   .y, 0);
+            case MOVE:
+            {
+               fromPoint .set (this .fromVector .x, -this .fromVector .z, 0);
+               toPoint   .set (this .toVector   .x, -this .toVector   .z, 0);
+               break;
+            }
+            case PAN:
+            {
+               fromPoint .set (this .fromVector .x, this .fromVector .y, 0);
+               toPoint   .set (this .toVector   .x, this .toVector   .y, 0);
+               break;
+            }
          }
 
          // Set line vertices.

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

@@ -101,6 +101,17 @@ X3DViewer .prototype = Object .assign (Object .create (X3DBaseNode .prototype),
 
       return button;
    },
+   getPointer: function (event)
+   {
+      const
+         browser      = this .getBrowser (),
+         contentScale = browser .getRenderingProperty ("ContentScale"),
+         offset       = browser .getSurface () .offset (),
+         x            = (event .pageX - offset .left) * contentScale,
+         y            = browser .getViewport () [3] - (event .pageY - offset .top) * contentScale;
+
+      return [x, y];
+   },
    getPointOnCenterPlane: (function ()
    {
       const
@@ -117,7 +128,7 @@ X3DViewer .prototype = Object .assign (Object .create (X3DBaseNode .prototype),
             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);
+         ViewVolume .unProjectPoint (x, y, 0.9, Matrix4 .Identity, projectionMatrix, viewport, far);
 
          if (viewpoint instanceof OrthoViewpoint)
             return result .set (far .x, far .y, -this .getDistanceToCenter (distance) .magnitude ());
@@ -140,8 +151,6 @@ X3DViewer .prototype = Object .assign (Object .create (X3DBaseNode .prototype),
    {
       const viewport = this .getViewport () .getRectangle ();
 
-      y = this .getBrowser () .getViewport () [3] - y;
-
       x = (x - viewport [0]) / viewport [2] - 0.5;
       y = (y - viewport [1]) / viewport [3] - 0.5;
 

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

@@ -117,7 +117,7 @@ X3DNetworkingContext .prototype =
 
          this .getShadow () .find (".x_ite-private-world-info") .remove ();
 
-         if (this .getBrowserOptions () .getSplashScreen ())
+         if (this .getBrowserOption ("SplashScreen"))
          {
             this .getContextMenu () .hide ();
             this .getCanvas () .hide ();
@@ -126,7 +126,7 @@ X3DNetworkingContext .prototype =
       }
       else
       {
-         if (this .getBrowserOptions () .getSplashScreen ())
+         if (this .getBrowserOption ("SplashScreen"))
          {
             this .getCanvas () .show ();
             this .getSplashScreen () .stop (true, true) .show () .fadeOut (2000);

package/src/x_ite/Browser/PointingDeviceSensor/PointingDevice.js

@@ -81,13 +81,26 @@ PointingDevice .prototype = Object .assign (Object .create (X3DBaseNode .prototy
       element .on ("touchstart.PointingDevice" + this .getId (), this .touchstart .bind (this));
       element .on ("touchend.PointingDevice"   + this .getId (), this .touchend   .bind (this));
    },
+   getPointer: function (event)
+   {
+      const
+         browser      = this .getBrowser (),
+         contentScale = browser .getRenderingProperty ("ContentScale"),
+         offset       = browser .getSurface () .offset (),
+         x            = (event .pageX - offset .left) * contentScale,
+         y            = browser .getViewport () [3] - (event .pageY - offset .top) * contentScale;
+
+      return [x, y];
+   },
    mousewheel: function (event)
    {
       // event .preventDefault () must be done in the all viewers.
    },
    mousedown: function (event)
    {
-      const browser = this .getBrowser ();
+      const
+         browser = this .getBrowser (),
+         element = browser .getSurface ();
 
       browser .getElement () .focus ();
 
@@ -96,11 +109,7 @@ PointingDevice .prototype = Object .assign (Object .create (X3DBaseNode .prototy
 
       if (event .button === 0)
       {
-         const
-            element = browser .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);
 
          element .off ("mousemove.PointingDevice" + this .getId ());
 
@@ -127,10 +136,9 @@ PointingDevice .prototype = Object .assign (Object .create (X3DBaseNode .prototy
       {
          const
             browser = this .getBrowser (),
-            element = browser .getSurface (),
-            offset  = element .offset (),
-            x       = event .pageX - offset .left - parseFloat (element .css ('borderLeftWidth')),
-            y       = element .innerHeight () - (event .pageY - offset .top - parseFloat (element .css ('borderTopWidth')));
+            element = browser .getSurface ();
+
+         const [x, y] = this .getPointer (event);
 
          $(document) .off (".PointingDevice" + this .getId ());
          element .on ("mousemove.PointingDevice" + this .getId (), this .mousemove .bind (this));
@@ -159,11 +167,7 @@ PointingDevice .prototype = Object .assign (Object .create (X3DBaseNode .prototy
 
       this .motionTime = browser .getCurrentTime ();
 
-      const
-         element = browser .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 .onmotion (x, y);
    },

package/src/x_ite/Browser/Rendering/X3DRenderingContext.js

@@ -45,17 +45,21 @@
  *
  ******************************************************************************/
 
+import MultiSampleFrameBuffer from "../../Rendering/MultiSampleFrameBuffer.js";
+
 const
    _viewport     = Symbol (),
    _localObjects = Symbol (),
    _depthShaders = Symbol (),
-   _resizer      = Symbol ();
+   _resizer      = Symbol (),
+   _frameBuffer  = Symbol ();
 
 function X3DRenderingContext ()
 {
    this [_viewport]     = [0, 0, 300, 150];
    this [_localObjects] = [ ]; // shader objects dumpster
    this [_depthShaders] = new Map ();
+   this [_frameBuffer]  = new MultiSampleFrameBuffer (this, 300, 150, 4);
 }
 
 X3DRenderingContext .prototype =
@@ -80,7 +84,7 @@ X3DRenderingContext .prototype =
       //https://github.com/sdecima/javascript-detect-element-resize
       this [_resizer] = new ResizeSensor (this .getSurface (), this .reshape .bind (this));
 
-			this .getSurface () .css ("position", ""); // Reset position, set from ResizeSensor.
+		this .getSurface () .css ("position", ""); // Reset position, set from ResizeSensor.
 
       this .reshape ();
    },
@@ -122,7 +126,13 @@ X3DRenderingContext .prototype =
    {
       const gl = this .getContext ();
 
-      return gl .getParameter (gl .SAMPLES) > 0;
+      return gl .getParameter (gl .SAMPLES) > 0 || (gl .getVersion () > 1 && this .getRenderingProperty ("Multisampling") > 0);
+   },
+   getMaxSamples: function ()
+   {
+      const gl = this .getContext ();
+
+      return gl .getVersion () > 1 ? gl .getParameter (gl .MAX_SAMPLES) : 0;
    },
    getMaxClipPlanes: function ()
    {
@@ -151,6 +161,10 @@ X3DRenderingContext .prototype =
    {
       return this [_localObjects];
    },
+   getFrameBuffer: function ()
+   {
+      return this [_frameBuffer];
+   },
    getDepthShader: function (numClipPlanes, particles)
    {
       let key = "";
@@ -182,11 +196,12 @@ X3DRenderingContext .prototype =
    reshape: function ()
    {
       const
-         gl      = this .getContext (),
-         jCanvas = this .getCanvas (),
-         width   = jCanvas .width (),
-         height  = jCanvas .height (),
-         canvas  = jCanvas [0];
+         $canvas      = this .getCanvas (),
+         contentScale = this .getRenderingProperty ("ContentScale"),
+         samples      = this .getRenderingProperty ("Multisampling"),
+         width        = $canvas .width () * contentScale,
+         height       = $canvas .height () * contentScale,
+         canvas       = $canvas [0];
 
       canvas .width  = width;
       canvas .height = height;
@@ -194,8 +209,13 @@ X3DRenderingContext .prototype =
       this [_viewport] [2] = width;
       this [_viewport] [3] = height;
 
-      gl .viewport (0, 0, width, height);
-      gl .scissor  (0, 0, width, height);
+      if (width   !== this [_frameBuffer] .getWidth ()  ||
+          height  !== this [_frameBuffer] .getHeight () ||
+          samples !== this [_frameBuffer] .getSamples ())
+      {
+         this [_frameBuffer] .dispose ();
+         this [_frameBuffer] = new MultiSampleFrameBuffer (this, width, height, samples);
+      }
 
       this .addBrowserEvent ();
    },

package/src/x_ite/Browser/Shaders/X3DShadersContext.js

@@ -152,7 +152,7 @@ X3DShadersContext .prototype =
    },
    createShader: function (name, vs, fs = vs, options = [ ], uniformNames = [ ], transformFeedbackVaryings = [ ])
    {
-      if (this .getDebug ())
+      if (this .getBrowserOption ("Debug"))
          console .info ("Initializing " + name);
 
       const

package/src/x_ite/Browser/Shape/X3DShapeContext.js

@@ -46,16 +46,19 @@
  ******************************************************************************/
 
 import Appearance        from "../../Components/Shape/Appearance.js";
+import PointProperties   from "../../Components/Shape/PointProperties.js";
+import LineProperties    from "../../Components/Shape/LineProperties.js";
 import UnlitMaterial     from "../../Components/Shape/UnlitMaterial.js";
 import ImageTexture      from "../../Components/Texturing/ImageTexture.js";
 import TextureProperties from "../../Components/Texturing/TextureProperties.js";
 import URLs              from "../Networking/URLs.js";
 
 const
-   _lineStippleScale          = Symbol (),
    _linetypeTextures          = Symbol (),
    _hatchStyleTextures        = Symbol (),
    _defaultAppearance         = Symbol (),
+   _defaultPointProperties    = Symbol (),
+   _defaultLineProperties     = Symbol (),
    _defaultMaterial           = Symbol (),
    _lineFillTextureProperties = Symbol (),
    _lineTransformShaderNode   = Symbol (),
@@ -64,7 +67,6 @@ const
 function X3DShapeContext ()
 {
    this [_hatchStyleTextures] = [ ];
-   this [_lineStippleScale]   = 1 / (this .getPixelPerPoint () * 32); // 32px
 }
 
 X3DShapeContext .prototype =
@@ -85,7 +87,32 @@ X3DShapeContext .prototype =
    },
    getLineStippleScale: function ()
    {
-      return this [_lineStippleScale];
+      return 1 / (this .getPixelPerPoint () * 32); // 32px
+   },
+   getDefaultPointProperties: function ()
+   {
+      this [_defaultPointProperties] = new PointProperties (this .getPrivateScene ());
+      this [_defaultPointProperties] .setPrivate (true);
+      this [_defaultPointProperties] .setup ();
+
+      this .getDefaultPointProperties = function () { return this [_defaultPointProperties]; };
+
+      Object .defineProperty (this, "getDefaultPointProperties", { enumerable: false });
+
+      return this [_defaultPointProperties];
+   },
+   getDefaultLineProperties: function ()
+   {
+      this [_defaultLineProperties] = new LineProperties (this .getPrivateScene ());
+      this [_defaultLineProperties] ._applied = false;
+      this [_defaultLineProperties] .setPrivate (true);
+      this [_defaultLineProperties] .setup ();
+
+      this .getDefaultLineProperties = function () { return this [_defaultLineProperties]; };
+
+      Object .defineProperty (this, "getDefaultLineProperties", { enumerable: false });
+
+      return this [_defaultLineProperties];
    },
    getDefaultMaterial: function ()
    {