@combeenation/3d-viewer 9.1.0 → 9.2.0-beta1

package/package.json

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

package/src/api/manager/gltfExportManager.ts

@@ -1,3 +1,4 @@
+import { bakeGeometryOfAllMeshes } from '..//util/geometryHelper';
 import { Viewer } from '../classes/viewer';
 import { injectMetadata } from '../util/babylonHelper';
 import { isNodeIncludedInExclusionList } from '../util/structureHelper';
@@ -5,11 +6,10 @@ import { Engine } from '@babylonjs/core/Engines/engine';
 import { SceneLoader } from '@babylonjs/core/Loading/sceneLoader';
 import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
 import { Color3 } from '@babylonjs/core/Maths/math.color';
-import { Vector3 } from '@babylonjs/core/Maths/math.vector';
 import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
-import { Mesh } from '@babylonjs/core/Meshes/mesh';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import { SceneSerializer } from '@babylonjs/core/Misc/sceneSerializer';
+import { Scene } from '@babylonjs/core/scene';
 import { GLTF2Export, IExportOptions } from '@babylonjs/serializers/glTF/2.0';
 import { has, merge } from 'lodash-es';
 
@@ -162,7 +162,8 @@ export class GltfExportManager {
 
     if (optimizeForAR) {
       this.setUniqueMeshNames(copiedScene);
-      this.bakeTransformations(copiedScene);
+      // get rid of negative scalings and morph targets, since iOS can't handle it in the QuickLook app
+      bakeGeometryOfAllMeshes(copiedScene);
     }
 
     return { scene: copiedScene, sceneCopied: true };
@@ -199,10 +200,13 @@ export class GltfExportManager {
     }
 
     SceneLoader.ShowLoadingScreen = false;
-    const newScene = await SceneLoader.LoadAsync('', 'data:' + JSON.stringify(serializedScene), engine);
-    // this is required for offscreen canvas, otherwise the scene dispose code throws when trying to remove the cursor
-    // events
-    newScene.doNotHandleCursors = true;
+    const newScene = await SceneLoader.LoadAsync(
+      '',
+      'data:' + JSON.stringify(serializedScene),
+      engine,
+      undefined,
+      '.babylon'
+    );
 
     return newScene;
   }
@@ -297,28 +301,4 @@ export class GltfExportManager {
       currMesh.name = `${currMesh.name}_${currMesh.uniqueId}`;
     });
   }
-
-  /**
-   * Stores the effect of all mesh transformations in their geometry and reset the transformation afterwards.
-   * In this way negative scalings which lead to problems in AR on iOS devices can be eliminated.
-   */
-  protected bakeTransformations(scene: Scene): void {
-    scene.meshes.forEach(mesh => {
-      if (mesh instanceof Mesh && mesh.geometry) {
-        // geometries can be shared across multiple meshes, first make them unique to avoid side-effects
-        mesh.makeGeometryUnique();
-        // this is the core functionality for storing the transformation data in the mesh geometry
-        mesh.bakeCurrentTransformIntoVertices();
-      }
-    });
-
-    // some nodes (mostly transform nodes), are not affected by the baking algorithm since they have no geometry
-    // => reset their transformation manually
-    const allNodes = scene.getNodes().filter(node => node instanceof TransformNode) as TransformNode[];
-    allNodes.forEach(node => {
-      node.position = new Vector3(0, 0, 0);
-      node.rotation = new Vector3(0, 0, 0);
-      node.scaling = new Vector3(1, 1, 1);
-    });
-  }
 }

package/src/api/util/geometryHelper.ts

@@ -0,0 +1,136 @@
+import { MorphTargetManager } from '@babylonjs/core';
+import { VertexBuffer } from '@babylonjs/core/Buffers/buffer';
+import { Vector3 } from '@babylonjs/core/Maths/math.vector';
+import type { Geometry } from '@babylonjs/core/Meshes';
+import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh';
+import { Mesh } from '@babylonjs/core/Meshes/mesh';
+import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import type { MorphTarget } from '@babylonjs/core/Morph';
+import type { FloatArray } from '@babylonjs/core/types';
+
+/**
+ * Removes morph targets and sets transformation values back to their default values.
+ * The effects from morph targets and tranformation values will be "baked" in the geometry, so that the final appearance
+ * of the meshes stay the same.
+ */
+const bakeGeometryOfAllMeshes = function (scene: Scene) {
+  // instanced meshes have to be converted, since they share the geometry of the source mesh, which would lead to issues
+  // when baking the transformation values
+  scene.meshes.forEach(mesh => {
+    if (mesh instanceof InstancedMesh) {
+      convertInstancedMeshToMesh(mesh);
+    }
+  });
+
+  // do the geometry baking for all meshes in the scene
+  scene.meshes.forEach(mesh => {
+    if (mesh instanceof Mesh) {
+      bakeGeometryOfMesh(mesh);
+    }
+  });
+
+  // some nodes (mostly transform nodes), are not affected by the baking algorithm since they have no geometry
+  // => reset their transformation manually
+  const allNodes = scene.getNodes().filter(node => node instanceof TransformNode) as TransformNode[];
+  allNodes.forEach(node => {
+    resetTransformation(node);
+  });
+};
+
+const convertInstancedMeshToMesh = function (instancedMesh: InstancedMesh) {
+  // first create a clone of the source mesh
+  const newMesh = instancedMesh.sourceMesh.clone(`${instancedMesh.name}`, instancedMesh.parent);
+  // apply the transformation data
+  newMesh.position = instancedMesh.position;
+  newMesh.rotation = instancedMesh.rotation;
+  newMesh.rotationQuaternion = instancedMesh.rotationQuaternion;
+  newMesh.scaling = instancedMesh.scaling;
+  // also sync the enabled state from the original instanced mesh
+  newMesh.setEnabled(instancedMesh.isEnabled(false));
+
+  // re-assign children of the original mesh, since that one won't be used anymore
+  instancedMesh.getChildren(undefined).forEach(childNode => (childNode.parent = newMesh));
+  // finally delete the original instanced mesh
+  instancedMesh.dispose();
+};
+
+const bakeGeometryOfMesh = function (mesh: Mesh) {
+  if (!mesh.geometry) {
+    // no geometry available, nothing to do
+    return;
+  }
+
+  // geometries can be shared across multiple meshes, first make them unique to avoid side-effects
+  mesh.makeGeometryUnique();
+
+  const morphTargetManager = mesh.morphTargetManager;
+  const geometry = mesh.geometry;
+
+  if (morphTargetManager?.numTargets) {
+    // apply morph target vertices data to mesh geometry
+    // mostly only the "PositionKind" is implemented
+    bakeMorphTargetManagerIntoVertices(VertexBuffer.PositionKind, morphTargetManager, geometry);
+    bakeMorphTargetManagerIntoVertices(VertexBuffer.NormalKind, morphTargetManager, geometry);
+    bakeMorphTargetManagerIntoVertices(VertexBuffer.TangentKind, morphTargetManager, geometry);
+    bakeMorphTargetManagerIntoVertices(VertexBuffer.UVKind, morphTargetManager, geometry);
+
+    // remove morph target manager with all it's morph targets
+    mesh.morphTargetManager = null;
+  }
+
+  // bake the transformation data in the mesh geometry, fortunately there is already a help function from Babylon.js
+  mesh.bakeCurrentTransformIntoVertices();
+};
+
+const bakeMorphTargetManagerIntoVertices = function (
+  kind: string,
+  morphTargetManager: MorphTargetManager,
+  geometry: Geometry
+) {
+  const origVerticesData = geometry.getVerticesData(kind);
+  if (!origVerticesData) {
+    // no vertices data for this kind availabe on the mesh geometry
+    return;
+  }
+
+  let verticesData = [...origVerticesData];
+  for (let i = 0; i < morphTargetManager.numTargets; i++) {
+    const target = morphTargetManager.getTarget(i);
+    const targetVerticesData = getVerticesDataFromMorphTarget(kind, target);
+    if (targetVerticesData) {
+      // vertices data of this kind are implemented on the morph target
+      // add the influence of this morph target to the vertices data
+      // formula is taken from: https://doc.babylonjs.com/features/featuresDeepDive/mesh/morphTargets#basics
+      verticesData = verticesData.map(
+        (oldVal, idx) => oldVal + (targetVerticesData[idx] - origVerticesData[idx]) * target.influence
+      );
+    }
+  }
+
+  // apply the updated vertices data
+  geometry.setVerticesData(kind, verticesData);
+};
+
+const getVerticesDataFromMorphTarget = function (kind: string, morphTarget: MorphTarget): Nullable<FloatArray> {
+  switch (kind) {
+    case 'position':
+      return morphTarget.getPositions();
+    case 'normal':
+      return morphTarget.getNormals();
+    case 'tangent':
+      return morphTarget.getTangents();
+    case 'uv':
+      return morphTarget.getUVs();
+  }
+
+  return null;
+};
+
+const resetTransformation = function (node: TransformNode) {
+  node.position = new Vector3(0, 0, 0);
+  node.rotation = new Vector3(0, 0, 0);
+  node.rotationQuaternion = null;
+  node.scaling = new Vector3(1, 1, 1);
+};
+
+export { bakeGeometryOfAllMeshes };

package/src/api/util/structureHelper.ts

@@ -13,7 +13,11 @@ import { Tags } from '@babylonjs/core/Misc/tags';
  */
 const isNodeIncludedInExclusionList = function (node: TransformNode, list: ExcludedGeometryList): boolean {
   const checkNode = (inputNode: TransformNode, nodeToCheck: TransformNode) => {
-    return inputNode.uniqueId === nodeToCheck.uniqueId;
+    // return inputNode.uniqueId === nodeToCheck.uniqueId;
+    // check name instead of unique id, since the unique id changes when copying the scene, which is the case in the
+    // GLB export
+    const nodeName = nodeToCheck.metadata?.[GltfExportManager.NAME_BEFORE_EXPORT_METADATA_PROPERTY] ?? nodeToCheck.name;
+    return inputNode.name === nodeName;
   };
   const checkElement = (inputEl: Element, nodeToCheck: TransformNode) => {
     return inputEl.nodesFlat.some(m => checkNode(m, nodeToCheck));