@combeenation/3d-viewer 4.0.0-beta3 → 4.0.0

package/src/api/classes/viewer.ts

@@ -3,9 +3,11 @@ import { PickingInfo } from '@babylonjs/core/Collisions/pickingInfo';
 import { BoundingInfo } from '@babylonjs/core/Culling/boundingInfo';
 import { Engine } from '@babylonjs/core/Engines/engine';
 import { HighlightLayer } from '@babylonjs/core/Layers/highlightLayer';
+import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
+import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture';
+import { Color3 } from '@babylonjs/core/Maths/math.color';
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
 import { Mesh } from '@babylonjs/core/Meshes/mesh';
-import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import { ScreenshotTools } from '@babylonjs/core/Misc/screenshotTools';
 import { Scene } from '@babylonjs/core/scene';
 import { isString } from 'lodash-es';
@@ -15,7 +17,7 @@ import { AnimationManager } from '../manager/animationManager';
 import { SceneManager } from '../manager/sceneManager';
 import { VariantInstanceManager } from '../manager/variantInstanceManager';
 import { SpecStorage } from '../store/specStorage';
-import { debounce, loadJson } from '../util/resourceHelper';
+import { debounce, loadJson, sleep } from '../util/resourceHelper';
 import { Event } from './event';
 import { EventBroadcaster } from './eventBroadcaster';
 import { Parameter } from './parameter';
@@ -145,8 +147,14 @@ export class Viewer extends EventBroadcaster {
 		}
 		// resize handler
 		window.addEventListener( 'resize', debounce( this.resize.bind( this ), 100 ) );
+		// wait until scene is completely ready
+		await this.scene.whenReadyAsync();
 		// event broadcasting
 		this.broadcastEvent( Event.BOOTSTRAP_END, this );
+		// render loop
+		this.engine.runRenderLoop( () => {
+			this.scene.render();
+		} );
 		return this;
 	}
 
@@ -264,36 +272,47 @@ export class Viewer extends EventBroadcaster {
 	/**
 	 * Calculates the bounding box from all visible meshes on the scene.
 	 */
-	public calculateBoundingBox(): Mesh {
+	public async calculateBoundingBox(): Promise<Mesh> {
 		if( this.scene.meshes.length === 0 ) {
 			throw new Error( 'There are currently no meshes on the scene.' );
 		}
-		let max = new Vector3( 0, 0, 0 );
-		let min = new Vector3( 0, 0, 0 );
-		this.scene.meshes.filter( mesh => mesh.isVisible ).forEach( mesh => {
-			max = Vector3.Maximize( max, mesh.getBoundingInfo().boundingBox.maximumWorld );
-			min = Vector3.Minimize( min, mesh.getBoundingInfo().boundingBox.minimumWorld );
-		} );
-		let boundingBox = this.scene.getMeshByName( '__bounding_box__' ) as Mesh;
+		this.scene.render();  // XXX: workaround for BoundingBox not respecting render loop
+		const bbName = '__bounding_box__';
+		
+		const { max, min } = this.scene.meshes.filter( mesh => {
+			const isEnabled = mesh.isEnabled();
+			// ignore the existing bounding box mesh for calculating the current one
+			const isNotBBoxMesh = bbName !== mesh.id;
+			// ignore meshes with invalid bounding infos
+			const hasValidBBoxInfo = mesh.getBoundingInfo().boundingSphere.radius > 0;
+			return isEnabled && isNotBBoxMesh && hasValidBBoxInfo;
+		} ).reduce( ( accBBoxMinMax, curMesh, idx ) => {
+			const bBox = curMesh.getBoundingInfo().boundingBox;
+			// use the first entry in the array as default value and get the resulting maximum/minimum values
+			const max = ( idx === 0 ) ? bBox.maximumWorld : Vector3.Maximize( accBBoxMinMax.max, bBox.maximumWorld )
+			const min = ( idx === 0 ) ? bBox.minimumWorld : Vector3.Minimize( accBBoxMinMax.min, bBox.minimumWorld )
+			return { max, min }
+		}, { max: new Vector3(), min: new Vector3() } );
+
+		let boundingBox = this.scene.getMeshByName( bbName ) as Mesh;
 		if( !boundingBox ) {
-			boundingBox = new Mesh( '__bounding_box__', this.scene );
+			boundingBox = new Mesh( bbName, this.scene );
 		}
 		boundingBox.setBoundingInfo( new BoundingInfo( min, max ) );
-		//boundingBox.showBoundingBox = true;
 		return boundingBox;
 	}
 
 	/**
 	 * Focuses the camera to see every visible mesh in scene and tries to optimize wheel precision and panning.
 	 */
-	public autofocusActiveCamera( settings?: AutofocusSettings ) {
+	public async autofocusActiveCamera( settings?: AutofocusSettings ) {
 		const activeCamera = this.scene.activeCamera;
 		if( !activeCamera ) {
 			throw new Error( 'No active camera found when using autofocus feature.' );
 		}
 		if( activeCamera instanceof ArcRotateCamera ) {
 			// calculate some values
-			const boundingBox = this.calculateBoundingBox();
+			const boundingBox = await this.calculateBoundingBox();
 			const size = boundingBox.getBoundingInfo().maximum.subtract( boundingBox.getBoundingInfo().minimum );
 			let radius = size.length() * (settings?.radiusFactor ?? 1.5);
 			if( !isFinite( radius ) ) {
@@ -358,6 +377,56 @@ export class Viewer extends EventBroadcaster {
 		return this;
 	}
 
+	/**
+	 * Show coordinate system with given dimension (for debugging purpose).
+	 */
+	public showWorldCoordinates( dimension: number ) {
+		const scene = this.scene;
+		const makeTextPlane = function( text: string, color: string, size: number ) {
+			const dynamicTexture = new DynamicTexture( 'DynamicTexture', 50, scene, true );
+			dynamicTexture.hasAlpha = true;
+			dynamicTexture.drawText( text, 5, 40, 'bold 36px Arial', color, 'transparent', true );
+			const plane = Mesh.CreatePlane( 'TextPlane', size, scene, true );
+			plane.material = new StandardMaterial( 'TextPlaneMaterial', scene );
+			plane.material.backFaceCulling = false;
+			// @ts-ignore
+			plane.material.specularColor = new Color3( 0, 0, 0 );
+			// @ts-ignore
+			plane.material.diffuseTexture = dynamicTexture;
+			return plane;
+		};
+		const axisX = Mesh.CreateLines( 'axisX', [
+			Vector3.Zero(),
+			new Vector3( dimension, 0, 0 ),
+			new Vector3( dimension * 0.95, 0.05 * dimension, 0 ),
+			new Vector3( dimension, 0, 0 ),
+			new Vector3( dimension * 0.95, -0.05 * dimension, 0 )
+		], scene );
+		axisX.color = new Color3( 1, 0, 0 );
+		const xChar = makeTextPlane( 'X', 'red', dimension / 10 );
+		xChar.position = new Vector3( 0.9 * dimension, -0.05 * dimension, 0 );
+		const axisY = Mesh.CreateLines( 'axisY', [
+			Vector3.Zero(),
+			new Vector3( 0, dimension, 0 ),
+			new Vector3( -0.05 * dimension, dimension * 0.95, 0 ),
+			new Vector3( 0, dimension, 0 ),
+			new Vector3( 0.05 * dimension, dimension * 0.95, 0 )
+		], scene );
+		axisY.color = new Color3( 0, 1, 0 );
+		const yChar = makeTextPlane( 'Y', 'green', dimension / 10 );
+		yChar.position = new Vector3( 0, 0.9 * dimension, -0.05 * dimension );
+		const axisZ = Mesh.CreateLines( 'axisZ', [
+			Vector3.Zero(),
+			new Vector3( 0, 0, dimension ),
+			new Vector3( 0, -0.05 * dimension, dimension * 0.95 ),
+			new Vector3( 0, 0, dimension ),
+			new Vector3( 0, 0.05 * dimension, dimension * 0.95 )
+		], scene );
+		axisZ.color = new Color3( 0, 0, 1 );
+		const zChar = makeTextPlane( 'Z', 'blue', dimension / 10 );
+		zChar.position = new Vector3( 0, 0.05 * dimension, 0.9 * dimension );
+	}
+
 	/**
 	 * @emits {@link Event.SCENE_PROCESSING_START}
 	 * @emits {@link Event.SCENE_PROCESSING_END}
@@ -393,9 +462,6 @@ export class Viewer extends EventBroadcaster {
 		this._sceneManager = await SceneManager.create( scene );
 		this._animationManager = await AnimationManager.create( scene );
 		this.broadcastEvent( Event.SCENE_PROCESSING_END, scene );
-		engine.runRenderLoop( () => {
-			scene.render();
-		} );
 		return scene;
 	}
 

package/src/api/classes/viewerLight.ts

@@ -0,0 +1,330 @@
+import { PointLight } from '@babylonjs/core';
+import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';
+import { Light } from '@babylonjs/core/Lights/light';
+import { ShadowLight } from '@babylonjs/core/Lights/shadowLight';
+import { ShadowGenerator } from '@babylonjs/core/Lights/Shadows/shadowGenerator';
+import '@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent';
+import { Vector3 } from '@babylonjs/core/Maths/math.vector';
+import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_lights_punctual';
+import { get, isEmpty, isString, set } from 'lodash-es';
+import {
+	cloneNodeWithParents,
+	disableNodeWithParents,
+	enableNodeWithParents,
+	getRootNode,
+	injectNodeMetadata,
+	moveTransformNode,
+	rotateTransformNode
+} from './../util/babylonHelper';
+import { DottedPath } from './dottedPath';
+import { Parameter } from './parameter';
+import { Variant } from './variant';
+import { VariantParameterizable } from './variantParameterizable';
+
+/**
+ * A {@link ViewerLight} of a {@link Variant}. Acts as a container for BabylonJS lights. Lives only in the context of a
+ * {@link Variant}.
+ */
+export class ViewerLight extends VariantParameterizable {
+
+	protected _light: Light | undefined;
+
+	/**
+	 * Constructor.
+	 */
+	protected constructor( public readonly variant: Variant,
+	                       public readonly name: string ) {
+		super( variant, name );
+		this.addParameterObservers();
+	}
+
+	/**
+	 * Creates a {@link ViewerLight} with given name.
+	 */
+	public static async create( variant: Variant, name: string ): Promise<ViewerLight> {
+		const viewerLight = new ViewerLight( variant, name );
+		viewerLight._light = await viewerLight.createBabylonLightFromDefinition( viewerLight.definition );
+		return viewerLight;
+	}
+
+	/**
+	 * The wrapped Light.
+	 */
+	get light(): Light {
+		if( !this._light ) {
+			throw new Error( `Light for ViewerLight "${this.name}" has not been properly initialized.` );
+		}
+		return this._light!;
+	}
+
+	/**
+	 * The {@link DottedPath} in the built tree of {@link ViewerLight}s.
+	 * E.g. "_.top-1.sub-2.sub-sub-3.el-1"
+	 */
+	get dottedPath(): DottedPath {
+		return DottedPath.create( this.variant.dottedPath ).addPart( this.name );
+	}
+
+	/**
+	 * The id representing a {@link DottedPath}.
+	 */
+	get id(): string {
+		const dottedPath = DottedPath.create( this.dottedPath );
+		dottedPath.shiftPart();  // remove root
+		return dottedPath.path;
+	}
+
+	/**
+	 * The {@link LightDefinition} of the {@link ViewerLight}.
+	 */
+	get definition(): LightDefinition {
+		const definition = this.variant.structureJson.lights![this.name];
+		if( isString( definition ) ) {
+			return {
+				type: 'baked',
+				path: definition
+			} as LightDefinition;
+		}
+		return definition as LightDefinition;
+	}
+
+	/**
+	 * The type of the {@link ViewerLight}'s light.
+	 */
+	get type(): string {
+		return this.light.constructor.name.replace( /light/i, '' ).toLowerCase();
+	}
+
+	/**
+	 * @see {@link VariantParameterizable.commitParameters}
+	 * @emit {@link Event.VIEWER_LIGHT_PARAMETER_COMMITTED}
+	 */
+	public async commitParameters( parameters?: ParameterBag ): Promise<VariantParameterizable> {
+		return super.commitParameters( parameters );
+	}
+
+	/**
+	 * Adds the default {@link ParameterObserver}s which are called every time {@link commitParameters} is called.
+	 */
+	protected addParameterObservers(): ViewerLight {
+		this._parameterObservers.set( Parameter.VISIBLE, [
+			async ( light: ViewerLight, oldValue: ParameterValue, newValue: ParameterValue ) => {
+				let visible;
+				try {
+					visible = Parameter.parseBoolean( newValue );
+				} catch( e ) {
+					return;
+				}
+				if( visible === true ) {
+					enableNodeWithParents( light.light );
+				} else if( visible === false ) {
+					disableNodeWithParents( light.light );
+				}
+			}
+		] );
+		this._parameterObservers.set( Parameter.INTENSITY, [
+			async ( light: ViewerLight, oldValue: ParameterValue, newValue: ParameterValue ) => {
+				set( light.light, 'intensity', Parameter.parseNumber( newValue ) );
+			}
+		] );
+		this._parameterObservers.set( Parameter.POSITION, [
+			async ( light: ViewerLight, oldValue: ParameterValue, newValue: ParameterValue ) => {
+				// we have to deal just with root nodes here due to relative impacts in a node tree
+				const rootNode = getRootNode( light.light );
+				if( rootNode instanceof TransformNode ) {
+					moveTransformNode( rootNode, Parameter.parseVector( newValue ) );
+				}
+			}
+		] );
+		this._parameterObservers.set( Parameter.ROTATION, [
+			async ( light: ViewerLight, oldValue: ParameterValue, newValue: ParameterValue ) => {
+				// The current implementation (rotating around coordinates 0,0,0) implicitly mutates the position of a node.
+				// Since a user expects the rotation after the positioning, we have to manually fire the position observers.
+				// Without calling these observers, the pivot and the position of a node is initially the same before rotating,
+				// so there is no rotation happening at all.
+				if( Parameter.POSITION in light.inheritedParameters ) {
+					await light.commitParameter( Parameter.POSITION, light.inheritedParameters[Parameter.POSITION] );
+				}
+				// we have to deal just with root nodes here due to relative impacts in a node tree
+				const rootNode = getRootNode( light.light );
+				if( rootNode instanceof TransformNode ) {
+					rotateTransformNode( rootNode, Parameter.parseRotation( newValue ) );
+				}
+			}
+		] );
+		this._parameterObservers.set( Parameter.SCALING, [
+			async ( light: ViewerLight, oldValue: ParameterValue, newValue: ParameterValue ) => {
+				// we have to deal just with root nodes here due to relative impacts in a node tree
+				const rootNode = getRootNode( light.light );
+				if( rootNode instanceof TransformNode ) {
+					rootNode.scaling = Parameter.parseScaling( newValue );
+				}
+			}
+		] );
+		this._parameterObservers.set( Parameter.DIRECTION, [
+			async ( light: ViewerLight, oldValue: ParameterValue, newValue: ParameterValue ) => {
+				if(
+					(light.light instanceof ShadowLight && !(light.light instanceof PointLight))
+					|| light.light instanceof HemisphericLight
+				) {
+					set( light.light, 'direction', Parameter.parseVector( newValue ) );
+				}
+			}
+		] );
+		this._parameterObservers.set( Parameter.ANGLE, [
+			async ( light: ViewerLight, oldValue: ParameterValue, newValue: ParameterValue ) => {
+				if( light.light.getClassName() === 'SpotLight' ) {
+					set( light.light, 'angle', Parameter.parseNumber( newValue ) );
+				}
+			}
+		] );
+		this._parameterObservers.set( Parameter.EXPONENT, [
+			async ( light: ViewerLight, oldValue: ParameterValue, newValue: ParameterValue ) => {
+				if( light.light.getClassName() === 'SpotLight' ) {
+					set( light.light, 'exponent', Parameter.parseNumber( newValue ) );
+				}
+			}
+		] );
+		this._parameterObservers.set( Parameter.DIFFUSE, [
+			async ( light: ViewerLight, oldValue: ParameterValue, newValue: ParameterValue ) => {
+				set( light.light, 'diffuse', Parameter.parseColor( newValue ) );
+			}
+		] );
+		this._parameterObservers.set( Parameter.SPECULAR, [
+			async ( light: ViewerLight, oldValue: ParameterValue, newValue: ParameterValue ) => {
+				set( light.light, 'specular', Parameter.parseColor( newValue ) );
+			}
+		] );
+		return this;
+	}
+
+	/**
+	 * @param definition
+	 * @protected
+	 */
+	protected async createBabylonLightFromDefinition( definition: LightDefinition ): Promise<Light> {
+		const parameters = Parameter.parseFromDeclarations( Parameter.declarations, this.inheritedParameters );
+		const scene = this.variant.viewer.scene;
+		let lightId = this.id;
+		let babylonLight;
+		switch( definition.type ) {
+			case 'baked':
+				if( !definition['path'] ) {
+					throw new Error( `The light "${lightId}" of type "${definition.type}" needs a "path".` );
+				}
+				const bakedLight = this.variant.inheritedLights.find( l => l.metadata.dottedPath.path === definition['path'] );
+				if( bakedLight ) {
+					lightId = bakedLight.metadata.dottedPath.clone().unshiftPart( this.id ).path;
+					babylonLight = cloneNodeWithParents( bakedLight ) as Light;
+					babylonLight!.name = lightId;
+					babylonLight!.id = lightId;
+				} else {
+					throw new Error( `No light found for path "${definition['path']}" in ViewerLight "${lightId}".` );
+				}
+				break;
+			case 'hemispheric':
+				if( !parameters['direction'] ) {
+					throw new Error( `The ViewerLight "${lightId}" of type "${definition.type}" needs a "direction".` );
+				}
+				// @ts-ignore
+				const hemisphericLightModule = await import(/* webpackChunkName: "hemispheric-light" */ '@babylonjs/core/Lights/hemisphericLight');
+				babylonLight = new hemisphericLightModule.HemisphericLight(
+					lightId,
+					parameters['direction'],
+					scene
+				);
+				break;
+			case 'point':
+				// @ts-ignore
+				const pointLightModule = await import(/* webpackChunkName: "point-light" */ '@babylonjs/core/Lights/pointLight');
+				babylonLight = new pointLightModule.PointLight(
+					lightId,
+					Vector3.Zero(),  // position is set via parent TransformNode
+					scene
+				);
+				break;
+			case 'directional':
+				if( !parameters['direction'] ) {
+					throw new Error( `The ViewerLight "${lightId}" of type "${definition.type}" needs a "direction".` );
+				}
+				// @ts-ignore
+				const directionalLightModule = await import(/* webpackChunkName: "directional-light" */ '@babylonjs/core/Lights/directionalLight');
+				babylonLight = new directionalLightModule.DirectionalLight(
+					lightId,
+					parameters['direction'],
+					scene
+				);
+				break;
+			case 'spot':
+				if( !parameters['direction'] ) {
+					throw new Error( `The ViewerLight "${lightId}" of type "${definition.type}" needs a "direction".` );
+				}
+				if( !parameters['angle'] ) {
+					throw new Error( `A ViewerLight of type "${definition.type}" needs an "angle".` );
+				}
+				if( !parameters['exponent'] ) {
+					throw new Error( `The ViewerLight "${lightId}" of type "${definition.type}" needs an "exponent".` );
+				}
+				// @ts-ignore
+				const spotLightModule = await import(/* webpackChunkName: "spot-light" */ '@babylonjs/core/Lights/spotLight');
+				babylonLight = new spotLightModule.SpotLight(
+					lightId,
+					Vector3.Zero(),  // position is set via parent TransformNode
+					parameters['direction'],
+					parameters['angle'],
+					parameters['exponent'],
+					scene
+				);
+				break;
+			default:
+				throw new Error( `The type "${definition.type}" for ViewerLight "${lightId}" is not implemented (yet).` );
+		}
+		if( !babylonLight ) {
+			throw new Error( `The Light for ViewerLight "${lightId}" of type "${definition.type}" could no be created ` +
+				`or found.` );
+		}
+		if( !babylonLight.parent ) {
+			// Create pseudo parent since lights do not implement mutations like "rotation" by itself.
+			babylonLight.parent = new TransformNode( '__light__', this.variant.viewer.scene, true );
+		}
+		injectNodeMetadata( babylonLight.parent, {
+			variant: this.variant,
+			variantParameterizable: this
+		} );
+		// disable/hide by default
+		disableNodeWithParents( babylonLight );
+		// process shadow generator
+		const shadowGeneratorDefinition = get( definition, 'shadowGenerator' ) as ShadowGeneratorDefinition;
+		if( !isEmpty( shadowGeneratorDefinition ) ) {
+			if( !(babylonLight instanceof ShadowLight) ) {
+				throw new Error( `Using a ShadowGenerator with light type "${definition.type}" is not supported for ` +
+					`"${lightId}". Use lights deriving from ShadowLight.` );
+			}
+			await this.processShadowGenerator( babylonLight, shadowGeneratorDefinition );
+		}
+		return babylonLight;
+	};
+
+	/**
+	 * @param babylonLight
+	 * @param definition
+	 * @protected
+	 */
+	protected async processShadowGenerator( babylonLight: ShadowLight,
+	                                        definition: ShadowGeneratorDefinition ): Promise<ShadowGenerator> {
+		const parameterDeclarations: ParameterDeclarations = {};
+		// define declarations here if needed in future
+		const parameterBag = definition as {} as ParameterBag;
+		const parameters = Parameter.parseFromDeclarations( parameterDeclarations, parameterBag );
+		const shadowGenerator = new ShadowGenerator( parameters['mapSize'], babylonLight );
+		for( const parameter in parameters ) {
+			if( parameter === 'mapSize' ) {
+				continue;
+			}
+			set( shadowGenerator, parameter, get( parameters, parameter ) );
+		}
+		return shadowGenerator;
+	};
+
+}