@combeenation/3d-viewer 5.0.1 → 5.0.3-beta2

package/src/api/internal/debugViewer.ts

@@ -1,90 +1,90 @@
-/**
- * @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,10 +1,10 @@
-/**
- * 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 };
+/**
+ * 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,201 +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 { 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';
+
+const defaultSceneClearColor = new Color4(0, 0, 0, 0);
+const defaultEnvHelperColor = new Color4(0, 0, 0.5, 0);
+
+/**
+ * @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 = defaultSceneClearColor;
+  // 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, defaultSceneClearColor, defaultEnvHelperColor };