@combeenation/3d-viewer 12.2.0 → 12.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@combeenation/3d-viewer",
-  "version": "12.2.0",
+  "version": "12.2.1",
   "description": "Combeenation 3D Viewer",
   "homepage": "https://github.com/Combeenation/3d-viewer#readme",
   "bugs": {

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,