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

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.
 	 */

package/src/api/classes/variantInstance.ts

@@ -1,6 +1,6 @@
 import { Mesh } from '@babylonjs/core/Meshes/mesh';
+import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
 import { Element } from './element';
-import { ViewerLight } from './viewerLight';
 import { EventBroadcaster } from './eventBroadcaster';
 import { ParameterObservable } from './parameterObservable';
 import { Variant } from './variant';
@@ -51,13 +51,6 @@ export class VariantInstance extends EventBroadcaster {
 		return this.variant.getElement( dottedPath );
 	}
 
-	/**
-	 * A proxy for {@link Variant.getViewerLight}.
-	 */
-	public async getViewerLight( dottedPath: DottedPathArgument ): Promise<ViewerLight> {
-		return this.variant.getViewerLight( dottedPath );
-	}
-
 	/**
 	 * A proxy for {@link Variant.getNode}.
 	 */

package/src/api/classes/viewer.ts

@@ -5,6 +5,7 @@ import { Engine } from '@babylonjs/core/Engines/engine';
 import { HighlightLayer } from '@babylonjs/core/Layers/highlightLayer';
 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';