@combeenation/3d-viewer 5.0.3 → 5.1.0-rc1

package/src/api/util/sceneLoaderHelper.ts

@@ -0,0 +1,101 @@
+import { Scene } from '@babylonjs/core/scene';
+import { ISceneLoaderPlugin } from '@babylonjs/core/Loading/sceneLoader';
+import { AssetContainer } from '@babylonjs/core/assetContainer';
+import { injectNodeMetadata } from './babylonHelper';
+import has from 'lodash-es/has';
+import { Material } from '@babylonjs/core/Materials/material';
+
+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()
+ */
+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 targetMeshOrInstance AbstractMesh the observer will be applied to
+ * @param concerningMesh Mesh to look for missing materials on, and create/apply to (when found).
+ * @returns observer
+ */
+const getMaterialPostLoadObserver = function (targetMeshOrInstance: AbstractMesh, concerningMesh: Mesh) {
+  return (_eventData: any, _eventState: any) => {
+    const hasBeenEnabled = targetMeshOrInstance.isEnabled(true);
+    const materialMissing = has(concerningMesh.metadata, missingMaterialMetadataName);
+    if (!hasBeenEnabled || !materialMissing) return;
+    // get id of missing material
+    const missingMatId = concerningMesh.metadata[missingMaterialMetadataName];
+    // try to find material on the scene
+    const existingMat = concerningMesh.getScene().getMaterialById(missingMatId);
+    // assign either existing material or freshly created one
+    concerningMesh.material = existingMat || getMaterialFromCbnAssets(missingMatId, concerningMesh.getScene());
+    // since the material is there now, we do not need the related metadata tag anymore
+    delete concerningMesh.metadata[missingMaterialMetadataName];
+  };
+};
+
+/**
+ * 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
+ */
+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;
+      // TODO: Just for easier debugging. Remove before publishment...
+      console.info(
+        `Adding "${missingMaterialMetadataName}" info on mesh "${currMeshOriginal.name}" with material "${currMeshOriginal.materialId}"`
+      );
+      // if we're here, the imported mesh has different material than original one
+      window.Cbn?.Assets.assertMaterialExists(materialOnOriginalMesh);
+      injectNodeMetadata(currMeshImported, { [missingMaterialMetadataName]: materialOnOriginalMesh }, false);
+      break;
+    }
+  });
+};
+
+/**
+ * Look up the provided materials (see library import) and create and return one if found.
+ * @param materialId BabylonJs material-id. E.g. 'concrete".
+ * @param scene BabylonJs scene
+ * @returns PBRMaterial | null
+ */
+export const getMaterialFromCbnAssets = 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;
+};
+
+export { getCustomCbnBabylonLoaderPlugin, getMaterialPostLoadObserver, missingMaterialMetadataName };

package/src/dev.ts

@@ -3,7 +3,14 @@ import { set } from 'lodash-es';
 
 import { Emitter, Viewer } from '.';
 
-import { createSpec, beforeBootstrap, afterBootstrap, createUIelements } from '../assets/index';
+import {
+  createSpec,
+  beforeBootstrap,
+  afterBootstrap,
+  createUIelements,
+  getMaterial,
+  mockMaterials,
+} from '../assets/index';
 
 const loadingElement = document.getElementById('loading') as HTMLDivElement;
 
@@ -18,6 +25,21 @@ Emitter.on(Event.BOOTSTRAP_START, () => {
 
 document.addEventListener('DOMContentLoaded', main);
 
+window.Cbn = {
+  Assets: {
+    getMaterial(materialId: string) {
+      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;
+    },
+  },
+};
+
 async function main() {
   const viewer = await bootstrapViewer();
   // "Export" for console testing...

package/src/tsconfig.json

@@ -15,6 +15,7 @@
     "baseUrl": ".",
     "importHelpers": true,
     "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
     "lib": ["es6", "dom"]
   },
   "typedocOptions": {

package/src/types.d.ts

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