@combeenation/3d-viewer 4.0.0-alpha7 → 4.0.0-beta2

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 { get, isEmpty, isNumber, isString } from 'lodash-es';
+import { isNumber, isString } from 'lodash-es';
 
 
 /**
@@ -16,20 +16,19 @@ export class Parameter {
 	private constructor() {}
 
 	/**
-	 * Mutates the visibility. Helper methods are {@link VariantParameterizable.show} and
-	 * {@link VariantParameterizable.hide}. Getter and setter is {@link VariantParameterizable.visible}.
+	 * Mutates the visibility. Helper methods are {@link ElementParameterizable.show} and
+	 * {@link ElementParameterizable.hide}. Getter and setter is {@link ElementParameterizable.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 VariantParameterizable.scaling}.
+	 * Stretches or compresses some meshes. Getter and setter is {@link ElementParameterizable.scaling}.
 	 *
 	 * Scopes:
 	 * * {@link Element}
@@ -40,7 +39,7 @@ export class Parameter {
 	public static readonly SCALING = 'scaling';
 
 	/**
-	 * Mutates the material. Getter and setter is {@link VariantParameterizable.material}. The value of this parameter
+	 * Mutates the material. Getter and setter is {@link ElementParameterizable.material}. The value of this parameter
 	 * represents the ID of a baked-in glTF or custom created material in the {@link Variant} tree.
 	 *
 	 * Scopes:
@@ -107,7 +106,7 @@ export class Parameter {
 	public static readonly HIGHLIGHT_COLOR = 'highlight.color';
 
 	/**
-	 * Mutates the highlighted state. Getter and setter is {@link VariantParameterizable.highlighted}.
+	 * Mutates the highlighted state. Getter and setter is {@link ElementParameterizable.highlighted}.
 	 *
 	 * Scopes:
 	 * * {@link Element}
@@ -118,19 +117,18 @@ export class Parameter {
 	public static readonly HIGHLIGHTED = 'highlighted';
 
 	/**
-	 * Mutates the position relative to its origin position. Getter and setter is {@link VariantParameterizable.position}.
+	 * Mutates the position relative to its origin position. Getter and setter is {@link ElementParameterizable.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 VariantParameterizable.rotation}.
+	 * Mutates the rotation relative to its origin rotation. Getter and setter is {@link ElementParameterizable.rotation}.
 	 *
 	 * Scopes:
 	 * * {@link Element}
@@ -140,126 +138,24 @@ 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 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;
+		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;
 	}
 
 	/**
@@ -283,24 +179,6 @@ 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`.
 	 */
@@ -396,13 +274,4 @@ 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() );
-	}
-
 }

package/src/api/classes/parameterObservable.ts

@@ -1,5 +1,6 @@
 import { merge } from 'lodash-es';
-import { uuidv4 } from '../util/stringHelper';
+import { Parameter } from '../classes/parameter';
+import { uuidv4 } from '../util/resourceHelper';
 import { EventBroadcaster } from './eventBroadcaster';
 
 export abstract class ParameterObservable extends EventBroadcaster {
@@ -74,16 +75,37 @@ export abstract class ParameterObservable extends EventBroadcaster {
 			return;
 		}
 		const declaration = parameterDeclaration[parameter];
-		const genericError = `"${value}" is not a valid value for parameter "${parameter}" of type. ` +
+		const genericError = `"${value}" is not a valid value for parameter "${parameter}" of type ` +
 			`"${declaration.type}" for ${this.constructor.name} "${this.id}".`;
-		if( declaration.parser ) {
-			try {
-				declaration.parser( value );
-			} catch( e ) {
-				throw Error( genericError + e.message );
-			}
-		}
 		switch( declaration.type ) {
+			case 'boolean':
+				try {
+					Parameter.parseBoolean( value );
+				} catch( e ) {
+					throw Error( genericError );
+				}
+				break;
+			case 'number':
+				try {
+					Parameter.parseNumber( value );
+				} catch( e ) {
+					throw Error( genericError );
+				}
+				break;
+			case 'color':
+				try {
+					Parameter.parseColor( value );
+				} catch( e ) {
+					throw Error( genericError +	` It must be hex with leading "#" or of format "(r,g,b)".` );
+				}
+				break;
+			case 'vector':
+				try {
+					Parameter.parseVector( value );
+				} catch( e ) {
+					throw Error( genericError + ` It must be of format "(x,y,z)".` );
+				}
+				break;
 			case 'select':
 				if( !declaration.options ) {
 					throw Error( `No options defined for parameter declaration "${parameter}"` +

package/src/api/classes/variant.ts

@@ -1,5 +1,4 @@
 import { AssetContainer } from '@babylonjs/core/assetContainer';
-import { Light } from '@babylonjs/core/Lights/light';
 import '@babylonjs/core/Loading/Plugins/babylonFileLoader';
 import { SceneLoader } from '@babylonjs/core/Loading/sceneLoader';
 import { Material } from '@babylonjs/core/Materials/material';
@@ -8,30 +7,40 @@ import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression';
 import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_transform';
 import '@babylonjs/loaders/glTF/2.0/glTFLoader';
-import { cloneDeep, concat, get, isEmpty, isEqual, isString, merge, set } from 'lodash-es';
-import { deactivateTransformNode, getDottedPathForNode, injectNodeMetadata } from '../util/babylonHelper';
+import { cloneDeep, concat, isEmpty, isEqual, isString, merge } from 'lodash-es';
+import {
+	deactivateTransformNode,
+	getDottedPathForTransformNode,
+	injectTransformNodeMetadata
+} from '../util/babylonHelper';
 import { loadJson, mergeMaps } from '../util/resourceHelper';
 import { DottedPath } from './dottedPath';
 import { Element } from './element';
+import { ElementParameterizable } from './elementParameterizable';
 import { Event } from './event';
 import { Parameter } from './parameter';
-import { Parameterizable } from './parameterizable';
-import { ParameterObservable } from './parameterObservable';
-import { VariantParameterizable } from './variantParameterizable';
 import { Viewer } from './viewer';
-import { ViewerLight } from './viewerLight';
+
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_basisu';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_clearcoat';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_sheen';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_ior';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_pbrSpecularGlossiness';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_specular';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_translucency';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_transmission';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_unlit';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_variants';
 
 /**
  * A concrete "Variant". Most of these are handled by either the {@link Viewer} or {@link VariantInstance}.
  */
-export class Variant extends Parameterizable {
+export class Variant extends ElementParameterizable {
 
 	public assetContainer: AssetContainer;
 
 	public readonly elements: Element[] = [];
 
-	public readonly viewerLights: ViewerLight[] = [];
-
 	public structureJson: StructureJson;
 
 	protected _dottedNodes: Map<DottedPath, TransformNode> | undefined;
@@ -166,13 +175,6 @@ export class Variant extends Parameterizable {
 		return rootNodes;
 	}
 
-	/**
-	 * The {@link ViewerLight}s of the {@link Variant}.
-	 */
-	get lights(): Light[] {
-		return this.assetContainer.lights;
-	}
-
 	/**
 	 * All TransformNodes of the {@link Variant} mapped flat with a {@link DottedPath}.
 	 */
@@ -206,17 +208,6 @@ export class Variant extends Parameterizable {
 		return concat( elements, this.elements );
 	}
 
-	/**
-	 * All {@link ViewerLight}s inherited from this {@link Variant}'s parents.
-	 */
-	get inheritedViewerLights(): ViewerLight[] {
-		let viewerLights: ViewerLight[] = [];
-		this.ancestors.forEach( ancestor => {
-			viewerLights = concat( viewerLights, ancestor.viewerLights );
-		} );
-		return concat( viewerLights, this.viewerLights );
-	}
-
 	/**
 	 * All TransformNodes inherited from this {@link Variant}'s parents.
 	 */
@@ -239,17 +230,6 @@ export class Variant extends Parameterizable {
 		return dottedNodes;
 	}
 
-	/**
-	 * All Lights inherited from this {@link Variant}'s parents.
-	 */
-	get inheritedLights(): Light[] {
-		let lights: Light[] = [];
-		this.ancestors.forEach( ancestor => {
-			lights = concat( lights, ancestor.lights );
-		} );
-		return concat( lights, this.lights );
-	}
-
 	/**
 	 * The {@link ParameterDeclarations} inherited from this {@link Variant}'s parents.
 	 */
@@ -357,33 +337,6 @@ export class Variant extends Parameterizable {
 		return element;
 	}
 
-	/**
-	 * Gets the desired {@link ViewerLight} of the current {@link Variant} relative to its {@link DottedPath}.
-	 * Uses the mechanism of {@link getDescendant} to resolve the appropriate variant in tree.
-	 */
-	public async getViewerLight( dottedPath: DottedPathArgument ): Promise<ViewerLight> {
-		const _dottedPath = DottedPath.create( dottedPath );
-		const viewerLightName = _dottedPath.popPart();
-		let variant: Variant = this;
-		if( _dottedPath.parts.length > 0 ) {
-			variant = await this.getDescendant( _dottedPath );
-		}
-		if( variant.inheritedViewerLights.length === 0 ) {
-			throw new Error( `No viewerLights for variant "${variant.id}" found. ` +
-				`Either none are defined or they are not initialized (are you operating on the appropriate living?).` );
-		}
-		let viewerLight;
-		variant.inheritedViewerLights.forEach( _viewerLight => {
-			if( _viewerLight.name === viewerLightName ) {
-				viewerLight = _viewerLight;
-			}
-		} );
-		if( !viewerLight ) {
-			throw new Error( `ViewerLight with name "${viewerLightName}" does not exist for variant "${variant.id}".` );
-		}
-		return viewerLight;
-	}
-
 	/**
 	 * A proxy for directly getting a Node from an {@link Element} by its {@link DottedPath}s.
 	 */
@@ -430,8 +383,7 @@ export class Variant extends Parameterizable {
 		parent?._children.set( variant.name, variant );
 		variant.assetContainer = this.assetContainer;
 		variant.parameterObservers = cloneDeep( this.parameterObservers );
-		await variant.createElements();
-		await variant.createViewerLights();
+		variant.createElements();
 		variant.addParameterObservers();
 		await variant.bootstrapParameters( parameters );
 		this.broadcastEvent( Event.VARIANT_CREATED, variant );
@@ -537,10 +489,31 @@ export class Variant extends Parameterizable {
 		this.broadcastEvent(Event.VARIANT_PARAMETER_BAG_COMMITTED, this, oldParameters, newParameters);
 
 		// commit parameters to elements
-		await this.commitParametersToElements( newParameters );
-
-		// commit parameters to lights
-		await this.commitParametersToViewerLights( newParameters );
+		const elementPromises: Promise<Element>[] = this.elements.map( element => {
+			let _elementDefinition = JSON.stringify( this._structureJson.elements![element.name] );
+			const elementParameters: ParameterBag = {};
+			for( const parameter in newParameters ) {
+				if( DottedPath.create( parameter ).firstPart !== element.name ) {
+					continue;
+				}
+				// we got an element parameter
+				let newParameterValue = newParameters[parameter];
+				const elementParameter = parameter.replace( `${element.name}.`, '' );
+				// If the variant is explicitly hidden, we must not override the visibility with element parameters. We need
+				// an exception for visibility to avoid overloading already applied element parameters with element parameters
+				// defined in the variant spec ("dotted parameters").
+				// @see https://github.com/Combeenation/3d-viewer/issues/44
+				if( elementParameter === Parameter.VISIBLE && newParameters[Parameter.VISIBLE] === false ) {
+					newParameterValue = false;
+				}
+				elementParameters[elementParameter] = newParameterValue;
+				const search = new RegExp( `\\$\\{${elementParameter}\\}`, 'g' );
+				_elementDefinition = _elementDefinition.replace( search, newParameterValue.toString() );
+			}
+			this.structureJson.elements![this.name] = JSON.parse( _elementDefinition );
+			return element.commitParameters( elementParameters );
+		} );
+		await Promise.all( elementPromises );
 
 		// propagate parameters to parent
 		if( this.parent ) {
@@ -589,17 +562,7 @@ export class Variant extends Parameterizable {
 				const nodes = this.assetContainer.getNodes().filter( n => n instanceof TransformNode ) as TransformNode[];
 				nodes.forEach( node => {
 					deactivateTransformNode( node, false );
-					injectNodeMetadata( node, { dottedPath: getDottedPathForNode( node ) }, false );
-				} );
-				this.assetContainer.lights.forEach( light => {
-					light.setEnabled( false );
-					injectNodeMetadata( light, { dottedPath: getDottedPathForNode( light ) }, false );
-					this.viewer.scene.addLight( light );
-				} );
-				this.assetContainer.cameras.forEach( camera => {
-					camera.setEnabled( false );
-					injectNodeMetadata( camera, { dottedPath: getDottedPathForNode( camera ) }, false );
-					this.viewer.scene.addCamera( camera );
+					injectTransformNodeMetadata( node, { dottedPath: getDottedPathForTransformNode( node ) }, false );
 				} );
 				this.broadcastEvent( Event.ASSET_LOADING_END, this );
 				resolve( this );
@@ -610,82 +573,15 @@ export class Variant extends Parameterizable {
 		} );
 	}
 
-	/**
-	 * Commits given parameters to all {@link Element}s.
-	 */
-	protected async commitParametersToElements( parameters: ParameterBag ) {
-		await Promise.all( this.elements.map(
-			element => this.commitParametersToVariantParameterizable(parameters, element, 'elements')
-		) );
-	}
-
-	/**
-	 * Commits given parameters to all {@link ViewerLight}s.
-	 */
-	protected async commitParametersToViewerLights( parameters: ParameterBag ) {
-		await Promise.all( this.viewerLights.map(
-			viewerLight => this.commitParametersToVariantParameterizable(parameters, viewerLight, 'lights')
-		) );
-	}
-
-	/**
-	 * Commits given parameters to a {@link VariantParameterizable} and updates the according definition with given
-	 * key in the {@link StructureJson}. The `definitionKey` "elements" for example will update the definition in
-	 * `this.structureJson.elements`.
-	 */
-	protected async commitParametersToVariantParameterizable( parameters: ParameterBag,
-	                                                          parameterizable: VariantParameterizable,
-	                                                          definitionKey: string ): Promise<ParameterObservable> {
-		const initialDefinition = get( this._structureJson, definitionKey )[parameterizable.name];
-		let initialDefinitionStr = JSON.stringify( initialDefinition );
-		const _parameters: ParameterBag = {};
-		for( const parameter in parameters ) {
-			const dpp = DottedPath.create( parameter );
-			if( dpp.shiftPart() !== parameterizable.name ) {
-				continue;
-			}
-			// we got a parameterizable ("element") parameter
-			let parameterValue = parameters[parameter];
-			const parameterizableParameter = dpp.path;
-			// If the variant is explicitly hidden, we must not override the visibility with element parameters. We need
-			// an exception for visibility to avoid overloading already applied element parameters with element parameters
-			// defined in the variant spec ("dotted parameters").
-			// @see https://github.com/Combeenation/3d-viewer/issues/44
-			if( parameterizableParameter === Parameter.VISIBLE && parameters[Parameter.VISIBLE] === false ) {
-				parameterValue = false;
-			}
-			_parameters[parameterizableParameter] = parameterValue;
-			const search = new RegExp( `\\$\\{${parameterizableParameter}\\}`, 'g' );
-			initialDefinitionStr = initialDefinitionStr.replace( search, parameterValue.toString() );
-		}
-		const definition = get( this.structureJson, definitionKey );
-		definition[this.name] = JSON.parse( initialDefinitionStr );
-		set( this.structureJson, definitionKey, definition );
-		return await parameterizable.commitParameters( _parameters );
-	}
-
 	/**
 	 * Commits given {@link Parameter} to the {@link Variant}'s {@link Element}s.
 	 */
-	protected async commitParameterToElements( parameter: string, value: ParameterValue ): Promise<Variant> {
+	protected async commitParameterToElements( parameter: string, value: ParameterValue ) {
 		const promises = [];
 		for( const element of this.elements ) {
 			promises.push( element.commitParameter( parameter, value ) );
 		}
 		await Promise.all( promises );
-		return this;
-	}
-
-	/**
-	 * Commits given {@link Parameter} to the {@link Variant}'s {@link Element}s.
-	 */
-	protected async commitParameterToViewerLights( parameter: string, value: ParameterValue ): Promise<Variant> {
-		const promises = [];
-		for( const viewerLight of this.viewerLights ) {
-			promises.push( viewerLight.commitParameter( parameter, value ) );
-		}
-		await Promise.all( promises );
-		return this;
 	}
 
 	/**
@@ -695,13 +591,11 @@ export class Variant extends Parameterizable {
 		this._parameterObservers.set( Parameter.VISIBLE, [
 			async ( variant: Variant, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				await variant.commitParameterToElements( Parameter.VISIBLE, newValue );
-				await variant.commitParameterToViewerLights( Parameter.VISIBLE, newValue );
 			}
 		] );
 		this._parameterObservers.set( Parameter.SCALING, [
 			async ( variant: Variant, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				await variant.commitParameterToElements( Parameter.SCALING, newValue );
-				await variant.commitParameterToViewerLights( Parameter.SCALING, newValue );
 			}
 		] );
 		this._parameterObservers.set( Parameter.MATERIAL, [
@@ -737,28 +631,11 @@ export class Variant extends Parameterizable {
 		this._parameterObservers.set( Parameter.POSITION, [
 			async ( variant: Variant, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				await variant.commitParameterToElements( Parameter.POSITION, newValue );
-				await variant.commitParameterToViewerLights( Parameter.POSITION, newValue );
 			}
 		] );
 		this._parameterObservers.set( Parameter.ROTATION, [
 			async ( variant: Variant, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				await variant.commitParameterToElements( Parameter.ROTATION, newValue );
-				await variant.commitParameterToViewerLights( Parameter.ROTATION, newValue );
-			}
-		] );
-		this._parameterObservers.set( Parameter.CAST_SHADOW, [
-			async ( variant: Variant, oldValue: ParameterValue, newValue: ParameterValue ) => {
-				await variant.commitParameterToElements( Parameter.CAST_SHADOW, newValue );
-			}
-		] );
-		this._parameterObservers.set( Parameter.CAST_SHADOW_FROM_LIGHTS, [
-			async ( variant: Variant, oldValue: ParameterValue, newValue: ParameterValue ) => {
-				await variant.commitParameterToElements( Parameter.CAST_SHADOW_FROM_LIGHTS, newValue );
-			}
-		] );
-		this._parameterObservers.set( Parameter.RECEIVE_SHADOWS, [
-			async ( variant: Variant, oldValue: ParameterValue, newValue: ParameterValue ) => {
-				await variant.commitParameterToElements( Parameter.RECEIVE_SHADOWS, newValue );
 			}
 		] );
 		return this;
@@ -767,30 +644,20 @@ export class Variant extends Parameterizable {
 	/**
 	 * Creates {@link Element}s and clones nodes into them.
 	 */
-	protected async createElements(): Promise<Variant> {
-		for( const name in this.structureJson.elements || {} ) {
-			this.elements.push( await Element.create( this, name ) );
+	protected createElements(): Variant {
+		for( const elementName in this.structureJson.elements || {} ) {
+			this.elements.push( new Element( this, elementName ) );
 		}
 		// inject node meta to all inherited elements
 		// we do this to inject the deepest and most concrete variant information to all cloned nodes in the tree
 		this.inheritedElements.forEach( element => {
 			element.nodes.forEach( node => {
-				injectNodeMetadata( node, { variant: this, element: element } );
+				injectTransformNodeMetadata( node, { variant: this, element: element } );
 			} );
 		} );
 		return this;
 	}
 
-	/**
-	 * Creates {@link ViewerLight}s.
-	 */
-	protected async createViewerLights(): Promise<Variant> {
-		for( const name in this.structureJson.lights || {} ) {
-			this.viewerLights.push( await ViewerLight.create( this, name ) );
-		}
-		return this;
-	}
-
 	/**
 	 * Bootstrapping for parameters. It sets the `parametersInitialized` to true for all ancestors.
 	 */