@xeokit/xeokit-sdk 2.6.17 → 2.6.20

package/src/plugins/index.js

@@ -19,4 +19,5 @@ export * from "./XML3DLoaderPlugin/index.js";
 export * from "./WebIFCLoaderPlugin/index.js";
 export * from "./LASLoaderPlugin/index.js";
 export * from "./CityJSONLoaderPlugin/index.js";
-export * from "./DotBIMLoaderPlugin/index.js";
+export * from "./DotBIMLoaderPlugin/index.js";
+export * from "./ZonesPlugin/index.js";

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

@@ -135,7 +135,25 @@ class Dot {
             }
             
         }
-        
+
+        if (cfg.onTouchstart) {
+            dotClickable.addEventListener('touchstart', (event) => {
+                cfg.onTouchstart(event, this);
+            });
+        }
+
+        if (cfg.onTouchmove) {
+            dotClickable.addEventListener('touchmove', (event) => {
+                cfg.onTouchmove(event, this);
+            });
+        }
+
+        if (cfg.onTouchend) {
+            dotClickable.addEventListener('touchend', (event) => {
+                cfg.onTouchend(event, this);
+            });
+        }
+
         this.setPos(cfg.x || 0, cfg.y || 0);
         this.setFillColor(cfg.fillColor);
         this.setBorderColor(cfg.borderColor);

package/src/viewer/Viewer.js

@@ -3,7 +3,7 @@ import {CameraFlightAnimation} from "./scene/camera/CameraFlightAnimation.js";
 import {CameraControl} from "./scene/CameraControl/CameraControl.js";
 import {MetaScene} from "./metadata/MetaScene.js";
 import {LocaleService} from "./localization/LocaleService.js";
-import html2canvas from '../../node_modules/html2canvas/dist/html2canvas.esm.js';
+import html2canvas from 'html2canvas/dist/html2canvas.esm.js';
 
 /**
  * The 3D Viewer at the heart of the xeokit SDK.
@@ -57,6 +57,7 @@ class Viewer {
      * store geometry on the GPU for triangle meshes that don't have textures. This gives a much lower memory footprint for these types of model element. This mode may not perform well on low-end GPUs that are optimized
      * to use textures to hold geometry data. Works great on most medium/high-end GPUs found in desktop computers, including the nVIDIA and Intel HD chipsets. Set this false to use the default vertex buffer object (VBO)
      * mode for storing geometry, which is the standard technique used in most graphics engines, and will work adequately on most low-end GPUs.
+     * @param {Number} [cfg.markerZOffset=-0.001] The Z value of offset for Marker's OcclusionTester. The closest the value is to 0.000 the more precise OcclusionTester will be, but at the same time the less precise it will behave for Markers that are located exactly on the Surface.
      * @param {number} [cfg.numCachedSectionPlanes=0] Enhances the efficiency of SectionPlane creation by proactively allocating Viewer resources for a specified quantity
      * of SectionPlanes. Introducing this parameter streamlines the initial creation speed of SectionPlanes, particularly up to the designated quantity. This parameter internally
      * configures renderer logic for the specified number of SectionPlanes, eliminating the need for setting up logic with each SectionPlane creation and thereby enhancing
@@ -120,6 +121,7 @@ class Viewer {
             pbrEnabled: (!!cfg.pbrEnabled),
             colorTextureEnabled: (cfg.colorTextureEnabled !== false),
             dtxEnabled: (!!cfg.dtxEnabled),
+            markerZOffset: cfg.markerZOffset,
             numCachedSectionPlanes: cfg.numCachedSectionPlanes
         });
 

package/src/viewer/scene/CameraControl/lib/handlers/MousePickHandler.js

@@ -55,6 +55,15 @@ class MousePickHandler {
                     return;
                 }
 
+                if (cameraControl.hasSubs("rayMove"))
+                {
+                    const origin = math.vec3();
+                    const direction = math.vec3();
+                    // The origin from math.canvasPosToWorldRay is incorrect for a perspective camera, should be the same as scene.camera.eye
+                    math.canvasPosToWorldRay(scene.canvas.canvas, scene.camera.viewMatrix, scene.camera.projMatrix, states.pointerCanvasPos, origin, direction);
+                    cameraControl.fire("rayMove", { canvasPos: states.pointerCanvasPos, ray: { origin: origin, direction: direction, canvasPos: states.pointerCanvasPos } }, true);
+                }
+
                 const hoverSubs = cameraControl.hasSubs("hover");
                 const hoverEnterSubs = cameraControl.hasSubs("hoverEnter");
                 const hoverOutSubs = cameraControl.hasSubs("hoverOut");

package/src/viewer/scene/geometry/builders/buildLineGeometry.js

@@ -0,0 +1,267 @@
+import {utils} from '../../utils.js';
+
+/**
+ * @desc Creates a 3D line {@link Geometry}.
+ *
+ * ## Usage
+ *
+ * In the example below we'll create a {@link Mesh} with a line {@link ReadableGeometry}.
+ *
+ * [[Run this example](https://xeokit.github.io/xeokit-sdk/examples/scenegraph/#buildLineGeometry)]
+ *
+ * ````javascript
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Import the modules we need for this example
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * import {buildLineGeometry, Viewer, Mesh, ReadableGeometry, PhongMaterial} from "../../dist/xeokit-sdk.min.es.js";
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a Viewer and arrange the camera
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas"
+ * });
+ *
+ * viewer.camera.eye = [0, 0, 8];
+ * viewer.camera.look = [0, 0, 0];
+ * viewer.camera.up = [0, 1, 0];
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [-5,-2,0],
+ *         endPoint: [-5,2,0],
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 1,]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape with black color
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [-4,-2,0],
+ *         endPoint: [-4,2,0],
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 0]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape with black color and simple pattern
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [-3,-2,0],
+ *         endPoint: [-3,2,0],
+ *         pattern: [0.10],
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 0]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape with blue color and simple pattern extended to end
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [-2,-2,0],
+ *         endPoint: [-2,2,0],
+ *         pattern: [0.10],
+ *         extendToEnd: true,
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 1]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape with black color and more complex pattern
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [-1,-2,0],
+ *         endPoint: [-1,2,0],
+ *         pattern: [0.15, 0.05],
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 0]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape with blue color and more complex pattern extended to end
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [0,-2,0],
+ *         endPoint: [0,2,0],
+ *         pattern: [0.15, 0.05],
+ *         extendToEnd: true,
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 1]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape with black color and complex pattern
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [1,-2,0],
+ *         endPoint: [1,2,0],
+ *         pattern: [0.15, 0.05, 0.50],
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 0]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape with blue color and complex pattern extended to end
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [2,-2,0],
+ *         endPoint: [2,2,0],
+ *         pattern: [0.15, 0.05, 0.50],
+ *         extendToEnd: true,
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 1]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 3d line shape with white color and simple pattern
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [3,-2,-1],
+ *         endPoint: [5,2,1],
+ *         pattern: [0.10],
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [1, 1, 1]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 3d line shape with black color and simple dot pattern
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [5,-2,-1],
+ *         endPoint: [7,2,1],
+ *         pattern: [0.03],
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 0]
+ *     })
+ * });
+ * ````
+ *
+ * @function buildLineGeometry
+ * @param {*} [cfg] Configs
+ * @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+ * @param {Number[]} [cfg.startPoint]  3D start point (x0, y0, z0).
+ * @param {Number[]} [cfg.endPoint]  3D end point (x1, y1, z1).
+ * @param {Number[]} [cfg.pattern] Lengths of segments that describe a pattern.
+ * @param {Bool} [cfg.extendToEnd] If true: it will try to make sure the line doesn't end up with a gap, as it will
+ * extend the last segment.
+ * @returns {Object} Configuration for a {@link Geometry} subtype.
+ */
+function buildLineGeometry(cfg = {}) {
+
+    if (cfg.startPoint.length !== 3) {
+        throw "Start point should contain 3 elements in array: x, y and z";
+    }
+    if (cfg.endPoint.length !== 3) {
+        throw "End point should contain 3 elements in array: x, y and z";
+    }
+    let indices = [];
+    let points = [];
+    let x0 = cfg.startPoint[0]; let y0 = cfg.startPoint[1]; let z0 = cfg.startPoint[2];
+    let x1 = cfg.endPoint[0]; let y1 = cfg.endPoint[1]; let z1 = cfg.endPoint[2];
+    let lineLength = Math.sqrt((x1- x0)**2 + (y1 - y0)**2 + (z1 - z0)**2);
+    let normalizedDirectionVectorOfLine = [(x1-x0)/lineLength, (y1-y0)/lineLength, (z1-z0)/lineLength];
+
+    if (!cfg.pattern) {
+        indices.push(0);
+        indices.push(1);
+        points.push(x0, y0, z0, x1, y1, z1);
+    }
+    else {
+        let patternsNumber = cfg.pattern.length;
+        let gap = false;
+        let segmentFilled = 0.0;
+        let idOfCurrentPatternLength = 0;
+        let pointIndicesCounter = 0;
+        let currentStartPoint = [x0, y0, z0];
+        let currentPatternLength = cfg.pattern[idOfCurrentPatternLength];
+        points.push(currentStartPoint[0], currentStartPoint[1], currentStartPoint[2]);
+
+        while (currentPatternLength <= (lineLength - segmentFilled)) {
+            let vectorFromCurrentStartPointToCurrentEndPoint = [
+                normalizedDirectionVectorOfLine[0] * currentPatternLength,
+                normalizedDirectionVectorOfLine[1] * currentPatternLength,
+                normalizedDirectionVectorOfLine[2] * currentPatternLength,
+            ];
+            let currentEndPoint = [
+                currentStartPoint[0] + vectorFromCurrentStartPointToCurrentEndPoint[0],
+                currentStartPoint[1] + vectorFromCurrentStartPointToCurrentEndPoint[1],
+                currentStartPoint[2] + vectorFromCurrentStartPointToCurrentEndPoint[2],
+            ];
+
+            points.push(currentEndPoint[0], currentEndPoint[1], currentEndPoint[2]);
+
+            if (!gap) {
+                indices.push(pointIndicesCounter);
+                indices.push(pointIndicesCounter + 1);
+            }
+            gap = !gap;
+
+            pointIndicesCounter += 1;
+            currentStartPoint = currentEndPoint;
+            idOfCurrentPatternLength += 1;
+            if (idOfCurrentPatternLength >= patternsNumber) {
+                idOfCurrentPatternLength = 0;
+            }
+            segmentFilled += currentPatternLength;
+            currentPatternLength = cfg.pattern[idOfCurrentPatternLength];
+        }
+
+        if (cfg.extendToEnd) {
+            points.push(x1, y1, z1);
+            indices.push(indices.length - 2);
+            indices.push(indices.length - 1);
+        }
+    }
+
+    return utils.apply(cfg, {
+        primitive: "lines",
+        positions: points,
+        indices: indices,
+    });
+}
+
+export {buildLineGeometry};

package/src/viewer/scene/input/Input.js

@@ -1190,6 +1190,14 @@ class Input extends Component {
             }
         });
 
+        this.element.addEventListener("contextmenu", this._contextmenuListener = (e) => {
+            if (!this.enabled) {
+                return;
+            }
+            this._getMouseCanvasPos(e);
+            this.fire("contextmenu", this.mouseCanvasPos, true);
+        });
+
         const tickifiedMouseWheelFn = this.scene.tickify(
             (delta) => { this.fire("mousewheel", delta, true); }
         );
@@ -1223,6 +1231,24 @@ class Input extends Component {
             });
         }
 
+        this.element.addEventListener("touchstart", this._touchstartListener = (e) => {
+            if (!this.enabled) {
+                return;
+            }
+            [...e.changedTouches].forEach(e => {
+                this.fire("touchstart", [ e.identifier, this._getTouchCanvasPos(e) ], true);
+            });
+        });
+
+        this.element.addEventListener("touchend", this._touchendListener = (e) => {
+            if (!this.enabled) {
+                return;
+            }
+            [...e.changedTouches].forEach(e => {
+                this.fire("touchend", [ e.identifier, this._getTouchCanvasPos(e) ], true);
+            });
+        });
+
         this._eventsBound = true;
     }
 
@@ -1239,7 +1265,10 @@ class Input extends Component {
         document.removeEventListener("click", this._clickListener);
         document.removeEventListener("dblclick", this._dblClickListener);
         this.element.removeEventListener("mousemove", this._mouseMoveListener);
+        this.element.removeEventListener("contextmenu", this._contextmenuListener);
         this.element.removeEventListener("wheel", this._mouseWheelListener);
+        this.element.removeEventListener("touchstart", this._touchstartListener);
+        this.element.removeEventListener("touchend", this._touchendListener);
         if (window.OrientationChangeEvent) {
             window.removeEventListener('orientationchange', this._orientationchangedListener);
         }
@@ -1252,6 +1281,18 @@ class Input extends Component {
         this._eventsBound = false;
     }
 
+    _getTouchCanvasPos(event) {
+        let element = event.target;
+        let totalOffsetLeft = 0;
+        let totalOffsetTop = 0;
+        while (element.offsetParent) {
+            totalOffsetLeft += element.offsetLeft;
+            totalOffsetTop += element.offsetTop;
+            element = element.offsetParent;
+        }
+        return [ event.pageX - totalOffsetLeft, event.pageY - totalOffsetTop ];
+    }
+
     _getMouseCanvasPos(event) {
         if (!event) {
             event = window.event;

package/src/viewer/scene/marker/Marker.js

@@ -370,7 +370,7 @@ class Marker extends Component {
         this.scene.camera.off(this._onCameraProjMatrix);
         if (this._entity) {
             if (this._onEntityDestroyed !== null) {
-                this._entity.off(this._onEntityDestroyed);
+                this._entity.model.off(this._onEntityDestroyed);
             }
             if (this._onEntityModelDestroyed !== null) {
                 this._entity.model.off(this._onEntityModelDestroyed);

package/src/viewer/scene/mesh/Mesh.js

@@ -216,11 +216,16 @@ class Mesh extends Component {
      * @param {EmphasisMaterial} [cfg.highlightMaterial] {@link EmphasisMaterial} to define the xrayed appearance for this Mesh. Inherits {@link Scene#highlightMaterial} by default.
      * @param {EmphasisMaterial} [cfg.selectedMaterial] {@link EmphasisMaterial} to define the selected appearance for this Mesh. Inherits {@link Scene#selectedMaterial} by default.
      * @param {EmphasisMaterial} [cfg.edgeMaterial] {@link EdgeMaterial} to define the appearance of enhanced edges for this Mesh. Inherits {@link Scene#edgeMaterial} by default.
+     * @param {Number} [cfg.renderOrder=0] Specifies the rendering order for this mESH. This is used to control the order in which
+     * mESHES are drawn when they have transparent objects, to give control over the order in which those objects are blended within the transparent
+     * render pass.
      */
     constructor(owner, cfg = {}) {
 
         super(owner, cfg);
 
+        this.renderOrder = cfg.renderOrder || 0;
+
         /**
          * ID of the corresponding object within the originating system, if any.
          *

package/src/viewer/scene/model/SceneModel.js

@@ -1123,11 +1123,16 @@ export class SceneModel extends Component {
      * represent the returned model. Set false to always use vertex buffer objects (VBOs). Note that DTX is only applicable
      * to non-textured triangle meshes, and that VBOs are always used for meshes that have textures, line segments, or point
      * primitives. Only works while {@link DTX#enabled} is also ````true````.
+     * @param {Number} [cfg.renderOrder=0] Specifies the rendering order for this SceneModel. This is used to control the order in which
+     * SceneModels are drawn when they have transparent objects, to give control over the order in which those objects are blended within the transparent
+     * render pass.
      */
     constructor(owner, cfg = {}) {
 
         super(owner, cfg);
 
+        this.renderOrder = cfg.renderOrder || 0;
+
         this._dtxEnabled = this.scene.dtxEnabled && (cfg.dtxEnabled !== false);
 
         this._enableVertexWelding = false; // Not needed for most objects, and very expensive, so disabled
@@ -3194,6 +3199,7 @@ export class SceneModel extends Component {
     _getVBOBatchingLayer(cfg) {
         const model = this;
         const origin = cfg.origin;
+        const renderLayer = cfg.renderLayer || 0;
         const positionsDecodeHash = cfg.positionsDecodeMatrix || cfg.positionsDecodeBoundary ?
             this._createHashStringFromMatrix(cfg.positionsDecodeMatrix || cfg.positionsDecodeBoundary)
             : "-";
@@ -3680,7 +3686,7 @@ export class SceneModel extends Component {
     // -------------- RENDERING ---------------------------------------------------------------------------------------
 
     /** @private */
-    drawColorOpaque(frameCtx) {
+    drawColorOpaque(frameCtx, layerList) {
         const renderFlags = this.renderFlags;
         for (let i = 0, len = renderFlags.visibleLayers.length; i < len; i++) {
             const layerIndex = renderFlags.visibleLayers[i];

package/src/viewer/scene/scene/Scene.js

@@ -864,6 +864,7 @@ class Scene extends Component {
         this._pbrEnabled = !!cfg.pbrEnabled;
         this._colorTextureEnabled = (cfg.colorTextureEnabled !== false);
         this._dtxEnabled = !!cfg.dtxEnabled;
+        this._markerZOffset = cfg.markerZOffset;
 
         // Register Scene on xeokit
         // Do this BEFORE we add components below
@@ -1427,6 +1428,22 @@ class Scene extends Component {
         return this._colorTextureEnabled;
     }
 
+    /**
+     * Gets the Z value of offset for Marker's OcclusionTester.
+     * The closest the value is to 0.000 the more precise OcclusionTester will be, but at the same time the less
+     * precise it will behave for Markers that are located exactly on the Surface.
+     *
+     * Default is ````-0.001````.
+     *
+     * @returns {Number} Z offset for Marker
+     */
+    get markerZOffset() {
+        if (this._markerZOffset == null) {
+            return -0.001;
+        }
+        return this._markerZOffset;
+    }
+
     /**
      * Performs an occlusion test on all {@link Marker}s in this {@link Scene}.
      *
@@ -2272,11 +2289,9 @@ class Scene extends Component {
      * @param {Number[]} [params.origin] World-space ray origin when ray-picking. Ignored when canvasPos given.
      * @param {Number[]} [params.direction] World-space ray direction when ray-picking. Also indicates the length of the ray. Ignored when canvasPos given.
      * @param {Number[]} [params.matrix] 4x4 transformation matrix to define the World-space ray origin and direction, as an alternative to ````origin```` and ````direction````.
-     * @param {String[]} [params.includeEntities] IDs of {@link Entity}s to restrict picking to. When given, ignores {@link Entity}s whose IDs are not in this list.
-     * @param {String[]} [params.excludeEntities] IDs of {@link Entity}s to ignore. When given, will pick *through* these {@link Entity}s, as if they were not there.
-     * @param {Number} [params.snapRadius=30] The snap radius, in canvas pixels
-     * @param {boolean} [params.snapToVertex=true] Whether to snap to vertex.
-     * @param {boolean} [params.snapToEdge=true] Whether to snap to edge.
+     * @param {Number} [params.snapRadius=30] The snap radius, in canvas pixels.
+     * @param {boolean} [params.snapToVertex=true] Whether to snap to vertex. Only works when `canvasPos` given.
+     * @param {boolean} [params.snapToEdge=true] Whether to snap to edge. Only works when `canvasPos` given.
      * @param {PickResult} [pickResult] Holds the results of the pick attempt. Will use the Scene's singleton PickResult if you don't supply your own.
      * @returns {PickResult} Holds results of the pick attempt, returned when an {@link Entity} is picked, else null. See method comments for description.
      */
@@ -2287,6 +2302,11 @@ class Scene extends Component {
             return null;
         }
 
+        if ((params.snapToVertex || params.snapToEdge) && !params.canvasPos) {
+            this.error("Scene.snapPick() `canvasPos` parameter expected for `snapToVertex:true` or `snapToEdge:true`");
+            return;
+        }
+
         params = params || {};
 
         params.pickSurface = params.pickSurface || params.rayPick; // Backwards compatibility
@@ -2334,7 +2354,7 @@ class Scene extends Component {
 
     /**
      * @param {Object} params Picking parameters.
-     * @param {Number[]} [params.canvasPos] Canvas-space coordinates. When ray-picking, this will override the **origin** and ** direction** parameters and will cause the ray to be fired through the canvas at this position, directly along the negative View-space Z-axis.
+     * @param {Number[]} params.canvasPos Canvas-space coordinates.
      * @param {Number} [params.snapRadius=30] The snap radius, in canvas pixels
      * @param {boolean} [params.snapToVertex=true] Whether to snap to vertex.
      * @param {boolean} [params.snapToEdge=true] Whether to snap to edge.
@@ -2345,6 +2365,10 @@ class Scene extends Component {
             this._warnSnapPickDeprecated = true;
             this.warn("Scene.snapPick() is deprecated since v2.4.2 - use Scene.pick() instead")
         }
+        if (!params.canvasPos) {
+            this.error("Scene.snapPick() canvasPos parameter expected");
+            return;
+        }
         return this._renderer.snapPick(
             params.canvasPos,
             params.snapRadius || 30,

package/src/viewer/scene/sectionPlane/SectionPlane.js

@@ -96,6 +96,7 @@ class SectionPlane extends Component {
         this._state.active = value !== false;
         this.glRedraw();
         this.fire("active", this._state.active);
+        this.scene.fire("sectionPlaneUpdated", this);
     }
 
     /**
@@ -176,13 +177,8 @@ class SectionPlane extends Component {
      * Inverts the direction of {@link SectionPlane#dir}.
      */
     flipDir() {
-        const dir = this._state.dir;
-        dir[0] *= -1.0;
-        dir[1] *= -1.0;
-        dir[2] *= -1.0;
-        this._state.dist = (-math.dotVec3(this._state.pos, this._state.dir));
-        this.fire("dir", this._state.dir);
-        this.glRedraw();
+        math.mulVec3Scalar(this._state.dir, -1.0, this._state.dir);
+        this.dir = this._state.dir;
     }
 
     /**

package/src/viewer/scene/webgl/Renderer.js

@@ -970,7 +970,7 @@ const Renderer = function (scene, options) {
                     math.cross3Vec3(worldRayDir, randomVec3, up);
 
                     pickViewMatrix = math.lookAtMat4v(worldRayOrigin, look, up, tempMat4b);
-                //    pickProjMatrix = scene.camera.projMatrix;
+                    //    pickProjMatrix = scene.camera.projMatrix;
                     pickProjMatrix = scene.camera.ortho.matrix;
 
                     pickResult.origin = worldRayOrigin;

package/src/viewer/scene/webgl/occlusion/OcclusionLayer.js

@@ -126,7 +126,7 @@ class OcclusionLayer {
     _buildVBOs() {
         if (this.positionsBuf) {
             if (this.lenPositionsBuf === this.positions.length) { // Just updating buffer elements, don't need to reallocate
-                this.positionsBuf.setData(this.positions); // Indices don't need updating
+                this.positionsBuf.setData(new Float32Array(this.positions)); // Indices don't need updating
                 return;
             }
             this.positionsBuf.destroy();

package/src/viewer/scene/webgl/occlusion/OcclusionTester.js

@@ -7,7 +7,6 @@ import {WEBGL_INFO} from "../../webglInfo.js";
 const TEST_MODE = false;
 const MARKER_COLOR = math.vec3([1.0, 0.0, 0.0]);
 const POINT_SIZE = 20;
-const MARKER_SPRITE_CLIPZ_OFFSET = -0.001; // Amount that we offset sprite clip Z coords to raise them from surfaces
 
 const tempVec3a = math.vec3();
 
@@ -88,7 +87,7 @@ class OcclusionTester {
             let newOcclusionLayer = this._occlusionLayers[originHash];
             if (!newOcclusionLayer) {
                 newOcclusionLayer = new OcclusionLayer(this._scene, marker.origin);
-                this._occlusionLayers[originHash] = occlusionLayer;
+                this._occlusionLayers[originHash] = newOcclusionLayer;
                 this._occlusionLayersListDirty = true;
             }
             newOcclusionLayer.addMarker(marker);
@@ -218,7 +217,9 @@ class OcclusionTester {
         if (scene.logarithmicDepthBufferEnabled) {
            src.push("vFragDepth = 1.0 + clipPos.w;");
         } else {
-            src.push("clipPos.z += " + MARKER_SPRITE_CLIPZ_OFFSET + ";");
+            if (scene.markerZOffset < 0.000) {
+                src.push("clipPos.z += " + scene.markerZOffset + ";");
+            }
         }
         src.push("   gl_Position = clipPos;");
         src.push("}");
@@ -332,7 +333,10 @@ class OcclusionTester {
                 continue;
             }
 
-            const origin = occlusionLayer.origin;
+            // The `origin` has been changed from `occlusionLayer.origin` to `[ 0, 0, 0 ]`
+            // because OcclusionLayer markers' transformation is being applied through the
+            // OcclusionLayer::positions array. See XEOK-33
+            const origin = [ 0, 0, 0 ];
 
             gl.uniformMatrix4fv(this._uViewMatrix, false, createRTCViewMat(camera.viewMatrix, origin));
 

package/types/viewer/Viewer.d.ts

@@ -63,6 +63,8 @@ export declare type ViewerConfiguration = {
   localeService?: LocaleService;
   /** Whether to enable data texture-based (DTX) scene representation within the Viewer. */
   dtxEnabled?: boolean;
+  /** The Z value of offset for Marker's OcclusionTester. The closest the value is to 0.000 the more precise OcclusionTester will be, but at the same time the less precise it will behave for Markers that are located exactly on the Surface. */
+  markerZOffset?: number;
   /** Enhances the efficiency of SectionPlane creation by proactively allocating Viewer resources for a specified quantity of SectionPlanes.*/
   numCachedSectionPlanes?: number;
 };