@combeenation/3d-viewer 8.0.0 → 9.0.0

package/src/api/util/babylonHelper.ts

@@ -14,6 +14,8 @@ import { Light } from '@babylonjs/core/Lights/light';
 import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
 import { BaseTexture } from '@babylonjs/core/Materials/Textures/baseTexture';
 import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture';
+import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture';
+import { Texture } from '@babylonjs/core/Materials/Textures/texture';
 import { Material } from '@babylonjs/core/Materials/material';
 import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
 import { Axis } from '@babylonjs/core/Maths/math.axis';
@@ -103,7 +105,7 @@ const cloneTransformNode = function (
   if (clone) {
     clone.id = newName;
     clone.metadata = cloneDeep(node.metadata);
-    injectNodeMetadata(clone, { cloneSource: node }, false);
+    injectMetadata(clone, { cloneSource: node }, false);
     // if the cloned node is of type InstancedMesh, due to a bug(?),
     // the InstancedMesh.isEnabled state may have changed after cloning.
     // in that case, set the clone's enabled state to the original's state
@@ -166,15 +168,15 @@ const cloneTransformNodeMaterial = function (
 };
 
 /**
- * @param node
+ * @param object
  * @param deep
  * @param metadata
  */
-const injectNodeMetadata = function (node: Node, metadata: {}, deep: boolean = true) {
-  node.metadata = merge({}, node.metadata, metadata);
-  if (deep && node instanceof TransformNode) {
-    const children = node.getChildTransformNodes(true);
-    children.forEach(child => injectNodeMetadata(child, metadata, deep));
+const injectMetadata = function (object: Node | Material, metadata: {}, deep: boolean = true) {
+  object.metadata = merge({}, object.metadata, metadata);
+  if (deep && object instanceof TransformNode) {
+    const children = object.getChildTransformNodes(true);
+    children.forEach(child => injectMetadata(child, metadata, deep));
   }
 };
 
@@ -277,13 +279,13 @@ const disableNodeWithParents = function (node: Node) {
 const transformTransformNode = function (node: TransformNode, transformation: TransformationDefinition) {
   // scaling
   if (!has(node.metadata, 'scaling.initial')) {
-    injectNodeMetadata(node, { 'scaling.initial': node.scaling }, false);
+    injectMetadata(node, { 'scaling.initial': node.scaling }, false);
   }
   const initialScaling = get(node.metadata, 'scaling.initial') as Vector3;
   node.scaling = initialScaling.multiply(transformation.scaling);
   // position
   if (!has(node.metadata, 'position.initial')) {
-    injectNodeMetadata(node, { 'position.initial': node.absolutePosition.clone() }, false);
+    injectMetadata(node, { 'position.initial': node.absolutePosition.clone() }, false);
   }
   const initialPosition = get(node.metadata, 'position.initial') as Vector3;
   node.setAbsolutePosition(initialPosition.add(transformation.position).multiply(transformation.scaling));
@@ -293,7 +295,7 @@ const transformTransformNode = function (node: TransformNode, transformation: Tr
     if (!rotationQuaternion) {
       rotationQuaternion = Quaternion.RotationYawPitchRoll(node.rotation.x, node.rotation.y, node.rotation.z);
     }
-    injectNodeMetadata(node, { 'rotation.initial': rotationQuaternion.asArray() }, false);
+    injectMetadata(node, { 'rotation.initial': rotationQuaternion.asArray() }, false);
   }
   const initialRotationQuaternion = Quaternion.FromArray(get(node.metadata, 'rotation.initial') as []);
   node.rotationQuaternion = initialRotationQuaternion;
@@ -409,7 +411,7 @@ const setMaterial = function (node: TransformNode, materialId: string, deep: boo
     const deferMaterialCreation = !materialExists && !node.isEnabled();
     if (deferMaterialCreation) {
       // do not set the material
-      injectNodeMetadata(node, { [missingMaterialMetadataName]: materialId }, false);
+      injectMetadata(node, { [missingMaterialMetadataName]: materialId }, false);
       // if it already had the missing material flag before, there already exists an observer...
       if (!hasMissingMaterial) {
         addMissingMaterialObserver(node);
@@ -459,7 +461,7 @@ const getOrCreateMaterial = async function (scene: Scene, materialId: string, va
  */
 const applyMaterial = 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);
+  injectMetadata(node, { [materialWaitingToBeSetMetadataName]: material.id }, false);
 
   const promTexturesReady = new Promise<void>(resolve =>
     BaseTexture.WhenAllReady(material.getActiveTextures(), resolve)
@@ -783,6 +785,50 @@ const reportDuplicateNodeNames = function (nodeNames: string[]): void {
   }
 };
 
+const drawPaintableOnMaterial = function (
+  material: Material,
+  imageSource: CanvasImageSource,
+  scene: Scene,
+  options?: PaintableOptions
+) {
+  // always take width and height from image source, scaling is done with uvScale properties
+  const widthAndHeight = {
+    width: imageSource.width as number,
+    height: imageSource.height as number,
+  };
+
+  const texture = new DynamicTexture(`${material.id}.paintable_texture`, widthAndHeight, scene);
+
+  // draw image on texture
+  const ctx = texture.getContext();
+  ctx.drawImage(imageSource, 0, 0);
+  texture.update();
+
+  // apply settings from paintable options to tweak position and scaling of image on the texture
+  texture.uScale = options?.uScale ?? texture.uScale;
+  texture.vScale = options?.vScale ?? texture.vScale;
+  texture.uOffset = options?.uOffset ?? texture.uOffset;
+  texture.vOffset = options?.vOffset ?? texture.vOffset;
+
+  // wrap mode is preferred, as it will always show the texture, no matter which position offset is currently chosen
+  // clamp mode requires more knowledge (and patience) when adjusting the uv scale and offset values
+  texture.wrapU = Texture.WRAP_ADDRESSMODE;
+  texture.wrapV = Texture.WRAP_ADDRESSMODE;
+
+  // apply the paintable texture on the dedicated material type
+  const materialCls = material.getClassName();
+  switch (materialCls) {
+    case 'PBRMaterial':
+      (material as PBRMaterial).albedoTexture = texture;
+      break;
+    case 'StandardMaterial':
+      (material as StandardMaterial).diffuseTexture = texture;
+      break;
+    default:
+      throw new Error(`Setting paintable texture for material of instance "${materialCls}" not implemented (yet).`);
+  }
+};
+
 export {
   getRootNode,
   isTextureWithOnLoadObservable,
@@ -793,7 +839,7 @@ export {
   cloneTransformNodeMaterial,
   getOrCreateMaterial,
   applyMaterial,
-  injectNodeMetadata,
+  injectMetadata,
   assertTransformNode,
   assertMeshCapability,
   activateTransformNode,
@@ -820,4 +866,5 @@ export {
   intersectingNodeNames,
   duplicateNodeNames,
   reportDuplicateNodeNames,
+  drawPaintableOnMaterial,
 };

package/src/api/util/globalTypes.ts

@@ -82,6 +82,18 @@ type PaintableDefinitions = {
   [name: string]: PaintableDefinition;
 };
 
+type PaintableValue = {
+  src: string;
+  options?: PaintableOptions;
+};
+
+type PaintableOptions = {
+  uScale?: number;
+  uOffset?: number;
+  vScale?: number;
+  vOffset?: number;
+};
+
 type Asset = {
   rootUrl: string;
   fileName: string | undefined;
@@ -280,7 +292,7 @@ type ScreenshotSettings = {
 /**
  * Use this to define geometry to be excluded from autofocus, GLB export, etc.
  */
-type ExcludedGeometry = Mesh | AbstractMesh | VariantInstance | Variant | VariantElement | Node | TagManagerSubject;
+type ExcludedGeometry = TransformNode | VariantInstance | Variant | VariantElement | TagManagerSubject;
 type ExcludedGeometryList = ExcludedGeometry[];
 
 type AutofocusSettings = {
@@ -370,7 +382,6 @@ type VariantInstanceDefinition = {
   name?: string;
   variant: DottedPathArgument;
   parameters?: ParameterBag;
-  tagManagerParameterValues?: TagManagerParameterValue[];
   lazy?: boolean;
 };
 
@@ -403,7 +414,7 @@ type DottedPathArgument = string | string[] | DottedPath;
 type ParameterObserverResult = boolean | void;
 
 type ParameterObserver = (
-  payload: any,
+  object: any,
   oldValue: Undefinable<ParameterValue>,
   newValue: ParameterValue
 ) => Promise<ParameterObserverResult>;
@@ -487,13 +498,18 @@ type TagMapping = {
 type TagManagerSubject = {
   tagName?: string;
   nodeName?: string;
+  materialName?: string;
 };
 
+type TagManagerParameterObserverResult = ParameterObserverResult;
+
 /**
  * The observer should return `false` in cases where the given value was not actually applied. E.g. when wanting to
  * apply a property on the given `node`s material which doesn't exist at the time the observer is called etc.
  */
-type TagManagerParameterObserver = (payload: TagManagerParameterObserverPayload) => Promise<ParameterObserverResult>;
+type TagManagerParameterObserver = (
+  payload: TagManagerParameterObserverPayload
+) => Promise<TagManagerParameterObserverResult>;
 
 type TagManagerParameterBag = FuzzyMap<TagManagerSubject, ParameterBag>;
 
@@ -502,6 +518,7 @@ type TagManagerParameterObserverBag = Map<string, TagManagerParameterObserver>;
 type TagManagerParameterObserverPayload = {
   subject: TagManagerSubject;
   nodes: TransformNode[];
+  materials: Material[];
   newValue: ParameterValue;
   oldValue: Undefinable<ParameterValue>;
 };
@@ -509,10 +526,21 @@ type TagManagerParameterObserverPayload = {
 type TagManagerParameterValue = {
   tagName?: string;
   nodeName?: string;
+  materialName?: string;
   parameterName: string;
   value: ParameterValue;
 };
 
+type TagManagerParameterObserverResultBag = {
+  subject: TagManagerSubject;
+  parameter: string;
+  nodes: TransformNode[];
+  materials: Material[];
+  oldValue: ParameterValue;
+  newValue: ParameterValue;
+  parameterObserverResult: TagManagerParameterObserverResult;
+};
+
 type NodeNamingStrategyPayload = {
   variantInstance: VariantInstance;
   variant: Variant;

package/src/api/util/resourceHelper.ts

@@ -135,6 +135,7 @@ const createImageFromImgSrc = async function (imgSrc: string): Promise<HTMLImage
     img.onload = () => {
       setTimeout(resolve, 0);
     };
+    img.crossOrigin = 'anonymous';
     img.src = imgSrc;
   });
 
@@ -151,9 +152,15 @@ const _embedAssets = async function (svgSrc: string): Promise<string> {
   // Regex copied from https://stackoverflow.com/a/8943487/1273551, not "stress tested"...
   const urlRegex = /(\bhttps?:\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
   const allUrls = svgSrc.match(urlRegex) as string[];
-  const assetUrls = allUrls.filter(url =>
-    _assetExtensions.some(extension => url.toLowerCase().endsWith(`.${extension}`))
-  );
+
+  const assetUrls = allUrls.filter(url => {
+    const indexParam = url.indexOf('?');
+    // remove url parameter to recognize extension
+    if (indexParam > -1) {
+      url = url.substring(0, indexParam);
+    }
+    return _assetExtensions.some(extension => url.toLowerCase().endsWith(`.${extension}`));
+  });
   const assetBase64Fetcher = assetUrls.map(_fetchBase64AssetUrl);
   const assetFetcherResults = await Promise.all(assetBase64Fetcher);
   return assetFetcherResults.reduce((svgSrc, x) => svgSrc.replace(x.url, x.base64), svgSrc);

package/src/api/util/sceneLoaderHelper.ts

@@ -1,5 +1,5 @@
 import { Event, emitter } from '../classes/event';
-import { applyMaterial, getOrCreateMaterial, injectNodeMetadata } from './babylonHelper';
+import { applyMaterial, getOrCreateMaterial, injectMetadata } from './babylonHelper';
 import { sleep } from './resourceHelper';
 import { ISceneLoaderPlugin } from '@babylonjs/core/Loading/sceneLoader';
 import { Material } from '@babylonjs/core/Materials/material';
@@ -101,7 +101,7 @@ export const addMissingMaterialMetadata = function (dataParsed: any, container:
       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);
+      injectMetadata(currMeshImported, { [missingMaterialMetadataName]: materialOnOriginalMesh }, false);
       break;
     }
   });

package/src/api/util/structureHelper.ts

@@ -1,58 +1,60 @@
 import { Element } from '../classes/element';
 import { Variant } from '../classes/variant';
 import { VariantInstance } from '../classes/variantInstance';
-import { Mesh } from '@babylonjs/core/Meshes/mesh';
+import { GltfExportManager } from '../manager/gltfExportManager';
+import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import { Tags } from '@babylonjs/core/Misc/tags';
 
 /**
- * Find out if a mesh is part of a list of excluded geometry
- * @param mesh BJS mesh
+ * Find out if a node is part of a list of excluded geometry
+ * @param node BJS node
  * @param list list of excluded geometry
- * @returns boolean based on whether mesh (or one of its parents) was found in list
+ * @returns boolean based on whether node (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 isNodeIncludedInExclusionList = function (node: TransformNode, list: ExcludedGeometryList): boolean {
+  const checkNode = (inputNode: TransformNode, nodeToCheck: TransformNode) => {
+    return inputNode.uniqueId === nodeToCheck.uniqueId;
   };
-  const checkElement = (inputEl: Element, meshToCheck: Mesh) => {
-    return inputEl.meshesFlat.some(m => checkMesh(m, meshToCheck));
+  const checkElement = (inputEl: Element, nodeToCheck: TransformNode) => {
+    return inputEl.nodesFlat.some(m => checkNode(m, nodeToCheck));
   };
-  const checkVariant = (inputVariant: Variant, meshToCheck: Mesh) => {
-    return inputVariant.elements.some(el => checkElement(el, meshToCheck));
+  const checkVariant = (inputVariant: Variant, nodeToCheck: TransformNode) => {
+    return inputVariant.elements.some(el => checkElement(el, nodeToCheck));
   };
-  const checkVariantInstance = (inputVarInst: VariantInstance, meshToCheck: Mesh) => {
-    return inputVarInst.variant.elements.some(el => checkElement(el, meshToCheck));
+  const checkVariantInstance = (inputVarInst: VariantInstance, nodeToCheck: TransformNode) => {
+    return inputVarInst.variant.elements.some(el => checkElement(el, nodeToCheck));
   };
-  const checkTagManagerSubject = (inputSubject: TagManagerSubject, meshToCheck: Mesh) => {
-    const nameMatches = inputSubject.nodeName && inputSubject.nodeName === meshToCheck.name;
-    const tagMatches = inputSubject.tagName && Tags.MatchesQuery(mesh, inputSubject.tagName);
+  const checkTagManagerSubject = (inputSubject: TagManagerSubject, nodeToCheck: TransformNode) => {
+    const nodeName = nodeToCheck.metadata?.[GltfExportManager.NAME_BEFORE_EXPORT_METADATA_PROPERTY] ?? nodeToCheck.name;
+    const nameMatches = inputSubject.nodeName && inputSubject.nodeName === nodeName;
+    const tagMatches = inputSubject.tagName && Tags.MatchesQuery(nodeToCheck, inputSubject.tagName);
     return nameMatches || tagMatches;
   };
-  const check = (geometryToExclude: ExcludedGeometry, mesh: Mesh) => {
+  const check = (geometryToExclude: ExcludedGeometry, node: TransformNode) => {
     if (geometryToExclude instanceof VariantInstance) {
-      return checkVariantInstance(geometryToExclude, mesh);
+      return checkVariantInstance(geometryToExclude, node);
     }
     if (geometryToExclude instanceof Variant) {
-      return checkVariant(geometryToExclude, mesh);
+      return checkVariant(geometryToExclude, node);
     }
     if (geometryToExclude instanceof Element) {
-      return checkElement(geometryToExclude, mesh);
+      return checkElement(geometryToExclude, node);
     }
-    if (geometryToExclude instanceof Mesh) {
-      return checkMesh(geometryToExclude, mesh);
+    if (geometryToExclude instanceof TransformNode) {
+      return checkNode(geometryToExclude, node);
     }
     if ((geometryToExclude as TagManagerSubject).tagName || (geometryToExclude as TagManagerSubject).nodeName) {
-      return checkTagManagerSubject(geometryToExclude as TagManagerSubject, mesh);
+      return checkTagManagerSubject(geometryToExclude as TagManagerSubject, node);
     }
     return false;
   };
 
-  let isExcluded = list.some(geometryToExclude => check(geometryToExclude, mesh));
-  if (!isExcluded && mesh.parent instanceof Mesh) {
-    isExcluded = isMeshIncludedInExclusionList(mesh.parent, list);
+  let isExcluded = list.some(geometryToExclude => check(geometryToExclude, node));
+  if (!isExcluded && node.parent instanceof TransformNode) {
+    isExcluded = isNodeIncludedInExclusionList(node.parent, list);
   }
 
   return isExcluded;
 };
 
-export { isMeshIncludedInExclusionList };
+export { isNodeIncludedInExclusionList };