@combeenation/3d-viewer 4.0.0-alpha9 → 4.0.0-beta4

package/src/api/internal/debugViewer.ts

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

package/src/api/internal/lensRendering.ts

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

package/src/api/internal/sceneSetup.ts

@@ -1,194 +1,204 @@
-import { Camera } from '@babylonjs/core/Cameras/camera';
-import { Engine } from '@babylonjs/core/Engines/engine';
-import '@babylonjs/core/Helpers/sceneHelpers';
-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 { get, isEmpty, set } from 'lodash-es';
-import { Parameter } from '../classes/parameter';
-
-/**
- * @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).` );
-		}
-	} );
-};
-
-/**
- * @param scene
- */
-const defaultCamera = async function( scene: Scene ): Promise<Camera> {
-	return await processCamera( scene, 'default_camera', {
-		type: 'arc',
-		active: true,
-	} );
-};
-
-/**
- * @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 );
-	}
-	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.metadata = {
-				alpha: Math.PI / 4,
-				beta: Math.PI / 4,
-				radius: 2
-			};
-			break;
-	}
-	if( cameraSetup.active ) {
-		camera.attachControl( scene.getEngine().getRenderingCanvas()!, true );
-	}
-	if( cameraSetup.fov ) {
-		camera.fov = cameraSetup.fov;
-	}
-	camera.storeState();
-	return camera;
-};
-
-/**
- * @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);
-	// 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] ) );
-		}
-	} else {
-		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 ) {
-			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 ) {
-			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.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']!.exposure ) {
-			scene.imageProcessingConfiguration.exposure = sceneJson.scene.globals['camera-settings']!.exposure;
-		}
-		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 );
-		}
-	}
-	// TODO: make this dynamic
-	/*
-	const texture = new HDRCubeTexture("/assets/small_cave_1k.hdr", scene, 256);
-	texture.gammaSpace = false;
-	scene.environmentTexture = texture;
-	// scene.environmentTexture.
-
-	const skyboxMaterial = new StandardMaterial("skyBox", scene);
-	skyboxMaterial.backFaceCulling = false;
-	skyboxMaterial.reflectionTexture = texture;
-	skyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
-	skyboxMaterial.disableLighting = false;
-	// TODO: replace with BoxBuilder
-	const skybox = MeshBuilder.CreateBox("skyBox", {size: 1000.0}, scene);
-	skybox.isPickable = false; //never pick a skybox
-	skybox.infiniteDistance = true;
-	skybox.material = skyboxMaterial;
-	*/
-
-	// TODO: shadows don't work with HemishpericLight
-	return scene;
-};
-
-export {
-	sceneSetup
-};
+
+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 { Vector3 } from '@babylonjs/core/Maths/math.vector';
+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 { 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;
+};
+
+
+const defaultCamera = async function(scene: Scene) {
+
+	const cameraSetup: CameraDefinition = {
+		type: 'arc',
+		active: true,
+	};
+
+	const defaultCamera = await processCamera(scene, 'default_camera', cameraSetup);
+
+	return defaultCamera;
+};
+
+const processCamera = async function(scene: Scene, name: string, cameraSetup: CameraDefinition) {
+
+	let camera: Camera;
+
+	let target = Vector3.Zero();
+	if(cameraSetup.target) {
+		target = Parameter.parseVector(cameraSetup.target);
+	}
+
+	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.metadata = {
+				alpha: Math.PI / 4,
+				beta: Math.PI / 4,
+				radius: 2
+			};
+			break;
+
+	}
+
+	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) {
+	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]));
+		}
+	}
+
+
+	//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]);
+		}
+	}
+
+
+	// 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 ) {
+			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 ) {
+			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.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'].exposure ) {
+			scene.imageProcessingConfiguration.exposure = sceneJson.scene.globals['camera-settings'].exposure;
+		}
+
+		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 );
+		}
+	}
+
+	// TODO: make this dynamic
+	/*
+	const texture = new HDRCubeTexture("/assets/small_cave_1k.hdr", scene, 256);
+	texture.gammaSpace = false;
+	scene.environmentTexture = texture;
+	// scene.environmentTexture.
+
+	const skyboxMaterial = new StandardMaterial("skyBox", scene);
+	skyboxMaterial.backFaceCulling = false;
+	skyboxMaterial.reflectionTexture = texture;
+	skyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
+	skyboxMaterial.disableLighting = false;
+	// TODO: replace with BoxBuilder
+	const skybox = MeshBuilder.CreateBox("skyBox", {size: 1000.0}, scene);
+	skybox.isPickable = false; //never pick a skybox
+	skybox.infiniteDistance = true;
+	skybox.material = skyboxMaterial;
+	*/
+
+	// TODO: shadows don't work with HemishpericLight
+
+	return scene;
+};
+
+export {
+	sceneSetup
+}