@combeenation/3d-viewer 0.0.1

package/src/api/classes/viewerLight.ts

@@ -0,0 +1,339 @@
+import {
+  cloneNodeWithParents,
+  disableNodeWithParents,
+  enableNodeWithParents,
+  getRootNode,
+  injectNodeMetadata,
+  transformTransformNode,
+} from './../util/babylonHelper';
+import { DottedPath } from './dottedPath';
+import { Parameter } from './parameter';
+import { Variant } from './variant';
+import { VariantParameterizable } from './variantParameterizable';
+import { ShadowGenerator } from '@babylonjs/core/Lights/Shadows/shadowGenerator';
+import '@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent';
+import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';
+import { Light } from '@babylonjs/core/Lights/light';
+import { PointLight } from '@babylonjs/core/Lights/pointLight';
+import { ShadowLight } from '@babylonjs/core/Lights/shadowLight';
+import { Vector3 } from '@babylonjs/core/Maths/math.vector';
+import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+import '@babylonjs/loaders/glTF/2.0/Extensions/KHR_lights_punctual';
+import { get, isEmpty, isString, set } from 'lodash-es';
+
+/**
+ * A {@link ViewerLight} of a {@link Variant}. Acts as a container for Babylon.js lights. Lives only in the context of a
+ * {@link Variant}.
+ */
+export class ViewerLight extends VariantParameterizable {
+  protected _light: Light | undefined;
+
+  /**
+   * Constructor.
+   */
+  protected constructor(public readonly variant: Variant, public readonly name: string) {
+    super(variant, name);
+    this.addParameterObservers();
+  }
+
+  /**
+   * Creates a {@link ViewerLight} with given name.
+   */
+  public static async create(variant: Variant, name: string): Promise<ViewerLight> {
+    const viewerLight = new ViewerLight(variant, name);
+    viewerLight._light = await viewerLight.createBabylonLightFromDefinition(viewerLight.definition);
+    return viewerLight;
+  }
+
+  /**
+   * The wrapped Light.
+   */
+  get light(): Light {
+    if (!this._light) {
+      throw new Error(`Light for ViewerLight "${this.name}" has not been properly initialized.`);
+    }
+    return this._light!;
+  }
+
+  /**
+   * The {@link DottedPath} in the built tree of {@link ViewerLight}s.
+   * E.g. "_.top-1.sub-2.sub-sub-3.el-1"
+   */
+  get dottedPath(): DottedPath {
+    return DottedPath.create(this.variant.dottedPath).addPart(this.name);
+  }
+
+  /**
+   * The id representing a {@link DottedPath}.
+   */
+  get id(): string {
+    const dottedPath = DottedPath.create(this.dottedPath);
+    dottedPath.shiftPart(); // remove root
+    return dottedPath.path;
+  }
+
+  /**
+   * The {@link LightDefinition} of the {@link ViewerLight}.
+   */
+  get definition(): LightDefinition {
+    const definition = this.variant.structureJson.lights![this.name];
+    if (isString(definition)) {
+      return {
+        type: 'baked',
+        path: definition,
+      } as LightDefinition;
+    }
+    return definition as LightDefinition;
+  }
+
+  /**
+   * The type of the {@link ViewerLight}'s light.
+   */
+  get type(): string {
+    return this.light.constructor.name.replace(/light/i, '').toLowerCase();
+  }
+
+  /**
+   * @see {@link VariantParameterizable.commitParameters}
+   * @emit {@link Event.VIEWER_LIGHT_PARAMETER_COMMITTED}
+   */
+  public async commitParameters(parameters?: ParameterBag): Promise<VariantParameterizable> {
+    return super.commitParameters(parameters);
+  }
+
+  /**
+   * Adds the default {@link ParameterObserver}s which are called every time {@link commitParameters} is called.
+   */
+  protected addParameterObservers(): ViewerLight {
+    this._parameterObservers.set(Parameter.VISIBLE, [
+      async (light: ViewerLight, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
+        let visible;
+        try {
+          visible = Parameter.parseBoolean(newValue);
+        } catch (e) {
+          return;
+        }
+        if (visible === true) {
+          enableNodeWithParents(light.light);
+        } else if (visible === false) {
+          disableNodeWithParents(light.light);
+        }
+      },
+    ]);
+    this._parameterObservers.set(Parameter.INTENSITY, [
+      async (light: ViewerLight, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
+        set(light.light, 'intensity', Parameter.parseNumber(newValue));
+      },
+    ]);
+    this._parameterObservers.set(Parameter.SCALING, [
+      async (light: ViewerLight, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
+        // we have to deal just with root nodes here due to relative impacts in a node tree
+        const rootNode = getRootNode(light.light);
+        if (rootNode instanceof TransformNode) {
+          transformTransformNode(rootNode, {
+            scaling: Parameter.parseScaling(newValue),
+            position: Parameter.parseVector(light.inheritedParameters[Parameter.POSITION] || '(0, 0, 0)'),
+            rotation: Parameter.parseRotation(light.inheritedParameters[Parameter.ROTATION] || '(0, 0, 0)'),
+          });
+        }
+      },
+    ]);
+    this._parameterObservers.set(Parameter.POSITION, [
+      async (light: ViewerLight, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
+        // we have to deal just with root nodes here due to relative impacts in a node tree
+        const rootNode = getRootNode(light.light);
+        if (rootNode instanceof TransformNode) {
+          transformTransformNode(rootNode, {
+            scaling: Parameter.parseVector(light.inheritedParameters[Parameter.SCALING] || '(1, 1, 1)'),
+            position: Parameter.parseVector(newValue),
+            rotation: Parameter.parseRotation(light.inheritedParameters[Parameter.ROTATION] || '(0, 0, 0)'),
+          });
+        }
+      },
+    ]);
+    this._parameterObservers.set(Parameter.ROTATION, [
+      async (light: ViewerLight, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
+        // we have to deal just with root nodes here due to relative impacts in a node tree
+        const rootNode = getRootNode(light.light);
+        if (rootNode instanceof TransformNode) {
+          transformTransformNode(rootNode, {
+            scaling: Parameter.parseVector(light.inheritedParameters[Parameter.SCALING] || '(1, 1, 1)'),
+            position: Parameter.parseVector(light.inheritedParameters[Parameter.POSITION] || '(0, 0, 0)'),
+            rotation: Parameter.parseRotation(newValue),
+          });
+        }
+      },
+    ]);
+    this._parameterObservers.set(Parameter.DIRECTION, [
+      async (light: ViewerLight, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
+        if (
+          (light.light instanceof ShadowLight && !(light.light instanceof PointLight)) ||
+          light.light instanceof HemisphericLight
+        ) {
+          set(light.light, 'direction', Parameter.parseVector(newValue));
+        }
+      },
+    ]);
+    this._parameterObservers.set(Parameter.ANGLE, [
+      async (light: ViewerLight, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
+        if (light.light.getClassName() === 'SpotLight') {
+          set(light.light, 'angle', Parameter.parseNumber(newValue));
+        }
+      },
+    ]);
+    this._parameterObservers.set(Parameter.EXPONENT, [
+      async (light: ViewerLight, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
+        if (light.light.getClassName() === 'SpotLight') {
+          set(light.light, 'exponent', Parameter.parseNumber(newValue));
+        }
+      },
+    ]);
+    this._parameterObservers.set(Parameter.DIFFUSE, [
+      async (light: ViewerLight, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
+        set(light.light, 'diffuse', Parameter.parseColor(newValue));
+      },
+    ]);
+    this._parameterObservers.set(Parameter.SPECULAR, [
+      async (light: ViewerLight, oldValue: Undefinable<ParameterValue>, newValue: ParameterValue) => {
+        set(light.light, 'specular', Parameter.parseColor(newValue));
+      },
+    ]);
+    return this;
+  }
+
+  /**
+   * @param definition
+   * @protected
+   */
+  protected async createBabylonLightFromDefinition(definition: LightDefinition): Promise<Light> {
+    const parameters = Parameter.parseFromDeclarations(Parameter.declarations, this.inheritedParameters);
+    const scene = this.variant.viewer.scene;
+    let lightId = this.id;
+    let babylonLight;
+    switch (definition.type) {
+      case 'baked': {
+        if (!definition['path']) {
+          throw new Error(`The light "${lightId}" of type "${definition.type}" needs a "path".`);
+        }
+        const bakedLight = this.variant.inheritedLights.find(l => l.metadata.dottedPath.path === definition['path']);
+        if (bakedLight) {
+          lightId = bakedLight.metadata.dottedPath.clone().unshiftPart(this.id).path;
+          babylonLight = cloneNodeWithParents(bakedLight) as Light;
+          babylonLight!.name = lightId;
+          babylonLight!.id = lightId;
+        } else {
+          throw new Error(`No light found for path "${definition['path']}" in ViewerLight "${lightId}".`);
+        }
+        break;
+      }
+      case 'hemispheric': {
+        if (!parameters['direction']) {
+          throw new Error(`The ViewerLight "${lightId}" of type "${definition.type}" needs a "direction".`);
+        }
+        // @ts-ignore es6 build doesn't allow dynamic imports
+        const hemisphericLightModule = await import(
+          /* webpackChunkName: "hemispheric-light" */ '@babylonjs/core/Lights/hemisphericLight'
+        );
+        babylonLight = new hemisphericLightModule.HemisphericLight(lightId, parameters['direction'], scene);
+        break;
+      }
+      case 'point': {
+        // @ts-ignore es6 build doesn't allow dynamic imports
+        const pointLightModule = await import(
+          /* webpackChunkName: "point-light" */ '@babylonjs/core/Lights/pointLight'
+        );
+        babylonLight = new pointLightModule.PointLight(
+          lightId,
+          Vector3.Zero(), // position is set via parent TransformNode
+          scene
+        );
+        break;
+      }
+      case 'directional': {
+        if (!parameters['direction']) {
+          throw new Error(`The ViewerLight "${lightId}" of type "${definition.type}" needs a "direction".`);
+        }
+        // @ts-ignore es6 build doesn't allow dynamic imports
+        const directionalLightModule = await import(
+          /* webpackChunkName: "directional-light" */ '@babylonjs/core/Lights/directionalLight'
+        );
+        babylonLight = new directionalLightModule.DirectionalLight(lightId, parameters['direction'], scene);
+        break;
+      }
+      case 'spot': {
+        if (!parameters['direction']) {
+          throw new Error(`The ViewerLight "${lightId}" of type "${definition.type}" needs a "direction".`);
+        }
+        if (!parameters['angle']) {
+          throw new Error(`A ViewerLight of type "${definition.type}" needs an "angle".`);
+        }
+        if (!parameters['exponent']) {
+          throw new Error(`The ViewerLight "${lightId}" of type "${definition.type}" needs an "exponent".`);
+        }
+        // @ts-ignore es6 build doesn't allow dynamic imports
+        const spotLightModule = await import(/* webpackChunkName: "spot-light" */ '@babylonjs/core/Lights/spotLight');
+        babylonLight = new spotLightModule.SpotLight(
+          lightId,
+          Vector3.Zero(), // position is set via parent TransformNode
+          parameters['direction'],
+          parameters['angle'],
+          parameters['exponent'],
+          scene
+        );
+        break;
+      }
+      default:
+        throw new Error(`The type "${definition.type}" for ViewerLight "${lightId}" is not implemented (yet).`);
+    }
+    if (!babylonLight) {
+      throw new Error(
+        `The Light for ViewerLight "${lightId}" of type "${definition.type}" could no be created ` + `or found.`
+      );
+    }
+    if (!babylonLight.parent) {
+      // Create pseudo parent since lights do not implement mutations like "rotation" by itself.
+      babylonLight.parent = new TransformNode('__light__', this.variant.viewer.scene, true);
+    }
+    injectNodeMetadata(babylonLight.parent, {
+      variant: this.variant,
+      variantParameterizable: this,
+    });
+    // disable/hide by default
+    disableNodeWithParents(babylonLight);
+    // process shadow generator
+    const shadowGeneratorDefinition = get(definition, 'shadowGenerator') as ShadowGeneratorDefinition;
+    if (!isEmpty(shadowGeneratorDefinition)) {
+      if (!(babylonLight instanceof ShadowLight)) {
+        throw new Error(
+          `Using a ShadowGenerator with light type "${definition.type}" is not supported for ` +
+            `"${lightId}". Use lights deriving from ShadowLight.`
+        );
+      }
+      await this.processShadowGenerator(babylonLight, shadowGeneratorDefinition);
+    }
+    return babylonLight;
+  }
+
+  /**
+   * @param babylonLight
+   * @param definition
+   * @protected
+   */
+  protected async processShadowGenerator(
+    babylonLight: ShadowLight,
+    definition: ShadowGeneratorDefinition
+  ): Promise<ShadowGenerator> {
+    const parameterDeclarations: ParameterDeclarations = {};
+    // define declarations here if needed in future
+    const parameterBag = definition as {} as ParameterBag;
+    const parameters = Parameter.parseFromDeclarations(parameterDeclarations, parameterBag);
+    const shadowGenerator = new ShadowGenerator(parameters['mapSize'], babylonLight);
+    for (const parameter in parameters) {
+      if (parameter === 'mapSize') {
+        continue;
+      }
+      set(shadowGenerator, parameter, get(parameters, parameter));
+    }
+    return shadowGenerator;
+  }
+}

package/src/api/internal/debugViewer.ts

@@ -0,0 +1,90 @@
+/**
+ * @internal
+ */
+/// <reference path="../util/globalTypes.ts" />
+import { Event } from '../classes/event';
+import { Viewer } from '../classes/viewer';
+import { Scene } from '@babylonjs/core/scene';
+
+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

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

package/src/api/internal/sceneSetup.ts

@@ -0,0 +1,205 @@
+import { Parameter } from '../classes/parameter';
+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 } from 'lodash-es';
+
+const defaultSceneClearColor = new Color4(0, 0, 0, 0);
+const defaultEnvHelperColor = new Color4(1, 1, 1, 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 es6 build doesn't allow dynamic imports
+      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 (const 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 es6 build doesn't allow dynamic imports
+      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 };