@combeenation/3d-viewer 4.0.0-beta4 → 4.0.1-alpha1

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;
+	};
+
+}

package/src/api/internal/debugViewer.ts

@@ -1,82 +1,82 @@
-/**
- * @internal
- */
-import { Scene } from '@babylonjs/core/scene';
-import { VariantInstance } from '../classes/variantInstance';
-import { Viewer } from '../classes/viewer';
-import { Event } from '../classes/event';
-
-export class DebugViewer extends Viewer {
-
-	constructor( canvas: HTMLCanvasElement, data: string | StructureJson ) {
-		super( canvas, data );
-	}
-
-	public async bootstrap(): Promise<Viewer> {
-		for( const event of Event.all ) {
-			this.eventEmitter.addListener( event, ( ...args ) => console.debug( `Emitting ${event}`, ...args ) );
-		}
-		for( const event of [
-			Event.VARIANT_INSTANCE_DESTROYED,
-			Event.VARIANT_INSTANCE_CREATED,
-			Event.VARIANT_INSTANCE_CLONED,
-			Event.VARIANT_PARAMETER_COMMITTED
-		] ) {
-			this.eventEmitter.addListener( event, this.instanceDebugger.bind( this ) );
-		}
-		return super.bootstrap();
-	}
-
-	protected async initScene(): Promise<Scene> {
-		const scene = await super.initScene();
-
-		scene.getEngine().runRenderLoop( () => {
-			this.fpsDebugger();
-		} );
-
-		return scene;
-	}
-
-	protected instanceDebugger( instance: VariantInstance ) {
-		const instances: string[] = [];
-		this.variantInstances.all.forEach( variantInstance => {
-			instances.push( `${variantInstance.name}${variantInstance.variant.visible ? '' : ' [hidden]'}${variantInstance.variant.highlighted ? ' [highlighted]' : ''}` );
-		} );
-		let debugContainer = document.getElementById( 'cyledge-combeenation-3d-viewer-instance-debugger' );
-		if( !debugContainer ) {
-			debugContainer = document.createElement( 'pre' );
-			debugContainer.setAttribute( 'id', 'cyledge-combeenation-3d-viewer-instance-debugger' );
-			debugContainer.setAttribute( 'style', `
-				background: #454545;
-				color: #fff;
-				position: absolute;
-				bottom: 0;
-				right: 0;
-				padding: 10px;
-				margin: 0;
-			` );
-			document.body.appendChild( debugContainer );
-		}
-		debugContainer.innerHTML = JSON.stringify( instances, null, 2 );
-	};
-
-	protected fpsDebugger() {
-		let debugContainer = document.getElementById( 'cyledge-combeenation-3d-viewer-fps-debugger' );
-		if( !debugContainer ) {
-			debugContainer = document.createElement( 'pre' );
-			debugContainer.setAttribute( 'id', 'cyledge-combeenation-3d-viewer-fps-debugger' );
-			debugContainer.setAttribute( 'style', `
-				background: #454545;
-				color: #fff;
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				padding: 10px;
-				margin: 0;
-			` );
-			document.body.appendChild( debugContainer );
-		}
-		debugContainer.innerHTML = `${this.engine.getFps().toFixed( 2 )} fps`;
-	}
-
+/**
+ * @internal
+ */
+import { Scene } from '@babylonjs/core/scene';
+import { VariantInstance } from '../classes/variantInstance';
+import { Viewer } from '../classes/viewer';
+import { Event } from '../classes/event';
+
+export class DebugViewer extends Viewer {
+
+	constructor( canvas: HTMLCanvasElement, data: string | StructureJson ) {
+		super( canvas, data );
+	}
+
+	public async bootstrap(): Promise<Viewer> {
+		for( const event of Event.all ) {
+			this.eventEmitter.addListener( event, ( ...args ) => console.debug( `Emitting ${event}`, ...args ) );
+		}
+		for( const event of [
+			Event.VARIANT_INSTANCE_DESTROYED,
+			Event.VARIANT_INSTANCE_CREATED,
+			Event.VARIANT_INSTANCE_CLONED,
+			Event.VARIANT_PARAMETER_COMMITTED
+		] ) {
+			this.eventEmitter.addListener( event, this.instanceDebugger.bind( this ) );
+		}
+		return super.bootstrap();
+	}
+
+	protected async initScene(): Promise<Scene> {
+		const scene = await super.initScene();
+
+		scene.getEngine().runRenderLoop( () => {
+			this.fpsDebugger();
+		} );
+
+		return scene;
+	}
+
+	protected instanceDebugger( instance: VariantInstance ) {
+		const instances: string[] = [];
+		this.variantInstances.all.forEach( variantInstance => {
+			instances.push( `${variantInstance.name}${variantInstance.variant.visible ? '' : ' [hidden]'}${variantInstance.variant.highlighted ? ' [highlighted]' : ''}` );
+		} );
+		let debugContainer = document.getElementById( 'cyledge-combeenation-3d-viewer-instance-debugger' );
+		if( !debugContainer ) {
+			debugContainer = document.createElement( 'pre' );
+			debugContainer.setAttribute( 'id', 'cyledge-combeenation-3d-viewer-instance-debugger' );
+			debugContainer.setAttribute( 'style', `
+				background: #454545;
+				color: #fff;
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				padding: 10px;
+				margin: 0;
+			` );
+			document.body.appendChild( debugContainer );
+		}
+		debugContainer.innerHTML = JSON.stringify( instances, null, 2 );
+	};
+
+	protected fpsDebugger() {
+		let debugContainer = document.getElementById( 'cyledge-combeenation-3d-viewer-fps-debugger' );
+		if( !debugContainer ) {
+			debugContainer = document.createElement( 'pre' );
+			debugContainer.setAttribute( 'id', 'cyledge-combeenation-3d-viewer-fps-debugger' );
+			debugContainer.setAttribute( 'style', `
+				background: #454545;
+				color: #fff;
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				padding: 10px;
+				margin: 0;
+			` );
+			document.body.appendChild( debugContainer );
+		}
+		debugContainer.innerHTML = `${this.engine.getFps().toFixed( 2 )} fps`;
+	}
+
 }

package/src/api/internal/lensRendering.ts

@@ -1,11 +1,11 @@
-/**
- * Group the required LensRendering dependencies into a single file to allow a single "import"
- *
- * @internal
- */
-
-import '@babylonjs/core/Rendering/depthRendererSceneComponent';
-import { LensRenderingPipeline } from  '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/lensRenderingPipeline';
-
-
+/**
+ * Group the required LensRendering dependencies into a single file to allow a single "import"
+ *
+ * @internal
+ */
+
+import '@babylonjs/core/Rendering/depthRendererSceneComponent';
+import { LensRenderingPipeline } from  '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/lensRenderingPipeline';
+
+
 export { LensRenderingPipeline };