@combeenation/3d-viewer 12.0.1 → 12.1.0-beta1

package/package.json

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

package/src/api/classes/element.ts

@@ -71,6 +71,41 @@ export class Element extends VariantParameterizable {
       };
       return cloneTransformNode(node, nodeNamingStrategy, this.filterNode.bind(this), true);
     });
+
+    // when cloning an instanced mesh the source mesh is still referencing to the source of the original mesh
+    // this is wrong, as we want to reference the cloned source
+    // this can only be done after the cloning process of the whole tree is finished, as we can't be sure if all
+    // instanced meshes or all sources meshes are cloning prior
+    const reassignSourceMesh = (node: TransformNode) => {
+      if (node.constructor.name === 'InstancedMesh') {
+        // find the cloned instance and source mesh
+        const clonedInstance = node as InstancedMesh;
+        const originalInstance = clonedInstance.metadata.cloneSource as InstancedMesh;
+        const originalSource = originalInstance.sourceMesh;
+        const clonedSource = originalSource.metadata.cloneTarget;
+        // it's not possible to just exchange the source mesh => readonly property
+        // we have to create a new clone with the correct source mesh
+        const exchangedInstance = clonedInstance.clone(clonedInstance.name, clonedInstance.parent, true, clonedSource);
+
+        // re-reference the childs of the cloned instance as well
+        const childs = clonedInstance.getChildTransformNodes(true);
+        childs.forEach(child => (child.parent = exchangedInstance));
+
+        // old instance mesh is not needed anymore and can be disposed
+        clonedInstance.dispose();
+      }
+
+      // recurse into childs
+      const children = node.getChildTransformNodes(true);
+      children.forEach(reassignSourceMesh);
+    };
+
+    nodes.forEach(node => {
+      if (node) {
+        reassignSourceMesh(node);
+      }
+    });
+
     this.nodes = nodes.filter(node => !!node) as TransformNode[];
     this._dottedNodes = mapToDottedNodes<TransformNode>(this.nodes, node => node instanceof TransformNode);
     variant.broadcastEvent(Event.ELEMENT_NODES_CLONED, this);

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/babylonHelper.ts

@@ -110,17 +110,13 @@ const cloneTransformNode = function (
     clone.id = newName;
     clone.metadata = cloneDeep(node.metadata);
     injectMetadata(clone, { cloneSource: node }, false);
+    injectMetadata(node, { cloneTarget: clone }, false);
     // if the cloned node is of type InstancedMesh, due to a bug(?),
     // the InstancedMesh.isEnabled state may have changed after cloning.
     // in that case, set the clone's enabled state to the original's state
     if (node.constructor.name === 'InstancedMesh') {
       clone.setEnabled(node.isEnabled(false));
     }
-    // copying tags is a temporary workaround, as it doesn't work for TransformNodes ATM
-    // see https://forum.babylonjs.com/t/transformnode-clone-doesnt-contain-original-tags/38429/1
-    if (Tags?.HasTags(node)) {
-      Tags.AddTagsTo(clone, Tags.GetTags(node, true));
-    }
   }
   if (deep) {
     const children = node.getChildTransformNodes(true);

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;
+}

package/src/api/util/geometryHelper.ts

@@ -48,6 +48,20 @@ const bakeGeometryOfMesh = function (mesh: Mesh) {
   // geometries can be shared across multiple meshes, first make them unique to avoid side-effects
   mesh.makeGeometryUnique();
 
+  // Babylon.js already provides a function for baking the current skeleton changes into the geometry
+  if (mesh.skeleton) {
+    mesh.applySkeleton(mesh.skeleton);
+    mesh.skeleton = null;
+  }
+
+  // NOTE: in difference to skeletons and transformations there is no baking function for morph targets (yet)
+  // however another approach could be to re-apply the position and normals data, as there are nice functions for it
+  // - `getPositionData(applySkeleton: boolean = false, applyMorph: boolean = false)`
+  // - `getNormalsData(applySkeleton: boolean = false, applyMorph: boolean = false)`
+  // you can decide if skeletons and morph targets can be added, which is exactly what we want
+  // I'm still hesitant to use it because "tangent" and "UV" kinds are not supported, whereas I'm not sure if it's
+  // required
+  // => try it out when there is enough time for detailed regression tests!
   const morphTargetManager = mesh.morphTargetManager;
   const geometry = mesh.geometry;
 

package/src/api/util/sceneLoaderHelper.ts

@@ -18,6 +18,7 @@ const enableObserverMap: {
 } = {};
 
 export const missingMaterialMetadataName = 'missingMaterial';
+export const parsedMaterialIdMetadataName = 'parsedMaterialId';
 
 /**
  * Create and return a custom loader plugin to be registered with SceneLoader, that allows
@@ -96,6 +97,8 @@ export const addMissingMaterialMetadata = function (dataParsed: any, container:
     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 });
       const materialOnImportedMesh = currMeshImported.material?.id;
       const materialOnOriginalMesh = currMeshOriginal.materialId;
       if (!materialOnOriginalMesh || materialOnImportedMesh === materialOnOriginalMesh) continue;