@combeenation/3d-viewer 7.0.0-beta3 → 7.0.0

package/src/api/util/sceneLoaderHelper.ts

@@ -1,170 +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;
-};
+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

@@ -1,30 +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 };
+/**
+ * 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

@@ -1,49 +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 };
+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

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

package/src/dev.ts

@@ -1,62 +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;
-}
+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;
+}