@xeokit/xeokit-sdk 2.6.91 → 2.6.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.91",
+  "version": "2.6.93",
   "description": "3D BIM IFC Viewer SDK for AEC engineering applications. Open Source JavaScript Toolkit based on pure WebGL for top performance, real-world coordinates and full double precision",
   "module": "./dist/xeokit-sdk.es.js",
   "main": "./dist/xeokit-sdk.cjs.js",

package/src/plugins/AngleMeasurementsPlugin/AngleMeasurement.js

@@ -60,6 +60,9 @@ class AngleMeasurement extends Component {
 
         this.approximate = cfg.approximate;
 
+        this._labelStringFormat = (angle) => {
+            return (this._approximate ? " ~ " : " = ") + angle.toFixed(2) + "°";
+        };
 
         const canvas = scene.canvas.canvas;
 
@@ -181,7 +184,7 @@ class AngleMeasurement extends Component {
             math.normalizeVec3(tmpVec3a);
             math.normalizeVec3(tmpVec3b);
             this._angle = Math.abs(math.angleVec3(tmpVec3a, tmpVec3b)) * math.RADTODEG;
-            this._angleLabel.setText((this._approximate ? " ~ " : " = ") + this._angle.toFixed(2) + "°");
+            this._angleLabel.setText(this._labelStringFormat(this._angle));
         } else {
             this._angle = undefined;
             this._angleLabel.setText("");
@@ -441,6 +444,23 @@ class AngleMeasurement extends Component {
         this._drawables.forEach(d => d.setClickable(this._clickable.get()));
     }
 
+    /**
+     * Gets the function that formats the angle label's text.
+     *
+     * By default, this function formats the angle with two decimal places.
+     */
+    get labelStringFormat() {
+        return this._labelStringFormat;
+    }
+
+    /** 
+     * Sets the function that formats the angle label's text.
+     */
+    set labelStringFormat(value) {
+        this._labelStringFormat = value;
+        this._update();
+    }
+
     /**
      * Gets if the wires, dots ad labels will fire "mouseOver" "mouseLeave" and "contextMenu" events.
      *

package/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurement.js

@@ -72,6 +72,13 @@ class DistanceMeasurement extends Component {
         this._axesBasis = math.identityMat4();
         this.approximate = cfg.approximate;
 
+        this._labelStringFormat = (len) => {
+            const metrics = this.plugin.viewer.scene.metrics;
+            const scale = metrics.scale;
+            const unit = metrics.unitsInfo[metrics.units].abbrev;
+
+            return (this.approximate ? " ~ " : " = ") + (len * scale).toFixed(2) + unit;
+        };
 
         const canvas = scene.canvas.canvas;
 
@@ -209,24 +216,24 @@ class DistanceMeasurement extends Component {
                     label.setPosOnWire(p0, p1, offsetIdx * 35, 0);
                 }
             };
-            const unitStr = len => (this._approximate ? " ~ " : " = ") + len.toFixed(2) + unit;
 
             this._xAxisWire.setEnds(p0, xEnd);
             setAxisLabelCoords(this._xAxisLabel, p0, xEnd, 1);
-            this._xAxisLabel.setText("X" + unitStr(math.distVec3(p0, xEnd) * scale));
+            this._xAxisLabel.setText("X" + this._labelStringFormat(math.distVec3(p0, xEnd)));
 
             this._yAxisWire.setEnds(xEnd, zStart);
             setAxisLabelCoords(this._yAxisLabel, xEnd, zStart, 2);
-            this._yAxisLabel.setText("Y" + unitStr(math.distVec3(xEnd, zStart) * scale));
+            this._yAxisLabel.setText("Y" + this._labelStringFormat(math.distVec3(xEnd, zStart)));
 
             this._zAxisWire.setEnds(zStart, p1);
             setAxisLabelCoords(this._zAxisLabel, zStart, p1, 3);
-            this._zAxisLabel.setText((measurementOrientationVertical ? "" : "Z") + unitStr(math.distVec3(zStart, p1) * scale));
+            this._zAxisLabel.setText((measurementOrientationVertical ? "" : "Z") + this._labelStringFormat(math.distVec3(zStart, p1)));
 
             this._lengthWire.setEnds(p0, p1);
             setAxisLabelCoords(this._lengthLabel, p0, p1, 0);
-            this._length = math.distVec3(p0, p1) * scale;
-            this._lengthLabel.setText(unitStr(this._length));
+            const length = math.distVec3(p0, p1);
+            this._length = length * scale;
+            this._lengthLabel.setText(this._labelStringFormat(length));
         };
 
         if (measurementOrientationVertical) {
@@ -679,6 +686,25 @@ class DistanceMeasurement extends Component {
         return this._clickable.get();
     }
 
+    /**
+     * Sets the function to format unit strings.
+     *
+     * @type {Function}
+     */
+    set labelStringFormat(value) {
+        this._labelStringFormat = value;
+        this._update();
+    }
+
+    /**
+     * Gets the function to format unit strings.
+     *
+     * @type {Function}
+     */
+    get labelStringFormat() {
+        return this._labelStringFormat;
+    }
+
     /**
      * @private
      */

package/src/viewer/Viewer.js

@@ -311,11 +311,55 @@ class Viewer {
      * Exit snapshot mode using {@link Viewer#endSnapshot}.
      */
     beginSnapshot() {
-        if (this._snapshotBegun) {
-            return;
+        if (! this._snapshotBegun) {
+            this.scene._renderer.snapshot.beginSnapshot();
+            this._snapshotBegun = true;
+        }
+    }
+
+    _renderSnapshotToCanvas(params) {
+        const resize = (params.width !== undefined && params.height !== undefined);
+        const canvas = this.scene.canvas.canvas;
+        const saveWidth  = canvas.clientWidth;
+        const saveHeight = canvas.clientHeight;
+        const excludeGizmos = !params.includeGizmos;
+
+        if (resize) {
+            canvas.width  = params.width  ? Math.floor(params.width)  : canvas.width;
+            canvas.height = params.height ? Math.floor(params.height) : canvas.height;
+        }
+
+        this.beginSnapshot();
+
+        if (excludeGizmos) {
+            this.sendToPlugins("snapshotStarting"); // Tells plugins to hide things that shouldn't be in snapshot
+        }
+
+        const snapshotCanvas = this.scene._renderer.snapshot.renderSnapshotToCanvas();
+
+        if (resize) {
+            canvas.width = saveWidth;
+            canvas.height = saveHeight;
+            this.scene.glRedraw();
         }
-        this.scene._renderer.beginSnapshot();
-        this._snapshotBegun = true;
+
+        return {
+            canvas:    snapshotCanvas,
+            toDataURL: () => {
+                if (excludeGizmos) {
+                    this.sendToPlugins("snapshotFinished");
+                }
+
+                this.endSnapshot();
+
+                let format = params.format || "png";
+                if (format !== "jpeg" && format !== "png" && format !== "bmp") {
+                    console.error("Unsupported image format: '" + format + "' - supported types are 'jpeg', 'bmp' and 'png' - defaulting to 'png'");
+                    format = "png";
+                }
+                return snapshotCanvas.toDataURL(`image/${format}`);
+            }
+        };
     }
 
     /**
@@ -338,54 +382,9 @@ class Viewer {
      * @returns {String} String-encoded image data URI.
      */
     getSnapshot(params = {}) {
-
-        const needFinishSnapshot = (!this._snapshotBegun);
-        const resize = (params.width !== undefined && params.height !== undefined);
-        const canvas = this.scene.canvas.canvas;
-        const saveWidth = canvas.clientWidth;
-        const saveHeight = canvas.clientHeight;
-        const width = params.width ? Math.floor(params.width) : canvas.width;
-        const height = params.height ? Math.floor(params.height) : canvas.height;
-
-        if (resize) {
-            canvas.width = width;
-            canvas.height = height;
-        }
-
-        if (!this._snapshotBegun) {
-            this.beginSnapshot({
-                width,
-                height
-            });
-        }
-
-        if (!params.includeGizmos) {
-            this.sendToPlugins("snapshotStarting"); // Tells plugins to hide things that shouldn't be in snapshot
-        }
-
         // firing "rendering" is necessary to trigger DTX{Lines,Triangles}Layer::_uploadDeferredFlags
         this.scene.fire("rendering", { }, true);
-
-        this.scene._renderer.renderSnapshot();
-
-        const imageDataURI = this.scene._renderer.readSnapshot(params);
-
-        if (resize) {
-            canvas.width = saveWidth;
-            canvas.height = saveHeight;
-
-            this.scene.glRedraw();
-        }
-
-        if (!params.includeGizmos) {
-            this.sendToPlugins("snapshotFinished");
-        }
-
-        if (needFinishSnapshot) {
-            this.endSnapshot();
-        }
-
-        return imageDataURI;
+        return this._renderSnapshotToCanvas(params).toDataURL();
     }
 
     /**
@@ -428,36 +427,7 @@ class Viewer {
         // right amount of pixels, for a sharper image.
 
 
-        const needFinishSnapshot = (!this._snapshotBegun);
-        const resize = (params.width !== undefined && params.height !== undefined);
-        const canvas = this.scene.canvas.canvas;
-        const saveWidth = canvas.clientWidth;
-        const saveHeight = canvas.clientHeight;
-        const snapshotWidth = params.width ? Math.floor(params.width) : canvas.width;
-        const snapshotHeight = params.height ? Math.floor(params.height) : canvas.height;
-
-        if (resize) {
-            canvas.width = snapshotWidth;
-            canvas.height = snapshotHeight;
-        }
-
-        if (!this._snapshotBegun) {
-            this.beginSnapshot();
-        }
-
-        if (!params.includeGizmos) {
-            this.sendToPlugins("snapshotStarting"); // Tells plugins to hide things that shouldn't be in snapshot
-        }
-
-        this.scene._renderer.renderSnapshot();
-
-        const snapshotCanvas = this.scene._renderer.readSnapshotAsCanvas();
-
-        if (resize) {
-            canvas.width = saveWidth;
-            canvas.height = saveHeight;
-            this.scene.glRedraw();
-        }
+        const snapshotResult = this._renderSnapshotToCanvas(params);
 
         const pluginToCapture = {};
         const pluginContainerElements = [];
@@ -481,6 +451,7 @@ class Viewer {
         document.head.appendChild(style);
         style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');
 
+        const snapshotCanvas = snapshotResult.canvas;
         for (let i = 0, len = pluginContainerElements.length; i < len; i++) {
             const containerElement = pluginContainerElements[i];
             await html2canvas(containerElement, {
@@ -496,24 +467,7 @@ class Viewer {
 
         style.remove();
 
-        if (!params.includeGizmos) {
-            this.sendToPlugins("snapshotFinished");
-        }
-        if (needFinishSnapshot) {
-            this.endSnapshot();
-        }
-        let format = params.format || "png";
-        if (format !== "jpeg" && format !== "png" && format !== "bmp") {
-            console.error("Unsupported image format: '" + format + "' - supported types are 'jpeg', 'bmp' and 'png' - defaulting to 'png'");
-            format = "png";
-        }
-        if (!params.includeGizmos) {
-            this.sendToPlugins("snapshotFinished");
-        }
-        if (needFinishSnapshot) {
-            this.endSnapshot();
-        }
-        return snapshotCanvas.toDataURL(`image/${format}`);
+        return snapshotResult.toDataURL();
     }
 
     /**
@@ -523,12 +477,10 @@ class Viewer {
      *
      */
     endSnapshot() {
-        if (!this._snapshotBegun) {
-            return;
+        if (this._snapshotBegun) {
+            this.scene._renderer.snapshot.endSnapshot();
+            this._snapshotBegun = false;
         }
-        this.scene._renderer.endSnapshot();
-        this.scene._renderer.render({force: true});
-        this._snapshotBegun = false;
     }
 
     /** Destroys this Viewer.

package/src/viewer/scene/canvas/Canvas.js

@@ -118,38 +118,8 @@ class Canvas extends Component {
 
         this._initWebGL(cfg);
 
-        // Bind context loss and recovery handlers
-
         const self = this;
 
-        this.canvas.addEventListener("webglcontextlost", this._webglcontextlostListener = function (event) {
-                console.time("webglcontextrestored");
-                self.scene._webglContextLost();
-                /**
-                 * Fired whenever the WebGL context has been lost
-                 * @event webglcontextlost
-                 */
-                self.fire("webglcontextlost");
-                event.preventDefault();
-            },
-            false);
-
-        this.canvas.addEventListener("webglcontextrestored", this._webglcontextrestoredListener = function (event) {
-                self._initWebGL();
-                if (self.gl) {
-                    self.scene._webglContextRestored(self.gl);
-                    /**
-                     * Fired whenever the WebGL context has been restored again after having previously being lost
-                     * @event webglContextRestored
-                     * @param value The WebGL context object
-                     */
-                    self.fire("webglcontextrestored", self.gl);
-                    event.preventDefault();
-                }
-                console.timeEnd("webglcontextrestored");
-            },
-            false);
-
         // Attach to resize events on the canvas
         let dirtyBoundary = true; // make sure we publish the 1st boundary event
 
@@ -448,12 +418,9 @@ class Canvas extends Component {
      *
      * ````JavaScript
      *
-     * // Ignore transparent pixels (default is false)
-     * var opaqueOnly = true;
-     *
      * var colors = new Float32Array(8);
      *
-     * viewer.scene.canvas.readPixels([ 100, 22, 12, 33 ], colors, 2, opaqueOnly);
+     * viewer.scene.canvas.readPixels([ 100, 22, 12, 33 ], colors, 2);
      * ````
      *
      * Then the r,g,b components of the colors will be set to the colors at those pixels.
@@ -461,10 +428,9 @@ class Canvas extends Component {
      * @param {Number[]} pixels
      * @param {Number[]} colors
      * @param {Number} size
-     * @param {Boolean} opaqueOnly
      */
-    readPixels(pixels, colors, size, opaqueOnly) {
-        return this.scene._renderer.readPixels(pixels, colors, size, opaqueOnly);
+    readPixels(pixels, colors, size) {
+        return this.scene._renderer.snapshot.readPixels(pixels, colors, size);
     }
 
     /**
@@ -479,13 +445,7 @@ class Canvas extends Component {
     destroy() {
         this.scene.off(this._tick);
         this._spinner._destroy();
-        // Memory leak avoidance
-        this.canvas.removeEventListener("webglcontextlost", this._webglcontextlostListener);
-        this.canvas.removeEventListener("webglcontextrestored", this._webglcontextrestoredListener);
-        
-        // this.gl.getExtension("WEBGL_lose_context").loseContext(); // disabled because of XCD-306 and XEOK-295
         this.gl = null;
-        
         super.destroy();
     }
 }

package/src/viewer/scene/geometry/ReadableGeometry.js

@@ -224,12 +224,6 @@ class ReadableGeometry extends Geometry {
 
         memoryStats.meshes++;
 
-        this._buildVBOs();
-    }
-
-    _buildVBOs() {
-        const state = this._state;
-        const gl = this.scene.canvas.gl;
         if (state.indices) {
             state.indicesBuf = new ArrayBuf(gl, gl.ELEMENT_ARRAY_BUFFER, state.indices, state.indices.length, 1, gl.STATIC_DRAW);
             memoryStats.indices += state.indicesBuf.numItems;
@@ -338,25 +332,6 @@ class ReadableGeometry extends Geometry {
         // memoryStats.colors += this._pickVertexColorsBuf.numItems;
     }
 
-    _webglContextLost() {
-        if (this._sceneVertexBufs) {
-            this._sceneVertexBufs.webglContextLost();
-        }
-    }
-
-    _webglContextRestored() {
-        if (this._sceneVertexBufs) {
-            this._sceneVertexBufs.webglContextRestored();
-        }
-        this._buildVBOs();
-        this._edgeIndicesBuf = null;
-        this._pickVertexPositionsBuf = null;
-        this._pickTrianglePositionsBuf = null;
-        this._pickTriangleColorsBuf = null;
-        this._pickVertexPositionsBuf = null;
-        this._pickVertexColorsBuf = null;
-    }
-
     /**
      * Gets the Geometry's primitive type.
 

package/src/viewer/scene/lights/CubeTexture.js

@@ -89,19 +89,6 @@ class CubeTexture extends Component {
         return value;
     }
 
-    _webglContextRestored() {
-        const gl = this.scene.canvas.gl;
-        this._state.texture = null;
-        // if (this._images.length > 0) {
-        //     this._state.texture = new xeokit.renderer.Texture2D(gl, gl.TEXTURE_CUBE_MAP);
-        //     this._state.texture.setImage(this._images, this._state);
-        //     this._state.texture.setProps(this._state);
-        // } else
-        if (this._src) {
-            this._loadSrc(this._src);
-        }
-    }
-
     _loadSrc(src) {
         const self = this;
         const gl = this.scene.canvas.gl;

package/src/viewer/scene/lights/DirLight.js

@@ -177,7 +177,8 @@ class DirLight extends Light {
 
             getShadowRenderBuf: () => {
                 if (!this._shadowRenderBuf) {
-                    this._shadowRenderBuf = new RenderBuffer(this.scene.canvas.canvas, this.scene.canvas.gl, {size: [1024, 1024]}); // Super old mobile devices have a limit of 1024x1024 textures
+                    this._shadowRenderBuf = new RenderBuffer(this.scene.canvas.gl); // Super old mobile devices have a limit of 1024x1024 textures
+                    this._shadowRenderBuf.setSize([1024, 1024]);
                 }
                 return this._shadowRenderBuf;
             }

package/src/viewer/scene/lights/PointLight.js

@@ -181,7 +181,8 @@ class PointLight extends Light {
 
             getShadowRenderBuf: () => {
                 if (!self._shadowRenderBuf) {
-                    self._shadowRenderBuf = new RenderBuffer(self.scene.canvas.canvas, self.scene.canvas.gl, {size: [1024, 1024]}); // Super old mobile devices have a limit of 1024x1024 textures
+                    self._shadowRenderBuf = new RenderBuffer(self.scene.canvas.gl); // Super old mobile devices have a limit of 1024x1024 textures
+                    self._shadowRenderBuf.setSize([1024, 1024]);
                 }
                 return self._shadowRenderBuf;
             }

package/src/viewer/scene/materials/Texture.js

@@ -212,15 +212,6 @@ class Texture extends Component {
         return value;
     }
 
-    _webglContextRestored() {
-        this._state.texture = new Texture2D({gl: this.scene.canvas.gl});
-        if (this._image) {
-            this.image = this._image;
-        } else if (this._src) {
-            this.src = this._src;
-        }
-    }
-
     _update() {
         const state = this._state;
         if (this._matrixDirty) {

package/src/viewer/scene/math/rtcCoords.js

@@ -1,7 +1,6 @@
 import {math} from './math.js';
 
 const tempVec3a = math.vec3();
-const tempVec4  = math.vec4();
 
 /**
  * Given a view matrix and a relative-to-center (RTC) coordinate origin, returns a view matrix
@@ -104,40 +103,4 @@ function worldToRTCPositions(worldPositions, rtcPositions, rtcCenter, cellSize =
     return rtcNeeded;
 }
 
-/**
- * Converts an RTC 3D position to World-space.
- *
- * @private
- * @param {Float64Array} rtcCenter Double-precision relative-to-center (RTC) center pos.
- * @param {Float32Array} rtcPos Single-precision offset fom that center.
- * @param {Float64Array} worldPos The World-space position.
- */
-function rtcToWorldPos(rtcCenter, rtcPos, worldPos) {
-    worldPos[0] = rtcCenter[0] + rtcPos[0];
-    worldPos[1] = rtcCenter[1] + rtcPos[1];
-    worldPos[2] = rtcCenter[2] + rtcPos[2];
-    return worldPos;
-}
-
-/**
- * Given a 3D plane defined by distance from origin and direction, and an RTC center position,
- * return a plane position that is relative to the RTC center.
- *
- * @private
- * @param dist
- * @param dir
- * @param rtcCenter
- * @param rtcPlanePos
- * @returns {*}
- */
-function getPlaneRTCPos(dist, dir, rtcOrigin, rtcPlanePos, originMatrix) {
-    const rtcCenter = (originMatrix
-                       ? (tempVec4.set(rtcOrigin, 0), tempVec4[3] = 1, math.mulMat4v4(originMatrix, tempVec4, tempVec4))
-                       : rtcOrigin);
-    const rtcCenterToPlaneDist = math.dotVec3(dir, rtcCenter) + dist;
-    const dirNormalized = math.normalizeVec3(dir, tempVec3a);
-    math.mulVec3Scalar(dirNormalized, -rtcCenterToPlaneDist, rtcPlanePos);
-    return rtcPlanePos;
-}
-
-export {createRTCViewMat, worldToRTCPos, worldToRTCPositions, rtcToWorldPos, getPlaneRTCPos};
+export {createRTCViewMat, worldToRTCPos, worldToRTCPositions};