Fix alpha blending for X-ray - add Viewer alphaDepthMask option

#318
xeokit · Jun 3, 2020 · 145ca17 · 145ca17
1 parent 0097b0a
commit 145ca17
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/src/viewer/Viewer.js b/src/viewer/Viewer.js
@@ -38,6 +38,7 @@ class Viewer {
      * @param {Number[]} [cfg.origin=[0,0,0]] The Real-space 3D origin, in current measurement units, at which the World-space coordinate origin ````[0,0,0]```` sits.
      * @param {Boolean} [cfg.saoEnabled=false] Whether to enable Scalable Ambient Obscurance (SAO) effect. See {@link SAO} for more info.
      * @throws {String} Throws an exception when both canvasId or canvasElement are missing or they aren't pointing to a valid HTMLCanvasElement.
+     * @param {Boolean} [cfg.alphaDepthMask=true] Whether writing into the depth buffer is enabled or disabled when rendering transparent objects.
      */
     constructor(cfg) {
 
@@ -72,7 +73,8 @@ class Viewer {
             units: cfg.units,
             scale: cfg.scale,
             origin: cfg.origin,
-            saoEnabled: cfg.saoEnabled
+            saoEnabled: cfg.saoEnabled,
+            alphaDepthMask: (cfg.alphaDepthMask !== false)
         });
 
         /**

diff --git a/src/viewer/scene/scene/Scene.js b/src/viewer/scene/scene/Scene.js
@@ -331,6 +331,7 @@ class Scene extends Component {
     }
 
     /**
+     * @private
      * @constructor
      * @param {Object} cfg Scene configuration.
      * @param {String} [cfg.canvasId]  ID of an existing HTML canvas for the {@link Scene#canvas} - either this or canvasElement is mandatory. When both values are given, the element reference is always preferred to the ID.
@@ -348,6 +349,7 @@ class Scene extends Component {
         }
 
         const transparent = (!!cfg.transparent);
+        const alphaDepthMask = (!!cfg.alphaDepthMask);
 
         this._aabbDirty = true;
 
@@ -553,7 +555,8 @@ class Scene extends Component {
         });
 
         this._renderer = new Renderer(this, {
-            transparent: transparent
+            transparent: transparent,
+            alphaDepthMask: alphaDepthMask
         });
 
         this._sectionPlanesState = new (function () {
@@ -907,6 +910,7 @@ class Scene extends Component {
     _sectionPlaneDestroyed(sectionPlane) {
         delete this.sectionPlanes[sectionPlane.id];
         this.scene._sectionPlanesState.removeSectionPlane(sectionPlane._state);
+        this.scene.fire("sectionPlaneDestroyed", sectionPlane, true /* Don't retain event */);
         this._needRecompile = true;
     }
 

diff --git a/src/viewer/scene/webgl/Renderer.js b/src/viewer/scene/webgl/Renderer.js
@@ -22,6 +22,7 @@ const Renderer = function (scene, options) {
     const canvas = scene.canvas.canvas;
     const gl = scene.canvas.gl;
     const canvasTransparent = (!!options.transparent);
+    const alphaDepthMask = options.alphaDepthMask;
 
     const pickIDs = new Map({});
 
@@ -596,15 +597,15 @@ const Renderer = function (scene, options) {
                 }
             }
 
-            const transparentDepthMask = true;
             if (xrayedFillTransparentBinLen > 0 || xrayEdgesTransparentBinLen > 0 || normalFillTransparentBinLen > 0) {
                 gl.enable(gl.CULL_FACE);
                 gl.enable(gl.BLEND);
+
                 gl.blendEquation(gl.FUNC_ADD);
-                gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+                gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
                 frameCtx.backfaces = false;
-                if (transparentDepthMask) {
+                if (!alphaDepthMask) {
                     gl.depthMask(false);
                 }
                 if (xrayEdgesTransparentBinLen > 0) {
@@ -630,7 +631,9 @@ const Renderer = function (scene, options) {
                     }
                 }
                 gl.disable(gl.BLEND);
-                gl.depthMask(true);
+                if (!alphaDepthMask) {
+                    gl.depthMask(true);
+                }
             }
 
             if (highlightedFillOpaqueBinLen > 0 || highlightedEdgesOpaqueBinLen > 0) {