@xeokit/xeokit-sdk 2.6.96 → 2.6.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.96",
+  "version": "2.6.98",
   "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/viewer/scene/Component.js

@@ -909,6 +909,7 @@ class Component {
         this._eventCallDepth = 0;
         this._ownedComponents = null;
         this._updateScheduled = false;
+        this._renderer = null;
     }
 }
 

package/src/viewer/scene/math/math.js

@@ -2115,9 +2115,9 @@ const math = {
 
             const sy = math.lenVec3(vec);
 
-            vec[8] = mat[8];
-            vec[9] = mat[9];
-            vec[10] = mat[10];
+            vec[0] = mat[8];
+            vec[1] = mat[9];
+            vec[2] = mat[10];
 
             const sz = math.lenVec3(vec);
 

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

@@ -3337,34 +3337,37 @@ export class SceneModel extends Component {
     /**
      * @private
      */
-    _withEachVisibleLayer(testNumVisibleLayerPortions, cb) {
+    _withEachVisibleLayer(frameCtx, testNumVisibleLayerPortions, cb) {
         if (testNumVisibleLayerPortions && (this.numVisibleLayerPortions === 0)) {
             return;
         }
+        const testLayerCull = frameCtx.testAABB;
         const renderFlags = this.renderFlags;
         for (let i = 0, len = renderFlags.visibleLayers.length; i < len; i++) {
-            const layerIndex = renderFlags.visibleLayers[i];
-            cb(this.layerList[layerIndex]);
-        }
-    }
-
-    drawColorOpaque          (frameCtx) { this._withEachVisibleLayer(false, layer => layer.drawColorOpaque          (this.renderFlags, frameCtx)); }
-    drawColorTransparent     (frameCtx) { this._withEachVisibleLayer(false, layer => layer.drawColorTransparent     (this.renderFlags, frameCtx)); }
-    drawDepth                (frameCtx) { this._withEachVisibleLayer(false, layer => layer.drawDepth                (this.renderFlags, frameCtx)); } // Dedicated to SAO because it skips transparent objects
-    drawSilhouetteXRayed     (frameCtx) { this._withEachVisibleLayer(false, layer => layer.drawSilhouetteXRayed     (this.renderFlags, frameCtx)); }
-    drawSilhouetteHighlighted(frameCtx) { this._withEachVisibleLayer(false, layer => layer.drawSilhouetteHighlighted(this.renderFlags, frameCtx)); }
-    drawSilhouetteSelected   (frameCtx) { this._withEachVisibleLayer(false, layer => layer.drawSilhouetteSelected   (this.renderFlags, frameCtx)); }
-    drawEdgesColorOpaque     (frameCtx) { this._withEachVisibleLayer(false, layer => layer.drawEdgesColorOpaque     (this.renderFlags, frameCtx)); }
-    drawEdgesColorTransparent(frameCtx) { this._withEachVisibleLayer(false, layer => layer.drawEdgesColorTransparent(this.renderFlags, frameCtx)); }
-    drawEdgesXRayed          (frameCtx) { this._withEachVisibleLayer(false, layer => layer.drawEdgesXRayed          (this.renderFlags, frameCtx)); }
-    drawEdgesHighlighted     (frameCtx) { this._withEachVisibleLayer(false, layer => layer.drawEdgesHighlighted     (this.renderFlags, frameCtx)); }
-    drawEdgesSelected        (frameCtx) { this._withEachVisibleLayer(false, layer => layer.drawEdgesSelected        (this.renderFlags, frameCtx)); }
-    drawOcclusion            (frameCtx) { this._withEachVisibleLayer(true,  layer => layer.drawOcclusion            (this.renderFlags, frameCtx)); }
-    drawShadow               (frameCtx) { this._withEachVisibleLayer(true,  layer => layer.drawShadow               (this.renderFlags, frameCtx)); }
-    drawPickMesh             (frameCtx) { this._withEachVisibleLayer(true,  layer => layer.drawPickMesh             (this.renderFlags, frameCtx)); }
-    drawPickDepths           (frameCtx) { this._withEachVisibleLayer(true,  layer => layer.drawPickDepths           (this.renderFlags, frameCtx)); }
-    drawPickNormals          (frameCtx) { this._withEachVisibleLayer(true,  layer => layer.drawPickNormals          (this.renderFlags, frameCtx)); }
-    _drawSnap    (frameCtx, isSnapInit) { this._withEachVisibleLayer(true,  layer => layer.drawSnap                 (this.renderFlags, frameCtx, isSnapInit)); }
+            const layer = this.layerList[renderFlags.visibleLayers[i]];
+            if ((! testLayerCull) || testLayerCull(layer.getAABB())) {
+                cb(layer);
+            }
+        }
+    }
+
+    drawColorOpaque          (frameCtx) { this._withEachVisibleLayer(frameCtx, false, layer => layer.drawColorOpaque          (this.renderFlags, frameCtx)); }
+    drawColorTransparent     (frameCtx) { this._withEachVisibleLayer(frameCtx, false, layer => layer.drawColorTransparent     (this.renderFlags, frameCtx)); }
+    drawDepth                (frameCtx) { this._withEachVisibleLayer(frameCtx, false, layer => layer.drawDepth                (this.renderFlags, frameCtx)); } // Dedicated to SAO because it skips transparent objects
+    drawSilhouetteXRayed     (frameCtx) { this._withEachVisibleLayer(frameCtx, false, layer => layer.drawSilhouetteXRayed     (this.renderFlags, frameCtx)); }
+    drawSilhouetteHighlighted(frameCtx) { this._withEachVisibleLayer(frameCtx, false, layer => layer.drawSilhouetteHighlighted(this.renderFlags, frameCtx)); }
+    drawSilhouetteSelected   (frameCtx) { this._withEachVisibleLayer(frameCtx, false, layer => layer.drawSilhouetteSelected   (this.renderFlags, frameCtx)); }
+    drawEdgesColorOpaque     (frameCtx) { this._withEachVisibleLayer(frameCtx, false, layer => layer.drawEdgesColorOpaque     (this.renderFlags, frameCtx)); }
+    drawEdgesColorTransparent(frameCtx) { this._withEachVisibleLayer(frameCtx, false, layer => layer.drawEdgesColorTransparent(this.renderFlags, frameCtx)); }
+    drawEdgesXRayed          (frameCtx) { this._withEachVisibleLayer(frameCtx, false, layer => layer.drawEdgesXRayed          (this.renderFlags, frameCtx)); }
+    drawEdgesHighlighted     (frameCtx) { this._withEachVisibleLayer(frameCtx, false, layer => layer.drawEdgesHighlighted     (this.renderFlags, frameCtx)); }
+    drawEdgesSelected        (frameCtx) { this._withEachVisibleLayer(frameCtx, false, layer => layer.drawEdgesSelected        (this.renderFlags, frameCtx)); }
+    drawOcclusion            (frameCtx) { this._withEachVisibleLayer(frameCtx, true,  layer => layer.drawOcclusion            (this.renderFlags, frameCtx)); }
+    drawShadow               (frameCtx) { this._withEachVisibleLayer(frameCtx, true,  layer => layer.drawShadow               (this.renderFlags, frameCtx)); }
+    drawPickMesh             (frameCtx) { this._withEachVisibleLayer(frameCtx, true,  layer => layer.drawPickMesh             (this.renderFlags, frameCtx)); }
+    drawPickDepths           (frameCtx) { this._withEachVisibleLayer(frameCtx, true,  layer => layer.drawPickDepths           (this.renderFlags, frameCtx)); }
+    drawPickNormals          (frameCtx) { this._withEachVisibleLayer(frameCtx, true,  layer => layer.drawPickNormals          (this.renderFlags, frameCtx)); }
+    _drawSnap    (frameCtx, isSnapInit) { this._withEachVisibleLayer(frameCtx, true,  layer => layer.drawSnap                 (this.renderFlags, frameCtx, isSnapInit)); }
 
     drawSnapInit(frameCtx) { this._drawSnap(frameCtx, true ); }
     drawSnap    (frameCtx) { this._drawSnap(frameCtx, false); }

package/src/viewer/scene/model/layer/Layer.js

@@ -502,6 +502,15 @@ export class Layer {
 
     aabbChanged() { this._aabbDirty = true; }
 
+    getAABB() {
+        if (this._aabbDirty) { // Per-layer AABB for best RTC accuracy
+            math.collapseAABB3(this._aabb);
+            this._meshes.forEach(m => math.expandAABB3(this._aabb, m.aabb));
+            this._aabbDirty = false;
+        }
+        return this._aabb;
+    }
+
     __drawLayer(renderFlags, frameCtx, renderer, pass) {
         if ((this._countsByFlag[ENTITY_FLAGS.CULLED].count < this._portions.length) && (this._countsByFlag[ENTITY_FLAGS.VISIBLE].count > 0)) {
             const backfacePasses = (this.primitive !== "points") && (this.primitive !== "lines") && [
@@ -671,13 +680,7 @@ export class Layer {
     drawSnap(renderFlags, frameCtx, isSnapInit) {
         frameCtx.snapPickOrigin = [0, 0, 0];
 
-        if (this._aabbDirty) { // Per-layer AABB for best RTC accuracy
-            math.collapseAABB3(this._aabb);
-            this._meshes.forEach(m => math.expandAABB3(this._aabb, m.aabb));
-            this._aabbDirty = false;
-        }
-
-        const aabb = this._aabb;
+        const aabb = this.getAABB();
         frameCtx.snapPickCoordinateScale = math.mulVec3Scalar(
             safeInvVec3([ aabb[3] - aabb[0], aabb[4] - aabb[1], aabb[5] - aabb[2] ]),
             math.MAX_INT);

package/src/viewer/scene/model/layer/programs/SnapProgram.js

@@ -5,7 +5,7 @@ export const SnapProgram = function(programVariables, geometry, isSnapInit, isPo
     const coordinateScaler = programVariables.createUniform("vec3", "coordinateScaler", (set, state) => set(state.legacyFrameCtx.snapPickCoordinateScale));
 
     const vWorldPosition = programVariables.createVarying("vec3", "vWorldPosition", () => `${geometry.attributes.position.world}.xyz`);
-    const vPickColor = programVariables.createVarying("vec4", "vPickColor", () => geometry.attributes.pickColor, "flat");
+    const vPickColor = programVariables.createVarying("vec4", "vPickColor", () => geometry.attributes.pickColor); // Using `flat` causes an instability - see XEOK-385 and XEOK-401
 
     const outCoords    = programVariables.createOutput("highp ivec4", "outCoords", 0);
     const outNormal    = programVariables.createOutput("highp ivec4", "outNormal", 1);

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

@@ -17,6 +17,9 @@ const vec3_0 = math.vec3([0,0,0]);
 
 const iota = (n) => { const ret = [ ]; for (let i = 0; i < n; ++i) ret.push(i); return ret; };
 
+const tempPlanes = iota(6).map(() => math.vec4());
+const tempVec4 = math.vec4();
+
 const bitShiftScreenZ = math.vec4([1.0 / (256.0 * 256.0 * 256.0 * 256.0), 1.0 / (256.0 * 256.0 * 256.0), 1.0 / (256.0 * 256.0), 1.0 / 256.0]);
 
 const pixelToInt = pix => pix[0] + (pix[1] << 8) + (pix[2] << 16) + (pix[3] << 24);
@@ -26,6 +29,66 @@ const toWorldPos    = (p, origin, scale) => math.vec3([ p[0] * scale[0] + origin
                                                         p[1] * scale[1] + origin[1],
                                                         p[2] * scale[2] + origin[2] ]);
 
+const makeFrustumAABBIntersectionTest = function(camera) {
+    const m = math.mat4();
+    math.mulMat4(camera.projMatrix, camera.viewMatrix, m);
+
+    for (let i = 0; i < 3; ++i) {
+        tempPlanes[i * 2 + 0][0] = m[ 3] + m[i];
+        tempPlanes[i * 2 + 0][1] = m[ 7] + m[i + 4];
+        tempPlanes[i * 2 + 0][2] = m[11] + m[i + 8];
+        tempPlanes[i * 2 + 0][3] = m[15] + m[i + 12];
+
+        tempPlanes[i * 2 + 1][0] = m[ 3] - m[i];
+        tempPlanes[i * 2 + 1][1] = m[ 7] - m[i + 4];
+        tempPlanes[i * 2 + 1][2] = m[11] - m[i + 8];
+        tempPlanes[i * 2 + 1][3] = m[15] - m[i + 12];
+    }
+
+    // Normalize each plane
+    tempPlanes.forEach(p => math.divVec4Scalar(p, math.lenVec3(p), p));
+
+    return aabb => tempPlanes.every(p => {
+        // Compute the positive vertex (farthest in direction of normal)
+        tempVec4[0] = aabb[(p[0] >= 0) ? 3 : 0];
+        tempVec4[1] = aabb[(p[1] >= 0) ? 4 : 1];
+        tempVec4[2] = aabb[(p[2] >= 0) ? 5 : 2];
+        tempVec4[3] = 1;
+        return math.dotVec4(p, tempVec4) >= 0;
+    });
+};
+
+const makeRayAABBIntersectionTest = (O, D) => aabb => {
+    let tmin = -Infinity;
+    let tmax = Infinity;
+
+    for (let i = 0; i < 3; i++) {
+        const origin = O[i];
+        const direction = D[i];
+        const minBound = aabb[i];
+        const maxBound = aabb[i + 3];
+
+        if (Math.abs(direction) < 1e-8) {
+            // Ray is parallel to plane
+            if ((origin < minBound) || (origin > maxBound)) {
+                return false; // No intersection
+            }
+        } else {
+            const t1 = (minBound - origin) / direction;
+            const t2 = (maxBound - origin) / direction;
+
+            tmin = Math.max(tmin, Math.min(t1, t2)); // near
+            tmax = Math.min(tmax, Math.max(t1, t2)); // far
+
+            if (tmin > tmax) {
+                return false; // No intersection
+            }
+        }
+    }
+
+    return tmax >= 0; // Check if intersection is in front of ray
+};
+
 /**
  * @private
  */
@@ -789,6 +852,8 @@ const Renderer = function (scene, options) {
             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         }
 
+        frameCtx.testAABB = makeFrustumAABBIntersectionTest(scene.camera);
+
         const renderDrawables = function(drawables) {
 
         let normalDrawSAOBinLen = 0;
@@ -1123,6 +1188,8 @@ const Renderer = function (scene, options) {
             renderDrawables(uiDrawableList);
         }
 
+        frameCtx.testAABB = null;
+
         const endTime = Date.now();
         const frameStats = stats.frame;
 
@@ -1231,11 +1298,16 @@ const Renderer = function (scene, options) {
 
                 pickResult.canvasPos = params.canvasPos;
 
+                math.canvasPosToWorldRay(canvas, pickViewMatrix, pickProjMatrix, projection, canvasPos, tempVec3a, tempVec3b);
+                frameCtx.testAABB = makeRayAABBIntersectionTest(tempVec3a, tempVec3b);
             } else {
 
                 // Picking with arbitrary World-space ray
                 // Align camera along ray and fire ray through center of canvas
 
+                canvasPos[0] = canvas.clientWidth * 0.5;
+                canvasPos[1] = canvas.clientHeight * 0.5;
+
                 if (params.matrix) {
 
                     pickViewMatrix = params.matrix;
@@ -1245,6 +1317,8 @@ const Renderer = function (scene, options) {
                     nearAndFar[0] = camera.project.near;
                     nearAndFar[1] = camera.project.far;
 
+                    math.canvasPosToWorldRay(canvas, pickViewMatrix, pickProjMatrix, projection, canvasPos, tempVec3a, tempVec3b);
+                    frameCtx.testAABB = makeRayAABBIntersectionTest(tempVec3a, tempVec3b);
                 } else {
 
                     worldRayOrigin.set(params.origin || [0, 0, 0]);
@@ -1273,10 +1347,9 @@ const Renderer = function (scene, options) {
 
                     pickResult.origin = worldRayOrigin;
                     pickResult.direction = worldRayDir;
-                }
 
-                canvasPos[0] = canvas.clientWidth * 0.5;
-                canvasPos[1] = canvas.clientHeight * 0.5;
+                    frameCtx.testAABB = makeRayAABBIntersectionTest(pickResult.origin, pickResult.direction);
+                }
             }
 
             pickBuffer.bind();
@@ -1313,6 +1386,8 @@ const Renderer = function (scene, options) {
                 renderDrawables(uiDrawableList);
             }
 
+            frameCtx.testAABB = null;
+
             const pickID = pixelToInt(pickBuffer.read(0, 0));
             const pickable = (pickID >= 0) && pickIDs.items[pickID];
 
@@ -1844,4 +1919,4 @@ const Renderer = function (scene, options) {
     };
 };
 
-export {Renderer};
+export {Renderer};