@xeokit/xeokit-sdk 2.6.86-beta.0 → 2.6.87-renderers-refactor-v3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.86-beta.0",
+  "version": "2.6.87-renderers-refactor-v3",
   "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",
@@ -52,6 +52,7 @@
   },
   "homepage": "https://xeokit.io",
   "dependencies": {
+    "@creooxag/cxconverter": "^0.0.3-alpha",
     "@loaders.gl/core": "^4.3.3",
     "@loaders.gl/gltf": "^4.3.3",
     "@loaders.gl/las": "^4.3.3",

package/src/plugins/CxConverterIFCLoaderPlugin/CxConverterIFCLoaderPlugin.js

@@ -0,0 +1,86 @@
+import { Plugin } from "../../viewer/Plugin.js";
+import { GLTFLoaderPlugin } from "../GLTFLoaderPlugin/GLTFLoaderPlugin.js";
+import { ifc2gltf } from "@creooxag/cxconverter";
+
+/**
+ * Fetches a file from the given URL and returns its contents as text.
+ *
+ * @param {string} url - The URL to fetch the file from.
+ * @returns {Promise<string>} A promise that resolves to the file contents.
+ * @private
+ */
+async function fetchFile(url) {
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        return response.text();
+    } catch (error) {
+        console.error('Error fetching file:', error);
+    }
+}
+
+/**
+ * {@link Viewer} plugin that uses [CxConverter](https://github.com/Creoox/cxconverter) to load BIM models directly from IFC files, using its WebAssembly buid from [npm package](https://www.npmjs.com/package/@creooxag/cxconverter).
+ *
+ * ## Overview
+ * The WebAssembly build of CxConverter is still in alfa stage, so it may not work as expected. This documentation will be updated as the library and the plugin evolve. The example below shows how to use the plugin:
+ * ````javascript
+ * import { CxConverterIFCLoaderPlugin, Viewer } from "../../dist/xeokit-sdk.es.js";
+ * const cxConverterIFCLoaderPlugin = new CxConverterIFCLoaderPlugin(viewer);
+ * 
+ * const sceneModel = await cxConverterIFCLoaderPlugin.load({
+ *        src: "../../assets/models/ifc/Duplex.ifc"
+ * }); 
+ * ````
+    See the code in action [here](https://xeokit.github.io/xeokit-sdk/examples/buildings/#cxConverterIFC_vbo_Duplex).
+ */
+
+class CxConverterIFCLoaderPlugin extends Plugin {
+    /**
+     * @constructor
+     * @param {Viewer} viewer The Viewer.
+     * @param {Object} [cfg={}] Plugin configuration.
+     */
+    constructor(viewer, cfg = {}) {
+        super("ifcLoader", viewer, cfg);
+
+        /**
+         * The GLTFLoaderPlugin used internally to load the converted GLTF.
+         * @type {GLTFLoaderPlugin}
+         */
+        this.gltfLoader = new GLTFLoaderPlugin(this.viewer);
+    }
+
+    /**
+     * Loads an IFC model from the given source.
+     *
+     * @param {Object} [params={}] Loading parameters.
+     * @param {string} params.src Path to an IFC file.
+     * @param {Function} [params.progressCallback] Callback to track loading progress.
+     * @param {Function} [params.progressTextCallback] Callback to track loading progress with text updates.
+     * @returns {Promise<SceneModel>} A promise that resolves to the loaded SceneModel.
+     */
+    async load(params = {}) {
+        if (!params.src) {
+            this.error("load() param expected: src");
+        }
+        const data = await fetchFile(params.src);
+        const { gltf, metaData } = await ifc2gltf(
+            data,
+            {
+                remote: true,
+                progressCallback: params.progressCallback,
+                progressTextCallback: params.progressTextCallback
+            }
+        );
+        const sceneModel = this.gltfLoader.load({
+            id: "myModel",
+            gltf: gltf,
+            metaModelJSON: metaData
+        });
+        return sceneModel;
+    }
+}
+export { CxConverterIFCLoaderPlugin };

package/src/plugins/CxConverterIFCLoaderPlugin/index.js

@@ -0,0 +1 @@
+export * from "./CxConverterIFCLoaderPlugin.js";

package/src/plugins/index.js

@@ -17,6 +17,7 @@ export * from "./ViewCullPlugin/index.js";
 export * from "./XKTLoaderPlugin/index.js";
 export * from "./XML3DLoaderPlugin/index.js";
 export * from "./WebIFCLoaderPlugin/index.js";
+export * from "./CxConverterIFCLoaderPlugin/index.js";
 export * from "./LASLoaderPlugin/index.js";
 export * from "./CityJSONLoaderPlugin/index.js";
 export * from "./DotBIMLoaderPlugin/index.js";

package/src/plugins/lib/html/MenuEvent.js

@@ -67,7 +67,7 @@ export function addContextMenuListener(elem, callback, failCallback = () => {})
         event.stopPropagation();
     };
     
-    if (os.isIphoneSafari()) {
+    if (os.isIphoneOrIpadSafari()) {
         elem.addEventListener('touchstart', touchStartHandler);
         elem.addEventListener('touchmove', touchMoveHandler);
         elem.addEventListener('touchend', touchEndHandler);
@@ -77,7 +77,7 @@ export function addContextMenuListener(elem, callback, failCallback = () => {})
     }
 
     return function removeContextMenuListener() {
-        if (os.isIphoneSafari()) {
+        if (os.isIphoneOrIpadSafari()) {
             elem.removeEventListener('touchstart', touchStartHandler);
             elem.removeEventListener('touchmove', touchMoveHandler);
             elem.removeEventListener('touchend', touchEndHandler);

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/CameraControl/lib/handlers/TouchPickHandler.js

@@ -92,12 +92,13 @@ class TouchPickHandler {
                 const rightClickPageY = touches[0].pageY;
 
                 states.longTouchTimeout = setTimeout(() => {
-                    controllers.cameraControl.fire("rightClick", { // For context menus
-                        pagePos: [Math.round(rightClickPageX), Math.round(rightClickPageY)],
-                        canvasPos: [Math.round(rightClickClientX), Math.round(rightClickClientY)],
-                        event: e
-                    }, true);
-
+                    if (configs.active && configs.pointerEnabled) {
+                        controllers.cameraControl.fire("rightClick", { // For context menus
+                            pagePos: [Math.round(rightClickPageX), Math.round(rightClickPageY)],
+                            canvasPos: [Math.round(rightClickClientX), Math.round(rightClickClientY)],
+                            event: e
+                        }, true);
+                    }
                     states.longTouchTimeout = null;
                 }, configs.longTapTimeout);
 

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