@loaders.gl/tiles 3.1.3 → 4.0.0-alpha.5

package/dist/tileset/tileset-3d.js

@@ -1,100 +1,41 @@
-"use strict";
-// This file is derived from the Cesium code base under Apache 2 license
-// See LICENSE.md and https://github.com/AnalyticalGraphicsInc/cesium/blob/master/LICENSE.md
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-/*
-
-  The Tileset loading and rendering flow is as below,
-  A rendered (i.e. deck.gl `Tile3DLayer`) triggers `tileset.update()` after a `tileset` is loaded
-  `tileset` starts traversing the tile tree and update `requestTiles` (tiles of which content need
-  to be fetched) and `selectedTiles` (tiles ready for rendering under the current viewport).
-  `Tile3DLayer` will update rendering based on `selectedTiles`.
-  `Tile3DLayer` also listens to `onTileLoad` callback and trigger another round of `update and then traversal`
-  when new tiles are loaded.
-
-  As I3S tileset have stored `tileHeader` file (metadata) and tile content files (geometry, texture, ...) separately.
-  During each traversal, it issues `tilHeader` requests if that `tileHeader` is not yet fetched,
-  after the tile header is fulfilled, it will resume the traversal starting from the tile just fetched (not root).
-
-  Tile3DLayer
-       |
-   await load(tileset)
-       |
-   tileset.update()
-       |                async load tileHeader
-   tileset.traverse() -------------------------- Queued
-       |        resume traversal after fetched  |
-       |----------------------------------------|
-       |
-       |                     async load tile content
-  tilset.requestedTiles  ----------------------------- RequestScheduler
-                                                              |
-  tilset.selectedTiles (ready for rendering)                  |
-       |         Listen to                                    |
-    Tile3DLayer ----------- onTileLoad  ----------------------|
-       |                         |   notify new tile is available
-    updateLayers                 |
-                        tileset.update // trigger another round of update
-*/
-const core_1 = require("@math.gl/core");
-const geospatial_1 = require("@math.gl/geospatial");
-const stats_1 = require("@probe.gl/stats");
-const loader_utils_1 = require("@loaders.gl/loader-utils");
-const tileset_cache_1 = __importDefault(require("./tileset-cache"));
-const transform_utils_1 = require("./helpers/transform-utils");
-const frame_state_1 = require("./helpers/frame-state");
-const zoom_1 = require("./helpers/zoom");
-const tile_3d_1 = __importDefault(require("./tile-3d"));
-const tileset_3d_traverser_1 = __importDefault(require("./traversers/tileset-3d-traverser"));
-const tileset_traverser_1 = __importDefault(require("./traversers/tileset-traverser"));
-const i3s_tileset_traverser_1 = __importDefault(require("./traversers/i3s-tileset-traverser"));
-const constants_1 = require("../constants");
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { Matrix4, Vector3 } from '@math.gl/core';
+import { Ellipsoid } from '@math.gl/geospatial';
+import { Stats } from '@probe.gl/stats';
+import { RequestScheduler, assert, path } from '@loaders.gl/loader-utils';
+import TilesetCache from './tileset-cache';
+import { calculateTransformProps } from './helpers/transform-utils';
+import { getFrameState } from './helpers/frame-state';
+import { getZoomFromBoundingVolume } from './helpers/zoom';
+import Tile3D from './tile-3d';
+import Tileset3DTraverser from './traversers/tileset-3d-traverser';
+import TilesetTraverser from './traversers/tileset-traverser';
+import I3SetTraverser from './traversers/i3s-tileset-traverser';
+import { TILESET_TYPE } from '../constants';
 const DEFAULT_PROPS = {
-    description: '',
-    ellipsoid: geospatial_1.Ellipsoid.WGS84,
-    // A 4x4 transformation matrix this transforms the entire tileset.
-    modelMatrix: new core_1.Matrix4(),
-    // Set to false to disable network request throttling
-    throttleRequests: true,
-    // Number of simultaneous requsts, if throttleRequests is true
-    maxRequests: 64,
-    maximumMemoryUsage: 32,
-    /**
-     * Callback. Indicates this a tile's content was loaded
-     * @param tile {TileHeader}
-     */
-    onTileLoad: () => { },
-    /**
-     * Callback. Indicates this a tile's content was unloaded
-     * @param tile {TileHeader}
-     */
-    onTileUnload: () => { },
-    onTileError: () => { },
-    /**
-     * Callback. Allows post-process selectedTiles right after traversal.
-     * @param selectedTiles {TileHeader[]}
-     * @returns TileHeader[] - output array of tiles to return to deck.gl
-     */
-    onTraversalComplete: (selectedTiles) => selectedTiles,
-    // Optional async tile content loader
-    contentLoader: undefined,
-    // View distance scale modifier
-    viewDistanceScale: 1.0,
-    // TODO CESIUM
-    // The maximum screen space error used to drive level of detail refinement.
-    maximumScreenSpaceError: 8,
-    loadTiles: true,
-    updateTransforms: true,
-    viewportTraversersMap: null,
-    loadOptions: { fetch: {} },
-    attributions: [],
-    basePath: '',
-    i3s: {}
+  description: '',
+  ellipsoid: Ellipsoid.WGS84,
+  modelMatrix: new Matrix4(),
+  throttleRequests: true,
+  maxRequests: 64,
+  maximumMemoryUsage: 32,
+  onTileLoad: () => {},
+  onTileUnload: () => {},
+  onTileError: () => {},
+  onTraversalComplete: selectedTiles => selectedTiles,
+  contentLoader: undefined,
+  viewDistanceScale: 1.0,
+  maximumScreenSpaceError: 8,
+  loadTiles: true,
+  updateTransforms: true,
+  viewportTraversersMap: null,
+  loadOptions: {
+    fetch: {}
+  },
+  attributions: [],
+  basePath: '',
+  i3s: {}
 };
-// Tracked Stats
 const TILES_TOTAL = 'Tiles In Tileset(s)';
 const TILES_IN_MEMORY = 'Tiles In Memory';
 const TILES_IN_VIEW = 'Tiles In View';
@@ -105,497 +46,629 @@ const TILES_UNLOADED = 'Tiles Unloaded';
 const TILES_LOAD_FAILED = 'Failed Tile Loads';
 const POINTS_COUNT = 'Points';
 const TILES_GPU_MEMORY = 'Tile Memory Use';
-class Tileset3D {
-    /**
-     * Create a new Tileset3D
-     * @param json
-     * @param props
-     */
-    // eslint-disable-next-line max-statements
-    constructor(json, options) {
-        (0, loader_utils_1.assert)(json);
-        // PUBLIC MEMBERS
-        this.options = { ...DEFAULT_PROPS, ...options };
-        // raw data
-        this.tileset = json;
-        this.loader = json.loader;
-        // could be  3d tiles, i3s
-        this.type = json.type;
-        // The url to a tileset JSON file.
-        this.url = json.url;
-        this.basePath = json.basePath || loader_utils_1.path.dirname(this.url);
-        this.modelMatrix = this.options.modelMatrix;
-        this.ellipsoid = this.options.ellipsoid;
-        // Geometric error when the tree is not rendered at all
-        this.lodMetricType = json.lodMetricType;
-        this.lodMetricValue = json.lodMetricValue;
-        this.refine = json.root.refine;
-        this.loadOptions = this.options.loadOptions || {};
-        this.root = null;
-        this.roots = {};
-        // view props
-        this.cartographicCenter = null;
-        this.cartesianCenter = null;
-        this.zoom = 1;
-        this.boundingVolume = null;
-        // TRAVERSAL
-        this.traverseCounter = 0;
-        this.geometricError = 0;
-        this._traverser = this._initializeTraverser();
-        this._cache = new tileset_cache_1.default();
-        this._requestScheduler = new loader_utils_1.RequestScheduler({
-            throttleRequests: this.options.throttleRequests,
-            maxRequests: this.options.maxRequests
-        });
-        // update tracker
-        // increase in each update cycle
-        this._frameNumber = 0;
-        // counter for tracking tiles requests
-        this._pendingCount = 0;
-        // HOLD TRAVERSAL RESULTS
-        this._tiles = {};
-        this.selectedTiles = [];
-        this._emptyTiles = [];
-        this._requestedTiles = [];
-        this.frameStateData = {};
-        this.lastUpdatedVieports = null;
-        this._queryParams = {};
-        this._queryParamsString = '';
-        // METRICS
-        // The maximum amount of GPU memory (in MB) that may be used to cache tiles.
-        // Tiles not in view are unloaded to enforce this.
-        this.maximumMemoryUsage = this.options.maximumMemoryUsage || 32;
-        // The total amount of GPU memory in bytes used by the tileset.
-        this.gpuMemoryUsageInBytes = 0;
-        this.stats = new stats_1.Stats({ id: this.url });
-        this._initializeStats();
-        // EXTRACTED FROM TILESET
-        this._extensionsUsed = undefined;
-        this.dynamicScreenSpaceErrorComputedDensity = 0.0; // Updated based on the camera position and direction
-        // Metadata for the entire tileset
-        this.extras = null;
-        this.asset = {};
-        this.credits = {};
-        this.description = this.options.description || '';
-        this._initializeTileSet(json);
-    }
-    /** Release resources */
-    destroy() {
-        this._destroy();
-    }
-    /** Is the tileset loaded (update needs to have been called at least once) */
-    isLoaded() {
-        // Check that `_frameNumber !== 0` which means that update was called at least once
-        return this._pendingCount === 0 && this._frameNumber !== 0;
-    }
-    get tiles() {
-        return Object.values(this._tiles);
-    }
-    get frameNumber() {
-        return this._frameNumber;
-    }
-    get queryParams() {
-        if (!this._queryParamsString) {
-            this._queryParamsString = getQueryParamString(this._queryParams);
-        }
-        return this._queryParamsString;
-    }
-    setProps(props) {
-        this.options = { ...this.options, ...props };
-    }
-    /** @deprecated */
-    setOptions(options) {
-        this.options = { ...this.options, ...options };
-    }
-    /**
-     * Return a loadable tile url for a specific tile subpath
-     * @param tilePath a tile subpath
-     */
-    getTileUrl(tilePath) {
-        const isDataUrl = tilePath.startsWith('data:');
-        if (isDataUrl) {
-            return tilePath;
-        }
-        return `${tilePath}${this.queryParams}`;
-    }
-    // TODO CESIUM specific
-    hasExtension(extensionName) {
-        return Boolean(this._extensionsUsed && this._extensionsUsed.indexOf(extensionName) > -1);
-    }
-    /**
-     * Update visible tiles relying on a list of viewports
-     * @param viewports - list of viewports
-     */
-    // eslint-disable-next-line max-statements, complexity
-    update(viewports) {
-        if ('loadTiles' in this.options && !this.options.loadTiles) {
-            return;
-        }
-        if (this.traverseCounter > 0) {
-            return;
-        }
-        if (!viewports && this.lastUpdatedVieports) {
-            viewports = this.lastUpdatedVieports;
-        }
-        else {
-            this.lastUpdatedVieports = viewports;
-        }
-        if (!(viewports instanceof Array)) {
-            viewports = [viewports];
-        }
-        this._cache.reset();
-        this._frameNumber++;
-        this.traverseCounter = viewports.length;
-        const viewportsToTraverse = [];
-        // First loop to decrement traverseCounter
-        for (const viewport of viewports) {
-            const id = viewport.id;
-            if (this._needTraverse(id)) {
-                viewportsToTraverse.push(id);
-            }
-            else {
-                this.traverseCounter--;
-            }
-        }
-        // Second loop to traverse
-        for (const viewport of viewports) {
-            const id = viewport.id;
-            if (!this.roots[id]) {
-                this.roots[id] = this._initializeTileHeaders(this.tileset, null);
-            }
-            if (!viewportsToTraverse.includes(id)) {
-                continue; // eslint-disable-line no-continue
-            }
-            const frameState = (0, frame_state_1.getFrameState)(viewport, this._frameNumber);
-            this._traverser.traverse(this.roots[id], frameState, this.options);
-        }
+export default class Tileset3D {
+  constructor(json, options) {
+    _defineProperty(this, "options", void 0);
+
+    _defineProperty(this, "loadOptions", void 0);
+
+    _defineProperty(this, "type", void 0);
+
+    _defineProperty(this, "tileset", void 0);
+
+    _defineProperty(this, "loader", void 0);
+
+    _defineProperty(this, "url", void 0);
+
+    _defineProperty(this, "basePath", void 0);
+
+    _defineProperty(this, "modelMatrix", void 0);
+
+    _defineProperty(this, "ellipsoid", void 0);
+
+    _defineProperty(this, "lodMetricType", void 0);
+
+    _defineProperty(this, "lodMetricValue", void 0);
+
+    _defineProperty(this, "refine", void 0);
+
+    _defineProperty(this, "root", void 0);
+
+    _defineProperty(this, "roots", void 0);
+
+    _defineProperty(this, "asset", void 0);
+
+    _defineProperty(this, "description", void 0);
+
+    _defineProperty(this, "properties", void 0);
+
+    _defineProperty(this, "extras", void 0);
+
+    _defineProperty(this, "attributions", void 0);
+
+    _defineProperty(this, "credits", void 0);
+
+    _defineProperty(this, "stats", void 0);
+
+    _defineProperty(this, "traverseCounter", void 0);
+
+    _defineProperty(this, "geometricError", void 0);
+
+    _defineProperty(this, "selectedTiles", void 0);
+
+    _defineProperty(this, "cartographicCenter", void 0);
+
+    _defineProperty(this, "cartesianCenter", void 0);
+
+    _defineProperty(this, "zoom", void 0);
+
+    _defineProperty(this, "boundingVolume", void 0);
+
+    _defineProperty(this, "gpuMemoryUsageInBytes", void 0);
+
+    _defineProperty(this, "dynamicScreenSpaceErrorComputedDensity", void 0);
+
+    _defineProperty(this, "_traverser", void 0);
+
+    _defineProperty(this, "_cache", void 0);
+
+    _defineProperty(this, "_requestScheduler", void 0);
+
+    _defineProperty(this, "_frameNumber", void 0);
+
+    _defineProperty(this, "_queryParamsString", void 0);
+
+    _defineProperty(this, "_queryParams", void 0);
+
+    _defineProperty(this, "_extensionsUsed", void 0);
+
+    _defineProperty(this, "_tiles", void 0);
+
+    _defineProperty(this, "_pendingCount", void 0);
+
+    _defineProperty(this, "lastUpdatedVieports", void 0);
+
+    _defineProperty(this, "_requestedTiles", void 0);
+
+    _defineProperty(this, "_emptyTiles", void 0);
+
+    _defineProperty(this, "frameStateData", void 0);
+
+    _defineProperty(this, "maximumMemoryUsage", void 0);
+
+    assert(json);
+    this.options = { ...DEFAULT_PROPS,
+      ...options
+    };
+    this.tileset = json;
+    this.loader = json.loader;
+    this.type = json.type;
+    this.url = json.url;
+    this.basePath = json.basePath || path.dirname(this.url);
+    this.modelMatrix = this.options.modelMatrix;
+    this.ellipsoid = this.options.ellipsoid;
+    this.lodMetricType = json.lodMetricType;
+    this.lodMetricValue = json.lodMetricValue;
+    this.refine = json.root.refine;
+    this.loadOptions = this.options.loadOptions || {};
+    this.root = null;
+    this.roots = {};
+    this.cartographicCenter = null;
+    this.cartesianCenter = null;
+    this.zoom = 1;
+    this.boundingVolume = null;
+    this.traverseCounter = 0;
+    this.geometricError = 0;
+    this._traverser = this._initializeTraverser();
+    this._cache = new TilesetCache();
+    this._requestScheduler = new RequestScheduler({
+      throttleRequests: this.options.throttleRequests,
+      maxRequests: this.options.maxRequests
+    });
+    this._frameNumber = 0;
+    this._pendingCount = 0;
+    this._tiles = {};
+    this.selectedTiles = [];
+    this._emptyTiles = [];
+    this._requestedTiles = [];
+    this.frameStateData = {};
+    this.lastUpdatedVieports = null;
+    this._queryParams = {};
+    this._queryParamsString = '';
+    this.maximumMemoryUsage = this.options.maximumMemoryUsage || 32;
+    this.gpuMemoryUsageInBytes = 0;
+    this.stats = new Stats({
+      id: this.url
+    });
+
+    this._initializeStats();
+
+    this._extensionsUsed = undefined;
+    this.dynamicScreenSpaceErrorComputedDensity = 0.0;
+    this.extras = null;
+    this.asset = {};
+    this.credits = {};
+    this.description = this.options.description || '';
+
+    this._initializeTileSet(json);
+  }
+
+  destroy() {
+    this._destroy();
+  }
+
+  isLoaded() {
+    return this._pendingCount === 0 && this._frameNumber !== 0;
+  }
+
+  get tiles() {
+    return Object.values(this._tiles);
+  }
+
+  get frameNumber() {
+    return this._frameNumber;
+  }
+
+  get queryParams() {
+    if (!this._queryParamsString) {
+      this._queryParamsString = getQueryParamString(this._queryParams);
     }
-    /**
-     * Check if traversal is needed for particular viewport
-     * @param {string} viewportId - id of a viewport
-     * @return {boolean}
-     */
-    _needTraverse(viewportId) {
-        let traverserId = viewportId;
-        if (this.options.viewportTraversersMap) {
-            traverserId = this.options.viewportTraversersMap[viewportId];
-        }
-        if (traverserId !== viewportId) {
-            return false;
-        }
-        return true;
-    }
-    /**
-     * The callback to post-process tiles after traversal procedure
-     * @param frameState - frame state for tile culling
-     */
-    _onTraversalEnd(frameState) {
-        const id = frameState.viewport.id;
-        if (!this.frameStateData[id]) {
-            this.frameStateData[id] = { selectedTiles: [], _requestedTiles: [], _emptyTiles: [] };
-        }
-        const currentFrameStateData = this.frameStateData[id];
-        const selectedTiles = Object.values(this._traverser.selectedTiles);
-        currentFrameStateData.selectedTiles = selectedTiles;
-        currentFrameStateData._requestedTiles = Object.values(this._traverser.requestedTiles);
-        currentFrameStateData._emptyTiles = Object.values(this._traverser.emptyTiles);
+
+    return this._queryParamsString;
+  }
+
+  setProps(props) {
+    this.options = { ...this.options,
+      ...props
+    };
+  }
+
+  setOptions(options) {
+    this.options = { ...this.options,
+      ...options
+    };
+  }
+
+  getTileUrl(tilePath) {
+    const isDataUrl = tilePath.startsWith('data:');
+
+    if (isDataUrl) {
+      return tilePath;
+    }
+
+    return "".concat(tilePath).concat(this.queryParams);
+  }
+
+  hasExtension(extensionName) {
+    return Boolean(this._extensionsUsed && this._extensionsUsed.indexOf(extensionName) > -1);
+  }
+
+  update(viewports) {
+    if ('loadTiles' in this.options && !this.options.loadTiles) {
+      return;
+    }
+
+    if (this.traverseCounter > 0) {
+      return;
+    }
+
+    if (!viewports && this.lastUpdatedVieports) {
+      viewports = this.lastUpdatedVieports;
+    } else {
+      this.lastUpdatedVieports = viewports;
+    }
+
+    if (!(viewports instanceof Array)) {
+      viewports = [viewports];
+    }
+
+    this._cache.reset();
+
+    this._frameNumber++;
+    this.traverseCounter = viewports.length;
+    const viewportsToTraverse = [];
+
+    for (const viewport of viewports) {
+      const id = viewport.id;
+
+      if (this._needTraverse(id)) {
+        viewportsToTraverse.push(id);
+      } else {
         this.traverseCounter--;
-        if (this.traverseCounter > 0) {
-            return;
-        }
-        this._updateTiles();
-    }
-    /**
-     * Update tiles relying on data from all traversers
-     */
-    _updateTiles() {
-        this.selectedTiles = [];
-        this._requestedTiles = [];
-        this._emptyTiles = [];
-        for (const frameStateKey in this.frameStateData) {
-            const frameStateDataValue = this.frameStateData[frameStateKey];
-            this.selectedTiles = this.selectedTiles.concat(frameStateDataValue.selectedTiles);
-            this._requestedTiles = this._requestedTiles.concat(frameStateDataValue._requestedTiles);
-            this._emptyTiles = this._emptyTiles.concat(frameStateDataValue._emptyTiles);
-        }
-        this.selectedTiles = this.options.onTraversalComplete(this.selectedTiles);
-        for (const tile of this.selectedTiles) {
-            this._tiles[tile.id] = tile;
-        }
-        this._loadTiles();
-        this._unloadTiles();
-        this._updateStats();
+      }
     }
-    _tilesChanged(oldSelectedTiles, selectedTiles) {
-        if (oldSelectedTiles.length !== selectedTiles.length) {
-            return true;
-        }
-        const set1 = new Set(oldSelectedTiles.map((t) => t.id));
-        const set2 = new Set(selectedTiles.map((t) => t.id));
-        let changed = oldSelectedTiles.filter((x) => !set2.has(x.id)).length > 0;
-        changed = changed || selectedTiles.filter((x) => !set1.has(x.id)).length > 0;
-        return changed;
-    }
-    _loadTiles() {
-        // Sort requests by priority before making any requests.
-        // This makes it less likely this requests will be cancelled after being issued.
-        // requestedTiles.sort((a, b) => a._priority - b._priority);
-        for (const tile of this._requestedTiles) {
-            if (tile.contentUnloaded) {
-                // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                this._loadTile(tile);
-            }
-        }
+
+    for (const viewport of viewports) {
+      const id = viewport.id;
+
+      if (!this.roots[id]) {
+        this.roots[id] = this._initializeTileHeaders(this.tileset, null);
+      }
+
+      if (!viewportsToTraverse.includes(id)) {
+        continue;
+      }
+
+      const frameState = getFrameState(viewport, this._frameNumber);
+
+      this._traverser.traverse(this.roots[id], frameState, this.options);
     }
-    _unloadTiles() {
-        // unload tiles from cache when hit maximumMemoryUsage
-        this._cache.unloadTiles(this, (tileset, tile) => tileset._unloadTile(tile));
-    }
-    _updateStats() {
-        let tilesRenderable = 0;
-        let pointsRenderable = 0;
-        for (const tile of this.selectedTiles) {
-            if (tile.contentAvailable && tile.content) {
-                tilesRenderable++;
-                if (tile.content.pointCount) {
-                    pointsRenderable += tile.content.pointCount;
-                }
-            }
-        }
-        this.stats.get(TILES_IN_VIEW).count = this.selectedTiles.length;
-        this.stats.get(TILES_RENDERABLE).count = tilesRenderable;
-        this.stats.get(POINTS_COUNT).count = pointsRenderable;
-    }
-    _initializeTileSet(tilesetJson) {
-        this.root = this._initializeTileHeaders(tilesetJson, null);
-        // TODO CESIUM Specific
-        if (this.type === constants_1.TILESET_TYPE.TILES3D) {
-            this._initializeCesiumTileset(tilesetJson);
-        }
-        if (this.type === constants_1.TILESET_TYPE.I3S) {
-            this._initializeI3STileset();
-        }
-        // Calculate cartographicCenter & zoom props to help apps center view on tileset
-        this._calculateViewProps();
-    }
-    // Called during initialize Tileset to initialize the tileset's cartographic center (longitude, latitude) and zoom.
-    _calculateViewProps() {
-        const root = this.root;
-        (0, loader_utils_1.assert)(root);
-        const { center } = root.boundingVolume;
-        // TODO - handle all cases
-        if (!center) {
-            // eslint-disable-next-line
-            console.warn('center was not pre-calculated for the root tile');
-            this.cartographicCenter = new core_1.Vector3();
-            this.zoom = 1;
-            return;
-        }
-        this.cartographicCenter = geospatial_1.Ellipsoid.WGS84.cartesianToCartographic(center, new core_1.Vector3());
-        this.cartesianCenter = center;
-        this.zoom = (0, zoom_1.getZoomFromBoundingVolume)(root.boundingVolume);
-    }
-    _initializeStats() {
-        this.stats.get(TILES_TOTAL);
-        this.stats.get(TILES_LOADING);
-        this.stats.get(TILES_IN_MEMORY);
-        this.stats.get(TILES_IN_VIEW);
-        this.stats.get(TILES_RENDERABLE);
-        this.stats.get(TILES_LOADED);
-        this.stats.get(TILES_UNLOADED);
-        this.stats.get(TILES_LOAD_FAILED);
-        this.stats.get(POINTS_COUNT, 'memory');
-        this.stats.get(TILES_GPU_MEMORY, 'memory');
-    }
-    // Installs the main tileset JSON file or a tileset JSON file referenced from a tile.
-    // eslint-disable-next-line max-statements
-    _initializeTileHeaders(tilesetJson, parentTileHeader) {
-        // A tileset JSON file referenced from a tile may exist in a different directory than the root tileset.
-        // Get the basePath relative to the external tileset.
-        const rootTile = new tile_3d_1.default(this, tilesetJson.root, parentTileHeader); // resource
-        // If there is a parentTileHeader, add the root of the currently loading tileset
-        // to parentTileHeader's children, and update its depth.
-        if (parentTileHeader) {
-            parentTileHeader.children.push(rootTile);
-            rootTile.depth = parentTileHeader.depth + 1;
-        }
-        // Cesium 3d tiles knows the hierarchy beforehand
-        if (this.type === constants_1.TILESET_TYPE.TILES3D) {
-            const stack = [];
-            stack.push(rootTile);
-            while (stack.length > 0) {
-                const tile = stack.pop();
-                this.stats.get(TILES_TOTAL).incrementCount();
-                const children = tile.header.children || [];
-                for (const childHeader of children) {
-                    const childTile = new tile_3d_1.default(this, childHeader, tile);
-                    tile.children.push(childTile);
-                    childTile.depth = tile.depth + 1;
-                    stack.push(childTile);
-                }
-            }
-        }
-        return rootTile;
-    }
-    _initializeTraverser() {
-        let TraverserClass;
-        const type = this.type;
-        switch (type) {
-            case constants_1.TILESET_TYPE.TILES3D:
-                TraverserClass = tileset_3d_traverser_1.default;
-                break;
-            case constants_1.TILESET_TYPE.I3S:
-                TraverserClass = i3s_tileset_traverser_1.default;
-                break;
-            default:
-                TraverserClass = tileset_traverser_1.default;
-        }
-        return new TraverserClass({
-            basePath: this.basePath,
-            onTraversalEnd: this._onTraversalEnd.bind(this)
-        });
-    }
-    _destroyTileHeaders(parentTile) {
-        this._destroySubtree(parentTile);
-    }
-    async _loadTile(tile) {
-        let loaded;
-        try {
-            this._onStartTileLoading();
-            loaded = await tile.loadContent();
-        }
-        catch (error) {
-            this._onTileLoadError(tile, error);
-        }
-        finally {
-            this._onEndTileLoading();
-            this._onTileLoad(tile, loaded);
-        }
+  }
+
+  _needTraverse(viewportId) {
+    let traverserId = viewportId;
+
+    if (this.options.viewportTraversersMap) {
+      traverserId = this.options.viewportTraversersMap[viewportId];
     }
-    _onTileLoadError(tile, error) {
-        this.stats.get(TILES_LOAD_FAILED).incrementCount();
-        const message = error.message || error.toString();
-        const url = tile.url;
-        // TODO - Allow for probe log to be injected instead of console?
-        console.error(`A 3D tile failed to load: ${tile.url} ${message}`); // eslint-disable-line
-        this.options.onTileError(tile, message, url);
-    }
-    _onTileLoad(tile, loaded) {
-        if (!loaded) {
-            return;
-        }
-        // add coordinateOrigin and modelMatrix to tile
-        if (tile && tile.content) {
-            (0, transform_utils_1.calculateTransformProps)(tile, tile.content);
-        }
-        this._addTileToCache(tile);
-        this.options.onTileLoad(tile);
-    }
-    _onStartTileLoading() {
-        this._pendingCount++;
-        this.stats.get(TILES_LOADING).incrementCount();
-    }
-    _onEndTileLoading() {
-        this._pendingCount--;
-        this.stats.get(TILES_LOADING).decrementCount();
-    }
-    _addTileToCache(tile) {
-        this._cache.add(this, tile, (tileset) => tileset._updateCacheStats(tile));
-    }
-    _updateCacheStats(tile) {
-        this.stats.get(TILES_LOADED).incrementCount();
-        this.stats.get(TILES_IN_MEMORY).incrementCount();
-        // Good enough? Just use the raw binary ArrayBuffer's byte length.
-        this.gpuMemoryUsageInBytes += tile.content.byteLength || 0;
-        this.stats.get(TILES_GPU_MEMORY).count = this.gpuMemoryUsageInBytes;
-    }
-    _unloadTile(tile) {
-        this.gpuMemoryUsageInBytes -= (tile.content && tile.content.byteLength) || 0;
-        this.stats.get(TILES_IN_MEMORY).decrementCount();
-        this.stats.get(TILES_UNLOADED).incrementCount();
-        this.stats.get(TILES_GPU_MEMORY).count = this.gpuMemoryUsageInBytes;
-        this.options.onTileUnload(tile);
-        tile.unloadContent();
-    }
-    // Traverse the tree and destroy all tiles
-    _destroy() {
-        const stack = [];
-        if (this.root) {
-            stack.push(this.root);
-        }
-        while (stack.length > 0) {
-            const tile = stack.pop();
-            for (const child of tile.children) {
-                stack.push(child);
-            }
-            this._destroyTile(tile);
-        }
-        this.root = null;
-    }
-    // Traverse the tree and destroy all sub tiles
-    _destroySubtree(tile) {
-        const root = tile;
-        const stack = [];
-        stack.push(root);
-        while (stack.length > 0) {
-            tile = stack.pop();
-            for (const child of tile.children) {
-                stack.push(child);
-            }
-            if (tile !== root) {
-                this._destroyTile(tile);
-            }
-        }
-        root.children = [];
+
+    if (traverserId !== viewportId) {
+      return false;
+    }
+
+    return true;
+  }
+
+  _onTraversalEnd(frameState) {
+    const id = frameState.viewport.id;
+
+    if (!this.frameStateData[id]) {
+      this.frameStateData[id] = {
+        selectedTiles: [],
+        _requestedTiles: [],
+        _emptyTiles: []
+      };
     }
-    _destroyTile(tile) {
-        this._cache.unloadTile(this, tile);
-        this._unloadTile(tile);
-        tile.destroy();
+
+    const currentFrameStateData = this.frameStateData[id];
+    const selectedTiles = Object.values(this._traverser.selectedTiles);
+    currentFrameStateData.selectedTiles = selectedTiles;
+    currentFrameStateData._requestedTiles = Object.values(this._traverser.requestedTiles);
+    currentFrameStateData._emptyTiles = Object.values(this._traverser.emptyTiles);
+    this.traverseCounter--;
+
+    if (this.traverseCounter > 0) {
+      return;
     }
-    _initializeCesiumTileset(tilesetJson) {
-        this.asset = tilesetJson.asset;
-        if (!this.asset) {
-            throw new Error('Tileset must have an asset property.');
-        }
-        if (this.asset.version !== '0.0' && this.asset.version !== '1.0') {
-            throw new Error('The tileset must be 3D Tiles version 0.0 or 1.0.');
-        }
-        // Note: `asset.tilesetVersion` is version of the tileset itself (not the version of the 3D TILES standard)
-        // We add this version as a `v=1.0` query param to fetch the right version and not get an older cached version
-        if ('tilesetVersion' in this.asset) {
-            this._queryParams.v = this.asset.tilesetVersion;
+
+    this._updateTiles();
+  }
+
+  _updateTiles() {
+    this.selectedTiles = [];
+    this._requestedTiles = [];
+    this._emptyTiles = [];
+
+    for (const frameStateKey in this.frameStateData) {
+      const frameStateDataValue = this.frameStateData[frameStateKey];
+      this.selectedTiles = this.selectedTiles.concat(frameStateDataValue.selectedTiles);
+      this._requestedTiles = this._requestedTiles.concat(frameStateDataValue._requestedTiles);
+      this._emptyTiles = this._emptyTiles.concat(frameStateDataValue._emptyTiles);
+    }
+
+    this.selectedTiles = this.options.onTraversalComplete(this.selectedTiles);
+
+    for (const tile of this.selectedTiles) {
+      this._tiles[tile.id] = tile;
+    }
+
+    this._loadTiles();
+
+    this._unloadTiles();
+
+    this._updateStats();
+  }
+
+  _tilesChanged(oldSelectedTiles, selectedTiles) {
+    if (oldSelectedTiles.length !== selectedTiles.length) {
+      return true;
+    }
+
+    const set1 = new Set(oldSelectedTiles.map(t => t.id));
+    const set2 = new Set(selectedTiles.map(t => t.id));
+    let changed = oldSelectedTiles.filter(x => !set2.has(x.id)).length > 0;
+    changed = changed || selectedTiles.filter(x => !set1.has(x.id)).length > 0;
+    return changed;
+  }
+
+  _loadTiles() {
+    for (const tile of this._requestedTiles) {
+      if (tile.contentUnloaded) {
+        this._loadTile(tile);
+      }
+    }
+  }
+
+  _unloadTiles() {
+    this._cache.unloadTiles(this, (tileset, tile) => tileset._unloadTile(tile));
+  }
+
+  _updateStats() {
+    let tilesRenderable = 0;
+    let pointsRenderable = 0;
+
+    for (const tile of this.selectedTiles) {
+      if (tile.contentAvailable && tile.content) {
+        tilesRenderable++;
+
+        if (tile.content.pointCount) {
+          pointsRenderable += tile.content.pointCount;
         }
-        // TODO - ion resources have a credits property we can use for additional attribution.
-        this.credits = {
-            attributions: this.options.attributions || []
-        };
-        this.description = this.options.description || '';
-        // Gets the tileset's properties dictionary object, which contains metadata about per-feature properties.
-        this.properties = tilesetJson.properties;
-        this.geometricError = tilesetJson.geometricError;
-        this._extensionsUsed = tilesetJson.extensionsUsed;
-        // Returns the extras property at the top of the tileset JSON (application specific metadata).
-        this.extras = tilesetJson.extras;
-    }
-    _initializeI3STileset() {
-        if (this.loadOptions.i3s && 'token' in this.loadOptions.i3s) {
-            this._queryParams.token = this.loadOptions.i3s.token;
+      }
+    }
+
+    this.stats.get(TILES_IN_VIEW).count = this.selectedTiles.length;
+    this.stats.get(TILES_RENDERABLE).count = tilesRenderable;
+    this.stats.get(POINTS_COUNT).count = pointsRenderable;
+  }
+
+  _initializeTileSet(tilesetJson) {
+    this.root = this._initializeTileHeaders(tilesetJson, null);
+
+    if (this.type === TILESET_TYPE.TILES3D) {
+      this._initializeCesiumTileset(tilesetJson);
+    }
+
+    if (this.type === TILESET_TYPE.I3S) {
+      this._initializeI3STileset();
+    }
+
+    this._calculateViewProps();
+  }
+
+  _calculateViewProps() {
+    const root = this.root;
+    assert(root);
+    const {
+      center
+    } = root.boundingVolume;
+
+    if (!center) {
+      console.warn('center was not pre-calculated for the root tile');
+      this.cartographicCenter = new Vector3();
+      this.zoom = 1;
+      return;
+    }
+
+    this.cartographicCenter = Ellipsoid.WGS84.cartesianToCartographic(center, new Vector3());
+    this.cartesianCenter = center;
+    this.zoom = getZoomFromBoundingVolume(root.boundingVolume);
+  }
+
+  _initializeStats() {
+    this.stats.get(TILES_TOTAL);
+    this.stats.get(TILES_LOADING);
+    this.stats.get(TILES_IN_MEMORY);
+    this.stats.get(TILES_IN_VIEW);
+    this.stats.get(TILES_RENDERABLE);
+    this.stats.get(TILES_LOADED);
+    this.stats.get(TILES_UNLOADED);
+    this.stats.get(TILES_LOAD_FAILED);
+    this.stats.get(POINTS_COUNT, 'memory');
+    this.stats.get(TILES_GPU_MEMORY, 'memory');
+  }
+
+  _initializeTileHeaders(tilesetJson, parentTileHeader) {
+    const rootTile = new Tile3D(this, tilesetJson.root, parentTileHeader);
+
+    if (parentTileHeader) {
+      parentTileHeader.children.push(rootTile);
+      rootTile.depth = parentTileHeader.depth + 1;
+    }
+
+    if (this.type === TILESET_TYPE.TILES3D) {
+      const stack = [];
+      stack.push(rootTile);
+
+      while (stack.length > 0) {
+        const tile = stack.pop();
+        this.stats.get(TILES_TOTAL).incrementCount();
+        const children = tile.header.children || [];
+
+        for (const childHeader of children) {
+          const childTile = new Tile3D(this, childHeader, tile);
+          tile.children.push(childTile);
+          childTile.depth = tile.depth + 1;
+          stack.push(childTile);
         }
+      }
     }
+
+    return rootTile;
+  }
+
+  _initializeTraverser() {
+    let TraverserClass;
+    const type = this.type;
+
+    switch (type) {
+      case TILESET_TYPE.TILES3D:
+        TraverserClass = Tileset3DTraverser;
+        break;
+
+      case TILESET_TYPE.I3S:
+        TraverserClass = I3SetTraverser;
+        break;
+
+      default:
+        TraverserClass = TilesetTraverser;
+    }
+
+    return new TraverserClass({
+      basePath: this.basePath,
+      onTraversalEnd: this._onTraversalEnd.bind(this)
+    });
+  }
+
+  _destroyTileHeaders(parentTile) {
+    this._destroySubtree(parentTile);
+  }
+
+  async _loadTile(tile) {
+    let loaded;
+
+    try {
+      this._onStartTileLoading();
+
+      loaded = await tile.loadContent();
+    } catch (error) {
+      this._onTileLoadError(tile, error);
+    } finally {
+      this._onEndTileLoading();
+
+      this._onTileLoad(tile, loaded);
+    }
+  }
+
+  _onTileLoadError(tile, error) {
+    this.stats.get(TILES_LOAD_FAILED).incrementCount();
+    const message = error.message || error.toString();
+    const url = tile.url;
+    console.error("A 3D tile failed to load: ".concat(tile.url, " ").concat(message));
+    this.options.onTileError(tile, message, url);
+  }
+
+  _onTileLoad(tile, loaded) {
+    if (!loaded) {
+      return;
+    }
+
+    if (tile && tile.content) {
+      calculateTransformProps(tile, tile.content);
+    }
+
+    this._addTileToCache(tile);
+
+    this.options.onTileLoad(tile);
+  }
+
+  _onStartTileLoading() {
+    this._pendingCount++;
+    this.stats.get(TILES_LOADING).incrementCount();
+  }
+
+  _onEndTileLoading() {
+    this._pendingCount--;
+    this.stats.get(TILES_LOADING).decrementCount();
+  }
+
+  _addTileToCache(tile) {
+    this._cache.add(this, tile, tileset => tileset._updateCacheStats(tile));
+  }
+
+  _updateCacheStats(tile) {
+    this.stats.get(TILES_LOADED).incrementCount();
+    this.stats.get(TILES_IN_MEMORY).incrementCount();
+    this.gpuMemoryUsageInBytes += tile.content.byteLength || 0;
+    this.stats.get(TILES_GPU_MEMORY).count = this.gpuMemoryUsageInBytes;
+  }
+
+  _unloadTile(tile) {
+    this.gpuMemoryUsageInBytes -= tile.content && tile.content.byteLength || 0;
+    this.stats.get(TILES_IN_MEMORY).decrementCount();
+    this.stats.get(TILES_UNLOADED).incrementCount();
+    this.stats.get(TILES_GPU_MEMORY).count = this.gpuMemoryUsageInBytes;
+    this.options.onTileUnload(tile);
+    tile.unloadContent();
+  }
+
+  _destroy() {
+    const stack = [];
+
+    if (this.root) {
+      stack.push(this.root);
+    }
+
+    while (stack.length > 0) {
+      const tile = stack.pop();
+
+      for (const child of tile.children) {
+        stack.push(child);
+      }
+
+      this._destroyTile(tile);
+    }
+
+    this.root = null;
+  }
+
+  _destroySubtree(tile) {
+    const root = tile;
+    const stack = [];
+    stack.push(root);
+
+    while (stack.length > 0) {
+      tile = stack.pop();
+
+      for (const child of tile.children) {
+        stack.push(child);
+      }
+
+      if (tile !== root) {
+        this._destroyTile(tile);
+      }
+    }
+
+    root.children = [];
+  }
+
+  _destroyTile(tile) {
+    this._cache.unloadTile(this, tile);
+
+    this._unloadTile(tile);
+
+    tile.destroy();
+  }
+
+  _initializeCesiumTileset(tilesetJson) {
+    this.asset = tilesetJson.asset;
+
+    if (!this.asset) {
+      throw new Error('Tileset must have an asset property.');
+    }
+
+    if (this.asset.version !== '0.0' && this.asset.version !== '1.0') {
+      throw new Error('The tileset must be 3D Tiles version 0.0 or 1.0.');
+    }
+
+    if ('tilesetVersion' in this.asset) {
+      this._queryParams.v = this.asset.tilesetVersion;
+    }
+
+    this.credits = {
+      attributions: this.options.attributions || []
+    };
+    this.description = this.options.description || '';
+    this.properties = tilesetJson.properties;
+    this.geometricError = tilesetJson.geometricError;
+    this._extensionsUsed = tilesetJson.extensionsUsed;
+    this.extras = tilesetJson.extras;
+  }
+
+  _initializeI3STileset() {
+    if (this.loadOptions.i3s && 'token' in this.loadOptions.i3s) {
+      this._queryParams.token = this.loadOptions.i3s.token;
+    }
+  }
+
 }
-exports.default = Tileset3D;
+
 function getQueryParamString(queryParams) {
-    const queryParamStrings = [];
-    for (const key of Object.keys(queryParams)) {
-        queryParamStrings.push(`${key}=${queryParams[key]}`);
-    }
-    switch (queryParamStrings.length) {
-        case 0:
-            return '';
-        case 1:
-            return `?${queryParamStrings[0]}`;
-        default:
-            return `?${queryParamStrings.join('&')}`;
-    }
+  const queryParamStrings = [];
+
+  for (const key of Object.keys(queryParams)) {
+    queryParamStrings.push("".concat(key, "=").concat(queryParams[key]));
+  }
+
+  switch (queryParamStrings.length) {
+    case 0:
+      return '';
+
+    case 1:
+      return "?".concat(queryParamStrings[0]);
+
+    default:
+      return "?".concat(queryParamStrings.join('&'));
+  }
 }
+//# sourceMappingURL=tileset-3d.js.map