@combeenation/3d-viewer 6.5.0 → 7.0.0-beta1

package/dist/lib-cjs/index.d.ts

@@ -16,6 +16,7 @@ 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';
@@ -49,4 +50,4 @@ 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, Scene, Engine, ArcRotateCamera, DynamicTexture, CubeTexture, MeshBuilder, Texture, BabylonAnimation, HemisphericLight, DirectionalLight, Element, EventBroadcaster, SceneManager, PlacementAnimation, BabylonHelper, GltfExportManager, SpecStorage, };
+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, Scene, Engine, ArcRotateCamera, DynamicTexture, CubeTexture, MeshBuilder, Texture, BabylonAnimation, HemisphericLight, DirectionalLight, Element, EventBroadcaster, SceneManager, PlacementAnimation, BabylonHelper, GltfExportManager, SpecStorage, TagManager, };

package/dist/lib-cjs/index.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpecStorage = exports.GltfExportManager = exports.BabylonHelper = exports.PlacementAnimation = exports.SceneManager = exports.EventBroadcaster = exports.Element = exports.DirectionalLight = exports.HemisphericLight = exports.BabylonAnimation = exports.Texture = exports.MeshBuilder = exports.CubeTexture = exports.DynamicTexture = exports.ArcRotateCamera = exports.Engine = exports.Scene = exports.StandardMaterial = exports.PBRMaterial = exports.Material = exports.Node = exports.TransformNode = exports.Mesh = exports.InstancedMesh = exports.AbstractMesh = exports.Vector3 = exports.Color4 = exports.Color3 = exports.VariantInstance = exports.Parameter = exports.Event = exports.EventEmitter = exports.Emitter = exports.ViewerLight = exports.VariantParameterizable = exports.Parameterizable = exports.ParameterObservable = exports.Viewer = exports.VariantInstanceManager = exports.Variant = exports.AnimationManager = void 0;
+exports.TagManager = exports.SpecStorage = exports.GltfExportManager = exports.BabylonHelper = exports.PlacementAnimation = exports.SceneManager = exports.EventBroadcaster = exports.Element = exports.DirectionalLight = exports.HemisphericLight = exports.BabylonAnimation = exports.Texture = exports.MeshBuilder = exports.CubeTexture = exports.DynamicTexture = exports.ArcRotateCamera = exports.Engine = exports.Scene = exports.StandardMaterial = exports.PBRMaterial = exports.Material = exports.Node = exports.TransformNode = exports.Mesh = exports.InstancedMesh = exports.AbstractMesh = exports.Vector3 = exports.Color4 = exports.Color3 = exports.VariantInstance = exports.Parameter = exports.Event = exports.EventEmitter = exports.Emitter = exports.ViewerLight = exports.VariantParameterizable = exports.Parameterizable = exports.ParameterObservable = exports.Viewer = exports.VariantInstanceManager = exports.Variant = exports.AnimationManager = void 0;
 const element_1 = require("./api/classes/element");
 Object.defineProperty(exports, "Element", { enumerable: true, get: function () { return element_1.Element; } });
 const event_1 = require("./api/classes/event");
@@ -55,6 +55,8 @@ const gltfExportManager_1 = require("./api/manager/gltfExportManager");
 Object.defineProperty(exports, "GltfExportManager", { enumerable: true, get: function () { return gltfExportManager_1.GltfExportManager; } });
 const sceneManager_1 = require("./api/manager/sceneManager");
 Object.defineProperty(exports, "SceneManager", { enumerable: true, get: function () { return sceneManager_1.SceneManager; } });
+const tagManager_1 = require("./api/manager/tagManager");
+Object.defineProperty(exports, "TagManager", { enumerable: true, get: function () { return tagManager_1.TagManager; } });
 const variantInstanceManager_1 = require("./api/manager/variantInstanceManager");
 Object.defineProperty(exports, "VariantInstanceManager", { enumerable: true, get: function () { return variantInstanceManager_1.VariantInstanceManager; } });
 const specStorage_1 = require("./api/store/specStorage");

package/dist/lib-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,mDAAgD;AAsF9C,wFAtFO,iBAAO,OAsFP;AArFT,+CAAqD;AA6DnD,sFA7DO,aAAK,OA6DP;AAFM,wFA3DG,eAAO,OA2DH;AA1DpB,qEAAkE;AAqFhE,iGArFO,mCAAgB,OAqFP;AApFlB,uDAAoD;AA4DlD,0FA5DO,qBAAS,OA4DP;AA3DX,2EAAwE;AAoDtE,oGApDO,yCAAmB,OAoDP;AAnDrB,mEAAgE;AAoD9D,gGApDO,iCAAe,OAoDP;AAnDjB,yEAAsE;AAmFpE,mGAnFO,uCAAkB,OAmFP;AAlFpB,mDAAgD;AA8C9C,wFA9CO,iBAAO,OA8CP;AA7CT,mEAAgE;AAwD9D,gGAxDO,iCAAe,OAwDP;AAvDjB,iFAA8E;AAiD5E,uGAjDO,+CAAsB,OAiDP;AAhDxB,iDAA8C;AA6C5C,uFA7CO,eAAM,OA6CP;AA5CR,2DAAwD;AAgDtD,4FAhDO,yBAAW,OAgDP;AA/Cb,qEAAkE;AAuChE,iGAvCO,mCAAgB,OAuCP;AAtClB,uEAAoE;AA8ElE,kGA9EO,qCAAiB,OA8EP;AA7EnB,6DAA0D;AA0ExD,6FA1EO,2BAAY,OA0EP;AAzEd,iFAA8E;AAuC5E,uGAvCO,+CAAsB,OAuCP;AAtCxB,yDAAsD;AA4EpD,4FA5EO,yBAAW,OA4EP;AA3Eb,wEAA0D;AAyExD,sCAAa;AAxEf,oEAAqF;AAiEnF,iGAjEoB,qBAAgB,OAiEpB;AAhElB,6EAA0E;AA2DxE,gGA3DO,iCAAe,OA2DP;AA1DjB,2DAAwD;AAyDtD,uFAzDO,eAAM,OAyDP;AAxDR,8EAA2E;AAgEzE,iGAhEO,mCAAgB,OAgEP;AA/DlB,8EAA2E;AA8DzE,iGA9DO,mCAAgB,OA8DP;AA7DlB,2EAAwE;AAmDtE,4FAnDO,yBAAW,OAmDP;AAlDb,gFAA6E;AAwD3E,4FAxDO,yBAAW,OAwDP;AAvDb,sFAAmF;AAsDjF,+FAtDO,+BAAc,OAsDP;AArDhB,wEAAqE;AAwDnE,wFAxDO,iBAAO,OAwDP;AAvDT,iEAA8D;AA8C5D,yFA9CO,mBAAQ,OA8CP;AA7CV,iFAA8E;AA+C5E,iGA/CO,mCAAgB,OA+CP;AA9ClB,iEAAkE;AAoChE,uFApCO,mBAAM,OAoCP;AACN,uFArCe,mBAAM,OAqCf;AApCR,mEAA4D;AAqC1D,wFArCO,qBAAO,OAqCP;AApCT,sEAAmE;AAqCjE,6FArCO,2BAAY,OAqCP;AApCd,wEAAqE;AAqCnE,8FArCO,6BAAa,OAqCP;AApCf,sDAAmD;AAqCjD,qFArCO,WAAI,OAqCP;AApCN,oEAAiE;AA+C/D,4FA/CO,yBAAW,OA+CP;AA9Cb,wEAAqE;AAoCnE,8FApCO,6BAAa,OAoCP;AAlCf;;;;GAIG;AACH,yDAAuD;AACvD,+CAA4C;AA6B1C,qFA7BO,WAAI,OA6BP;AA5BN,iDAA8C;AAgC5C,sFAhCO,aAAK,OAgCP;AA/BP,iDAA6C;AAgB3C,6FAhBO,4BAAY,OAgBP"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,mDAAgD;AAuF9C,wFAvFO,iBAAO,OAuFP;AAtFT,+CAAqD;AA8DnD,sFA9DO,aAAK,OA8DP;AAFM,wFA5DG,eAAO,OA4DH;AA3DpB,qEAAkE;AAsFhE,iGAtFO,mCAAgB,OAsFP;AArFlB,uDAAoD;AA6DlD,0FA7DO,qBAAS,OA6DP;AA5DX,2EAAwE;AAqDtE,oGArDO,yCAAmB,OAqDP;AApDrB,mEAAgE;AAqD9D,gGArDO,iCAAe,OAqDP;AApDjB,yEAAsE;AAoFpE,mGApFO,uCAAkB,OAoFP;AAnFpB,mDAAgD;AA+C9C,wFA/CO,iBAAO,OA+CP;AA9CT,mEAAgE;AAyD9D,gGAzDO,iCAAe,OAyDP;AAxDjB,iFAA8E;AAkD5E,uGAlDO,+CAAsB,OAkDP;AAjDxB,iDAA8C;AA8C5C,uFA9CO,eAAM,OA8CP;AA7CR,2DAAwD;AAiDtD,4FAjDO,yBAAW,OAiDP;AAhDb,qEAAkE;AAwChE,iGAxCO,mCAAgB,OAwCP;AAvClB,uEAAoE;AA+ElE,kGA/EO,qCAAiB,OA+EP;AA9EnB,6DAA0D;AA2ExD,6FA3EO,2BAAY,OA2EP;AA1Ed,yDAAsD;AA+EpD,2FA/EO,uBAAU,OA+EP;AA9EZ,iFAA8E;AAuC5E,uGAvCO,+CAAsB,OAuCP;AAtCxB,yDAAsD;AA4EpD,4FA5EO,yBAAW,OA4EP;AA3Eb,wEAA0D;AAyExD,sCAAa;AAxEf,oEAAqF;AAiEnF,iGAjEoB,qBAAgB,OAiEpB;AAhElB,6EAA0E;AA2DxE,gGA3DO,iCAAe,OA2DP;AA1DjB,2DAAwD;AAyDtD,uFAzDO,eAAM,OAyDP;AAxDR,8EAA2E;AAgEzE,iGAhEO,mCAAgB,OAgEP;AA/DlB,8EAA2E;AA8DzE,iGA9DO,mCAAgB,OA8DP;AA7DlB,2EAAwE;AAmDtE,4FAnDO,yBAAW,OAmDP;AAlDb,gFAA6E;AAwD3E,4FAxDO,yBAAW,OAwDP;AAvDb,sFAAmF;AAsDjF,+FAtDO,+BAAc,OAsDP;AArDhB,wEAAqE;AAwDnE,wFAxDO,iBAAO,OAwDP;AAvDT,iEAA8D;AA8C5D,yFA9CO,mBAAQ,OA8CP;AA7CV,iFAA8E;AA+C5E,iGA/CO,mCAAgB,OA+CP;AA9ClB,iEAAkE;AAoChE,uFApCO,mBAAM,OAoCP;AACN,uFArCe,mBAAM,OAqCf;AApCR,mEAA4D;AAqC1D,wFArCO,qBAAO,OAqCP;AApCT,sEAAmE;AAqCjE,6FArCO,2BAAY,OAqCP;AApCd,wEAAqE;AAqCnE,8FArCO,6BAAa,OAqCP;AApCf,sDAAmD;AAqCjD,qFArCO,WAAI,OAqCP;AApCN,oEAAiE;AA+C/D,4FA/CO,yBAAW,OA+CP;AA9Cb,wEAAqE;AAoCnE,8FApCO,6BAAa,OAoCP;AAlCf;;;;GAIG;AACH,yDAAuD;AACvD,+CAA4C;AA6B1C,qFA7BO,WAAI,OA6BP;AA5BN,iDAA8C;AAgC5C,sFAhCO,aAAK,OAgCP;AA/BP,iDAA6C;AAgB3C,6FAhBO,4BAAY,OAgBP"}

package/package.json

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

package/src/api/classes/element.ts

@@ -2,6 +2,7 @@ import {
   activateTransformNode as activate,
   addToHighlightLayer,
   addToShadowGenerator,
+  assertMeshCapability,
   assertTransformNode,
   cloneTransformNode,
   cloneTransformNodeMaterial,
@@ -23,6 +24,7 @@ import { createImageFromImgSrc, createImageFromSvg } from '../util/resourceHelpe
 import { addMissingMaterialObserver } from '../util/sceneLoaderHelper';
 import { VariantParameterizable } from './../classes/variantParameterizable';
 import { DottedPath } from './dottedPath';
+import { Event } from './event';
 import { Parameter } from './parameter';
 import { Variant } from './variant';
 import { HighlightLayer } from '@babylonjs/core/Layers/highlightLayer';
@@ -33,7 +35,6 @@ import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTextur
 import { Material } from '@babylonjs/core/Materials/material';
 import { Color3 } from '@babylonjs/core/Maths/math.color';
 import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
-import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh';
 import { Mesh } from '@babylonjs/core/Meshes/mesh';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import { has, isArray, isNumber, isPlainObject, merge, union } from 'lodash-es';
@@ -60,9 +61,20 @@ export class Element extends VariantParameterizable {
     if (process.env.NODE_ENV?.toLowerCase().includes('dev')) {
       this.assertPathDefinitions();
     }
-    const nodes = this.variant.inheritedNodes.map(node => cloneTransformNode(node, this.filterNode.bind(this)));
+    const nodes = this.variant.inheritedNodes.map(node => {
+      const nodeNamingStrategy = {
+        handler: variant.viewer.nodeNamingStrategyHandler,
+        payload: {
+          variantInstance: variant.variantInstance!,
+          variant: variant,
+          variantParameterizable: this,
+        },
+      };
+      return cloneTransformNode(node, nodeNamingStrategy, this.filterNode.bind(this), true);
+    });
     this.nodes = nodes.filter(node => !!node) as TransformNode[];
     this._dottedNodes = mapToDottedNodes<TransformNode>(this.nodes, node => node instanceof TransformNode);
+    variant.broadcastEvent(Event.ELEMENT_NODES_CLONED, this);
     this.addMissingMaterialObservers();
     this.addParameterObservers();
   }
@@ -71,7 +83,9 @@ export class Element extends VariantParameterizable {
    * Creates an {@link Element} with given name.
    */
   public static async create(variant: Variant, name: string): Promise<Element> {
-    return new Element(variant, name);
+    const element = new Element(variant, name);
+    variant.broadcastEvent(Event.ELEMENT_CREATED, element);
+    return element;
   }
 
   /**
@@ -135,16 +149,25 @@ export class Element extends VariantParameterizable {
     return merge({}, this.variant.inheritedParameters, this.parameters);
   }
 
+  /**
+   * The actual {@link TransformNode}s that make up this {@link Element}.
+   */
+  get nodesFlat(): TransformNode[] {
+    return this.nodes.reduce(
+      (acc, cur) => [...acc, ...(cur.getChildren(n => n instanceof TransformNode, false) as TransformNode[])],
+      this.nodes
+    );
+  }
+
   /**
    * The actual {@link Mesh}es that make up this {@link Element}.
    * Handy for e.g. creating a bounding box around an entire element.
    */
   get meshesFlat(): Mesh[] {
-    const flatMeshes = this.nodes.reduce((accFlatMeshes, curNode) => {
-      const currMeshes = curNode.getChildMeshes(false, n => n instanceof Mesh) as Mesh[];
-      return [...accFlatMeshes, ...currMeshes];
-    }, [] as Mesh[]);
-    return flatMeshes;
+    return this.nodes.reduce(
+      (acc, cur) => [...acc, ...(cur.getChildren(n => n instanceof Mesh, false) as Mesh[])],
+      this.nodes.filter(n => n instanceof Mesh) as Mesh[]
+    );
   }
 
   /**
@@ -152,14 +175,10 @@ export class Element extends VariantParameterizable {
    * I.e. (real) Meshes as well as InstancedMeshes.
    */
   get abstractMeshesFlat(): AbstractMesh[] {
-    const allAbstractMeshes = this.nodes.reduce((acc, currNode) => {
-      const currAbstractMeshes = currNode.getChildMeshes(false, n => n instanceof AbstractMesh);
-      if (currNode instanceof AbstractMesh) {
-        currAbstractMeshes.unshift(currNode);
-      }
-      return [...acc, ...currAbstractMeshes];
-    }, [] as AbstractMesh[]); // initial accumulator value
-    return allAbstractMeshes;
+    return this.nodes.reduce(
+      (acc, cur) => [...acc, ...(cur.getChildren(n => n instanceof AbstractMesh, false) as AbstractMesh[])],
+      this.nodes.filter(n => n instanceof AbstractMesh) as AbstractMesh[]
+    );
   }
 
   /**
@@ -382,7 +401,7 @@ export class Element extends VariantParameterizable {
    */
   protected addParameterObservers(): Element {
     this._parameterObservers.set(Parameter.VISIBLE, [
-      async (element: Element, oldValue: ParameterValue, newValue: ParameterValue) => {
+      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
         let visible;
         try {
           visible = Parameter.parseBoolean(newValue);
@@ -390,6 +409,29 @@ export class Element extends VariantParameterizable {
           return;
         }
         if (visible === true) {
+          // Override visible state and materials if tag manager is in use to support texture lazy loading
+          if (element.variant.viewer.tagManager.parameters.size > 0) {
+            const hiddenNodeNames: string[] = [];
+            element.variant.viewer.tagManager.parameters.forEach((parameterBag, subject) => {
+              const nodes = element.variant.viewer.tagManager.getNodesBySubject(subject);
+              if (parameterBag[Parameter.VISIBLE] === false) {
+                hiddenNodeNames.push(...nodes.map(node => node.name));
+              }
+              // overwrite materials immediatly, so that original material of node doesn't get loaded, since it could
+              // be exchanged by the tag manager
+              if (parameterBag[Parameter.MATERIAL]) {
+                nodes.forEach(node => setMaterial(node, parameterBag[Parameter.MATERIAL], false));
+              }
+            });
+            // enable all nodes that are not explicitely hidden by the tag manager
+            element.nodesFlat.map(node => {
+              if (!hiddenNodeNames.includes(node.name)) {
+                node.setEnabled(true);
+              }
+            });
+            return;
+          }
+          // The default behaviour.
           element.nodes.forEach(node => {
             injectNodeMetadata(node, { visibility: node.isEnabled() });
             activate(node);
@@ -403,71 +445,67 @@ export class Element extends VariantParameterizable {
       },
     ]);
     this._parameterObservers.set(Parameter.SCALING, [
-      async (element: Element, oldValue: ParameterValue, newValue: ParameterValue) => {
+      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
         // we have to deal just with root nodes here due to relative impacts in a node tree
         element.nodes.forEach(node =>
           transformTransformNode(node, {
             scaling: Parameter.parseVector(newValue),
-            position: Parameter.parseVector(element.inheritedParameters[Parameter.POSITION] || '(0, 0, 0)'),
-            rotation: Parameter.parseRotation(element.inheritedParameters[Parameter.ROTATION] || '(0, 0, 0)'),
+            position: Parameter.parseVector(
+              element.inheritedParameters[Parameter.POSITION] || Parameter.getDefaultValue(Parameter.POSITION)
+            ),
+            rotation: Parameter.parseRotation(
+              element.inheritedParameters[Parameter.ROTATION] || Parameter.getDefaultValue(Parameter.ROTATION)
+            ),
           })
         );
       },
     ]);
     this._parameterObservers.set(Parameter.POSITION, [
-      async (element: Element, oldValue: ParameterValue, newValue: ParameterValue) => {
+      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
         // we have to deal just with root nodes here due to relative impacts in a node tree
         element.nodes.forEach(node =>
           transformTransformNode(node, {
-            scaling: Parameter.parseVector(element.inheritedParameters[Parameter.SCALING] || '(1, 1, 1)'),
+            scaling: Parameter.parseVector(
+              element.inheritedParameters[Parameter.SCALING] || Parameter.getDefaultValue(Parameter.SCALING)
+            ),
             position: Parameter.parseVector(newValue),
-            rotation: Parameter.parseRotation(element.inheritedParameters[Parameter.ROTATION] || '(0, 0, 0)'),
+            rotation: Parameter.parseRotation(
+              element.inheritedParameters[Parameter.ROTATION] || Parameter.getDefaultValue(Parameter.ROTATION)
+            ),
           })
         );
       },
     ]);
     this._parameterObservers.set(Parameter.ROTATION, [
-      async (element: Element, oldValue: ParameterValue, newValue: ParameterValue) => {
+      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
         // we have to deal just with root nodes here due to relative impacts in a node tree
         element.nodes.forEach(node =>
           transformTransformNode(node, {
-            scaling: Parameter.parseVector(element.inheritedParameters[Parameter.SCALING] || '(1, 1, 1)'),
-            position: Parameter.parseVector(element.inheritedParameters[Parameter.POSITION] || '(0, 0, 0)'),
+            scaling: Parameter.parseVector(
+              element.inheritedParameters[Parameter.SCALING] || Parameter.getDefaultValue(Parameter.SCALING)
+            ),
+            position: Parameter.parseVector(
+              element.inheritedParameters[Parameter.POSITION] || Parameter.getDefaultValue(Parameter.POSITION)
+            ),
             rotation: Parameter.parseRotation(newValue),
           })
         );
       },
     ]);
     this._parameterObservers.set(Parameter.MATERIAL, [
-      async (element: Element, oldValue: ParameterValue, newValue: ParameterValue) => {
+      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
         const materialName = newValue.toString();
         for (const node of element.nodes) {
-          assertTransformNode(node, (node: AbstractMesh) => {
-            if (node instanceof InstancedMesh) {
-              throw new Error(
-                `Changing parameter "${Parameter.MATERIAL}" ` +
-                  `of an InstancedMesh is not supported. ` +
-                  `Tried to change node "${node.id}" on element "${element.id}".`
-              );
-            }
-          });
-          setMaterial(element.variant.viewer.scene, node, materialName, true, element.variant);
+          assertTransformNode(node, node => assertMeshCapability(node, Parameter.MATERIAL));
+          setMaterial(node, materialName, true, element.variant);
         }
       },
     ]);
     this._parameterObservers.set(Parameter.MATERIAL_COLOR, [
-      async (element: Element, oldValue: ParameterValue, newValue: ParameterValue) => {
+      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
         const color = Parameter.parseColor(newValue);
         element.nodes.forEach(node => {
-          assertTransformNode(node, (node: AbstractMesh) => {
-            if (node instanceof InstancedMesh) {
-              throw new Error(
-                `Changing parameter "${Parameter.MATERIAL_COLOR}" ` +
-                  `of an InstancedMesh is not supported. ` +
-                  `Tried to change node "${node.id}" on element "${element.id}".`
-              );
-            }
-          });
+          assertTransformNode(node, node => assertMeshCapability(node, Parameter.MATERIAL_COLOR));
           if (this.variant.viewer.cloneMaterialsOnMutation) {
             if (!has(node.metadata, 'dirty.material')) {
               cloneTransformNodeMaterial(node);
@@ -482,18 +520,10 @@ export class Element extends VariantParameterizable {
       },
     ]);
     this._parameterObservers.set(Parameter.MATERIAL_METALLNESS, [
-      async (element: Element, oldValue: ParameterValue, newValue: ParameterValue) => {
+      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
         const metallness = Parameter.parseNumber(newValue);
         element.nodes.forEach(node => {
-          assertTransformNode(node, (node: AbstractMesh) => {
-            if (node instanceof InstancedMesh) {
-              throw new Error(
-                `Changing parameter "${Parameter.MATERIAL_METALLNESS}" ` +
-                  `of an InstancedMesh is not supported. ` +
-                  `Tried to change node "${node.id}" on element "${element.id}".`
-              );
-            }
-          });
+          assertTransformNode(node, node => assertMeshCapability(node, Parameter.MATERIAL_METALLNESS));
           if (this.variant.viewer.cloneMaterialsOnMutation) {
             if (!has(node.metadata, 'dirty.material')) {
               cloneTransformNodeMaterial(node);
@@ -508,18 +538,10 @@ export class Element extends VariantParameterizable {
       },
     ]);
     this._parameterObservers.set(Parameter.MATERIAL_ROUGHNESS, [
-      async (element: Element, oldValue: ParameterValue, newValue: ParameterValue) => {
+      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
         const roughness = Parameter.parseNumber(newValue);
         element.nodes.forEach(node => {
-          assertTransformNode(node, (node: AbstractMesh) => {
-            if (node instanceof InstancedMesh) {
-              throw new Error(
-                `Changing parameter "${Parameter.MATERIAL_ROUGHNESS}" ` +
-                  `of an InstancedMesh is not supported. ` +
-                  `Tried to change node "${node.id}" on element "${element.id}".`
-              );
-            }
-          });
+          assertTransformNode(node, node => assertMeshCapability(node, Parameter.MATERIAL_ROUGHNESS));
           if (this.variant.viewer.cloneMaterialsOnMutation) {
             if (!has(node.metadata, 'dirty.material')) {
               cloneTransformNodeMaterial(node);
@@ -534,7 +556,7 @@ export class Element extends VariantParameterizable {
       },
     ]);
     this._parameterObservers.set(Parameter.HIGHLIGHT_COLOR, [
-      async (element: Element, oldValue: ParameterValue, newValue: ParameterValue) => {
+      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
         // trigger Parameter.HIGHLIGHTED observers
         this._parameterObservers.get(Parameter.HIGHLIGHTED)?.forEach(observer => {
           observer(element, !!element.highlighted, !!element.highlighted);
@@ -542,7 +564,7 @@ export class Element extends VariantParameterizable {
       },
     ]);
     this._parameterObservers.set(Parameter.HIGHLIGHT_ENABLED, [
-      async (element: Element, oldValue: ParameterValue, newValue: ParameterValue) => {
+      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
         let curr;
         try {
           curr = Parameter.parseBoolean(newValue);
@@ -566,7 +588,7 @@ export class Element extends VariantParameterizable {
       },
     ]);
     this._parameterObservers.set(Parameter.HIGHLIGHTED, [
-      async (element: Element, oldValue: ParameterValue, newValue: ParameterValue) => {
+      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
         if (!element.inheritedParameters[Parameter.HIGHLIGHT_ENABLED]) {
           return;
         }
@@ -583,15 +605,7 @@ export class Element extends VariantParameterizable {
         // Add/Remove meshes to previously created highlight layers.
         if (highlighted === true) {
           element.nodes.forEach(node => {
-            assertTransformNode(node, (node: AbstractMesh) => {
-              if (node instanceof InstancedMesh) {
-                throw new Error(
-                  `Changing parameter "${Parameter.HIGHLIGHTED}" ` +
-                    `of an InstancedMesh is not supported. ` +
-                    `Tried to change node "${node.id}" on element "${element.id}".`
-                );
-              }
-            });
+            assertTransformNode(node, node => assertMeshCapability(node, Parameter.HIGHLIGHTED));
             let color = Color3.Green();
             if (element.inheritedParameters[Parameter.HIGHLIGHT_COLOR]) {
               color = Parameter.parseColor(element.inheritedParameters[Parameter.HIGHLIGHT_COLOR]);
@@ -610,7 +624,7 @@ export class Element extends VariantParameterizable {
       },
     ]);
     this._parameterObservers.set(Parameter.CAST_SHADOW, [
-      async (element: Element, oldValue: ParameterValue, newValue: ParameterValue) => {
+      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
         let castShadow;
         try {
           castShadow = Parameter.parseBoolean(newValue);
@@ -630,7 +644,7 @@ export class Element extends VariantParameterizable {
       },
     ]);
     this._parameterObservers.set(Parameter.CAST_SHADOW_FROM_LIGHTS, [
-      async (element: Element, oldValue: ParameterValue, newValue: ParameterValue) => {
+      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
         // TODO: Possible performance issue in combination with CAST_SHADOW, since both observers are initially called
         //       when CAST_SHADOW and CAST_SHADOW_FROM_LIGHTS are defined in the spec.
         const lightCsl = element.variant.inheritedViewerLights.map(l => l.name).join(',');
@@ -646,7 +660,7 @@ export class Element extends VariantParameterizable {
       },
     ]);
     this._parameterObservers.set(Parameter.RECEIVE_SHADOWS, [
-      async (element: Element, oldValue: ParameterValue, newValue: ParameterValue) => {
+      async (element: Element, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
         element.nodes.forEach(node => setReceiveShadows(node, Parameter.parseBoolean(newValue)));
       },
     ]);

package/src/api/classes/event.ts

@@ -50,6 +50,7 @@ export class Event {
    * * viewer: {@link Viewer}
    */
   public static readonly BOOTSTRAP_START = 'bootstrapStart';
+
   /**
    * Fired after bootstrapping of the {@link Viewer} finished.
    *
@@ -72,6 +73,7 @@ export class Event {
    * * path: string
    */
   public static readonly LOADING_START = 'loadingStart';
+
   /**
    * Fired after loading any type of JSON or resource finished.
    *
@@ -94,6 +96,7 @@ export class Event {
    * * variant: {@link Variant}
    */
   public static readonly ASSET_LOADING_START = 'assetLoadingStart';
+
   /**
    * Fired after loading an asset (e.g. glTF) onto the scene finished.
    *
@@ -117,6 +120,7 @@ export class Event {
    * * sceneJson: {@link SceneJson}
    */
   public static readonly SCENE_PROCESSING_START = 'sceneProcessingStart';
+
   /**
    * Fired after scene initialization end when bootstrapping the {@link Viewer}.
    *
@@ -134,12 +138,13 @@ export class Event {
    *
    * Scopes:
    * * Global
-   * * {@link Variant}
+   * * {@link Viewer}
    *
    * Payload:
    * * variant: {@link Variant}
    */
   public static readonly VARIANT_CREATED = 'variantCreated';
+
   /**
    * Fired after a {@link Variant} has been destroyed.
    *
@@ -217,6 +222,7 @@ export class Event {
    * * variantInstance: {@link VariantInstance}
    */
   public static readonly VARIANT_INSTANCE_CREATED = 'variantInstanceCreated';
+
   /**
    * Fired after a {@link VariantInstance} has been registered. This is the case when the {@link VariantInstance} is
    * considered "lazy".
@@ -229,6 +235,7 @@ export class Event {
    * * variantInstanceDefinition: {@link VariantInstanceDefinition}
    */
   public static readonly VARIANT_INSTANCE_REGISTERED = 'variantInstanceRegistered';
+
   /**
    * Fired after a {@link VariantInstance} has been cloned.
    *
@@ -240,6 +247,7 @@ export class Event {
    * * variantInstanceClone: {@link VariantInstance}
    */
   public static readonly VARIANT_INSTANCE_CLONED = 'variantInstanceCloned';
+
   /**
    * Fired after a {@link VariantInstance} has been destroyed.
    *
@@ -252,6 +260,42 @@ export class Event {
    */
   public static readonly VARIANT_INSTANCE_DESTROYED = 'variantInstanceDestroyed';
 
+  /**
+   * Fired after all {@link VariantInstance}s have been either created or registered.
+   *
+   * Scopes:
+   * * Global
+   * * {@link Viewer}
+   *
+   * Payload:
+   * * viewer: {@link viewer}
+   */
+  public static readonly VARIANT_INSTANCES_READY = 'variantInstancesReady';
+
+  /**
+   * Fired after the nodes of a {@link Variant} has been cloned to the {@link Element}.
+   *
+   * Scopes:
+   * * Global
+   * * {@link Variant}
+   *
+   * Payload:
+   * * element: {@link Element}
+   */
+  public static readonly ELEMENT_NODES_CLONED = 'elementNodesCloned';
+
+  /**
+   * Fired after an {@link Element} has been created.
+   *
+   * Scopes:
+   * * Global
+   * * {@link Variant}
+   *
+   * Payload:
+   * * element: {@link Element}
+   */
+  public static readonly ELEMENT_CREATED = 'elementCreated';
+
   /**
    * Fired after a parameter on an {@link Element} has been committed.
    *
@@ -341,6 +385,29 @@ export class Event {
    */
   public static readonly TEXTURE_LOADING_END = 'textureLoadingEnd';
 
+  /**
+   * Fired after a {@link Material} has been applied to a {@link Mesh}.
+   *
+   * Scopes:
+   * * Global
+   *
+   * Payload:
+   * * mesh: {@link Mesh}
+   * * material: {@link Material}
+   */
+  public static readonly MESH_MATERIAL_APPLIED = 'meshMaterialApplied';
+
+  /**
+   * Fired after a {@link TagManagerParameterObserver} has been called.
+   *
+   * Scopes:
+   * * Global
+   *
+   * Payload:
+   * * payload: {@link ParameterObserverResult}
+   */
+  public static readonly TAG_MANAGER_PARAMETER_COMMITTED = 'tagManagerParameterCommitted';
+
   /**
    * All events defined in this class.
    */

package/src/api/classes/fuzzyMap.ts

@@ -0,0 +1,21 @@
+export class FuzzyMap<K, V> extends Map {
+  get(key: K): V | undefined {
+    return super.get(this._key(key));
+  }
+
+  has(key: K): boolean {
+    return super.has(this._key(key));
+  }
+
+  set(key: K, value: V): this {
+    return super.set(this._key(key) || key, value);
+  }
+
+  delete(key: K): boolean {
+    return super.delete(this._key(key));
+  }
+
+  _key(key: K): K {
+    return [...super.keys()].find(k => JSON.stringify(k) === JSON.stringify(key));
+  }
+}