@xeokit/xeokit-sdk 2.6.91-renderers-refactor-v9 → 2.6.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.91-renderers-refactor-v9",
+  "version": "2.6.92",
   "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,55 +311,11 @@ class Viewer {
      * Exit snapshot mode using {@link Viewer#endSnapshot}.
      */
     beginSnapshot() {
-        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();
+        if (this._snapshotBegun) {
+            return;
         }
-
-        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}`);
-            }
-        };
+        this.scene._renderer.beginSnapshot();
+        this._snapshotBegun = true;
     }
 
     /**
@@ -382,9 +338,54 @@ 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);
-        return this._renderSnapshotToCanvas(params).toDataURL();
+
+        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;
     }
 
     /**
@@ -427,7 +428,36 @@ class Viewer {
         // right amount of pixels, for a sharper image.
 
 
-        const snapshotResult = this._renderSnapshotToCanvas(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 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 pluginToCapture = {};
         const pluginContainerElements = [];
@@ -451,7 +481,6 @@ 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, {
@@ -467,7 +496,24 @@ class Viewer {
 
         style.remove();
 
-        return snapshotResult.toDataURL();
+        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}`);
     }
 
     /**
@@ -477,10 +523,12 @@ class Viewer {
      *
      */
     endSnapshot() {
-        if (this._snapshotBegun) {
-            this.scene._renderer.snapshot.endSnapshot();
-            this._snapshotBegun = false;
+        if (!this._snapshotBegun) {
+            return;
         }
+        this.scene._renderer.endSnapshot();
+        this.scene._renderer.render({force: true});
+        this._snapshotBegun = false;
     }
 
     /** Destroys this Viewer.

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

@@ -118,8 +118,38 @@ 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
 
@@ -418,9 +448,12 @@ 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);
+     * viewer.scene.canvas.readPixels([ 100, 22, 12, 33 ], colors, 2, opaqueOnly);
      * ````
      *
      * Then the r,g,b components of the colors will be set to the colors at those pixels.
@@ -428,9 +461,10 @@ class Canvas extends Component {
      * @param {Number[]} pixels
      * @param {Number[]} colors
      * @param {Number} size
+     * @param {Boolean} opaqueOnly
      */
-    readPixels(pixels, colors, size) {
-        return this.scene._renderer.snapshot.readPixels(pixels, colors, size);
+    readPixels(pixels, colors, size, opaqueOnly) {
+        return this.scene._renderer.readPixels(pixels, colors, size, opaqueOnly);
     }
 
     /**
@@ -445,7 +479,13 @@ 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,6 +224,12 @@ 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;
@@ -332,6 +338,25 @@ 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,6 +89,19 @@ 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,8 +177,7 @@ class DirLight extends Light {
 
             getShadowRenderBuf: () => {
                 if (!this._shadowRenderBuf) {
-                    this._shadowRenderBuf = new RenderBuffer(this.scene.canvas.gl); // Super old mobile devices have a limit of 1024x1024 textures
-                    this._shadowRenderBuf.setSize([1024, 1024]);
+                    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
                 }
                 return this._shadowRenderBuf;
             }

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

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

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

@@ -212,6 +212,15 @@ 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,6 +1,7 @@
 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
@@ -103,4 +104,40 @@ function worldToRTCPositions(worldPositions, rtcPositions, rtcCenter, cellSize =
     return rtcNeeded;
 }
 
-export {createRTCViewMat, worldToRTCPos, worldToRTCPositions};
+/**
+ * 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};