@xeokit/xeokit-sdk 2.0.0-beta.25 → 2.0.0

package/README.md

@@ -19,13 +19,14 @@ npm i @xeokit/xeokit-sdk
 
 ## Resources 
 
- * [Website](https://xeokit.io/)
- * [Features](https://xeokit.io/index.html?foo=1#features)
- * [FAQ](https://xeokit.io/index.html?foo=1#faq)  
- * [Blog](https://xeokit.io/blog.html)  
+ * [xeokit.io](https://xeokit.io/)
  * [Examples](http://xeokit.github.io/xeokit-sdk/examples/)
- * [User Guides](https://www.notion.so/xeokit/xeokit-Documentation-4598591fcedb4889bf8896750651f74e)
+ * [Guides](https://www.notion.so/xeokit/xeokit-Documentation-4598591fcedb4889bf8896750651f74e)
  * [API Docs](https://xeokit.github.io/xeokit-sdk/docs/)
+ * [Changelog](https://xeokit.github.io/xeokit-sdk/CHANGE_LOG)
+ * [Features](https://xeokit.io/index.html?foo=1#features)
+ * [FAQ](https://xeokit.io/index.html?foo=1#faq)  
+ * [Blog](https://xeokit.io/blog.html)
  * [License](https://xeokit.io/index.html#pricing)
 
 

package/dist/xeokit-sdk.es.js

@@ -15897,6 +15897,7 @@ const Renderer = function (scene, options) {
         const worldRayOrigin = math.vec3();
         const worldRayDir = math.vec3();
         const worldSurfacePos = math.vec3();
+        const worldSurfaceNormal = math.vec3();
 
         return function (params, pickResult = _pickResult) {
 
@@ -15937,7 +15938,7 @@ const Renderer = function (scene, options) {
                 // Picking with arbitrary World-space ray
                 // Align camera along ray and fire ray through center of canvas
 
-                const pickFrustumMatrix = math.frustumMat4(-1, 1, -1, 1, scene.camera.project.near, scene.camera.project.far, tempMat4a);
+                const pickFrustumMatrix = math.frustumMat4(-1, 1, -1, 1, 0.01, scene.camera.project.far, tempMat4a);
 
                 if (params.matrix) {
 
@@ -15957,7 +15958,7 @@ const Renderer = function (scene, options) {
 
                     math.normalizeVec3(randomVec3);
                     math.cross3Vec3(worldRayDir, randomVec3, up);
-                    
+
                     pickViewMatrix = math.lookAtMat4v(worldRayOrigin, look, up, tempMat4b);
                     pickProjMatrix = pickFrustumMatrix;
 
@@ -15995,14 +15996,18 @@ const Renderer = function (scene, options) {
                         math.canvasPosToWorldRay(scene.canvas.canvas, pickViewMatrix, pickProjMatrix, canvasPos, worldRayOrigin, worldRayDir);
                     }
 
-                    if (pickable.precisionRayPickSurface(worldRayOrigin, worldRayDir, worldSurfacePos)) {
+                    if (pickable.precisionRayPickSurface(worldRayOrigin, worldRayDir, worldSurfacePos, worldSurfaceNormal)) {
 
                         pickResult.worldPos = worldSurfacePos;
 
                         if (params.pickSurfaceNormal !== false) {
-                            gpuPickWorldNormal(pickable, canvasPos, pickViewMatrix, pickProjMatrix, pickResult);
+                            pickResult.worldNormal = worldSurfaceNormal;
                         }
 
+                        // if (params.pickSurfaceNormal !== false) {
+                        //     gpuPickWorldNormal(pickable, canvasPos, pickViewMatrix, pickProjMatrix, pickResult);
+                        // }
+
                         pickResult.pickSurfacePrecision = true;
                     }
 
@@ -27883,6 +27888,7 @@ function buildVertexDraw(mesh) {
     const lightsState = scene._lightsState;
     let light;
     const billboard = meshState.billboard;
+    const background = meshState.background;
     const stationary = meshState.stationary;
     const texturing = hasTextures(mesh);
     const normals = hasNormals$1(mesh);
@@ -28014,6 +28020,8 @@ function buildVertexDraw(mesh) {
     src.push("mat4 modelMatrix2          = modelMatrix;");
     if (stationary) {
         src.push("viewMatrix2[3][0] = viewMatrix2[3][1] = viewMatrix2[3][2] = 0.0;");
+    } else if (background) {
+        src.push("viewMatrix2[3] = vec4(0.0, 0.0, 0.0 ,1.0);");
     }
     if (billboard === "spherical" || billboard === "cylindrical") {
         src.push("mat4 modelViewMatrix = viewMatrix2 * modelMatrix2;");
@@ -28092,6 +28100,9 @@ function buildVertexDraw(mesh) {
         }
         src.push("isPerspective = float (isPerspectiveMatrix(projMatrix));");
     }
+    if (background) {
+        src.push("clipPos.z = clipPos.w;");
+    }
     src.push("gl_Position = clipPos;");
     if (receivesShadow) {
         src.push("const mat4 texUnitConverter = mat4(0.5, 0.0, 0.0, 0.0, 0.0, 0.5, 0.0, 0.0, 0.0, 0.0, 0.5, 0.0, 0.5, 0.5, 0.5, 1.0);");
@@ -29192,9 +29203,13 @@ DrawRenderer.prototype.drawMesh = function (frameCtx, mesh) {
     const geometryState = mesh._geometry._state;
     const camera = scene.camera;
     const rtcCenter = mesh.rtcCenter;
+    const background = meshState.background;
 
     if (frameCtx.lastProgramId !== this._program.id) {
         frameCtx.lastProgramId = this._program.id;
+        if (background) {
+            gl.depthFunc(gl.LEQUAL);
+        }
         this._bindProgram(frameCtx);
     }
 
@@ -29711,6 +29726,10 @@ DrawRenderer.prototype.drawMesh = function (frameCtx, mesh) {
         gl.drawArrays(gl.TRIANGLES, 0, geometryState.positions.numItems);
         frameCtx.drawArrays++;
     }
+
+    if (background) {
+        gl.depthFunc(gl.LESS);
+    }
 };
 
 DrawRenderer.prototype._allocate = function (mesh) {
@@ -32742,6 +32761,7 @@ class Mesh extends Component {
      * @param {Boolean} [cfg.highlighted=false] Indicates if the Mesh is initially highlighted.
      * @param {Boolean} [cfg.selected=false] Indicates if the Mesh is initially selected.
      * @param {Boolean} [cfg.edges=false] Indicates if the Mesh's edges are initially emphasized.
+     * @param {Boolean} [cfg.background=false] Indicates if the Mesh should act as background, e.g., it can be used for a skybox.
      * @param {Number[]} [cfg.colorize=[1.0,1.0,1.0]] Mesh's initial RGB colorize color, multiplies by the rendered fragment colors.
      * @param {Number} [cfg.opacity=1.0] Mesh's initial opacity factor, multiplies by the rendered fragment alpha.
      * @param {String} [cfg.billboard="none"] Mesh's billboarding behaviour. Options are "none" for no billboarding, "spherical" to always directly face {@link Camera.eye}, rotating both vertically and horizontally, or "cylindrical" to face the {@link Camera#eye} while rotating only about its vertically axis (use that mode for things like trees on a landscape).
@@ -32781,6 +32801,7 @@ class Mesh extends Component {
             selected: false,
             edges: false,
             stationary: !!cfg.stationary,
+            background: !!cfg.background,
             billboard: this._checkBillboard(cfg.billboard),
             layer: null,
             colorize: null,
@@ -37846,7 +37867,7 @@ class BCFViewpointsPlugin extends Plugin {
      * @param {Boolean} [options.updateCompositeObjects=false] When ````true````, then when visibility and selection updates refer to composite objects (eg. an IfcBuildingStorey),
      * then this method will apply the updates to objects within those composites.
      */
-    setViewpoint(bcfViewpoint, options = {}, done) {
+    setViewpoint(bcfViewpoint, options = {}) {
         if (!bcfViewpoint) {
             return;
         }
@@ -38001,11 +38022,8 @@ class BCFViewpointsPlugin extends Plugin {
                 camera.look = look;
                 camera.up = up;
                 camera.projection = projection;
-                if (done) {
-                    done();
-                }
             } else {
-                viewer.cameraFlight.flyTo({eye, look, up, duration: options.duration, projection}, done);
+                viewer.cameraFlight.flyTo({eye, look, up, duration: options.duration, projection});
             }
         }
     }
@@ -39876,8 +39894,8 @@ class PerformanceMesh {
     }
 
     /** @private */
-    precisionRayPickSurface(worldRayOrigin, worldRayDir, worldSurfacePos) {
-        return this._layer.precisionRayPickSurface ? this._layer.precisionRayPickSurface(this._portionId, worldRayOrigin, worldRayDir, worldSurfacePos) : false;
+    precisionRayPickSurface(worldRayOrigin, worldRayDir, worldSurfacePos, worldSurfaceNormal) {
+        return this._layer.precisionRayPickSurface ? this._layer.precisionRayPickSurface(this._portionId, worldRayOrigin, worldRayDir, worldSurfacePos, worldSurfaceNormal) : false;
     }
 
     /** @private */
@@ -46635,7 +46653,7 @@ class TrianglesBatchingLayer {
 
     //------------------------------------------------------------------------------------------------
 
-    precisionRayPickSurface(portionId, worldRayOrigin, worldRayDir, worldSurfacePos) {
+    precisionRayPickSurface(portionId, worldRayOrigin, worldRayDir, worldSurfacePos, worldNormal) {
 
         if (!this.model.scene.pickSurfacePrecisionEnabled) {
             return false;
@@ -46713,11 +46731,19 @@ class TrianglesBatchingLayer {
                 if (!gotIntersect || dist > closestDist) {
                     closestDist = dist;
                     worldSurfacePos.set(closestIntersectPos);
+                    if (worldNormal) { // Not that wasteful to eagerly compute - unlikely to hit >2 surfaces on most geometry
+                        math.triangleNormal(a, b, c, worldNormal);
+                    }
                     gotIntersect = true;
                 }
             }
         }
 
+        if (gotIntersect && worldNormal) {
+            math.transformVec3(this.model.worldNormalMatrix, worldNormal, worldNormal);
+            math.normalizeVec3(worldNormal);
+        }
+
         return gotIntersect;
     }
 
@@ -53044,6 +53070,7 @@ class TrianglesInstancingLayer {
         if (this.model.scene.pickSurfacePrecisionEnabled) {
             portion.matrix = meshMatrix.slice();
             portion.inverseMatrix = null; // Lazy-computed in precisionRayPickSurface
+            portion.normalMatrix = null; // Lazy-computed in precisionRayPickSurface
         }
 
         this._portions.push(portion);
@@ -53674,7 +53701,7 @@ class TrianglesInstancingLayer {
 
     //-----------------------------------------------------------------------------------------
 
-    precisionRayPickSurface(portionId, worldRayOrigin, worldRayDir, worldSurfacePos) {
+    precisionRayPickSurface(portionId, worldRayOrigin, worldRayDir, worldSurfacePos, worldNormal) {
 
         if (!this.model.scene.pickSurfacePrecisionEnabled) {
             return false;
@@ -53692,6 +53719,10 @@ class TrianglesInstancingLayer {
             portion.inverseMatrix = math.inverseMat4(portion.matrix, math.mat4());
         }
 
+        if (worldNormal && !portion.normalMatrix) {
+            portion.normalMatrix = math.transposeMat4(portion.inverseMatrix, math.mat4());
+        }
+
         const quantizedPositions = state.quantizedPositions;
         const indices = state.indices;
         const rtcCenter = state.rtcCenter;
@@ -53760,11 +53791,20 @@ class TrianglesInstancingLayer {
                 if (!gotIntersect || dist > closestDist) {
                     closestDist = dist;
                     worldSurfacePos.set(closestIntersectPos);
+                    if (worldNormal) { // Not that wasteful to eagerly compute - unlikely to hit >2 surfaces on most geometry
+                        math.triangleNormal(a, b, c, worldNormal);
+                    }
                     gotIntersect = true;
                 }
             }
         }
 
+        if (gotIntersect && worldNormal) {
+            math.transformVec3(portion.normalMatrix, worldNormal, worldNormal);
+            math.transformVec3(this.model.worldNormalMatrix, worldNormal, worldNormal);
+            math.normalizeVec3(worldNormal);
+        }
+
         return gotIntersect;
     }
 
@@ -69839,14 +69879,16 @@ var parseGLTF$1 = (function () {
             var geometry;
 
             for (var i = 0, len = primitivesInfo.length; i < len; i++) {
-
+                primitiveInfo = primitivesInfo[i];
+                if (primitiveInfo.mode < 4 ) {
+                    continue;
+                }
                 geometryCfg = {
                     primitive: "triangles",
                     compressGeometry: true,
                     edgeThreshold: ctx.edgeThreshold
                 };
 
-                primitiveInfo = primitivesInfo[i];
                 indicesIndex = primitiveInfo.indices;
 
                 if (indicesIndex !== null && indicesIndex !== undefined) {
@@ -70530,11 +70572,14 @@ const parseGLTF = (function () {
                     const meshIds = [];
 
                     for (let i = 0; i < numPrimitives; i++) {
+                        const primitiveInfo = meshInfo.primitives[i];
+                        if (primitiveInfo.mode < 4 ) {
+                            continue;
+                        }
                         const meshCfg = {
                             id: performanceModel.id + "." + ctx.numObjects++,
                             matrix: worldMatrix
                         };
-                        const primitiveInfo = meshInfo.primitives[i];
 
                         const materialIndex = primitiveInfo.material;
                         let materialInfo;
@@ -75289,6 +75334,7 @@ class Skybox extends Component {
                     12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23
                 ]
             }),
+            background: true,
             scale: [2000, 2000, 2000], // Overridden when we initialize the 'size' property, below
             rotation: [0, -90, 0],
             material: new PhongMaterial(this, {
@@ -75299,6 +75345,8 @@ class Skybox extends Component {
                 emissiveMap: new Texture(this, {
                     src: cfg.src,
                     flipY: true,
+                    wrapS: "clampToEdge",
+                    wrapT: "clampToEdge",
                     encoding: cfg.encoding || "sRGB"
                 }),
                 backfaces: true // Show interior faces of our skybox geometry
@@ -100419,13 +100467,13 @@ const tempCameraTarget = {
  */
 class KeyboardAxisViewHandler {
 
-    constructor(scene, controllers, configs, states, updates) {
+    constructor(scene, controllers, configs, states) {
 
         this._scene = scene;
         const cameraControl = controllers.cameraControl;
         const camera = scene.camera;
 
-        scene.input.on("keydown", this._documentKeyDownHandler = (e) => {
+        this._onSceneKeyDown = scene.input.on("keydown", () => {
 
             if (!(configs.active && configs.pointerEnabled) || (!scene.input.keyboardEnabled)) {
                 return;
@@ -100517,7 +100565,7 @@ class KeyboardAxisViewHandler {
     }
 
     destroy() {
-        document.removeEventListener("keydown", this._documentKeyDownHandler);
+        this._scene.input.off(this._onSceneKeyDown);
     }
 }
 
@@ -100891,22 +100939,19 @@ class KeyboardPanRotateDollyHandler {
 
         const canvas = scene.canvas.canvas;
 
-        controllers.pickController;
-
         let mouseMovedSinceLastKeyboardDolly = true;
 
-        document.addEventListener("mousemove", this._documentMouseMoveHandler = () => {
+        this._onSceneMouseMove = input.on("mousemove", () => {
             mouseMovedSinceLastKeyboardDolly = true;
         });
 
-        document.addEventListener("keydown", this._documentKeyDownHandler = (e) => {
+        this._onSceneKeyDown = input.on("keydown", (keyCode) => {
             if (!(configs.active && configs.pointerEnabled) || (!scene.input.keyboardEnabled)) {
                 return;
             }
             if (!states.mouseover) {
                 return;
             }
-            const keyCode = e.keyCode;
             keyDownMap[keyCode] = true;
 
             if (keyCode === input.KEY_SHIFT) {
@@ -100914,14 +100959,13 @@ class KeyboardPanRotateDollyHandler {
             }
         });
 
-        document.addEventListener("keyup", this._documentKeyUpHandler = (e) => {
+        this._onSceneKeyUp = input.on("keyup", (keyCode) => {
             if (!(configs.active && configs.pointerEnabled) || (!scene.input.keyboardEnabled)) {
                 return;
             }
             if (!states.mouseover) {
                 return;
             }
-            const keyCode = e.keyCode;
             keyDownMap[keyCode] = false;
 
             if (keyCode === input.KEY_SHIFT) {
@@ -101056,9 +101100,9 @@ class KeyboardPanRotateDollyHandler {
 
         this._scene.off(this._onTick);
 
-        document.removeEventListener("mousemove", this._documentMouseMoveHandler);
-        document.removeEventListener("keydown", this._documentKeyDownHandler);
-        document.removeEventListener("keyup", this._documentKeyUpHandler);
+        this._scene.input.off(this._onSceneMouseMove);
+        this._scene.input.off(this._onSceneKeyDown);
+        this._scene.input.off(this._onSceneKeyUp);
     }
 }