x_ite 8.10.0 → 8.11.0

package/src/x_ite/Base/X3DChildObject.js

@@ -46,6 +46,7 @@
  ******************************************************************************/
 
 import X3DObject   from "./X3DObject.js";
+import Time        from "../../standard/Time/Time.js";
 import DEVELOPMENT from "../DEVELOPMENT.js";
 
 const
@@ -97,14 +98,14 @@ if (DEVELOPMENT)
       },
       addEvent ()
       {
-         this .setModificationTime (Date .now ());
+         this .setModificationTime (Time .now ());
 
          for (const parent of this [_parents] .values ())
             parent .deref () ?.addEvent (this);
       },
       addEventObject (field, event)
       {
-         this .setModificationTime (Date .now ());
+         this .setModificationTime (Time .now ());
 
          for (const parent of this [_parents] .values ())
             parent .deref () ?.addEventObject (this, event);
@@ -204,14 +205,14 @@ else
       },
       addEvent ()
       {
-         this .setModificationTime (Date .now ());
+         this .setModificationTime (Time .now ());
 
          for (const parent of this [_parents])
             parent .addEvent (this);
       },
       addEventObject (field, event)
       {
-         this .setModificationTime (Date .now ());
+         this .setModificationTime (Time .now ());
 
          for (const parent of this [_parents])
             parent .addEventObject (this, event);

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

@@ -83,27 +83,29 @@ Object .assign (Object .setPrototypeOf (BrowserOptions .prototype, X3DBaseNode .
          Timings:           this ._Timings           .getValue (),
       });
 
-      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 ._AutoUpdate             .addInterest ("set_autoUpdate__",             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 .set_antialiased__            (this ._Antialiased);
-      this .set_shading__                (this ._Shading);
-      this .set_contentScale__           (this ._ContentScale);
-      this .set_logarithmicDepthBuffer__ (this ._LogarithmicDepthBuffer);
-      this .set_multisampling__          (this ._Multisampling);
-
-      this .configure ();
+      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 ._AutoUpdate                   .addInterest ("set_autoUpdate__",                   this);
+      this ._ContentScale                 .addInterest ("set_contentScale__",                 this);
+      this ._LogarithmicDepthBuffer       .addInterest ("set_logarithmicDepthBuffer__",       this);
+      this ._Multisampling                .addInterest ("set_multisampling__",                this);
+      this ._OrderIndependentTransparency .addInterest ("set_orderIndependentTransparency__", this);
+      this ._Timings                      .addInterest ("set_timings__",                      this);
+
+      this .set_antialiased__                  (this ._Antialiased);
+      this .set_shading__                      (this ._Shading);
+      this .set_contentScale__                 (this ._ContentScale);
+      this .set_logarithmicDepthBuffer__       (this ._LogarithmicDepthBuffer);
+      this .set_multisampling__                (this ._Multisampling);
+      this .set_orderIndependentTransparency__ (this ._OrderIndependentTransparency);
+
+      this .reset ();
    },
-   configure: (() =>
+   reset: (() =>
    {
       const attributes = new Set ([
          "Antialiased",
@@ -114,6 +116,7 @@ Object .assign (Object .setPrototypeOf (BrowserOptions .prototype, X3DBaseNode .
          "Debug",
          "Multisampling",
          "Notifications",
+         "OrderIndependentTransparency",
          "SplashScreen",
       ]);
 
@@ -247,24 +250,6 @@ Object .assign (Object .setPrototypeOf (BrowserOptions .prototype, X3DBaseNode .
       if (straightenHorizon .getValue ())
          this .getBrowser () .getActiveLayer () ?.straightenView ();
    },
-   updateContentScale ()
-   {
-      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_autoUpdate__ (autoUpdate)
    {
       const events = ["resize", "scroll", "load"]
@@ -313,6 +298,24 @@ Object .assign (Object .setPrototypeOf (BrowserOptions .prototype, X3DBaseNode .
 
       browser .reshape ();
    },
+   updateContentScale ()
+   {
+      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_logarithmicDepthBuffer__ (logarithmicDepthBuffer)
    {
       const
@@ -328,8 +331,15 @@ Object .assign (Object .setPrototypeOf (BrowserOptions .prototype, X3DBaseNode .
          samples = Algorithm .clamp (multisampling .getValue (), 0, browser .getMaxSamples ());
 
       browser .getRenderingProperties () ._Multisampling = this ._Antialiased .getValue () ? samples : 0;
-      browser .getRenderingProperties () ._Antialiased   = browser .getAntialiased ();
+      browser .getRenderingProperties () ._Antialiased   = samples > 0;
+
+      browser .reshape ();
+   },
+   set_orderIndependentTransparency__ ()
+   {
+      const browser = this .getBrowser ();
 
+      browser .getShaders () .clear ();
       browser .reshape ();
    },
    set_timings__ (timings)
@@ -348,27 +358,28 @@ Object .defineProperties (BrowserOptions,
    fieldDefinitions:
    {
       value: new FieldDefinitionArray ([
-         new X3DFieldDefinition (X3DConstants .inputOutput, "SplashScreen",           new Fields .SFBool (true)),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "Dashboard",              new Fields .SFBool (true)),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "Rubberband",             new Fields .SFBool (true)),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "EnableInlineViewpoints", new Fields .SFBool (true)),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "Antialiased",            new Fields .SFBool (true)),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "TextureQuality",         new Fields .SFString ("MEDIUM")),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "PrimitiveQuality",       new Fields .SFString ("MEDIUM")),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "QualityWhenMoving",      new Fields .SFString ("SAME")),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "Shading",                new Fields .SFString ("GOURAUD")),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "MotionBlur",             new Fields .SFBool ()),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "AutoUpdate",             new Fields .SFBool (false)),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "Cache",                  new Fields .SFBool (true)),
-         new X3DFieldDefinition (X3DConstants .inputOutput, "ContentScale",           new Fields .SFDouble (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 .SFDouble (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, "Timings",                new Fields .SFBool ()),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "SplashScreen",                 new Fields .SFBool (true)),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "Dashboard",                    new Fields .SFBool (true)),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "Rubberband",                   new Fields .SFBool (true)),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "EnableInlineViewpoints",       new Fields .SFBool (true)),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "Antialiased",                  new Fields .SFBool (true)),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "TextureQuality",               new Fields .SFString ("MEDIUM")),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "PrimitiveQuality",             new Fields .SFString ("MEDIUM")),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "QualityWhenMoving",            new Fields .SFString ("SAME")),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "Shading",                      new Fields .SFString ("GOURAUD")),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "MotionBlur",                   new Fields .SFBool ()),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "AutoUpdate",                   new Fields .SFBool ()),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "Cache",                        new Fields .SFBool (true)),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "ContentScale",                 new Fields .SFDouble (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 .SFDouble (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, "OrderIndependentTransparency", new Fields .SFBool ()),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "StraightenHorizon",            new Fields .SFBool (true)),
+         new X3DFieldDefinition (X3DConstants .inputOutput, "Timings",                      new Fields .SFBool ()),
       ]),
       enumerable: true,
    },

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

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

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

@@ -350,6 +350,12 @@ Object .assign (X3DCoreContext .prototype,
 
             break;
          }
+         case "orderIndependentTransparency":
+         case "orderindependenttransparency":
+         {
+            this .setBrowserOption ("OrderIndependentTransparency", this .parseBooleanAttribute (newValue, false));
+            break;
+         }
          case "splashScreen":
          case "splashscreen":
          {

package/src/x_ite/Browser/DOMIntegration.js

@@ -359,9 +359,6 @@ class DOMIntegration
 			return;
 
 		field .addInterest ("fieldCallback", this, element);
-
-		if (this .trace)
-			field .addInterest ("fieldTraceCallback", this, element);
 	}
 
 	fieldCallback (element, field)
@@ -381,20 +378,6 @@ class DOMIntegration
 
 		element .dispatchEvent (event);
 	}
-
-	fieldTraceCallback (element, field)
-	{
-		const
-			now       = Date .now (),
-			timeStamp = node .getBrowser () .getCurrentTime (),
-			dt        = now - timeStamp * 1000,
-			node      = $.data (element, "node");
-
-		console .log ("%f: at %f dt of %s ms %s '%s' %s: %s",
-					     now, timeStamp, dt .toFixed (3),
-					     node .getTypeName (), node .getName (),
-					     field .getName (), field .valueOf ());
-	}
 };
 
 export default DOMIntegration;

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

@@ -56,6 +56,7 @@ import TimeSensor           from "../../Components/Time/TimeSensor.js";
 import Vector2              from "../../../standard/Math/Numbers/Vector2.js";
 import Vector3              from "../../../standard/Math/Numbers/Vector3.js";
 import Rotation4            from "../../../standard/Math/Numbers/Rotation4.js";
+import Time                 from "../../../standard/Time/Time.js";
 
 typeof jquery_mousewheel; // import plugin
 
@@ -164,7 +165,7 @@ Object .assign (Object .setPrototypeOf (ExamineViewer .prototype, X3DViewer .pro
       if (this .button >= 0)
          return;
 
-      this .pressTime = Date .now ();
+      this .pressTime = Time .now ();
 
       const { x, y } = this .getBrowser () .getPointerFromEvent (event);
 
@@ -247,7 +248,7 @@ Object .assign (Object .setPrototypeOf (ExamineViewer .prototype, X3DViewer .pro
 
             this .getBrowser () .setCursor ("DEFAULT");
 
-            if (Math .abs (this .rotation .angle) > SPIN_ANGLE && Date .now () - this .motionTime < SPIN_RELEASE_TIME)
+            if (Math .abs (this .rotation .angle) > SPIN_ANGLE && Time .now () - this .motionTime < SPIN_RELEASE_TIME)
                this .addSpinning (this .rotation);
 
             this ._isActive = false;
@@ -301,13 +302,13 @@ Object .assign (Object .setPrototypeOf (ExamineViewer .prototype, X3DViewer .pro
 
                this .rotation .setFromToVec (toVector, this .fromVector);
 
-               if (Math .abs (this .rotation .angle) < SPIN_ANGLE && Date .now () - this .pressTime < MOTION_TIME)
+               if (Math .abs (this .rotation .angle) < SPIN_ANGLE && Time .now () - this .pressTime < MOTION_TIME)
                   return;
 
                this .addRotate (this .rotation);
 
                this .fromVector .assign (toVector);
-               this .motionTime = Date .now ();
+               this .motionTime = Time .now ();
                break;
             }
             case 1:

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

@@ -53,6 +53,7 @@ import Vector3           from "../../../standard/Math/Numbers/Vector3.js";
 import Rotation4         from "../../../standard/Math/Numbers/Rotation4.js";
 import Matrix4           from "../../../standard/Math/Numbers/Matrix4.js";
 import Camera            from "../../../standard/Math/Geometry/Camera.js";
+import Time              from "../../../standard/Time/Time.js";
 
 typeof jquery_mousewheel; // import plugin
 
@@ -417,7 +418,7 @@ Object .assign (Object .setPrototypeOf (X3DFlyViewer .prototype, X3DViewer .prot
          const
             navigationInfo = this .getNavigationInfo (),
             viewpoint      = this .getActiveViewpoint (),
-            now            = Date .now (),
+            now            = Time .now (),
             dt             = (now - this .startTime) / 1000;
 
          upVector .assign (viewpoint .getUpVector ());
@@ -487,7 +488,7 @@ Object .assign (Object .setPrototypeOf (X3DFlyViewer .prototype, X3DViewer .prot
          const
             navigationInfo = this .getNavigationInfo (),
             viewpoint      = this .getActiveViewpoint (),
-            now            = Date .now (),
+            now            = Time .now (),
             dt             = (now - this .startTime) / 1000,
             upVector       = viewpoint .getUpVector ();
 
@@ -525,7 +526,7 @@ Object .assign (Object .setPrototypeOf (X3DFlyViewer .prototype, X3DViewer .prot
       this .getBrowser () .prepareEvents () .addInterest ("fly", this);
       this .getBrowser () .addBrowserEvent ();
 
-      this .startTime = Date .now ();
+      this .startTime = Time .now ();
    },
    addPan ()
    {
@@ -536,7 +537,7 @@ Object .assign (Object .setPrototypeOf (X3DFlyViewer .prototype, X3DViewer .prot
       this .getBrowser () .prepareEvents () .addInterest ("pan", this);
       this .getBrowser () .addBrowserEvent ();
 
-      this .startTime = Date .now ();
+      this .startTime = Time .now ();
    },
    addRoll: (() =>
    {
@@ -692,6 +693,8 @@ Object .assign (Object .setPrototypeOf (X3DFlyViewer .prototype, X3DViewer .prot
 
          gl .uniform3f (shaderNode .x3d_EmissiveColor, 1, 1, 1);
          gl .drawArrays (gl .LINES, 0, this .lineCount);
+
+         gl .enable (gl .DEPTH_TEST);
       };
    })(),
    disconnect ()

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

@@ -49,11 +49,12 @@ import MultiSampleFrameBuffer from "../../Rendering/MultiSampleFrameBuffer.js";
 import Vector4                from "../../../standard/Math/Numbers/Vector4.js";
 
 const
-   _viewport     = Symbol (),
-   _frameBuffer  = Symbol (),
-   _resizer      = Symbol (),
-   _localObjects = Symbol (),
-   _depthShaders = Symbol ();
+   _viewport      = Symbol (),
+   _frameBuffer   = Symbol (),
+   _resizer       = Symbol (),
+   _localObjects  = Symbol (),
+   _composeShader = Symbol (),
+   _depthShaders  = Symbol ();
 
 function X3DRenderingContext ()
 {
@@ -72,6 +73,7 @@ Object .assign (X3DRenderingContext .prototype,
       const gl = this .getContext ();
 
       gl .enable (gl .SCISSOR_TEST);
+      gl .enable (gl .DEPTH_TEST);
       gl .depthFunc (gl .LEQUAL);
       gl .clearDepth (1);
 
@@ -123,12 +125,6 @@ Object .assign (X3DRenderingContext .prototype,
 
       return gl .getParameter (gl .VERSION);
    },
-   getAntialiased ()
-   {
-      const gl = this .getContext ();
-
-      return gl .getParameter (gl .SAMPLES) > 0 || (gl .getVersion () > 1 && this .getRenderingProperty ("Multisampling") > 0);
-   },
    getMaxSamples ()
    {
       const gl = this .getContext ();
@@ -166,6 +162,13 @@ Object .assign (X3DRenderingContext .prototype,
    {
       return this [_frameBuffer];
    },
+   getComposeShader ()
+   {
+      if (this [_composeShader])
+         return this [_composeShader];
+
+      return this [_composeShader] = this .createShader ("ComposeShader", "Compose", "Compose");
+   },
    getDepthShader (numClipPlanes, shapeNode, humanoidNode)
    {
       const geometryContext = shapeNode .getGeometryContext ();
@@ -231,6 +234,7 @@ Object .assign (X3DRenderingContext .prototype,
          $canvas      = this .getCanvas (),
          contentScale = this .getRenderingProperty ("ContentScale"),
          samples      = this .getRenderingProperty ("Multisampling"),
+         oit          = this .getBrowserOption ("OrderIndependentTransparency"),
          width        = $canvas .width () * contentScale,
          height       = $canvas .height () * contentScale,
          canvas       = $canvas [0];
@@ -241,12 +245,13 @@ Object .assign (X3DRenderingContext .prototype,
       this [_viewport] [2] = width;
       this [_viewport] [3] = height;
 
-      if (width   !== this [_frameBuffer] .getWidth ()  ||
-          height  !== this [_frameBuffer] .getHeight () ||
-          samples !== this [_frameBuffer] .getSamples ())
+      if (width   !== this [_frameBuffer] .getWidth ()   ||
+          height  !== this [_frameBuffer] .getHeight ()  ||
+          samples !== this [_frameBuffer] .getSamples () ||
+          oit     !== this [_frameBuffer] .getOrderIndependentTransparency ())
       {
          this [_frameBuffer] .dispose ();
-         this [_frameBuffer] = new MultiSampleFrameBuffer (this, width, height, samples);
+         this [_frameBuffer] = new MultiSampleFrameBuffer (this, width, height, samples, oit);
       }
 
       this .addBrowserEvent ();

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

@@ -76,36 +76,38 @@ import Point2                 from "../../../assets/shaders/webgl2/include/Point
 import PointSize2             from "../../../assets/shaders/webgl2/include/PointSize.glsl.js";
 import Shadow2                from "../../../assets/shaders/webgl2/include/Shadow.glsl.js";
 import Skin2                  from "../../../assets/shaders/webgl2/include/Skin.glsl.js";
-import Stipple2               from "../../../assets/shaders/webgl2/include/Stipple.glsl.js";
 import SpotFactor2            from "../../../assets/shaders/webgl2/include/SpotFactor.glsl.js";
+import Stipple2               from "../../../assets/shaders/webgl2/include/Stipple.glsl.js";
 import Texture2               from "../../../assets/shaders/webgl2/include/Texture.glsl.js";
 import Utils2                 from "../../../assets/shaders/webgl2/include/Utils.glsl.js";
 import Vertex2                from "../../../assets/shaders/webgl2/include/Vertex.glsl.js";
 
 /* WebGL 1 */
 import DefaultVertex1         from "../../../assets/shaders/webgl1/Default.vs.js";
-import PointingVertex1        from "../../../assets/shaders/webgl1/Pointing.vs.js";
-import DepthVertex1           from "../../../assets/shaders/webgl1/Depth.vs.js";
-import GouraudVertex1         from "../../../assets/shaders/webgl1/Gouraud.vs.js";
-import PointingFragment1      from "../../../assets/shaders/webgl1/Pointing.fs.js";
 import DepthFragment1         from "../../../assets/shaders/webgl1/Depth.fs.js";
+import DepthVertex1           from "../../../assets/shaders/webgl1/Depth.vs.js";
 import GouraudFragment1       from "../../../assets/shaders/webgl1/Gouraud.fs.js";
+import GouraudVertex1         from "../../../assets/shaders/webgl1/Gouraud.vs.js";
 import PBRFragment1           from "../../../assets/shaders/webgl1/PBR.fs.js";
 import PhongFragment1         from "../../../assets/shaders/webgl1/Phong.fs.js";
+import PointingFragment1      from "../../../assets/shaders/webgl1/Pointing.fs.js";
+import PointingVertex1        from "../../../assets/shaders/webgl1/Pointing.vs.js";
 import UnlitFragment1         from "../../../assets/shaders/webgl1/Unlit.fs.js";
 
 /* WebGL 2 */
+import ComposeFragment2       from "../../../assets/shaders/webgl2/Compose.fs.js";
+import ComposeVertex2         from "../../../assets/shaders/webgl2/Compose.vs.js";
 import DefaultVertex2         from "../../../assets/shaders/webgl2/Default.vs.js";
-import PointingVertex2        from "../../../assets/shaders/webgl2/Pointing.vs.js";
-import DepthVertex2           from "../../../assets/shaders/webgl2/Depth.vs.js";
-import GouraudVertex2         from "../../../assets/shaders/webgl2/Gouraud.vs.js";
-import LineTransformVertex2   from "../../../assets/shaders/webgl2/LineTransform.vs.js";
-import PointingFragment2      from "../../../assets/shaders/webgl2/Pointing.fs.js";
 import DepthFragment2         from "../../../assets/shaders/webgl2/Depth.fs.js";
+import DepthVertex2           from "../../../assets/shaders/webgl2/Depth.vs.js";
 import GouraudFragment2       from "../../../assets/shaders/webgl2/Gouraud.fs.js";
+import GouraudVertex2         from "../../../assets/shaders/webgl2/Gouraud.vs.js";
 import LineTransformFragment2 from "../../../assets/shaders/webgl2/LineTransform.fs.js";
+import LineTransformVertex2   from "../../../assets/shaders/webgl2/LineTransform.vs.js";
 import PBRFragment2           from "../../../assets/shaders/webgl2/PBR.fs.js";
 import PhongFragment2         from "../../../assets/shaders/webgl2/Phong.fs.js";
+import PointingFragment2      from "../../../assets/shaders/webgl2/Pointing.fs.js";
+import PointingVertex2        from "../../../assets/shaders/webgl2/Pointing.vs.js";
 import UnlitFragment2         from "../../../assets/shaders/webgl2/Unlit.fs.js";
 
 const Shaders = {
@@ -141,8 +143,8 @@ const Shaders = {
          PointSize: PointSize2,
          Shadow: Shadow2,
          Skin: Skin2,
-         Stipple: Stipple2,
          SpotFactor: SpotFactor2,
+         Stipple: Stipple2,
          Texture: Texture2,
          Utils: Utils2,
          Vertex: Vertex2,
@@ -151,34 +153,36 @@ const Shaders = {
    vertex: {
       1: {
          Default: DefaultVertex1,
-         Pointing: PointingVertex1,
          Depth: DepthVertex1,
          Gouraud: GouraudVertex1,
+         Pointing: PointingVertex1,
       },
       2: {
+         Compose: ComposeVertex2,
          Default: DefaultVertex2,
-         Pointing: PointingVertex2,
          Depth: DepthVertex2,
          Gouraud: GouraudVertex2,
          LineTransform: LineTransformVertex2,
+         Pointing: PointingVertex2,
       },
    },
    fragment: {
       1: {
-         Pointing: PointingFragment1,
          Depth: DepthFragment1,
          Gouraud: GouraudFragment1,
          PBR: PBRFragment1,
          Phong: PhongFragment1,
+         Pointing: PointingFragment1,
          Unlit: UnlitFragment1,
       },
       2: {
-         Pointing: PointingFragment2,
+         Compose: ComposeFragment2,
          Depth: DepthFragment2,
          Gouraud: GouraudFragment2,
          LineTransform: LineTransformFragment2,
          PBR: PBRFragment2,
          Phong: PhongFragment2,
+         Pointing: PointingFragment2,
          Unlit: UnlitFragment2,
       },
    },

package/src/x_ite/Browser/Text/X3DTextContext.js

@@ -72,27 +72,27 @@ Object .assign (X3DTextContext .prototype,
 
       return this [_defaultFontStyle];
    },
-   getFont (url)
+   getFont (url, cache = true)
    {
-      url = url .toString ();
+      return new Promise ((resolve, reject) =>
+      {
+         url = url .toString ();
 
-      let deferred = this [_fontCache] .get (url);
+         let deferred = this [_fontCache] .get (url);
 
-      if (deferred === undefined)
-      {
-         this [_fontCache] .set (url, deferred = $.Deferred ());
+         if (!deferred)
+         {
+            this [_fontCache] .set (url, deferred = $.Deferred ());
 
-         opentype .load (url, this .setFont .bind (this, deferred));
-      }
+            fetch (url, { cache: cache ? "default" : "reload"})
+               .then (response => response .arrayBuffer ())
+               .then (buffer => opentype .parse (buffer))
+               .then (font => deferred .resolve (font))
+               .catch (error => deferred .reject (error));
+         }
 
-      return deferred;
-   },
-   setFont (deferred, error, font)
-   {
-      if (error)
-         deferred .reject (error);
-      else
-         deferred .resolve (font);
+         deferred .done (resolve) .fail (reject);
+      });
    },
    getGlyph (font, primitiveQuality, glyphIndex)
    {

package/src/x_ite/Browser/Time/X3DTimeContext.js

@@ -46,6 +46,7 @@
  ******************************************************************************/
 
 import Vector3 from "../../../standard/Math/Numbers/Vector3.js";
+import Time    from "../../../standard/Time/Time.js";
 
 const
    _currentTime      = Symbol (),
@@ -55,7 +56,7 @@ const
 
 function X3DTimeContext ()
 {
-   this [_currentTime]      = Date .now () / 1000;
+   this [_currentTime]      = Time .now () / 1000;
    this [_currentFrameRate] = 60;
    this [_currentPosition]  = new Vector3 (0, 0, 0);
    this [_currentSpeed]     = 0;
@@ -82,7 +83,7 @@ Object .assign (X3DTimeContext .prototype,
       return function ()
       {
          const
-            time     = Date .now () / 1000,
+            time     = Time .now () / 1000,
             interval = time - this [_currentTime];
 
          this [_currentTime]      = time;

package/src/x_ite/Browser/VERSION.js

@@ -45,4 +45,4 @@
  *
  ******************************************************************************/
 
-export default "8.10.0";
+export default "8.11.0";

package/src/x_ite/Browser/VolumeRendering/VolumeMaterial.js

@@ -69,13 +69,13 @@ Object .assign (Object .setPrototypeOf (VolumeMaterial .prototype, UnlitMaterial
 
       let key = "";
 
-      key += fogNode ? fogNode .getFogType () : 0;
+      key += fogNode ?.getFogType () ?? 0;
       key += ".";
       key += objectsCount [0]; // Clip planes
       key += ".";
       key += objectsCount [1]; // Lights
 
-      return this .volumeShaderNodes .get (key) || this .createShader (key, geometryContext, renderContext);
+      return this .volumeShaderNodes .get (key) ?? this .createShader (key, geometryContext, renderContext);
    },
    createShader (key, geometryContext, renderContext)
    {