@xeokit/xeokit-sdk 2.6.83 → 2.6.85-renderers-refactor-v1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.83",
+  "version": "2.6.85-renderers-refactor-v1",
   "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/extras/ContextMenu/ContextMenu.js

@@ -949,8 +949,13 @@ class ContextMenu {
         const menuWidth = menuElement.offsetWidth;
 
         const offsetRect = this._offsetParent.getBoundingClientRect();
-        
-        const bottomContainerBorder = offsetRect.bottom + window.scrollY;
+
+        // A regression occurred, that positions the menu horizontally above the client viewport
+        // at 6188de17ddca5c069b75a7673c1cda1aa1e74d07 when window.innerHeight has been replaced by offsetRect.bottom
+        // Reported originally at XCD-332
+        // Reproducible with examples/measurement/distance_createWithMouse_snapping.html
+        // Dirty hack introduced as XEOK-306, to be improved in the future to a more general solution
+        const bottomContainerBorder = ((this._offsetParent === window.document.body) && (offsetRect.bottom === 0)) ? window.innerHeight : (offsetRect.bottom + window.scrollY);
         const rightContainerBorder = offsetRect.right + window.scrollX;
         if ((pageY + menuHeight) > bottomContainerBorder) {
             pageY = bottomContainerBorder- menuHeight;

package/src/plugins/lib/ui/index.js

@@ -243,6 +243,8 @@ export class Dot3D extends Marker {
         const onProjMatrix = camera.on("projMatrix", updateDotPos);
         const onCanvasBnd  = scene.canvas.on("boundary", updateDotPos);
         const planesUpdate = scene.on("sectionPlaneUpdated", updateDotPos);
+        const planeCreated = scene.on("sectionPlaneCreated", updateDotPos);
+        const planeDestroyed = scene.on("sectionPlaneDestroyed", updateDotPos);
 
         this._updatePosition = updateDotPos;
 
@@ -251,6 +253,8 @@ export class Dot3D extends Marker {
             camera.off(onProjMatrix);
             scene.canvas.off(onCanvasBnd);
             scene.off(planesUpdate);
+            scene.off(planeCreated);
+            scene.off(planeDestroyed);
             this._dot.destroy();
         };
     }
@@ -360,12 +364,16 @@ export class Label3D {
         const onProjMatrix = camera.on("projMatrix", this._updatePositions);
         const onCanvasBnd  = scene.canvas.on("boundary", this._updatePositions);
         const planesUpdate = scene.on("sectionPlaneUpdated", this._updatePositions);
+        const planeCreated = scene.on("sectionPlaneCreated", this._updatePositions);
+        const planeDestroyed = scene.on("sectionPlaneDestroyed", this._updatePositions);
 
         this._cleanup = () => {
             camera.off(onViewMatrix);
             camera.off(onProjMatrix);
             scene.canvas.off(onCanvasBnd);
             scene.off(planesUpdate);
+            scene.off(planeCreated);
+            scene.off(planeDestroyed);
             this._label.destroy();
         };
     }
@@ -444,12 +452,16 @@ export class Wire3D {
         const onProjMatrix = camera.on("projMatrix", this._updatePositions);
         const onCanvasBnd  = scene.canvas.on("boundary", this._updatePositions);
         const planesUpdate = scene.on("sectionPlaneUpdated", this._updatePositions);
+        const planeCreated = scene.on("sectionPlaneCreated", this._updatePositions);
+        const planeDestroyed = scene.on("sectionPlaneDestroyed", this._updatePositions);
 
         this._cleanup = () => {
             camera.off(onViewMatrix);
             camera.off(onProjMatrix);
             scene.canvas.off(onCanvasBnd);
             scene.off(planesUpdate);
+            scene.off(planeCreated);
+            scene.off(planeDestroyed);
             this._wire.destroy();
         };
     }

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};