@combeenation/3d-viewer 12.4.1 → 13.0.0

package/src/dev.ts

@@ -1,29 +1,19 @@
-import { Emitter, Event, Viewer } from '.';
+import { Viewer } from '.';
 import {
-  afterBootstrap,
-  beforeBootstrap,
-  createSpec,
-  createTagManagerParameterValues,
+  afterViewerSetup,
   createUIelements,
+  getDefaultSceneSettings,
   getMaterial,
-  mockMaterials,
+  getViewerSettings,
 } from '../assets/index';
+import { mockMaterials } from '../assets/mock-materials';
 import { set } from 'lodash-es';
 
-const loadingElement = document.getElementById('loading') as HTMLDivElement;
-
-Emitter.on(Event.BOOTSTRAP_START, () => {
-  loadingElement!.style.display = 'block';
-});
-Emitter.on(Event.BOOTSTRAP_END, () => {
-  loadingElement!.style.display = 'none';
-});
-
 document.addEventListener('DOMContentLoaded', main);
 
 window.Cbn = {
   Assets: {
-    async getMaterial(materialId: string) {
+    async getMaterial(materialId: string): Promise<object> {
       //! this creates a new function on the object that uses the imported function of the same name..
       const material = await getMaterial(materialId);
       if (material) return material;
@@ -34,11 +24,10 @@ window.Cbn = {
     assertMaterialExists(materialId: string): boolean {
       return true;
     },
-    reportDuplicateNodeName(nodeNameOrArrayOfNodeNames: string | string[]): void {},
   },
   utils: {
     Viewer3dHelper: {
-      getCfgrParentDomElementForInspector() {
+      getCfgrParentDomElementForInspector(): HTMLElement | undefined {
         // render in parent of viewer
         return document.querySelector<HTMLElement>('display-container') ?? undefined;
       },
@@ -46,25 +35,13 @@ window.Cbn = {
   },
 };
 
-async function main() {
-  const viewer = await bootstrapViewer();
-  // "Export" for console testing...
-  set(window, 'viewer', viewer);
-}
-
-async function bootstrapViewer() {
+async function main(): Promise<void> {
   const canvas = document.getElementById('babylon-canvas') as HTMLCanvasElement;
-  if (!canvas) {
-    throw new Error('Missing "canvas" element');
-  }
-  const viewer = new Viewer(canvas, createSpec());
-  await beforeBootstrap(viewer);
-  try {
-    await viewer.bootstrap(createTagManagerParameterValues(viewer));
-  } catch (e) {
-    console.error(e);
-  }
-  await afterBootstrap(viewer);
+  const viewer = new Viewer(canvas, getViewerSettings(), getDefaultSceneSettings());
+
+  await afterViewerSetup(viewer);
   await createUIelements(viewer);
-  return viewer;
+
+  // "Export" for console testing...
+  set(window, 'viewer', viewer);
 }

package/src/{types.d.ts → globalTypes.d.ts}

@@ -1,6 +1,9 @@
-/** @ignore **/
-declare let IS_PRODUCTION: boolean;
-declare let VERSION_INFORMATION: string;
+/**
+ * Enhancement of Typescripts default `Partial` typing, which only creates shallow partials
+ */
+type DeepPartial<T> = {
+  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
 
 interface Window {
   Cbn:
@@ -8,39 +11,26 @@ interface Window {
     | {
         Assets: {
           /**
-           * Retrieve material definition from configurator\
+           * Retrieve material definition from configurator.
            * Implementation depends on the Combeenation environment the viewer is used in
            * - Configurator: Access pre-fetched material JSON objects from Cbn client => synchronous
            * - Asset Editor: Load content from material asset on demand => asynchronous!
            *
-           * @param materialId
-           *
            * @return Undefined if no definition for the given material name exists, otherwise an "JSON object" which can
            *         be passed to `BABYLON.Material.Parse` to create a runtime material object.
            */
           getMaterial(materialId: string): Promise<object | undefined>;
 
           /**
-           * Checks if a definition for a given material name exists in the configurator and issues a warning if not.
-           *
-           * @param materialId
+           * Checks if a definition for a given material name exists in the configurator and issues a warning if not
            */
           assertMaterialExists(materialId: string): boolean;
-
-          /**
-           * Warns user about duplicate nodeNames on scene.
-           *
-           * @param nodeNameOrArrayOfNodeNames
-           */
-          reportDuplicateNodeName(nodeNameOrArrayOfNodeNames: string | string[]): void;
         };
         utils: {
           Viewer3dHelper: {
             /**
              * Returns parent DOM element of a Combeenation configurator, which can be used as root for the inspector.
              * Also adjusts styling of some configurator parent sub elements to fix the inspector layout.
-             *
-             * @return
              */
             getCfgrParentDomElementForInspector(): HTMLElement | undefined;
           };

package/src/index.ts

@@ -1,116 +1,82 @@
-/// <reference path="api/util/globalTypes.ts" />
-/// <reference path="types.d.ts" />
-/// <reference types="gsap" />
-import { AnimationInterface } from './api/classes/animationInterface';
-import { Element } from './api/classes/element';
-import { Event, emitter } from './api/classes/event';
-import { EventBroadcaster } from './api/classes/eventBroadcaster';
-import { Parameter } from './api/classes/parameter';
-import { ParameterObservable } from './api/classes/parameterObservable';
-import { Parameterizable } from './api/classes/parameterizable';
-import { PlacementAnimation } from './api/classes/placementAnimation';
-import { Variant } from './api/classes/variant';
-import { VariantInstance } from './api/classes/variantInstance';
-import { VariantParameterizable } from './api/classes/variantParameterizable';
-import { Viewer } from './api/classes/viewer';
-import { ViewerError, ViewerErrorIds } from './api/classes/viewerError';
-import { ViewerLight } from './api/classes/viewerLight';
-import { AnimationManager } from './api/manager/animationManager';
-import { GltfExportManager } from './api/manager/gltfExportManager';
-import { SceneManager } from './api/manager/sceneManager';
-import { TagManager } from './api/manager/tagManager';
-import { VariantInstanceManager } from './api/manager/variantInstanceManager';
-import { SpecStorage } from './api/store/specStorage';
-import * as BabylonHelper from './api/util/babylonHelper';
-import { Animation as BabylonAnimation } from '@babylonjs/core/Animations/animation';
-import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
-import { Engine } from '@babylonjs/core/Engines/engine';
-import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight';
-import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';
-import { BackgroundMaterial } from '@babylonjs/core/Materials/Background/backgroundMaterial';
-import { NodeMaterial } from '@babylonjs/core/Materials/Node';
+/// <reference path="globalTypes.d.ts" />
+// Babylon.js extensions
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_clearcoat';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_ior';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_pbrSpecularGlossiness';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_sheen';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_specular';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_translucency';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_transmission';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_unlit';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_variants';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_basisu';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_transform';
+import '@babylonjs/serializers/glTF/2.0/Extensions/KHR_texture_transform';
 
-/**
- * Importing from .../PBR covers all PBR material types, also the deprecated ones like `PBRMetallicRoughnessMaterial`.
- * In this way we can also load models which contain these PBR materials.
- * Still we only actively use `PBRMaterial` in the viewer code base and we also only want to expose this one to the
- * consumer.
- */
-import { PBRMaterial } from '@babylonjs/core/Materials/PBR';
+// Babylon.js modules
+// All used Babylyon.js modules should be re-exported here.
+// In this way consumers have access to all of them as well via an import of "@combeenation/3d-viewer" instead of having
+// to make single imports from "@babylonjs/..."
+// When using Babylon.js modules inside the viewer repo make sure to import from the viewer root as well.
+// E.g. `import { BaseTexture, Material, Node } from '../index';`
+export * from '@babylonjs/core/abstractScene';
+export * from '@babylonjs/core/Animations';
+export * from '@babylonjs/core/assetContainer';
+export * from '@babylonjs/core/Buffers';
+export * from '@babylonjs/core/Cameras/arcRotateCamera';
+export * from '@babylonjs/core/Cameras/camera';
+export * from '@babylonjs/core/Culling';
+export * from '@babylonjs/core/Debug/axesViewer';
+export * from '@babylonjs/core/Debug/debugLayer';
+export * from '@babylonjs/core/Engines/engine';
+export * from '@babylonjs/core/Engines/thinEngine';
+export * from '@babylonjs/core/Lights';
+export * from '@babylonjs/core/Loading';
+export * from '@babylonjs/core/Materials/material';
+export * from '@babylonjs/core/Materials/PBR';
+export * from '@babylonjs/core/Materials/standardMaterial';
+export * from '@babylonjs/core/Materials/Textures';
+export * from '@babylonjs/core/Maths';
+export * from '@babylonjs/core/Meshes/abstractMesh';
+export * from '@babylonjs/core/Meshes/geometry';
+export * from '@babylonjs/core/Meshes/instancedMesh';
+export * from '@babylonjs/core/Meshes/mesh';
+export * from '@babylonjs/core/Meshes/meshBuilder';
+export * from '@babylonjs/core/Meshes/transformNode';
+export * from '@babylonjs/core/Misc/interfaces/screenshotSize';
+export * from '@babylonjs/core/Misc/screenshotTools';
+export * from '@babylonjs/core/Morph';
+export * from '@babylonjs/core/node';
+export * from '@babylonjs/core/Rendering/utilityLayerRenderer';
+export * from '@babylonjs/core/scene';
+export * from '@babylonjs/core/types';
+export * from '@babylonjs/loaders/glTF/2.0/glTFLoader';
+export * from '@babylonjs/serializers/glTF/2.0/glTFSerializer';
 
-/**
- * Same story as for PBR materials, we want to support also textures but only want to expose a few of them
- */
-import { CubeTexture, DynamicTexture, Texture } from '@babylonjs/core/Materials/Textures';
-import { Material } from '@babylonjs/core/Materials/material';
-import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
-import { Color3, Color4 } from '@babylonjs/core/Maths/math.color';
-import { Vector3 } from '@babylonjs/core/Maths/math.vector';
-import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
-import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh';
-import { Mesh } from '@babylonjs/core/Meshes/mesh';
-import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
-import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+// Additional Babylon.js modules
+// These are not used in the "@combeenation/3d-viewer" repository directly, but required in consuming code for various
+// reasons
+// for checking camera collions with ground and wall meshes
+export * from '@babylonjs/core/Collisions';
+// for Scene.createDefaultEnvironment
+export * from '@babylonjs/core/Helpers/sceneHelpers';
+// support BackgroundMaterial on Combeenation platform
+export * from '@babylonjs/core/Materials/Background';
+// support NodeMaterial on Combeenation platform
+export * from '@babylonjs/core/Materials/Node';
 
-/**
- * Without explicitly importing the "BoundingBoxRenderer", we're getting "scene.getBoundingBoxRenderer is undefined"
- * errors when creating HighlightLayer instances. Not sure why but those errors only happen when using the built
- * version of the viewer (e.g. when pulling it from NPM etc.)...
- */
-import '@babylonjs/core/Rendering/boundingBoxRenderer';
-import { Node } from '@babylonjs/core/node';
-import { Scene } from '@babylonjs/core/scene';
-import { EventEmitter } from 'eventemitter3';
-
-/**
- * Expose some frequently used babylon modules by our consumers.
- */
-export {
-  AnimationManager,
-  AnimationInterface,
-  Variant,
-  VariantInstanceManager,
-  Viewer,
-  ParameterObservable,
-  Parameterizable,
-  VariantParameterizable,
-  ViewerLight,
-  emitter as Emitter,
-  EventEmitter,
-  Event,
-  Parameter,
-  VariantInstance,
-  Color3,
-  Color4,
-  Vector3,
-  AbstractMesh,
-  InstancedMesh,
-  Mesh,
-  TransformNode,
-  Node,
-  Material,
-  PBRMaterial,
-  StandardMaterial,
-  NodeMaterial,
-  BackgroundMaterial,
-  Scene,
-  Engine,
-  ArcRotateCamera,
-  DynamicTexture,
-  CubeTexture,
-  MeshBuilder,
-  Texture,
-  BabylonAnimation,
-  HemisphericLight,
-  DirectionalLight,
-  Element,
-  EventBroadcaster,
-  SceneManager,
-  PlacementAnimation,
-  BabylonHelper,
-  GltfExportManager,
-  SpecStorage,
-  TagManager,
-  ViewerError,
-  ViewerErrorIds,
-};
+// Viewer modules
+// all viewer modules that are not located in "internal" should be exported from here
+export * from './viewer';
+export * from './viewerError';
+export * from './manager/cameraManager';
+export * from './manager/debugManager';
+export * from './manager/eventManager';
+export * from './manager/gltfExportManager';
+export * from './manager/materialManager';
+export * from './manager/modelManager';
+export * from './manager/parameterManager';
+export * from './manager/sceneManager';
+export * from './manager/screenshotManager';
+export * from './manager/textureManager';

package/src/internal/cbnCustomBabylonLoaderPlugin.ts

@@ -0,0 +1,149 @@
+import { AssetContainer, ISceneLoaderPlugin, InstancedMesh, Scene, SceneLoader } from '../index';
+import { cloneMorphTargetManager } from './cloningHelper';
+import { setInternalMetadataValue } from './metadataHelper';
+import { deleteAllTags, getTags, setTagsAsString } from './tagsHelper';
+import { isArray, isString } from 'lodash-es';
+
+/**
+ * Create and return a custom loader plugin to be registered with SceneLoader, that allows
+ * us to run our own code against the input data before using the standard procedure to
+ * import.
+ * The main use case is to mark missing material in meshes, which will get loaded on demand at the first time the
+ * dedicated mesh gets visible.
+ * This is the case if the babylon file is a Combeenation "3d asset" which comes without materials, as the materials
+ * are defined as "material assets".
+ */
+export function registerCustomCbnBabylonLoaderPlugin(): void {
+  // get original plugin for babylon files
+  // we only want to manipulate Combeenation 3d assets, which are represented as babylon files
+  // the plugin is not used for GLB files, "local" babylon are also not really affected by this plugin
+  const previousLoaderPlugin = SceneLoader.GetPluginForExtension('.babylon') as ISceneLoaderPlugin;
+
+  const customLoader: ISceneLoaderPlugin = {
+    name: 'cbnCustomBabylonLoader',
+    extensions: '.babylon',
+    importMesh: previousLoaderPlugin.importMesh,
+    load: previousLoaderPlugin.load,
+    loadAssetContainer: function (scene, data, rootUrl, onError) {
+      const dataParsed = JSON.parse(data);
+      const importedContainer = previousLoaderPlugin.loadAssetContainer(scene, data, rootUrl);
+
+      _addMissingMaterialMetadata(dataParsed, importedContainer);
+      _reconstructTagsForInstancedMeshes(dataParsed, importedContainer);
+      _unifyMorphTargetManagerIds(importedContainer, scene);
+
+      return importedContainer;
+    },
+  };
+
+  SceneLoader.RegisterPlugin(customLoader);
+}
+
+type InstanceData = {
+  name: string;
+  tags?: string;
+};
+
+function _isMeshInstanceData(data: any): data is InstanceData {
+  const hasName = isString(data.name);
+  const hasValidTags = !data.tags || isString(data.tags);
+  return hasName && hasValidTags;
+}
+
+type MeshData = {
+  name: string;
+  materialId?: string;
+  instances?: unknown[];
+};
+
+function _isMeshData(data: any): data is MeshData {
+  const hasName = isString(data.name);
+  const hasValidMaterialId = !data.materialId || isString(data.materialId);
+
+  return hasName && hasValidMaterialId;
+}
+
+type DataWithMeshes = { meshes: unknown[] };
+
+function _isDataWithMeshes(data: any): data is DataWithMeshes {
+  return data && isArray(data.meshes);
+}
+
+/**
+ * Internal function that compares the original meshes on a .babylon file with what was loaded,
+ * and tags missing materials with respective metadata on respective meshes.
+ * @param dataParsed original data
+ * @param container  loaded data
+ */
+function _addMissingMaterialMetadata(dataParsed: unknown, container: AssetContainer): void {
+  if (!_isDataWithMeshes(dataParsed)) return;
+
+  const validatedMeshes = dataParsed.meshes.filter(_isMeshData);
+
+  container.meshes.forEach(importedMesh => {
+    const parsedMesh = validatedMeshes.find(mesh => mesh.name === importedMesh.name);
+
+    const materialOnImportedMesh = importedMesh.material?.id;
+    const materialOnOriginalMesh = parsedMesh?.materialId;
+
+    if (materialOnOriginalMesh && materialOnImportedMesh !== materialOnOriginalMesh) {
+      window.Cbn?.Assets.assertMaterialExists(materialOnOriginalMesh);
+      setInternalMetadataValue(importedMesh, 'deferredMaterial', materialOnOriginalMesh);
+    }
+  });
+}
+
+/**
+ * Help function for manipulating tags of instances meshes after parsing.
+ * Per default babylon attaches the tags of the source mesh to the instance, **but only** if no tags are set for the
+ * instanced mesh. If the instanced mesh has dedicated tags set, the ones from the source mesh are **not** copied over.
+ * In this case it's not possible to have tags on the source mesh but not on the instance, which is a problem with our
+ * tagging system in the viewer and the Combeenation asset editor as well.
+ * This function rejects the default tag import algorithm and just copies the tags of the original parsed node without
+ * any parent synchronization.
+ *
+ * @param dataParsed original data
+ * @param container  loaded data
+ */
+function _reconstructTagsForInstancedMeshes(dataParsed: unknown, container: AssetContainer): void {
+  if (!_isDataWithMeshes(dataParsed)) return;
+
+  const validatedMeshes = dataParsed.meshes.filter(_isMeshData);
+
+  container.meshes.forEach(importedMesh => {
+    if (importedMesh instanceof InstancedMesh) {
+      // remove all tags from the imported mesh if there are some, since these tags are probably coming from the
+      // source mesh, if no tags are set there is no need for further operation though
+      const hasTags = getTags(importedMesh);
+      if (hasTags) {
+        deleteAllTags(importedMesh);
+
+        // get tags of parsed instanced mesh and set them on the imported instanced mesh
+        const parsedSourceMesh = validatedMeshes.find(mesh => mesh.name === importedMesh.sourceMesh.name);
+        const validatedSourceMeshInstances = parsedSourceMesh?.instances?.filter(_isMeshInstanceData);
+        const parsedInstancedMesh = validatedSourceMeshInstances?.find(mesh => mesh.name === importedMesh.name);
+        const parsedTags = parsedInstancedMesh?.tags;
+        if (parsedTags) {
+          setTagsAsString(importedMesh, parsedTags);
+        }
+      }
+    }
+  });
+}
+
+/**
+ * Morph target managers from different assets may receive the same id, which leads to erroneous morph target
+ * assignments. We can't change the id, but we can create a clone which then creates a new unique id.
+ */
+function _unifyMorphTargetManagerIds(container: AssetContainer, scene: Scene): void {
+  [...container.morphTargetManagers].forEach(sourceMTM => {
+    const clonedMTM = cloneMorphTargetManager(sourceMTM, container);
+
+    // clone function adds morph target manager to scene right, which we don't want here as we are only loading the
+    // asset container
+    scene.removeMorphTargetManager(clonedMTM);
+
+    // original morph target manager with bad id is not needed anymore and can be disposed
+    sourceMTM.dispose();
+  });
+}