@xeokit/xeokit-sdk 2.6.103 → 2.6.105-XCD-439-transparent-issues

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.103",
+  "version": "2.6.105-XCD-439-transparent-issues",
   "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",
@@ -8,7 +8,7 @@
   "scripts": {
     "build": "rollup --config rollup.config.js; rollup --config rollup.minified.config.js",
     "dev-build": "rollup --config rollup.dev.config.js",
-    "docs": "rm -Rf ./docs/*; ./node_modules/.bin/esdoc",
+    "docs": "rm -Rf ./docs/*; ./node_modules/.bin/esdoc && node docs/.scripts/fix-doc-links.mjs",
     "typedocs": "rm -Rf ./docs/*; typedoc --tsconfig tsconfig.json",
     "changelog": "git fetch; auto-changelog --commit-limit false --package --template changelog-template.hbs",
     "test": "npx percy exec -- npx playwright test"
@@ -68,10 +68,11 @@
     "@types/node": "^22.10.6",
     "auto-changelog": "^2.4.0",
     "dotenv": "^16.4.7",
-    "esdoc": "^1.1.0",
-    "esdoc-custom-theme": "^1.4.2",
-    "esdoc-publish-html-plugin": "^1.1.2",
-    "esdoc-standard-plugin": "^1.0.0",
+    "esdoc": "1.1.0",
+    "esdoc-custom-theme": "1.4.2",
+    "esdoc-ecmascript-proposal-plugin": "1.0.0",
+    "esdoc-publish-html-plugin": "1.1.2",
+    "esdoc-standard-plugin": "1.0.0",
     "eslint": "^8.13.0",
     "parse5": "^7.0.0",
     "rollup": "^2.70.2",

package/src/plugins/GLTFLoaderPlugin/GLTFLoaderPlugin.js

@@ -322,6 +322,7 @@ class GLTFLoaderPlugin extends Plugin {
      * @param {Boolean} [params.autoMetaModel] When supplied, creates a default MetaModel with a single MetaObject.
      * @param {Boolean} [params.globalizeObjectIds=false] Indicates whether to globalize each {@link Entity#id} and {@link MetaObject#id}, in case you need to prevent ID clashes with other models.
      * @param {*} [params.parseOptions={}] Options to pass to loaders.gl parse method, eg. ````{ gltf: { excludeExtensions: { "KHR_texture_transform": false } } }````.
+     * @param {Boolean} [params.entityPerMesh=false] Create an entity for each mesh, instead of grouping leaf meshes under their common entity.
      * @returns {Entity} Entity representing the model, which will have {@link Entity#isModel} set ````true```` and will be registered by {@link Entity#id} in {@link Scene#models}
      */
     load(params = {}) {

package/src/plugins/GLTFLoaderPlugin/GLTFSceneModelLoader.js

@@ -125,6 +125,7 @@ function parseGLTF(plugin, src, gltf, metaModelJSON, options, sceneModel, ok, er
             numObjects: 0,
             nodes: [],
             nextId: 0,
+            entityPerMesh: options.entityPerMesh,
             log: (msg) => {
                 plugin.log(msg);
             }
@@ -419,6 +420,49 @@ function loadDefaultScene(ctx) {
         });
     })(nodes);
 
+    if (ctx.entityPerMesh) {
+        const sceneIds = new Set();
+        (function createSceneMeshesAndEntities(nodes, parentId, parentMatrix, dep) {
+            return nodes.reduce(
+                (hadMesh, node) => {
+                    const baseId = node.name ?? "Node";
+                    const maybeGlobalize = id => ctx.globalizeObjectIds ? math.globalizeObjectId(ctx.sceneModel.id, id) : id;
+                    let entityId = maybeGlobalize(baseId);
+                    let nextPostfixId = 1;
+                    while (ctx.sceneModel.objects[entityId] || sceneIds.has(entityId)) {
+                        entityId = maybeGlobalize(`${baseId}.${(nextPostfixId++).toString().padStart(4, "0")}`);
+                    }
+                    sceneIds.add(entityId);
+                    const matrix = parseNodeMatrix(node, parentMatrix);
+
+                    const meshEntity = node.mesh && (function() {
+                        const meshIds = [ ];
+                        parseNodeMesh(node, ctx, matrix, meshIds);
+                        return (meshIds.length > 0) && ctx.sceneModel.createEntity({
+                            id:       entityId,
+                            meshIds:  meshIds,
+                            isObject: true
+                        });
+                    })();
+
+                    const hasMesh = (node.children && createSceneMeshesAndEntities(node.children, entityId, matrix, dep + 1)) || meshEntity;
+
+                    if (hasMesh && ctx.autoMetaModel) {
+                        ctx.metaObjects.push({
+                            id:     entityId,
+                            name:   entityId,
+                            type:   "Default",
+                            parent: parentId
+                        });
+                    }
+
+                    return hadMesh || hasMesh;
+                },
+                false);
+        })(nodes, ctx.sceneModel.id, null, 0);
+        return;
+    }
+
     // Create a SceneMesh for each mesh primitive, and a SceneModelEntity for the root node and each named node.
     const meshIdsStack = [];
     let meshIds = null;
@@ -460,7 +504,7 @@ function loadDefaultScene(ctx) {
                         ctx.metaObjects.push({
                             id: entityId,
                             type: "Default",
-                            name: entityId,
+                            name: nodeName ? nodeName : "Node",
                             parent: ctx.sceneModel.id
                         });
                     }
@@ -532,9 +576,6 @@ function parseNodeMesh(node, ctx, matrix, meshIds) {
     if (numPrimitives > 0) {
         for (let i = 0; i < numPrimitives; i++) {
             const primitive = mesh.primitives[i];
-            if (primitive.mode < 4) {
-                continue;
-            }
             const meshCfg = {
                 id: ctx.sceneModel.id + "." + ctx.numObjects++
             };

package/src/viewer/Viewer.js

@@ -65,6 +65,7 @@ class Viewer {
      * configures renderer logic for the specified number of SectionPlanes, eliminating the need for setting up logic with each SectionPlane creation and thereby enhancing
      * responsiveness. It is important to consider that each SectionPlane impacts rendering performance, so it is recommended to set this value to a quantity that aligns with
      * your expected usage.
+     * @param {Boolean} [cfg.sortAllTransparent=false] Whether to sort all transparent objects by their distance from the camera, before drawing on the scene.
      */
     constructor(cfg) {
 
@@ -124,7 +125,8 @@ class Viewer {
             colorTextureEnabled: (cfg.colorTextureEnabled !== false),
             dtxEnabled: (!!cfg.dtxEnabled),
             markerZOffset: cfg.markerZOffset,
-            numCachedSectionPlanes: cfg.numCachedSectionPlanes
+            numCachedSectionPlanes: cfg.numCachedSectionPlanes,
+            sortAllTransparent: cfg.sortAllTransparent
         });
 
         /**

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

@@ -633,7 +633,8 @@ class Scene extends Component {
 
         this._renderer = new Renderer(this, {
             transparent: transparent,
-            alphaDepthMask: alphaDepthMask
+            alphaDepthMask: alphaDepthMask,
+            sortAllTransparent: cfg.sortAllTransparent
         });
 
         this._sectionPlanesState = new (function () {

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

@@ -18,6 +18,7 @@ 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 tempVec3 = math.vec3();
 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]);
@@ -1021,6 +1022,40 @@ const Renderer = function (scene, options) {
             if (normalFillTransparentBinLen > 0 || normalEdgesTransparentBinLen > 0) {
                 gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
             }
+
+            if (options.sortAllTransparent) {
+                const eye = frameCtx.viewParams.eye;
+                normalFillTransparentBin.length = normalFillTransparentBinLen; // normalFillTransparentBin reused by renderDrawables calls, so needs to be truncated if necessary
+
+                const transparentDrawables = [ ];
+                const appendTransparentDrawable = (d, draw) => {
+                    math.getAABB3Center(d.aabb, tempVec3);
+                    transparentDrawables.push({ draw: draw, distSq: math.distVec3(eye, math.getAABB3Center(d.aabb, tempVec3)) });
+                };
+                iota(normalEdgesTransparentBinLen).forEach(i => {
+                    const d = normalEdgesTransparentBin[i];
+                    appendTransparentDrawable(d, () => d.drawEdgesColorTransparent(frameCtx));
+                });
+
+                iota(normalFillTransparentBinLen).forEach(i => {
+                    const d = normalFillTransparentBin[i];
+                    appendTransparentDrawable(d, () => d.drawColorTransparent(frameCtx));
+                });
+
+                iota(xrayEdgesTransparentBinLen).forEach(i => {
+                    const d = xrayEdgesTransparentBin[i];
+                    appendTransparentDrawable(d, () => d.drawEdgesXRayed(frameCtx));
+                });
+
+                iota(xrayedFillTransparentBinLen).forEach(i => {
+                    const d = xrayedFillTransparentBin[i];
+                    appendTransparentDrawable(d, () => d.drawSilhouetteXRayed(frameCtx));
+                });
+
+                transparentDrawables.sort((a, b) => b.distSq - a.distSq).forEach(d => d.draw());
+
+            } else {
+
             if (normalEdgesTransparentBinLen > 0) {
                 for (i = 0; i < normalEdgesTransparentBinLen; i++) {
                     drawable = normalEdgesTransparentBin[i];
@@ -1055,6 +1090,7 @@ const Renderer = function (scene, options) {
                     xrayedFillTransparentBin[i].drawSilhouetteXRayed(frameCtx);
                 }
             }
+            }
 
             gl.disable(gl.BLEND);
             if (!alphaDepthMask) {

package/types/plugins/GLTFLoaderPlugin/GLTFLoaderPlugin.d.ts

@@ -85,6 +85,8 @@ export declare type LoadGLTFModel = {
   autoMetaModel?: boolean;
   /** Options to pass to loaders.gl parse method, eg. ````{ gltf: { excludeExtensions: { "KHR_texture_transform": false } } }````. */
   parseOptions?: any;
+  /** Create an entity for each mesh, instead of grouping leaf meshes under their common entity. */
+  entityPerMesh?: boolean;
 };
 
 /**

package/types/viewer/Viewer.d.ts

@@ -67,6 +67,8 @@ export declare type ViewerConfiguration = {
   markerZOffset?: number;
   /** Enhances the efficiency of SectionPlane creation by proactively allocating Viewer resources for a specified quantity of SectionPlanes.*/
   numCachedSectionPlanes?: number;
+  /** Whether to sort all transparent objects by their distance from the camera, before drawing on the scene. */
+  sortAllTransparent?: boolean;
 };
 
 /**