@combeenation/3d-viewer 12.1.2 → 12.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@combeenation/3d-viewer",
-  "version": "12.1.2",
+  "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 { 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,15 +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.id;
         // 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 && hasValidBBoxInfo && !hasInfiniteDistance && !isExcluded;
+        return isEnabled && hasValidBBoxInfo && !hasInfiniteDistance && !isExcluded;
       })
       .reduce(
         (accBBoxMinMax, curMesh, idx) => {
@@ -529,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;
   }
 
   /**
@@ -566,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
@@ -627,10 +619,17 @@ The inspector can only be used in development builds.`);
   }
 
   /**
-   * Show coordinate system with given dimension (for debugging purpose).
+   * 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();
   }
 
   /**

package/src/api/manager/gltfExportManager.ts

@@ -279,9 +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 (!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 };
@@ -16,27 +17,42 @@ const _DEBUG_AXIS_MAP: Record<DebugAxisKeys, DebugAxisConfig> = {
 };
 
 const _WORLD_COORD_ROOT_KEY = '__world_coordinates__';
+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) {
-  const existingRoot = scene.getTransformNodeByName(_WORLD_COORD_ROOT_KEY);
-  if (existingRoot) {
-    // make sure to remove already existing debug coordinate systems
-    existingRoot.dispose();
-  }
+export function showWorldCoordinates(dimension: number) {
+  // make sure to remove already existing debug coordinate systems
+  hideWorldCoordinates();
+
+  // 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_COORD_ROOT_KEY, scene);
+  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();
-  const axesViewer = new AxesViewer(scene, dimension * factor);
+  _AXES_VIEWER = new AxesViewer(utilityLayerScene, dimension * factor);
+
+  _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() {
+  const utilityLayerScene = UtilityLayerRenderer.DefaultUtilityLayer.utilityLayerScene;
+
+  _AXES_VIEWER?.dispose();
 
-  _prepareWorldCoordinateAxis('X', axesViewer.xAxis, worldCoordRoot, dimension, scene);
-  _prepareWorldCoordinateAxis('Y', axesViewer.yAxis, worldCoordRoot, dimension, scene);
-  _prepareWorldCoordinateAxis('Z', axesViewer.zAxis, worldCoordRoot, dimension, scene);
+  const worldCoordRoot = utilityLayerScene.getTransformNodeByName(_WORLD_COORD_ROOT_KEY);
+  if (worldCoordRoot) {
+    worldCoordRoot.dispose(false, true);
+  }
 }
 
 /**
@@ -49,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,