x_ite 8.10.1 → 8.11.0

package/src/x_ite/Rendering/MultiSampleFrameBuffer.js

@@ -45,21 +45,24 @@
  *
  ******************************************************************************/
 
-function MultiSampleFrameBuffer (browser, width, height, samples)
+function MultiSampleFrameBuffer (browser, width, height, samples, oit)
 {
    const gl = browser .getContext ();
 
    if (gl .getVersion () === 1 || width === 0 || height === 0)
       return Fallback;
 
-   this .browser = browser;
-   this .width   = width;
-   this .height  = height;
-   this .samples = Math .min (samples, gl .getParameter (gl .MAX_SAMPLES));
+   this .context    = gl;
+   this .width      = width;
+   this .height     = height;
+   this .samples    = samples;
+   this .oit        = oit;
+   this .lastBuffer = [ ];
 
    // Create frame buffer.
 
-   this .lastBuffer  = gl .getParameter (gl .FRAMEBUFFER_BINDING);
+   this .lastBuffer .push (gl .getParameter (gl .FRAMEBUFFER_BINDING));
+
    this .frameBuffer = gl .createFramebuffer ();
 
    gl .bindFramebuffer (gl .FRAMEBUFFER, this .frameBuffer);
@@ -69,7 +72,12 @@ function MultiSampleFrameBuffer (browser, width, height, samples)
    this .colorBuffer = gl .createRenderbuffer ();
 
    gl .bindRenderbuffer (gl .RENDERBUFFER, this .colorBuffer);
-   gl .renderbufferStorageMultisample (gl .RENDERBUFFER, this .samples, gl .RGBA8, width, height);
+
+   if (samples)
+      gl .renderbufferStorageMultisample (gl .RENDERBUFFER, samples, gl .RGBA8, width, height);
+   else
+      gl .renderbufferStorage (gl .RENDERBUFFER, gl .RGBA8, width, height);
+
    gl .framebufferRenderbuffer (gl .FRAMEBUFFER, gl .COLOR_ATTACHMENT0, gl .RENDERBUFFER, this .colorBuffer);
 
    // Create depth buffer.
@@ -77,17 +85,168 @@ function MultiSampleFrameBuffer (browser, width, height, samples)
    this .depthBuffer = gl .createRenderbuffer ();
 
    gl .bindRenderbuffer (gl .RENDERBUFFER, this .depthBuffer);
-   gl .renderbufferStorageMultisample (gl .RENDERBUFFER, this .samples, gl .DEPTH_COMPONENT24, width, height);
-   gl .framebufferRenderbuffer (gl .FRAMEBUFFER, gl .DEPTH_ATTACHMENT,  gl .RENDERBUFFER, this .depthBuffer);
 
-   const status = gl .checkFramebufferStatus (gl .FRAMEBUFFER) === gl .FRAMEBUFFER_COMPLETE;
+   if (samples)
+      gl .renderbufferStorageMultisample (gl .RENDERBUFFER, samples, gl .DEPTH_COMPONENT24, width, height);
+   else
+      gl .renderbufferStorage (gl .RENDERBUFFER, gl .DEPTH_COMPONENT24, width, height);
+
+   gl .framebufferRenderbuffer (gl .FRAMEBUFFER, gl .DEPTH_ATTACHMENT, gl .RENDERBUFFER, this .depthBuffer);
+
+   const status1 = gl .checkFramebufferStatus (gl .FRAMEBUFFER) === gl .FRAMEBUFFER_COMPLETE;
+
+   gl .bindFramebuffer (gl .FRAMEBUFFER, this .lastBuffer .pop ());
+
+   // Always check that our frame buffer is ok.
+
+   if (!status1)
+      throw new Error ("Couldn't create frame buffer.");
+
+   if (!oit)
+      return;
+
+   // Create oit frame buffer.
+
+   this .lastBuffer .push (gl .getParameter (gl .FRAMEBUFFER_BINDING));
+
+   this .oitFrameBuffer = gl .createFramebuffer ();
+
+   gl .bindFramebuffer (gl .FRAMEBUFFER, this .oitFrameBuffer);
+
+   // Set draw buffers.
+
+   gl .drawBuffers ([
+      gl .COLOR_ATTACHMENT0, // gl_FragData [0]
+      gl .COLOR_ATTACHMENT1, // gl_FragData [1]
+   ]);
+
+   if (samples)
+   {
+      // Create accum and revealage buffer.
+
+      this .accumRevealageBuffer = gl .createRenderbuffer ();
+
+      gl .bindRenderbuffer (gl .RENDERBUFFER, this .accumRevealageBuffer);
+      gl .renderbufferStorageMultisample (gl .RENDERBUFFER, samples, gl .RGBA32F, width, height);
+      gl .framebufferRenderbuffer (gl .FRAMEBUFFER, gl .COLOR_ATTACHMENT0, gl .RENDERBUFFER, this .accumRevealageBuffer);
+
+      // Create alpha buffer.
+
+      this .alphaBuffer = gl .createRenderbuffer ();
+
+      gl .bindRenderbuffer (gl .RENDERBUFFER, this .alphaBuffer);
+      gl .renderbufferStorageMultisample (gl .RENDERBUFFER, samples, gl .RGBA32F, width, height);
+      gl .framebufferRenderbuffer (gl .FRAMEBUFFER, gl .COLOR_ATTACHMENT1, gl .RENDERBUFFER, this .alphaBuffer);
+
+      // Add depth buffer.
+
+      gl .framebufferRenderbuffer (gl .FRAMEBUFFER, gl .DEPTH_ATTACHMENT, gl .RENDERBUFFER, this .depthBuffer);
+
+      // Create accum texture buffer.
+
+      this .accumRevealageTextureBuffer = gl .createFramebuffer ();
+
+      gl .bindFramebuffer (gl .FRAMEBUFFER, this .accumRevealageTextureBuffer);
+
+      // Create accum texture.
+
+      this .accumRevealageTexture = gl .createTexture ();
+
+      gl .bindTexture (gl .TEXTURE_2D, this .accumRevealageTexture);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_WRAP_S,     gl .CLAMP_TO_EDGE);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_WRAP_T,     gl .CLAMP_TO_EDGE);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_MIN_FILTER, gl .NEAREST);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_MAG_FILTER, gl .NEAREST);
+
+      gl .texImage2D (gl .TEXTURE_2D, 0, gl .RGBA32F, width, height, 0, gl .RGBA, gl .FLOAT, null);
+      gl .framebufferTexture2D (gl .FRAMEBUFFER, gl .COLOR_ATTACHMENT0, gl .TEXTURE_2D, this .accumRevealageTexture, 0);
+
+      // Create alpha texture buffer.
+
+      this .alphaTextureBuffer = gl .createFramebuffer ();
+
+      gl .bindFramebuffer (gl .FRAMEBUFFER, this .alphaTextureBuffer);
+
+      // Create alpha texture.
+
+      this .alphaTexture = gl .createTexture ();
+
+      gl .bindTexture (gl .TEXTURE_2D, this .alphaTexture);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_WRAP_S,     gl .CLAMP_TO_EDGE);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_WRAP_T,     gl .CLAMP_TO_EDGE);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_MIN_FILTER, gl .NEAREST);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_MAG_FILTER, gl .NEAREST);
+
+      gl .texImage2D (gl .TEXTURE_2D, 0, gl .RGBA32F, width, height, 0, gl .RGBA, gl .FLOAT, null);
+      gl .framebufferTexture2D (gl .FRAMEBUFFER, gl .COLOR_ATTACHMENT0, gl .TEXTURE_2D, this .alphaTexture, 0);
+   }
+   else
+   {
+      // Create accum texture.
+
+      this .accumRevealageTexture = gl .createTexture ();
+
+      gl .bindTexture (gl .TEXTURE_2D, this .accumRevealageTexture);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_WRAP_S,     gl .CLAMP_TO_EDGE);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_WRAP_T,     gl .CLAMP_TO_EDGE);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_MIN_FILTER, gl .NEAREST);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_MAG_FILTER, gl .NEAREST);
 
-   gl .bindFramebuffer (gl .FRAMEBUFFER, this .lastBuffer);
+      gl .texImage2D (gl .TEXTURE_2D, 0, gl .RGBA32F, width, height, 0, gl .RGBA, gl .FLOAT, null);
+      gl .framebufferTexture2D (gl .FRAMEBUFFER, gl .COLOR_ATTACHMENT0, gl .TEXTURE_2D, this .accumRevealageTexture, 0);
+
+      // Create alpha texture.
+
+      this .alphaTexture = gl .createTexture ();
+
+      gl .bindTexture (gl .TEXTURE_2D, this .alphaTexture);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_WRAP_S,     gl .CLAMP_TO_EDGE);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_WRAP_T,     gl .CLAMP_TO_EDGE);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_MIN_FILTER, gl .NEAREST);
+      gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_MAG_FILTER, gl .NEAREST);
+
+      gl .texImage2D (gl .TEXTURE_2D, 0, gl .RGBA32F, width, height, 0, gl .RGBA, gl .FLOAT, null);
+      gl .framebufferTexture2D (gl .FRAMEBUFFER, gl .COLOR_ATTACHMENT1, gl .TEXTURE_2D, this .alphaTexture, 0);
+
+      // Add depth buffer.
+
+      gl .framebufferRenderbuffer (gl .FRAMEBUFFER, gl .DEPTH_ATTACHMENT, gl .RENDERBUFFER, this .depthBuffer);
+   }
+
+   const status2 = gl .checkFramebufferStatus (gl .FRAMEBUFFER) === gl .FRAMEBUFFER_COMPLETE;
+
+   gl .bindTexture (gl .TEXTURE_2D, null);
+   gl .bindFramebuffer (gl .FRAMEBUFFER, this .lastBuffer .pop ());
 
    // Always check that our frame buffer is ok.
 
-   if (!status)
+   if (!status2)
       throw new Error ("Couldn't create frame buffer.");
+
+   // Get compose shader and texture units.
+
+   this .shaderNode = browser .getComposeShader ();
+   this .program    = this .shaderNode .getProgram ();
+
+   gl .useProgram (this .program);
+
+   const
+      accumRevealageTextureUnit = gl .getUniformLocation (this .program, "x3d_AccumRevealageTexture"),
+      alphaTextureUnit          = gl .getUniformLocation (this .program, "x3d_AlphaTexture");
+
+   gl .uniform1i (accumRevealageTextureUnit, 0);
+   gl .uniform1i (alphaTextureUnit,          1);
+
+   // Quad for compose pass.
+
+   this .quadArray  = gl .createVertexArray ();
+   this .quadBuffer = gl .createBuffer ();
+
+   gl .bindVertexArray (this .quadArray);
+   gl .bindBuffer (gl .ARRAY_BUFFER, this .quadBuffer);
+   gl .bufferData (gl .ARRAY_BUFFER, new Float32Array ([-1, 1, -1, -1, 1, -1, -1, 1, 1, -1, 1, 1]), gl .STATIC_DRAW);
+   gl .vertexAttribPointer (0, 2, gl .FLOAT, false, 0, 0);
+   gl .enableVertexAttribArray (null);
 }
 
 Object .assign (MultiSampleFrameBuffer .prototype,
@@ -104,42 +263,118 @@ Object .assign (MultiSampleFrameBuffer .prototype,
    {
       return this .samples;
    },
+   getOrderIndependentTransparency ()
+   {
+      return this .oit;
+   },
    bind ()
    {
-      const gl = this .browser .getContext ();
+      const { context: gl, lastBuffer, frameBuffer } = this;
 
-      this .lastBuffer = gl .getParameter (gl .FRAMEBUFFER_BINDING);
+      lastBuffer .push (gl .getParameter (gl .FRAMEBUFFER_BINDING));
 
-      gl .bindFramebuffer (gl .FRAMEBUFFER, this .frameBuffer);
+      gl .bindFramebuffer (gl .FRAMEBUFFER, frameBuffer);
+
+      gl .clearColor (0, 0, 0, 0);
+      gl .clear (gl .COLOR_BUFFER_BIT);
    },
-   unbind ()
+   bindForOrderIndependentTransparency ()
    {
-      const gl = this .browser .getContext ();
+      const { context: gl, lastBuffer, oitFrameBuffer } = this;
+
+      lastBuffer .push (gl .getParameter (gl .FRAMEBUFFER_BINDING));
 
-      gl .bindFramebuffer (gl .FRAMEBUFFER, this .lastBuffer);
+      gl .bindFramebuffer (gl .FRAMEBUFFER, oitFrameBuffer);
+
+      gl .clearColor (0, 0, 0, 1);
+      gl .clear (gl .COLOR_BUFFER_BIT);
+      gl .blendFuncSeparate (gl .ONE, gl .ONE, gl .ZERO, gl .ONE_MINUS_SRC_ALPHA);
    },
    blit ()
    {
-      const gl = this .browser .getContext ();
+      const { context: gl, width, height, samples } = this;
 
       // Reset viewport before blit, otherwise only last layer size is used.
-      gl .viewport (0, 0, this .width, this .height);
-      gl .scissor  (0, 0, this .width, this .height);
+      gl .viewport (0, 0, width, height);
+      gl .scissor  (0, 0, width, height);
 
       gl .bindFramebuffer (gl .READ_FRAMEBUFFER, this .frameBuffer);
       gl .bindFramebuffer (gl .DRAW_FRAMEBUFFER, null);
 
-      gl .blitFramebuffer (0, 0, this .width, this .height,
-                           0, 0, this .width, this .height,
-                           gl .COLOR_BUFFER_BIT, gl .LINEAR);
+      gl .blitFramebuffer (0, 0, width, height,
+                           0, 0, width, height,
+                           gl .COLOR_BUFFER_BIT, samples ? gl .LINEAR : gl .NEAREST);
+   },
+   compose ()
+   {
+      const { context: gl, width, height, samples, program } = this;
+
+      // TODO: Combining lights and lights with shadows, can cause feedback loop of texture.
+      // TODO: VolumeRendering shader is not made for OIT.
+
+      // Reset viewport before blit, otherwise only last layer size is used.
+      gl .viewport (0, 0, width, height);
+      gl .scissor  (0, 0, width, height);
+
+      if (samples)
+      {
+         gl .bindFramebuffer (gl .READ_FRAMEBUFFER, this .oitFrameBuffer);
+
+         gl .readBuffer (gl .COLOR_ATTACHMENT0);
+         gl .bindFramebuffer (gl .DRAW_FRAMEBUFFER, this .accumRevealageTextureBuffer);
+
+         gl .blitFramebuffer (0, 0, width, height,
+                              0, 0, width, height,
+                              gl .COLOR_BUFFER_BIT, gl .LINEAR);
+
+         gl .readBuffer (gl .COLOR_ATTACHMENT1);
+         gl .bindFramebuffer (gl .DRAW_FRAMEBUFFER, this .alphaTextureBuffer);
+
+         gl .blitFramebuffer (0, 0, width, height,
+                              0, 0, width, height,
+                              gl .COLOR_BUFFER_BIT, gl .LINEAR);
+      }
+
+      gl .useProgram (program);
+      gl .activeTexture (gl .TEXTURE0 + 0);
+      gl .bindTexture (gl .TEXTURE_2D, this .accumRevealageTexture);
+      gl .activeTexture (gl .TEXTURE0 + 1);
+      gl .bindTexture (gl .TEXTURE_2D, this .alphaTexture);
+
+      gl .bindFramebuffer (gl .FRAMEBUFFER, this .frameBuffer);
+      gl .disable (gl .DEPTH_TEST);
+      gl .enable (gl .BLEND);
+      gl .blendFunc (gl .ONE, gl .ONE_MINUS_SRC_ALPHA);
+      gl .enable (gl .CULL_FACE);
+      gl .frontFace (gl .CCW);
+      gl .bindVertexArray (this .quadArray);
+      gl .drawArrays (gl .TRIANGLES, 0, 6);
+      gl .disable (gl .BLEND);
+      gl .enable (gl .DEPTH_TEST);
+   },
+   unbind ()
+   {
+      const { context: gl, lastBuffer } = this;
+
+      gl .bindFramebuffer (gl .FRAMEBUFFER, lastBuffer .pop ());
    },
    dispose ()
    {
-      const gl = this .browser .getContext ();
+      const gl = this .context;
 
       gl .deleteFramebuffer (this .frameBuffer);
       gl .deleteRenderbuffer (this .colorBuffer);
       gl .deleteRenderbuffer (this .depthBuffer);
+
+      gl .deleteFramebuffer (this .oitFrameBuffer);
+      gl .deleteFramebuffer (this .accumRevealageTextureBuffer);
+      gl .deleteFramebuffer (this .alphaTextureBuffer);
+      gl .deleteRenderbuffer (this .accumRevealageBuffer);
+      gl .deleteRenderbuffer (this .alphaBuffer);
+      gl .deleteTexture (this .accumRevealageTexture);
+      gl .deleteTexture (this .alphaTexture)
+      gl .deleteVertexArray (this .quadArray);
+      gl .deleteBuffer (this .quadBuffer);
    },
 });
 
@@ -147,9 +382,12 @@ const Fallback = {
    getWidth: Function .prototype,
    getHeight: Function .prototype,
    getSamples: Function .prototype,
+   getOrderIndependentTransparency: Function .prototype,
    bind: Function .prototype,
-   unbind: Function .prototype,
+   clear: Function .prototype,
    blit: Function .prototype,
+   compose: Function .prototype,
+   unbind: Function .prototype,
    dispose: Function .prototype,
 };
 

package/src/x_ite/Rendering/PointingBuffer.js

@@ -49,7 +49,7 @@ function PointingBuffer (browser)
 {
    const gl = browser .getContext ();
 
-   this .browser = browser;
+   this .context = gl;
    this .array   = new Float32Array (4);
 
    // Create frame buffer.
@@ -124,7 +124,7 @@ Object .assign (PointingBuffer .prototype,
 {
    bind ()
    {
-      const gl = this .browser .getContext ();
+      const gl = this .context;
 
       this .lastBuffer = gl .getParameter (gl .FRAMEBUFFER_BINDING);
 
@@ -134,15 +134,13 @@ Object .assign (PointingBuffer .prototype,
    },
    unbind ()
    {
-      const gl = this .browser .getContext ();
+      const gl = this .context;
 
       gl .bindFramebuffer (gl .FRAMEBUFFER, this .lastBuffer);
    },
    getHit (hit)
    {
-      const
-         gl    = this .browser .getContext (),
-         array = this .array;
+      const { context: gl, array } = this;
 
       // Id, point
 
@@ -173,7 +171,7 @@ Object .assign (PointingBuffer .prototype,
    },
    dispose ()
    {
-      const gl = this .browser .getContext ();
+      const gl = this .context;
 
       gl .deleteFramebuffer (this .frameBuffer);
 

package/src/x_ite/Rendering/TextureBuffer.js

@@ -53,7 +53,7 @@ function TextureBuffer (browser, width, height, float = false)
 {
    const gl = browser .getContext ();
 
-   this .browser = browser;
+   this .context = gl;
    this .width   = width;
    this .height  = height;
 
@@ -152,11 +152,7 @@ Object .assign (TextureBuffer .prototype,
    },
    readPixels ()
    {
-      const
-         gl     = this .browser .getContext (),
-         array  = this .array,
-         width  = this .width,
-         height = this .height;
+      const { context: gl, array, width, height } = this;
 
       gl .readPixels (0, 0, width, height, gl .RGBA, gl .UNSIGNED_BYTE, array);
 
@@ -170,11 +166,7 @@ Object .assign (TextureBuffer .prototype,
 
       return function (projectionMatrix, viewport)
       {
-         const
-            gl     = this .browser .getContext (),
-            array  = this .array,
-            width  = this .width,
-            height = this .height;
+         const { context: gl, array, width, height } = this;
 
          gl .readPixels (0, 0, width, height, gl .RGBA, gl .FLOAT, array);
 
@@ -207,7 +199,7 @@ Object .assign (TextureBuffer .prototype,
    })(),
    bind ()
    {
-      const gl = this .browser .getContext ();
+      const gl = this .context;
 
       this .lastBuffer = gl .getParameter (gl .FRAMEBUFFER_BINDING);
 
@@ -215,13 +207,13 @@ Object .assign (TextureBuffer .prototype,
    },
    unbind ()
    {
-      const gl = this .browser .getContext ();
+      const gl = this .context;
 
       gl .bindFramebuffer (gl .FRAMEBUFFER, this .lastBuffer);
    },
    delete ()
    {
-      const gl = this .browser .getContext ();
+      const gl = this .context;
 
       gl .deleteFramebuffer (this .frameBuffer);
       gl .deleteTexture (this .colorTexture);

package/src/x_ite/Rendering/X3DRenderObject.js

@@ -58,11 +58,14 @@ import Rotation4     from "../../standard/Math/Numbers/Rotation4.js";
 import Matrix4       from "../../standard/Math/Numbers/Matrix4.js";
 import MatrixStack   from "../../standard/Math/Utility/MatrixStack.js";
 import StopWatch     from "../../standard/Time/StopWatch.js";
+import Time          from "../../standard/Time/Time.js";
 
 const DEPTH_BUFFER_SIZE = 16;
 
 function X3DRenderObject (executionContext)
 {
+   const browser = executionContext .getBrowser ();
+
    this .viewVolumes              = [ ];
    this .cameraSpaceMatrix        = new MatrixStack (Matrix4);
    this .viewMatrix               = new MatrixStack (Matrix4);
@@ -99,17 +102,7 @@ function X3DRenderObject (executionContext)
    this .transparentShapes        = [ ];
    this .transparencySorter       = new MergeSort (this .transparentShapes, (a, b) => a .distance < b .distance);
    this .speed                    = 0;
-
-   try
-   {
-      this .depthBuffer = new TextureBuffer (executionContext .getBrowser (), DEPTH_BUFFER_SIZE, DEPTH_BUFFER_SIZE, true);
-   }
-   catch (error)
-   {
-      console .error (error);
-
-      this .getDepth = function () { return 0; };
-   }
+   this .depthBuffer              = new TextureBuffer (browser, DEPTH_BUFFER_SIZE, DEPTH_BUFFER_SIZE, true);
 }
 
 Object .assign (X3DRenderObject .prototype,
@@ -160,6 +153,10 @@ Object .assign (X3DRenderObject .prototype,
    {
       return this .cameraSpaceMatrixArray;
    },
+   getLogarithmicDepthBuffer ()
+   {
+      return this .logarithmicDepthBuffer;
+   },
    getHitRay ()
    {
       return this .hitRay;
@@ -711,9 +708,6 @@ Object .assign (X3DRenderObject .prototype,
 
          // Render all objects
 
-         gl .depthMask (true);
-         gl .enable (gl .DEPTH_TEST);
-         gl .disable (gl .BLEND);
          gl .disable (gl .CULL_FACE);
 
          for (let s = 0; s < numShapes; ++ s)
@@ -950,9 +944,6 @@ Object .assign (X3DRenderObject .prototype,
 
          // Render all objects
 
-         gl .depthMask (true);
-         gl .enable (gl .DEPTH_TEST);
-         gl .disable (gl .BLEND);
          gl .disable (gl .CULL_FACE);
 
          for (let s = 0; s < numShapes; ++ s)
@@ -997,10 +988,14 @@ Object .assign (X3DRenderObject .prototype,
          shadows                    = globalShadows .at (-1),
          headlight                  = this .getNavigationInfo () ._headlight .getValue (),
          numGlobalLights            = globalObjects .reduce ((n, c) => n + !!c .lightNode, 0),
-         numGlobalTextureProjectors = globalObjects .reduce ((n, c) => n + !!c .textureProjectorNode, 0);
+         numGlobalTextureProjectors = globalObjects .reduce ((n, c) => n + !!c .textureProjectorNode, 0),
+         oit                        = browser .getFrameBuffer () .getOrderIndependentTransparency ();
+
 
+      this .renderTime = Time .now ();
 
-      this .renderTime = Date .now ();
+      this .logarithmicDepthBuffer = browser .getBrowserOption ("LogarithmicDepthBuffer")
+         || this .getViewpoint () .getLogarithmicDepthBuffer ();
 
 
       // PREPARATIONS
@@ -1048,17 +1043,14 @@ Object .assign (X3DRenderObject .prototype,
       // Draw background.
 
       gl .clear (gl .DEPTH_BUFFER_BIT);
+      gl .blendFuncSeparate (gl .SRC_ALPHA, gl .ONE_MINUS_SRC_ALPHA, gl .ONE, gl .ONE_MINUS_SRC_ALPHA);
 
       this .getBackground () .display (gl, this, viewport);
 
-      // Sorted blend
+      // Sorted blend or order independent transparency
 
       // Render opaque objects first
 
-      gl .depthMask (true);
-      gl .enable (gl .DEPTH_TEST);
-      gl .disable (gl .BLEND);
-
       const opaqueShapes = this .opaqueShapes;
 
       for (let i = 0, length = this .numOpaqueShapes; i < length; ++ i)
@@ -1077,12 +1069,15 @@ Object .assign (X3DRenderObject .prototype,
 
       // Render transparent objects
 
-      gl .depthMask (false);
-      gl .enable (gl .BLEND);
-
       const transparentShapes = this .transparentShapes;
 
-      this .transparencySorter .sort (0, this .numTransparentShapes);
+      if (oit)
+         browser .getFrameBuffer () .bindForOrderIndependentTransparency ();
+      else
+         this .transparencySorter .sort (0, this .numTransparentShapes);
+
+      gl .depthMask (false);
+      gl .enable (gl .BLEND);
 
       for (let i = 0, length = this .numTransparentShapes; i < length; ++ i)
       {
@@ -1101,6 +1096,11 @@ Object .assign (X3DRenderObject .prototype,
       gl .depthMask (true);
       gl .disable (gl .BLEND);
 
+      if (oit)
+      {
+         browser .getFrameBuffer () .compose ();
+         browser .getFrameBuffer () .unbind ();
+      }
 
       // POST DRAW
 

package/src/x_ite/X3D.js

@@ -76,7 +76,6 @@ import RouteArray                  from "./Routing/RouteArray.js";
 import X3DRoute                    from "./Routing/X3DRoute.js";
 import X3DConstants                from "./Base/X3DConstants.js";
 import Legacy                      from "./Browser/Legacy.js";
-import MicroTime                   from "../standard/Time/MicroTime.js";
 import jQuery                      from "../lib/jquery.js";
 import libtess                     from "../lib/libtess.js";
 

package/src/x_ite/X3DCanvasElement.js

@@ -88,6 +88,8 @@ class X3DCanvasElement extends HTMLElement
          "notifications",
          "oninitialized",
          "onshutdown",
+         "orderIndependentTransparency",
+         "orderindependenttransparency",
          "splashScreen",
          "splashscreen",
          "src",