@combeenation/3d-viewer 6.3.0 → 6.4.0

package/package.json

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

package/src/api/classes/viewer.ts

@@ -8,6 +8,7 @@ import { SpecStorage } from '../store/specStorage';
 import { backgroundDomeName, envHelperMetadataName } from '../util/babylonHelper';
 import { debounce, loadJavascript, loadJson } from '../util/resourceHelper';
 import { getCustomCbnBabylonLoaderPlugin } from '../util/sceneLoaderHelper';
+import { replaceDots } from '../util/stringHelper';
 import { isMeshIncludedInExclusionList } from '../util/structureHelper';
 import { AnimationInterface } from './animationInterface';
 import { Event } from './event';
@@ -79,6 +80,10 @@ export class Viewer extends EventBroadcaster {
    * This data is most likely coming from babylon assets from the Combeenation system but other sources are also valid.
    */
   public static generateSpec(genData: SpecGenerationData[]): StructureJson {
+    // dots in the variant name indicate inheritance, but this should not be the case for an auto-generated spec
+    // therefore dots are exchanged with slashes
+    const safeGenData: SpecGenerationData[] = genData.map(data => ({ ...data, name: replaceDots(data.name) }));
+
     const spec: StructureJson = {
       // common scene settings as suggested in the viewer docs
       scene: {
@@ -98,7 +103,7 @@ export class Viewer extends EventBroadcaster {
         // create one instance for each input entry
         // name and variant are named accordingly from the input, instance will be hidden by default and lazy loading
         // is activated
-        instances: genData.map(instanceData => ({
+        instances: safeGenData.map(instanceData => ({
           name: instanceData.name,
           variant: instanceData.name,
           lazy: true,
@@ -110,7 +115,7 @@ export class Viewer extends EventBroadcaster {
       // variants definition is also mapped to the input array, using the name as key and url as glTF source
       // no elements are created here, since this should be done automatically from the system
       // => create one element which contains all root nodes of the imported 3d file (GLB or Babylon)
-      variants: genData.reduce((accVariants, curVariant) => {
+      variants: safeGenData.reduce((accVariants, curVariant) => {
         accVariants[curVariant.name] = {
           glTF: curVariant.url,
         };

package/src/api/util/babylonHelper.ts

@@ -362,7 +362,7 @@ const changeEnvironment = function (scene: Scene, envDef: EnvironmentDefinition)
  * Sets a material by a given material id as material property on the given node.
  *
  * If the material is not already available in the scene, the viewer tries to create a material based on a Combeenation
- * [material asset](https://doc.combeenation.com/docs/howto-create-and-use-babylon-and-material-asset).
+ * [material asset](https://docs.combeenation.com/docs/howto-create-and-use-babylon-and-material-asset).
  * This of course only works if the viewer is used inside a Combeenation configurator.
  *
  * Furthermore this function also defers the material creation if the node is not visible yet to improve network &
@@ -409,7 +409,8 @@ const setMaterial = function (
 };
 
 /**
- * Gets the Material either defined in the given {@link Variant}, scene or via {@link createMaterialFromCbnAssets}.
+ * Gets the Material either from the given {@link Variant}, the given scene or tries to create it from an Combeenation
+ * material asset when inside a Combeenation configurator.
  */
 const getOrCreateMaterial = function (scene: Scene, materialId: string, variant?: Variant): Material {
   let chosenMaterial: Material | undefined | null;
@@ -431,17 +432,29 @@ const getOrCreateMaterial = function (scene: Scene, materialId: string, variant?
  * Waits until the materials textures are loaded and sets the material on the node if there is no newer "set material"
  * request
  */
-const applyMaterialAfterTexturesLoaded = function (material: Material, node: AbstractMesh) {
+const applyMaterialAfterTexturesLoaded = async function (material: Material, node: AbstractMesh) {
   // set current material id as last valid id, in this case all previously set materials on the node will be invalidated
   injectNodeMetadata(node, { [materialWaitingToBeSetMetadataName]: material.id }, false);
 
-  BaseTexture.WhenAllReady(material.getActiveTextures(), () => {
-    // textures ready, now check if the material is still up-to-date
-    if (material.id === node.metadata[materialWaitingToBeSetMetadataName]) {
-      node.material = material;
-      delete node.metadata[materialWaitingToBeSetMetadataName];
-    }
-  });
+  const promTexturesReady = new Promise<void>(resolve =>
+    BaseTexture.WhenAllReady(material.getActiveTextures(), resolve)
+  );
+  // this promise should only take some time on the first call of the corresponding shader (eg: PBRMaterial shader)
+  // on each other call of the same material/shader type there should be not be a waiting time, or at maximum one frame
+  // https://forum.babylonjs.com/t/mesh-flickering-when-setting-material-initially/37312
+  const promMaterialCompiled = material.forceCompilationAsync(node);
+
+  // material needs to fulfill 2 criterias before it's ready to use
+  // - textures need to be "ready" => downloaded
+  // - dedicated shader needs to be compiled
+  // if this would not be the case you can see some "flickering" when setting the material
+  await Promise.all([promTexturesReady, promMaterialCompiled]);
+
+  // textures ready, now check if the material is still up-to-date
+  if (material.id === node.metadata[materialWaitingToBeSetMetadataName]) {
+    node.material = material;
+    delete node.metadata[materialWaitingToBeSetMetadataName];
+  }
 };
 
 /**

package/src/api/util/sceneLoaderHelper.ts

@@ -2,6 +2,7 @@ import { applyMaterialAfterTexturesLoaded, getOrCreateMaterial, injectNodeMetada
 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';
@@ -9,6 +10,11 @@ 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';
 
 /**
@@ -41,12 +47,18 @@ export const getCustomCbnBabylonLoaderPlugin = function (previousLoaderPlugin: I
 /**
  * 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
  */
-export const getMaterialPostLoadObserver = function (targetMeshOrInstance: AbstractMesh, concerningMesh: Mesh) {
-  return (eventData: any, eventState: any) => {
+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 to "when scene ready" to ensure a correct parent-child enable relation
+    await scene.whenReadyAsync();
+
     const hasBeenEnabled = concerningMesh.isEnabled(true);
     const materialMissing = has(concerningMesh.metadata, missingMaterialMetadataName);
     if (!hasBeenEnabled || !materialMissing) return;
@@ -57,6 +69,15 @@ export const getMaterialPostLoadObserver = function (targetMeshOrInstance: Abstr
     applyMaterialAfterTexturesLoaded(material, concerningMesh);
     // 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];
   };
 };
 
@@ -98,30 +119,23 @@ export const addMissingMaterialObserver = function (node: BjsNode) {
   // for each of our AbstractMeshes, set an observer on the AbstractMesh itself and all of its parents.
   let currNode: Nullable<BjsNode> = node;
   while (currNode) {
-    // Note HAR: Using `addOnce` could be wrong in certain situations.
-    // E.g.:
-    //   * 2 meshes `parentMesh` & `parentMesh.concerningMesh`
-    //   * `concerningMesh` is having the missing material flag
-    //   * Both `parentMesh` & `concerningMesh` are disabled
-    //   * `parentMesh` is enabled -> material should **not** be created as `concerningMesh` is still disabled
-    //   * `parentMesh` is disabled
-    //   * `concerningMesh` is enabled -> material should **not** be created as `concerningMesh` is still invisible
-    //     because its `parentMesh` is ATM disabled
-    //   * `parentMesh` & `concerningMesh` are both enable
-    //     -> material should be created as `concerningMesh` is now actually visible but it isn't, as all observers were
-    //        only fired once 🔥
-    //
-    // However: Using `add` instead of `addOnce` requires rather complicated manual clean up work...
+    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 });
 
-    // add observer. needed only once per node, hence addOnce()
-    node.onEnabledStateChangedObservable.addOnce(getMaterialPostLoadObserver(currNode as AbstractMesh, concerningNode));
-    // console.log('## observer set on: ' + meshOrInstance.name);
     currNode = currNode.parent;
   }
 };
 
 /**
  * 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

package/src/api/util/stringHelper.ts

@@ -20,4 +20,11 @@ const camelToSnakeCase = function (str: string): string {
     .toLowerCase();
 };
 
-export { uuidv4, camelToSnakeCase };
+/**
+ * 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/dev.ts

@@ -12,12 +12,10 @@ import { set } from 'lodash-es';
 const loadingElement = document.getElementById('loading') as HTMLDivElement;
 
 Emitter.on(Event.BOOTSTRAP_START, () => {
-  Emitter.on(Event.LOADING_START, () => {
-    loadingElement!.style.display = 'block';
-  });
-  Emitter.on(Event.VARIANT_CREATED, () => {
-    loadingElement!.style.display = 'none';
-  });
+  loadingElement!.style.display = 'block';
+});
+Emitter.on(Event.BOOTSTRAP_END, () => {
+  loadingElement!.style.display = 'none';
 });
 
 document.addEventListener('DOMContentLoaded', main);