@combeenation/3d-viewer 12.0.0 → 12.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@combeenation/3d-viewer",
-  "version": "12.0.0",
+  "version": "12.0.2",
   "description": "Combeenation 3D Viewer",
   "homepage": "https://github.com/Combeenation/3d-viewer#readme",
   "bugs": {
@@ -47,11 +47,8 @@
   "prettier": "@combeenation/prettier-config",
   "dependencies": {
     "@babylonjs/core": "6.27.1",
-    "@babylonjs/inspector": "6.27.1",
     "@babylonjs/loaders": "6.27.1",
     "@babylonjs/materials": "6.27.1",
-    "@babylonjs/node-editor": "6.27.1",
-    "@babylonjs/node-geometry-editor": "6.27.1",
     "@babylonjs/serializers": "6.27.1",
     "eventemitter3": "4.0.7",
     "gsap": "3.11.2",
@@ -81,5 +78,13 @@
     "webpack-cli": "4.10.0",
     "webpack-dev-server": "4.11.1",
     "webpack-merge": "5.8.0"
+  },
+  "optionalDependencies": {
+    "@babylonjs/inspector": "6.27.1",
+    "@babylonjs/node-editor": "6.27.1",
+    "@babylonjs/node-geometry-editor": "6.27.1"
+  },
+  "optionalDependenciesComments": {
+    "@babylonjs": "Defining the inspector package (and it's dependencies) as optional is required to omit these packages in the production build of the CBN react-app (see CB-9269)"
   }
 }

package/src/api/classes/viewer.ts

@@ -7,6 +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 { getIsScaledDownDevice } from '../util/deviceHelper';
 import { debounce, loadJson } from '../util/resourceHelper';
 import { getCustomCbnBabylonLoaderPlugin } from '../util/sceneLoaderHelper';
@@ -27,9 +28,6 @@ import { EnvironmentHelper } from '@babylonjs/core/Helpers/environmentHelper';
 import { PhotoDome } from '@babylonjs/core/Helpers/photoDome';
 import { HighlightLayer } from '@babylonjs/core/Layers/highlightLayer';
 import { ISceneLoaderPlugin, SceneLoader } from '@babylonjs/core/Loading/sceneLoader';
-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 { Mesh } from '@babylonjs/core/Meshes/mesh';
 import { ScreenshotTools } from '@babylonjs/core/Misc/screenshotTools';
@@ -632,64 +630,7 @@ The inspector can only be used in development builds.`);
    * Show coordinate system with given dimension (for debugging purpose).
    */
   public showWorldCoordinates(dimension: number) {
-    const scene = this.scene;
-    const makeTextPlane = function (text: string, color: string, size: number) {
-      const dynamicTexture = new DynamicTexture('DynamicTexture', 50, scene, true);
-      dynamicTexture.hasAlpha = true;
-      dynamicTexture.drawText(text, 5, 40, 'bold 36px Arial', color, 'transparent', true);
-      const plane = Mesh.CreatePlane('TextPlane', size, scene, true);
-      plane.material = new StandardMaterial('TextPlaneMaterial', scene);
-      plane.material.backFaceCulling = false;
-      (plane.material as StandardMaterial).specularColor = new Color3(0, 0, 0);
-      (plane.material as StandardMaterial).diffuseTexture = dynamicTexture;
-      return plane;
-    };
-
-    const axisX = Mesh.CreateLines(
-      'axisX',
-      [
-        Vector3.Zero(),
-        new Vector3(dimension, 0, 0),
-        new Vector3(dimension * 0.95, 0.05 * dimension, 0),
-        new Vector3(dimension, 0, 0),
-        new Vector3(dimension * 0.95, -0.05 * dimension, 0),
-      ],
-      scene,
-      false
-    );
-    axisX.color = new Color3(1, 0, 0);
-    const xChar = makeTextPlane('X', 'red', dimension / 10);
-    xChar.position = new Vector3(0.9 * dimension, -0.05 * dimension, 0);
-    const axisY = Mesh.CreateLines(
-      'axisY',
-      [
-        Vector3.Zero(),
-        new Vector3(0, dimension, 0),
-        new Vector3(-0.05 * dimension, dimension * 0.95, 0),
-        new Vector3(0, dimension, 0),
-        new Vector3(0.05 * dimension, dimension * 0.95, 0),
-      ],
-      scene,
-      false
-    );
-    axisY.color = new Color3(0, 1, 0);
-    const yChar = makeTextPlane('Y', 'green', dimension / 10);
-    yChar.position = new Vector3(0, 0.9 * dimension, -0.05 * dimension);
-    const axisZ = Mesh.CreateLines(
-      'axisZ',
-      [
-        Vector3.Zero(),
-        new Vector3(0, 0, dimension),
-        new Vector3(0, -0.05 * dimension, dimension * 0.95),
-        new Vector3(0, 0, dimension),
-        new Vector3(0, 0.05 * dimension, dimension * 0.95),
-      ],
-      scene,
-      false
-    );
-    axisZ.color = new Color3(0, 0, 1);
-    const zChar = makeTextPlane('Z', 'blue', dimension / 10);
-    zChar.position = new Vector3(0, 0.05 * dimension, 0.9 * dimension);
+    showWorldCoordinates(this.scene, dimension);
   }
 
   /**

package/src/api/util/debugHelper.ts

@@ -0,0 +1,102 @@
+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 { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
+import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+
+type DebugAxisKeys = 'X' | 'Y' | 'Z';
+type DebugAxisConfig = { color: Color3; position: Vector3 };
+
+const _DEBUG_AXIS_MAP: Record<DebugAxisKeys, DebugAxisConfig> = {
+  X: { color: Color3.Red().scale(0.5), position: new Vector3(1, 0, 0) },
+  Y: { color: Color3.Green().scale(0.5), position: new Vector3(0, 1, 0) },
+  Z: { color: Color3.Blue().scale(0.5), position: new Vector3(0, 0, 1) },
+};
+
+const _WORLD_COORD_ROOT_KEY = '__world_coordinates__';
+
+/**
+ * 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();
+  }
+
+  const worldCoordRoot = new TransformNode(_WORLD_COORD_ROOT_KEY, scene);
+  // 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);
+
+  _prepareWorldCoordinateAxis('X', axesViewer.xAxis, worldCoordRoot, dimension, scene);
+  _prepareWorldCoordinateAxis('Y', axesViewer.yAxis, worldCoordRoot, dimension, scene);
+  _prepareWorldCoordinateAxis('Z', axesViewer.zAxis, worldCoordRoot, dimension, scene);
+}
+
+/**
+ * Adjust and enhance coordinate axes to fulfill our needs.
+ * - moves nodes into common root
+ * - adds text node
+ */
+function _prepareWorldCoordinateAxis(
+  text: 'X' | 'Y' | 'Z',
+  axis: TransformNode,
+  root: TransformNode,
+  dimension: number,
+  scene: 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);
+  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);
+  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);
+  // make sure that text is located outside of arrow
+  plane.position = _DEBUG_AXIS_MAP[text].position.multiplyByFloats(
+    dimension * 1.05,
+    dimension * 1.05,
+    dimension * 1.05
+  );
+  plane.parent = root;
+  plane.material = material;
+  // will be rendered on top of "default" meshes => taken from Babylon.js repo "AxesViewer" implementation
+  plane.renderingGroupId = 2;
+  // setting billboard mode ensures, that the text is always readable
+  plane.billboardMode = TransformNode.BILLBOARDMODE_ALL;
+}
+
+/**
+ * Calculate factor for creating world coordinate axes with exactly one unit in length
+ */
+function _getWorldCoordinatesAxesUnifyFactor() {
+  // These constants are taken from the Babylon.js repository
+  const coneZPosOffset = 0.3;
+  const coneHeight = 0.075;
+  const baseScaling = 4;
+
+  // cone is moved 0.3 units away from the center
+  // the origin of the cone will be located on 1.2, if combined with the base scaling of 4
+  // invert that offset to get the origin to 1
+  // also consider the cone height to move the tip of the cone to 1 instead the center
+  const factor = 1 / ((coneZPosOffset + coneHeight / 2) * baseScaling);
+
+  return factor;
+}