@combeenation/3d-viewer 4.3.0 → 5.0.0-beta4

package/src/api/manager/gltfExportManager.ts

@@ -0,0 +1,192 @@
+import { Mesh } from '@babylonjs/core';
+import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
+import { Color3 } from '@babylonjs/core/Maths/math.color';
+import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
+import { Scene } from '@babylonjs/core/scene';
+import { GLTF2Export, IExportOptions } from '@babylonjs/serializers';
+import { isMeshIncludedInExclusionList } from 'api/util/structureHelper';
+import { merge } from 'lodash-es';
+
+export class GltfExportManager {
+  /**
+   * Constructor.
+   */
+  protected constructor(protected viewer: Viewer) {}
+
+  /**
+   * Creates an {@link GltfExportManager}.
+   */
+  public static async create(viewer: Viewer): Promise<GltfExportManager> {
+    return new GltfExportManager(viewer);
+  }
+
+  /**
+   * Exports selected nodes to a file.
+   * @param filename optional name of the exported .GLB file.
+   * @param exportOptions export options to be merged with default options. See {@link gltfExportOptions}.
+   * @param excluded optional list of geometry (meshes, elements, variants, variantInstances) to be excluded from export.
+   */
+  public async exportGlb(
+    filename = 'glb-export.glb',
+    exportOptions: IExportOptions = {},
+    excluded?: ExcludedGeometry
+  ): Promise<File | undefined> {
+    this.exportPreProcess();
+    const glbData = await GLTF2Export.GLBAsync(
+      this.viewer.scene,
+      'dummy',
+      this.gltfExportOptions(exportOptions, excluded)
+    );
+    this.exportPostProcess();
+    const resBlob = glbData.glTFFiles['dummy.glb']; // should be only one file for glb
+
+    // check if result is valid, according to the typings this could also be a string
+    if (resBlob instanceof Blob) {
+      if (!filename.endsWith('.glb')) {
+        filename += '.glb';
+      }
+      return new File([resBlob], filename);
+    } else {
+      // result was not a valid blob
+      return undefined;
+    }
+  }
+
+  /**
+   * Exports selected nodes to GLTF. This may result in more than one file, since textures are exported separately.
+   * @param filename name of the main (text-based) .GLTF file referring to separate texture files.
+   * @param exportOptions export options to be merged with default options. See {@link gltfExportOptions}.
+   * @param excluded optional list of geometry (meshes, elements, variants, variantInstances) to be excluded from export.
+   */
+  public async exportGltfToFile(filename: string, exportOptions: IExportOptions = {}, excluded?: ExcludedGeometry) {
+    this.exportPreProcess();
+    await GLTF2Export.GLTFAsync(this.viewer.scene, filename, this.gltfExportOptions(exportOptions, excluded)).then(
+      glb => {
+        glb.downloadFiles();
+      }
+    );
+    this.exportPostProcess();
+  }
+
+  /**
+   * Exports selected nodes to GLB. This results in one binary file.
+   * @param filename name of the .GLB file.
+   * @param exportOptions export options to be merged with default options. See {@link gltfExportOptions}.
+   * @param excluded optional list of geometry (meshes, elements, variants, variantInstances) to be excluded from export
+   */
+  public async exportGlbToFile(filename: string, exportOptions: IExportOptions = {}, excluded?: ExcludedGeometry) {
+    this.exportPreProcess();
+    await GLTF2Export.GLBAsync(this.viewer.scene, filename, this.gltfExportOptions(exportOptions, excluded)).then(
+      glb => {
+        glb.downloadFiles();
+      }
+    );
+    this.exportPostProcess();
+  }
+
+  /**
+   * Gets predefined {@link IExportOptions } merged with given ones.
+   */
+  protected gltfExportOptions(mergeWithOptions: IExportOptions = {}, excluded?: ExcludedGeometry): IExportOptions {
+    const defaultOptions = {
+      // includeCoordinateSystemConversionNodes: true,
+      shouldExportNode: function (node: any) {
+        if (!node.isEnabled()) {
+          return false;
+        }
+        if (node.isVisible === false) {
+          return false;
+        }
+        if (node.name === '__bounding_box__') {
+          return false;
+        }
+        if (excluded && node instanceof Mesh && isMeshIncludedInExclusionList(node, excluded)) {
+          return false;
+        }
+        return true;
+      },
+    };
+    return merge({}, defaultOptions, mergeWithOptions);
+  }
+
+  /**
+   * Stuff to be done before exporting to GLTF
+   */
+  protected exportPreProcess() {
+    this.viewer.pauseRendering();
+    this.exchangeRefractionMaterials();
+  }
+
+  /**
+   * Stuff to be done after the GLTF export
+   */
+  protected exportPostProcess() {
+    this.restoreRefractionMaterials();
+    this.viewer.resumeRendering();
+  }
+
+  /**
+   * Materials with refraction set are not exported properly.
+   * Exchange all such (relevant) materials with a more export-friendly version
+   */
+  protected exchangeRefractionMaterials() {
+    for (const n of this.viewer.scene.getNodes()) {
+      if (!(n instanceof AbstractMesh)) continue;
+      if (!(n.material instanceof PBRMaterial)) continue;
+      if (!(n.material as PBRMaterial).subSurface.isRefractionEnabled) continue;
+      if ((n.material as PBRMaterial).transparencyMode !== PBRMaterial.PBRMATERIAL_OPAQUE) continue;
+      // if we're here, we have a node holding a material with set refraction whose transparencyMode is set to PBRMATERIAL_OPAQUE
+      n.material = this.createRefractionMaterialReplacement(n.material);
+    }
+  }
+
+  /**
+   * Restore original materials with set refraction.
+   */
+  protected restoreRefractionMaterials() {
+    for (const n of this.viewer.scene.getNodes()) {
+      if (!(n instanceof AbstractMesh)) continue;
+      if (!(n.material instanceof PBRMaterial)) continue;
+      if (!this.isMaterialClonedForExport(n.material)) continue;
+      // at this point we have a pbrmaterial tagged as cloned in its metadata that's set on a mesh
+
+      // restore and dispose
+      const currMaterial = n.material;
+      const prevMaterial = this.viewer.scene.getMaterialByUniqueID(n.material.metadata.clonedFrom);
+      if (prevMaterial) {
+        n.material = prevMaterial; // restore previous material
+        currMaterial.dispose(false, true); // dispose of clone
+      }
+    }
+  }
+
+  /**
+   * Create an export-friendly replacement material for a material using refraction.
+   * @param mat Material to be replaced
+   */
+  protected createRefractionMaterialReplacement(mat: PBRMaterial): PBRMaterial {
+    // if we're dealing with a clone already, return it instead of cloning
+    if (this.isMaterialClonedForExport(mat)) return mat;
+
+    // change material according to https://www.notion.so/combeenation/Glas-materials-don-t-look-glasy-after-export-d5fda2c6515e4420a8772744d3e6b460
+    let clonedMaterial = mat.clone(mat.name); // clone material. clone uses same name
+    clonedMaterial.metadata = { ...mat.metadata, clonedFrom: mat.uniqueId }; // create shallow copy of metadata on clone. see https://forum.babylonjs.com/t/the-metadata-of-the-mesh-cloned-by-the-instantiatemodelstoscene-method-is-a-shallow-copy/21563
+    clonedMaterial.refractionTexture = null;
+    clonedMaterial.metallicReflectanceTexture = null; // is this the correct one for metallic roughness?
+    clonedMaterial.alpha = 0.7;
+    clonedMaterial.albedoColor = new Color3(0.3, 0.3, 0.3);
+    clonedMaterial.transparencyMode = PBRMaterial.PBRMATERIAL_ALPHABLEND;
+    clonedMaterial.metallic = 0.65;
+    clonedMaterial.roughness = 0.15;
+
+    return clonedMaterial;
+  }
+
+  /**
+   * Inspect if a material was temporarily cloned for GLB export
+   * @param mat Material to be inspected
+   */
+  protected isMaterialClonedForExport(mat: PBRMaterial): boolean {
+    return mat.metadata.clonedFrom;
+  }
+}

package/src/api/util/globalTypes.ts

@@ -29,7 +29,7 @@ type ArcRotateCamera = import('@babylonjs/core/Cameras/arcRotateCamera').ArcRota
 type IScreenshotSize = import('@babylonjs/core/Misc/interfaces/screenshotSize').IScreenshotSize;
 type BabylonAnimation = import('@babylonjs/core/Animations/animation').Animation;
 type CubeTexture = import('@babylonjs/core/Materials/Textures/cubeTexture').CubeTexture;
-type MeshBuilder = import('@babylonjs/core/Meshes/meshBuilder').MeshBuilder;
+type MeshBuilder = typeof import('@babylonjs/core/Meshes/meshBuilder').MeshBuilder;
 type Texture = import('@babylonjs/core/Materials/Textures/texture').Texture;
 type HemisphericLight = import('@babylonjs/core/Lights/hemisphericLight').HemisphericLight;
 type DirectionalLight = import('@babylonjs/core/Lights/directionalLight').DirectionalLight;
@@ -232,6 +232,11 @@ type ScreenshotSettings = {
   renderSprites?: boolean;
 };
 
+/**
+ * Use this to define geometry to be excluded from autofocus, GLB export, etc.
+ */
+type ExcludedGeometry = (Mesh | VariantInstance | Variant | VariantElement)[];
+
 type AutofocusSettings = {
   /**
    * Can be used to customize the margins shown around the 3d model when calling {@link autofocusActiveCamera}.\
@@ -247,6 +252,8 @@ type AutofocusSettings = {
   beta?: number;
   /** Optional animation for the focusing camera movement */
   animation?: string | AnimationDefinition;
+  /** Optional list of geometry to be excluded from consideration */
+  exclude?: ExcludedGeometry;
 };
 
 type LightDefinitions = {

package/src/api/util/structureHelper.ts

@@ -0,0 +1,43 @@
+import { Mesh } from '@babylonjs/core/Meshes/mesh';
+import { Variant } from '../classes/variant';
+import { VariantInstance } from '../classes/variantInstance';
+import { Element } from '../classes/element';
+
+/**
+ * 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 was found in list
+ */
+const isMeshIncludedInExclusionList = function (mesh: Mesh, list: ExcludedGeometry): 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 isExcluded = list.some(geometryToExclude => {
+    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;
+  });
+  return isExcluded;
+};
+
+export { isMeshIncludedInExclusionList };