@combeenation/3d-viewer 0.0.1-types

package/src/api/util/sceneLoaderHelper.ts

@@ -0,0 +1,170 @@
+import { Event, emitter } from '../classes/event';
+import { applyMaterial, getOrCreateMaterial, injectNodeMetadata } from './babylonHelper';
+import { sleep } from './resourceHelper';
+import { ISceneLoaderPlugin } from '@babylonjs/core/Loading/sceneLoader';
+import { Material } from '@babylonjs/core/Materials/material';
+import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh';
+import { Observer } from '@babylonjs/core/Misc/observable';
+import { AssetContainer } from '@babylonjs/core/assetContainer';
+//! overload DOM API Node due to name-clash with BJS
+import { Node as BjsNode } from '@babylonjs/core/node';
+import { Scene } from '@babylonjs/core/scene';
+import { Nullable } from '@babylonjs/core/types';
+import has from 'lodash-es/has';
+
+// map for keeping track of active "node enable" observers
+const enableObserverMap: {
+  [concerningNodeId: string]: { currNodeId: string; observer: Nullable<Observer<boolean>> }[];
+} = {};
+
+export const missingMaterialMetadataName = 'missingMaterial';
+
+/**
+ * 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.
+ * @param previousLoaderPlugin the actual loader that's executed after manipulating the input data
+ * @returns Custom loader plugin to be registered with SceneLoader.RegisterPlugin()
+ */
+export const getCustomCbnBabylonLoaderPlugin = function (previousLoaderPlugin: ISceneLoaderPlugin): ISceneLoaderPlugin {
+  const customLoader: ISceneLoaderPlugin = {
+    name: 'cbnCustomBabylonLoader',
+    extensions: '.babylon',
+    importMesh: previousLoaderPlugin.importMesh,
+    load: previousLoaderPlugin.load,
+    loadAssetContainer: function (scene, data, rootUrl, onError) {
+      //* 1) --- manipulate ORIGINAL data
+      const dataParsed = JSON.parse(data);
+      //* 2) --- call default (non-custom) loading method
+      const importedContainer = previousLoaderPlugin.loadAssetContainer(scene, data, rootUrl);
+      //* 3) --- manipulate IMPORTED data
+      addMissingMaterialMetadata(dataParsed, importedContainer);
+      //* 4) --- return imported data
+      return importedContainer;
+    },
+  };
+  return customLoader;
+};
+
+/**
+ * Return an observer to be applied to meshes in order to post-load missing materials
+ * upon set enabled/visible.
+ *
+ * @param concerningMesh Mesh to look for missing materials on, and create/apply to (when found).
+ * @returns observer
+ */
+export const getMaterialPostLoadObserver = function (concerningMesh: Mesh) {
+  return async () => {
+    const scene = concerningMesh.getScene();
+
+    // can't check `isEnabled` immediatly, since the enabled state of parents and childs is not synced yet
+    // postpone one cycle to ensure a correct parent-child enable relation
+    await sleep(0);
+
+    const hasBeenEnabled = concerningMesh.isEnabled(true);
+    const materialMissing = has(concerningMesh.metadata, missingMaterialMetadataName);
+    if (!hasBeenEnabled || !materialMissing) return;
+    // get id of missing material
+    const missingMatId = concerningMesh.metadata[missingMaterialMetadataName];
+    // get material and apply it on the concerning mesh after all textures have been loaded
+    const material = getOrCreateMaterial(concerningMesh.getScene(), missingMatId);
+    applyMaterial(material, concerningMesh).then(() =>
+      emitter.emit(Event.MESH_MATERIAL_APPLIED, concerningMesh, material)
+    );
+    // since the material is there now, we do not need the related metadata tag anymore
+    delete concerningMesh.metadata[missingMaterialMetadataName];
+
+    // remove all "enable" observers that were assigned to the concerning mesh
+    // the mesh got visible and therefore the observers are not needed anymore
+    enableObserverMap[concerningMesh.id]?.forEach(entry => {
+      const currNode = scene.getMeshById(entry.currNodeId);
+      currNode?.onEnabledStateChangedObservable.remove(entry.observer);
+    });
+    // also remove from the local observer map
+    delete enableObserverMap[concerningMesh.id];
+  };
+};
+
+/**
+ * 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
+ */
+export const addMissingMaterialMetadata = function (dataParsed: any, container: AssetContainer) {
+  container.meshes.forEach(currMeshImported => {
+    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
+      const materialOnImportedMesh = currMeshImported.material?.id;
+      const materialOnOriginalMesh = currMeshOriginal.materialId;
+      if (!materialOnOriginalMesh || materialOnImportedMesh === materialOnOriginalMesh) continue;
+      // if we're here, the imported mesh has different material than original one
+      window.Cbn?.Assets.assertMaterialExists(materialOnOriginalMesh);
+      injectNodeMetadata(currMeshImported, { [missingMaterialMetadataName]: materialOnOriginalMesh }, false);
+      break;
+    }
+  });
+};
+
+/**
+ * Adds an "onEnabledStateChanged" observer to the given mesh and all its parents:
+ * The added observer (`getMaterialPostLoadObserver`) handles creation of missing materials once the given node is
+ * enabled.
+ */
+export const addMissingMaterialObserver = function (node: BjsNode) {
+  // set the concerning node, i.e. the node the observer should check for missing material.
+  // for instanced meshes, we want the sourcemesh here.
+  const concerningNode = node instanceof InstancedMesh ? node.sourceMesh : (node as Mesh);
+
+  // observer is pointless if concerning node has no missing material
+  if (!has(concerningNode.metadata, missingMaterialMetadataName)) return;
+
+  // for each of our AbstractMeshes, set an observer on the AbstractMesh itself and all of its parents.
+  let currNode: Nullable<BjsNode> = node;
+  while (currNode) {
+    const callback = getMaterialPostLoadObserver(concerningNode);
+    const observer = currNode.onEnabledStateChangedObservable.add(callback);
+
+    // store the observer in a local map to keep track of the active "enable" observers
+    // observers will be removed when the concerning node gets enabled
+    if (!enableObserverMap[concerningNode.id]) {
+      enableObserverMap[concerningNode.id] = [];
+    }
+    enableObserverMap[concerningNode.id].push({ currNodeId: currNode.id, observer });
+
+    currNode = currNode.parent;
+  }
+};
+
+export const removeMissingMaterialObserver = function (node: BjsNode) {
+  // set the concerning node, i.e. the node the observer should check for missing material.
+  // for instanced meshes, we want the sourcemesh here.
+  const concerningNode = node instanceof InstancedMesh ? node.sourceMesh : (node as Mesh);
+  let currNode: Nullable<BjsNode> = node;
+  while (currNode) {
+    enableObserverMap[concerningNode.id]?.forEach(entry => {
+      if (entry.currNodeId === currNode?.id) {
+        currNode.onEnabledStateChangedObservable.remove(entry.observer);
+      }
+    });
+    currNode = currNode.parent;
+  }
+  delete enableObserverMap[concerningNode.id];
+};
+
+/**
+ * Look up the provided materials (see library import) and create and return one if found.
+ *
+ * @param materialId Babylon.js material-id. E.g. 'concrete".
+ * @param scene Babylon.js scene
+ * @returns PBRMaterial | null
+ */
+export const createMaterialFromCbnAssets = function (materialId: string, scene: Scene): Material | null {
+  const materialDefinition = window.Cbn?.Assets.getMaterial(materialId);
+  // The generic `Material.Parse` actually returns a more specific material like `BABYLON.StandardMaterial`,
+  // `BABYLON.PBRMaterial` or stuff like `BABYLON.PBRMetallicRoughnessMaterial` etc. based on the given `customType`
+  // within the material JSON definition
+  const material = materialDefinition && Material.Parse(materialDefinition, scene, '');
+  return material || null;
+};

package/src/api/util/stringHelper.ts

@@ -0,0 +1,30 @@
+/**
+ * Creates a random uuidv4.
+ */
+const uuidv4 = function () {
+  return ([1e7].toString() + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => {
+    const cNum = parseInt(c);
+    return (cNum ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (cNum / 4)))).toString(16);
+  });
+};
+
+/**
+ * Converts a string from camel case to snake case.
+ */
+const camelToSnakeCase = function (str: string): string {
+  return str
+    .replace(/([A-Z])/g, ' $1')
+    .trim()
+    .split(' ')
+    .join('_')
+    .toLowerCase();
+};
+
+/**
+ * Replaces all dots from the input string with a desired character ('/' by default)
+ */
+const replaceDots = function (str: string, replaceChar = '/'): string {
+  return str.split('.').join(replaceChar);
+};
+
+export { uuidv4, camelToSnakeCase, replaceDots };

package/src/api/util/structureHelper.ts

@@ -0,0 +1,49 @@
+import { Element } from '../classes/element';
+import { Variant } from '../classes/variant';
+import { VariantInstance } from '../classes/variantInstance';
+import { Mesh } from '@babylonjs/core/Meshes/mesh';
+
+/**
+ * Find out if a mesh is part of a list of excluded geometry
+ * @param mesh BJS mesh
+ * @param list list of excluded geometry
+ * @returns boolean based on whether mesh (or one of its parents) was found in list
+ */
+const isMeshIncludedInExclusionList = function (mesh: Mesh, list: ExcludedGeometryList): boolean {
+  const checkMesh = (inputMesh: Mesh, meshToCheck: Mesh) => {
+    return inputMesh.uniqueId === meshToCheck.uniqueId;
+  };
+  const checkElement = (inputEl: Element, meshToCheck: Mesh) => {
+    return inputEl.meshesFlat.some(m => checkMesh(m, meshToCheck));
+  };
+  const checkVariant = (inputVariant: Variant, meshToCheck: Mesh) => {
+    return inputVariant.elements.some(el => checkElement(el, meshToCheck));
+  };
+  const checkVariantInstance = (inputVarInst: VariantInstance, meshToCheck: Mesh) => {
+    return inputVarInst.variant.elements.some(el => checkElement(el, meshToCheck));
+  };
+  const check = (geometryToExclude: ExcludedGeometry, mesh: Mesh) => {
+    if (geometryToExclude instanceof VariantInstance) {
+      return checkVariantInstance(geometryToExclude, mesh);
+    }
+    if (geometryToExclude instanceof Variant) {
+      return checkVariant(geometryToExclude, mesh);
+    }
+    if (geometryToExclude instanceof Element) {
+      return checkElement(geometryToExclude, mesh);
+    }
+    if (geometryToExclude instanceof Mesh) {
+      return checkMesh(geometryToExclude, mesh);
+    }
+    return false;
+  };
+
+  let isExcluded = list.some(geometryToExclude => check(geometryToExclude, mesh));
+  if (!isExcluded && mesh.parent instanceof Mesh) {
+    isExcluded = isMeshIncludedInExclusionList(mesh.parent, list);
+  }
+
+  return isExcluded;
+};
+
+export { isMeshIncludedInExclusionList };

package/src/buildinfo.json

@@ -0,0 +1,3 @@
+{
+  "version": "@VERSION@"
+}

package/src/dev.ts

@@ -0,0 +1,62 @@
+import { Emitter, Event, Viewer } from '.';
+import {
+  afterBootstrap,
+  beforeBootstrap,
+  createSpec,
+  createTagManagerParameterValues,
+  createUIelements,
+  getMaterial,
+  mockMaterials,
+} from '../assets/index';
+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: {
+    getMaterial(materialId: string) {
+      //! this creates a new function on the object that uses the imported function of the same name..
+      const material = getMaterial(materialId);
+      if (material) return material;
+
+      // Fallback to random mock material
+      return mockMaterials[Math.floor(Math.random() * mockMaterials.length)];
+    },
+    assertMaterialExists(materialId: string): boolean {
+      return true;
+    },
+    reportDuplicateNodeName(nodeNameOrArrayOfNodeNames: string | string[]): void {},
+  },
+};
+
+async function main() {
+  const viewer = await bootstrapViewer();
+  // "Export" for console testing...
+  set(window, 'viewer', viewer);
+}
+
+async function bootstrapViewer() {
+  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);
+  await createUIelements(viewer);
+  return viewer;
+}

package/src/index.ts

@@ -0,0 +1,79 @@
+/// <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 { 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 { EventEmitter } from 'eventemitter3';
+
+if (process.env.INCLUDE_BJS === 'true') {
+  import('@babylonjs/core').then(CORE => {
+    window.BABYLON = { ...window.BABYLON, ...CORE };
+  });
+  import('@babylonjs/gui').then(GUI => {
+    window.BABYLON = { ...window.BABYLON, ...GUI };
+  });
+  import('@babylonjs/inspector').then(INSPECTOR => {
+    window.BABYLON = { ...window.BABYLON, ...INSPECTOR };
+  });
+  import('@babylonjs/loaders').then(LOADERS => {
+    window.BABYLON = { ...window.BABYLON, ...LOADERS };
+  });
+  import('@babylonjs/materials').then(MATERIALS => {
+    window.BABYLON = { ...window.BABYLON, ...MATERIALS };
+  });
+  import('@babylonjs/post-processes').then(POSTPROCESSES => {
+    window.BABYLON = { ...window.BABYLON, ...POSTPROCESSES };
+  });
+  import('@babylonjs/procedural-textures').then(PROCEDURALTEXTURES => {
+    window.BABYLON = { ...window.BABYLON, ...PROCEDURALTEXTURES };
+  });
+  import('@babylonjs/serializers').then(SERIALIZERS => {
+    window.BABYLON = { ...window.BABYLON, ...SERIALIZERS };
+  });
+}
+
+/**
+ * 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,
+  Element,
+  EventBroadcaster,
+  SceneManager,
+  PlacementAnimation,
+  BabylonHelper,
+  GltfExportManager,
+  SpecStorage,
+  TagManager,
+};

package/src/types.d.ts

@@ -0,0 +1,36 @@
+/** @ignore **/
+declare let IS_PRODUCTION: boolean;
+declare let VERSION_INFORMATION: string;
+
+interface Window {
+  Cbn:
+    | undefined /* window.Cbn is only available when viewer runs inside Combeenation configurator */
+    | {
+        Assets: {
+          /**
+           * Retrieve material definition from configurator
+           *
+           * @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): object | undefined;
+
+          /**
+           * Checks if a definition for a given material name exists in the configurator and issues a warning if not.
+           *
+           * @param materialId
+           */
+          assertMaterialExists(materialId: string): boolean;
+
+          /**
+           * Warns user about duplicate nodeNames on scene.
+           *
+           * @param nodeNameOrArrayOfNodeNames
+           */
+          reportDuplicateNodeName(nodeNameOrArrayOfNodeNames: string | string[]): void;
+        };
+      };
+  BABYLON: any;
+}