@xeokit/xeokit-sdk 2.2.1 → 2.2.5

package/README.md

@@ -16,16 +16,13 @@ npm i @xeokit/xeokit-sdk
 ## Usage
 
 The xeokit SDK lets us develop our own browser-based BIM viewer, which we can fully customize and extend with
-plugins.
-
-Let's create a [Viewer](https://xeokit.github.io/xeokit-sdk/docs/class/src/viewer/Viewer.js~Viewer.html) with
+plugins. Let's create a [Viewer](https://xeokit.github.io/xeokit-sdk/docs/class/src/viewer/Viewer.js~Viewer.html) with
 a [WebIFCLoaderPlugin](https://xeokit.github.io/xeokit-sdk/docs/class/src/plugins/WebIFCLoaderPlugin/WebIFCLoaderPlugin.js~WebIFCLoaderPlugin.html)
 to view a IFC model in the browser, then view a sample IFC model from
 the [Open IFC Model Database](http://openifcmodel.cs.auckland.ac.nz/Model/Details/274).
 
-> > [Run this example](https://xeokit.github.io/xeokit-sdk/examples/#BIMOffline_WebIFCLoaderPlugin_Duplex)
->
-> > [Read the full tutorial](https://www.notion.so/xeokit/Viewing-an-IFC-Model-with-WebIFCLoaderPlugin-9a572b801af949bf87a21c88968bd251)
+ * [Run this example](https://xeokit.github.io/xeokit-sdk/examples/#BIMOffline_WebIFCLoaderPlugin_Duplex)
+ * [Read the full tutorial](https://www.notion.so/xeokit/Viewing-an-IFC-Model-with-WebIFCLoaderPlugin-9a572b801af949bf87a21c88968bd251)
 
 ![](https://xeokit.io/img/docs/WebIFCLoaderPlugin/WebIFCLoaderPluginBig.png)
 

package/dist/xeokit-sdk.cjs.js

@@ -2720,30 +2720,6 @@ const math = {
      * @param z
      * @param m
      */
-    OLDtranslateMat4c(x, y, z, m) {
-
-        const m12 = m[12];
-        m[0] += m12 * x;
-        m[4] += m12 * y;
-        m[8] += m12 * z;
-
-        const m13 = m[13];
-        m[1] += m13 * x;
-        m[5] += m13 * y;
-        m[9] += m13 * z;
-
-        const m14 = m[14];
-        m[2] += m14 * x;
-        m[6] += m14 * y;
-        m[10] += m14 * z;
-
-        const m15 = m[15];
-        m[3] += m15 * x;
-        m[7] += m15 * y;
-        m[11] += m15 * z;
-
-        return m;
-    },
 
     translateMat4c(x, y, z, m) {
 
@@ -8169,6 +8145,8 @@ class PerformanceNode {
         this._offsetAABB = math.AABB3(aabb);
 
         this._offset = math.vec3();
+        this._colorizeUpdated = false;
+        this._opacityUpdated = false;
 
         if (this._isObject) {
             model.scene._registerObject(this);
@@ -8581,6 +8559,7 @@ class PerformanceNode {
         if (this._isObject) {
             const colorized = (!!color);
             this.scene._objectColorizeUpdated(this, colorized);
+            this._colorizeUpdated = colorized;
         }
         this.model.glRedraw();
     }
@@ -8635,6 +8614,7 @@ class PerformanceNode {
         }
         if (this._isObject) {
             this.scene._objectOpacityUpdated(this, opacityUpdated);
+            this._opacityUpdated = opacityUpdated;
         }
         this.model.glRedraw();
     }
@@ -8781,8 +8761,12 @@ class PerformanceNode {
             if (this.highlighted) {
                 scene._objectHighlightedUpdated(this);
             }
-            this.scene._objectColorizeUpdated(this, false);
-            this.scene._objectOpacityUpdated(this, false);
+            if (this._opacityUpdated) {
+                this.scene._objectColorizeUpdated(this, false);
+            }
+            if (this._opacityUpdated) {
+                this.scene._objectOpacityUpdated(this, false);
+            }
             this.scene._objectOffsetUpdated(this, false);
         }
         for (let i = 0, len = this.meshes.length; i < len; i++) {
@@ -12150,7 +12134,7 @@ class Canvas extends Component {
                      * @event boundary
                      * @param value The property's new value
                      */
-                    if (!newResolutionScale) {
+                    if (!newResolutionScale || newCanvasSize) {
                         this.fire("boundary", boundary);
                     }
 
@@ -15447,6 +15431,14 @@ const Renderer = function (scene, options) {
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
     };
 
+    /**
+     * Returns true if the next call to render() will draw something
+     * @returns {boolean}
+     */
+    this.needsRender = function () {
+        return (imageDirty || drawableListDirty || stateSortDirty);
+    };
+
     /**
      * Renders inserted drawables.
      *  @private
@@ -15970,7 +15962,9 @@ const Renderer = function (scene, options) {
 
             if (highlightedFillOpaqueBinLen > 0 || highlightedEdgesOpaqueBinLen > 0) {
                 frameCtx.lastProgramId = null;
-                gl.clear(gl.DEPTH_BUFFER_BIT);
+                if ( scene.highlightMaterial.glowThrough) {
+                    gl.clear(gl.DEPTH_BUFFER_BIT);
+                }
                 if (highlightedEdgesOpaqueBinLen > 0) {
                     for (i = 0; i < highlightedEdgesOpaqueBinLen; i++) {
                         highlightedEdgesOpaqueBin[i].drawEdgesHighlighted(frameCtx);
@@ -15985,17 +15979,17 @@ const Renderer = function (scene, options) {
 
             if (highlightedFillTransparentBinLen > 0 || highlightedEdgesTransparentBinLen > 0 || highlightedFillOpaqueBinLen > 0) {
                 frameCtx.lastProgramId = null;
-                gl.clear(gl.DEPTH_BUFFER_BIT);
-                gl.enable(gl.CULL_FACE);
+                if (scene.selectedMaterial.glowThrough) {
+                    gl.clear(gl.DEPTH_BUFFER_BIT);
+                }
                 gl.enable(gl.BLEND);
-
                 if (canvasTransparent) {
                     gl.blendEquation(gl.FUNC_ADD);
                     gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
                 } else {
                     gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
                 }
-
+                gl.enable(gl.CULL_FACE);
                 if (highlightedEdgesTransparentBinLen > 0) {
                     for (i = 0; i < highlightedEdgesTransparentBinLen; i++) {
                         highlightedEdgesTransparentBin[i].drawEdgesHighlighted(frameCtx);
@@ -16011,7 +16005,9 @@ const Renderer = function (scene, options) {
 
             if (selectedFillOpaqueBinLen > 0 || selectedEdgesOpaqueBinLen > 0) {
                 frameCtx.lastProgramId = null;
-                gl.clear(gl.DEPTH_BUFFER_BIT);
+                if (scene.selectedMaterial.glowThrough) {
+                    gl.clear(gl.DEPTH_BUFFER_BIT);
+                }
                 if (selectedEdgesOpaqueBinLen > 0) {
                     for (i = 0; i < selectedEdgesOpaqueBinLen; i++) {
                         selectedEdgesOpaqueBin[i].drawEdgesSelected(frameCtx);
@@ -16026,10 +16022,11 @@ const Renderer = function (scene, options) {
 
             if (selectedFillTransparentBinLen > 0 || selectedEdgesTransparentBinLen > 0) {
                 frameCtx.lastProgramId = null;
-                gl.clear(gl.DEPTH_BUFFER_BIT);
+                if (scene.selectedMaterial.glowThrough) {
+                    gl.clear(gl.DEPTH_BUFFER_BIT);
+                }
                 gl.enable(gl.CULL_FACE);
                 gl.enable(gl.BLEND);
-
                 if (canvasTransparent) {
                     gl.blendEquation(gl.FUNC_ADD);
                     gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
@@ -23174,6 +23171,7 @@ class EmphasisMaterial extends Material {
      * @param {Number} [cfg.edgeWidth=1] Width of xray edges, in pixels.
      * @param {String} [cfg.preset] Selects a preset EmphasisMaterial configuration - see {@link EmphasisMaterial#presets}.
      * @param {Boolean} [cfg.backfaces=false] Whether to render geometry backfaces when emphasising.
+     * @param {Boolean} [cfg.glowThrough=true] Whether to make the emphasized object appear to float on top of other objects, as if it were "glowing through" them.
      */
     constructor(owner, cfg = {}) {
 
@@ -23188,7 +23186,8 @@ class EmphasisMaterial extends Material {
             edgeColor: null,
             edgeAlpha: null,
             edgeWidth: null,
-            backfaces: true
+            backfaces: true,
+            glowThrough: true
         });
 
         this._preset = "default";
@@ -23219,6 +23218,9 @@ class EmphasisMaterial extends Material {
             if (cfg.backfaces !== undefined) {
                 this.backfaces = cfg.backfaces;
             }
+            if (cfg.glowThrough !== undefined) {
+                this.glowThrough = cfg.glowThrough;
+            }
         } else {
             this.fill = cfg.fill;
             this.fillColor = cfg.fillColor;
@@ -23228,6 +23230,7 @@ class EmphasisMaterial extends Material {
             this.edgeAlpha = cfg.edgeAlpha;
             this.edgeWidth = cfg.edgeWidth;
             this.backfaces = cfg.backfaces;
+            this.glowThrough = cfg.glowThrough;
         }
     }
 
@@ -23449,7 +23452,7 @@ class EmphasisMaterial extends Material {
     }
 
     /**
-     * Sets whether to render backfaces when {@link EmphasisMaterial#fill} is ````true````..
+     * Sets whether to render backfaces when {@link EmphasisMaterial#fill} is ````true````.
      *
      * Default is ````false````.
      *
@@ -23465,9 +23468,9 @@ class EmphasisMaterial extends Material {
     }
 
     /**
-     * Gets whether to render backfaces when {@link EmphasisMaterial#fill} is ````true````..
+     * Gets whether to render backfaces when {@link EmphasisMaterial#fill} is ````true````.
      *
-     * Default is ````false````.
+     * Default is ````true````.
      *
      * @type {Boolean}
      */
@@ -23475,6 +23478,35 @@ class EmphasisMaterial extends Material {
         return this._state.backfaces;
     }
 
+    /**
+     * Sets whether to render emphasized objects over the top of other objects, as if they were "glowing through".
+     *
+     * Default is ````true````.
+     *
+     * Note: updating this property will not affect the appearance of objects that are already emphasized.
+     *
+     * @type {Boolean}
+     */
+    set glowThrough(value) {
+        value = (value !== false);
+        if (this._state.glowThrough === value) {
+            return;
+        }
+        this._state.glowThrough = value;
+        this.glRedraw();
+    }
+
+    /**
+     * Sets whether to render emphasized objects over the top of other objects, as if they were "glowing through".
+     *
+     * Default is ````true````.
+     *
+     * @type {Boolean}
+     */
+    get glowThrough() {
+        return this._state.glowThrough;
+    }
+
     /**
      * Selects a preset EmphasisMaterial configuration.
      *
@@ -23499,6 +23531,7 @@ class EmphasisMaterial extends Material {
         this.edgeColor = preset.edgeColor;
         this.edgeAlpha = preset.edgeAlpha;
         this.edgeWidth = preset.edgeWidth;
+        this.glowThrough = preset.glowThrough;
         this._preset = value;
     }
 
@@ -26430,6 +26463,10 @@ class Scene extends Component {
             this._needRecompile = false;
         }
 
+        if (!forceRender && !this._renderer.needsRender()) {
+            return;
+        }
+
         renderEvent.sceneId = this.id;
 
         const passes = this._passes;
@@ -27378,7 +27415,7 @@ class Scene extends Component {
      * registered by {@link Entity#id} in {@link Scene#visibleObjects}.
      *
      * @param {String[]} ids Array of {@link Entity#id} values.
-     * @param {Boolean} visible Whether or not to cull.
+     * @param {Boolean} visible Whether or not to set visible.
      * @returns {Boolean} True if any {@link Entity}s were updated, else false if all updates were redundant and not applied.
      */
     setObjectsVisible(ids, visible) {
@@ -27395,7 +27432,7 @@ class Scene extends Component {
      * An {@link Entity} represents an object when {@link Entity#isObject} is ````true````.
      *
      * @param {String[]} ids Array of {@link Entity#id} values.
-     * @param {Boolean} collidable Whether or not to cull.
+     * @param {Boolean} collidable Whether or not to set collidable.
      * @returns {Boolean} True if any {@link Entity}s were updated, else false if all updates were redundant and not applied.
      */
     setObjectsCollidable(ids, collidable) {
@@ -27432,7 +27469,7 @@ class Scene extends Component {
      * registered by {@link Entity#id} in {@link Scene#selectedObjects}.
      *
      * @param {String[]} ids Array of {@link Entity#id} values.
-     * @param {Boolean} selected Whether or not to highlight.
+     * @param {Boolean} selected Whether or not to select.
      * @returns {Boolean} True if any {@link Entity}s were updated, else false if all updates were redundant and not applied.
      */
     setObjectsSelected(ids, selected) {
@@ -27468,9 +27505,6 @@ class Scene extends Component {
      *
      * An {@link Entity} represents an object when {@link Entity#isObject} is ````true````.
      *
-     * Each {@link Entity} on which both {@link Entity#isObject} and {@link Entity#xrayed} are ````true```` is
-     * registered by {@link Entity#id} in {@link Scene#xrayedObjects}.
-     *
      * @param {String[]} ids Array of {@link Entity#id} values.
      * @param {Boolean} xrayed Whether or not to xray.
      * @returns {Boolean} True if any {@link Entity}s were updated, else false if all updates were redundant and not applied.
@@ -27538,7 +27572,7 @@ class Scene extends Component {
      * An {@link Entity} represents an object when {@link Entity#isObject} is ````true````.
      *
      * @param {String[]} ids Array of {@link Entity#id} values.
-     * @param {Boolean} pickable Whether or not to enable picking.
+     * @param {Boolean} pickable Whether or not to set pickable.
      * @returns {Boolean} True if any {@link Entity}s were updated, else false if all updates were redundant and not applied.
      */
     setObjectsPickable(ids, pickable) {
@@ -27564,13 +27598,10 @@ class Scene extends Component {
     }
 
     /**
-     * Iterates with a callback over {@link Entity#visible} on {@link Entity}s that represent objects.
+     * Iterates with a callback over {@link Entity}s that represent objects.
      *
      * An {@link Entity} represents an object when {@link Entity#isObject} is ````true````.
      *
-     * Each {@link Entity} on which both {@link Entity#isObject} and {@link Entity#visible} are ````true```` is
-     * registered by {@link Entity#id} in {@link Scene#visibleObjects}.
-     *
      * @param {String[]} ids Array of {@link Entity#id} values.
      * @param {Function} callback Callback to execute on eacn {@link Entity}.
      * @returns {Boolean} True if any {@link Entity}s were updated, else false if all updates were redundant and not applied.
@@ -46541,7 +46572,7 @@ class TrianglesBatchingLayer {
         // Color
 
         let f0;
-        if (!visible || culled || xrayed) { // Highlight & select are layered on top of color - not mutually exclusive
+        if (!visible || culled || xrayed || (highlighted && !this.model.scene.highlightMaterial.glowThrough) || (selected && !this.model.scene.selectedMaterial.glowThrough)) { // Highlight & select are layered on top of color - not mutually exclusive
             f0 = RENDER_PASSES.NOT_RENDERED;
         } else {
             if (transparent) {
@@ -53658,7 +53689,7 @@ class TrianglesInstancingLayer {
         // Normal fill
 
         let f0;
-        if (!visible || culled || xrayed) { // Highlight & select are layered on top of color - not mutually exclusive
+        if (!visible || culled || xrayed || (highlighted && !this.model.scene.highlightMaterial.glowThrough) || (selected && !this.model.scene.selectedMaterial.glowThrough)) { // Highlight & select are layered on top of color - not mutually exclusive
             f0 = RENDER_PASSES.NOT_RENDERED;
         } else {
             if (meshTransparent) {
@@ -55408,7 +55439,7 @@ class LinesBatchingLayer {
         // Color
 
         let f0;
-        if (!visible || culled || xrayed) {
+        if (!visible || culled || xrayed || (highlighted && !this.model.scene.highlightMaterial.glowThrough) || (selected && !this.model.scene.selectedMaterial.glowThrough)) { // Highlight & select are layered on top of color - not mutually exclusive
             f0 = RENDER_PASSES.NOT_RENDERED;
         } else {
             if (transparent) {
@@ -56875,7 +56906,7 @@ class LinesInstancingLayer {
         // Normal fill
 
         let f0;
-        if (!visible || culled || xrayed) {
+        if (!visible || culled || xrayed || (highlighted && !this.model.scene.highlightMaterial.glowThrough) || (selected && !this.model.scene.selectedMaterial.glowThrough)) { // Highlight & select are layered on top of color - not mutually exclusive
             f0 = RENDER_PASSES.NOT_RENDERED;
         } else {
             if (meshTransparent) {
@@ -59441,7 +59472,7 @@ class PointsBatchingLayer {
         // Normal fill
 
         let f0;
-        if (!visible || culled || xrayed) {
+        if (!visible || culled || xrayed || (highlighted && !this.model.scene.highlightMaterial.glowThrough) || (selected && !this.model.scene.selectedMaterial.glowThrough)) { // Highlight & select are layered on top of color - not mutually exclusive
             f0 = RENDER_PASSES.NOT_RENDERED;
         } else {
             if (transparent) {
@@ -62834,7 +62865,7 @@ class PointsInstancingLayer {
         // Normal fill
 
         let f0;
-        if (!visible || culled || xrayed) {
+        if (!visible || culled || xrayed || (highlighted && !this.model.scene.highlightMaterial.glowThrough) || (selected && !this.model.scene.selectedMaterial.glowThrough)) { // Highlight & select are layered on top of color - not mutually exclusive
             f0 = RENDER_PASSES.NOT_RENDERED;
         } else {
             if (meshTransparent) {