x_ite 5.0.3 → 6.1.0

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

@@ -94,6 +94,7 @@ function ($,
          X3DBaseNode .prototype .initialize .call (this);
 
          this .element = $("<div></div>")
+            .hide ()
             .addClass ("x_ite-private-notification")
             .appendTo (this .getBrowser () .getSurface ())
             .animate ({ width: 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/Followers/X3DArrayFollowerTemplate.js

@@ -141,7 +141,7 @@ define (function ()
             let distance = 0;
 
             for (let i = 0, length = lhs .length; i < length; ++ i)
-              distance = Math .max (a .assign (lhs [i]) .subtract (rhs [i]) .abs ());
+              distance = Math .max (a .assign (lhs [i]) .subtract (rhs [i]) .magnitude ());
 
             return distance < tolerance;
          },

package/src/x_ite/Browser/Geometry2D/Disk2DOptions.js

@@ -149,6 +149,7 @@ function (X3DBaseNode,
                // Circle
 
                circleVertices .push (point1 .real, point1 .imag, 0, 1);
+               circleVertices .push (point2 .real, point2 .imag, 0, 1);
 
                // Disk
 

package/src/x_ite/Browser/Geometry2D/X3DGeometry2DContext.js

@@ -70,7 +70,7 @@ function (Arc2DOptions,
    {
       initialize: function ()
       {
-         this .setGeometry2DPrimitiveQuality (this .getBrowserOptions () .getPrimitiveQuality ());
+         this .setPrimitiveQuality2D (this .getBrowserOptions () .getPrimitiveQuality ());
       },
       getArc2DOptions: function ()
       {
@@ -92,7 +92,7 @@ function (Arc2DOptions,
       {
          return getOptionNode .call (this, "getRectangle2DOptions", Rectangle2DOptions);
       },
-      setGeometry2DPrimitiveQuality: function (primitiveQuality)
+      setPrimitiveQuality2D: function (primitiveQuality)
       {
          const
             arc      = this .getArc2DOptions (),

package/src/x_ite/Browser/Geometry3D/X3DGeometry3DContext.js

@@ -52,11 +52,13 @@ define ([
    "x_ite/Browser/Geometry3D/ConeOptions",
    "x_ite/Browser/Geometry3D/CylinderOptions",
    "x_ite/Browser/Geometry3D/QuadSphereOptions",
+   "x_ite/Browser/Core/PrimitiveQuality",
 ],
 function (BoxOptions,
           ConeOptions,
           CylinderOptions,
-          QuadSphereOptions)
+          QuadSphereOptions,
+          PrimitiveQuality)
 {
 "use strict";
 
@@ -65,7 +67,9 @@ function (BoxOptions,
    X3DGeometry3DContext .prototype =
    {
       initialize: function ()
-      { },
+      {
+         this .setPrimitiveQuality3D (this .getBrowserOptions () .getPrimitiveQuality ());
+      },
       getBoxOptions: function ()
       {
          return getOptionNode .call (this, "getBoxOptions", BoxOptions);
@@ -82,6 +86,41 @@ function (BoxOptions,
       {
          return getOptionNode .call (this, "getSphereOptions", QuadSphereOptions);
       },
+      setPrimitiveQuality3D: function (primitiveQuality)
+      {
+         const
+            cone     = this .getConeOptions (),
+            cylinder = this .getCylinderOptions (),
+            sphere   = this .getSphereOptions ();
+
+         switch (primitiveQuality)
+         {
+            case PrimitiveQuality .LOW:
+            {
+               cone     ._xDimension = 16;
+               cylinder ._xDimension = 16;
+               sphere   ._xDimension = 20;
+               sphere   ._yDimension = 9;
+               break;
+            }
+            case PrimitiveQuality .MEDIUM:
+            {
+               cone     ._xDimension = 20;
+               cylinder ._xDimension = 20;
+               sphere   ._xDimension = 32;
+               sphere   ._yDimension = 15;
+               break;
+            }
+            case PrimitiveQuality .HIGH:
+            {
+               cone     ._xDimension = 32;
+               cylinder ._xDimension = 32;
+               sphere   ._xDimension = 64;
+               sphere   ._yDimension = 31;
+               break;
+            }
+         }
+      },
    };
 
    function getOptionNode (key, OptionNode)

package/src/x_ite/Browser/Geospatial/Geocentric.js

@@ -72,8 +72,8 @@ function (Vector3,
       slerp: function (source, destination, t)
       {
          const
-            sourceLength      = source      .abs (),
-            destinationLength = destination .abs ();
+            sourceLength      = source      .magnitude (),
+            destinationLength = destination .magnitude ();
 
          source      .normalize ();
          destination .normalize ();

package/src/x_ite/Browser/Interpolation/CatmullRomSplineInterpolatorTemplate.js

@@ -93,7 +93,7 @@ function (CatmullRomSplineInterpolator)
          },
          abs: function (value)
          {
-            return value .abs ();
+            return value .magnitude ();
          },
          dot: function (SH, C0, C1, C2, C3)
          {

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

@@ -54,10 +54,8 @@ define ([
    "x_ite/Components/Texturing/PixelTexture",
    "x_ite/Components/Rendering/X3DGeometryNode",
    "standard/Math/Numbers/Vector3",
-   "standard/Math/Numbers/Vector4",
    "standard/Math/Numbers/Matrix4",
    "standard/Math/Geometry/Box3",
-   "standard/Math/Geometry/ViewVolume",
    "standard/Math/Algorithm",
 ],
 function ($,
@@ -66,10 +64,8 @@ function ($,
           PixelTexture,
           X3DGeometryNode,
           Vector3,
-          Vector4,
           Matrix4,
           Box3,
-          ViewVolume,
           Algorithm)
 {
 "use strict";
@@ -83,7 +79,7 @@ function ($,
       this .texCoordArray = X3DGeometryNode .createArray ();
       this .textureNode   = new PixelTexture (text .getExecutionContext ());
       this .canvas        = $("<canvas></canvas>");
-      this .context       = this .canvas [0] .getContext ("2d");
+      this .context       = this .canvas [0] .getContext ("2d", { willReadFrequently: true });
       this .matrix        = new Matrix4 ();
 
       this .textureNode ._textureProperties = fontStyle .getBrowser () .getScreenTextureProperties ();
@@ -247,6 +243,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 +312,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 ();
          };
@@ -385,71 +388,21 @@ function ($,
          min .set ((glyph .xMin || 0) / unitsPerEm, (glyph .yMin || 0) / unitsPerEm, 0);
          max .set ((glyph .xMax || 0) / unitsPerEm, (glyph .yMax || 0) / unitsPerEm, 0);
       },
-      transform: (function ()
+      traverse: (function ()
       {
-         const
-            x            = new Vector4 (0, 0, 0, 0),
-            y            = new Vector4 (0, 0, 0, 0),
-            z            = new Vector4 (0, 0, 0, 0),
-            screenPoint  = new Vector3 (0, 0, 0),
-            screenMatrix = new Matrix4 (),
-            bbox         = new Box3 ();
-
-         return function (renderObject)
-         {
-            // throws an exception
-
-            const
-               text             = this .getText (),
-               modelViewMatrix  = renderObject .getModelViewMatrix () .get (),
-               projectionMatrix = renderObject .getProjectionMatrix () .get (),
-               viewport         = renderObject .getViewVolume () .getViewport ();
-
-            // Determine screenMatrix.
-            // Same as in ScreenGroup.
-
-            const screenScale = renderObject .getViewpoint () .getScreenScale (modelViewMatrix .origin, viewport); // in meter/pixel
-
-            x .set (modelViewMatrix [ 0], modelViewMatrix [ 1], modelViewMatrix [ 2], modelViewMatrix [ 3]);
-            y .set (modelViewMatrix [ 4], modelViewMatrix [ 5], modelViewMatrix [ 6], modelViewMatrix [ 7]);
-            z .set (modelViewMatrix [ 8], modelViewMatrix [ 9], modelViewMatrix [10], modelViewMatrix [11]);
-
-            x .normalize () .multiply (screenScale .x);
-            y .normalize () .multiply (screenScale .y);
-            z .normalize () .multiply (screenScale .z);
+         const bbox = new Box3 ();
 
-            screenMatrix .set (x .x, x .y, x .z, x .w,
-                               y .x, y .y, y .z, y .w,
-                               z .x, z .y, z .z, z .w,
-                               modelViewMatrix [12], modelViewMatrix [13], modelViewMatrix [14], modelViewMatrix [15]);
-
-            // Snap to whole pixel.
-
-            ViewVolume .projectPoint (Vector3 .Zero, screenMatrix, projectionMatrix, viewport, screenPoint);
-
-            screenPoint .x = Math .round (screenPoint .x);
-            screenPoint .y = Math .round (screenPoint .y);
-
-            ViewVolume .unProjectPoint (screenPoint .x, screenPoint .y, screenPoint .z, screenMatrix, projectionMatrix, viewport, screenPoint);
-
-            screenPoint .z = 0;
-            screenMatrix .translate (screenPoint);
-
-            // Assign modelViewMatrix and calculate relative matrix.
-
-            this .matrix .assign (modelViewMatrix) .inverse () .multLeft (screenMatrix);
+         return function (type, renderObject)
+         {
+            this .getBrowser () .getScreenScaleMatrix (renderObject, this .matrix);
 
             // Update Text bbox.
 
             bbox .assign (this .getBBox ()) .multRight (this .matrix);
 
-            text .setBBox (bbox);
+            this .getText () .setBBox (bbox);
          };
       })(),
-      traverse: function (type, renderObject)
-      {
-         this .transform (renderObject);
-      },
       display: function (gl, context)
       {
          Matrix4 .prototype .multLeft .call (context .modelViewMatrix, this .matrix);
@@ -458,12 +411,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

@@ -50,31 +50,26 @@
 define ([
    "jquery",
    "x_ite/Components/Texturing/TextureProperties",
+   "standard/Math/Numbers/Vector3",
+   "standard/Math/Numbers/Matrix4",
+   "standard/Math/Geometry/ViewVolume",
 ],
 function ($,
-          TextureProperties)
+          TextureProperties,
+          Vector3,
+          Matrix4,
+          ViewVolume)
 {
 "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 +77,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 ();
@@ -94,6 +89,54 @@ function ($,
 
          return this [_screenTextureProperties];
       },
+      getScreenScaleMatrix: (function ()
+      {
+         const
+            screenScale  = new Vector3 (0, 0, 0),
+            screenPoint  = new Vector3 (0, 0, 0),
+            screenMatrix = new Matrix4 ();
+
+         return function (renderObject, matrix)
+         {
+            // throws domain error
+
+            const
+               modelViewMatrix  = renderObject .getModelViewMatrix () .get (),
+               projectionMatrix = renderObject .getProjectionMatrix () .get (),
+               viewport         = renderObject .getViewVolume () .getViewport ();
+
+            // Determine screenMatrix.
+            // Same as in ScreenText.
+
+            renderObject .getViewpoint () .getScreenScale (modelViewMatrix .origin, viewport, screenScale); // in meter/pixel
+
+            const
+               x = modelViewMatrix .xAxis .normalize () .multiply (screenScale .x),
+               y = modelViewMatrix .yAxis .normalize () .multiply (screenScale .y),
+               z = modelViewMatrix .zAxis .normalize () .multiply (screenScale .x);
+
+            screenMatrix .set (x .x, x .y, x .z, 0,
+                               y .x, y .y, y .z, 0,
+                               z .x, z .y, z .z, 0,
+                               modelViewMatrix [12], modelViewMatrix [13], modelViewMatrix [14], 1);
+
+            // Snap to whole pixel.
+
+            ViewVolume .projectPoint (Vector3 .Zero, screenMatrix, projectionMatrix, viewport, screenPoint);
+
+            screenPoint .x = Math .round (screenPoint .x);
+            screenPoint .y = Math .round (screenPoint .y);
+
+            ViewVolume .unProjectPoint (screenPoint .x, screenPoint .y, screenPoint .z, screenMatrix, projectionMatrix, viewport, screenPoint);
+
+            screenPoint .z = 0;
+            screenMatrix .translate (screenPoint);
+
+            // Assign relative matrix.
+
+            matrix .assign (modelViewMatrix) .inverse () .multLeft (screenMatrix);
+         };
+      })(),
    };
 
    return X3DLayoutContext;