@combeenation/3d-viewer 4.2.0 → 5.0.0-alpha1

package/src/api/manager/animationManager.ts

@@ -9,109 +9,134 @@ import { PlacementAnimation } from '../classes/placementAnimation';
 
 //gsap.registerPlugin( CustomEase, ExpoScaleEase, RoughEase, SlowMo );
 
+export class AnimationManager {
+  public animations: AnimationInterface[] = [];
 
-export class AnimationManager  {
+  /**
+   * Constructor.
+   */
+  protected constructor(protected scene: Scene) {}
 
-	public animations: AnimationInterface[] = [];
+  /**
+   * Creates an {@link AnimationManager} based on given BabylonJS scene.
+   */
+  public static async create(scene: BabylonScene): Promise<AnimationManager> {
+    return new AnimationManager(scene);
+  }
 
-	/**
-	 * Constructor.
-	 */
-	protected constructor( protected scene: Scene ) {
-	}
+  /**
+   * @deprecated Use viewer.moveCameraTo().
+   */
+  public resetCamera(animate: boolean = false) {
+    //TODO currently only works for arcrotate. are there any other cameras?
+    let activeCamera = this.scene.activeCamera as Nullable<ArcRotateCamera>;
+    if (!activeCamera) {
+      throw new Error('There is no active camera');
+    }
 
-	/**
-	 * Creates an {@link AnimationManager} based on given BabylonJS scene.
-	 */
-	public static async create( scene: BabylonScene ): Promise<AnimationManager> {
-		return new AnimationManager( scene );
-	}
+    const initAlpha = activeCamera.metadata.alpha;
+    const initBeta = activeCamera.metadata.beta;
+    const initRadius = activeCamera.metadata.radius;
 
-	/**
-	 * @deprecated Use viewer.moveCameraTo().
-	 */
-	public resetCamera(animate: boolean = false) {
-		//TODO currently only works for arcrotate. are there any other cameras?
-		let activeCamera = this.scene.activeCamera as Nullable<ArcRotateCamera>;
-		if( ! activeCamera ) {
-			throw new Error( 'There is no active camera' );
-		}
+    if (animate) {
+      this.animateArcRotateCamera(initAlpha, initBeta, initRadius);
+    } else {
+      activeCamera.alpha = initAlpha;
+      activeCamera.beta = initBeta;
+      activeCamera.radius = initRadius;
+    }
+  }
 
-		const initAlpha = activeCamera.metadata.alpha;
-		const initBeta = activeCamera.metadata.beta;
-		const initRadius = activeCamera.metadata.radius;
+  /**
+   * @deprecated Use viewer.moveCameraTo().
+   */
+  public animateArcRotateCamera(targetAlpha: number, targetBeta: number, targetRadius: number) {
+    let activeCamera = this.scene.activeCamera as Nullable<ArcRotateCamera>;
+    if (!activeCamera) {
+      throw new Error('There is no active camera');
+    }
+    const alphaAnimation = new BabylonAnimation(
+      'alphaAnimation',
+      'alpha',
+      30,
+      BabylonAnimation.ANIMATIONTYPE_FLOAT,
+      BabylonAnimation.ANIMATIONLOOPMODE_CONSTANT
+    );
+    const betaAnimation = new BabylonAnimation(
+      'betaAnimation',
+      'beta',
+      30,
+      BabylonAnimation.ANIMATIONTYPE_FLOAT,
+      BabylonAnimation.ANIMATIONLOOPMODE_CONSTANT
+    );
+    const radiusAnimation = new BabylonAnimation(
+      'radiusAnimation',
+      'radius',
+      30,
+      BabylonAnimation.ANIMATIONTYPE_FLOAT,
+      BabylonAnimation.ANIMATIONLOOPMODE_CONSTANT
+    );
+    alphaAnimation.setKeys([
+      {
+        frame: 0,
+        value: activeCamera.alpha,
+      },
+      {
+        frame: 100,
+        value: targetAlpha,
+      },
+    ]);
+    betaAnimation.setKeys([
+      {
+        frame: 0,
+        value: activeCamera.beta,
+      },
+      {
+        frame: 100,
+        value: targetBeta,
+      },
+    ]);
+    radiusAnimation.setKeys([
+      {
+        frame: 0,
+        value: activeCamera.radius,
+      },
+      {
+        frame: 100,
+        value: targetRadius,
+      },
+    ]);
+    activeCamera.animations.push(alphaAnimation);
+    activeCamera.animations.push(betaAnimation);
+    activeCamera.animations.push(radiusAnimation);
 
-		if( animate ) {
-			this.animateArcRotateCamera(initAlpha, initBeta, initRadius);
-		} else {
-			activeCamera.alpha = initAlpha;
-			activeCamera.beta = initBeta;
-			activeCamera.radius = initRadius;
-		}
-	}
+    let animation = this.scene.beginAnimation(activeCamera, 0, 100, false, 10);
+    animation.disposeOnEnd = true;
+  }
 
-	/**
-	 * @deprecated Use viewer.moveCameraTo().
-	 */
-	public animateArcRotateCamera(targetAlpha: number, targetBeta: number, targetRadius: number) {
-		let activeCamera = this.scene.activeCamera as Nullable<ArcRotateCamera>;
-		if( ! activeCamera ) {
-			throw new Error( 'There is no active camera' );
-		}
-		const alphaAnimation = new BabylonAnimation( 'alphaAnimation', 'alpha', 30, BabylonAnimation.ANIMATIONTYPE_FLOAT, BabylonAnimation.ANIMATIONLOOPMODE_CONSTANT );
-		const betaAnimation = new BabylonAnimation( 'betaAnimation', 'beta', 30, BabylonAnimation.ANIMATIONTYPE_FLOAT, BabylonAnimation.ANIMATIONLOOPMODE_CONSTANT );
-		const radiusAnimation = new BabylonAnimation( 'radiusAnimation', 'radius', 30, BabylonAnimation.ANIMATIONTYPE_FLOAT, BabylonAnimation.ANIMATIONLOOPMODE_CONSTANT );
-		alphaAnimation.setKeys([{
-			frame : 0,
-			value : activeCamera.alpha
-		}, {
-			frame : 100,
-			value : targetAlpha
-		}]);
-		betaAnimation.setKeys([{
-			frame : 0,
-			value : activeCamera.beta
-		}, {
-			frame : 100,
-			value : targetBeta
-		}]);
-		radiusAnimation.setKeys( [{
-			frame : 0,
-			value : activeCamera.radius
-		}, {
-			frame : 100,
-			value : targetRadius
-		}]);
-		activeCamera.animations.push(alphaAnimation);
-		activeCamera.animations.push(betaAnimation);
-		activeCamera.animations.push(radiusAnimation);
+  /**
+   * Stops and kills all running animations.
+   */
+  public killAllAnimations() {
+    this.animations.forEach(animation => animation.kill());
+    this.animations = [];
+  }
 
-		let animation = this.scene.beginAnimation(activeCamera, 0, 100, false, 10);
-		animation.disposeOnEnd = true;
-	}
-
-	/**
-	 * Stops and kills all running animations.
-	 */
-	public killAllAnimations() {
-		this.animations.forEach( animation => animation.kill() );
-		this.animations = [];
-	}
-
-	/**
-	 * @see {@link PlacementAnimation.play}
-	 */
-	public async animateToPlacement( mutable: object,
-	                                 placement: PlacementDefinition | string,
-	                                 animation?: AnimationDefinition | string ): Promise<AnimationInterface> {
-		const _animation = new PlacementAnimation( mutable, placement, animation );
-		this.animations.push( _animation );
-		const animationPromise = _animation.play();
-		animationPromise.then( a => {
-			remove( this.animations, _a => _a === a );
-			a.kill();
-		} );
-		return await animationPromise;
-	}
-
-}
+  /**
+   * @see {@link PlacementAnimation.play}
+   */
+  public async animateToPlacement(
+    mutable: object,
+    placement: PlacementDefinition | string,
+    animation?: AnimationDefinition | string
+  ): Promise<AnimationInterface> {
+    const _animation = new PlacementAnimation(mutable, placement, animation);
+    this.animations.push(_animation);
+    const animationPromise = _animation.play();
+    animationPromise.then(a => {
+      remove(this.animations, _a => _a === a);
+      a.kill();
+    });
+    return await animationPromise;
+  }
+}

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 '../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/manager/sceneManager.ts

@@ -8,98 +8,95 @@ import { SpecStorage } from '../store/specStorage';
 import { mergeMaps } from '../util/resourceHelper';
 
 export class SceneManager extends ParameterObservable {
+  protected readonly _parameterObservers: Map<string, ParameterObserver[]> = new Map();
 
-	protected readonly _parameterObservers: Map<string, ParameterObserver[]> = new Map();
+  protected readonly parameterDeclaration: ParameterDeclarations = {
+    'environment': { type: 'string' },
+    'environment.rotation': { type: 'number' },
+  };
 
-	protected readonly parameterDeclaration: ParameterDeclarations = {
-		'environment': { type: 'string' },
-		'environment.rotation': { type: 'number' }
-	};
+  /**
+   * Constructor.
+   */
+  protected constructor(public scene: BabylonScene) {
+    super();
+    this.addParameterObservers();
+  }
 
-	/**
-	 * Constructor.
-	 */
-	protected constructor( public scene: BabylonScene ) {
-		super();
-		this.addParameterObservers();
-	}
+  /**
+   * Creates a {@link SceneManager} based on given BabylonJS scene.
+   */
+  public static async create(scene: BabylonScene): Promise<SceneManager> {
+    const sceneManager = new SceneManager(scene);
+    await sceneManager.bootstrapParameters(SpecStorage.get<ParameterBag>('scene.parameters'));
+    return sceneManager;
+  }
 
-	/**
-	 * Creates a {@link SceneManager} based on given BabylonJS scene.
-	 */
-	public static async create( scene: BabylonScene ): Promise<SceneManager> {
-		const sceneManager = new SceneManager( scene );
-		await sceneManager.bootstrapParameters( SpecStorage.get<ParameterBag>( 'scene.parameters' ) );
-		return sceneManager;
-	}
+  /**
+   * The active `Camera`.
+   */
+  get activeCamera(): Camera {
+    if (!this.scene.activeCamera) {
+      throw new Error('Scene has no active camera.');
+    }
+    return this.scene.activeCamera;
+  }
 
-	/**
-	 * The active `Camera`.
-	 */
-	get activeCamera(): Camera {
-		if( !this.scene.activeCamera ) {
-			throw new Error( 'Scene has no active camera.' );
-		}
-		return this.scene.activeCamera;
-	}
+  /**
+   * Places the given {@link ParameterBag} in the {@link SceneManager}'s parameters, replaces all patterns in the
+   * {@link StructureJson} and broadcasts all {@link ParameterObserver}s.
+   *
+   * @emit {@link Event.SCENE_PARAMETER_COMMITTED}
+   */
+  public async commitParameters(parameters?: ParameterBag): Promise<SceneManager> {
+    if (!parameters) {
+      parameters = {};
+    }
+    const oldParameters = cloneDeep(this.parameters);
+    merge(this.parameters, parameters);
 
-	/**
-	 * Places the given {@link ParameterBag} in the {@link SceneManager}'s parameters, replaces all patterns in the
-	 * {@link StructureJson} and broadcasts all {@link ParameterObserver}s.
-	 *
-	 * @emit {@link Event.SCENE_PARAMETER_COMMITTED}
-	 */
-	public async commitParameters( parameters?: ParameterBag ): Promise<SceneManager> {
-		if( !parameters ) {
-			parameters = {};
-		}
-		const oldParameters = cloneDeep( this.parameters );
-		merge( this.parameters, parameters );
+    // handle parameter observers
+    for (const parameter in this.parameters) {
+      const oldParameterValue = oldParameters[parameter];
+      const newParameterValue = this.parameters[parameter];
+      this.assertParameter(this.parameterDeclaration, parameter, newParameterValue);
+      if (oldParameterValue === newParameterValue) {
+        continue;
+      }
+      // parameter changed
+      const parameterObservers = mergeMaps(this._parameterObservers, this.parameterObservers);
+      if (parameterObservers.has(parameter)) {
+        const observers = parameterObservers.get(parameter)!;
+        observers.forEach(observer => {
+          observer(this, oldParameterValue, newParameterValue);
+          this.broadcastEvent(Event.SCENE_PARAMETER_COMMITTED, this, parameter, oldParameterValue, newParameterValue);
+        });
+      }
+    }
+    return this;
+  }
 
-		// handle parameter observers
-		for( const parameter in this.parameters ) {
-			const oldParameterValue = oldParameters[parameter];
-			const newParameterValue = this.parameters[parameter];
-			this.assertParameter( this.parameterDeclaration, parameter, newParameterValue );
-			if( oldParameterValue === newParameterValue ) {
-				continue;
-			}
-			// parameter changed
-			const parameterObservers = mergeMaps( this._parameterObservers, this.parameterObservers );
-			if( parameterObservers.has( parameter ) ) {
-				const observers = parameterObservers.get( parameter )!;
-				observers.forEach( observer => {
-					observer( this, oldParameterValue, newParameterValue );
-					this.broadcastEvent( Event.SCENE_PARAMETER_COMMITTED, this, parameter,
-						oldParameterValue, newParameterValue );
-				} );
-			}
-		}
-		return this;
-	}
-
-	protected addParameterObservers(): SceneManager {
-		this._parameterObservers.set( 'environment', [
-			( manager: SceneManager, oldValue: ParameterValue, newValue: ParameterValue ) => {
-				manager.scene.environmentTexture = CubeTexture.CreateFromPrefilteredData( newValue.toString(), manager.scene );
-			}
-		] );
-		this._parameterObservers.set( 'environment.rotation', [
-			( manager: SceneManager, oldValue: ParameterValue, newValue: ParameterValue ) => {
-				if( manager.scene.environmentTexture instanceof CubeTexture ) {
-					manager.scene.environmentTexture.rotationY = (parseFloat( newValue.toString() ) * Math.PI) / 180;
-				}
-			}
-		] );
-		return this;
-	}
-
-	/**
-	 * Bootstrapping for parameters. It sets the `parametersInitialized` to true for all ancestors.
-	 */
-	protected async bootstrapParameters( parameters?: ParameterBag ): Promise<SceneManager> {
-		await this.commitParameters( merge( cloneDeep( this.parameters ), parameters ) );
-		return this;
-	}
+  protected addParameterObservers(): SceneManager {
+    this._parameterObservers.set('environment', [
+      (manager: SceneManager, oldValue: ParameterValue, newValue: ParameterValue) => {
+        manager.scene.environmentTexture = CubeTexture.CreateFromPrefilteredData(newValue.toString(), manager.scene);
+      },
+    ]);
+    this._parameterObservers.set('environment.rotation', [
+      (manager: SceneManager, oldValue: ParameterValue, newValue: ParameterValue) => {
+        if (manager.scene.environmentTexture instanceof CubeTexture) {
+          manager.scene.environmentTexture.rotationY = (parseFloat(newValue.toString()) * Math.PI) / 180;
+        }
+      },
+    ]);
+    return this;
+  }
 
+  /**
+   * Bootstrapping for parameters. It sets the `parametersInitialized` to true for all ancestors.
+   */
+  protected async bootstrapParameters(parameters?: ParameterBag): Promise<SceneManager> {
+    await this.commitParameters(merge(cloneDeep(this.parameters), parameters));
+    return this;
+  }
 }