@xeokit/xeokit-sdk 2.6.65 → 2.6.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.65",
+  "version": "2.6.66",
   "description": "Web Programming Toolkit for 3D/2D BIM and AEC Graphics",
   "module": "./dist/xeokit-sdk.es.js",
   "main": "./dist/xeokit-sdk.cjs.js",

package/src/extras/PointerCircle/PointerCircle.js

@@ -87,7 +87,7 @@ export class PointerCircle {
     }
 
     /**
-     * Stop the shricking circle and hide it.
+     * Stop the shrinking circle and hide it.
      */
     stop() {
         if (this._destroyed) {

package/src/plugins/SectionPlanesPlugin/Control.js

@@ -132,15 +132,13 @@ class Control {
         });
 
         const handlers = { };
-        const addAxis = (rgb, axisDirection, hoopDirection) => {
+        const addAxis = (rgb, hoopRot) => {
+            const axisDirection = math.mulVec3Scalar(rgb, -1, math.vec3());
             const material = colorMaterial(rgb);
 
-            const rotateToHorizontal = math.rotationMat4v(270 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
-            const hoopRotation = math.quaternionToRotationMat4(math.vec3PairToQuaternion([ 0, 1, 0 ], hoopDirection), math.identityMat4());
-            const hoopMatrix = math.mulMat4(hoopRotation, rotateToHorizontal, math.identityMat4());
-
+            const hoopMatrix = math.quaternionToRotationMat4(hoopRot, math.identityMat4());
+            math.mulMat4(math.rotationMat4v(Math.PI, [0,1,0], math.mat4()), hoopMatrix, hoopMatrix);
             const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
-
             const scaledArrowMatrix = (t, matR) => {
                 const matT = math.translateMat4v(t, math.identityMat4());
                 const ret = math.identityMat4();
@@ -209,7 +207,8 @@ class Control {
             }), NO_STATE_INHERIT);
 
 
-            const axisRotation = math.quaternionToRotationMat4(math.vec3PairToQuaternion([ 0, 1, 0 ], axisDirection), math.identityMat4());
+            const axisRotation = math.quaternionToRotationMat4(math.vec3PairToQuaternion([ 0, 1, 0 ], rgb), math.identityMat4());
+            math.mulMat4(math.rotationMat4v(Math.PI, [0,1,0], math.mat4()), axisRotation, axisRotation);
 
             const translatedAxisMatrix = (yOffset) => math.mulMat4(axisRotation, math.translateMat4c(0, yOffset, 0, math.identityMat4()), math.identityMat4());
             const arrowMatrix = translatedAxisMatrix(arrowLength + .1);
@@ -338,7 +337,7 @@ class Control {
                         rootNode.rotate(rgb, (rotation - lastRotation) * 180 / Math.PI);
                         if (this._sectionPlane) {
                             ignoreNextSectionPlaneDirUpdate = true;
-                            this._sectionPlane.dir = math.vec3ApplyQuaternion(rootNode.quaternion, [0, 0, 1], tempVec3);
+                            this._sectionPlane.quaternion = rootNode.quaternion;
                         }
                         lastRotation = rotation;
                     };
@@ -452,9 +451,9 @@ class Control {
             //
             //----------------------------------------------------------------------------------------------------------
 
-            addAxis([1,0,0], [ 1,  0,  0 ], [ 1, 0,  0 ]),
-            addAxis([0,1,0], [ 0, -1,  0 ], [ 0, 1,  0 ]),
-            addAxis([0,0,1], [ 0,  0, -1 ], [ 0, 0, -1 ])
+            addAxis([1,0,0], math.vec3PairToQuaternion([1,0,0], [0,0,1])),
+            addAxis([0,1,0], math.eulerToQuaternion([90,0,0], "XYZ")),
+            addAxis([0,0,1], math.identityQuaternion())
         ];
 
         const cleanups = [ ];
@@ -592,7 +591,7 @@ class Control {
             this.id = sectionPlane.id;
             this._sectionPlane = sectionPlane;
             const setPosFromSectionPlane = () => setPos(sectionPlane.pos);
-            const setDirFromSectionPlane = () => rootNode.quaternion = math.vec3PairToQuaternion(zeroVec, sectionPlane.dir, quat);
+            const setDirFromSectionPlane = () => rootNode.quaternion = sectionPlane.quaternion;
             setPosFromSectionPlane();
             setDirFromSectionPlane();
             const onSectionPlanePos = sectionPlane.on("pos", setPosFromSectionPlane);

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

@@ -1563,6 +1563,7 @@ export class SceneModel extends Component {
     set matrix(value) {
         this._matrix.set(value || DEFAULT_MATRIX);
         math.decomposeMat4(this._matrix, this._position, this._quaternion, this._scale);
+        math.quaternionToEuler(this._quaternion, "XYZ", this._rotation);
         this._matrixDirty = false;
         this._setWorldMatrixDirty();
         this._sceneModelDirty();

package/src/viewer/scene/model/vbo/batching/triangles/renderers/TrianglesColorRenderer.js

@@ -221,7 +221,10 @@ export class TrianglesColorRenderer extends TrianglesBatchingRenderer {
         }
 
         if (scene.logarithmicDepthBufferEnabled) {
-            src.push("    gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;");
+            src.push("    float dx = dFdx(vFragDepth);")
+            src.push("    float dy = dFdy(vFragDepth);")
+            src.push("    float diff = sqrt(dx*dx+dy*dy);");
+            src.push("    gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth + diff ) * logDepthBufFC * 0.5;");
         }
 
         if (this._withSAO) {

package/src/viewer/scene/model/vbo/instancing/triangles/renderers/TrianglesColorRenderer.js

@@ -234,7 +234,10 @@ class TrianglesColorRenderer extends TrianglesInstancingRenderer {
         }
 
         if (scene.logarithmicDepthBufferEnabled) {
-            src.push("    gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;");
+            src.push("    float dx = dFdx(vFragDepth);")
+            src.push("    float dy = dFdy(vFragDepth);")
+            src.push("    float diff = sqrt(dx*dx+dy*dy);");
+            src.push("    gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth + diff ) * logDepthBufFC * 0.5;");
         }
 
         // Doing SAO blend in the main solid fill draw shader just so that edge lines can be drawn over the top

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

@@ -3,6 +3,11 @@ import {RenderState} from '../webgl/RenderState.js';
 import {math} from "../math/math.js";
 
 const tempVec3a = math.vec3();
+const tempVec3b = math.vec3();
+const tempVec4a = math.vec4();
+const front = math.vec3([0,  0, -1]);
+const back  = math.vec3([0,  0,  1]);
+const up    = math.vec3([0,  1,  0]);
 
 /**
  *  @desc An arbitrarily-aligned World-space clipping plane.
@@ -74,6 +79,8 @@ class SectionPlane extends Component {
         this._state = new RenderState({
             active: true,
             pos: math.vec3(),
+            quaternion: math.vec4(),
+            roll: 0,
             dir: math.vec3(),
             dist: 0
         });
@@ -135,6 +142,59 @@ class SectionPlane extends Component {
         return this._state.pos;
     }
 
+    /**
+     * Sets the quaternion of this SectionPlane's plane.
+     *
+     * Default value is ````[0, -1, 0, 0]````.
+     *
+     * @param {Number[]} value New quaternion.
+     */
+    set quaternion(value) {
+        this._state.quaternion.set(value || [0, 0, 0, -1]);
+        math.vec3ApplyQuaternion(this._state.quaternion, back, this._state.dir);
+        const quatUp = math.vec3ApplyQuaternion(this._state.quaternion, up, tempVec3a);
+        const dirOnlyQ = math.vec3PairToQuaternion(back, this._state.dir, tempVec4a);
+        const dirOnlyUp = math.vec3ApplyQuaternion(dirOnlyQ, up, tempVec3b);
+        const angle = Math.acos(Math.min(1, math.dotVec3(quatUp, dirOnlyUp)));
+        const sign = Math.sign(math.dotVec3(this._state.dir, math.cross3Vec3(quatUp, dirOnlyUp, tempVec3b)));
+        this._state.roll = sign * angle;
+        this._onDirUpdated();
+    }
+
+    /**
+     * Gets the quaternion of this SectionPlane's plane.
+     *
+     * Default value is ````[0, -1, 0, 0]````.
+     *
+     * @returns {Number[]} value Current quaternion.
+     */
+    get quaternion() {
+        return this._state.quaternion;
+    }
+
+    /**
+     * Sets the roll of this SectionPlane's plane.
+     *
+     * Default value is ````0````.
+     *
+     * @param {Number[]} value New roll.
+     */
+    set roll(value) {
+        this._state.roll = value || 0;
+        this._onDirRollUpdated();
+    }
+
+    /**
+     * Gets the roll of this SectionPlane's plane.
+     *
+     * Default value is ````0````.
+     *
+     * @returns {Number[]} value Current roll.
+     */
+    get roll() {
+        return this._state.roll;
+    }
+
     /**
      * Sets the direction of this SectionPlane's plane.
      *
@@ -143,7 +203,25 @@ class SectionPlane extends Component {
      * @param {Number[]} value New direction.
      */
     set dir(value) {
-        this._state.dir.set(value || [0, 0, -1]);
+        this._state.dir.set(value || front);
+        this._onDirRollUpdated();
+    }
+
+    _onDirRollUpdated() {
+        math.vec3PairToQuaternion(back, this._state.dir, this._state.quaternion);
+
+        tempVec4a[0] = 0;
+        tempVec4a[1] = 0;
+        tempVec4a[2] = -1;
+        tempVec4a[3] = this._state.roll;
+        math.angleAxisToQuaternion(tempVec4a, tempVec4a);
+
+        math.mulQuaternions(this._state.quaternion, tempVec4a, this._state.quaternion);
+
+        this._onDirUpdated();
+    }
+
+    _onDirUpdated() {
         this._state.dist = (-math.dotVec3(this._state.pos, this._state.dir));
         this.glRedraw();
         this.fire("dir", this._state.dir);

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

@@ -935,6 +935,9 @@ const Renderer = function (scene, options) {
                 pickProjMatrix = scene.camera.projMatrix;
                 projection     = scene.camera.projection;
 
+                nearAndFar[0] = scene.camera.project.near;
+                nearAndFar[1] = scene.camera.project.far;
+
                 pickResult.canvasPos = params.canvasPos;
 
             } else {
@@ -948,6 +951,9 @@ const Renderer = function (scene, options) {
                     pickProjMatrix = scene.camera.projMatrix;
                     projection     = scene.camera.projection;
 
+                    nearAndFar[0] = scene.camera.project.near;
+                    nearAndFar[1] = scene.camera.project.far;
+
                 } else {
 
                     worldRayOrigin.set(params.origin || [0, 0, 0]);
@@ -967,6 +973,9 @@ const Renderer = function (scene, options) {
                     pickProjMatrix = scene.camera.ortho.matrix;
                     projection     = "ortho";
 
+                    nearAndFar[0] = scene.camera.ortho.near;
+                    nearAndFar[1] = scene.camera.ortho.far;
+
                     pickResult.origin = worldRayOrigin;
                     pickResult.direction = worldRayDir;
                 }
@@ -1021,9 +1030,6 @@ const Renderer = function (scene, options) {
 
                     if (pickable.canPickWorldPos && pickable.canPickWorldPos()) {
 
-                        nearAndFar[0] = scene.camera.project.near;
-                        nearAndFar[1] = scene.camera.project.far;
-
                         gpuPickWorldPos(pickBuffer, pickable, canvasPos, pickViewMatrix, pickProjMatrix, nearAndFar, pickResult);
 
                         if (params.pickSurfaceNormal !== false) {

package/types/extras/PointerCircle/PointerCircle.d.ts

@@ -0,0 +1,50 @@
+import {Viewer} from "../../viewer";
+
+/**
+ * A PointerCircle shows a circle, centered at the position of the
+ * mouse or touch pointer.
+ */
+export class PointerCircle {
+    /**
+     * Constructs a new PointerCircle.
+     * @param {Viewer} viewer The Viewer
+     * @param {Object} [cfg] PointerCircle configuration.
+     * @param {boolean} [cfg.active=true] Whether PointerCircle is active. The PointerCircle can only be shown when this is `true` (default).
+     */
+    constructor(viewer: Viewer, cfg?: {
+        active?: boolean;
+    });
+
+    /**
+     * Show the circle at the given canvas coordinates and begin shrinking it.
+     */
+    start(circlePos: number[]): void;
+
+    /**
+     * Stop the shrinking circle and hide it.
+     */
+    stop(): void;
+
+    /**
+     * Sets the zoom factor for the lens.
+     *
+     * This is `2` by default.
+     *
+     * @param {number} durationMs
+     */
+    set durationMs(durationMs: number);
+
+    /**
+     * Gets the zoom factor for the lens.
+     *
+     * This is `2` by default.
+     *
+     * @returns {number} Number
+     */
+    get durationMs(): number;
+
+    /**
+     * Destroys this PointerCircle.
+     */
+    destroy(): void;
+}

package/types/extras/PointerCircle/index.d.ts

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

package/types/plugins/index.d.ts

@@ -19,6 +19,7 @@ export * from "./ViewCullPlugin";
 export * from "./XKTLoaderPlugin";
 export * from "./WebIFCLoaderPlugin";
 export * from "./XML3DLoaderPlugin";
+export * from "./lib/ui";
 
 export declare type ModelStats = {
   sourceFormat: string;

package/types/plugins/lib/ui/index.d.ts

@@ -0,0 +1,12 @@
+import { Viewer } from "../../../viewer";
+import { PointerCircle } from "../../../extras/PointerCircle";
+
+type Cleanup = () => void;
+
+type OnCancel = () => void;
+type OnChange = () => void;
+type OnCommit = () => void;
+
+type Ray2WorldPos = (origin: number[], direction: number[]) => boolean | number[];
+
+declare function touchPointSelector(viewer: Viewer, pointerCircle: PointerCircle, ray2WorldPos: Ray2WorldPos): (onCancel: OnCancel, onChange: OnChange, onCommit: OnCommit) => Cleanup;