@loaders.gl/tiles 3.3.0-alpha.1 → 3.3.0-alpha.11

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

@@ -1,4 +1,5 @@
 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';
@@ -38,6 +39,7 @@ const DEFAULT_PROPS = {
   basePath: '',
   i3s: {}
 };
+
 const TILES_TOTAL = 'Tiles In Tileset(s)';
 const TILES_IN_MEMORY = 'Tiles In Memory';
 const TILES_IN_VIEW = 'Tiles In View';
@@ -49,101 +51,64 @@ const TILES_LOAD_FAILED = 'Failed Tile Loads';
 const POINTS_COUNT = 'Points/Vertices';
 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, "contentFormats", {
+      draco: false,
+      meshopt: false,
+      dds: false,
+      ktx2: false
+    });
     _defineProperty(this, "traverseCounter", void 0);
-
     _defineProperty(this, "geometricError", void 0);
-
     _defineProperty(this, "selectedTiles", void 0);
-
     _defineProperty(this, "updatePromise", null);
-
     _defineProperty(this, "tilesetInitializationPromise", 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,
+
+    this.options = {
+      ...DEFAULT_PROPS,
       ...options
     };
     this.tileset = json;
@@ -153,6 +118,7 @@ export default class Tileset3D {
     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;
@@ -163,6 +129,7 @@ export default class Tileset3D {
     this.cartesianCenter = null;
     this.zoom = 1;
     this.boundingVolume = null;
+
     this.traverseCounter = 0;
     this.geometricError = 0;
     this._traverser = this._initializeTraverser();
@@ -172,7 +139,9 @@ export default class Tileset3D {
       maxRequests: this.options.maxRequests
     });
     this._frameNumber = 0;
+
     this._pendingCount = 0;
+
     this._tiles = {};
     this.selectedTiles = [];
     this._emptyTiles = [];
@@ -181,12 +150,12 @@ export default class Tileset3D {
     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;
@@ -205,42 +174,37 @@ export default class Tileset3D {
   isLoaded() {
     return this._pendingCount === 0 && this._frameNumber !== 0 && this._requestedTiles.length === 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,
+    this.options = {
+      ...this.options,
       ...props
     };
   }
 
   setOptions(options) {
-    this.options = { ...this.options,
+    this.options = {
+      ...this.options,
       ...options
     };
   }
 
   getTileUrl(tilePath) {
     const isDataUrl = tilePath.startsWith('data:');
-
     if (isDataUrl) {
       return tilePath;
     }
-
     return "".concat(tilePath).concat(this.queryParams);
   }
 
@@ -248,60 +212,54 @@ export default class Tileset3D {
     return Boolean(this._extensionsUsed && this._extensionsUsed.indexOf(extensionName) > -1);
   }
 
-  update(viewports = null) {
+  update() {
+    let viewports = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     this.tilesetInitializationPromise.then(() => {
       if (!viewports && this.lastUpdatedVieports) {
         viewports = this.lastUpdatedVieports;
       } else {
         this.lastUpdatedVieports = viewports;
       }
-
-      this.doUpdate(viewports);
+      if (viewports) {
+        this.doUpdate(viewports);
+      }
     });
   }
 
-  async selectTiles(viewports = null) {
+  async selectTiles() {
+    let viewports = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     await this.tilesetInitializationPromise;
-
     if (viewports) {
       this.lastUpdatedVieports = viewports;
     }
-
     if (!this.updatePromise) {
       this.updatePromise = new Promise(resolve => {
         setTimeout(() => {
-          this.doUpdate(this.lastUpdatedVieports);
+          if (this.lastUpdatedVieports) {
+            this.doUpdate(this.lastUpdatedVieports);
+          }
           resolve(this._frameNumber);
           this.updatePromise = null;
         }, this.options.debounceTime);
       });
     }
-
     return this.updatePromise;
   }
 
-  doUpdate(viewports = null) {
+  doUpdate(viewports) {
     if ('loadTiles' in this.options && !this.options.loadTiles) {
       return;
     }
-
     if (this.traverseCounter > 0) {
       return;
     }
-
-    if (!(viewports instanceof Array)) {
-      viewports = [viewports];
-    }
-
+    const preparedViewports = viewports instanceof Array ? viewports : [viewports];
     this._cache.reset();
-
     this._frameNumber++;
-    this.traverseCounter = viewports.length;
+    this.traverseCounter = preparedViewports.length;
     const viewportsToTraverse = [];
-
-    for (const viewport of viewports) {
+    for (const viewport of preparedViewports) {
       const id = viewport.id;
-
       if (this._needTraverse(id)) {
         viewportsToTraverse.push(id);
       } else {
@@ -309,40 +267,33 @@ export default class Tileset3D {
       }
     }
 
-    for (const viewport of viewports) {
+    for (const viewport of preparedViewports) {
       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: [],
@@ -350,24 +301,19 @@ export default class Tileset3D {
         _emptyTiles: []
       };
     }
-
     const currentFrameStateData = this.frameStateData[id];
     const selectedTiles = Object.values(this._traverser.selectedTiles);
     const [filteredSelectedTiles, unselectedTiles] = limitSelectedTiles(selectedTiles, frameState, this.options.maximumTilesSelected);
     currentFrameStateData.selectedTiles = filteredSelectedTiles;
-
     for (const tile of unselectedTiles) {
       tile.unselect();
     }
-
     currentFrameStateData._requestedTiles = Object.values(this._traverser.requestedTiles);
     currentFrameStateData._emptyTiles = Object.values(this._traverser.emptyTiles);
     this.traverseCounter--;
-
     if (this.traverseCounter > 0) {
       return;
     }
-
     this._updateTiles();
   }
 
@@ -375,39 +321,30 @@ export default class Tileset3D {
     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) {
@@ -415,19 +352,15 @@ export default class Tileset3D {
       }
     }
   }
-
   _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;
         } else {
@@ -435,26 +368,20 @@ export default class Tileset3D {
         }
       }
     }
-
     this.stats.get(TILES_IN_VIEW).count = this.selectedTiles.length;
     this.stats.get(TILES_RENDERABLE).count = tilesRenderable;
     this.stats.get(POINTS_COUNT).count = pointsRenderable;
   }
-
   async _initializeTileSet(tilesetJson) {
     if (this.type === TILESET_TYPE.I3S) {
       this.calculateViewPropsI3S();
       tilesetJson.root = await tilesetJson.root;
     }
-
     this.root = this._initializeTileHeaders(tilesetJson, null);
-
     if (this.type === TILESET_TYPE.TILES3D) {
       this._initializeTiles3DTileset(tilesetJson);
-
       this.calculateViewPropsTiles3D();
     }
-
     if (this.type === TILESET_TYPE.I3S) {
       this._initializeI3STileset();
     }
@@ -462,9 +389,7 @@ export default class Tileset3D {
 
   calculateViewPropsI3S() {
     var _this$tileset$store;
-
     const fullExtent = this.tileset.fullExtent;
-
     if (fullExtent) {
       const {
         xmin,
@@ -479,9 +404,7 @@ export default class Tileset3D {
       this.zoom = getZoomFromFullExtent(fullExtent, this.cartographicCenter, this.cartesianCenter);
       return;
     }
-
     const extent = (_this$tileset$store = this.tileset.store) === null || _this$tileset$store === void 0 ? void 0 : _this$tileset$store.extent;
-
     if (extent) {
       const [xmin, ymin, xmax, ymax] = extent;
       this.cartographicCenter = new Vector3(xmin + (xmax - xmin) / 2, ymin + (ymax - ymin) / 2, 0);
@@ -489,7 +412,6 @@ export default class Tileset3D {
       this.zoom = getZoomFromExtent(extent, this.cartographicCenter, this.cartesianCenter);
       return;
     }
-
     console.warn('Extent is not defined in the tileset header');
     this.cartographicCenter = new Vector3();
     this.zoom = 1;
@@ -502,7 +424,6 @@ export default class Tileset3D {
     const {
       center
     } = root.boundingVolume;
-
     if (!center) {
       console.warn('center was not pre-calculated for the root tile');
       this.cartographicCenter = new Vector3();
@@ -515,11 +436,9 @@ export default class Tileset3D {
     } else {
       this.cartographicCenter = new Vector3(0, 0, -Ellipsoid.WGS84.radii[0]);
     }
-
     this.cartesianCenter = center;
     this.zoom = getZoomFromBoundingVolume(root.boundingVolume, this.cartographicCenter);
   }
-
   _initializeStats() {
     this.stats.get(TILES_TOTAL);
     this.stats.get(TILES_LOADING);
@@ -529,7 +448,7 @@ export default class Tileset3D {
     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(POINTS_COUNT);
     this.stats.get(TILES_GPU_MEMORY, 'memory');
   }
 
@@ -544,12 +463,10 @@ export default class Tileset3D {
     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);
@@ -558,53 +475,41 @@ export default class Tileset3D {
         }
       }
     }
-
     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();
@@ -612,15 +517,12 @@ export default class Tileset3D {
     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 (this.type === TILESET_TYPE.I3S) {
       var _this$tileset, _this$tileset$nodePag;
-
       const nodesInNodePages = ((_this$tileset = this.tileset) === null || _this$tileset === void 0 ? void 0 : (_this$tileset$nodePag = _this$tileset.nodePagesTile) === null || _this$tileset$nodePag === void 0 ? void 0 : _this$tileset$nodePag.nodesInNodePages) || 0;
       this.stats.get(TILES_TOTAL).reset();
       this.stats.get(TILES_TOTAL).addCount(nodesInNodePages);
@@ -629,33 +531,59 @@ export default class Tileset3D {
     if (tile && tile.content) {
       calculateTransformProps(tile, tile.content);
     }
-
+    this.updateContentTypes(tile);
     this._addTileToCache(tile);
-
     this.options.onTileLoad(tile);
   }
 
+  updateContentTypes(tile) {
+    if (this.type === TILESET_TYPE.I3S) {
+      if (tile.header.isDracoGeometry) {
+        this.contentFormats.draco = true;
+      }
+      switch (tile.header.textureFormat) {
+        case 'dds':
+          this.contentFormats.dds = true;
+          break;
+        case 'ktx2':
+          this.contentFormats.ktx2 = true;
+          break;
+        default:
+      }
+    } else if (this.type === TILESET_TYPE.TILES3D) {
+      var _tile$content;
+      const {
+        extensionsRemoved = []
+      } = ((_tile$content = tile.content) === null || _tile$content === void 0 ? void 0 : _tile$content.gltf) || {};
+      if (extensionsRemoved.includes('KHR_draco_mesh_compression')) {
+        this.contentFormats.draco = true;
+      }
+      if (extensionsRemoved.includes('EXT_meshopt_compression')) {
+        this.contentFormats.meshopt = true;
+      }
+      if (extensionsRemoved.includes('KHR_texture_basisu')) {
+        this.contentFormats.ktx2 = true;
+      }
+    }
+  }
   _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();
@@ -667,21 +595,16 @@ export default class Tileset3D {
 
   _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;
   }
 
@@ -689,37 +612,27 @@ export default class Tileset3D {
     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();
   }
-
   _initializeTiles3DTileset(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.');
     }
@@ -732,34 +645,28 @@ export default class Tileset3D {
       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('&'));
   }