@mappedin/mappedin-js 5.11.0 → 5.12.1

package/lib/esm/renderer/index.d.ts

@@ -1,10 +1,9 @@
 // Generated by dts-bundle v0.7.3
 // Dependencies for this module:
+//   ../@mappedin/mvf
 //   ../three
 //   ../@tweenjs/tween.js
 //   ../minisearch
-//   ../@mappedin/mvf
-//   ../stats.js
 
 declare module '@mappedin/mappedin-js' {
     import { MapView } from '@mappedin/mappedin-js/renderer/public/MapView';
@@ -663,6 +662,7 @@ declare module '@mappedin/mappedin-js/get-venue' {
     export type { TLocationType, TNode, TImage, TLogo, TGalleryImage, TPhone, TSocial, TColor, TVortex, TPicture, TOpeningHours, TSiblingGroup, TState, TCategory, TEvent, TGeoReference, TMap, TMapGroup, TBuilding, TLocation, TPolygon, TPolygonRanking, TVenue, TMappedinAPI, } from '@mappedin/mappedin-js/get-venue/Mappedin.API.types';
     export type { TGetVenueOptions } from '@mappedin/mappedin-js/get-venue/Mappedin.types';
     import { MAP_RENDER_MODE } from '@mappedin/mappedin-js/get-venue/Mappedin.types';
+    import { ParsedMVF } from '@mappedin/mvf';
     export type TShowVenueOptions = {
             /**
                 * Sets the initial background color of the map, including while loading.
@@ -748,7 +748,7 @@ declare module '@mappedin/mappedin-js/get-venue' {
     /**
         * @internal
         */
-    export function downloadVenueBundleMVF(options: TGetVenueBundleOptions): Promise<unknown>;
+    export function downloadVenueBundleMVF(options: TGetVenueBundleOptions): Promise<Uint8Array>;
     /**
         * Returns a {@link Mappedin} object hydrated with JSON data.
         * @param {string|Object} mappedinSerializableData A JSON string or object representing a venue.
@@ -756,6 +756,11 @@ declare module '@mappedin/mappedin-js/get-venue' {
         * @returns {Mappedin} A new Mappedin object with data from the mappedinSerializableData parameter.
         */
     export function hydrateVenue(mappedinSerializableData: any, shouldPopulateBundledImagesAsBlobs?: boolean): Promise<Mappedin>;
+    /**
+        * @internal
+        * Returns a {@link Mappedin} object hydrated with MVF data.
+        */
+    export function hydrateVenueMVF(mvfData: ParsedMVF): Promise<Mappedin>;
 }
 
 declare module '@mappedin/mappedin-js/renderer/internal/Mappedin.BlueDot/Mappedin.BlueDot.core' {
@@ -1257,10 +1262,20 @@ declare module '@mappedin/mappedin-js/renderer/MapView.types' {
                 */
             firstMap?: MappedinMap | string;
             /**
+                * @experimental
+                *
                 * Multi-buffer rendering should improve performance but may cause issues on older GPUs/browsers
-                * @default true
+                * @default false
                 */
             multiBufferRendering?: boolean;
+            /**
+                * @experimental
+                *
+                * Journey path will be visible through other objects. Note: this is on by default, but requires the
+                * `multiBufferRendering` option (which is off by default) to be turned on.
+                * @default true
+                */
+            xRayPath?: boolean;
             /**
                 * True if the `opacity` argument to `setBackgroundColor` should be considered.
                 * @default true
@@ -2830,6 +2845,10 @@ declare module '@mappedin/mappedin-js/renderer/internal/outdoor-context/Mappedin
     export type TTileManagerOptions = {
             tileRenderMode?: TILE_RENDER_MODES;
             provider: IOutdoorContextProvider;
+            /**
+                * How many times bigger the bounding box should be than the map's longest side
+                */
+            boundingBoxMultiplier?: number;
     };
     export class TileManager {
             #private;
@@ -2847,6 +2866,9 @@ declare module '@mappedin/mappedin-js/renderer/internal/outdoor-context/Mappedin
             renderVisibleTiles: () => void;
             _renderVisibleTiles(): void;
             cachedZoomLevel: number;
+            visible: boolean;
+            fadeOut(): Promise<any>;
+            fadeIn(): Promise<any>;
             fetchTiles(): void;
             zoomLevelToAltitudeMap: number[][];
             plane: Object3D;
@@ -3336,7 +3358,6 @@ declare module '@mappedin/mappedin-js/get-venue/Mappedin.types' {
 
 declare module '@mappedin/mappedin-js/get-venue/Mappedin' {
     import { Navigator } from '@mappedin/mappedin-js/navigator';
-    import { MVFData } from '@mappedin/mappedin-js/get-venue/Mappedin.MVF.types';
     import type { TGetVenueOptions, TGetVenueOptionsInternal } from '@mappedin/mappedin-js/get-venue/Mappedin.types';
     import { MappedinCategory } from '@mappedin/mappedin-js/get-venue/MappedinCategory';
     import { MappedinEvent } from '@mappedin/mappedin-js/get-venue/MappedinEvent';
@@ -3352,6 +3373,7 @@ declare module '@mappedin/mappedin-js/get-venue/Mappedin' {
     import { MappedinVenue } from '@mappedin/mappedin-js/get-venue/MappedinVenue';
     import { MappedinVortex } from '@mappedin/mappedin-js/get-venue/MappedinVortex';
     import { IAnalytics } from '@mappedin/mappedin-js/get-venue/Mappedin.CustomerAnalytics';
+    import { ParsedMVF } from '@mappedin/mvf';
     export const defaultOptions: TGetVenueOptionsInternal & TGetVenueOptions;
     export enum MappedinCollectionType {
             CATEGORY = "categories",
@@ -3587,7 +3609,7 @@ declare module '@mappedin/mappedin-js/get-venue/Mappedin' {
                 * @hidden
                 * @internal
                 */
-            hydrateFromMVF(mvfData: MVFData): Promise<undefined>;
+            hydrateFromMVF(mvfData: ParsedMVF): Promise<undefined>;
             /**
                 *
                 * @experimental Hydrate the Mappedin instance using a response from either {@link Mappedin.toString}, {@link getVenueBundle} or by downloading the bundle manually
@@ -5050,6 +5072,7 @@ declare module '@mappedin/mappedin-js/renderer/internal' {
     export { default as MapObject } from '@mappedin/mappedin-js/renderer/internal/Mappedin.MapObject';
     export { default as CAMERA_LAYER } from '@mappedin/mappedin-js/renderer/internal/Mappedin.CameraLayers';
     export { default as AssetManager } from '@mappedin/mappedin-js/renderer/internal/Mappedin.AssetManager';
+    export { BundleAssetManager } from '@mappedin/mappedin-js/renderer/bundle-asset-manager';
     /**
         * Internal Events and Payloads
         */
@@ -6017,26 +6040,6 @@ declare module '@mappedin/mappedin-js/renderer/private/Core.interface' {
     }
 }
 
-declare module '@mappedin/mappedin-js/get-venue/Mappedin.MVF.types' {
-    import { ManifestCollection, NodeCollection, ObstructionCollection, SpaceCollection, Connections, Maps, EntranceCollection, MapStacks, StyleCollection } from '@mappedin/mvf';
-    export type WithIDs<T> = Map<string, T>;
-    /**
-      * The entire data collection for an MVF, in a single JSON collection.
-      *
-      */
-    export type MVFData = {
-        obstruction: WithIDs<ObstructionCollection>;
-        space: WithIDs<SpaceCollection>;
-        node: WithIDs<NodeCollection>;
-        entrance: WithIDs<EntranceCollection>;
-        connection: Connections;
-        map: Maps;
-        mapstack: MapStacks;
-        manifest: ManifestCollection;
-        style: StyleCollection;
-    };
-}
-
 declare module '@mappedin/mappedin-js/get-venue/MappedinLocationRankings' {
     import type { Mappedin } from '@mappedin/mappedin-js/get-venue/Mappedin';
     import type { TLocation } from '@mappedin/mappedin-js/get-venue/Mappedin.API.types';
@@ -6629,8 +6632,8 @@ declare module '@mappedin/mappedin-js/get-venue/Mappedin.TaskScheduler' {
 
 declare module '@mappedin/mappedin-js/renderer/MapView.SceneManager' {
     import { MappedinMap } from '@mappedin/mappedin-js/get-venue';
-    import type { ICore, TCameraTransform, TCameraAnimationOptions } from '@mappedin/mappedin-js/renderer/internal';
-    import { MapViewScene } from '@mappedin/mappedin-js/renderer/internal';
+    import type { ICore, TCameraAnimationOptions, TFocusOnCameraOptions, TCameraTargets } from '@mappedin/mappedin-js/renderer/internal';
+    import { MapObject, MapViewScene } from '@mappedin/mappedin-js/renderer/internal';
     export type TSceneTransitionOptions = {
             /**
                 * Map to set as active during the transition. This will decide where the camera will be positioned, as well as which
@@ -6638,11 +6641,6 @@ declare module '@mappedin/mappedin-js/renderer/MapView.SceneManager' {
                 */
             activeMap?: MappedinMap;
             verticalDistanceBetweenMaps?: number;
-            /**
-                * Camera options to use when transitioning to the new scene
-                */
-            cameraTransform?: TCameraTransform;
-            cameraAnimationOptions?: TCameraAnimationOptions;
             /**
                 * Whether to auto focus on the active map or leave the camera where it is.
                 * For single building venues, this should look the same way it did with MapManager
@@ -6651,10 +6649,22 @@ declare module '@mappedin/mappedin-js/renderer/MapView.SceneManager' {
                 * @default true
                 */
             autoFocusOnActiveMap?: boolean;
+            /**
+                * Where to focus the camera during transition to Scene. Will focus to fit the map if not provided.
+                * Currently, will discard any targets that are not on the active map.
+                */
+            focusOn?: {
+                    targets?: TCameraTargets;
+                    options?: TFocusOnCameraOptions & TCameraAnimationOptions;
+            };
     };
     class SceneManager {
             #private;
             currentScene: MapViewScene;
+            /**
+                * MapObjects that have been loaded and positioned in the scene
+                */
+            processedMapObjects: Set<MapObject>;
             constructor(core: ICore, startingScene: MapViewScene);
             get currentMap(): MappedinMap;
             renderGrid(): void;
@@ -6711,6 +6721,7 @@ declare module '@mappedin/mappedin-js/renderer/internal/Mappedin.MapObject' {
             labels: Set<any>;
             tooltips: Set<any>;
             markers: Set<any>;
+            box: any;
             textObjects: any[];
             labelBatchCreator: null;
             imagesToFlip: any[];
@@ -6734,6 +6745,45 @@ declare module '@mappedin/mappedin-js/renderer/internal/Mappedin.MapObject' {
             _objLoaded(object: any): any;
             _objLoadedMerged(object: any): Promise<any>;
             enableImageFlipping(polygonId: any, rotation: any): void;
+            fadeIn({ duration, delay, easing, onStart, onUpdate, onComplete, }: {
+                    duration?: number | undefined;
+                    delay?: number | undefined;
+                    easing?: any;
+                    onStart?: (() => void) | undefined;
+                    onUpdate?: (() => void) | undefined;
+                    onComplete?: (() => void) | undefined;
+            }): {
+                    start(core: any): Promise<any>;
+            }[];
+            fadeOut({ duration, delay, easing, onStart, onUpdate, onComplete, }: {
+                    duration?: number | undefined;
+                    delay?: number | undefined;
+                    easing?: any;
+                    onStart?: (() => void) | undefined;
+                    onUpdate?: (() => void) | undefined;
+                    onComplete?: (() => void) | undefined;
+            }): {
+                    start(core: any): Promise<any>;
+            }[];
+            fade({ direction, duration, delay, easing, onStart, onUpdate, onComplete, }: {
+                    direction?: string | undefined;
+                    duration?: number | undefined;
+                    delay?: number | undefined;
+                    easing?: any;
+                    onStart?: (() => void) | undefined;
+                    onUpdate?: (() => void) | undefined;
+                    onComplete?: (() => void) | undefined;
+            }): {
+                    start(core: any): Promise<any>;
+            }[];
+            /**
+                * Sets the opacity of all children (for now) of the map object
+                */
+            setIndoorGeometryOpacity(opacity: any): void;
+            /**
+                * Resets the transparent and opacity values of all children (for now) of the map object
+                */
+            resetIndoorGeometryOpacity(): void;
             elements: any;
             boundingBox: {
                     min: any;
@@ -6877,648 +6927,6 @@ declare module '@mappedin/mappedin-js/renderer/internal/Mappedin.CameraLayers' {
     }
 }
 
-import { Mesh, BufferAttribute, InstancedBufferAttribute, InstancedBufferGeometry, Object3D, Color, CanvasTexture, RawShaderMaterial, } from 'three';
-import { getObjectId, getObject } from '@mappedin/mappedin-js/renderer/internal/utils';
-import { HoverLabel } from '@mappedin/mappedin-js/renderer/internal';
-import LabelAtlasFragment from '@mappedin/mappedin-js/renderer/internal/shaders/Mappedin.LabelAtlas.Fragment.glsl';
-import LabelAtlasVertex from '@mappedin/mappedin-js/renderer/internal/shaders/Mappedin.LabelAtlas.Vertex.glsl';
-export const DEFAULT_LABEL_SIZING = {
-    MARGIN: 2,
-    HEIGHT_MARGIN: 0.5,
-    SIZE: 1.2,
-};
-const FONT_SIZE = 56;
-const SIZE_IN_METERS = FONT_SIZE / DEFAULT_LABEL_SIZING.SIZE; // About this, make it the same as legacy labels anyway
-const PIXELS_PER_METER = FONT_SIZE / 2;
-const METERS_PER_PIXEL = 1 / PIXELS_PER_METER;
-const CANVAS_MAX_LABELS = 64;
-const MIN_SLOT_SIZE = 16;
-const LABEL_PADDING = 4;
-class Label {
-    constructor() {
-        this.x = 0;
-        this.y = 0;
-        this.width = 0;
-        this.height = 0;
-        this.layer = null;
-        this.index = null;
-    }
-    /// This _just_ lays out the vertex into the attribute buffers.
-    layout(map, origin, size, rotation, uv, color) {
-        let angle = (this.canvasBounds.rotation * Math.PI) / 180;
-        let width = this.width * this.pixelsPerMu;
-        let height = this.height * this.pixelsPerMu;
-        // fix the alignment of the labels. This just shifts them around
-        // in canvasBound area to the left/right/center
-        let offset;
-        if (this.canvasBounds.align == 'left') {
-            offset = this.margin;
-        }
-        else if (this.canvasBounds.align == 'right') {
-            offset = this.canvasBounds.maxWidth - width - this.margin;
-        }
-        else if (this.canvasBounds.align == 'center') {
-            offset = (this.canvasBounds.maxWidth - width - this.margin) / 2;
-        }
-        let offsetX = offset * Math.cos(angle);
-        let offsetY = -offset * Math.sin(angle);
-        let index = this.index;
-        origin.setXYZ(index, this.canvasBounds.x - map.width / 2 + offsetX, -this.canvasBounds.y + map.height / 2 + offsetY, this.z + 0.1);
-        size.setXY(index, width, height);
-        rotation.setX(index, angle);
-        let canvas = this.layer.canvas;
-        uv.setXYZW(index, this.x / canvas.width, 1 - this.y / canvas.height, this.width / canvas.width, this.height / canvas.height);
-        color.setXYZ(index, this.color.r, this.color.g, this.color.b);
-        // mark all the arrays as needing to be updated (reuploaded) since
-        // they have now been changed.
-        origin.needsUpdate = true;
-        size.needsUpdate = true;
-        rotation.needsUpdate = true;
-        uv.needsUpdate = true;
-        color.needsUpdate = true;
-    }
-}
-class Slot {
-    constructor(x, y, width, height) {
-        this.x = x;
-        this.y = y;
-        this.width = width;
-        this.height = height;
-    }
-    leftOverSpace(glyph) {
-        // check to see if it would not fit.
-        if (this.width < glyph.width || this.height < glyph.height) {
-            return null;
-        }
-        return this.height * (this.width - glyph.width) + this.width * (this.height - glyph.height);
-    }
-    /// split this slot into 0-2 spaces.
-    split(label, spaces, index) {
-        label.x = this.x;
-        label.y = this.y;
-        if (this.width - label.height < MIN_SLOT_SIZE && this.height - label.height < MIN_SLOT_SIZE) {
-            // delete itself from the array
-            spaces.splice(index, 1);
-        }
-        else if (this.width === label.width) {
-            spaces.splice(index, 1, new Slot(this.x, this.y + label.height, this.width, this.height - label.height));
-        }
-        else if (this.height === label.height) {
-            spaces.splice(index, 1, new Slot(this.x + label.width, this.y, this.width - label.width, this.height));
-        }
-        else {
-            spaces.splice(index, 1, new Slot(this.x + label.width, this.y, this.width - label.width, label.height), new Slot(this.x, this.y + label.height, this.width, this.height - label.height));
-        }
-    }
-}
-class AtlasLayer {
-    /// Creates a new Atlas Layer,
-    constructor(atlas, map, width, height) {
-        // height can be anything so we have to match it to a close power of two
-        let power = 5; // start with 5 because 2^5 is 32 which is a good lower bounds
-        while (Math.pow(2, power) < height) {
-            power += 1;
-        }
-        height = Math.pow(2, power);
-        power = 10; // start with 5 because 2^10 is 1024 which is a good lower bounds
-        while (Math.pow(2, power) < width) {
-            power += 1;
-        }
-        width = Math.pow(2, power);
-        this.atlas = atlas;
-        // the map that this layer is used for, since this get rendered
-        // as a single object we cannot for any reason reuse a layer for a
-        // different map.
-        this.map = map;
-        this.canvasWidth = width;
-        this.canvasHeight = height;
-        // create a canvas and context to draw the text labels into
-        this.canvas = document.createElement('canvas');
-        this.canvas.width = this.canvasWidth;
-        this.canvas.height = this.canvasHeight;
-        this.context = this.canvas.getContext('2d');
-        this.context.textBaseline = 'bottom';
-        // the list of free space in the canvas that we can put blocks int
-        this.spaces = [new Slot(0, 0, this.canvas.width, this.canvas.height)];
-        // an array of free slots for when labels get destroyed
-        this.free = [];
-        // an array of labels that are contained
-        this.labels = [];
-        this.count = CANVAS_MAX_LABELS;
-        // Create buffers to hold the binary data for rendering data
-        let origin = new Float32Array(this.count * 3);
-        let size = new Float32Array(this.count * 2);
-        let rotation = new Float32Array(this.count);
-        let uv = new Float32Array(this.count * 4);
-        let color = new Float32Array(this.count * 3);
-        this.uv = new InstancedBufferAttribute(uv, 4, false, 1);
-        this.uv.set(uv);
-        this.uv.needsUpdate = true;
-        this.origin = new InstancedBufferAttribute(origin, 3, false, 1);
-        this.origin.set(origin);
-        this.origin.needsUpdate = true;
-        this.size = new InstancedBufferAttribute(size, 2, false, 1);
-        this.size.set(size);
-        this.size.needsUpdate = true;
-        this.rotation = new InstancedBufferAttribute(rotation, 1, false, 1);
-        this.rotation.set(rotation);
-        this.rotation.needsUpdate = true;
-        this.color = new InstancedBufferAttribute(color, 3, true, 1);
-        this.color.set(color);
-        this.color.needsUpdate = true;
-        // these will probably always be zero, but we want to make sure anyhow
-        // a none zero sized element might render with an invalid texture
-        // coordinate which would be pretty bad.
-        for (let i = 0; i < this.count; i++) {
-            this.zero(i);
-        }
-        // create the polygon, this is just a square 1x1
-        let positions = new Float32Array([0, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0]);
-        let indicies = [0, 3, 1, 3, 2, 1];
-        // Setup the geometry buffer
-        this.geometry = new InstancedBufferGeometry();
-        this.geometry.setIndex(indicies);
-        this.geometry.setAttribute('position', new BufferAttribute(positions, 3));
-        this.geometry.setAttribute('size', this.size);
-        this.geometry.setAttribute('origin', this.origin);
-        this.geometry.setAttribute('rotation', this.rotation);
-        this.geometry.setAttribute('uv', this.uv);
-        this.geometry.setAttribute('color', this.color);
-        // Three allows for wrapping of a canvas into a texture, neat
-        this.texture = new CanvasTexture(this.canvas);
-        this.texture.anisotropy = 16;
-        // create the shader
-        this.material = new RawShaderMaterial();
-        this.material.vertexShader = LabelAtlasVertex;
-        this.material.fragmentShader = LabelAtlasFragment;
-        this.material.uniforms = {
-            textureLabel: { value: this.texture },
-        };
-        // marked as transparent because the we alpha blend the textures
-        this.material.transparent = true;
-        // create the mesh
-        this.mesh = new Mesh(this.geometry, this.material);
-        // create a 3D object for the scene graph containing the mesh
-        this.obj = new Object3D();
-        this.obj.add(this.mesh);
-        // This logic uses a custom vertex shader to position and size the
-        // actual vertices. This has a side effect of the renderer not actually
-        // knowing the size of the object. Disabling the frustum culling
-        // prevents this.
-        this.obj.frustumCulled = false;
-        this.mesh.frustumCulled = false;
-        // add to the map
-        this.map.add(this.obj);
-    }
-    // return the number of bytes left in this layer
-    space() {
-        return this.spaces.map(x => x.width * x.height).reduce((x, y) => x + y);
-    }
-    // set a index of the arrays to zero.
-    zero(index) {
-        this.origin.array[index * 3 + 0] = 0;
-        this.origin.array[index * 3 + 1] = 0;
-        this.origin.array[index * 3 + 2] = 0;
-        this.size.array[index * 2 + 0] = 0;
-        this.size.array[index * 2 + 1] = 0;
-        this.rotation.array[index] = 0;
-        this.uv.array[index * 4 + 0] = 0;
-        this.uv.array[index * 4 + 1] = 0;
-        this.uv.array[index * 4 + 2] = 0;
-        this.uv.array[index * 4 + 3] = 0;
-        this.color.array[index * 3 + 0] = 0;
-        this.color.array[index * 3 + 1] = 0;
-        this.color.array[index * 3 + 2] = 0;
-        this.origin.needsUpdate = true;
-        this.size.needsUpdate = true;
-        this.rotation.needsUpdate = true;
-        this.uv.needsUpdate = true;
-        this.color.needsUpdate = true;
-    }
-    // find space for a label, if there is no space this will return false.
-    // if space was found, the label is added to this Atlas and the label index
-    // is set.
-    //
-    // Note: The label is added for house keeping, the values of the buffers
-    // 		 have not been configured yet. And the text has not been rendered
-    findSpace(label) {
-        // even if there is space, there is no space left in the draw buffers
-        if (this.free.length != 0 && this.labels.length == this.count) {
-            return false;
-        }
-        // search 'spaces' for the entry that fits the glyph best. 'best' means
-        // least amount of wasted space, ideally 0.
-        let best = -1;
-        for (let i = 0; i < this.spaces.length; i++) {
-            let space = this.spaces[i].leftOverSpace(label);
-            if (space === null) {
-                continue;
-            }
-            if (best === -1 || this.spaces[i].leftOverSpace(label) < space) {
-                best = i;
-            }
-        }
-        if (best !== -1) {
-            this.spaces[best].split(label, this.spaces, best);
-            label.layer = this;
-            // Append an element to an array if there no free slots,
-            // if there are free slots we reuse the space instead.
-            if (this.free.length === 0) {
-                label.index = this.labels.length;
-                this.labels.push(label);
-            }
-            else {
-                label.index = this.free.pop();
-                this.labels[label.index] = label;
-            }
-        }
-        // returns true if there was space found.
-        return best != -1;
-    }
-    // remove this label from the internal contents of this atlas.
-    remove(label) {
-        if (label.index === undefined) {
-            return;
-        }
-        // remove this object from the vertex array.
-        this.zero(label.index);
-        // clear the pixel memory to avoid reuse of this area getting messed up
-        this.context.clearRect(label.x, label.y, label.width, label.height);
-        // add the free spaces to the free list
-        this.spaces.push(new Slot(label.x, label.y, label.width, label.height));
-        this.free.push(label.index);
-        this.labels[label.index] = null;
-        // check to see if there is actually any labels left
-        let empty = true;
-        for (let iLabel of this.labels) {
-            empty = empty && iLabel != null;
-            if (!empty) {
-                break;
-            }
-        }
-        // if there are no labels left, remove this layer
-        if (empty) {
-            this.atlas.removeLayer(this);
-        }
-    }
-    // render a label to the canvas
-    render(label) {
-        this.context.save();
-        this.context.rect(label.x + 1, label.y + 1, label.width - 1 * 2, label.height - 1 * 2);
-        this.context.clip();
-        this.context.font = label.size + 'px ' + label.font;
-        for (let line of label.lines) {
-            this.context.fillText(line.text, line.x + label.x + LABEL_PADDING, line.y + label.y + line.height + LABEL_PADDING);
-        }
-        this.texture.needsUpdate = true;
-        this.context.restore();
-    }
-    // Reset canvas and re-render all labels
-    onWebGLContextRestored() {
-        this.canvas = document.createElement('canvas');
-        this.canvas.width = this.canvasWidth;
-        this.canvas.height = this.canvasHeight;
-        this.context = this.canvas.getContext('2d');
-        this.context.textBaseline = 'bottom';
-        this.texture = new CanvasTexture(this.canvas);
-        this.texture.anisotropy = 16;
-        this.material.uniforms.textureLabel.value = this.texture;
-        for (let label of this.labels) {
-            if (label != null) {
-                this.render(label);
-            }
-        }
-    }
-    // free all resources associated with this layer
-    dispose() {
-        this.geometry.dispose();
-        this.material.dispose();
-        this.texture.dispose();
-    }
-}
-class Atlas {
-    constructor() {
-        this.layers = [];
-        this.canvas = document.createElement('canvas');
-        this.context = this.canvas.getContext('2d');
-    }
-    /// adds label to the atlas
-    addLabel(map, lines, font, size, scope, pixelsPerScale) {
-        // get the max width / height
-        let height = 0;
-        let width = 0;
-        for (let line of lines) {
-            width = Math.max(Math.ceil(line.width + line.x), width);
-            height = Math.max(Math.ceil(line.height + line.y), height);
-        }
-        let label = new Label();
-        label.map = map;
-        label.width = width + LABEL_PADDING * 2;
-        label.height = height + LABEL_PADDING * 2;
-        label.lines = lines;
-        label.font = font;
-        label.size = size;
-        label.canvasBounds = scope.canvasBounds;
-        label.margin = scope.margin;
-        label.heightMargin = scope.heightMargin;
-        label.pixelsPerMu = pixelsPerScale;
-        label.z = scope.height;
-        label.view = scope;
-        label.color = scope.color;
-        let layer;
-        // find a slot to place this label in
-        for (let iLayer of this.layers) {
-            layer = iLayer;
-            if (layer.map !== map) {
-                layer = null;
-                continue;
-            }
-            if (layer.findSpace(label)) {
-                break;
-            }
-            layer = null;
-        }
-        // no space was found, create a new layer
-        if (layer == null) {
-            layer = new AtlasLayer(this, map, label.width, label.height);
-            this.layers.push(layer);
-            if (!layer.findSpace(label)) {
-                return;
-            }
-            // order the layers such that the least populated ones are first.
-            this.layers.sort((a, b) => b.space() - a.space());
-        }
-        layer.render(label);
-        label.layout(map.mapClass, layer.origin, layer.size, layer.rotation, layer.uv, layer.color);
-        label.layer = layer;
-        return label;
-    }
-    // delete a layer from the list of layers
-    removeLayer(layer) {
-        let index = this.layers.indexOf(layer);
-        if (index != -1) {
-            this.layers.splice(index, 1);
-        }
-    }
-    // measure the size of a element with a given font and size
-    measure(text, font, size) {
-        this.context.font = size + 'px ' + font;
-        return this.context.measureText(text);
-    }
-    // Retore all layers
-    onWebGLContextRestored() {
-        for (let layer of this.layers) {
-            layer.onWebGLContextRestored();
-        }
-    }
-    // cleans up all the layers of the Atlas
-    dispose() {
-        for (let layer of this.layers) {
-            layer.dispose();
-        }
-    }
-}
-class FlatLabel {
-    constructor(options, venue, mapObject, DEFAULT_FONT, polygonMeshesById, textLabelsByPolygonId, mapView, scope, atlas) {
-        let polygon = getObject(options.polygon, venue.polygons);
-        this.id = polygon.id;
-        this.text = (options.shortText || options.text).trim();
-        this.stateText = options.stateText ? ' (' + options.stateText + ')' : '';
-        this.fullText = this.stateText ? this.text + this.stateText : this.text;
-        this.font = options.font || DEFAULT_FONT;
-        this.atlas = atlas;
-        this.canvasBounds = options.canvasBounds || polygon.canvasBounds;
-        this.mapScale = mapObject.getMapScale() || 1;
-        this.margin = (options.margin || DEFAULT_LABEL_SIZING.MARGIN) * this.mapScale;
-        this.heightMargin = (options.heightMargin || DEFAULT_LABEL_SIZING.HEIGHT_MARGIN) * this.mapScale;
-        this.scaleMin = options.scaleMin || 0.25;
-        this.scaleStep = options.scaleStep > 0 ? options.scaleStep : 0.25;
-        this.multiline = options.multiline == undefined ? true : options.multiline;
-        this.height = Number(options.height) || null;
-        this.polygonMeshesById = polygonMeshesById;
-        this.polyId = options.polygonId || getObjectId(options.polygon, venue.polygons);
-        this.map = mapObject;
-        this.color = new Color(options.color || scope.colors.text || '#000000');
-        this.hoverColor = new Color(options.hoverColor || this.color);
-        this.baseColor = this.color;
-        this.hideOnCreate = false;
-        this.hoverLabelText = options.text.trim();
-        this.fontSize = options.fontSize * this.mapScale || options.size * SIZE_IN_METERS || FONT_SIZE;
-        this.hoverLabelMode = options.hoverLabelMode3D || HoverLabel.MODES.ALL;
-        this.hoverLabelClass = options.hoverLabelClass || 'mMapviewHoverLabel';
-        this.showHoverLabel =
-            this.hoverLabelMode == HoverLabel.MODES.ALL || this.hoverLabelMode == HoverLabel.MODES.NO_TEXT_LABEL_ONLY;
-        this.hoverIfLabelFails =
-            this.hoverLabelMode == HoverLabel.MODES.ALL || this.hoverLabelMode == HoverLabel.MODES.NO_TEXT_LABEL_ONLY;
-        this.textLabelsByPolygonId = textLabelsByPolygonId;
-        this.map.textObjects.push(this);
-    }
-    create() {
-        let scope = this;
-        // This could get killed before we even get to creation
-        if (this.doNotCreate) {
-            return;
-        }
-        if (scope.canvasBounds == null) {
-            scope.invalid = true;
-            scope.message = "No Canvas Bounds. Can't draw text '" + scope.text + "'";
-            scope.showHoverLabel = scope.hoverIfLabelFails;
-            return;
-        }
-        scope.showHoverLabel = this.hoverLabelMode == HoverLabel.MODES.ALL;
-        let muPerPixel = METERS_PER_PIXEL * this.mapScale;
-        let pixelsPerMu = PIXELS_PER_METER / this.mapScale;
-        let labelsToAttempt = [this.text];
-        if (this.stateText.length)
-            labelsToAttempt.unshift(this.fullText);
-        for (let attempt of labelsToAttempt) {
-            // attempt to layout the words
-            let words = attempt.split(' ').map(function (word) {
-                return {
-                    width: scope.atlas.measure(word, scope.font, scope.fontSize).width,
-                    word: word,
-                };
-            });
-            // convert the canvas bounds to an area minus in pixels
-            let availableWidth = (this.canvasBounds.maxWidth - this.margin * 2) * pixelsPerMu;
-            let availableHeight = (this.canvasBounds.maxHeight - this.heightMargin * 2) * pixelsPerMu;
-            let maxShrinkSteps = (1 - this.scaleMin) / this.scaleStep;
-            let minimumShrinkSteps = 0;
-            let spaceWidth = this.atlas.measure(' ', this.font, this.fontSize).width;
-            let lineHeight = getTextHeight(this.fontSize + 'px ' + this.font);
-            for (let i = 0, iLen = words.length; i < iLen; i++) {
-                let width = words[i].width;
-                let wShrinkSteps = Math.ceil((width - availableWidth) / (width * this.scaleStep));
-                minimumShrinkSteps = Math.max(wShrinkSteps, minimumShrinkSteps);
-            }
-            if (this.height == null) {
-                if (this.polygonMeshesById[this.polyId]) {
-                    let target = this.polygonMeshesById[this.polyId];
-                    if (!target.geometry.boundingBox) {
-                        target.geometry.computeBoundingBox();
-                    }
-                    this.height = target.geometry.boundingBox.max.z + target.position.z;
-                }
-                else {
-                    this.height = 0;
-                }
-            }
-            var lines;
-            var shrinkStep;
-            var currentScale;
-            let scaleStep = this.scaleStep;
-            shrink: for (shrinkStep = minimumShrinkSteps; shrinkStep <= maxShrinkSteps; shrinkStep++) {
-                currentScale = 1 - shrinkStep * scaleStep;
-                let thisLineWidth = words[0].width * currentScale;
-                lines = [
-                    {
-                        text: words[0].word,
-                        width: thisLineWidth,
-                        height: lineHeight * currentScale,
-                        x: 0,
-                        y: 0,
-                    },
-                ];
-                for (let iWordSize = 1; iWordSize < words.length; iWordSize++) {
-                    let wordSize = words[iWordSize];
-                    let spaceForNextWord = (wordSize.width + spaceWidth) * currentScale;
-                    if (thisLineWidth + spaceForNextWord < availableWidth) {
-                        // Add to line
-                        lines[lines.length - 1].text += ' ' + wordSize.word;
-                        lines[lines.length - 1].width += spaceForNextWord;
-                        thisLineWidth += spaceForNextWord;
-                    }
-                    else {
-                        // New line
-                        if (!this.multiline)
-                            continue shrink;
-                        lines[lines.length - 1].width = thisLineWidth;
-                        thisLineWidth = wordSize.width * currentScale;
-                        lines.push({
-                            text: wordSize.word,
-                            width: thisLineWidth,
-                            height: lineHeight * currentScale,
-                            x: 0,
-                            y: lines[lines.length - 1].height + lines[lines.length - 1].y,
-                        });
-                    }
-                }
-                let requiredHeight = lines.length * lineHeight * currentScale;
-                if (requiredHeight <= availableHeight) {
-                    this.invalid = false;
-                    break;
-                }
-            }
-            if (this.invalid == false)
-                break;
-        }
-        if (this.invalid == false) {
-            // center each line
-            let lineTotalWidth = lines.map(x => Math.ceil(x.width)).reduce((a, b) => Math.max(a, b));
-            for (let line of lines) {
-                line.x = (lineTotalWidth - line.width) / 2;
-            }
-            // lines, font, size, scope, pixelsPerScale
-            this.label = this.atlas.addLabel(this.map, lines, this.font, this.fontSize * currentScale, this, muPerPixel);
-        }
-        this.created = true;
-    }
-    // eslint-disable-next-line class-methods-use-this
-    flipIfNeeded(cameraAngle) {
-        // this is done in the shader, so we will not do anything here
-        // this function simply exists for parity with 'TextLabel'
-    }
-    removeSelf(bulk) {
-        if (this.created) {
-            if (this.label != null) {
-                this.label.layer.remove(this.label);
-                this.label = null;
-            }
-            if (!bulk) {
-                this.map.textObjects = this.map.textObjects.filter(object => object != this);
-                // Delete from textLabelsByPolygonId
-                Object.keys(this.textLabelsByPolygonId).forEach(key => {
-                    if (this.textLabelsByPolygonId[key] == this) {
-                        delete this.textLabelsByPolygonId[key];
-                    }
-                });
-            }
-        }
-        else {
-            this.doNotCreate = true;
-        }
-    }
-    setColor(textColor) {
-        const color = new Color(textColor);
-        const sameColor = this.color.equals(color);
-        const withLabel = Boolean(this.label?.layer);
-        this.color = color;
-        if (!sameColor && withLabel) {
-            this.label.color = this.color;
-            this.label.layout(this.map.mapClass, this.label.layer.origin, this.label.layer.size, this.label.layer.rotation, this.label.layer.uv, this.label.layer.color);
-        }
-    }
-    setHoverColor = color => {
-        this.hoverColor = new Color(color);
-    };
-    clearColor() {
-        this.setColor(this.baseColor);
-    }
-    hide() {
-        if (this.label) {
-            this.label.layer.zero(this.label.index);
-        }
-        else {
-            this.hideOnCreate = true;
-        }
-    }
-    show() {
-        if (this.label) {
-            let layer = this.label.layer;
-            let map = this.map;
-            let label = this.label;
-            label.layout(map.mapClass, layer.origin, layer.size, layer.rotation, layer.uv, layer.color);
-        }
-        else {
-            this.hideOnCreate = false;
-        }
-    }
-    toString() {
-        return this.hoverLabelText;
-    }
-}
-let textHeightCache = new Map();
-var getTextHeight = function (font) {
-    // check if the font is in the cache because modifying the dom is expensive
-    let height = textHeightCache[font];
-    if (height != undefined) {
-        return height;
-    }
-    let text = document.createElement('span');
-    text.textContent = 'Hg';
-    text.style.font = font;
-    let block = document.createElement('div');
-    block.style.cssText = 'display: inline-block; width: 1px; height: 0px;';
-    let div = document.createElement('div');
-    div.appendChild(text);
-    div.appendChild(block);
-    let body = document.body;
-    body.appendChild(div);
-    try {
-        var bounding = text.getBoundingClientRect();
-    }
-    finally {
-        div.remove();
-    }
-    // add the element to the cache
-    if (bounding.height != undefined) {
-        textHeightCache[font] = bounding.height;
-        height = bounding.height;
-    }
-    return height;
-};
-export { Atlas, FlatLabel };
-
 declare module '@mappedin/mappedin-js/renderer/internal/Mappedin.HoverLabel' {
     export default HoverLabel;
     /**
@@ -7664,32 +7072,48 @@ declare module '@mappedin/mappedin-js/renderer/internal/Mappedin.HTMLCollider' {
 
 declare module '@mappedin/mappedin-js/renderer/MapView.Scene' {
     import { MappedinMap } from '@mappedin/mappedin-js/get-venue';
-    import type { ICore, TSceneTransitionOptions } from '@mappedin/mappedin-js/renderer/internal';
-    import { MapObject } from '@mappedin/mappedin-js/renderer/internal';
-    export function getPanBoundsForObject(mapObject: MapObject, currentPanBounds: any): {
-        min: any;
-        max: any;
-        margin: any;
-        radius: any;
-        center: any;
-    };
+    import type { ICore, SceneManager, TSceneTransitionOptions } from '@mappedin/mappedin-js/renderer/internal';
+    import { MapObject, CAMERA_EASING_MODE } from '@mappedin/mappedin-js/renderer/internal';
+    export const AUTO_FOCUS_DURATION = 500;
+    export const AUTO_FOCUS_EASING = CAMERA_EASING_MODE.EASE_OUT;
+    export const STARTING_TILT = 0.6;
+    export const STARTING_ROTATION: undefined;
     class MapViewScene {
-        #private;
-        maps: MappedinMap[];
-        object: any;
-        currentMap: MappedinMap;
-        mapObjects: Map<MappedinMap['id'], MapObject>;
-        constructor(maps: MappedinMap[], core: ICore);
-        /**
-          * Determine each maps position and rotation relative to the refernce map
-          */
-        determineMapPositionAndRotation(map: MappedinMap): {
-            position: any[];
-            scale: number[];
-            rotation: number[];
-        };
-        /** Render scene */
-        render(map: MappedinMap, transitionOptions?: TSceneTransitionOptions, isStartingScene?: boolean): Promise<void>;
+            #private;
+            maps: MappedinMap[];
+            mapObjectsArray: MapObject[];
+            transitionOptions: TSceneTransitionOptions | undefined;
+            object: any;
+            verticalPaths: any;
+            currentMap: MappedinMap;
+            mapObjects: Map<MappedinMap['id'], MapObject>;
+            constructor(maps: MappedinMap[], core: ICore);
+            get mapObjectsByMapGroup(): {
+                    [x: string]: MapObject[];
+            };
+            /**
+                * Determine each maps position and rotation relative to the refernce map
+                */
+            determineMapPositionAndRotation(map: MappedinMap): {
+                    position: any[];
+                    scale: number[];
+                    rotation: number[];
+            };
+            /**
+                * Convenience function to initialize scene (for stacked maps)
+                */
+            prepare(sceneManager: SceneManager, transitionOptions?: TSceneTransitionOptions): Promise<void>;
+            /**
+                * Override this method if works need to be done when the window is resized
+                */
+            resize(): void;
+            focusOnCurrentMap(transitionOptions?: TSceneTransitionOptions, isStartingScene?: boolean): Promise<unknown>;
+            preRender(transitionOptions?: TSceneTransitionOptions): Promise<Promise<MapObject>[]>;
+            /**
+                * Override this method when unmounting a scene
+                */
+            unmount(): void;
+            postRender(): void;
     }
     export default MapViewScene;
 }
@@ -7763,7 +7187,7 @@ declare module '@mappedin/mappedin-js/renderer/internal/Mappedin.Element' {
         static imagesLoadingInProgress: Map<string, Promise<[any, any]>>;
         _addImage(polygon: MappedinPolygon, mapClass: MappedinMap): void;
         static _normalizeColor(color: any): number;
-        static _getMaterial(color: string, opacity: number): any;
+        static _getMaterial(color: string, opacity: number, map: MappedinMap['id']): any;
         static _clip(vertices: any, offset: any): any;
     }
     export default Element;
@@ -8174,2257 +7598,6 @@ declare module '@mappedin/mappedin-js/renderer/internal/Mappedin.BlueDot/Mappedi
     export default BlueDotUI;
 }
 
-import { Euler, EventDispatcher, MOUSE, PlaneGeometry, Matrix4, MeshBasicMaterial, Mesh, Raycaster, Vector2, Vector3, Clock, } from 'three';
-import TouchAnchor from '@mappedin/mappedin-js/renderer/internal/Mappedin.CameraControls.TouchAnchor';
-import InputSet from '@mappedin/mappedin-js/renderer/internal/Mappedin.CameraControls.InputSet';
-import { getProjectionScaleFactor, throttle, debounce } from '@mappedin/mappedin-js/renderer/internal/utils';
-import { VIEW_STATE } from '@mappedin/mappedin-js/renderer/internal/Mappedin.MultiFloorView';
-import { DebugUICheckbox } from '@mappedin/mappedin-js/renderer/internal/Mappedin.DebugUIControl';
-import TWEEN from '@tweenjs/tween.js';
-const CAMERA_CLIPPING_RADIUS = 10000;
-const CAMERA_CONTROL_OPTIONS = {
-        chain: 'chain',
-        cancel: 'cancel',
-};
-const SCROLL_THROTTLE_MS = 100;
-const dispatcher = new EventDispatcher();
-/**
-    * The advanced, manual camera controls for {{#crossLink "MapView"}}{{/crossLink}}. You probably don't need to use this at all, instead relying on the MapView's {{#crossLink "MapView/focusOn:method"}}{{/crossLink}}, {{#crossLink "MapView/resetCamera:method"}}{{/crossLink}} and built in touch/mouse controls.
-    * This class will let you do things like change the min/max zoom, tilt, and pan, attach to camera events, and move/animate the camera to specifc points.
-    *
-    * The camera works by setting an anchor point on the scene at ground level and pointing the camera at it. {{#crossLink "CameraControls/zoom:method"}}{{/crossLink}} controls how far the camera is from the anchor, and {{#crossLink "CameraControls/tilt:method"}}{{/crossLink}}/{{#crossLink "CameraControls/rotate:method"}}{{/crossLink}} controls the angle the camera is rotated about it.
-    * The camera will always be pointed directly at the anchor point. {{#crossLink "CameraControls/pan:method"}}{{/crossLink}} or {{#crossLink "CameraControls/setPosition:method"}}{{/crossLink}} will move that anchor around on the 2D ground plane.
-    *
-    * Created for you automatically with a MapView, don't re-create yourself.
-    * @type {any}
-    *
-    * @class CameraControls
-    */
-let CameraControls = function (camera, canvas, scene, core) {
-        /**
-            * Dispatcher
-            */
-        this.dispatcher = dispatcher;
-        this.camera = camera;
-        this.canvas = canvas;
-        this.elevation = camera.parent;
-        this.orbit = this.elevation.parent;
-        let intersection;
-        let TWO_PI = Math.PI * 2;
-        // @TODO: figure out a zero-magic solution
-        const CAMERA_ZRANGE = 100;
-        /**
-            * Factor that controls how fast zooming in and out happens in response to mouse wheel events
-            *
-            * @property zoomSpeed {Float}
-            * @default 5.0
-            */
-        this.zoomSpeed = 5.0;
-        /**
-            * Factor to multiple mouse movement by to get tilt/rotation.
-            *
-            * @property rotateSpeed {Float}
-            * @default 100
-            */
-        this.rotateSpeed = 100;
-        /**
-            * Disable or re-enable user input.
-            *
-            * @property enabled {Boolean}
-            * @default true
-            */
-        this.enabled = true;
-        /**
-            * Disable or re-enable user zoom.
-            *
-            * @property enableZoom {Boolean}
-            * @default true
-            */
-        this.enableZoom = true;
-        /**
-            * Disable or re-enable user pan.
-            *
-            * @property enablePan {Boolean}
-            * @default true
-            */
-        this.enablePan = true;
-        /**
-            * Disable or re-enable user pedestal.
-            *
-            * @property enablePedestal {Boolean}
-            * @default false
-            */
-        this.enablePedestal = false;
-        /**
-            * Max amount to allow scrolling maps down
-            * (In Z-axis units, at the origin, down is positive)
-            *
-            * @property maxPedestal {Number}
-            * @default Infinity
-            */
-        this.maxPedestal = Infinity;
-        /**
-            * Max amount to allow scrolling maps up
-            * (In Z-axis units, at the origin, up is negative)
-            *
-            * @property minPedestal {Number}
-            * @default -Infinity
-            */
-        this.minPedestal = -Infinity;
-        /**
-            * Disable or re-enable user tilt/rotation.
-            *
-            * @property enableRotate {Boolean}
-            * @default true
-            */
-        this.enableRotate = true;
-        /**
-            * This is actually the minium distance the camera can get from it's anchor on the ground. May be worth changing if your map has very tall buildings to avoid the camera clipping through them.
-            *
-            * @property minZoom {Number}
-            * @default 375
-            */
-        this.minZoom = 375;
-        /**
-            * Maximum distance the camera can get from it's anchor on the ground. Setting this too high will result in parts of the map falling out of the camera's clipping plane and disappearing.
-            *
-            * @property maxZoom {Number}
-            * @default 10000
-            */
-        this.maxZoom = 10000;
-        /**
-            * Initial min zoom; zoom cannot be restricted beyond this.
-            *
-            * @property initialMinZoom {Number}
-            * @default 375
-            */
-        this.initialMinZoom = 375;
-        /**
-            * Initial max zoom; zoom cannot be restricted beyond this.
-            *
-            * @property initialMaxZoom {Number}
-            * @default 10000
-            */
-        this.initialMaxZoom = 10000;
-        /**
-            * ignoreZoomLimits; use with caution for special effects
-            * @default false
-            */
-        this.ignoreZoomLimits = false;
-        // Internal Documentation
-        this.minExpandedZoom = 375;
-        // Internal Documentation
-        this.maxExpandedZoom = 100000;
-        /**
-            * Multiplier for min and max zoom, for convenience.
-            *
-            * @property zoomFactor {Number}
-            * @default 1
-            */
-        this.zoomFactor = 1;
-        /**
-         * Constrains the camera from panning to far away from the scene. It's set automatically based on the size of the map.
-         * If you want to change anything, you probably want to change the margin property, which is the factor the min and max in
-         * each dimension are multiplied by to give the true bounds. For example, on a truely huge venue a 1.25 margin could get you
-         * way out into space when zoomed in.
-         *
-         * @property panBounds {Object}
-                @property panBounds.margin {Number} The factor the multiply the size of the geometery by to give the true camera bounds.
-                @property panBounds.min {Object} An x, y pair representing the bounds of one corner of the map.
-                @property panBounds.max {Object} An x, y pair representing the bounds of the other corner of the map.
-         */
-        this.panBounds = {
-                margin: 1.25,
-                min: {
-                        x: Infinity,
-                        y: Infinity,
-                },
-                max: {
-                        x: -Infinity,
-                        y: -Infinity,
-                },
-                center: {
-                        x: 0,
-                        y: 0,
-                },
-                radius: 200,
-        };
-        /**
-            * Minium camera tilt, in radians. If it's anything other than 0, you won't be able to look at the venue from the top down perspective.
-            *
-            * @property minTilt {Number}
-            * @default 0.0
-            */
-        this.minTilt = 0.0;
-        /**
-            * Minium camera tilt, in radians. If you set it too high, the camera will be able to tilt down through the geometery of the scene, which will produce clipping issues.
-            *
-            * @property maxTilt {Number}
-            * @default 1.2
-            */
-        this.maxTilt = 1.2;
-        /**
-         * If you would really prefer to pan with the right mouse button and tilt/rotate with the left, you can swap the values here to achieve that.
-         *
-         * @property mouseButtons {Object}
-                @property mouseButtons.ORBIT=MOUSE.RIGHT {MOUSE} The button to use for tilt/rotation. Defaults to `MOUSE.RIGHT`.
-                @property mouseButtons.ZOOM=MOUSE.MIDDLE {MOUSE} The button to use for zoom behaviour. Don't change this.
-                @property mouseButtons.PAN=MOUSE.LEFT {MOUSE} The button to use for panning the camera. Defaults to `MOUSE.LEFT`.
-         */
-        this.mouseButtons = {
-                ORBIT: MOUSE.RIGHT,
-                ZOOM: MOUSE.MIDDLE,
-                PAN: MOUSE.LEFT,
-        };
-        let scope = this;
-        let cameraPlaneGeometery = new PlaneGeometry(1000000, 1000000); // Should set this to be the map bounds later
-        let cameraPlaneMaterial = new MeshBasicMaterial({
-                color: 0x000000,
-                visible: false,
-        });
-        let cameraPlane = new Mesh(cameraPlaneGeometery, cameraPlaneMaterial);
-        let raycaster = new Raycaster();
-        scene.add(cameraPlane);
-        let STATE = {
-                NONE: -1,
-                ROTATE: 0,
-                DOLLY: 1,
-                PAN: 2,
-                WHEEL_ZOOM: 3,
-                TOUCH_TILT: 4,
-                TOUCH_DOLLY: 5,
-                TOUCH_PAN: 6,
-                MULTI: 7,
-                PEDESTAL: 8,
-                TOUCH_PEDESTAL: 9,
-        };
-        let state = STATE.NONE;
-        let mouse = new Vector2();
-        let touches = [];
-        let touchOrigin = { offsetLeft: 0, offsetTop: 0 };
-        let rotateStart = new Vector2();
-        let rotateEnd = new Vector2();
-        let rotateDelta = new Vector2();
-        let panStart = new Vector2();
-        let panCameraStart = new Vector2();
-        let panEnd = new Vector2();
-        let panDelta = new Vector3();
-        let floorAnchor = new Vector3();
-        let dollyStart = new Vector2();
-        let dollyEnd = new Vector2();
-        let dollyDelta = new Vector2();
-        let resetZoom = false; // Indicates whether to reset the camera position and zoom level when panning while mouse zooming
-        let zoomStart;
-        let clock = new Clock(true);
-        let lastWheelTime = 0;
-        // If true, the controls will not be limited by min and max values.
-        let stayInsideBounds = true;
-        let WHEEL_ZOOM_MULTIPLIER = 10000;
-        // var currentTween = null;
-        /**
-         * Camera events you can attach a listener to (with `controls.addListener(event, function)`), if you want to do certain things. They'll be fired both by touch events and by functions you can call yourself like pan() and tilt()/
-         *
-         * @property CAMERA_EVENTS {Object}
-         * @final
-            @property CAMERA_EVENTS.CHANGE_EVENT {Object} Fired whenever the camera changes.
-            @property CAMERA_EVENTS.PAN_START_EVENT {Object} Fired when the camera starts panning.
-            @property CAMERA_EVENTS.PAN_END_EVENT {Object} Fired when the camera finishes panning.
-            @property CAMERA_EVENTS.ROTATE_START_EVENT {Object} Fired when the camera starts rotating.
-            @property CAMERA_EVENTS.ROTATE_END_EVENT {Object} Fired when the camera stops rotating.
-            @property CAMERA_EVENTS.ZOOM_START_EVENT  {Object} Fired when the camera starts zooming.
-            @property CAMERA_EVENTS.ZOOM_END_EVENT {Object} Fired when the camera finishes zooming.
-            @property CAMERA_EVENTS.MULTI_START_EVENT {Object} Fired when the camera starts animating or you called setMulti. It means any one or more of pan, tilt, rotate and zoom could be changing. The individual pan/tilt/rotate/zoom events will NOT be fired.
-            @property CAMERA_EVENTS.MULTI_END_EVNT {Object} Fired when the camera stops animating, or has finished the setMulti call.
-             */
-        this.CAMERA_EVENTS = {};
-        this.CAMERA_EVENTS.CHANGE_EVENT = { type: 'change' };
-        this.CAMERA_EVENTS.PAN_START_EVENT = { type: 'panStart' };
-        this.CAMERA_EVENTS.PAN_END_EVENT = { type: 'panEnd' };
-        this.CAMERA_EVENTS.PEDESTAL_START_EVENT = { type: 'pedestalStart' };
-        this.CAMERA_EVENTS.PEDESTAL_CHANGE_EVENT = { type: 'pedestalChange' };
-        this.CAMERA_EVENTS.PEDESTAL_END_EVENT = { type: 'pedestalEnd' };
-        this.CAMERA_EVENTS.ROTATE_START_EVENT = { type: 'rotateStart' };
-        this.CAMERA_EVENTS.ROTATE_END_EVENT = { type: 'rotateEnd' };
-        this.CAMERA_EVENTS.ZOOM_START_EVENT = { type: 'zoomStart' };
-        this.CAMERA_EVENTS.ZOOM_END_EVENT = { type: 'zoomEnd' };
-        this.CAMERA_EVENTS.MULTI_START_EVENT = { type: 'multiStart' };
-        this.CAMERA_EVENTS.MULTI_END_EVENT = { type: 'multiEnd' };
-        this.CAMERA_EVENTS.MULTI_CANCEL_EVENT = { type: 'multiCancel' };
-        this.INTERACTION_EVENTS = {};
-        this.INTERACTION_EVENTS.USER_PAN_START_EVENT = { type: 'userPanStart' };
-        this.INTERACTION_EVENTS.USER_PEDESTAL_START_EVENT = {
-                type: 'userPedestalStart',
-        };
-        this.INTERACTION_EVENTS.USER_ROTATE_START_EVENT = { type: 'userRotateStart' };
-        this.INTERACTION_EVENTS.USER_DOLLY_START_EVENT = { type: 'userDollyStart' };
-        this.INTERACTION_EVENTS.USER_ZOOM_START_EVENT = { type: 'userZoomStart' };
-        this.INTERACTION_EVENTS.USER_TILT_START_EVENT = { type: 'userTiltStart' };
-        this.INTERACTION_EVENTS.USER_PAN_END_EVENT = { type: 'userPanEnd' };
-        this.INTERACTION_EVENTS.USER_PEDESTAL_END_EVENT = { type: 'userPedestalEnd' };
-        this.INTERACTION_EVENTS.USER_ROTATE_END_EVENT = { type: 'userRotateEnd' };
-        this.INTERACTION_EVENTS.USER_DOLLY_END_EVENT = { type: 'userDollyEnd' };
-        this.INTERACTION_EVENTS.USER_ZOOM_END_EVENT = { type: 'userZoomEnd' };
-        this.INTERACTION_EVENTS.USER_TILT_END_EVENT = { type: 'userTiltEnd' };
-        this.UPDATE_EVENTS = {};
-        this.UPDATE_EVENTS.POSITION_UPDATED_EVENT = { type: 'positionUpdated' };
-        this.UPDATE_EVENTS.ZOOM_UPDATED_EVENT = { type: 'zoomUpdated' };
-        this.UPDATE_EVENTS.TILT_UPDATED_EVENT = { type: 'tiltUpdated' };
-        this.UPDATE_EVENTS.ROTATION_UPDATED_EVENT = { type: 'rotationUpdated' };
-        let userInteracting = false;
-        const setUserInteracting = () => {
-                userInteracting = true;
-        };
-        const unsetUserInteracting = () => {
-                userInteracting = false;
-        };
-        for (let e in this.INTERACTION_EVENTS) {
-                const event = this.INTERACTION_EVENTS[e];
-                if (event.type.endsWith('Start')) {
-                        scope.dispatcher.addEventListener(event.type, setUserInteracting);
-                }
-        }
-        for (let e in this.INTERACTION_EVENTS) {
-                const event = this.INTERACTION_EVENTS[e];
-                if (event.type.endsWith('End')) {
-                        scope.dispatcher.addEventListener(event.type, unsetUserInteracting);
-                }
-        }
-        const dispatchPedestalChangeEvent = throttle(newZ => {
-                scope.dispatcher.dispatchEvent({
-                        ...scope.CAMERA_EVENTS.PEDESTAL_CHANGE_EVENT,
-                        pedestal: newZ,
-                        scrolledToTop: scope.scrolledToTop,
-                        scrolledToBottom: scope.scrolledToBottom,
-                        scrollPercent: scope.scrollPercent,
-                });
-        }, SCROLL_THROTTLE_MS);
-        this.addDebugControls = function (debugUI) {
-                debugUI.addDebugControls({
-                        CameraControls: [
-                                {
-                                        name: 'Stay Inside Bounds',
-                                        description: 'Ensure the camera stays inside its bounds.\n\n' +
-                                                'Caution: going too far outside-of-bounds may slow rendering' +
-                                                'significantly.',
-                                        control: new DebugUICheckbox({
-                                                current: true,
-                                                onValueChanged: stay => {
-                                                        stayInsideBounds = stay;
-                                                },
-                                        }),
-                                },
-                        ],
-                });
-        };
-        this.removeDebugControls = function (debugUI) {
-                debugUI.removeDebugControls({
-                        CameraControls: ['Stay Inside Bounds'],
-                });
-        };
-        /**
-            * Pans the camera right and down from the current position
-            *
-            * @method pan
-            * @param right {Number} The units to move right. Negative will pan left. This is in relation to the global coordinate system, not the current camera rotation.
-            * @param down {Number} The units to move down. Negative will pan up. This is in relation to the global coordinate system, not the current camera rotation.
-            */
-        this.pan = function (right, down) {
-                if (isNaN(right) || isNaN(down)) {
-                        return;
-                }
-                scope.setPosition(scope.orbit.position.x + right, scope.orbit.position.y + down);
-                scope.dispatcher.dispatchEvent(scope.UPDATE_EVENTS.POSITION_UPDATED_EVENT);
-        };
-        /**
-            * Sets the camera anchor to a specifc x/y positon, in the global reference frame. 0,0 will be roughly the middle of the map, and panBounds holds the min/max points.
-            *
-            * @method setPosition
-            * @param x {Number} The x position to move the camera to. +x will take you right, from the default camera rotation of 0.
-            * @param y {Number} The y position to move the camera to. +y will take you down (towards the viewer) in the default camera rotation of 0.
-            */
-        this.setPosition = function (x, y) {
-                if (isNaN(x) || isNaN(y)) {
-                        return;
-                }
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.PAN_START_EVENT);
-                }
-                const dx = x - scope.panBounds.center.x;
-                const dy = y - scope.panBounds.center.y;
-                const targetDistanceFromBounds = Math.sqrt(dx * dx + dy * dy);
-                if (stayInsideBounds && targetDistanceFromBounds > scope.panBounds.radius) {
-                        const angle = Math.atan2(dy, dx);
-                        const target = {
-                                x: Math.cos(angle) * scope.panBounds.radius + scope.panBounds.center.x,
-                                y: Math.sin(angle) * scope.panBounds.radius + scope.panBounds.center.y,
-                        };
-                        scope.orbit.position.x = target.x;
-                        scope.orbit.position.y = target.y;
-                }
-                else {
-                        scope.orbit.position.x = x;
-                        scope.orbit.position.y = y;
-                }
-                scope.dispatcher.dispatchEvent(scope.UPDATE_EVENTS.POSITION_UPDATED_EVENT);
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.CHANGE_EVENT);
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent(scope.this.CAMERA_EVENTS.PAN_END_EVENT);
-                }
-        };
-        /**
-            * Sets the rotation to a specific orientation, in radians. Mostly useful to orient the map a certain way for a physical directory.
-            *
-            * @method setRotation
-            * @param radians {Number} Absolute rotation to set the camera to, in radians. 0 in the starting point.
-            */
-        this.setRotation = function (radians) {
-                if (isNaN(radians)) {
-                        return;
-                }
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ROTATE_START_EVENT);
-                }
-                const newRotation = radians % TWO_PI;
-                if (newRotation !== scope.orbit.rotation.z) {
-                        scope.orbit.rotation.z = newRotation;
-                        scope.dispatcher.dispatchEvent(scope.UPDATE_EVENTS.ROTATION_UPDATED_EVENT);
-                }
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.CHANGE_EVENT);
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ROTATE_END_EVENT);
-                }
-        };
-        /**
-            * Rotates the camera a set number of radians relative to the current rotation. Useful for an idle rotation animation.
-            *
-            * @method rotate
-            * @param radians {Number} Number of radians to rotate the camera.
-            */
-        this.rotate = function (radians) {
-                if (isNaN(radians)) {
-                        return;
-                }
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ROTATE_START_EVENT);
-                }
-                const newRotation = (scope.orbit.rotation.z + radians) % TWO_PI;
-                if (newRotation !== scope.orbit.rotation.z) {
-                        scope.orbit.rotation.z = newRotation;
-                        scope.dispatcher.dispatchEvent(scope.UPDATE_EVENTS.ROTATION_UPDATED_EVENT);
-                }
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.CHANGE_EVENT);
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ROTATE_END_EVENT);
-                }
-        };
-        /**
-            * Sets the tilt to a specific level, in radians. 0 is top down. Bounded by minTilt and maxTilt.
-            *
-            * @method setTilt
-            * @param radians {Number} Tilt to set the camera to, in radians.
-            */
-        this.setTilt = function (radians) {
-                if (isNaN(radians)) {
-                        return;
-                }
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ROTATE_START_EVENT);
-                }
-                const newTilt = stayInsideBounds ? Math.max(Math.min(radians, scope.maxTilt), scope.minTilt) : radians;
-                if (newTilt !== scope.elevation.rotation.x) {
-                        scope.elevation.rotation.x = newTilt;
-                        scope.dispatcher.dispatchEvent(scope.UPDATE_EVENTS.TILT_UPDATED_EVENT);
-                }
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.CHANGE_EVENT);
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ROTATE_END_EVENT);
-                }
-        };
-        /**
-            * Tilts the camera up or down by some number of radians. Bounded by minTilt and maxTilt.
-            *
-            * @method tilt
-            * @param radians {Number} Number of radians to increase or decrease the current tilt by.
-            */
-        this.tilt = function (radians) {
-                if (isNaN(radians)) {
-                        return;
-                }
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ROTATE_START_EVENT);
-                }
-                const newTilt = stayInsideBounds
-                        ? Math.max(Math.min(radians + scope.getTilt(), scope.maxTilt), scope.minTilt)
-                        : radians + scope.getTilt();
-                if (newTilt !== scope.elevation.rotation.x) {
-                        scope.elevation.rotation.x = newTilt;
-                        scope.dispatcher.dispatchEvent(scope.UPDATE_EVENTS.TILT_UPDATED_EVENT);
-                }
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.CHANGE_EVENT);
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ROTATE_END_EVENT);
-                }
-        };
-        /**
-            * Sets the camera to be a certain distance from the anchor point, along it's tilt and rotation.
-            * Keeps it inside minZoom and maxZoom.
-            *
-            * @method setZoom
-            * @param zoom {Number} The distance to set the camera to.
-            */
-        this.setZoom = function (zoom) {
-                if (isNaN(zoom)) {
-                        return;
-                }
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ZOOM_START_EVENT);
-                }
-                let z = stayInsideBounds ? Math.min(Math.max(zoom, scope.getZoomScaledMin()), scope.getZoomScaledMax()) : zoom;
-                if (z !== scope.camera.position.z) {
-                        scope.camera.position.z = z;
-                        scope.dispatcher.dispatchEvent(scope.UPDATE_EVENTS.ZOOM_UPDATED_EVENT);
-                }
-                scope.camera.near = z / CAMERA_ZRANGE;
-                scope.camera.far = z * CAMERA_ZRANGE;
-                scope.camera.updateProjectionMatrix();
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.CHANGE_EVENT);
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ZOOM_END_EVENT);
-                }
-        };
-        /**
-            * Moves the camera towards or away from the camera by a set amount. Positive will zoom in (bringing the distance closer to 0).
-            *
-            * @method zoom
-            * @param zoom {Number} The distance to increase or decrease the zoom.
-            */
-        this.zoom = function (zoomDelta) {
-                if (isNaN(zoomDelta)) {
-                        return;
-                }
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ZOOM_START_EVENT);
-                }
-                let newZoom = scope.getZoom() - zoomDelta;
-                scope.camera.position.z = stayInsideBounds
-                        ? Math.min(Math.max(newZoom, scope.minZoom * scope.zoomFactor), scope.maxZoom * scope.zoomFactor)
-                        : newZoom;
-                scope.dispatcher.dispatchEvent(scope.UPDATE_EVENTS.ZOOM_UPDATED_EVENT);
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.CHANGE_EVENT);
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ZOOM_END_EVENT);
-                }
-        };
-        /**
-            * Zooms the camera in on the center of the current view.
-            *
-            * @method zoomIn
-            * @param duration
-            * @param curve
-            * @param callback
-            */
-        this.zoomIn = function (duration, curve, callback) {
-                let zoom = this.getZoom();
-                this.animateCamera({
-                        zoom: zoom / 1.5,
-                }, duration, curve, callback);
-        };
-        /**
-            * Zooms the camera out from the center of the current view.
-            *
-            * @method zoomOut
-            * @param duration
-            * @param curve
-            * @param callback
-            */
-        this.zoomOut = function (duration, curve, callback) {
-                let zoom = this.getZoom();
-                this.animateCamera({
-                        zoom: zoom * 1.5,
-                }, duration, curve, callback);
-        };
-        /**
-            * Expands the zoom limits to allow zooming to the specified distance.
-            *
-            * @method expandZoomLimits
-            * @param zoom {Number} The distance to allow zooming to.
-            * @param buffer {Number} The factor by which the user should be able to zoom beyond the specified distance.
-            */
-        this.expandZoomLimits = function (zoom, buffer) {
-                if (!buffer)
-                        buffer = 1.2;
-                if (zoom * buffer > scope.maxZoom) {
-                        scope.maxZoom = Math.min(zoom * buffer, scope.maxExpandedZoom);
-                }
-                if (zoom / buffer < scope.minZoom) {
-                        scope.minZoom = Math.max(zoom / buffer, scope.minExpandedZoom);
-                }
-        };
-        /**
-            * Restricts the zoom limits, but will not restrict beyond the current zoom level.
-            *
-            * @method restrictZoomLimits
-            * @param zoom {Number} The number to limit zooming to.
-            * @param buffer {Number} The factor by which the user should be able to zoom beyond the specified distance.
-            */
-        this.restrictZoomLimits = function (zoom, buffer) {
-                if (!buffer)
-                        buffer = 1.2;
-                if (zoom * buffer > scope.initialMaxZoom && zoom * buffer < scope.maxZoom) {
-                        scope.maxZoom = Math.max(scope.getZoom(), zoom * buffer);
-                }
-                if (zoom / buffer < scope.initialMinZoom && zoom / buffer > scope.minZoom) {
-                        scope.minZoom = Math.min(scope.getZoom(), zoom / buffer);
-                }
-        };
-        /**
-            * Returns the current camera position.
-            *
-            * @method getPosition
-            * @return {Object} An {x, y} object of the current camera postion.
-            */
-        this.getPosition = function () {
-                return {
-                        x: scope.orbit.position.x,
-                        y: scope.orbit.position.y,
-                        z: scope.orbit.position.z,
-                };
-        };
-        this.getPedestal = function () {
-                return scope.orbit.position.z;
-        };
-        function setPedestal(z) {
-                if (typeof z === 'number' && !isNaN(z)) {
-                        scope.orbit.position.z = z;
-                        core.tryRendering();
-                }
-        }
-        Object.defineProperty(this, 'setPedestal', {
-                enumerable: false,
-                value: setPedestal,
-        });
-        /**
-            * The amount the camera is shifted up/down
-            * (corresponds to scroll amount in multifloor mode)
-            * 100% == camera is as far up as it will go
-            * 0% == camera is as far down as it will go
-            */
-        Object.defineProperty(this, 'scrollPercent', {
-                get() {
-                        const min = this.minPedestal;
-                        const max = this.maxPedestal;
-                        let pedestal = this.getPedestal();
-                        pedestal = Math.min(pedestal, max);
-                        pedestal = Math.max(pedestal, min);
-                        const offset = pedestal - min;
-                        const portion = offset / (max - min);
-                        return portion * 100;
-                },
-        });
-        /**
-            * Returns whether the maps are scrolled to bottom
-            */
-        Object.defineProperty(this, 'scrolledToTop', {
-                get() {
-                        return this.maxPedestal === 0 || Math.ceil(this.getPedestal()) >= this.maxPedestal;
-                },
-        });
-        /**
-            * Returns whether the maps are scrolled to top
-            */
-        Object.defineProperty(this, 'scrolledToBottom', {
-                get() {
-                        return this.minPedestal === 0 || Math.floor(this.getPedestal()) <= this.minPedestal;
-                },
-        });
-        /**
-            * Returns the current camera rotation.
-            *
-            * @method getRotation
-            * @return {Number} The current rotation of the camera, in radians.
-            */
-        this.getRotation = function () {
-                return scope.orbit.rotation.z;
-        };
-        /**
-            * Returns the current camera tilt
-            *
-            * @method getTilt
-            * @return {Number} The current tilt of the camera, in radians.
-            */
-        this.getTilt = function () {
-                return scope.elevation.rotation.x;
-        };
-        /**
-            * Returns the current camera zoom
-            *
-            * @method getZoom
-            * @return {Number} The distance of the camera from the anchor.
-            */
-        this.getZoom = function () {
-                return scope.camera.position.z;
-        };
-        /**
-            * Returns true if the camera is currently moving (it's animating, the user is manipulating it).
-            *
-            * @method isCameraMoving
-            * @return {Boolean} True if the camera is moving, false otherwise.
-            */
-        this.isCameraMoving = function () {
-                return state != STATE.NONE;
-        };
-        /**
-            * Returns true if the the user is currently manipulating the camera.
-            *
-            * @method isUserInteracting
-            * @return {Boolean} True if the user is currently manipulating the camera, false otherwise.
-            */
-        this.isUserInteracting = function () {
-                return userInteracting;
-        };
-        /**
-            * Returns the actual zoom minimum based on real-world distance.
-            *
-            * @method getZoomScaledMin
-            * @return {Number} The actual zoom minimum in map units.
-            */
-        this.getZoomScaledMin = function () {
-                return scope.minZoom * scope.zoomFactor;
-        };
-        /**
-            * Returns the actual zoom maximum based on visible map size.
-            *
-            * @method getZoomScaledMax
-            * @return {Number} The actual zoom maximum in map units.
-            */
-        this.getZoomScaledMax = function () {
-                let min = scope.minZoom * scope.zoomFactor;
-                return Math.max(scope.maxZoom, 1.5 * min);
-        };
-        let isAnimating = function () {
-                return TWEEN.getAll().some(function (value) {
-                        return value._mMapAnimation;
-                });
-        };
-        const tweens = new Set();
-        function completeTween(tween) {
-                if (tween.isPlaying) {
-                        tween.stop();
-                }
-                else {
-                        tween.end();
-                }
-                tweens.delete(tween);
-        }
-        /**
-            * Cancel animation- for the new API
-            */
-        this.cancelAnimation = function () {
-                const tweensArray = Array.from(tweens);
-                let lastTween = tweensArray[tweensArray.length - 1];
-                // Make sure to emit an event if we are cancelling a tween
-                if (lastTween.state === STATE.MULTI) {
-                        scope.dispatcher.dispatchEvent({
-                                type: scope.CAMERA_EVENTS.MULTI_CANCEL_EVENT.type,
-                                message: {
-                                        zooming: true,
-                                        rotating: true,
-                                        tilting: true,
-                                },
-                        });
-                }
-                completeTween(lastTween);
-        };
-        /**
-         * Animates the camera from it's current position to the state specified in target. You only
-         * need to specify the properties you actually want to change.
-         *
-         * You can also specify a duration, animation curve, and a callback for when it's done.
-         *
-         * @method animateCamera
-         * @param target {Object} A list of optional parameters you can set that represent the camera state.
-                @param [target.position] {Object} An {x, y, z} object representing the position to move to.
-                @param [target.zoom] {Number} The zoom level to end at.
-                @param [target.tilt] {Number} The tilt to end at, in radians.
-                @param [target.rotation] {Number} The rotation to end at, in radians.
-                @param [target.doNotAutoStart=false] {Boolean} Set this to true if you want to start the tween yourself.
-         * @param [duration] {Number} The duration to animate the camera for, in ms.
-         * @param [curve] {Mappedin.Easing} The animation curve to use for the animation.
-         * @param [callback] {Function} A callback that will be executed when the animation is done.
-         * @param [options] {Object} An Options object
-         * @param [options.mode=cancel] {Object} Mode determines what happens when multiple animateCamera calls happen at once. By Default,
-                it will cancel and omit any previous animations. Set to "chain" to chain instead
-         *
-         * @return {Mappedin.Tween} The tween being used, if you want to do anything to control it manually. Do not overide it's events.
-         */
-        this.animateCamera = function (target, duration, curve, callback, options) {
-                const _options = { mode: CAMERA_CONTROL_OPTIONS.cancel, ...options };
-                let tweenStart = {};
-                let tweenEnd = {};
-                let position = scope.getPosition();
-                if (target.position != null) {
-                        if (target.position.x !== undefined) {
-                                tweenStart.x = position.x;
-                                tweenEnd.x = target.position.x;
-                        }
-                        if (target.position.y !== undefined) {
-                                tweenStart.y = position.y;
-                                tweenEnd.y = target.position.y;
-                        }
-                        if (target.position.z !== undefined) {
-                                tweenStart.z = position.z;
-                                tweenEnd.z = target.position.z;
-                        }
-                }
-                if (target.zoom !== undefined) {
-                        tweenStart.zoom = stayInsideBounds
-                                ? Math.min(Math.max(scope.getZoom(), scope.getZoomScaledMin()), scope.getZoomScaledMax())
-                                : scope.getZoom();
-                        if (scope.viewState === VIEW_STATE.MULTI_FLOOR || !stayInsideBounds) {
-                                tweenEnd.zoom = target.zoom;
-                        }
-                        else {
-                                tweenEnd.zoom = Math.min(Math.max(target.zoom, scope.getZoomScaledMin()), scope.getZoomScaledMax());
-                        }
-                }
-                if (target.rotation !== undefined) {
-                        tweenStart.rotation = scope.getRotation();
-                        const targetRotationMod2Pi = target.rotation % (2 * Math.PI);
-                        if (Math.abs(targetRotationMod2Pi - tweenStart.rotation) > Math.PI) {
-                                tweenEnd.rotation =
-                                        targetRotationMod2Pi < 0 ? 2 * Math.PI + targetRotationMod2Pi : -(2 * Math.PI - targetRotationMod2Pi);
-                        }
-                        else {
-                                tweenEnd.rotation = targetRotationMod2Pi;
-                        }
-                }
-                if (target.tilt !== undefined) {
-                        tweenStart.tilt = scope.getTilt();
-                        if (scope.viewState === VIEW_STATE.MULTI_FLOOR || !stayInsideBounds) {
-                                tweenEnd.tilt = target.tilt;
-                        }
-                        else {
-                                tweenEnd.tilt = Math.max(Math.min(target.tilt, scope.maxTilt), scope.minTilt);
-                        }
-                }
-                const zooming = tweenStart.zoom !== tweenEnd.zoom;
-                const rotating = tweenStart.rotation !== tweenEnd.rotation;
-                const tilting = tweenStart.tilting !== tweenEnd.tilting;
-                var tween = new TWEEN.Tween(tweenStart)
-                        .to(tweenEnd, process.env.TESTING ? 0 : duration)
-                        .onUpdate(function (between) {
-                        scope.setMulti({
-                                x: between.x,
-                                y: between.y,
-                                z: between.z,
-                        }, between.zoom, between.rotation, between.tilt);
-                })
-                        .onComplete(function () {
-                        // Why doesn't this dispatch scope.CAMERA_EVENTS.MULTI_END_EVENT..?
-                        if (callback) {
-                                callback();
-                        }
-                        completeTween(tween);
-                        scope.dispatcher.dispatchEvent({
-                                type: scope.CAMERA_EVENTS.MULTI_END_EVENT.type,
-                                message: {
-                                        zooming,
-                                        rotating,
-                                        tilting,
-                                },
-                        });
-                })
-                        .onStart(function () {
-                        if (state != STATE.MULTI) {
-                                state = STATE.MULTI;
-                                tween.state = STATE.MULTI;
-                                scope.dispatcher.dispatchEvent({
-                                        type: scope.CAMERA_EVENTS.MULTI_START_EVENT.type,
-                                        message: {
-                                                zooming,
-                                                rotating,
-                                                tilting,
-                                        },
-                                });
-                        }
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.CHANGE_EVENT);
-                });
-                // check for ongoing tweens
-                const tweensArray = Array.from(tweens);
-                let lastTween = tweensArray[tweensArray.length - 1];
-                let wait = false;
-                // if an ongoing tween exists, chain it to this new one, so it starts when that one ends
-                if (lastTween != null) {
-                        if (_options.mode === CAMERA_CONTROL_OPTIONS.chain) {
-                                wait = true;
-                                lastTween.chain(tween);
-                        }
-                        else {
-                                completeTween(lastTween);
-                                lastTween = null;
-                        }
-                }
-                tweens.add(tween);
-                if (curve) {
-                        tween.easing(curve);
-                }
-                else {
-                        tween.easing(TWEEN.Easing.Quadratic.In);
-                }
-                if (!target.doNotAutoStart && !wait) {
-                        tween.start();
-                        core.tryRendering();
-                }
-                tween._mMapAnimation = true;
-                return tween;
-        };
-        /**
-            * Allows you to set any of the Camera's position, zoom, rotation and tilt at once, with one function.
-            *
-            * @method setMulti
-            * @param [position] {Object} an {x, y, z} object representing the new position.
-            * @param [zoom] {Number} The new zoom distance.
-            * @param [rotation] {Number} The new rotation, in radians.
-            * @param [tilt] {Number} The new tilt, in radians.
-            */
-        this.setMulti = function (position, zoom, rotation, tilt) {
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.MULTI_START_EVENT);
-                }
-                let positionUpdated = false;
-                if (position != null) {
-                        if (position.x !== undefined && !isNaN(position.x)) {
-                                scope.orbit.position.x = position.x;
-                                positionUpdated = true;
-                        }
-                        if (position.y !== undefined && !isNaN(position.y)) {
-                                scope.orbit.position.y = position.y;
-                                positionUpdated = true;
-                        }
-                        if (position.z !== undefined && !isNaN(position.z)) {
-                                this.setPedestal(position.z);
-                        }
-                }
-                if (positionUpdated) {
-                        scope.dispatcher.dispatchEvent(scope.UPDATE_EVENTS.POSITION_UPDATED_EVENT);
-                }
-                const payload = { zooming: false, tilting: zoom, rotating: false };
-                if (zoom !== undefined && !isNaN(zoom)) {
-                        const targetZoom = stayInsideBounds
-                                ? Math.min(Math.max(zoom, scope.getZoomScaledMin()), scope.getZoomScaledMax())
-                                : zoom;
-                        if (targetZoom !== scope.camera.position.z) {
-                                payload.zooming = true;
-                                scope.camera.position.z = targetZoom;
-                                scope.dispatcher.dispatchEvent(scope.UPDATE_EVENTS.ZOOM_UPDATED_EVENT);
-                                // adjust camera near / far to prevent Z-fighting when extremely zoomed out
-                                // this is only likely to happen in multifloor views, when FOV is reduced
-                                if (scope.viewState === VIEW_STATE.MULTI_FLOOR) {
-                                        if (zoom > CAMERA_CLIPPING_RADIUS) {
-                                                scope.camera.near = zoom - CAMERA_CLIPPING_RADIUS;
-                                                scope.camera.far = zoom + CAMERA_CLIPPING_RADIUS;
-                                        }
-                                }
-                                else {
-                                        scope.camera.near = zoom / CAMERA_ZRANGE;
-                                        scope.camera.far = zoom * CAMERA_ZRANGE;
-                                }
-                                scope.camera.updateProjectionMatrix();
-                        }
-                }
-                if (rotation !== undefined && !isNaN(rotation)) {
-                        if (rotation !== scope.orbit.rotation.z) {
-                                payload.rotating = true;
-                                scope.orbit.rotation.z = rotation;
-                                scope.dispatcher.dispatchEvent(scope.UPDATE_EVENTS.ROTATION_UPDATED_EVENT);
-                        }
-                }
-                if (tilt !== undefined && !isNaN(tilt)) {
-                        const newTilt = stayInsideBounds ? Math.max(Math.min(tilt, scope.maxTilt), scope.minTilt) : tilt;
-                        if (newTilt !== scope.elevation.rotation.x) {
-                                payload.tilting = true;
-                                scope.elevation.rotation.x = newTilt;
-                                scope.dispatcher.dispatchEvent(scope.UPDATE_EVENTS.TILT_UPDATED_EVENT);
-                        }
-                }
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.CHANGE_EVENT);
-                if (state == STATE.NONE) {
-                        scope.dispatcher.dispatchEvent({
-                                type: scope.CAMERA_EVENTS.MULTI_END_EVENT.type,
-                                message: payload,
-                        });
-                }
-        };
-        function handleMouseDownRotate(event) {
-                rotateStart.set(event.clientX, event.clientY);
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ROTATE_START_EVENT);
-                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_ROTATE_START_EVENT);
-        }
-        function handleMouseDownDolly(event) {
-                dollyStart.set(event.clientX, event.clientY);
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ZOOM_START_EVENT);
-                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_DOLLY_START_EVENT);
-        }
-        function handleMouseDownPan() {
-                let pos = raycastToFloor(mouse);
-                panStart.set(pos.x, pos.y);
-                panCameraStart.set(scope.orbit.position.x, scope.orbit.position.y);
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.PAN_START_EVENT);
-                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_PAN_START_EVENT);
-        }
-        function handleMouseDownPedestal(event) {
-                const pos = { x: event.clientX, y: event.clientY };
-                scope.initialShiftPos = pos;
-                scope.initialPedestal = scope.getPedestal();
-                scope.pedestalScaleFactor = getProjectionScaleFactor(scope.camera.fov, scope.canvas.clientHeight, scope.getZoom());
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.PEDESTAL_START_EVENT);
-                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_PEDESTAL_START_EVENT);
-        }
-        function handleMouseMovePedestal(event) {
-                const pos = { x: event.clientX, y: event.clientY };
-                let newZ = scope.initialPedestal + scope.pedestalScaleFactor * (pos.y - scope.initialShiftPos.y);
-                // clamp to min/max
-                if (stayInsideBounds) {
-                        if (newZ < scope.minPedestal) {
-                                newZ = Math.max(newZ, scope.minPedestal);
-                        }
-                        else if (newZ > scope.maxPedestal) {
-                                newZ = Math.min(newZ, scope.maxPedestal);
-                        }
-                }
-                if (newZ === scope.getPedestal()) {
-                        return;
-                }
-                scope.setPedestal(newZ);
-                dispatchPedestalChangeEvent(newZ);
-        }
-        function handleMouseMoveRotate(event) {
-                rotateEnd.set(event.clientX, event.clientY);
-                rotateDelta.subVectors(rotateEnd, rotateStart);
-                scope.rotate(-rotateDelta.x / scope.rotateSpeed);
-                scope.setTilt(scope.getTilt() - rotateDelta.y / scope.rotateSpeed);
-                rotateStart.copy(rotateEnd);
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.CHANGE_EVENT);
-        }
-        function handleMouseMoveDolly(event) {
-                dollyEnd.set(event.clientX, event.clientY);
-                dollyDelta.subVectors(dollyEnd, dollyStart);
-                scope.setZoom(dollyDelta.y * scope.zoomSpeed);
-                dollyStart.copy(dollyEnd);
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.CHANGE_EVENT);
-        }
-        function handleMouseMovePan() {
-                let pos = raycastToFloor(mouse);
-                panEnd.set(pos.x, pos.y);
-                panDelta.subVectors(panEnd, panStart);
-                scope.setPosition(panCameraStart.x - panDelta.x, panCameraStart.y - panDelta.y);
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.CHANGE_EVENT);
-        }
-        this.getProjectionScaleFactor = getProjectionScaleFactor;
-        /**
-            * Anything we need to do after we render the camera, like update anchors for the mouse/touch controls.
-            *
-            * @method postRender
-            * @private
-            */
-        this.postRender = function () {
-                if (state == STATE.PAN || state == STATE.TOUCH_PAN) {
-                        raycaster.setFromCamera(mouse, camera);
-                        intersection = raycaster.intersectObject(cameraPlane, false)[0];
-                        if (intersection) {
-                                panStart.set(intersection.point.x, intersection.point.y);
-                                panCameraStart.set(scope.orbit.position.x, scope.orbit.position.y);
-                        }
-                }
-                if (state == STATE.WHEEL_ZOOM && resetZoom) {
-                        resetZoom = false;
-                        zoomStart = scope.getZoom();
-                        floorAnchor = raycastToFloor(mouse);
-                        panCameraStart.set(scope.orbit.position.x, scope.orbit.position.y);
-                }
-                if (state == STATE.MULTI && isAnimating() == false) {
-                        state = STATE.NONE;
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.MULTI_END_EVENT);
-                }
-        };
-        function scrollDelta(event) {
-                let delta = 0;
-                if (event.wheelDelta !== undefined) {
-                        // WebKit / Opera / Explorer 9
-                        delta = event.wheelDelta;
-                }
-                else if (event.detail !== undefined) {
-                        // Firefox
-                        delta = -event.detail;
-                }
-                return delta;
-        }
-        function canScrollZoom(event) {
-                let delta = scrollDelta(event);
-                let currentZoom = scope.getZoom();
-                return !((delta < 0 && currentZoom == scope.getZoomScaledMax()) ||
-                        (delta > 0 && currentZoom == scope.getZoomScaledMin()));
-        }
-        function handleMouseWheel(event) {
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ZOOM_START_EVENT);
-                if (!canScrollZoom(event)) {
-                        if (lastWheelTime > 0) {
-                                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ZOOM_END_EVENT);
-                        }
-                        lastWheelTime = 0;
-                        state = STATE.NONE;
-                        return;
-                }
-                let currentZoom = scope.getZoom();
-                let zoom = currentZoom - ((scrollDelta(event) * currentZoom) / WHEEL_ZOOM_MULTIPLIER) * scope.zoomSpeed;
-                scope.setZoom(zoom);
-                let zoomPercent = zoom / zoomStart;
-                panDelta.subVectors(floorAnchor, panCameraStart).multiplyScalar(1 - zoomPercent);
-                scope.setPosition(panCameraStart.x + panDelta.x, panCameraStart.y + panDelta.y);
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.CHANGE_EVENT);
-        }
-        function onMouseDown(event) {
-                if (scope.enabled === false)
-                        return;
-                mouseToScene(event);
-                event.preventDefault();
-                if (state == STATE.WHEEL_ZOOM) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ZOOM_END_EVENT);
-                }
-                if (event.button === scope.mouseButtons.ORBIT) {
-                        if (scope.enableRotate === false)
-                                return;
-                        handleMouseDownRotate(event);
-                        state = STATE.ROTATE;
-                }
-                else if (event.button === scope.mouseButtons.ZOOM) {
-                        if (scope.enableZoom === false)
-                                return;
-                        handleMouseDownDolly(event);
-                        state = STATE.DOLLY;
-                }
-                else if (event.button === scope.mouseButtons.PAN) {
-                        if (scope.enablePan) {
-                                handleMouseDownPan(event);
-                                state = STATE.PAN;
-                        }
-                        else if (scope.enablePedestal) {
-                                handleMouseDownPedestal(event);
-                                state = STATE.PEDESTAL;
-                        }
-                }
-                if (state !== STATE.NONE) {
-                        scope.canvas.addEventListener('mousemove', onMouseMove, false);
-                        window.addEventListener('mouseup', onMouseUp, false);
-                        window.addEventListener('mouseout', onMouseUp, false);
-                }
-        }
-        function onMouseMove(event) {
-                if (scope.enabled === false)
-                        return;
-                event.preventDefault();
-                mouseToScene(event);
-                if (state === STATE.ROTATE) {
-                        if (scope.enableRotate === false)
-                                return;
-                        handleMouseMoveRotate(event);
-                }
-                else if (state === STATE.DOLLY) {
-                        if (scope.enableZoom === false)
-                                return;
-                        handleMouseMoveDolly(event);
-                }
-                else if (state === STATE.PAN) {
-                        if (scope.enablePan === false)
-                                return;
-                        handleMouseMovePan(event);
-                }
-                else if (state === STATE.WHEEL_ZOOM) {
-                        resetZoom = true;
-                        state = STATE.NONE;
-                }
-                else if (state === STATE.PEDESTAL) {
-                        handleMouseMovePedestal(event);
-                }
-        }
-        function onMouseUp() {
-                if (scope.enabled === false)
-                        return;
-                document.removeEventListener('mousemove', onMouseMove, false);
-                window.removeEventListener('mouseup', onMouseUp, false);
-                window.removeEventListener('mouseout', onMouseUp, false);
-                switch (state) {
-                        case STATE.PAN:
-                                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.PAN_END_EVENT);
-                                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_PAN_END_EVENT);
-                                break;
-                        case STATE.DOLLY:
-                                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ZOOM_END_EVENT);
-                                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_DOLLY_END_EVENT);
-                                break;
-                        case STATE.ROTATE:
-                                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ROTATE_END_EVENT);
-                                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_ROTATE_END_EVENT);
-                                break;
-                        case STATE.PEDESTAL:
-                                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.PEDESTAL_END_EVENT);
-                                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_PEDESTAL_END_EVENT);
-                                break;
-                }
-                state = STATE.NONE;
-        }
-        let scrollTimer = null;
-        function onMouseWheel(event) {
-                if (scope.enabled === false || scope.enableZoom === false || (state !== STATE.NONE && state !== STATE.WHEEL_ZOOM))
-                        return;
-                event.preventDefault();
-                event.stopPropagation();
-                mouseToScene(event);
-                if (canScrollZoom(event)) {
-                        lastWheelTime = clock.getElapsedTime();
-                        scope.dispatchUserZoomEvent();
-                }
-                if (state != STATE.WHEEL_ZOOM && canScrollZoom(event)) {
-                        scope.canvas.addEventListener('mousemove', onMouseMove, false);
-                        state = STATE.WHEEL_ZOOM;
-                        zoomStart = scope.getZoom();
-                        floorAnchor = raycastToFloor(mouse);
-                        panCameraStart.set(scope.orbit.position.x, scope.orbit.position.y);
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ZOOM_START_EVENT);
-                }
-                if (scrollTimer != null) {
-                        clearTimeout(scrollTimer);
-                }
-                scrollTimer = setTimeout(() => {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ZOOM_END_EVENT);
-                }, 50);
-                handleMouseWheel(event);
-        }
-        function handleTouchStartPan(event) {
-                let pos = raycastToFloor(event.x ? event : touches[0]);
-                panStart.set(pos.x, pos.y);
-                panCameraStart.set(scope.orbit.position.x, scope.orbit.position.y);
-                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_PAN_START_EVENT);
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.PAN_START_EVENT);
-        }
-        function handleTouchMovePan(event) {
-                let pos = raycastToFloor(event.x ? event : touches[0]);
-                panEnd.set(pos.x, pos.y);
-                panDelta.subVectors(panEnd, panStart);
-                scope.setPosition(panCameraStart.x - panDelta.x, panCameraStart.y - panDelta.y);
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.CHANGE_EVENT);
-        }
-        function handleTouchStartDolly() {
-                scope.touchInputs = new InputSet(touches[0], touches[1]);
-                let dx = touches[0].x - touches[1].x;
-                let dy = touches[0].y - touches[1].y;
-                zoomStart = scope.getZoom();
-                let pos = { x: touches[0].x - dx / 2, y: touches[0].y - dy / 2 };
-                floorAnchor = raycastToFloor(pos);
-                scope.orbit.updateMatrixWorld();
-                scope.touchAnchor1 = new TouchAnchor(touches[0], scope.camera, cameraPlane);
-                scope.touchAnchor2 = new TouchAnchor(touches[1], scope.camera, cameraPlane);
-                panCameraStart.set(scope.orbit.position.x, scope.orbit.position.y);
-                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_DOLLY_START_EVENT);
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.MULTI_START_EVENT);
-        }
-        function handleTouchMoveDolly() {
-                scope.touchInputs.update(touches[0], touches[1]);
-                const first = scope.touchInputs.first;
-                const second = scope.touchInputs.second;
-                scope.touchAnchor1.viewCoordinate = { x: first.x, y: first.y };
-                scope.touchAnchor2.viewCoordinate = { x: second.x, y: second.y };
-                let newMatrix = makeTransformFromTouchAnchors(scope.touchAnchor1, scope.touchAnchor2);
-                if (newMatrix) {
-                        setCameraFromTransformMatrix(newMatrix);
-                }
-                scope.orbit.updateMatrixWorld();
-                scope.touchAnchor1.updateAnchorState(scope.camera, first);
-                scope.touchAnchor2.updateAnchorState(scope.camera, second);
-        }
-        function handleTouchStartTilt(event) {
-                rotateStart.set(event.touches[1].clientX, event.touches[1].clientY);
-                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_TILT_START_EVENT);
-                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ROTATE_START_EVENT);
-        }
-        function handleTouchMoveTilt(event) {
-                rotateEnd.set(event.touches[1].clientX, event.touches[1].clientY);
-                rotateDelta.subVectors(rotateEnd, rotateStart);
-                scope.setTilt(scope.getTilt() - rotateDelta.y / scope.rotateSpeed);
-                rotateStart.copy(rotateEnd);
-        }
-        function handleTouchStartPedestal(event) {
-                handleMouseDownPedestal(event.touches[0]);
-        }
-        function handleTouchMovePedestal(event) {
-                handleMouseMovePedestal(event.touches[0]);
-        }
-        function handleTouchEnd() {
-                if (state === STATE.TOUCH_TILT || state === STATE.TOUCH_DOLLY) {
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.MULTI_END_EVENT);
-                }
-        }
-        function onTouchStart(event) {
-                if (scope.enabled === false)
-                        return;
-                updateTouchOrigin(event);
-                touchToScene(event);
-                switch (event.touches.length) {
-                        case 1: // one-fingered touch: pan/pedestal
-                                // note - they are mutually exclusive as they use the same event
-                                // pedestal takes precedence
-                                if (scope.enablePedestal) {
-                                        handleTouchStartPedestal(event);
-                                        state = STATE.TOUCH_PEDESTAL;
-                                }
-                                else if (scope.enableRotate) {
-                                        handleTouchStartPan(event);
-                                        state = STATE.TOUCH_PAN;
-                                }
-                                break;
-                        case 2: // two-fingered touch: dolly
-                                if (scope.enableZoom === false)
-                                        return;
-                                handleTouchStartDolly(event);
-                                state = STATE.TOUCH_DOLLY;
-                                break;
-                        case 3: // three-fingered touch: tilt
-                                if (scope.enablePan === false)
-                                        return;
-                                handleTouchStartTilt(event);
-                                state = STATE.TOUCH_TILT;
-                                break;
-                        default:
-                                state = STATE.NONE;
-                }
-                if (state !== STATE.NONE) {
-                        // Probably don't need to do anything
-                }
-        }
-        function onTouchMove(event) {
-                if (scope.enabled === false)
-                        return;
-                event.preventDefault();
-                event.stopPropagation();
-                touchToScene(event);
-                switch (event.touches.length) {
-                        case 3: // one-fingered touch: rotate
-                                if (scope.enableRotate === false)
-                                        return;
-                                if (state !== STATE.TOUCH_TILT)
-                                        return;
-                                handleTouchMoveTilt(event);
-                                break;
-                        case 2: // two-fingered touch: zoom
-                                if (scope.enableZoom === false)
-                                        return;
-                                if (state !== STATE.TOUCH_DOLLY)
-                                        return;
-                                handleTouchMoveDolly(event);
-                                break;
-                        case 1: // One-fingered touch: pan/pedestal
-                                if (scope.enablePedestal && state === STATE.TOUCH_PEDESTAL) {
-                                        handleTouchMovePedestal(event);
-                                }
-                                else if (scope.enablePan && state === STATE.TOUCH_PAN) {
-                                        handleTouchMovePan(event);
-                                }
-                                break;
-                        default:
-                                state = STATE.NONE;
-                }
-        }
-        function onTouchEnd(event) {
-                if (scope.enabled === false)
-                        return;
-                handleTouchEnd(event);
-                switch (state) {
-                        case STATE.PAN:
-                        case STATE.TOUCH_PAN:
-                                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_PAN_END_EVENT);
-                                break;
-                        case STATE.TOUCH_TILT:
-                                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.PAN_END_EVENT);
-                                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_TILT_END_EVENT);
-                                break;
-                        case STATE.DOLLY:
-                        case STATE.TOUCH_DOLLY:
-                                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ZOOM_END_EVENT);
-                                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_DOLLY_END_EVENT);
-                                break;
-                        case STATE.ROTATE:
-                                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ROTATE_END_EVENT);
-                                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_ROTATE_END_EVENT);
-                                break;
-                        case STATE.PEDESTAL:
-                        case STATE.TOUCH_PEDESTAL:
-                                scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.PEDESTAL_END_EVENT);
-                                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_PEDESTAL_END_EVENT);
-                                break;
-                }
-                state = STATE.NONE;
-        }
-        function onContextMenu(event) {
-                event.preventDefault();
-        }
-        function differenceBetweenAngles(a, b) {
-                return ((b - a + Math.PI) % (Math.PI * 2)) + ((Math.PI * 2) % (Math.PI * 2)) - Math.PI;
-        }
-        function makeTransformFromTouchAnchors(touchAnchor1, touchAnchor2) {
-                scope.orbit.updateMatrixWorld();
-                scope.camera.updateProjectionMatrix();
-                let p = scope.camera.projectionMatrix.clone();
-                let w1 = touchAnchor1.worldCoordinate;
-                let w2 = touchAnchor2.worldCoordinate;
-                let nw1 = touchAnchor1.reUnproject();
-                let nw2 = touchAnchor2.reUnproject();
-                if (!nw1 || !nw2) {
-                        return null;
-                }
-                let s1 = touchAnchor1.viewCoordinate;
-                let s2 = touchAnchor2.viewCoordinate;
-                let xd1 = w2.x - w1.x;
-                let yd1 = w2.y - w1.y;
-                let angle1 = Math.atan2(yd1, xd1);
-                let xd2 = nw2.x - nw1.x;
-                let yd2 = nw2.y - nw1.y;
-                let angle2 = Math.atan2(yd2, xd2);
-                let zAngleDelta = differenceBetweenAngles(angle1, angle2);
-                let yawAdjustment = new Matrix4();
-                yawAdjustment.makeRotationZ(-zAngleDelta);
-                let t = yawAdjustment.clone();
-                t.multiply(touchAnchor1.snapHolderMatrix);
-                // Matrix subscript helper
-                let m = (o, a, b) => o.elements[(a - 1) * 4 + b - 1];
-                let x1 = m(p, 1, 1) * m(t, 1, 1) - s1.x * m(p, 3, 4) * m(t, 3, 1);
-                let y1 = m(p, 1, 1) * m(t, 1, 2) - s1.x * m(p, 3, 4) * m(t, 3, 2);
-                let z1 = m(p, 1, 1) * m(t, 1, 3) - s1.x * m(p, 3, 4) * m(t, 3, 3);
-                let c1 = w1.x * x1 + w1.y * y1 + w1.z * z1;
-                let x2 = m(p, 2, 2) * m(t, 2, 1) - s1.y * m(p, 3, 4) * m(t, 3, 1);
-                let y2 = m(p, 2, 2) * m(t, 2, 2) - s1.y * m(p, 3, 4) * m(t, 3, 2);
-                let z2 = m(p, 2, 2) * m(t, 2, 3) - s1.y * m(p, 3, 4) * m(t, 3, 3);
-                let c2 = w1.x * x2 + w1.y * y2 + w1.z * z2;
-                let x3 = m(p, 1, 1) * m(t, 1, 1) - s2.x * m(p, 3, 4) * m(t, 3, 1);
-                let y3 = m(p, 1, 1) * m(t, 1, 2) - s2.x * m(p, 3, 4) * m(t, 3, 2);
-                let z3 = m(p, 1, 1) * m(t, 1, 3) - s2.x * m(p, 3, 4) * m(t, 3, 3);
-                let c3 = w2.x * x3 + w2.y * y3 + w2.z * z3;
-                let xb = m(p, 2, 2) * m(t, 2, 1) - s2.y * m(p, 3, 4) * m(t, 3, 1);
-                let yb = m(p, 2, 2) * m(t, 2, 2) - s2.y * m(p, 3, 4) * m(t, 3, 2);
-                let zb = m(p, 2, 2) * m(t, 2, 3) - s2.y * m(p, 3, 4) * m(t, 3, 3);
-                let cb = w2.x * xb + w2.y * yb + w2.z * zb;
-                let dx1 = Math.abs(x3 - x1);
-                let dy1 = Math.abs(y3 - y1);
-                let dz1 = Math.abs(z3 - z1);
-                let dx2 = Math.abs(x3 - x2);
-                let dy2 = Math.abs(y3 - y2);
-                let dz2 = Math.abs(z3 - z2);
-                let dx3 = Math.abs(xb - x1);
-                let dy3 = Math.abs(yb - y1);
-                let dz3 = Math.abs(zb - z1);
-                let dx4 = Math.abs(xb - x2);
-                let dy4 = Math.abs(yb - y2);
-                let dz4 = Math.abs(zb - z2);
-                let min1 = Math.min(dx1 + dy1 + dz1, dx2 + dy2 + dz2);
-                let min2 = Math.min(dx3 + dy3 + dz3, dx4 + dy4 + dz4);
-                if (min1 < min2) {
-                        x3 = xb;
-                        y3 = yb;
-                        z3 = zb;
-                        c3 = cb;
-                }
-                let x4 = x2 * z1 - x1 * z2;
-                let y4 = y2 * z1 - y1 * z2;
-                let c4 = c2 * z1 - c1 * z2;
-                let x5 = x3 * z2 - x2 * z3;
-                let y5 = y3 * z2 - y2 * z3;
-                let c5 = c3 * z2 - c2 * z3;
-                let x = (c5 * y4 - c4 * y5) / (x5 * y4 - x4 * y5);
-                let y = (c5 * x4 - c4 * x5) / (y5 * x4 - y4 * x5);
-                let y6 = y2 * x1 - y1 * x2;
-                let z6 = z2 * x1 - z1 * x2;
-                let c6 = c2 * x1 - c1 * x2;
-                let y7 = y3 * x2 - y2 * x3;
-                let z7 = z3 * x2 - z2 * x3;
-                let c7 = c3 * x2 - c2 * x3;
-                let z = (c7 * y6 - c6 * y7) / (z7 * y6 - z6 * y7);
-                let finalTransformMatrix = t.clone();
-                finalTransformMatrix.elements[12] = x;
-                finalTransformMatrix.elements[13] = y;
-                finalTransformMatrix.elements[14] = z;
-                if (z > 0) {
-                        return finalTransformMatrix;
-                }
-                else {
-                        return null;
-                }
-        }
-        function setCameraFromTransformMatrix(transform) {
-                scope.orbit.updateMatrixWorld();
-                let newAngle = new Euler();
-                newAngle.setFromRotationMatrix(transform, 'ZYX');
-                let zoom = transform.elements[14] / Math.cos(newAngle.x);
-                let rotation = newAngle.z;
-                let vectorToGround = new Vector3(0, 0, 1);
-                vectorToGround.applyEuler(newAngle);
-                vectorToGround.setLength(zoom);
-                let groundPosition = new Vector3();
-                groundPosition.setFromMatrixPosition(transform);
-                groundPosition.sub(vectorToGround);
-                scope.setPosition(groundPosition.x, groundPosition.y);
-                scope.setZoom(zoom);
-                scope.setRotation(rotation);
-        }
-        function getMousePos(canvas, evt) {
-                return {
-                        x: evt.offsetX,
-                        y: evt.offsetY,
-                };
-        }
-        function getTouchPos(canvas, touch) {
-                return {
-                        x: touch.clientX - touchOrigin.offsetLeft,
-                        y: touch.clientY - touchOrigin.offsetTop,
-                };
-        }
-        function updateTouchOrigin(event) {
-                let touchOriginElement = scope.canvas;
-                touchOrigin.offsetLeft = touchOriginElement.getBoundingClientRect().left;
-                touchOrigin.offsetTop = touchOriginElement.getBoundingClientRect().top;
-        }
-        function raycastToFloor(pos) {
-                raycaster.setFromCamera(pos, camera);
-                let intersection = raycaster.intersectObject(cameraPlane, false)[0];
-                if (intersection) {
-                        return intersection.point;
-                }
-                else {
-                        return new Vector3();
-                }
-        }
-        function mouseToScene(event) {
-                let pos = getMousePos(scope.canvas, event);
-                mouse.x = (pos.x / scope.canvas.width) * core.resolutionScale * 2 - 1;
-                mouse.y = -((pos.y / scope.canvas.height) * core.resolutionScale) * 2 + 1;
-                return mouse;
-        }
-        function touchToScene(event) {
-                touches = [];
-                for (let i = 0, iLen = event.touches.length; i < iLen; i++) {
-                        let touch = event.touches[i];
-                        let pos = getTouchPos(scope.canvas, touch);
-                        touches.push(new Vector2((pos.x / scope.canvas.width) * core.resolutionScale * 2 - 1, -((pos.y / scope.canvas.height) * core.resolutionScale) * 2 + 1));
-                }
-                mouse = touches[0];
-        }
-        /**
-            * Should probably be "pre-render". Anything we need to do before rendering the scene.
-            *
-            * @method update
-            * @private
-            */
-        this.update = function () {
-                TWEEN.update();
-                if (lastWheelTime > 0 && state == STATE.WHEEL_ZOOM && clock.getElapsedTime() - lastWheelTime > 0.2) {
-                        lastWheelTime = 0;
-                        state = STATE.NONE;
-                        scope.dispatcher.dispatchEvent(scope.CAMERA_EVENTS.ZOOM_END_EVENT);
-                        scope.canvas.removeEventListener('mousemove', onMouseMove, false);
-                }
-        };
-        let isUserZooming = false;
-        this.dispatchUserZoomDebounced = debounce(() => {
-                // dispatch user zoom end
-                isUserZooming = false;
-                scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_ZOOM_END_EVENT);
-        }, 250);
-        this.dispatchUserZoomEvent = function () {
-                if (isUserZooming) {
-                        scope.dispatchUserZoomDebounced();
-                }
-                else {
-                        scope.dispatcher.dispatchEvent(scope.INTERACTION_EVENTS.USER_ZOOM_START_EVENT);
-                        isUserZooming = true;
-                        scope.dispatchUserZoomDebounced();
-                }
-        };
-        /**
-            * Disposes of the camera and all of it's events.
-            *
-            * @method dispose
-            * @private
-            */
-        this.dispose = function () {
-                for (let e in this.INTERACTION_EVENTS) {
-                        const event = this.INTERACTION_EVENTS[e];
-                        if (event.type.endsWith('Start')) {
-                                scope.dispatcher.removeEventListener(event.type, setUserInteracting);
-                        }
-                }
-                for (let e in this.INTERACTION_EVENTS) {
-                        const event = this.INTERACTION_EVENTS[e];
-                        if (event.type.endsWith('End')) {
-                                scope.dispatcher.removeEventListener(event.type, unsetUserInteracting);
-                        }
-                }
-                scope.canvas.removeEventListener('contextmenu', onContextMenu, false);
-                scope.canvas.removeEventListener('mousedown', onMouseDown, false);
-                scope.canvas.removeEventListener('wheel', onMouseWheel, { passive: false });
-                scope.canvas.removeEventListener('touchstart', onTouchStart, false);
-                scope.canvas.removeEventListener('touchend', onTouchEnd, false);
-                scope.canvas.removeEventListener('touchmove', onTouchMove, false);
-                scope.canvas.removeEventListener('mousemove', onMouseMove, false);
-                window.removeEventListener('mouseup', onMouseUp, false);
-                window.removeEventListener('mouseout', onMouseUp, false);
-                scene.remove(cameraPlane);
-                scope.dispatcher._listeners = {};
-        };
-        this.canvas.addEventListener('contextmenu', onContextMenu, false);
-        this.canvas.addEventListener('mousedown', onMouseDown, false);
-        this.canvas.addEventListener('wheel', onMouseWheel, { passive: false });
-        this.canvas.addEventListener('touchstart', onTouchStart, false);
-        this.canvas.addEventListener('touchend', onTouchEnd, false);
-        this.canvas.addEventListener('touchmove', onTouchMove, false);
-};
-export default CameraControls;
-
-import { Color, DepthTexture, Mesh, Vector2, NearestFilter, OrthographicCamera, PlaneBufferGeometry, RGBAFormat, Scene, ShaderMaterial, UnsignedIntType, WebGLRenderTarget, WebGL1Renderer, WebGLRenderer, DepthStencilFormat, sRGBEncoding, } from 'three';
-import { CAMERA_LAYER, RENDER } from '@mappedin/mappedin-js/renderer/internal';
-import CompositeVertexShader from '@mappedin/mappedin-js/renderer/internal/shaders/Mappedin.Composite.Vertex.glsl';
-import CompositeFragmentShader from '@mappedin/mappedin-js/renderer/internal/shaders/Mappedin.Composite.Fragment.glsl';
-import Stats from 'stats.js';
-import Logger from '@mappedin/mappedin-js/--/common/Mappedin.Logger';
-let SHOW_FPS = false;
-let stats;
-if (SHOW_FPS) {
-        stats = new Stats();
-        stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
-        document.body.appendChild(stats.dom);
-}
-/**
-    * A class that controls the rendering resources for a canvas output.
-    *
-    * @class Renderer
-    * @private
-    */
-export default class Renderer {
-        /**
-            * 	@constructor
-            *	@param renderOptions {Object} Options for rendering
-            *	@param [options.multiBufferRendering=false] {boolean}
-            *		Whether to use a multi-buffer renderer
-            *	@param [options.alpha=true] {boolean}
-            *		If true, will allow for a semi-transparent background
-            *	@param [options.antialias=false] {boolean}
-            *		If true, will attempt to antialias rendering if supported
-            *	@param [options.backgroundColor='#ffffff'] {Color | string}
-            *		The color that will be displayed behind the scene
-            *	@param [options.backgroundAlpha=1.0] {number}
-            *		The opacity of the background color
-            *	@param [options.onWebGLContextCreationError=null] {function}
-            *		A callback that will be triggered if WebGL context creation fails
-            *	@param [options.onWebGLContextLost=null] {function}
-            *		A callback that will be triggered if the WebGL context is killed
-            *	@param [options.onWebGLContextRestored=null] {function}
-            *		A callback that will be triggered when three.js reacquires a WebGL context
-            *	@param [options.onWebGLRendererError=null] {function}
-            *		A callback that will be triggered if the renderer throws an error
-            */
-        constructor(renderOptions) {
-                renderOptions.multiBufferRendering = renderOptions.multiBufferRendering || false;
-                this.contextLost = false;
-                this.implementation = renderOptions.multiBufferRendering
-                        ? new MultiBufferRenderer(renderOptions)
-                        : new SingleBufferRenderer(renderOptions);
-                this.implementation = this.getRenderer(renderOptions);
-                this.onWebGLContextCreationError = renderOptions.onWebGLContextCreationError;
-                this.onWebGLContextLost = renderOptions.onWebGLContextLost;
-                this.onWebGLContextRestored = renderOptions.onWebGLContextRestored;
-                this.webGLContextCreationErrorListener = this.domElement().addEventListener('webglcontextcreationerror', e => this.reportWebGlContextCreationError(e));
-                this.webGLContextLostListener = this.domElement().addEventListener('webglcontextlost', e => this.reportWebGlContextLost(e));
-                this.webGLContextRestoredListener = this.domElement().addEventListener('webglcontextrestored', e => this.reportWebGLContextRestored(e));
-                let backgroundColor = renderOptions.backgroundColor;
-                if (typeof backgroundColor === 'string') {
-                        backgroundColor = new Color(renderOptions.backgroundColor);
-                }
-                if (backgroundColor == null) {
-                        backgroundColor = new Color('#ffffff');
-                }
-                let backgroundAlpha = renderOptions.backgroundAlpha;
-                if (backgroundAlpha == null) {
-                        backgroundAlpha = 1.0;
-                }
-                this.shouldConsiderAlpha = renderOptions.alpha || false;
-                this.antialias = renderOptions.antialias || false;
-                this.setBackgroundColor(backgroundColor, backgroundAlpha);
-        }
-        /**
-            * Dispose of any resources and connections allocated by the renderer.
-            *
-            * @method destroy
-            */
-        destroy() {
-                this.domElement().removeEventListener('webglcontextcreationerror', this.webGLContextCreationErrorListener);
-                this.domElement().removeEventListener('webglcontextlost', this.webGLContextLostListener);
-                this.domElement().removeEventListener('webglcontextrestored', this.webGLContextRestoredListener);
-                this.implementation.destroy();
-        }
-        /**
-            * Render the scene to the provided framebuffer. A null framebuffer will
-            * render to the default canvas.
-            *
-            * @method render
-            * @param renderTask {RENDER}
-            * @param renderTarget {null or WebGLRenderTarget}
-            * @param scene {Scene}
-            * @param sceneCamera {Camera}
-            */
-        render(renderTask, renderTarget, scene, sceneCamera) {
-                this.implementation.render(renderTask, renderTarget, scene, sceneCamera);
-        }
-        /**
-            * Return the maximum supported anisotropy of this renderer.
-            *
-            * @method getMaxAnisotropy
-            * @return {number}
-            */
-        getMaxAnisotropy() {
-                return this.implementation.renderer.capabilities.getMaxAnisotropy();
-        }
-        /**
-            * Return the size of the renderer's target.
-            *
-            * @method getBufferSize
-            * @return {Vector2}
-            */
-        getBufferSize() {
-                return this.implementation.renderer.getSize(new Vector2());
-        }
-        /**
-            * Return the WebGL context associated with this renderer, to ensure
-            * other objects that use WebGL will put their textures in the same
-            * context.
-            *
-            * @method context
-            * @return {WebGLRenderingContext} context used by this renderer
-            */
-        getContext() {
-                return this.implementation.renderer.getContext();
-        }
-        /**
-            * Preload a texture, I think. Not actually sure what this does. TODO.
-            *
-            * @method preloadTexture
-            * @param texture {Texture}
-            */
-        preloadTexture(texture) {
-                this.implementation.renderer.initTexture(texture);
-        }
-        /**
-            * Set the renderer and all its internal buffers to the provided width and
-            * height in pixels.
-            *
-            * @method setBufferSize
-            * @param width {number}
-            * @param height {number}
-            */
-        setBufferSize(width, height) {
-                this.implementation.setBufferSize(width, height);
-        }
-        get backgroundColor() {
-                return this.implementation.backgroundColor;
-        }
-        get backgroundAlpha() {
-                return this.implementation.backgroundAlpha;
-        }
-        /**
-            * Set the color and opacity that will be drawn behind the scene.
-            *
-            * @method setBackgroundColor
-            * @param color {Color}
-            * @param alpha {number}
-            */
-        setBackgroundColor(color, alpha) {
-                if (!this.shouldConsiderAlpha) {
-                        alpha = 1.0;
-                }
-                alpha = alpha !== undefined ? +alpha : 1.0;
-                alpha = alpha >= 0.0 && alpha <= 1.0 ? alpha : 1.0;
-                this.implementation.setBackgroundColor(color, alpha);
-        }
-        /**
-            * Assign an outdoor context to this renderer, which will be included as
-            * part of the `STATIC` rendering pass.
-            *
-            * @method setMapboxOutdoorContext
-            * @param {MapboxOutdoorContext} mapboxOutdoorContext context to draw
-            */
-        setMapboxOutdoorContext(mapboxOutdoorContext) {
-                this.implementation.setMapboxOutdoorContext(mapboxOutdoorContext);
-        }
-        // Return the DOM element to which this renderer will render when provided
-        // a `null` `renderTarget` in the `render` method. You can position this
-        // DOM element and add it to the DOM as you see fit.
-        domElement() {
-                return this.implementation.renderer.domElement;
-        }
-        // Return true if this renderer is available to use for rendering. If false,
-        // this means that the context is currently lost, or the renderer failed to
-        // initialize.
-        isAvailable() {
-                return this.implementation.renderer != null && !this.contextLost;
-        }
-        // Temporary solution until https://github.com/mrdoob/three.js/issues/12447 is addressed
-        disposeOfRenderLists() {
-                this.implementation.renderer.renderLists.dispose();
-        }
-        reportWebGlContextCreationError(e) {
-                if (this.onWebGLContextCreationError) {
-                        this.onWebGLContextCreationError(e);
-                }
-        }
-        reportWebGlContextLost(e) {
-                e.preventDefault();
-                if (this.onWebGLContextLost) {
-                        this.onWebGLContextLost(e);
-                }
-                this.contextLost = true;
-        }
-        reportWebGLContextRestored() {
-                if (this.onWebGLContextRestored) {
-                        this.onWebGLContextRestored();
-                }
-                this.contextLost = false;
-        }
-        /**
-            * Sometimes we have to use WebGL 1 because of a regression in Chrome
-            * due to some unknown performance bug in Apple's OpenGL Angle backend on MacBook+Radeon GPU.
-            * The official recommendation is to turn on Metal backed ANGLE in your Chrome's about:flags.
-            * We can't force our users to do it, so we have to support both WebGL 1 & WebGL 2
-            * See: https://bugs.chromium.org/p/chromium/issues/detail?id=1245448
-            * The Method returns target WebGL version based on the hardware configuration.
-            *
-            * @param context WebGL context
-            * @returns {1|2} WebGL version
-            */
-        getTargetWebGLVersion(context) {
-                const webkit = /(AppleWebKit)/.test(navigator.userAgent);
-                const macOS = /(Mac)/.test(navigator.platform);
-                const debugInfo = context.getExtension('WEBGL_debug_renderer_info');
-                const problemGPUsRegexp = /radeon\spro\s4\d\d|radeon\spro\s5\d\d/i;
-                const problemGPUs = problemGPUsRegexp.test(context.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL));
-                return webkit && macOS && problemGPUs ? 1 : 2;
-        }
-        /**
-            *
-            * @param options
-            * @returns {SingleBufferRenderer|MultiBufferRenderer}
-            */
-        getRenderer(options) {
-                const BufferRenderer = options.multiBufferRendering ? MultiBufferRenderer : SingleBufferRenderer;
-                const bufferRenderer = new BufferRenderer(options);
-                const targetWebGLVersion = this.getTargetWebGLVersion(bufferRenderer.renderer.getContext());
-                if (targetWebGLVersion === 2) {
-                        return bufferRenderer;
-                }
-                return new BufferRenderer(options, targetWebGLVersion);
-        }
-}
-/**
-    * A legacy renderer that renders all the elements in the scene to a single
-    * buffer. Does not support things like transparent paths behind polygons
-    * natively, but can potentially fake it.
-    *
-    * 2019/07/10 Terence Dickson
-    * Generally has worse performance under average loads compared to the
-    * multi-buffer renderer, as the multi-buffer renderer can avoid re-rendering
-    * the entire map if only animated elements on the map have changed.
-    *
-    * @class SingleBufferRenderer
-    * @private
-    */
-class SingleBufferRenderer {
-        constructor(renderOptions, targetWebGLVersion = 2) {
-                try {
-                        const options = {
-                                alpha: renderOptions.alpha || false,
-                                stencil: true,
-                                outputEncoding: sRGBEncoding,
-                                antialias: renderOptions.antialias,
-                                powerPreference: 'high-performance',
-                                preserveDrawingBuffer: true,
-                        };
-                        this.renderer = targetWebGLVersion === 2 ? new WebGLRenderer(options) : new WebGL1Renderer(options);
-                }
-                catch (e) {
-                        if (renderOptions.onWebGLRendererError) {
-                                renderOptions.onWebGLRendererError(e);
-                        }
-                }
-                this.backgroundColor = new Color();
-                this.backgroundAlpha = 1.0;
-                this.mapboxOutdoorContext = null;
-        }
-        /**
-            * Dispose of the renderer.
-            */
-        destroy() {
-                this.renderer.dispose();
-        }
-        /**
-            * Re-render the scene. This ignores the `renderTask` argument, as all
-            * re-renders in the single-buffer renderer are full re-renders.
-            *
-            * @method render
-            * @param renderTask {RENDER}
-            * @param renderTarget {null or WebGLRenderTarget}
-            * @param scene {Scene}
-            * @param sceneCamera {Camera}
-            */
-        render(renderTask, renderTarget, scene, sceneCamera) {
-                sceneCamera.layers.enable(CAMERA_LAYER.STATIC);
-                sceneCamera.layers.enable(CAMERA_LAYER.ANIMATED);
-                sceneCamera.layers.enable(CAMERA_LAYER.ALWAYS_ON_TOP);
-                this.renderer.autoClear = false;
-                this.renderer.setClearColor(this.backgroundColor, this.backgroundAlpha);
-                this.renderer.setRenderTarget(renderTarget);
-                this.renderer.clear();
-                if (SHOW_FPS) {
-                        stats.begin();
-                }
-                this.renderer.render(scene, sceneCamera);
-                if (SHOW_FPS) {
-                        stats.end();
-                }
-                if (this.mapboxOutdoorContext != null) {
-                        this.renderer.state.reset();
-                        this.mapboxOutdoorContext.render({
-                                resolution: this.renderer.getSize(new Vector2()),
-                                camera: sceneCamera,
-                        });
-                        this.renderer.state.reset();
-                }
-        }
-        /**
-            * Set the size of the renderer.
-            *
-            * @method setBufferSize
-            * @param width {number}
-            * @param height {number}
-            */
-        setBufferSize(width, height) {
-                this.renderer.setSize(width, height, false);
-        }
-        /**
-            * Set the color and opacity that will be drawn behind the scene.
-            *
-            * @method setBackgroundColor
-            * @param color {Color}
-            * @param alpha {number}
-            */
-        setBackgroundColor(color, alpha) {
-                this.backgroundColor = color;
-                this.backgroundAlpha = alpha;
-        }
-        /**
-            * Assign an outdoor context to this renderer.
-            *
-            * @method setMapboxOutdoorContext
-            * @param {MapboxOutdoorContext} mapboxOutdoorContext context to draw
-            */
-        setMapboxOutdoorContext(mapboxOutdoorContext) {
-                this.mapboxOutdoorContext = mapboxOutdoorContext;
-        }
-}
-/**
-    * Our new renderer that renders static elements to one buffer and animated
-    * elements to another buffer, allowing only the latter buffer to be
-    * re-rendered if the camera isn't moving. There is also a third buffer that
-    * can be used to render elements that must appear always on top.
-    *
-    * Does not yet support antialiasing.
-    *
-    * 2019/07/10 Terence Dickson
-    * Generally has better performance under average loads compared to the
-    * single-buffer renderer, but does not work on IE 11.
-    *
-    * @class MultiBufferRenderer
-    * @private
-    */
-class MultiBufferRenderer {
-        constructor(renderOptions, targetWebGLVersion = 2) {
-                try {
-                        const options = {
-                                alpha: renderOptions.alpha || false,
-                                antialias: false,
-                                stencil: true,
-                                outputEncoding: sRGBEncoding,
-                                powerPreference: 'high-performance',
-                                preserveDrawingBuffer: true,
-                        };
-                        this.renderer = targetWebGLVersion === 2 ? new WebGLRenderer(options) : new WebGL1Renderer(options);
-                }
-                catch (e) {
-                        if (renderOptions.onWebGLRendererError) {
-                                renderOptions.onWebGLRendererError(e);
-                        }
-                }
-                this.backgroundColor = new Color();
-                this.backgroundAlpha = 1.0;
-                this.mapboxOutdoorContext = null;
-                // The render target (color and depth textures) that will be used to
-                // store the static scene, to composite it with the animated scene.
-                this.staticSceneRenderTarget = new WebGLRenderTarget(this.renderer.width, this.renderer.height);
-                this.staticSceneRenderTarget.texture.format = RGBAFormat;
-                this.staticSceneRenderTarget.texture.minFilter = NearestFilter;
-                this.staticSceneRenderTarget.texture.magFilter = NearestFilter;
-                this.staticSceneRenderTarget.texture.generateMipmaps = false;
-                this.staticSceneRenderTarget.stencilBuffer = true;
-                this.staticSceneRenderTarget.depthBuffer = true;
-                this.staticSceneRenderTarget.depthTexture = new DepthTexture();
-                this.staticSceneRenderTarget.depthTexture.type = UnsignedIntType;
-                this.staticSceneRenderTarget.depthTexture.format = DepthStencilFormat;
-                // The render target that will be used to store the dynamic scene,
-                // re-rendered once per frame while animated elements exist in the
-                // 3D scene (e.g., paths.)
-                this.animatedSceneRenderTarget = new WebGLRenderTarget(this.renderer.width, this.renderer.height);
-                this.animatedSceneRenderTarget.texture.format = RGBAFormat;
-                this.animatedSceneRenderTarget.stencilBuffer = true;
-                this.animatedSceneRenderTarget.texture.minFilter = NearestFilter;
-                this.animatedSceneRenderTarget.texture.magFilter = NearestFilter;
-                this.animatedSceneRenderTarget.texture.generateMipmaps = false;
-                this.animatedSceneRenderTarget.stencilBuffer = true;
-                this.animatedSceneRenderTarget.depthBuffer = true;
-                this.animatedSceneRenderTarget.depthTexture = new DepthTexture();
-                this.animatedSceneRenderTarget.depthTexture.type = UnsignedIntType;
-                this.animatedSceneRenderTarget.depthTexture.format = DepthStencilFormat;
-                // The render target that will be used to store the scene whose elements
-                // are always drawn on top of everything else. Rendering is done once per
-                // frame while such elements exist in the 3D scene, just like the animated scene target.
-                // 2020/08/18 - Daniel Vijayakumar
-                // This buffer should be used for animated objects that must appear on top of everything
-                // else. I can't think of any use-cases where you'd ever want *static* elements to be
-                // always on top. If this is not adequate, we can solve this problem with yet a 4th buffer.
-                // although this would create a combinatoric explosion of render passes and might start
-                // eating into the gains of the multi-buffer approach.
-                this.alwaysOnTopSceneRenderTarget = new WebGLRenderTarget(this.renderer.width, this.renderer.height);
-                this.alwaysOnTopSceneRenderTarget.texture.format = RGBAFormat;
-                this.alwaysOnTopSceneRenderTarget.texture.minFilter = NearestFilter;
-                this.alwaysOnTopSceneRenderTarget.texture.magFilter = NearestFilter;
-                this.alwaysOnTopSceneRenderTarget.texture.generateMipmaps = false;
-                this.alwaysOnTopSceneRenderTarget.stencilBuffer = true;
-                this.alwaysOnTopSceneRenderTarget.depthBuffer = true;
-                this.alwaysOnTopSceneRenderTarget.depthTexture = new DepthTexture();
-                this.alwaysOnTopSceneRenderTarget.depthTexture.type = UnsignedIntType;
-                this.alwaysOnTopSceneRenderTarget.depthTexture.format = DepthStencilFormat;
-                this.compositeUniforms = {
-                        staticSceneColorTexture: {
-                                type: 't',
-                                value: this.staticSceneRenderTarget.texture,
-                        },
-                        staticSceneDepthTexture: {
-                                type: 't',
-                                value: this.staticSceneRenderTarget.depthTexture,
-                        },
-                        animatedSceneColorTexture: {
-                                type: 't',
-                                value: this.animatedSceneRenderTarget.texture,
-                        },
-                        animatedSceneDepthTexture: {
-                                type: 't',
-                                value: this.animatedSceneRenderTarget.depthTexture,
-                        },
-                        alwaysOnTopSceneColorTexture: {
-                                type: 't',
-                                value: this.alwaysOnTopSceneRenderTarget.texture,
-                        },
-                };
-                // The scene that renders a full-screen quad that will sample from
-                // all render targets to produce the composited result.
-                this.compositeCamera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
-                this.compositeMaterial = new ShaderMaterial({
-                        uniforms: this.compositeUniforms,
-                        vertexShader: CompositeVertexShader,
-                        fragmentShader: CompositeFragmentShader,
-                });
-                this.compositeFullscreenQuad = new Mesh(new PlaneBufferGeometry(2, 2), this.compositeMaterial);
-                this.compositeScene = new Scene();
-                this.compositeScene.add(this.compositeFullscreenQuad);
-        }
-        /**
-            * Dispose of the renderer and its buffers.
-            */
-        destroy() {
-                this.staticSceneRenderTarget.dispose();
-                this.animatedSceneRenderTarget.dispose();
-                this.alwaysOnTopSceneRenderTarget.dispose();
-                this.renderer.dispose();
-        }
-        /**
-            * Compose all buffers into the final image that is sent to the viewport.
-            *
-            * @private
-            * @method renderComposite
-            * @param renderTarget {null or WebGLRenderTarget}
-            */
-        renderComposite(renderTarget) {
-                this.renderer.setRenderTarget(renderTarget);
-                this.renderer.clear();
-                // 23/05/2019 Terence Dickson
-                // We need to disable depth writes on the fullscreen-quad, since
-                // otherwise it is considered "very close to the camera" and will
-                // obscure the path rendering. Keep an eye on this if you update
-                // three.js, since we're modifying properties on the WebGL context
-                // itself, and three.js might decide to override this in the future.
-                this.renderer.getContext().depthMask(false);
-                this.renderer.render(this.compositeScene, this.compositeCamera);
-                this.renderer.getContext().depthMask(true);
-        }
-        /**
-            * Renders the scene's animated layer to its dedicated buffer.
-            *
-            * @private
-            * @method renderToAnimatedBuffer
-            * @param {*} scene
-            * @param {*} sceneCamera
-            */
-        renderToAnimatedBuffer(scene, sceneCamera) {
-                sceneCamera.layers.set(CAMERA_LAYER.ANIMATED);
-                this.renderer.setClearColor(new Color(), 0.0);
-                this.renderer.setRenderTarget(this.animatedSceneRenderTarget);
-                this.renderer.clear();
-                this.renderer.render(scene, sceneCamera);
-        }
-        /**
-            * Render the provided scene using the given camera, re-rendering only
-            * the animated parts.
-            *
-            * @method renderAnimated
-            * @param renderTarget {null or WebGLRenderTarget}
-            * @param scene {Scene}
-            * @param sceneCamera {Camera}
-            */
-        renderAnimated(renderTarget, scene, sceneCamera) {
-                this.renderToAnimatedBuffer(scene, sceneCamera);
-                this.renderComposite(renderTarget);
-        }
-        /**
-            * Renders the scene's always-on-top layer to its dedicated buffer.
-            *
-            * @private
-            * @method renderToAlwaysOnTopBuffer
-            * @param {*} scene
-            * @param {*} sceneCamera
-            */
-        renderToAlwaysOnTopBuffer(scene, sceneCamera) {
-                sceneCamera.layers.set(CAMERA_LAYER.ALWAYS_ON_TOP);
-                this.renderer.setClearColor(new Color(), 0.0);
-                this.renderer.setRenderTarget(this.alwaysOnTopSceneRenderTarget);
-                this.renderer.clear();
-                this.renderer.render(scene, sceneCamera);
-        }
-        /**
-            * Render the provided scene using the given camera, re-rendering only
-            * the parts that should appear on top of all other elements.
-            *
-            * @method renderAlwaysOnTop
-            * @param renderTarget {null or WebGLRenderTarget}
-            * @param scene {Scene}
-            * @param sceneCamera {Camera}
-            */
-        renderAlwaysOnTop(renderTarget, scene, sceneCamera) {
-                this.renderToAlwaysOnTopBuffer(scene, sceneCamera);
-                this.renderComposite(renderTarget);
-        }
-        /**
-            * Render all of the scene layers, then combine them.
-            *
-            * @method renderAll
-            * @param renderTarget {null or WebGLRenderTarget}
-            * @param scene {Scene}
-            * @param sceneCamera {Camera}
-            */
-        renderAll(renderTarget, scene, sceneCamera) {
-                // First, render to static buffer
-                sceneCamera.layers.set(CAMERA_LAYER.STATIC);
-                this.renderer.autoClear = false;
-                this.renderer.setClearColor(this.backgroundColor, this.backgroundAlpha);
-                this.renderer.setRenderTarget(this.staticSceneRenderTarget);
-                this.renderer.clear();
-                this.renderer.render(scene, sceneCamera);
-                // Then render mapbox outdoor context
-                if (this.mapboxOutdoorContext != null) {
-                        this.renderer.state.reset();
-                        this.mapboxOutdoorContext.render({
-                                resolution: this.renderer.getSize(new Vector2()),
-                                camera: sceneCamera,
-                                renderTarget: this.staticSceneRenderTarget,
-                        });
-                        this.renderer.state.reset();
-                }
-                // Next, render the remaining buffers
-                this.renderToAnimatedBuffer(scene, sceneCamera);
-                this.renderToAlwaysOnTopBuffer(scene, sceneCamera);
-                // Finally, composite the scene
-                this.renderComposite(renderTarget);
-        }
-        /**
-            * Re-render the scene, depending on which parts of the scene have been
-            * invalidated.
-            *
-            * @method render
-            * @param renderTarget {null or WebGLRenderTarget}
-            * @param scene {Scene}
-            * @param sceneCamera {Camera}
-            */
-        render(renderTask, renderTarget, scene, sceneCamera) {
-                if (renderTask === RENDER.ANIMATED) {
-                        this.renderAnimated(renderTarget, scene, sceneCamera);
-                }
-                else if (renderTask === RENDER.ALWAYS_ON_TOP) {
-                        this.renderAlwaysOnTop(renderTarget, scene, sceneCamera);
-                }
-                else if (renderTask === RENDER.ALL) {
-                        this.renderAll(renderTarget, scene, sceneCamera);
-                }
-                else {
-                        Logger.error('Renderer.render called with invalid renderTask');
-                }
-        }
-        /**
-            * Set the size of the renderer, and all its internal buffers.
-            *
-            * @method setBufferSize
-            * @param width {number}
-            * @param height {number}
-            */
-        setBufferSize(width, height) {
-                this.renderer.setSize(width, height, false);
-                this.staticSceneRenderTarget.setSize(width, height);
-                this.animatedSceneRenderTarget.setSize(width, height);
-                this.alwaysOnTopSceneRenderTarget.setSize(width, height);
-        }
-        /**
-            * Set the color and opacity that will be drawn behind the scene.
-            *
-            * @method setBackgroundColor
-            * @param color {Color}
-            * @param alpha {number}
-            */
-        setBackgroundColor(color, alpha) {
-                this.backgroundColor = color;
-                this.backgroundAlpha = alpha;
-        }
-        /**
-            * Assign an outdoor context to this renderer.
-            *
-            * @method setMapboxOutdoorContext
-            * @param {MapboxOutdoorContext} mapboxOutdoorContext context to draw
-            */
-        setMapboxOutdoorContext(mapboxOutdoorContext) {
-                this.mapboxOutdoorContext = mapboxOutdoorContext;
-        }
-}
-
 declare module '@mappedin/mappedin-js/renderer/internal/utils' {
     /**
         *	Utils function listing
@@ -10531,6 +7704,18 @@ declare module '@mappedin/mappedin-js/renderer/internal/utils' {
     export function isObject(item: any): any;
     export function cyrb53(str: any, seed?: number): number;
     export function addMarginMultiplierToBoundingBox(bbox: any, multiplier: any): any;
+    export function tweenPromise({ from, to, duration, easing, delay, onUpdate, onStart, onComplete, }: {
+            from: any;
+            to: any;
+            duration?: number | undefined;
+            easing?: any;
+            delay?: number | undefined;
+            onUpdate?: ((_: any) => void) | undefined;
+            onStart?: (() => void) | undefined;
+            onComplete?: (() => void) | undefined;
+    }): {
+            start(core: any): Promise<any>;
+    };
     export function getPrimaryLocationForPolygon(polygon: any, venue: any): any;
     export function determineStartingMap(venue: any, options: any): any;
 }
@@ -11240,73 +8425,6 @@ declare module '@mappedin/mappedin-js/navigator/interfaces/ILocation' {
 
 
 
-precision mediump float;
-
-uniform sampler2D textureLabel;
-
-varying vec2 vUV;
-varying vec3 vColor;
-
-void main() {
-    gl_FragColor = texture2D(textureLabel, vUV);
-    gl_FragColor.rgb = vColor;
-}
-
-attribute vec2 position;
-attribute vec3 origin;
-attribute vec2 size;
-attribute float rotation;
-attribute vec4 uv;
-attribute vec3 color;
-
-uniform mat4 projectionMatrix;
-uniform mat4 viewMatrix;
-uniform mat4 modelMatrix;
-
-varying vec2 vUV;
-varying vec3 vColor;
-
-void main() {
-    vec4 mapDirectionVector = vec4(0, 1, 0, 0) * viewMatrix * modelMatrix;
-    float mapDirection = atan(mapDirectionVector.y, mapDirectionVector.x);
-
-    float cosRotation = cos(rotation);
-    float sinRotation = sin(rotation);
-
-    mat4 rotationMatrix = mat4(
-        vec4(cosRotation, -sinRotation, 0.0, 0.0),
-        vec4(sinRotation, cosRotation, 0.0, 0.0),
-        vec4(0.0, 0.0, 1.0, 0.0),
-        vec4(0.0, 0.0, 0.0, 1.0)
-    );
-
-    mat4 translate = mat4(
-        vec4(1, 0, 0, 0),
-        vec4(0, 1, 0, 0),
-        vec4(0, 0, 1, 0),
-        vec4(origin, 1)
-    );
-
-    gl_Position = projectionMatrix *
-                  viewMatrix *
-                  modelMatrix *
-                  translate *
-                  rotationMatrix *
-                  (vec4(position * size - vec2(0, size.y / 2.0), 0, 1));
-
-
-    vec2 uvStart = uv.xy;
-    vec2 uvSize = uv.zw;
-
-    if (sin(mapDirection + rotation) > 0.0) {
-        vUV = position * uvSize + vec2(uvStart.x, uvStart.y - uvSize.y);
-    } else {
-        vUV = (vec2(1, 1) - position) * uvSize + vec2(uvStart.x, uvStart.y - uvSize.y);		
-    }
-
-    vColor = color;
-}
-
 declare module '@mappedin/mappedin-js/renderer/internal/quad-tree' {
     export function contains(rect1: Rectangle, rect2: Rectangle): boolean;
     export function intersects(rect1: Rectangle, rect2: Rectangle): boolean;
@@ -11342,24 +8460,6 @@ declare module '@mappedin/mappedin-js/renderer/internal/quad-tree' {
     export { QuadTree, Rectangle };
 }
 
-declare module '@mappedin/mappedin-js/renderer/internal/Mappedin.CameraControls.TouchAnchor' {
-    export default TouchAnchor;
-    /**
-      * An object representing a touch event anchored to a point along the z=0 plane.
-      * @type {any}
-      */
-    let TouchAnchor: any;
-}
-
-declare module '@mappedin/mappedin-js/renderer/internal/Mappedin.CameraControls.InputSet' {
-    export default InputSet;
-    /**
-      *
-      * @type {any}
-      */
-    let InputSet: any;
-}
-
 declare module '@mappedin/mappedin-js/renderer/internal/Mappedin.MultiFloorView' {
     export namespace VIEW_STATE {
         const SINGLE_FLOOR: string;
@@ -11455,51 +8555,3 @@ declare module '@mappedin/mappedin-js/renderer/internal/Mappedin.MultiFloorView'
     }
 }
 
-varying vec2 vUv;
-
-void main() {
-    vUv = uv;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-}
-
-varying vec2 vUv;
-uniform sampler2D staticSceneColorTexture;
-uniform sampler2D staticSceneDepthTexture;
-uniform sampler2D animatedSceneColorTexture;
-uniform sampler2D animatedSceneDepthTexture;
-uniform sampler2D alwaysOnTopSceneColorTexture;
-
-vec4 alphaBlend(vec4 background, vec4 foreground) {
-    vec3 resultColor = (
-        foreground.rgb * foreground.a +
-        background.rgb * background.a * (1.0 - foreground.a)
-    );
-    float resultAlpha = foreground.a + background.a * (1.0 - foreground.a);
-    return vec4(resultColor / resultAlpha, resultAlpha);
-}
-
-vec4 alphaBlendPremultipliedAlpha(vec4 background, vec4 foreground) {
-    return foreground + (background * (1.0 - foreground.a));
-}
-
-void main() {
-    float staticDepth = texture2D(staticSceneDepthTexture, vUv).r;
-    float animatedDepth = texture2D(animatedSceneDepthTexture, vUv).r;
-
-    vec4 staticColor = texture2D(staticSceneColorTexture, vUv).rgba;
-    vec4 animatedColor = texture2D(animatedSceneColorTexture, vUv).rgba;
-
-    if (staticDepth < animatedDepth) {
-        // 19/06/10 Terence Dickson
-        // Spoiler alert! This is to help prepare for CE-1352, where alpha
-        // may be partial instead of zero. Not implementing that as part of
-        // this PR, however.
-        animatedColor.a *= 0.0;
-    }
-
-    vec4 lowerColor = alphaBlend(staticColor, animatedColor);
-    vec4 alwaysOnTopColor = texture2D(alwaysOnTopSceneColorTexture, vUv).rgba;
-
-    gl_FragColor = alphaBlendPremultipliedAlpha(lowerColor, alwaysOnTopColor);
-}
-