@combeenation/3d-viewer 4.2.0 → 5.0.0-alpha1

package/src/api/internal/debugViewer.ts

@@ -7,46 +7,51 @@ import { Viewer } from '../classes/viewer';
 import { Event } from '../classes/event';
 
 export class DebugViewer extends Viewer {
+  constructor(canvas: HTMLCanvasElement, data: string | StructureJson) {
+    super(canvas, data);
+  }
 
-	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();
+  }
 
-	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();
 
-	protected async initScene(): Promise<Scene> {
-		const scene = await super.initScene();
+    scene.getEngine().runRenderLoop(() => {
+      this.fpsDebugger();
+    });
 
-		scene.getEngine().runRenderLoop( () => {
-			this.fpsDebugger();
-		} );
+    return scene;
+  }
 
-		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', `
+  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;
@@ -54,18 +59,21 @@ export class DebugViewer extends Viewer {
 				right: 0;
 				padding: 10px;
 				margin: 0;
-			` );
-			document.body.appendChild( debugContainer );
-		}
-		debugContainer.innerHTML = JSON.stringify( instances, null, 2 );
-	};
+			`
+      );
+      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', `
+  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;
@@ -73,10 +81,10 @@ export class DebugViewer extends Viewer {
 				left: 0;
 				padding: 10px;
 				margin: 0;
-			` );
-			document.body.appendChild( debugContainer );
-		}
-		debugContainer.innerHTML = `${this.engine.getFps().toFixed( 2 )} fps`;
-	}
-
-}
+			`
+      );
+      document.body.appendChild(debugContainer);
+    }
+    debugContainer.innerHTML = `${this.engine.getFps().toFixed(2)} fps`;
+  }
+}

package/src/api/internal/lensRendering.ts

@@ -5,7 +5,6 @@
  */
 
 import '@babylonjs/core/Rendering/depthRendererSceneComponent';
-import { LensRenderingPipeline } from  '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/lensRenderingPipeline';
+import { LensRenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/lensRenderingPipeline';
 
-
-export { LensRenderingPipeline };
+export { LensRenderingPipeline };

package/src/api/internal/sceneSetup.ts

@@ -16,56 +16,51 @@ import { Parameter } from '../classes/parameter';
  * @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 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,
-	} );
+const defaultCamera = async function (scene: Scene): Promise<Camera> {
+  return await processCamera(scene, 'default_camera', {
+    type: 'arc',
+    active: true,
+  });
 };
 
 /**
@@ -73,101 +68,115 @@ const defaultCamera = async function( scene: Scene ): Promise<Camera> {
  * @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;
+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
+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
-	/*
+  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;
@@ -185,10 +194,8 @@ const sceneSetup = async function(engine: Engine, sceneJson: SceneJson): Promise
 	skybox.material = skyboxMaterial;
 	*/
 
-	// TODO: shadows don't work with HemishpericLight
-	return scene;
+  // TODO: shadows don't work with HemishpericLight
+  return scene;
 };
 
-export {
-	sceneSetup
-};
+export { sceneSetup };