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

package/dist/tileset/traversers/i3s-tileset-traverser.js

@@ -13,6 +13,14 @@ class I3STilesetTraverser extends tileset_traverser_1.default {
         super(options);
         this._tileManager = new i3s_tile_manager_1.default();
     }
+    /**
+     * Check if there are no penging tile header requests,
+     * that means the traversal is finished and we can call
+     * following-up callbacks.
+     */
+    get traversalFinished() {
+        return !this._tileManager.hasPendingTiles(this._frameNumber || 0);
+    }
     shouldRefine(tile, frameState) {
         tile._lodJudge = (0, i3s_lod_1.getLodStatus)(tile, frameState);
         return tile._lodJudge === 'DIG';
@@ -77,7 +85,8 @@ class I3STilesetTraverser extends tileset_traverser_1.default {
         const frameState = this._tileManager.find(childTile.id).frameState;
         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/dist/tileset/traversers/tileset-traverser.d.ts

@@ -1,4 +1,5 @@
 import ManagedArray from '../../utils/managed-array';
+import { FrameState } from '../helpers/frame-state';
 export declare type TilesetTraverserProps = {
     loadSiblings?: boolean;
     skipLevelOfDetail?: boolean;
@@ -27,13 +28,16 @@ export default class TilesetTraverser {
     requestedTiles: object;
     selectedTiles: object;
     emptyTiles: object;
+    protected lastUpdate: number;
+    protected readonly updateDebounceTime = 1000;
     protected _traversalStack: ManagedArray;
     protected _emptyTraversalStack: ManagedArray;
     protected _frameNumber: number | null;
+    protected get traversalFinished(): boolean;
     constructor(options: TilesetTraverserProps);
     traverse(root: any, frameState: any, options: any): void;
     reset(): void;
-    executeTraversal(root: any, frameState: any): void;
+    executeTraversal(root: any, frameState: FrameState): void;
     updateChildTiles(tile: any, frameState: any): boolean;
     updateAndPushChildren(tile: any, frameState: any, stack: any, depth: any): boolean;
     updateTile(tile: any, frameState: any): void;

package/dist/tileset/traversers/tileset-traverser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tileset-traverser.d.ts","sourceRoot":"","sources":["../../../src/tileset/traversers/tileset-traverser.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,2BAA2B,CAAC;AAGrD,oBAAY,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,cAAc,CAAC,EAAE,CAAC,UAAU,KAAA,KAAK,GAAG,CAAC;IACrC,qBAAqB,CAAC,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,oBAAY,KAAK,GAAG;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,uBAAuB,EAAE,MAAM,CAAC;IAChC,cAAc,EAAE,CAAC,UAAU,KAAA,KAAK,GAAG,CAAC;IACpC,qBAAqB,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAC,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,gBAAgB;IACnC,OAAO,EAAE,KAAK,CAAC;IAEf,IAAI,EAAE,GAAG,CAAC;IACV,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,eAAe,EAAE,YAAY,CAAC;IACxC,SAAS,CAAC,oBAAoB,EAAE,YAAY,CAAC;IAC7C,SAAS,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;gBAG1B,OAAO,EAAE,qBAAqB;IAuB1C,QAAQ,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA,EAAE,OAAO,KAAA;IAclC,KAAK;IAgBL,gBAAgB,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;IA+DjC,gBAAgB,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;IASjC,qBAAqB,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA,EAAE,KAAK,KAAA,EAAE,KAAK,KAAA;IAuDpD,UAAU,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;IAK3B,UAAU,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;IAS3B,QAAQ,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;IASzB,SAAS,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;IAQ1B,WAAW,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA,EAAE,eAAe,UAAQ,EAAE,gBAAgB,UAAQ;IAmB/E,cAAc,CAAC,IAAI,KAAA;IAMnB,gBAAgB,CAAC,IAAI,KAAA;IAOrB,YAAY,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA,EAAE,eAAe,KAAA;IAS9C,oBAAoB,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;IAiBrC,uBAAuB,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA;IAI5B,kBAAkB,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;IAWnC,qBAAqB,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;CAqCvC"}
+{"version":3,"file":"tileset-traverser.d.ts","sourceRoot":"","sources":["../../../src/tileset/traversers/tileset-traverser.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,2BAA2B,CAAC;AAErD,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAElD,oBAAY,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,cAAc,CAAC,EAAE,CAAC,UAAU,KAAA,KAAK,GAAG,CAAC;IACrC,qBAAqB,CAAC,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,oBAAY,KAAK,GAAG;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,uBAAuB,EAAE,MAAM,CAAC;IAChC,cAAc,EAAE,CAAC,UAAU,KAAA,KAAK,GAAG,CAAC;IACpC,qBAAqB,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAC,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,gBAAgB;IACnC,OAAO,EAAE,KAAK,CAAC;IAEf,IAAI,EAAE,GAAG,CAAC;IACV,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,UAAU,EAAE,MAAM,CAAwB;IACpD,SAAS,CAAC,QAAQ,CAAC,kBAAkB,QAAQ;IAC7C,SAAS,CAAC,eAAe,EAAE,YAAY,CAAC;IACxC,SAAS,CAAC,oBAAoB,EAAE,YAAY,CAAC;IAC7C,SAAS,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtC,SAAS,KAAK,iBAAiB,IAAI,OAAO,CAEzC;gBAGW,OAAO,EAAE,qBAAqB;IAuB1C,QAAQ,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA,EAAE,OAAO,KAAA;IAclC,KAAK;IAgBL,gBAAgB,CAAC,IAAI,KAAA,EAAE,UAAU,EAAE,UAAU;IAmE7C,gBAAgB,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;IASjC,qBAAqB,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA,EAAE,KAAK,KAAA,EAAE,KAAK,KAAA;IAuDpD,UAAU,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;IAK3B,UAAU,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;IAS3B,QAAQ,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;IASzB,SAAS,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;IAQ1B,WAAW,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA,EAAE,eAAe,UAAQ,EAAE,gBAAgB,UAAQ;IAmB/E,cAAc,CAAC,IAAI,KAAA;IAMnB,gBAAgB,CAAC,IAAI,KAAA;IAOrB,YAAY,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA,EAAE,eAAe,KAAA;IAS9C,oBAAoB,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;IAiBrC,uBAAuB,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA;IAI5B,kBAAkB,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;IAWnC,qBAAqB,CAAC,IAAI,KAAA,EAAE,UAAU,KAAA;CAqCvC"}

package/dist/tileset/traversers/tileset-traverser.js

@@ -18,6 +18,8 @@ exports.DEFAULT_PROPS = {
 class TilesetTraverser {
     // TODO nested props
     constructor(options) {
+        this.lastUpdate = new Date().getTime();
+        this.updateDebounceTime = 1000;
         this.options = { ...exports.DEFAULT_PROPS, ...options };
         // TRAVERSAL
         // temporary storage to hold the traversed tiles during a traversal
@@ -35,6 +37,9 @@ class TilesetTraverser {
         // tiles does not have render content
         this.emptyTiles = {};
     }
+    get traversalFinished() {
+        return true;
+    }
     // tiles should be visible
     traverse(root, frameState, options) {
         this.root = root; // for root screen space error
@@ -110,7 +115,11 @@ class TilesetTraverser {
             // 4. update tile refine prop and parent refinement status to trickle down to the descendants
             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) {
         const children = tile.children;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loaders.gl/tiles",
-  "version": "3.2.0-alpha.1",
+  "version": "3.2.0-alpha.2",
   "description": "Common components for different tiles loaders.",
   "license": "MIT",
   "publishConfig": {
@@ -33,8 +33,8 @@
     "build-bundle": "esbuild src/bundle.ts --bundle --outfile=dist/dist.min.js"
   },
   "dependencies": {
-    "@loaders.gl/loader-utils": "3.2.0-alpha.1",
-    "@loaders.gl/math": "3.2.0-alpha.1",
+    "@loaders.gl/loader-utils": "3.2.0-alpha.2",
+    "@loaders.gl/math": "3.2.0-alpha.2",
     "@math.gl/core": "^3.5.1",
     "@math.gl/culling": "^3.5.1",
     "@math.gl/geospatial": "^3.5.1",
@@ -42,7 +42,7 @@
     "@probe.gl/stats": "^3.5.0"
   },
   "peerDependencies": {
-    "@loaders.gl/core": "4.0.0-alpha.4"
+    "@loaders.gl/core": "3.2.0-alpha.1"
   },
-  "gitHead": "423a2815092b08dcf93ad5b7dc2940b167305afe"
+  "gitHead": "52a602739cbfce60fc314f474efc984d199dff78"
 }

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,
 
@@ -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 */
@@ -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;
     }
@@ -589,29 +593,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 +702,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);
@@ -808,7 +861,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) {