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

package/src/api/classes/element.ts

@@ -1,35 +1,40 @@
 import { HighlightLayer } from '@babylonjs/core/Layers/highlightLayer';
+import { Light } from '@babylonjs/core/Lights/light';
+import { ShadowGenerator } from '@babylonjs/core/Lights/Shadows/shadowGenerator';
 import { Material } from '@babylonjs/core/Materials/material';
 import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
 import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture';
-import { Axis, Space } from '@babylonjs/core/Maths/math.axis';
 import { Color3 } from '@babylonjs/core/Maths/math.color';
 import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
 import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh';
 import { Mesh } from '@babylonjs/core/Meshes/mesh';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
-import { cloneDeep, concat, get, isArray, isNumber, isPlainObject, merge, union } from 'lodash-es';
+import { has, isArray, isNumber, isPlainObject, merge, union } from 'lodash-es';
 import {
 	activateTransformNode as activate,
 	addToHighlightLayer,
+	addToShadowGenerator,
 	assertTransformNode,
 	cloneTransformNode,
 	cloneTransformNodeMaterial,
 	deactivateTransformNode as deactivate,
 	getClientRectFromMesh,
-	injectTransformNodeMetadata,
+	injectNodeMetadata,
 	mapToDottedNodes,
+	moveTransformNode,
 	removeFromHighlightLayer,
+	removeFromShadowGenerator,
+	rotateTransformNode,
 	setMaterial,
 	setMaterialColor,
 	setMaterialMetallness,
 	setMaterialRoughness,
-	setMaterialTexture
+	setMaterialTexture,
+	setReceiveShadows
 } from '../util/babylonHelper';
-import { createImageFromSvg, createImageFromImgSrc, mergeMaps } from '../util/resourceHelper';
+import { createImageFromImgSrc, createImageFromSvg } from '../util/resourceHelper';
+import { VariantParameterizable } from './../classes/variantParameterizable';
 import { DottedPath } from './dottedPath';
-import { ElementParameterizable } from './elementParameterizable';
-import { Event } from './event';
 import { Parameter } from './parameter';
 import { Variant } from './variant';
 
@@ -40,22 +45,20 @@ import { Variant } from './variant';
  * When used in typings, refer to via its alias {@link VariantElement} to prevent name clashes with the web APIs
  * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) class
  */
-export class Element extends ElementParameterizable {
+export class Element extends VariantParameterizable {
 
-	protected readonly _dottedNodes: Map<DottedPath, TransformNode> = new Map();
+	public readonly nodes: TransformNode[] = [];
 
-	protected readonly _parameterObservers: Map<string, ParameterObserver[]> = new Map();
+	protected readonly _dottedNodes: Map<DottedPath, TransformNode> = new Map();
 
 	protected _highlightLayer?: HighlightLayer;
 
-	public readonly nodes: TransformNode[] = [];
-
 	/**
 	 * Constructor.
 	 */
-	public constructor( public readonly variant: Variant,
+	protected constructor( public readonly variant: Variant,
 	                    public readonly name: string ) {
-		super();
+		super( variant, name );
 		if ( process.env.NODE_ENV?.toLowerCase().includes('dev')) {
 			this.assertPathDefinitions();
 		}
@@ -70,6 +73,13 @@ export class Element extends ElementParameterizable {
 		this.addParameterObservers();
 	}
 
+	/**
+	 * Creates an {@link Element} with given name.
+	 */
+	public static async create( variant: Variant, name: string ): Promise<Element> {
+		return new Element( variant, name );
+	}
+
 	/**
 	 * The {@link DottedPath} in the built tree of {@link Element}s.
 	 * E.g. "_.top-1.sub-2.sub-sub-3.el-1"
@@ -212,41 +222,11 @@ export class Element extends ElementParameterizable {
 	}
 
 	/**
-	 * Places the given {@link ParameterBag} in the {@link Element}'s parameters, replaces all patterns in the
-	 * {@link StructureJson} and broadcasts all {@link ParameterObserver}s.
-	 *
+	 * @see {@link VariantParameterizable.commitParameters}
 	 * @emit {@link Event.ELEMENT_PARAMETER_COMMITTED}
 	 */
-	public async commitParameters( parameters?: ParameterBag ): Promise<Element> {
-		if( !parameters ) {
-			parameters = {};
-		}
-		const oldParameters = cloneDeep( this.parameters );
-		merge( this.parameters, parameters );
-		// handle parameter observers
-		let observerPromises: Promise<void | ParameterObserver>[] = [];
-		for( const parameter in this.parameters ) {
-			const oldParameterValue = oldParameters[parameter];
-			const newParameterValue = this.parameters[parameter];
-			this.variant.assertParameter( this.variant.inheritedParameterDeclaration, parameter, newParameterValue );
-			if( oldParameterValue === newParameterValue ) {
-				continue;
-			}
-			// parameter changed
-			const parameterObservers = mergeMaps( this._parameterObservers, this.parameterObservers );
-			if( parameterObservers.has( parameter ) ) {
-				const observers = parameterObservers.get( parameter )!;
-				observerPromises = concat(observerPromises, observers.map( observer => {
-					const observerResult = observer( this, oldParameterValue, newParameterValue );
-					return Promise.resolve( observerResult ).then( () => {
-						this.broadcastEvent( Event.ELEMENT_PARAMETER_COMMITTED,
-							this, parameter, oldParameterValue, newParameterValue );
-					} );
-				} ) );
-			}
-		}
-		await Promise.all( observerPromises );
-		return this;
+	public async commitParameters( parameters?: ParameterBag ): Promise<VariantParameterizable> {
+		return super.commitParameters( parameters );
 	}
 
 	/**
@@ -287,18 +267,18 @@ export class Element extends ElementParameterizable {
 			throw new Error( `The path must be an instance of "AbstractMesh" for paintable "${paintable}" ` +
 				`in element "${this.id}".` );
 		}
-		if( node.material && !get( node.metadata, 'dirty.material' ) ) {
+		if( node.material && !has( node.metadata, 'dirty.material' ) ) {
 			cloneTransformNodeMaterial( node );
 		}
 		if( !node.material ) {
 			node.material = new StandardMaterial( `${this.id}.${paintable}.material`, this.variant.viewer.scene );
 		}
 		node.material.transparencyMode = Material.MATERIAL_ALPHATESTANDBLEND;
-		if( !get( node.metadata, 'dirty.material.texture' ) ) {
+		if( !has( node.metadata, 'dirty.material.texture' ) ) {
 			// inject initial value and mark as dirty
-			injectTransformNodeMetadata( node, { dirty: { material: { texture: true	} } } );
+			injectNodeMetadata( node, { dirty: { material: { texture: true	} } } );
 		}
-
+		
 		// consider width and height of the paintable
 		const widthAndHeight = {
 			width: imageSource.width,
@@ -328,7 +308,7 @@ export class Element extends ElementParameterizable {
 
 		// finally apply the texture on the desired node material
 		setMaterialTexture( node, texture, false );
-
+		
 		return this;
 	}
 
@@ -362,12 +342,12 @@ export class Element extends ElementParameterizable {
 				}
 				if( visible === true ) {
 					element.nodes.forEach( node => {
-						injectTransformNodeMetadata( node, { visibility: node.isEnabled() } );
+						injectNodeMetadata( node, { visibility: node.isEnabled() } );
 						activate( node );
 					} );
 				} else if( visible === false ) {
 					element.nodes.forEach( node => {
-						injectTransformNodeMetadata( node, { visibility: node.isEnabled() } );
+						injectNodeMetadata( node, { visibility: node.isEnabled() } );
 						deactivate( node );
 					} );
 				}
@@ -383,7 +363,7 @@ export class Element extends ElementParameterizable {
 			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				const material = element.variant.getMaterial( newValue.toString() );
 				element.nodes.forEach( node => {
-					assertTransformNode(node, (node: TransformNode) => {
+					assertTransformNode(node, (node: AbstractMesh) => {
 						if( node instanceof InstancedMesh ) {
 							throw new Error( `Changing parameter "${Parameter.MATERIAL}" ` +
 								`of an InstancedMesh is not supported. ` +
@@ -398,19 +378,19 @@ export class Element extends ElementParameterizable {
 			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				const color = Parameter.parseColor( newValue );
 				element.nodes.forEach( node => {
-					assertTransformNode(node, (node: TransformNode) => {
+					assertTransformNode(node, (node: AbstractMesh) => {
 						if( node instanceof InstancedMesh ) {
 							throw new Error( `Changing parameter "${Parameter.MATERIAL_COLOR}" ` +
 								`of an InstancedMesh is not supported. ` +
 								`Tried to change node "${node.id}" on element "${element.id}".` );
 						}
 					});
-					if( !get( node.metadata, 'dirty.material' ) ) {
+					if( !has( node.metadata, 'dirty.material' ) ) {
 						cloneTransformNodeMaterial( node );
 					}
-					if( !get( node.metadata, 'dirty.material.color' ) ) {
+					if( !has( node.metadata, 'dirty.material.color' ) ) {
 						// inject initial value and mark as dirty
-						injectTransformNodeMetadata( node, { dirty: { material: { color: oldValue } } } );
+						injectNodeMetadata( node, { dirty: { material: { color: oldValue } } } );
 					}
 					setMaterialColor( node, color );
 				} );
@@ -420,19 +400,19 @@ export class Element extends ElementParameterizable {
 			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				const metallness = Parameter.parseNumber( newValue );
 				element.nodes.forEach( node => {
-					assertTransformNode(node, (node: TransformNode) => {
+					assertTransformNode(node, (node: AbstractMesh) => {
 						if( node instanceof InstancedMesh ) {
 							throw new Error( `Changing parameter "${Parameter.MATERIAL_METALLNESS}" ` +
 								`of an InstancedMesh is not supported. ` +
 								`Tried to change node "${node.id}" on element "${element.id}".` );
 						}
 					});
-					if( !get( node.metadata, 'dirty.material' ) ) {
+					if( !has( node.metadata, 'dirty.material' ) ) {
 						cloneTransformNodeMaterial( node );
 					}
-					if( !get( node.metadata, 'dirty.material.metallness' ) ) {
+					if( !has( node.metadata, 'dirty.material.metallness' ) ) {
 						// inject initial value and mark as dirty
-						injectTransformNodeMetadata( node, { dirty: { material: { metallness: oldValue } } } );
+						injectNodeMetadata( node, { dirty: { material: { metallness: oldValue } } } );
 					}
 					setMaterialMetallness( node, metallness );
 				} );
@@ -442,19 +422,19 @@ export class Element extends ElementParameterizable {
 			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				const roughness = Parameter.parseNumber( newValue );
 				element.nodes.forEach( node => {
-					assertTransformNode(node, (node: TransformNode) => {
+					assertTransformNode(node, (node: AbstractMesh) => {
 						if( node instanceof InstancedMesh ) {
 							throw new Error( `Changing parameter "${Parameter.MATERIAL_ROUGHNESS}" ` +
 								`of an InstancedMesh is not supported. ` +
 								`Tried to change node "${node.id}" on element "${element.id}".` );
 						}
 					});
-					if( !get( node.metadata, 'dirty.material' ) ) {
+					if( !has( node.metadata, 'dirty.material' ) ) {
 						cloneTransformNodeMaterial( node );
 					}
-					if( !get( node.metadata, 'dirty.material.roughness' ) ) {
+					if( !has( node.metadata, 'dirty.material.roughness' ) ) {
 						// inject initial value and mark as dirty
-						injectTransformNodeMetadata( node, { dirty: { material: { roughness: oldValue } } } );
+						injectNodeMetadata( node, { dirty: { material: { roughness: oldValue } } } );
 					}
 					setMaterialRoughness( node, roughness );
 				} );
@@ -510,7 +490,7 @@ export class Element extends ElementParameterizable {
 				// Add/Remove meshes to previously created highlight layers.
 				if( highlighted === true ) {
 					element.nodes.forEach( node => {
-						assertTransformNode(node, (node: TransformNode) => {
+						assertTransformNode(node, (node: AbstractMesh) => {
 							if( node instanceof InstancedMesh ) {
 								throw new Error( `Changing parameter "${Parameter.HIGHLIGHTED}" ` +
 									`of an InstancedMesh is not supported. ` +
@@ -537,35 +517,61 @@ export class Element extends ElementParameterizable {
 		this._parameterObservers.set( Parameter.POSITION, [
 			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				// we have to deal just with root nodes here due to relative impacts in a node tree
-				element.nodes.forEach( node => {
-					// remember absolute position and reset it before translating
-					if( !get( node.metadata, 'position' ) ) {
-						node.metadata.position = node.absolutePosition.clone();
-					}
-					node.setAbsolutePosition( node.metadata.position );
-					// move
-					const distance = Parameter.parseVector( newValue );
-					node.translate( Axis.X, distance.x, Space.WORLD );
-					node.translate( Axis.Y, distance.y, Space.WORLD );
-					node.translate( Axis.Z, distance.z, Space.WORLD );
-				} );
+				element.nodes.forEach( node => moveTransformNode( node, Parameter.parseVector( newValue ) ) );
 			}
 		] );
 		this._parameterObservers.set( Parameter.ROTATION, [
 			async ( element: Element, 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 element.inheritedParameters ) {
+					await element.commitParameter( Parameter.POSITION, element.inheritedParameters[Parameter.POSITION] );
+				}
 				// we have to deal just with root nodes here due to relative impacts in a node tree
-				element.nodes.forEach( node => {
-					// remember absolute rotation and reset it before translating
-					if(!get( node.metadata, 'rotation' ) ) {
-						node.metadata.rotation = node.rotation.clone();
+				element.nodes.forEach( node => rotateTransformNode( node, Parameter.parseRotation( newValue ) ) );
+			}
+		] );
+		this._parameterObservers.set( Parameter.CAST_SHADOW, [
+			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
+				let castShadow;
+				try {
+					castShadow = Parameter.parseBoolean( newValue );
+				} catch( e ) {
+					return;
+				}
+				let lightCsl = element.inheritedParameters[Parameter.CAST_SHADOW_FROM_LIGHTS];
+				if( ! lightCsl ) {
+					lightCsl = element.variant.inheritedViewerLights.map( l => l.name ).join( ',' );
+				}
+				if( castShadow === true ) {
+					await this.castShadowValueHandler( lightCsl, addToShadowGenerator );
+				}
+				if( castShadow === false ) {
+					await this.castShadowValueHandler( lightCsl, removeFromShadowGenerator );
+				}
+			}
+		] );
+		this._parameterObservers.set( Parameter.CAST_SHADOW_FROM_LIGHTS, [
+			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
+				// TODO: Possible performance issue in combination with CAST_SHADOW, since both observers are initially called
+				//       when CAST_SHADOW and CAST_SHADOW_FROM_LIGHTS are defined in the spec.
+				const lightCsl = element.variant.inheritedViewerLights.map( l => l.name ).join( ',' );
+				// cleanup all shadow generators
+				await this.castShadowValueHandler( lightCsl, removeFromShadowGenerator );
+				if( element.castShadow === true ) {
+					// if newValue is undefined or '' then set newValue to lightCsl (use all lights)
+					if( !newValue ) {
+						newValue = lightCsl;
 					}
-					node.rotation = node.metadata.rotation;
-					// rotate
-					const rotation = Parameter.parseRotation( newValue );
-					node.rotate( Axis.X, rotation.x, Space.WORLD );
-					node.rotate( Axis.Y, rotation.y, Space.WORLD );
-					node.rotate( Axis.Z, rotation.z, Space.WORLD );
-				} );
+					await this.castShadowValueHandler( newValue, addToShadowGenerator );
+				}
+			}
+		] );
+		this._parameterObservers.set( Parameter.RECEIVE_SHADOWS, [
+			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
+				element.nodes.forEach( node => setReceiveShadows( node, Parameter.parseBoolean( newValue ) ) );
 			}
 		] );
 		return this;
@@ -614,4 +620,25 @@ export class Element extends ElementParameterizable {
 		} );
 	}
 
+	/**
+	 * Handles callback for given light parameter.
+	 */
+	private async castShadowValueHandler( lightCsl: ParameterValue, mutator: CallableFunction ) {
+		let lights: Light[] = [];
+		for( const lightName of Parameter.parseCommaSeparatedList( lightCsl ) ) {
+			const viewerLight = await this.variant.getViewerLight( lightName );
+			if( viewerLight ) {
+				lights.push( viewerLight.light );
+			}
+		}
+		const shadowGenerators = lights
+			.map( light => light?.getShadowGenerator() as ShadowGenerator )
+			.filter( Boolean );
+		shadowGenerators.forEach( generator => {
+			this.nodes.forEach( node => {
+				mutator( generator, node );
+			} );
+		} );
+	}
+
 }

package/src/api/classes/event.ts

@@ -262,13 +262,28 @@ export class Event {
 	 * * {@link Element}
 	 *
 	 * Payload:
-	 * * variant: {@link Element}
+	 * * element: {@link Element}
 	 * * parameter: string
 	 * * oldValue: string
 	 * * newValue: string
 	 */
 	public static readonly ELEMENT_PARAMETER_COMMITTED = 'elementParameterCommitted';
 
+	/**
+	 * Fired after a parameter on an {@link ViewerLight} has been committed.
+	 *
+	 * Scopes:
+	 * * Global
+	 * * {@link ViewerLight}
+	 *
+	 * Payload:
+	 * * light: {@link ViewerLight}
+	 * * parameter: string
+	 * * oldValue: string
+	 * * newValue: string
+	 */
+	public static readonly VIEWER_LIGHT_PARAMETER_COMMITTED = 'viewerLightParameterCommitted';
+
 	/**
 	 * Fired after a parameter on an {@link SceneManager} has been committed.
 	 *

package/src/api/classes/parameter.ts

@@ -1,6 +1,6 @@
 import { Color3 } from '@babylonjs/core/Maths/math.color';
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
-import { isNumber, isString } from 'lodash-es';
+import { get, isEmpty, isNumber, isString } from 'lodash-es';
 
 
 /**
@@ -16,19 +16,20 @@ export class Parameter {
 	private constructor() {}
 
 	/**
-	 * Mutates the visibility. Helper methods are {@link ElementParameterizable.show} and
-	 * {@link ElementParameterizable.hide}. Getter and setter is {@link ElementParameterizable.visible}.
+	 * Mutates the visibility. Helper methods are {@link VariantParameterizable.show} and
+	 * {@link VariantParameterizable.hide}. Getter and setter is {@link VariantParameterizable.visible}.
 	 *
 	 * Scopes:
 	 * * {@link Element}
 	 * * {@link Variant}
+	 * * {@link ViewerLight} Available for all light types
 	 *
 	 * @parser {@link parseBoolean}
 	 */
 	public static readonly VISIBLE = 'visible';
 
 	/**
-	 * Stretches or compresses some meshes. Getter and setter is {@link ElementParameterizable.scaling}.
+	 * Stretches or compresses some meshes. Getter and setter is {@link VariantParameterizable.scaling}.
 	 *
 	 * Scopes:
 	 * * {@link Element}
@@ -39,7 +40,7 @@ export class Parameter {
 	public static readonly SCALING = 'scaling';
 
 	/**
-	 * Mutates the material. Getter and setter is {@link ElementParameterizable.material}. The value of this parameter
+	 * Mutates the material. Getter and setter is {@link VariantParameterizable.material}. The value of this parameter
 	 * represents the ID of a baked-in glTF or custom created material in the {@link Variant} tree.
 	 *
 	 * Scopes:
@@ -106,7 +107,7 @@ export class Parameter {
 	public static readonly HIGHLIGHT_COLOR = 'highlight.color';
 
 	/**
-	 * Mutates the highlighted state. Getter and setter is {@link ElementParameterizable.highlighted}.
+	 * Mutates the highlighted state. Getter and setter is {@link VariantParameterizable.highlighted}.
 	 *
 	 * Scopes:
 	 * * {@link Element}
@@ -117,18 +118,19 @@ export class Parameter {
 	public static readonly HIGHLIGHTED = 'highlighted';
 
 	/**
-	 * Mutates the position relative to its origin position. Getter and setter is {@link ElementParameterizable.position}.
+	 * Mutates the position relative to its origin position. Getter and setter is {@link VariantParameterizable.position}.
 	 *
 	 * Scopes:
 	 * * {@link Element}
 	 * * {@link Variant}
+	 * * {@link ViewerLight} Available for [PointLight](https://doc.babylonjs.com/typedoc/classes/babylon.pointlight#position), [SpotLight](https://doc.babylonjs.com/typedoc/classes/babylon.spotlight#position), [DirectionalLight](https://doc.babylonjs.com/typedoc/classes/babylon.directionallight#position)
 	 *
 	 * @parser {@link parseVector}
 	 */
 	public static readonly POSITION = 'position';
 
 	/**
-	 * Mutates the rotation relative to its origin rotation. Getter and setter is {@link ElementParameterizable.rotation}.
+	 * Mutates the rotation relative to its origin rotation. Getter and setter is {@link VariantParameterizable.rotation}.
 	 *
 	 * Scopes:
 	 * * {@link Element}
@@ -138,24 +140,126 @@ export class Parameter {
 	 */
 	public static readonly ROTATION = 'rotation';
 
+	/**
+	 * Mutates whether a shadow should be casted or not.
+	 *
+	 * Scopes:
+	 * * {@link Element}
+	 * * {@link Variant}
+	 *
+	 * @parser {@link parseBoolean}
+	 */
+	public static readonly CAST_SHADOW = 'castShadow';
+
+	/**
+	 * Mutates from which lights a shadow should be casted.
+	 *
+	 * Scopes:
+	 * * {@link Element}
+	 * * {@link Variant}
+	 *
+	 * @parser {@link parseCommaSeparatedList}
+	 */
+	public static readonly CAST_SHADOW_FROM_LIGHTS = 'castShadow.fromLights';
+
+	/**
+	 * Mutates whether to receive shadows or not.
+	 *
+	 * Scopes:
+	 * * {@link Element}
+	 * * {@link Variant}
+	 *
+	 * @parser {@link parseBoolean}
+	 */
+	public static readonly RECEIVE_SHADOWS = 'receiveShadows';
+
+	/**
+	 * Mutates the intensity of Lights.
+	 *
+	 * Scopes:
+	 * * {@link ViewerLight} Available for [PointLight](https://doc.babylonjs.com/typedoc/classes/babylon.pointlight#intensity), [SpotLight](https://doc.babylonjs.com/typedoc/classes/babylon.spotlight#intensity), [DirectionalLight](https://doc.babylonjs.com/typedoc/classes/babylon.directionallight#intensity), [HemisphericLight](https://doc.babylonjs.com/typedoc/classes/babylon.hemisphericlight#intensity)
+	 *
+	 * @parser {@link parseNumber}
+	 */
+	public static readonly INTENSITY = 'intensity';
+
+	/**
+	 * Mutates the direction of Lights.
+	 *
+	 * Scopes:
+	 * * {@link ViewerLight} Available for [PointLight](https://doc.babylonjs.com/typedoc/classes/babylon.pointlight#direction), [SpotLight](https://doc.babylonjs.com/typedoc/classes/babylon.spotlight#direction), [DirectionalLight](https://doc.babylonjs.com/typedoc/classes/babylon.directionallight#direction), [HemisphericLight](https://doc.babylonjs.com/typedoc/classes/babylon.hemisphericlight#direction)
+	 *
+	 * @parser {@link parseNumber}
+	 */
+	public static readonly DIRECTION = 'direction';
+
+	/**
+	 * Mutates the angle of Lights.
+	 *
+	 * Scopes:
+	 * * {@link ViewerLight} Available for [SpotLight](https://doc.babylonjs.com/typedoc/classes/babylon.spotlight#angle)
+	 *
+	 * @parser {@link parseNumber}
+	 */
+	public static readonly ANGLE = 'angle';
+
+	/**
+	 * Mutates the exponent of Lights.
+	 *
+	 * Scopes:
+	 * * {@link ViewerLight} Available for [SpotLight](https://doc.babylonjs.com/typedoc/classes/babylon.spotlight#exponent)
+	 *
+	 * @parser {@link parseNumber}
+	 */
+	public static readonly EXPONENT = 'exponent';
+
+	/**
+	 * Mutates the diffuse color of Lights.
+	 *
+	 * Scopes:
+	 * * {@link ViewerLight} Available for [PointLight](https://doc.babylonjs.com/typedoc/classes/babylon.pointlight#diffuse), [SpotLight](https://doc.babylonjs.com/typedoc/classes/babylon.spotlight#diffuse), [DirectionalLight](https://doc.babylonjs.com/typedoc/classes/babylon.directionallight#diffuse), [HemisphericLight](https://doc.babylonjs.com/typedoc/classes/babylon.hemisphericlight#diffuse)
+	 *
+	 * @parser {@link parseNumber}
+	 */
+	public static readonly DIFFUSE = 'diffuse';
+
+	/**
+	 * Mutates the specular color of Lights.
+	 *
+	 * Scopes:
+	 * * {@link ViewerLight} Available for [PointLight](https://doc.babylonjs.com/typedoc/classes/babylon.pointlight#specular), [SpotLight](https://doc.babylonjs.com/typedoc/classes/babylon.spotlight#specular), [DirectionalLight](https://doc.babylonjs.com/typedoc/classes/babylon.directionallight#specular), [HemisphericLight](https://doc.babylonjs.com/typedoc/classes/babylon.hemisphericlight#specular)
+	 *
+	 * @parser {@link parseNumber}
+	 */
+	public static readonly SPECULAR = 'specular';
+
 	/**
 	 * The {@link ParameterDeclarations} for all parameters in this class.
 	 */
 	public static get declarations(): ParameterDeclarations {
-		const declaration: ParameterDeclarations = {};
-		declaration[Parameter.VISIBLE] = { type: 'boolean' };
-		declaration[Parameter.SCALING] = { type: 'number' };
-		declaration[Parameter.HIGHLIGHTED] = { type: 'boolean' };
-		declaration[Parameter.MATERIAL] = { type: 'string' };
-		declaration[Parameter.MATERIAL_COLOR] = { type: 'color' };
-		declaration[Parameter.MATERIAL_METALLNESS] = { type: 'number' };
-		declaration[Parameter.MATERIAL_ROUGHNESS] = { type: 'number' };
-		declaration[Parameter.HIGHLIGHT_ENABLED] = { type: 'boolean' };
-		declaration[Parameter.HIGHLIGHT_COLOR] = { type: 'color' };
-		declaration[Parameter.HIGHLIGHTED] = { type: 'boolean' };
-		declaration[Parameter.POSITION] = { type: 'vector' };
-		declaration[Parameter.ROTATION] = { type: 'vector' };
-		return declaration;
+		const declarations: ParameterDeclarations = {};
+		declarations[Parameter.VISIBLE] = { type: 'boolean', parser: Parameter.parseBoolean };
+		declarations[Parameter.SCALING] = { type: 'number', parser: Parameter.parseNumber };
+		declarations[Parameter.HIGHLIGHTED] = { type: 'boolean', parser: Parameter.parseBoolean };
+		declarations[Parameter.MATERIAL] = { type: 'string' };
+		declarations[Parameter.MATERIAL_COLOR] = { type: 'color', parser: Parameter.parseColor };
+		declarations[Parameter.MATERIAL_METALLNESS] = { type: 'number', parser: Parameter.parseNumber };
+		declarations[Parameter.MATERIAL_ROUGHNESS] = { type: 'number', parser: Parameter.parseNumber };
+		declarations[Parameter.HIGHLIGHT_ENABLED] = { type: 'boolean', parser: Parameter.parseBoolean };
+		declarations[Parameter.HIGHLIGHT_COLOR] = { type: 'color', parser: Parameter.parseColor };
+		declarations[Parameter.HIGHLIGHTED] = { type: 'boolean', parser: Parameter.parseBoolean };
+		declarations[Parameter.POSITION] = { type: 'vector', parser: Parameter.parseVector };
+		declarations[Parameter.ROTATION] = { type: 'vector', parser: Parameter.parseVector };
+		declarations[Parameter.CAST_SHADOW] = { type: 'boolean', parser: Parameter.parseBoolean };
+		declarations[Parameter.CAST_SHADOW_FROM_LIGHTS] = { type: 'csl', parser: Parameter.parseCommaSeparatedList };
+		declarations[Parameter.RECEIVE_SHADOWS] = { type: 'boolean', parser: Parameter.parseBoolean };
+		declarations[Parameter.INTENSITY] = { type: 'number', parser: Parameter.parseNumber };
+		declarations[Parameter.DIRECTION] = { type: 'vector', parser: Parameter.parseVector };
+		declarations[Parameter.ANGLE] = { type: 'number', parser: Parameter.parseNumber };
+		declarations[Parameter.EXPONENT] = { type: 'number', parser: Parameter.parseNumber };
+		declarations[Parameter.DIFFUSE] = { type: 'color', parser: Parameter.parseColor };
+		declarations[Parameter.SPECULAR] = { type: 'color', parser: Parameter.parseColor };
+		return declarations;
 	}
 
 	/**
@@ -179,6 +283,24 @@ export class Parameter {
 		return all;
 	}
 
+	/**
+	 * Parses given {@link ParameterBag} with given {@link ParameterDeclarations}.
+	 */
+	public static parseFromDeclarations( declarations: ParameterDeclarations, parameterBag: ParameterBag ): ParsedParameterBag {
+		const parameters: ParsedParameterBag = {};
+		for( const parameter in parameterBag ) {
+			const value = get( parameterBag, parameter );
+			parameters[parameter] = value;
+			const declaration: ParameterDeclaration = declarations[parameter];
+			if( declaration ) {
+				if( !isEmpty( value ) && declaration.parser ) {
+					parameters[parameter] = declaration.parser( value );
+				}
+			}
+		}
+		return parameters;
+	}
+
 	/**
 	 * Parses a string of format `'(x,y,z)'` to a `Vector3`.
 	 */
@@ -274,4 +396,13 @@ export class Parameter {
 		return parseFloat( value.toString() );
 	}
 
+	/**
+	 * Parses a string with comma separated values to a list of strings.
+	 */
+	public static parseCommaSeparatedList( value: ParameterValue ): string[] {
+		return value.toString()
+			.split( ',' )
+			.map( s => s.trim() );
+	}
+
 }