@combeenation/3d-viewer 12.2.0 → 12.3.0-beta1

package/dist/lib-cjs/index.d.ts

@@ -26,10 +26,19 @@ import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
 import { Engine } from '@babylonjs/core/Engines/engine';
 import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight';
 import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';
-import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
-import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture';
-import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture';
-import { Texture } from '@babylonjs/core/Materials/Textures/texture';
+import { BackgroundMaterial } from '@babylonjs/core/Materials/Background/backgroundMaterial';
+import { NodeMaterial } from '@babylonjs/core/Materials/Node';
+/**
+ * Importing from .../PBR covers all PBR material types, also the deprecated ones like `PBRMetallicRoughnessMaterial`.
+ * In this way we can also load models which contain these PBR materials.
+ * Still we only actively use `PBRMaterial` in the viewer code base and we also only want to expose this one to the
+ * consumer.
+ */
+import { PBRMaterial } from '@babylonjs/core/Materials/PBR';
+/**
+ * Same story as for PBR materials, we want to support also textures but only want to expose a few of them
+ */
+import { CubeTexture, DynamicTexture, Texture } from '@babylonjs/core/Materials/Textures';
 import { Material } from '@babylonjs/core/Materials/material';
 import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color';
@@ -51,4 +60,4 @@ import { EventEmitter } from 'eventemitter3';
 /**
  * Expose some frequently used babylon modules by our consumers.
  */
-export { AnimationManager, AnimationInterface, Variant, VariantInstanceManager, Viewer, ParameterObservable, Parameterizable, VariantParameterizable, ViewerLight, emitter as Emitter, EventEmitter, Event, Parameter, VariantInstance, Color3, Color4, Vector3, AbstractMesh, InstancedMesh, Mesh, TransformNode, Node, Material, PBRMaterial, StandardMaterial, Scene, Engine, ArcRotateCamera, DynamicTexture, CubeTexture, MeshBuilder, Texture, BabylonAnimation, HemisphericLight, DirectionalLight, Element, EventBroadcaster, SceneManager, PlacementAnimation, BabylonHelper, GltfExportManager, SpecStorage, TagManager, ViewerError, ViewerErrorIds, };
+export { AnimationManager, AnimationInterface, Variant, VariantInstanceManager, Viewer, ParameterObservable, Parameterizable, VariantParameterizable, ViewerLight, emitter as Emitter, EventEmitter, Event, Parameter, VariantInstance, Color3, Color4, Vector3, AbstractMesh, InstancedMesh, Mesh, TransformNode, Node, Material, PBRMaterial, StandardMaterial, NodeMaterial, BackgroundMaterial, Scene, Engine, ArcRotateCamera, DynamicTexture, CubeTexture, MeshBuilder, Texture, BabylonAnimation, HemisphericLight, DirectionalLight, Element, EventBroadcaster, SceneManager, PlacementAnimation, BabylonHelper, GltfExportManager, SpecStorage, TagManager, ViewerError, ViewerErrorIds, };

package/dist/lib-cjs/index.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewerErrorIds = exports.ViewerError = exports.TagManager = exports.SpecStorage = exports.GltfExportManager = exports.BabylonHelper = exports.PlacementAnimation = exports.SceneManager = exports.EventBroadcaster = exports.Element = exports.DirectionalLight = exports.HemisphericLight = exports.BabylonAnimation = exports.Texture = exports.MeshBuilder = exports.CubeTexture = exports.DynamicTexture = exports.ArcRotateCamera = exports.Engine = exports.Scene = exports.StandardMaterial = exports.PBRMaterial = exports.Material = exports.Node = exports.TransformNode = exports.Mesh = exports.InstancedMesh = exports.AbstractMesh = exports.Vector3 = exports.Color4 = exports.Color3 = exports.VariantInstance = exports.Parameter = exports.Event = exports.EventEmitter = exports.Emitter = exports.ViewerLight = exports.VariantParameterizable = exports.Parameterizable = exports.ParameterObservable = exports.Viewer = exports.VariantInstanceManager = exports.Variant = exports.AnimationManager = void 0;
+exports.ViewerErrorIds = exports.ViewerError = exports.TagManager = exports.SpecStorage = exports.GltfExportManager = exports.BabylonHelper = exports.PlacementAnimation = exports.SceneManager = exports.EventBroadcaster = exports.Element = exports.DirectionalLight = exports.HemisphericLight = exports.BabylonAnimation = exports.Texture = exports.MeshBuilder = exports.CubeTexture = exports.DynamicTexture = exports.ArcRotateCamera = exports.Engine = exports.Scene = exports.BackgroundMaterial = exports.NodeMaterial = exports.StandardMaterial = exports.PBRMaterial = exports.Material = exports.Node = exports.TransformNode = exports.Mesh = exports.InstancedMesh = exports.AbstractMesh = exports.Vector3 = exports.Color4 = exports.Color3 = exports.VariantInstance = exports.Parameter = exports.Event = exports.EventEmitter = exports.Emitter = exports.ViewerLight = exports.VariantParameterizable = exports.Parameterizable = exports.ParameterObservable = exports.Viewer = exports.VariantInstanceManager = exports.Variant = exports.AnimationManager = void 0;
 const element_1 = require("./api/classes/element");
 Object.defineProperty(exports, "Element", { enumerable: true, get: function () { return element_1.Element; } });
 const event_1 = require("./api/classes/event");
@@ -76,14 +76,25 @@ const directionalLight_1 = require("@babylonjs/core/Lights/directionalLight");
 Object.defineProperty(exports, "DirectionalLight", { enumerable: true, get: function () { return directionalLight_1.DirectionalLight; } });
 const hemisphericLight_1 = require("@babylonjs/core/Lights/hemisphericLight");
 Object.defineProperty(exports, "HemisphericLight", { enumerable: true, get: function () { return hemisphericLight_1.HemisphericLight; } });
-const pbrMaterial_1 = require("@babylonjs/core/Materials/PBR/pbrMaterial");
-Object.defineProperty(exports, "PBRMaterial", { enumerable: true, get: function () { return pbrMaterial_1.PBRMaterial; } });
-const cubeTexture_1 = require("@babylonjs/core/Materials/Textures/cubeTexture");
-Object.defineProperty(exports, "CubeTexture", { enumerable: true, get: function () { return cubeTexture_1.CubeTexture; } });
-const dynamicTexture_1 = require("@babylonjs/core/Materials/Textures/dynamicTexture");
-Object.defineProperty(exports, "DynamicTexture", { enumerable: true, get: function () { return dynamicTexture_1.DynamicTexture; } });
-const texture_1 = require("@babylonjs/core/Materials/Textures/texture");
-Object.defineProperty(exports, "Texture", { enumerable: true, get: function () { return texture_1.Texture; } });
+const backgroundMaterial_1 = require("@babylonjs/core/Materials/Background/backgroundMaterial");
+Object.defineProperty(exports, "BackgroundMaterial", { enumerable: true, get: function () { return backgroundMaterial_1.BackgroundMaterial; } });
+const Node_1 = require("@babylonjs/core/Materials/Node");
+Object.defineProperty(exports, "NodeMaterial", { enumerable: true, get: function () { return Node_1.NodeMaterial; } });
+/**
+ * Importing from .../PBR covers all PBR material types, also the deprecated ones like `PBRMetallicRoughnessMaterial`.
+ * In this way we can also load models which contain these PBR materials.
+ * Still we only actively use `PBRMaterial` in the viewer code base and we also only want to expose this one to the
+ * consumer.
+ */
+const PBR_1 = require("@babylonjs/core/Materials/PBR");
+Object.defineProperty(exports, "PBRMaterial", { enumerable: true, get: function () { return PBR_1.PBRMaterial; } });
+/**
+ * Same story as for PBR materials, we want to support also textures but only want to expose a few of them
+ */
+const Textures_1 = require("@babylonjs/core/Materials/Textures");
+Object.defineProperty(exports, "CubeTexture", { enumerable: true, get: function () { return Textures_1.CubeTexture; } });
+Object.defineProperty(exports, "DynamicTexture", { enumerable: true, get: function () { return Textures_1.DynamicTexture; } });
+Object.defineProperty(exports, "Texture", { enumerable: true, get: function () { return Textures_1.Texture; } });
 const material_1 = require("@babylonjs/core/Materials/material");
 Object.defineProperty(exports, "Material", { enumerable: true, get: function () { return material_1.Material; } });
 const standardMaterial_1 = require("@babylonjs/core/Materials/standardMaterial");

package/dist/lib-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,mDAAgD;AAwF9C,wFAxFO,iBAAO,OAwFP;AAvFT,+CAAqD;AA+DnD,sFA/DO,aAAK,OA+DP;AAFM,wFA7DG,eAAO,OA6DH;AA5DpB,qEAAkE;AAuFhE,iGAvFO,mCAAgB,OAuFP;AAtFlB,uDAAoD;AA8DlD,0FA9DO,qBAAS,OA8DP;AA7DX,2EAAwE;AAsDtE,oGAtDO,yCAAmB,OAsDP;AArDrB,mEAAgE;AAsD9D,gGAtDO,iCAAe,OAsDP;AArDjB,yEAAsE;AAqFpE,mGArFO,uCAAkB,OAqFP;AApFpB,mDAAgD;AAgD9C,wFAhDO,iBAAO,OAgDP;AA/CT,mEAAgE;AA0D9D,gGA1DO,iCAAe,OA0DP;AAzDjB,iFAA8E;AAmD5E,uGAnDO,+CAAsB,OAmDP;AAlDxB,iDAA8C;AA+C5C,uFA/CO,eAAM,OA+CP;AA9CR,2DAAwE;AAqFtE,4FArFO,yBAAW,OAqFP;AACX,+FAtFoB,4BAAc,OAsFpB;AArFhB,2DAAwD;AAiDtD,4FAjDO,yBAAW,OAiDP;AAhDb,qEAAkE;AAwChE,iGAxCO,mCAAgB,OAwCP;AAvClB,uEAAoE;AA+ElE,kGA/EO,qCAAiB,OA+EP;AA9EnB,6DAA0D;AA2ExD,6FA3EO,2BAAY,OA2EP;AA1Ed,yDAAsD;AA+EpD,2FA/EO,uBAAU,OA+EP;AA9EZ,iFAA8E;AAuC5E,uGAvCO,+CAAsB,OAuCP;AAtCxB,yDAAsD;AA4EpD,4FA5EO,yBAAW,OA4EP;AA3Eb,wEAA0D;AAyExD,sCAAa;AAxEf,oEAAqF;AAiEnF,iGAjEoB,qBAAgB,OAiEpB;AAhElB,6EAA0E;AA2DxE,gGA3DO,iCAAe,OA2DP;AA1DjB,2DAAwD;AAyDtD,uFAzDO,eAAM,OAyDP;AAxDR,8EAA2E;AAgEzE,iGAhEO,mCAAgB,OAgEP;AA/DlB,8EAA2E;AA8DzE,iGA9DO,mCAAgB,OA8DP;AA7DlB,2EAAwE;AAmDtE,4FAnDO,yBAAW,OAmDP;AAlDb,gFAA6E;AAwD3E,4FAxDO,yBAAW,OAwDP;AAvDb,sFAAmF;AAsDjF,+FAtDO,+BAAc,OAsDP;AArDhB,wEAAqE;AAwDnE,wFAxDO,iBAAO,OAwDP;AAvDT,iEAA8D;AA8C5D,yFA9CO,mBAAQ,OA8CP;AA7CV,iFAA8E;AA+C5E,iGA/CO,mCAAgB,OA+CP;AA9ClB,iEAAkE;AAoChE,uFApCO,mBAAM,OAoCP;AACN,uFArCe,mBAAM,OAqCf;AApCR,mEAA4D;AAqC1D,wFArCO,qBAAO,OAqCP;AApCT,sEAAmE;AAqCjE,6FArCO,2BAAY,OAqCP;AApCd,wEAAqE;AAqCnE,8FArCO,6BAAa,OAqCP;AApCf,sDAAmD;AAqCjD,qFArCO,WAAI,OAqCP;AApCN,oEAAiE;AA+C/D,4FA/CO,yBAAW,OA+CP;AA9Cb,wEAAqE;AAoCnE,8FApCO,6BAAa,OAoCP;AAlCf;;;;GAIG;AACH,yDAAuD;AACvD,+CAA4C;AA6B1C,qFA7BO,WAAI,OA6BP;AA5BN,iDAA8C;AAgC5C,sFAhCO,aAAK,OAgCP;AA/BP,iDAA6C;AAgB3C,6FAhBO,4BAAY,OAgBP"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,mDAAgD;AAqG9C,wFArGO,iBAAO,OAqGP;AApGT,+CAAqD;AA0EnD,sFA1EO,aAAK,OA0EP;AAFM,wFAxEG,eAAO,OAwEH;AAvEpB,qEAAkE;AAoGhE,iGApGO,mCAAgB,OAoGP;AAnGlB,uDAAoD;AAyElD,0FAzEO,qBAAS,OAyEP;AAxEX,2EAAwE;AAiEtE,oGAjEO,yCAAmB,OAiEP;AAhErB,mEAAgE;AAiE9D,gGAjEO,iCAAe,OAiEP;AAhEjB,yEAAsE;AAkGpE,mGAlGO,uCAAkB,OAkGP;AAjGpB,mDAAgD;AA2D9C,wFA3DO,iBAAO,OA2DP;AA1DT,mEAAgE;AAqE9D,gGArEO,iCAAe,OAqEP;AApEjB,iFAA8E;AA8D5E,uGA9DO,+CAAsB,OA8DP;AA7DxB,iDAA8C;AA0D5C,uFA1DO,eAAM,OA0DP;AAzDR,2DAAwE;AAkGtE,4FAlGO,yBAAW,OAkGP;AACX,+FAnGoB,4BAAc,OAmGpB;AAlGhB,2DAAwD;AA4DtD,4FA5DO,yBAAW,OA4DP;AA3Db,qEAAkE;AAmDhE,iGAnDO,mCAAgB,OAmDP;AAlDlB,uEAAoE;AA4FlE,kGA5FO,qCAAiB,OA4FP;AA3FnB,6DAA0D;AAwFxD,6FAxFO,2BAAY,OAwFP;AAvFd,yDAAsD;AA4FpD,2FA5FO,uBAAU,OA4FP;AA3FZ,iFAA8E;AAkD5E,uGAlDO,+CAAsB,OAkDP;AAjDxB,yDAAsD;AAyFpD,4FAzFO,yBAAW,OAyFP;AAxFb,wEAA0D;AAsFxD,sCAAa;AArFf,oEAAqF;AA8EnF,iGA9EoB,qBAAgB,OA8EpB;AA7ElB,6EAA0E;AAwExE,gGAxEO,iCAAe,OAwEP;AAvEjB,2DAAwD;AAsEtD,uFAtEO,eAAM,OAsEP;AArER,8EAA2E;AA6EzE,iGA7EO,mCAAgB,OA6EP;AA5ElB,8EAA2E;AA2EzE,iGA3EO,mCAAgB,OA2EP;AA1ElB,gGAA6F;AAiE3F,mGAjEO,uCAAkB,OAiEP;AAhEpB,yDAA8D;AA+D5D,6FA/DO,mBAAY,OA+DP;AA7Dd;;;;;GAKG;AACH,uDAA4D;AAqD1D,4FArDO,iBAAW,OAqDP;AAnDb;;GAEG;AACH,iEAA0F;AAwDxF,4FAxDO,sBAAW,OAwDP;AADX,+FAvDoB,yBAAc,OAuDpB;AAGd,wFA1DoC,kBAAO,OA0DpC;AAzDT,iEAA8D;AA8C5D,yFA9CO,mBAAQ,OA8CP;AA7CV,iFAA8E;AA+C5E,iGA/CO,mCAAgB,OA+CP;AA9ClB,iEAAkE;AAoChE,uFApCO,mBAAM,OAoCP;AACN,uFArCe,mBAAM,OAqCf;AApCR,mEAA4D;AAqC1D,wFArCO,qBAAO,OAqCP;AApCT,sEAAmE;AAqCjE,6FArCO,2BAAY,OAqCP;AApCd,wEAAqE;AAqCnE,8FArCO,6BAAa,OAqCP;AApCf,sDAAmD;AAqCjD,qFArCO,WAAI,OAqCP;AApCN,oEAAiE;AAiD/D,4FAjDO,yBAAW,OAiDP;AAhDb,wEAAqE;AAoCnE,8FApCO,6BAAa,OAoCP;AAlCf;;;;GAIG;AACH,yDAAuD;AACvD,+CAA4C;AA6B1C,qFA7BO,WAAI,OA6BP;AA5BN,iDAA8C;AAkC5C,sFAlCO,aAAK,OAkCP;AAjCP,iDAA6C;AAgB3C,6FAhBO,4BAAY,OAgBP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@combeenation/3d-viewer",
-  "version": "12.2.0",
+  "version": "12.3.0-beta1",
   "description": "Combeenation 3D Viewer",
   "homepage": "https://github.com/Combeenation/3d-viewer#readme",
   "bugs": {
@@ -48,7 +48,6 @@
   "dependencies": {
     "@babylonjs/core": "6.27.1",
     "@babylonjs/loaders": "6.27.1",
-    "@babylonjs/materials": "6.27.1",
     "@babylonjs/serializers": "6.27.1",
     "eventemitter3": "4.0.7",
     "gsap": "3.11.2",

package/src/api/classes/viewer.ts

@@ -7,7 +7,7 @@ import { TagManager } from '../manager/tagManager';
 import { VariantInstanceManager } from '../manager/variantInstanceManager';
 import { SpecStorage } from '../store/specStorage';
 import { backgroundDomeName, envHelperMetadataName } from '../util/babylonHelper';
-import { hideWorldCoordinates, isWorldCoordinatesDebugNode, showWorldCoordinates } from '../util/debugHelper';
+import { hideWorldCoordinates, showWorldCoordinates } from '../util/debugHelper';
 import { getIsScaledDownDevice } from '../util/deviceHelper';
 import { debounce, loadJson } from '../util/resourceHelper';
 import { getCustomCbnBabylonLoaderPlugin } from '../util/sceneLoaderHelper';
@@ -45,8 +45,6 @@ import { isString } from 'lodash-es';
  * The class does nothing on its own and needs to {@link bootstrap}
  */
 export class Viewer extends EventBroadcaster {
-  public static readonly BOUNDING_BOX_NAME = '__bounding_box__';
-
   protected _scene: Scene | null = null;
 
   protected _animationManager: AnimationManager | null = null;
@@ -498,9 +496,9 @@ The inspector can only be used in development builds.`);
   }
 
   /**
-   * Calculates the bounding box from all visible meshes on the scene.
+   * Calculates the bounding box information from all visible meshes on the scene.
    */
-  public async calculateBoundingBox(excludeGeometry?: ExcludedGeometryList): Promise<Mesh> {
+  public calculateBoundingInfo(excludeGeometry?: ExcludedGeometryList): BoundingInfo {
     if (this.scene.meshes.length === 0) {
       throw new Error('There are currently no meshes on the scene.');
     }
@@ -508,24 +506,13 @@ The inspector can only be used in development builds.`);
     const { max, min } = this.scene.meshes
       .filter(mesh => {
         const isEnabled = mesh.isEnabled();
-        // ignore the existing bounding box mesh for calculating the current one
-        const isNotBBoxMesh = Viewer.BOUNDING_BOX_NAME !== mesh.name;
-        // ignore debug world coordinates nodes
-        const isNotWorldCoordinatesDebugNode = !isWorldCoordinatesDebugNode(mesh.name);
         // ignore meshes with invalid bounding infos
         const hasValidBBoxInfo = mesh.getBoundingInfo().boundingSphere.radius > 0;
         // ignore meshes with infinite distance, typically these are sky boxes
         const hasInfiniteDistance = mesh.infiniteDistance;
         // ignore excluded meshes
         const isExcluded = excludeGeometry ? isNodeIncludedInExclusionList(mesh, excludeGeometry) : false;
-        return (
-          isEnabled &&
-          isNotBBoxMesh &&
-          isNotWorldCoordinatesDebugNode &&
-          hasValidBBoxInfo &&
-          !hasInfiniteDistance &&
-          !isExcluded
-        );
+        return isEnabled && hasValidBBoxInfo && !hasInfiniteDistance && !isExcluded;
       })
       .reduce(
         (accBBoxMinMax, curMesh, idx) => {
@@ -538,12 +525,8 @@ The inspector can only be used in development builds.`);
         { max: new Vector3(), min: new Vector3() }
       );
 
-    let boundingBox = this.scene.getMeshByName(Viewer.BOUNDING_BOX_NAME) as Mesh;
-    if (!boundingBox) {
-      boundingBox = new Mesh(Viewer.BOUNDING_BOX_NAME, this.scene);
-    }
-    boundingBox.setBoundingInfo(new BoundingInfo(min, max));
-    return boundingBox;
+    const boundingInfo = new BoundingInfo(min, max);
+    return boundingInfo;
   }
 
   /**
@@ -575,10 +558,10 @@ The inspector can only be used in development builds.`);
     }
 
     // get bounding box of all visible meshes, this is the base for the autofocus algorithm
-    const boundingBox = await this.calculateBoundingBox(exclude);
+    const boundingInfo = this.calculateBoundingInfo(exclude);
 
-    const radius = boundingBox.getBoundingInfo().boundingSphere.radius;
-    const center = boundingBox.getBoundingInfo().boundingSphere.center;
+    const radius = boundingInfo.boundingSphere.radius;
+    const center = boundingInfo.boundingSphere.center;
     const diameter = radius * 2;
 
     // set lower radius limit on edge of bounding sphere to make sure that we can't dive into the meshes
@@ -639,14 +622,14 @@ The inspector can only be used in development builds.`);
    * Show world coordinate system with given dimension (for debugging purpose).
    */
   public showWorldCoordinates(dimension: number) {
-    showWorldCoordinates(this.scene, dimension);
+    showWorldCoordinates(dimension);
   }
 
   /**
    * Hide world coordinate system.
    */
   public hideWorldCoordinates() {
-    hideWorldCoordinates(this.scene);
+    hideWorldCoordinates();
   }
 
   /**

package/src/api/manager/gltfExportManager.ts

@@ -1,6 +1,5 @@
 import { Viewer } from '../classes/viewer';
 import { injectMetadata } from '../util/babylonHelper';
-import { isWorldCoordinatesDebugNode } from '../util/debugHelper';
 import { getIsScaledDownDevice } from '../util/deviceHelper';
 import { bakeGeometryOfMesh, createMeshFromInstancedMesh, resetTransformation } from '../util/geometryHelper';
 import { isNodeIncludedInExclusionList } from '../util/structureHelper';
@@ -280,12 +279,6 @@ export class GltfExportManager {
       return false;
     }
     // TODO: think of adding "BackgroundHelper" and nodes with "infiniteDistance" here as well, at least in AR mode
-    if (node.name === Viewer.BOUNDING_BOX_NAME) {
-      return false;
-    }
-    if (isWorldCoordinatesDebugNode(node.name)) {
-      return false;
-    }
     if (!node.isEnabled()) {
       return false;
     }

package/src/api/manager/tagManager.ts

@@ -299,10 +299,6 @@ export class TagManager {
          created means that there is no scenario where new nodes should get TagManager parameters applied.
          Instead, we check for the state to be enabled via the `onEnabledStateChangedObservable` below.
        */
-      //if (node.name === Viewer.BOUNDING_BOX_NAME || !this.viewer.variantInstances.areAllDefinitionsCreated) {
-      if (node.name === Viewer.BOUNDING_BOX_NAME) {
-        return;
-      }
       const onEnabledStateChangedObserver = node.onEnabledStateChangedObservable.add(async state => {
         if (!state) {
           // if the node is disabled, means ignoring also "ghost nodes"

package/src/api/util/debugHelper.ts

@@ -1,10 +1,11 @@
-import { Vector3 } from '@babylonjs/core';
 import { AxesViewer } from '@babylonjs/core/Debug/axesViewer';
 import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture';
 import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
 import { Color3 } from '@babylonjs/core/Maths/math.color';
+import { Vector3 } from '@babylonjs/core/Maths/math.vector';
 import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import { UtilityLayerRenderer } from '@babylonjs/core/Rendering/utilityLayerRenderer';
 
 type DebugAxisKeys = 'X' | 'Y' | 'Z';
 type DebugAxisConfig = { color: Color3; position: Vector3 };
@@ -22,44 +23,38 @@ let _AXES_VIEWER: AxesViewer;
  * Create debug coordinate system located in world origin.
  * This function is based on Babylon.js `AxesViewer`, axis texts are added manually.
  */
-export function showWorldCoordinates(scene: Scene, dimension: number) {
+export function showWorldCoordinates(dimension: number) {
   // make sure to remove already existing debug coordinate systems
-  hideWorldCoordinates(scene);
+  hideWorldCoordinates();
 
-  const worldCoordRoot = new TransformNode(_WORLD_COORD_ROOT_KEY, scene);
+  // draw in utility layer, so that there is no interaction with the actually scene content (eg: glb export, autofocus)
+  const utilityLayerScene = UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene;
+
+  const worldCoordRoot = new TransformNode('__world_coordinates__', utilityLayerScene);
   // axes viewer coordinate system is a bit too large
   // multiply with unify factor to create arrows which exactly match the length of the input dimension
   const factor = _getWorldCoordinatesAxesUnifyFactor();
-  _AXES_VIEWER = new AxesViewer(scene, dimension * factor);
+  _AXES_VIEWER = new AxesViewer(utilityLayerScene, dimension * factor);
 
-  _prepareWorldCoordinateAxis('X', _AXES_VIEWER.xAxis, worldCoordRoot, dimension, scene);
-  _prepareWorldCoordinateAxis('Y', _AXES_VIEWER.yAxis, worldCoordRoot, dimension, scene);
-  _prepareWorldCoordinateAxis('Z', _AXES_VIEWER.zAxis, worldCoordRoot, dimension, scene);
+  _prepareWorldCoordinateAxis('X', _AXES_VIEWER.xAxis, worldCoordRoot, dimension, utilityLayerScene);
+  _prepareWorldCoordinateAxis('Y', _AXES_VIEWER.yAxis, worldCoordRoot, dimension, utilityLayerScene);
+  _prepareWorldCoordinateAxis('Z', _AXES_VIEWER.zAxis, worldCoordRoot, dimension, utilityLayerScene);
 }
 
 /**
  * Remove meshes and materials that are associated with the debug world coordinates system
  */
-export function hideWorldCoordinates(scene: Scene) {
+export function hideWorldCoordinates() {
+  const utilityLayerScene = UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene;
+
   _AXES_VIEWER?.dispose();
 
-  const worldCoordRoot = scene.getTransformNodeByName(_WORLD_COORD_ROOT_KEY);
+  const worldCoordRoot = utilityLayerScene.getTransformNodeByName(_WORLD_COORD_ROOT_KEY);
   if (worldCoordRoot) {
     worldCoordRoot.dispose(false, true);
   }
 }
 
-/**
- * Checks if the node is generated by the `showWorldCoordinates` function.
- * These nodes need special treatment in certain cases, for example the `autofocusActiveCamera` function should ignore
- * the values and GLB exports should also not include the nodes.
- */
-export function isWorldCoordinatesDebugNode(nodeName: string) {
-  // ATM this is a plain name check, as we have some reserved names in the viewer (see Viewer.BOUNDING_BOX_NAME)
-  // Other solutions could be storing this info in the metadata or in a different global node store
-  return nodeName.startsWith(_WORLD_COORD_ROOT_KEY);
-}
-
 /**
  * Adjust and enhance coordinate axes to fulfill our needs.
  * - moves nodes into common root
@@ -70,26 +65,29 @@ function _prepareWorldCoordinateAxis(
   axis: TransformNode,
   root: TransformNode,
   dimension: number,
-  scene: Scene
+  utilityLayerScene: Scene
 ) {
   // create unique names
   axis.name = `${_WORLD_COORD_ROOT_KEY}.${text}`;
   axis.parent = root;
-  axis.getChildMeshes().forEach((child, idx) => (child.name = `${_WORLD_COORD_ROOT_KEY}.${text}.cylinder_${idx}`));
 
   // create text mesh via dynamic texture
-  const dynamicTexture = new DynamicTexture(`${_WORLD_COORD_ROOT_KEY}.${text}`, 50, scene, true);
+  const dynamicTexture = new DynamicTexture(`${_WORLD_COORD_ROOT_KEY}.${text}`, 50, utilityLayerScene, true);
   dynamicTexture.hasAlpha = true;
   // 42.5 is a magic offset, so that the text is vertically centered for font size 50px
   // horizontal centering works well with the standard behaviour of Babylon.js (setting "null" as "width")
   dynamicTexture.drawText(text, null, 42.5, 'bold 50px Arial', 'white', 'transparent', true);
 
-  const material = new StandardMaterial(`${_WORLD_COORD_ROOT_KEY}.${text}`, scene);
+  const material = new StandardMaterial(`${_WORLD_COORD_ROOT_KEY}.${text}`, utilityLayerScene);
   material.disableLighting = true;
   material.emissiveColor = _DEBUG_AXIS_MAP[text].color;
   material.diffuseTexture = dynamicTexture;
 
-  const plane = MeshBuilder.CreatePlane(`${_WORLD_COORD_ROOT_KEY}.${text}.TextPlane`, { size: dimension / 10 }, scene);
+  const plane = MeshBuilder.CreatePlane(
+    `${_WORLD_COORD_ROOT_KEY}.${text}.TextPlane`,
+    { size: dimension / 10 },
+    utilityLayerScene
+  );
   // make sure that text is located outside of arrow
   plane.position = _DEBUG_AXIS_MAP[text].position.multiplyByFloats(
     dimension * 1.05,

package/src/api/util/globalTypes.ts

@@ -22,6 +22,8 @@ type Color4 = import('@babylonjs/core/Maths/math.color').Color4;
 type Material = import('@babylonjs/core/Materials/material').Material;
 type PBRMaterial = import('@babylonjs/core/Materials/PBR/pbrMaterial').PBRMaterial;
 type StandardMaterial = import('@babylonjs/core/Materials/standardMaterial').StandardMaterial;
+type BackgroundMaterial = import('@babylonjs/core/Materials/Background/backgroundMaterial').BackgroundMaterial;
+type NodeMaterial = import('@babylonjs/core/Materials/Node').NodeMaterial;
 type DynamicTexture = import('@babylonjs/core/Materials/Textures/dynamicTexture').DynamicTexture;
 type Mesh = import('@babylonjs/core/Meshes/mesh').Mesh;
 type AbstractMesh = import('@babylonjs/core/Meshes/abstractMesh').AbstractMesh;

package/src/api/util/sceneLoaderHelper.ts

@@ -11,6 +11,7 @@ import { AssetContainer } from '@babylonjs/core/assetContainer';
 import { Node as BjsNode } from '@babylonjs/core/node';
 import { Scene } from '@babylonjs/core/scene';
 import { Nullable } from '@babylonjs/core/types';
+import { isArray, isString } from 'lodash-es';
 import has from 'lodash-es/has';
 
 // map for keeping track of active "node enable" observers
@@ -88,26 +89,59 @@ export const getMaterialPostLoadObserver = function (concerningMesh: Mesh) {
   };
 };
 
+type InstanceData = {
+  name: string;
+  tags?: string;
+};
+
+function _isMeshInstanceData(data: any): data is InstanceData {
+  const hasName = isString(data.name);
+  const hasValidTags = !data.tags || isString(data.tags);
+  return hasName && hasValidTags;
+}
+
+type MeshData = {
+  name: string;
+  materialId?: string;
+  instances?: unknown[];
+};
+
+function _isMeshData(data: any): data is MeshData {
+  const hasName = isString(data.name);
+  const hasValidMaterialId = !data.materialId || isString(data.materialId);
+
+  return hasName && hasValidMaterialId;
+}
+
+type DataWithMeshes = { meshes: unknown[] };
+
+function _isDataWithMeshes(data: any): data is DataWithMeshes {
+  return data && isArray(data.meshes);
+}
+
 /**
  * Internal function that compares the original meshes on a .babylon file with what was loaded,
  * and tags missing materials with respective metadata on respective meshes.
  * @param dataParsed original data
  * @param container  loaded data
  */
-export const addMissingMaterialMetadata = function (dataParsed: any, container: AssetContainer) {
-  container.meshes.forEach(currMeshImported => {
-    for (const currMeshOriginal of dataParsed.meshes) {
-      if (currMeshOriginal.name !== currMeshImported.name) continue;
-      // we're dealing with the original version of the current imported mesh now
-      // first save original material id of the imported babylon or GLB file
-      injectMetadata(currMeshImported, { [parsedMaterialIdMetadataName]: currMeshOriginal.materialId }, false);
-      const materialOnImportedMesh = currMeshImported.material?.id;
-      const materialOnOriginalMesh = currMeshOriginal.materialId;
-      if (!materialOnOriginalMesh || materialOnImportedMesh === materialOnOriginalMesh) continue;
-      // if we're here, the imported mesh has different material than original one
+export const addMissingMaterialMetadata = function (dataParsed: unknown, container: AssetContainer) {
+  if (!_isDataWithMeshes(dataParsed)) return;
+
+  const validatedMeshes = dataParsed.meshes.filter(_isMeshData);
+
+  container.meshes.forEach(importedMesh => {
+    const parsedMesh = validatedMeshes.find(mesh => mesh.name === importedMesh.name);
+
+    // save original material id of the imported babylon or GLB file
+    injectMetadata(importedMesh, { [parsedMaterialIdMetadataName]: parsedMesh?.materialId }, false);
+
+    const materialOnImportedMesh = importedMesh.material?.id;
+    const materialOnOriginalMesh = parsedMesh?.materialId;
+
+    if (materialOnOriginalMesh && materialOnImportedMesh !== materialOnOriginalMesh) {
       window.Cbn?.Assets.assertMaterialExists(materialOnOriginalMesh);
-      injectMetadata(currMeshImported, { [missingMaterialMetadataName]: materialOnOriginalMesh }, false);
-      break;
+      injectMetadata(importedMesh, { [missingMaterialMetadataName]: materialOnOriginalMesh }, false);
     }
   });
 };
@@ -124,7 +158,11 @@ export const addMissingMaterialMetadata = function (dataParsed: any, container:
  * @param dataParsed original data
  * @param container  loaded data
  */
-export const reconstructTagsForInstancedMeshes = function (dataParsed: any, container: AssetContainer) {
+export const reconstructTagsForInstancedMeshes = function (dataParsed: unknown, container: AssetContainer) {
+  if (!_isDataWithMeshes(dataParsed)) return;
+
+  const validatedMeshes = dataParsed.meshes.filter(_isMeshData);
+
   container.meshes.forEach(importedMesh => {
     if (importedMesh instanceof InstancedMesh) {
       // remove all tags from the imported mesh if there are some, since these tags are probably coming from the
@@ -134,12 +172,9 @@ export const reconstructTagsForInstancedMeshes = function (dataParsed: any, cont
         Tags.RemoveTagsFrom(importedMesh, importedTags);
 
         // get tags of parsed instanced mesh and set them on the imported instanced mesh
-        const parsedSourceMesh = dataParsed.meshes?.find(
-          (parsedMesh: any) => parsedMesh.name === importedMesh.sourceMesh.name
-        );
-        const parsedInstancedMesh = parsedSourceMesh?.instances.find(
-          (parsedMesh: any) => parsedMesh.name === importedMesh.name
-        );
+        const parsedSourceMesh = validatedMeshes.find(mesh => mesh.name === importedMesh.sourceMesh.name);
+        const validatedSourceMeshInstances = parsedSourceMesh?.instances?.filter(_isMeshInstanceData);
+        const parsedInstancedMesh = validatedSourceMeshInstances?.find(mesh => mesh.name === importedMesh.name);
         const parsedTags = parsedInstancedMesh?.tags;
         if (parsedTags) {
           Tags.AddTagsTo(importedMesh, parsedTags);

package/src/index.ts

@@ -27,10 +27,21 @@ import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
 import { Engine } from '@babylonjs/core/Engines/engine';
 import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight';
 import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';
-import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
-import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture';
-import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture';
-import { Texture } from '@babylonjs/core/Materials/Textures/texture';
+import { BackgroundMaterial } from '@babylonjs/core/Materials/Background/backgroundMaterial';
+import { NodeMaterial } from '@babylonjs/core/Materials/Node';
+
+/**
+ * Importing from .../PBR covers all PBR material types, also the deprecated ones like `PBRMetallicRoughnessMaterial`.
+ * In this way we can also load models which contain these PBR materials.
+ * Still we only actively use `PBRMaterial` in the viewer code base and we also only want to expose this one to the
+ * consumer.
+ */
+import { PBRMaterial } from '@babylonjs/core/Materials/PBR';
+
+/**
+ * Same story as for PBR materials, we want to support also textures but only want to expose a few of them
+ */
+import { CubeTexture, DynamicTexture, Texture } from '@babylonjs/core/Materials/Textures';
 import { Material } from '@babylonjs/core/Materials/material';
 import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color';
@@ -80,6 +91,8 @@ export {
   Material,
   PBRMaterial,
   StandardMaterial,
+  NodeMaterial,
+  BackgroundMaterial,
   Scene,
   Engine,
   ArcRotateCamera,