@loaders.gl/tiles 3.1.0-alpha.2 → 3.1.0-beta.1

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

@@ -0,0 +1,674 @@
+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: 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: {}
+};
+const TILES_TOTAL = 'Tiles In Tileset(s)';
+const TILES_IN_MEMORY = 'Tiles In Memory';
+const TILES_IN_VIEW = 'Tiles In View';
+const TILES_RENDERABLE = 'Tiles To Render';
+const TILES_LOADED = 'Tiles Loaded';
+const TILES_LOADING = 'Tiles Loading';
+const TILES_UNLOADED = 'Tiles Unloaded';
+const TILES_LOAD_FAILED = 'Failed Tile Loads';
+const POINTS_COUNT = 'Points';
+const TILES_GPU_MEMORY = 'Tile Memory Use';
+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);
+    }
+
+    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--;
+      }
+    }
+
+    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);
+    }
+  }
+
+  _needTraverse(viewportId) {
+    let traverserId = viewportId;
+
+    if (this.options.viewportTraversersMap) {
+      traverserId = this.options.viewportTraversersMap[viewportId];
+    }
+
+    if (traverserId !== viewportId) {
+      return false;
+    }
+
+    return true;
+  }
+
+  _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);
+    this.traverseCounter--;
+
+    if (this.traverseCounter > 0) {
+      return;
+    }
+
+    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;
+        }
+      }
+    }
+
+    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;
+    }
+  }
+
+}
+
+function getQueryParamString(queryParams) {
+  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