@loaders.gl/tiles 3.2.0-alpha.1 → 3.2.0-alpha.4

package/src/tileset/helpers/zoom.ts

@@ -1,5 +1,6 @@
 import {Vector3} from '@math.gl/core';
 import {BoundingSphere, OrientedBoundingBox} from '@math.gl/culling';
+import {Ellipsoid} from '@math.gl/geospatial';
 import {BoundingRectangle} from '../../types';
 
 const WGS84_RADIUS_X = 6378137.0;
@@ -42,6 +43,69 @@ export function getZoomFromBoundingVolume(
   return 1;
 }
 
+/**
+ * Calculate initial zoom for the tileset from 3D `fullExtent` defined in
+ * the tileset metadata
+ * @param fullExtent - 3D extent of the tileset
+ * @param fullExtent.xmin - minimal longitude in decimal degrees
+ * @param fullExtent.xmax - maximal longitude in decimal degrees
+ * @param fullExtent.ymin - minimal latitude in decimal degrees
+ * @param fullExtent.ymax - maximal latitude in decimal degrees
+ * @param fullExtent.zmin - minimal elevation in meters
+ * @param fullExtent.zmax - maximal elevation in meters
+ * @param cartorgraphicCenter - tileset center in cartographic coordinate system
+ * @param cartesianCenter - tileset center in cartesian coordinate system
+ * @returns - initial zoom for the tileset
+ */
+export function getZoomFromFullExtent(
+  fullExtent: {
+    xmin: number;
+    xmax: number;
+    ymin: number;
+    ymax: number;
+    zmin: number;
+    zmax: number;
+  },
+  cartorgraphicCenter: Vector3,
+  cartesianCenter: Vector3
+) {
+  const extentVertex = Ellipsoid.WGS84.cartographicToCartesian(
+    [fullExtent.xmax, fullExtent.ymax, fullExtent.zmax],
+    new Vector3()
+  );
+  const extentSize = Math.sqrt(
+    Math.pow(extentVertex[0] - cartesianCenter[0], 2) +
+      Math.pow(extentVertex[1] - cartesianCenter[1], 2) +
+      Math.pow(extentVertex[2] - cartesianCenter[2], 2)
+  );
+  return Math.log2(WGS84_RADIUS_Z / (extentSize + cartorgraphicCenter[2]));
+}
+
+/**
+ * Calculate initial zoom for the tileset from 2D `extent` defined in
+ * the tileset metadata
+ * @param extent - 2D extent of the tileset. It is array of 4 elements [xmin, ymin, xmax, ymax]
+ * @param extent[0] - minimal longitude in decimal degrees
+ * @param extent[1] - minimal latitude in decimal degrees
+ * @param extent[2] - maximal longitude in decimal degrees
+ * @param extent[3] - maximal latitude in decimal degrees
+ * @param cartorgraphicCenter - tileset center in cartographic coordinate system
+ * @param cartesianCenter - tileset center in cartesian coordinate system
+ * @returns - initial zoom for the tileset
+ */
+export function getZoomFromExtent(
+  extent: [number, number, number, number],
+  cartorgraphicCenter: Vector3,
+  cartesianCenter: Vector3
+) {
+  const [xmin, ymin, xmax, ymax] = extent;
+  return getZoomFromFullExtent(
+    {xmin, xmax, ymin, ymax, zmin: 0, zmax: 0},
+    cartorgraphicCenter,
+    cartesianCenter
+  );
+}
+
 function getObbSize(halfAxes) {
   halfAxes.getColumn(0, scratchVector);
   const axeY = halfAxes.getColumn(1);

package/src/tileset/tileset-3d.ts

@@ -49,7 +49,7 @@ import {
 import TilesetCache from './tileset-cache';
 import {calculateTransformProps} from './helpers/transform-utils';
 import {FrameState, getFrameState, limitSelectedTiles} from './helpers/frame-state';
-import {getZoomFromBoundingVolume} from './helpers/zoom';
+import {getZoomFromBoundingVolume, getZoomFromExtent, getZoomFromFullExtent} from './helpers/zoom';
 import Tile3D from './tile-3d';
 import Tileset3DTraverser from './traversers/tileset-3d-traverser';
 import TilesetTraverser from './traversers/tileset-traverser';
@@ -157,7 +157,6 @@ const DEFAULT_PROPS: Props = {
   // View distance scale modifier
   viewDistanceScale: 1.0,
 
-  // TODO CESIUM
   // The maximum screen space error used to drive level of detail refinement.
   maximumScreenSpaceError: 8,
 
@@ -182,7 +181,7 @@ 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 POINTS_COUNT = 'Points/Vertices';
 const TILES_GPU_MEMORY = 'Tile Memory Use';
 
 export default class Tileset3D {
@@ -216,6 +215,7 @@ export default class Tileset3D {
   geometricError: number;
   selectedTiles: Tile3D[];
   private updatePromise: Promise<number> | null = null;
+  tilesetInitializationPromise: Promise<void>;
 
   cartographicCenter: Vector3 | null;
   cartesianCenter: Vector3 | null;
@@ -333,7 +333,7 @@ export default class Tileset3D {
     this.credits = {};
     this.description = this.options.description || '';
 
-    this._initializeTileSet(json);
+    this.tilesetInitializationPromise = this._initializeTileSet(json);
   }
 
   /** Release resources */
@@ -344,7 +344,7 @@ export default class Tileset3D {
   /** Is the tileset loaded (update needs to have been called at least once) */
   isLoaded(): boolean {
     // Check that `_frameNumber !== 0` which means that update was called at least once
-    return this._pendingCount === 0 && this._frameNumber !== 0;
+    return this._pendingCount === 0 && this._frameNumber !== 0 && this._requestedTiles.length === 0;
   }
 
   get tiles(): object[] {
@@ -394,12 +394,15 @@ export default class Tileset3D {
    * @deprecated
    */
   update(viewports: any[] | null = null) {
-    if (!viewports && this.lastUpdatedVieports) {
-      viewports = this.lastUpdatedVieports;
-    } else {
-      this.lastUpdatedVieports = viewports;
-    }
-    this.doUpdate(viewports);
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this.tilesetInitializationPromise.then(() => {
+      if (!viewports && this.lastUpdatedVieports) {
+        viewports = this.lastUpdatedVieports;
+      } else {
+        this.lastUpdatedVieports = viewports;
+      }
+      this.doUpdate(viewports);
+    });
   }
 
   /**
@@ -409,6 +412,7 @@ export default class Tileset3D {
    * @returns Promise of new frameNumber
    */
   async selectTiles(viewports: any[] | null = null): Promise<number> {
+    await this.tilesetInitializationPromise;
     if (viewports) {
       this.lastUpdatedVieports = viewports;
     }
@@ -580,6 +584,9 @@ export default class Tileset3D {
         tilesRenderable++;
         if (tile.content.pointCount) {
           pointsRenderable += tile.content.pointCount;
+        } else {
+          // Calculate vertices for non point cloud tiles.
+          pointsRenderable += tile.content.vertexCount;
         }
       }
     }
@@ -589,29 +596,78 @@ export default class Tileset3D {
     this.stats.get(POINTS_COUNT).count = pointsRenderable;
   }
 
-  _initializeTileSet(tilesetJson) {
+  async _initializeTileSet(tilesetJson) {
+    if (this.type === TILESET_TYPE.I3S) {
+      this.calculateViewPropsI3S();
+      tilesetJson.root = await tilesetJson.root;
+    }
     this.root = this._initializeTileHeaders(tilesetJson, null);
 
-    // TODO CESIUM Specific
     if (this.type === TILESET_TYPE.TILES3D) {
-      this._initializeCesiumTileset(tilesetJson);
+      this._initializeTiles3DTileset(tilesetJson);
+      this.calculateViewPropsTiles3D();
     }
 
     if (this.type === 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() {
+  /**
+   * Called during initialize Tileset to initialize the tileset's cartographic center (longitude, latitude) and zoom.
+   * These metrics help apps center view on tileset
+   * For I3S there is extent (<1.8 version) or fullExtent (>=1.8 version) to calculate view props
+   * @returns
+   */
+  private calculateViewPropsI3S() {
+    // for I3S 1.8 try to calculate with fullExtent
+    const fullExtent = this.tileset.fullExtent;
+    if (fullExtent) {
+      const {xmin, xmax, ymin, ymax, zmin, zmax} = fullExtent;
+      this.cartographicCenter = new Vector3(
+        xmin + (xmax - xmin) / 2,
+        ymin + (ymax - ymin) / 2,
+        zmin + (zmax - zmin) / 2
+      );
+      this.cartesianCenter = Ellipsoid.WGS84.cartographicToCartesian(
+        this.cartographicCenter,
+        new Vector3()
+      );
+      this.zoom = getZoomFromFullExtent(fullExtent, this.cartographicCenter, this.cartesianCenter);
+      return;
+    }
+    // for I3S 1.6-1.7 try to calculate with extent
+    const extent = 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);
+      this.cartesianCenter = Ellipsoid.WGS84.cartographicToCartesian(
+        this.cartographicCenter,
+        new Vector3()
+      );
+      this.zoom = getZoomFromExtent(extent, this.cartographicCenter, this.cartesianCenter);
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.warn('Extent is not defined in the tileset header');
+    this.cartographicCenter = new Vector3();
+    this.zoom = 1;
+    return;
+  }
+
+  /**
+   * Called during initialize Tileset to initialize the tileset's cartographic center (longitude, latitude) and zoom.
+   * These metrics help apps center view on tileset.
+   * For 3DTiles the root tile data is used to calculate view props.
+   * @returns
+   */
+  private calculateViewPropsTiles3D() {
     const root = this.root as Tile3D;
     assert(root);
     const {center} = root.boundingVolume;
     // TODO - handle all cases
     if (!center) {
-      // eslint-disable-next-line
+      // eslint-disable-next-line no-console
       console.warn('center was not pre-calculated for the root tile');
       this.cartographicCenter = new Vector3();
       this.zoom = 1;
@@ -649,7 +705,7 @@ export default class Tileset3D {
       rootTile.depth = parentTileHeader.depth + 1;
     }
 
-    // Cesium 3d tiles knows the hierarchy beforehand
+    // 3DTiles knows the hierarchy beforehand
     if (this.type === TILESET_TYPE.TILES3D) {
       const stack: Tile3D[] = [];
       stack.push(rootTile);
@@ -722,6 +778,13 @@ export default class Tileset3D {
       return;
     }
 
+    if (this.type === TILESET_TYPE.I3S) {
+      // We can't calculate tiles total in I3S in advance so we calculate it dynamically.
+      const nodesInNodePages = this.tileset?.nodePagesTile?.nodesInNodePages || 0;
+      this.stats.get(TILES_TOTAL).reset();
+      this.stats.get(TILES_TOTAL).addCount(nodesInNodePages);
+    }
+
     // add coordinateOrigin and modelMatrix to tile
     if (tile && tile.content) {
       calculateTransformProps(tile, tile.content);
@@ -808,7 +871,7 @@ export default class Tileset3D {
     tile.destroy();
   }
 
-  _initializeCesiumTileset(tilesetJson) {
+  _initializeTiles3DTileset(tilesetJson) {
     this.asset = tilesetJson.asset;
     if (!this.asset) {
       throw new Error('Tileset must have an asset property.');

package/src/tileset/traversers/i3s-frame-counter.ts

@@ -0,0 +1,35 @@
+/**
+ * Counter to register pending tile headers for the particular frameNumber
+ * Until all tiles are loaded we won't call `onTraversalEnd` callback
+ */
+export default class I3SPendingTilesRegister {
+  private frameNumberMap: Map<number, number> = new Map();
+
+  /**
+   * Register a new pending tile header for the particular frameNumber
+   * @param frameNumber
+   */
+  register(frameNumber: number) {
+    const oldCount = this.frameNumberMap.get(frameNumber) || 0;
+    this.frameNumberMap.set(frameNumber, (oldCount || 0) + 1);
+  }
+
+  /**
+   * Deregister a pending tile header for the particular frameNumber
+   * @param frameNumber
+   */
+  deregister(frameNumber: number) {
+    const oldCount = this.frameNumberMap.get(frameNumber) || 1;
+    this.frameNumberMap.set(frameNumber, (oldCount || 0) - 1);
+  }
+
+  /**
+   * Check is there are no pending tile headers registered for the particular frameNumber
+   * @param frameNumber
+   * @returns
+   */
+  isZero(frameNumber: number) {
+    const count = this.frameNumberMap.get(frameNumber) || 0;
+    return count === 0;
+  }
+}

package/src/tileset/traversers/i3s-tile-manager.ts

@@ -1,3 +1,6 @@
+import {FrameState} from '../helpers/frame-state';
+import I3SPendingTilesRegister from './i3s-frame-counter';
+
 const STATUS = {
   REQUESTED: 'REQUESTED',
   COMPLETED: 'COMPLETED',
@@ -7,28 +10,40 @@ const STATUS = {
 // A helper class to manage tile metadata fetching
 export default class I3STileManager {
   private _statusMap: object;
+  private pendingTilesRegister = new I3SPendingTilesRegister();
 
   constructor() {
     this._statusMap = {};
   }
 
-  add(request, key, callback, frameState) {
+  add(request, key, callback, frameState: FrameState) {
     if (!this._statusMap[key]) {
+      const {frameNumber} = frameState;
       this._statusMap[key] = {request, callback, key, frameState, status: STATUS.REQUESTED};
+      // Register pending request for the frameNumber
+      this.pendingTilesRegister.register(frameNumber);
       request()
         .then((data) => {
           this._statusMap[key].status = STATUS.COMPLETED;
+          // Deregister pending request for the frameNumber
+          this.pendingTilesRegister.deregister(frameNumber);
           this._statusMap[key].callback(data, frameState);
         })
         .catch((error) => {
           this._statusMap[key].status = STATUS.ERROR;
+          // Deregister pending request for the frameNumber
+          this.pendingTilesRegister.deregister(frameNumber);
           callback(error);
         });
     }
   }
 
-  update(key, frameState) {
+  update(key, frameState: FrameState) {
     if (this._statusMap[key]) {
+      // Deregister pending request for the old frameNumber
+      this.pendingTilesRegister.deregister(this._statusMap[key].frameState.frameNumber);
+      // Register pending request for the new frameNumber
+      this.pendingTilesRegister.register(frameState.frameNumber);
       this._statusMap[key].frameState = frameState;
     }
   }
@@ -36,4 +51,13 @@ export default class I3STileManager {
   find(key) {
     return this._statusMap[key];
   }
+
+  /**
+   * Check it there are pending tile headers for the particular frameNumber
+   * @param frameNumber
+   * @returns
+   */
+  hasPendingTiles(frameNumber: number): boolean {
+    return !this.pendingTilesRegister.isZero(frameNumber);
+  }
 }

package/src/tileset/traversers/i3s-tileset-traverser.ts

@@ -4,21 +4,31 @@ import TilesetTraverser from './tileset-traverser';
 import {getLodStatus} from '../helpers/i3s-lod';
 import TileHeader from '../tile-3d';
 import I3STileManager from './i3s-tile-manager';
+import {FrameState} from '../helpers/frame-state';
 
 export default class I3STilesetTraverser extends TilesetTraverser {
   private _tileManager: I3STileManager;
 
+  /**
+   * Check if there are no penging tile header requests,
+   * that means the traversal is finished and we can call
+   * following-up callbacks.
+   */
+  protected get traversalFinished(): boolean {
+    return !this._tileManager.hasPendingTiles(this._frameNumber || 0);
+  }
+
   constructor(options) {
     super(options);
     this._tileManager = new I3STileManager();
   }
 
-  shouldRefine(tile, frameState) {
+  shouldRefine(tile, frameState: FrameState) {
     tile._lodJudge = getLodStatus(tile, frameState);
     return tile._lodJudge === 'DIG';
   }
 
-  updateChildTiles(tile, frameState): boolean {
+  updateChildTiles(tile, frameState: FrameState): boolean {
     const children = tile.header.children || [];
     // children which are already fetched and constructed as Tile3D instances
     const childTiles = tile.children;
@@ -86,7 +96,10 @@ export default class I3STilesetTraverser extends TilesetTraverser {
     this.updateTile(childTile, frameState);
 
     // after tile fetched, resume traversal if still in current update/traversal frame
-    if (this._frameNumber === frameState.frameNumber) {
+    if (
+      this._frameNumber === frameState.frameNumber &&
+      (this.traversalFinished || new Date().getTime() - this.lastUpdate > this.updateDebounceTime)
+    ) {
       this.executeTraversal(childTile, frameState);
     }
   }

package/src/tileset/traversers/tileset-traverser.ts

@@ -1,5 +1,6 @@
 import ManagedArray from '../../utils/managed-array';
 import {TILE_REFINEMENT} from '../../constants';
+import {FrameState} from '../helpers/frame-state';
 
 export type TilesetTraverserProps = {
   loadSiblings?: boolean;
@@ -38,10 +39,16 @@ export default class TilesetTraverser {
   selectedTiles: object;
   emptyTiles: object;
 
+  protected lastUpdate: number = new Date().getTime();
+  protected readonly updateDebounceTime = 1000;
   protected _traversalStack: ManagedArray;
   protected _emptyTraversalStack: ManagedArray;
   protected _frameNumber: number | null;
 
+  protected get traversalFinished(): boolean {
+    return true;
+  }
+
   // TODO nested props
   constructor(options: TilesetTraverserProps) {
     this.options = {...DEFAULT_PROPS, ...options};
@@ -96,7 +103,7 @@ export default class TilesetTraverser {
   // all other tiles are part of the skip traversal. The skip traversal allows for skipping levels of the tree
   // and rendering children and parent tiles simultaneously.
   /* eslint-disable-next-line complexity, max-statements */
-  executeTraversal(root, frameState) {
+  executeTraversal(root, frameState: FrameState) {
     // stack to store traversed tiles, only visible tiles should be added to stack
     // visible: visible in the current view frustum
     const stack = this._traversalStack;
@@ -156,7 +163,11 @@ export default class TilesetTraverser {
       tile._shouldRefine = shouldRefine && parentRefines;
     }
 
-    this.options.onTraversalEnd(frameState);
+    const newTime = new Date().getTime();
+    if (this.traversalFinished || newTime - this.lastUpdate > this.updateDebounceTime) {
+      this.lastUpdate = newTime;
+      this.options.onTraversalEnd(frameState);
+    }
   }
 
   updateChildTiles(tile, frameState) {