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

package/src/api/internal/sceneSetup.ts

@@ -1,180 +1,171 @@
-
+import { Camera } from '@babylonjs/core/Cameras/camera';
 import { Engine } from '@babylonjs/core/Engines/engine';
-import '@babylonjs/core/Materials/Textures/Loaders/ddsTextureLoader';
 import '@babylonjs/core/Helpers/sceneHelpers';
-import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
-import { HDRCubeTexture } from '@babylonjs/core/Materials/Textures/hdrCubeTexture';
-import { Texture } from '@babylonjs/core/Materials/Textures/texture';
-import { Color3, Color4 } from '@babylonjs/core/Maths/math.color';
+import '@babylonjs/core/Materials/Textures/Loaders/ddsTextureLoader';
+import { Color4 } from '@babylonjs/core/Maths/math.color';
 import { Vector3 } from '@babylonjs/core/Maths/math.vector';
+import { GroundMesh } from '@babylonjs/core/Meshes/groundMesh';
 import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
 import { DefaultRenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline';
 import { Scene } from '@babylonjs/core/scene';
-import type { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';
-import { Camera } from '@babylonjs/core/Cameras/camera';
-import { Light } from '@babylonjs/core/Lights/light';
+import { get, isEmpty, set } from 'lodash-es';
 import { Parameter } from '../classes/parameter';
 
-
-const defaultLightning = async function(scene: Scene) {
-	const defaultSetup: LightDefinition = {
-		type: 'hemispheric',
-	};
-
-	const defaultLight = await processLight(scene, 'default_light', defaultSetup) as HemisphericLight;
-	defaultLight.groundColor = Color3.Black();
-	defaultLight.diffuse = Color3.White();
-
-	return defaultLight;
-};
-
-
-const processLight = async function(scene: Scene, name: string, lightSetup: LightDefinition) {
-
-	let light: Light;
-
-	switch(lightSetup.type ) {
-		case 'hemispheric':
-			// @ts-ignore
-			const hemisphericLightModule = await import(/* webpackChunkName: "hemispheric-light" */ '@babylonjs/core/Lights/hemisphericLight');
-			light = new hemisphericLightModule.HemisphericLight( name, Vector3.Up(), scene);
-			break;
-		case 'point':
-			// @ts-ignore
-			const pointLightModule = await import(/* webpackChunkName: "point-light" */ '@babylonjs/core/Lights/pointLight');
-			light = new pointLightModule.PointLight( name, Vector3.Up(), scene);
-			break;
-	}
-
-	return light;
+/**
+ * @param scene
+ * @param name
+ * @param definition
+ */
+const processGround = async function( scene: Scene, name: string, definition: GroundDefinition ): Promise<Mesh | GroundMesh> {
+	return new Promise( resolve => {
+		const _resolve = ( ground: Mesh ) => {
+			if( definition.receiveShadows !== undefined ) {
+				ground.receiveShadows = definition.receiveShadows;
+			}
+			resolve( ground );
+		};
+		switch( definition.type ) {
+			case 'baked':
+				if( !definition.meshId ) {
+					throw new Error( `A baked ground must define a "meshId".` );
+				}
+				_resolve( scene.getMeshByID( definition.meshId ) as Mesh );
+				break;
+			case 'ground':
+				_resolve( MeshBuilder.CreateGround(
+					name,
+					definition,
+					scene
+				) );
+				break;
+			case 'heightmap':
+				if( !definition.url ) {
+					throw new Error( `A heightmap ground must define an "url".` );
+				}
+				definition.onReady = ( _ground: GroundMesh ) => {
+					_resolve( _ground );
+				};
+				MeshBuilder.CreateGroundFromHeightMap(
+					name,
+					definition.url,
+					definition,
+					scene,
+				);
+				break;
+			default:
+				throw new Error( `Ground of type "${definition.type}" not implemented (yet).` );
+		}
+	} );
 };
 
-
-const defaultCamera = async function(scene: Scene) {
-
-	const cameraSetup: CameraDefinition = {
+/**
+ * @param scene
+ */
+const defaultCamera = async function( scene: Scene ): Promise<Camera> {
+	return await processCamera( scene, 'default_camera', {
 		type: 'arc',
 		active: true,
-	};
-
-	const defaultCamera = await processCamera(scene, 'default_camera', cameraSetup);
-
-	return defaultCamera;
+	} );
 };
 
-const processCamera = async function(scene: Scene, name: string, cameraSetup: CameraDefinition) {
-
+/**
+ * @param scene
+ * @param name
+ * @param cameraSetup
+ */
+const processCamera = async function( scene: Scene, name: string, cameraSetup: CameraDefinition ): Promise<Camera> {
 	let camera: Camera;
-
 	let target = Vector3.Zero();
-	if(cameraSetup.target) {
-		target = Parameter.parseVector(cameraSetup.target);
+	if( cameraSetup.target ) {
+		target = Parameter.parseVector( cameraSetup.target );
 	}
-
-	switch(cameraSetup.type ) {
+	switch( cameraSetup.type ) {
 		case 'arc':
 			// @ts-ignore
 			const arcCameraModule = await import(/* webpackChunkName: "arc-rotate-camera" */ '@babylonjs/core/Cameras/arcRotateCamera');
-			camera = new arcCameraModule.ArcRotateCamera(name, Math.PI / 4, Math.PI / 4, 2, target, scene );
+			camera = new arcCameraModule.ArcRotateCamera( name, Math.PI / 4, Math.PI / 4, 2, target, scene );
 			camera.metadata = {
 				alpha: Math.PI / 4,
 				beta: Math.PI / 4,
 				radius: 2
 			};
 			break;
-
 	}
-
-	if(cameraSetup.active) {
+	if( cameraSetup.active ) {
 		camera.attachControl( scene.getEngine().getRenderingCanvas()!, true );
 	}
-
 	if( cameraSetup.fov ) {
 		camera.fov = cameraSetup.fov;
 	}
-
 	camera.storeState();
 	return camera;
 };
 
-const sceneSetup = async function(engine: Engine, sceneJson: SceneJson) {
+/**
+ * @param engine
+ * @param sceneJson
+ */
+const sceneSetup = async function(engine: Engine, sceneJson: SceneJson): Promise<Scene> {
 	const scene = new Scene( engine );
 	scene.clearColor = new Color4(0, 0, 0, 0);
-
-	let cameras: Camera[] = [];
-	//there is either no "cameras" or "cameras" is empty
-	if( ! sceneJson.scene.hasOwnProperty('cameras') || (sceneJson.scene.cameras && ! Object.keys(sceneJson.scene.cameras).length ) ) {
-		const camera = await defaultCamera(scene);
-
-		cameras.push(camera);
-	} else {
-		for(let camera in sceneJson.scene.cameras) {
-			cameras.push(await processCamera(scene, camera, sceneJson.scene.cameras[camera]));
+	// cameras
+	const cameras: Camera[] = [];
+	const cameraDefinitions = get( sceneJson.scene, 'cameras' ) as CameraDefinitions;
+	if( !isEmpty( cameraDefinitions ) ) {
+		for( let cameraName in cameraDefinitions ) {
+			cameras.push( await processCamera( scene, cameraName, cameraDefinitions[cameraName] ) );
 		}
-	}
-
-
-	//there is either no "lights" or "lights" is empty
-	if( ! sceneJson.scene.hasOwnProperty('lights') || (sceneJson.scene.lights && ! Object.keys(sceneJson.scene.lights).length ) ) {
-		// await defaultLightning(scene);
 	} else {
-		for(let light in sceneJson.scene.lights) {
-			await processLight(scene, light, sceneJson.scene.lights[light]);
+		const camera = await defaultCamera( scene );
+		cameras.push( camera );
+	}
+	// grounds
+	const groundDefinitions = get( sceneJson.scene, 'grounds' ) as GroundDefinitions;
+	if( !isEmpty( groundDefinitions ) ) {
+		for( const groundName in groundDefinitions ) {
+			await processGround( scene, groundName, groundDefinitions[groundName] );
 		}
 	}
-
-
 	// TODO: try to split this away from the default rendering pipeline to save module imports
 	// The "hdr" setting had negative effect on rendering in Safari. Everything looked a little "edgy". I'm not completely
 	// sure if disabling it comes with other negative side effects I don't see right now, so we should probably
 	// investigate this a little more in detail at some point.
 	const defaultPipeline = new DefaultRenderingPipeline( 'default-rendering-pipeline', false, scene );
-	
 	/* DISABLED: causes problems with Internet Explorer
 	defaultPipeline.imageProcessingEnabled = true;
 	*/
-
 	if( sceneJson.scene.globals.aa ) {
 		defaultPipeline.fxaaEnabled = true; //implicitly does FxaaPostProcess()
 	}
-	
 	// Set samples regardless of fxaa setting since we don't want to use fxaa but still increase the sample count
 	defaultPipeline.samples = 8;
-
 	if( sceneJson.scene.globals['camera-settings'] ) {
-		if( sceneJson.scene.globals['camera-settings'].sharpen && sceneJson.scene.globals['camera-settings'].sharpen.enabled ) {
+		if( sceneJson.scene.globals['camera-settings']!.sharpen && sceneJson.scene.globals['camera-settings']!.sharpen.enabled ) {
 			defaultPipeline.sharpenEnabled = true; //implicitly does SharpenPostProcess()
 			//defaultPipeline.sharpen.colorAmount = 1;
 			//defaultPipeline.sharpen.edgeAmount = 0;
 		}
-
-		if( sceneJson.scene.globals['camera-settings'].bloom && sceneJson.scene.globals['camera-settings'].bloom.enabled ) {
+		if( sceneJson.scene.globals['camera-settings']!.bloom && sceneJson.scene.globals['camera-settings']!.bloom.enabled ) {
 			defaultPipeline.bloomEnabled = true;
-
-			if( sceneJson.scene.globals['camera-settings'].bloom.size ) {
-				defaultPipeline.bloomScale = sceneJson.scene.globals['camera-settings'].bloom.size;
+			if( sceneJson.scene.globals['camera-settings']!.bloom.size ) {
+				defaultPipeline.bloomScale = sceneJson.scene.globals['camera-settings']!.bloom.size;
 			}
-
-			if( sceneJson.scene.globals['camera-settings'].bloom.threshold ) {
-				defaultPipeline.bloomThreshold = sceneJson.scene.globals['camera-settings'].bloom.threshold;
+			if( sceneJson.scene.globals['camera-settings']!.bloom.threshold ) {
+				defaultPipeline.bloomThreshold = sceneJson.scene.globals['camera-settings']!.bloom.threshold;
 			}
 		}
-
-		if( sceneJson.scene.globals['camera-settings'].contrast ) {
-			scene.imageProcessingConfiguration.contrast = sceneJson.scene.globals['camera-settings'].contrast;
+		if( sceneJson.scene.globals['camera-settings']!.contrast ) {
+			scene.imageProcessingConfiguration.contrast = sceneJson.scene.globals['camera-settings']!.contrast;
 		}
-
-		if( sceneJson.scene.globals['camera-settings'].exposure ) {
-			scene.imageProcessingConfiguration.exposure = sceneJson.scene.globals['camera-settings'].exposure;
+		if( sceneJson.scene.globals['camera-settings']!.exposure ) {
+			scene.imageProcessingConfiguration.exposure = sceneJson.scene.globals['camera-settings']!.exposure;
 		}
-
-		if( sceneJson.scene.globals['camera-settings'].dof && sceneJson.scene.globals['camera-settings'].dof.enabled ) {
+		if( sceneJson.scene.globals['camera-settings']!.dof && sceneJson.scene.globals['camera-settings']!.dof.enabled ) {
 			//@ts-ignore
 			const module = await import(/* webpackChunkName: "lens-rendering" */ './lensRendering');
-			new module.LensRenderingPipeline( 'lens-rendering', sceneJson.scene.globals['camera-settings'].dof!.settings, scene, 1.0, cameras );
+			new module.LensRenderingPipeline( 'lens-rendering', sceneJson.scene.globals['camera-settings']!.dof.settings, scene, 1.0, cameras );
 		}
 	}
-
 	// TODO: make this dynamic
 	/*
 	const texture = new HDRCubeTexture("/assets/small_cave_1k.hdr", scene, 256);
@@ -195,10 +186,9 @@ const sceneSetup = async function(engine: Engine, sceneJson: SceneJson) {
 	*/
 
 	// TODO: shadows don't work with HemishpericLight
-
 	return scene;
 };
 
 export {
 	sceneSetup
-}
+};

package/src/api/util/babylonHelper.ts

@@ -1,18 +1,34 @@
 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 { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
 import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
+import { Axis } from '@babylonjs/core/Maths/math.axis';
 import { Color3 } from '@babylonjs/core/Maths/math.color';
-import { Vector3 } from '@babylonjs/core/Maths/math.vector';
+import { Quaternion, Vector3 } from '@babylonjs/core/Maths/math.vector';
 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 { Node } from '@babylonjs/core/node';
 import { Scene } from '@babylonjs/core/scene';
-import { cloneDeep, merge } from 'lodash-es';
+import { Nullable } from '@babylonjs/core/types';
+import { cloneDeep, get, has, merge } from 'lodash-es';
 import { DottedPath } from '../classes/dottedPath';
 
+/**
+ * @param node
+ * @return Node
+ */
+const getRootNode = function( node: Node ): Node {
+	let _node = node;
+	while( _node.parent ) {
+		_node = _node.parent;
+	}
+	return _node;
+}
+
 /**
  * @param nodes
  * @param predicate
@@ -39,18 +55,17 @@ const mapToDottedNodes = function <T>( nodes: Node[],
  * @param node
  * @return DottedPath
  */
-const getDottedPathForTransformNode = function( node: TransformNode ): DottedPath {
+const getDottedPathForNode = function( node: Node ): DottedPath {
 	const dottedPath = DottedPath.create( node.name );
 	let _parent = node;
 	while( _parent.parent ) {
-		_parent = _parent.parent as TransformNode;
+		_parent = _parent.parent;
 		dottedPath.unshiftPart( _parent.name );
 	}
 	return dottedPath;
 };
 
 /**
- *
  * @param node
  * @param predicate
  * @param deep
@@ -78,6 +93,21 @@ const cloneTransformNode = function( node: TransformNode,
 	return clone;
 };
 
+/**
+ * @param node
+ */
+const cloneNodeWithParents = function( node: Node | null ): Node | null {
+	let clone = null;
+	if( node instanceof TransformNode ) {
+		clone = node.clone( node.name, cloneNodeWithParents( node.parent ) as Nullable<Node>, true );
+	} else if( node instanceof Light ) {
+		clone = node.clone( node.name, cloneNodeWithParents( node.parent ) as Nullable<Node> );
+	} else if( node ) {
+		throw new Error( `Cloning of "${node?.constructor.name}" is not implemented (yet).` );
+	}
+	return clone;
+};
+
 /**
  * @param node
  * @param deep
@@ -106,11 +136,11 @@ const cloneTransformNodeMaterial = function( node: TransformNode,
  * @param deep
  * @param metadata
  */
-const injectTransformNodeMetadata = function( node: TransformNode, metadata: {}, deep: boolean = true ) {
+const injectNodeMetadata = function( node: Node, metadata: {}, deep: boolean = true ) {
 	node.metadata = merge( {}, node.metadata, metadata );
-	if( deep ) {
+	if( deep && node instanceof TransformNode ) {
 		const children = node.getChildTransformNodes( true );
-		children.forEach( child => injectTransformNodeMetadata( child, metadata, deep ) );
+		children.forEach( child => injectNodeMetadata( child, metadata, deep ) );
 	}
 };
 
@@ -165,6 +195,80 @@ const deactivateTransformNode = function( node: TransformNode, deep: boolean = t
 	}
 };
 
+/**
+ * @param node
+ */
+const enableNodeWithParents = function( node: Node ) {
+	node.setEnabled( true );
+	if ( node.parent ) {
+		enableNodeWithParents( node.parent );
+	}
+};
+
+/**
+ * @param node
+ */
+const disableNodeWithParents = function( node: Node ) {
+	node.setEnabled( false );
+	if ( node.parent ) {
+		disableNodeWithParents( node.parent );
+	}
+};
+
+/**
+ * Attention: this function mutates the position of a node. Keep in mind that there are dependencies to other
+ * functions moving nodes around.
+ * @param node
+ * @param rotation
+ */
+const rotateTransformNode = function( node: TransformNode, rotation: Vector3 ): TransformNode {
+	// remember absolute rotation and reset it before translating
+	if( !has( node.metadata, 'rotation.initial' ) ) {
+		let rotationQuaternion = node.rotationQuaternion;
+		if( !rotationQuaternion ) {
+			rotationQuaternion = Quaternion.RotationYawPitchRoll( node.rotation.x, node.rotation.y, node.rotation.z );
+		}
+		injectNodeMetadata( node, { 'rotation.initial': rotationQuaternion.asArray() }, false );
+	}
+	if( !has( node.metadata, 'rotation.position' ) || get( node.metadata, 'position.dirty' ) ) {
+		let rotationPosition = node.absolutePosition.clone();
+		if( has( node.metadata, 'rotation.offset' ) ) {
+			rotationPosition = rotationPosition.subtract( get( node.metadata, 'rotation.offset' ) as Vector3 );
+		}
+		injectNodeMetadata( node, { 'rotation.position': rotationPosition }, false );
+		injectNodeMetadata( node, { 'position.dirty': false }, false );
+	}
+	node.setAbsolutePosition( get( node.metadata, 'rotation.position' ) );
+	node.rotationQuaternion = Quaternion.FromArray( get( node.metadata, 'rotation.initial' ) as [] );
+	node.rotateAround( Vector3.Zero(), Axis.X, rotation.x );
+	node.rotateAround( Vector3.Zero(), Axis.Y, rotation.y );
+	node.rotateAround( Vector3.Zero(), Axis.Z, rotation.z );
+	node.computeWorldMatrix( true );
+	const rotationOffset = node.absolutePosition.subtract( get( node.metadata, 'rotation.position' ) as Vector3 );
+	injectNodeMetadata( node, { 'rotation.offset': rotationOffset }, false );
+	return node;
+};
+
+/**
+ * Attention: this function mutates the position of a node. Keep in mind that there are dependencies to other
+ * functions moving nodes around.
+ * @param node
+ * @param distance
+ */
+const moveTransformNode = function( node: TransformNode, distance: Vector3 ): TransformNode {
+	// remember absolute position and reset it before translating
+	if( !has( node.metadata, 'position.initial' ) ) {
+		injectNodeMetadata( node, { 'position.initial': node.absolutePosition.clone() }, false );
+	}
+	let position = get( node.metadata, 'position.initial' ) as Vector3;
+	if( has( node.metadata, 'rotation.offset' ) ) {
+		position = position.add( get( node.metadata, 'rotation.offset' ) as Vector3 );
+	}
+	node.setAbsolutePosition( position.add( distance ) );
+	injectNodeMetadata( node, { 'position.dirty': true }, false );
+	return node;
+};
+
 /**
  * @param node
  * @param material
@@ -335,6 +439,56 @@ const removeFromHighlightLayer = function( layer: HighlightLayer, node: Transfor
 	}
 };
 
+/**
+ * @param node
+ * @param receiveShadows
+ * @param deep
+ */
+const setReceiveShadows = function( node: TransformNode, receiveShadows: boolean, deep: boolean = true ) {
+	if( node instanceof AbstractMesh ) {
+		node.receiveShadows = receiveShadows;
+	}
+	if( deep ) {
+		node.getChildTransformNodes( true ).forEach(
+			child => setReceiveShadows( child, receiveShadows, deep )
+		);
+	}
+};
+
+/**
+ * @param node
+ * @param generator
+ * @param deep
+ */
+const addToShadowGenerator = function( generator: ShadowGenerator, node: TransformNode, deep: boolean = true ) {
+	if( node instanceof AbstractMesh ) {
+		// We have to remove the node because there's no duplicate check in babylon
+		generator.removeShadowCaster( node, false );
+		generator.addShadowCaster( node, false );
+	}
+	if( deep ) {
+		node.getChildTransformNodes( true ).forEach(
+			child => addToShadowGenerator( generator, child, deep )
+		);
+	}
+};
+
+/**
+ * @param node
+ * @param generator
+ * @param deep
+ */
+const removeFromShadowGenerator = function( generator: ShadowGenerator, node: TransformNode, deep: boolean = true ) {
+	if( node instanceof AbstractMesh ) {
+		generator.removeShadowCaster( node, false );
+	}
+	if( deep ) {
+		node.getChildTransformNodes( true ).forEach(
+			child => removeFromShadowGenerator( generator, child, deep )
+		);
+	}
+};
+
 /**
  * https://forum.babylonjs.com/t/get-mesh-bounding-box-position-and-size-in-2d-screen-coordinates/1058/3
  * @param mesh
@@ -372,14 +526,20 @@ const getClientRectFromMesh = function( mesh: AbstractMesh, scene: Scene, canvas
 };
 
 export {
+	getRootNode,
 	mapToDottedNodes,
-	getDottedPathForTransformNode,
+	getDottedPathForNode,
 	cloneTransformNode,
+	cloneNodeWithParents,
 	cloneTransformNodeMaterial,
-	injectTransformNodeMetadata,
+	injectNodeMetadata,
 	assertTransformNode,
 	activateTransformNode,
 	deactivateTransformNode,
+	enableNodeWithParents,
+	disableNodeWithParents,
+	rotateTransformNode,
+	moveTransformNode,
 	setMaterial,
 	setSourceNodeMaterial,
 	setMaterialColor,
@@ -388,5 +548,8 @@ export {
 	setMaterialRoughness,
 	addToHighlightLayer,
 	removeFromHighlightLayer,
+	setReceiveShadows,
+	addToShadowGenerator,
+	removeFromShadowGenerator,
 	getClientRectFromMesh
 };