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

package/src/tileset/helpers/i3s-lod.ts

@@ -3,6 +3,14 @@ import {Ellipsoid} from '@math.gl/geospatial';
 import Tile3D from '../tile-3d';
 import {FrameState} from './frame-state';
 
+const cameraPositionCartesian = new Vector3();
+const toEye = new Vector3();
+const cameraPositionEnu = new Vector3();
+const extraVertexEnu = new Vector3();
+const projectedOriginVector = new Vector3();
+const enuToCartesianMatrix = new Matrix4();
+const cartesianToEnuMatrix = new Matrix4();
+
 /**
  * For the maxScreenThreshold error metric, maxError means that you should replace the node with it's children
    as soon as the nodes bounding sphere has a screen radius larger than maxError pixels.
@@ -36,45 +44,35 @@ export function getLodStatus(tile: Tile3D, frameState: FrameState): 'DIG' | 'OUT
  */
 // eslint-disable-next-line max-statements
 export function getProjectedRadius(tile: Tile3D, frameState: FrameState): number {
-  const originalViewport = frameState.viewport;
-  const ViewportClass = originalViewport.constructor;
-  const {longitude, latitude, height, width, bearing, zoom} = originalViewport;
-  // @ts-ignore
-  const viewport = new ViewportClass({longitude, latitude, height, width, bearing, zoom, pitch: 0});
+  const {topDownViewport: viewport} = frameState;
   const mbsLat = tile.header.mbs[1];
   const mbsLon = tile.header.mbs[0];
   const mbsZ = tile.header.mbs[2];
   const mbsR = tile.header.mbs[3];
   const mbsCenterCartesian = [...tile.boundingVolume.center];
   const cameraPositionCartographic = viewport.unprojectPosition(viewport.cameraPosition);
-  const cameraPositionCartesian = Ellipsoid.WGS84.cartographicToCartesian(
-    cameraPositionCartographic,
-    new Vector3()
-  );
+  Ellipsoid.WGS84.cartographicToCartesian(cameraPositionCartographic, cameraPositionCartesian);
 
   // ---------------------------
   // Calculate mbs border vertex
   // ---------------------------
-  const toEye = new Vector3(cameraPositionCartesian).subtract(mbsCenterCartesian).normalize();
+  toEye.copy(cameraPositionCartesian).subtract(mbsCenterCartesian).normalize();
   // Add extra vector to form plane
-  const enuToCartesianMatrix = new Matrix4();
   Ellipsoid.WGS84.eastNorthUpToFixedFrame(mbsCenterCartesian, enuToCartesianMatrix);
-  const cartesianToEnuMatrix = new Matrix4(enuToCartesianMatrix).invert();
-  const cameraPositionEnu = new Vector3(cameraPositionCartesian).transform(cartesianToEnuMatrix);
+  cartesianToEnuMatrix.copy(enuToCartesianMatrix).invert();
+  cameraPositionEnu.copy(cameraPositionCartesian).transform(cartesianToEnuMatrix);
   // Mean Proportionals in Right Triangles - Altitude rule
   // https://mathbitsnotebook.com/Geometry/RightTriangles/RTmeanRight.html
   const projection = Math.sqrt(
     cameraPositionEnu[0] * cameraPositionEnu[0] + cameraPositionEnu[1] * cameraPositionEnu[1]
   );
   const extraZ = (projection * projection) / cameraPositionEnu[2];
-  const extraVertexEnu = new Vector3([cameraPositionEnu[0], cameraPositionEnu[1], extraZ]);
+  extraVertexEnu.copy([cameraPositionEnu[0], cameraPositionEnu[1], extraZ]);
   const extraVertexCartesian = extraVertexEnu.transform(enuToCartesianMatrix);
-  const extraVectorCartesian = new Vector3(extraVertexCartesian)
-    .subtract(mbsCenterCartesian)
-    .normalize();
+  const extraVectorCartesian = extraVertexCartesian.subtract(mbsCenterCartesian).normalize();
   // We need radius vector orthogonal to toEye vector
   const radiusVector = toEye.cross(extraVectorCartesian).normalize().scale(mbsR);
-  const sphereMbsBorderVertexCartesian = new Vector3(mbsCenterCartesian).add(radiusVector);
+  const sphereMbsBorderVertexCartesian = radiusVector.add(mbsCenterCartesian);
   const sphereMbsBorderVertexCartographic = Ellipsoid.WGS84.cartesianToCartographic(
     sphereMbsBorderVertexCartesian
   );
@@ -83,7 +81,8 @@ export function getProjectedRadius(tile: Tile3D, frameState: FrameState): number
   // Project center vertex and border vertex and calculate projected radius of MBS
   const projectedOrigin = viewport.project([mbsLon, mbsLat, mbsZ]);
   const projectedMbsBorderVertex = viewport.project(sphereMbsBorderVertexCartographic);
-  const projectedRadius = new Vector3(projectedOrigin)
+  const projectedRadius = projectedOriginVector
+    .copy(projectedOrigin)
     .subtract(projectedMbsBorderVertex)
     .magnitude();
   return projectedRadius;

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/tile-3d.ts

@@ -298,6 +298,14 @@ export default class TileHeader {
     }
   }
 
+  /**
+   * Make tile unselected than means it won't be shown
+   * but it can be still loaded in memory
+   */
+  unselect(): void {
+    this._selectedFrame = 0;
+  }
+
   /*
    * If skipLevelOfDetail is off try to load child tiles as soon as possible so that their parent can refine sooner.
    * Tiles are prioritized by screen space error.

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

@@ -48,8 +48,8 @@ import {
 } from '@loaders.gl/loader-utils';
 import TilesetCache from './tileset-cache';
 import {calculateTransformProps} from './helpers/transform-utils';
-import {FrameState, getFrameState} from './helpers/frame-state';
-import {getZoomFromBoundingVolume} from './helpers/zoom';
+import {FrameState, getFrameState, limitSelectedTiles} from './helpers/frame-state';
+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';
@@ -64,6 +64,8 @@ export type Tileset3DProps = {
   loadTiles?: boolean;
   basePath?: string;
   maximumMemoryUsage?: number;
+  maximumTilesSelected?: number;
+  debounceTime?: number;
 
   // Metadata
   description?: string;
@@ -93,6 +95,8 @@ type Props = {
   modelMatrix: Matrix4;
   throttleRequests: boolean;
   maximumMemoryUsage: number;
+  maximumTilesSelected: number;
+  debounceTime: number;
   onTileLoad: (tile: Tile3D) => any;
   onTileUnload: (tile: Tile3D) => any;
   onTileError: (tile: Tile3D, message: string, url: string) => any;
@@ -124,6 +128,10 @@ const DEFAULT_PROPS: Props = {
   maxRequests: 64,
 
   maximumMemoryUsage: 32,
+  /** Maximum number limit of tiles selected for show. 0 means no limit */
+  maximumTilesSelected: 0,
+  /** Delay time before the tileset traversal. It prevents traversal requests spam.*/
+  debounceTime: 0,
 
   /**
    * Callback. Indicates this a tile's content was loaded
@@ -149,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,
 
@@ -207,6 +214,8 @@ export default class Tileset3D {
   traverseCounter: number;
   geometricError: number;
   selectedTiles: Tile3D[];
+  private updatePromise: Promise<number> | null = null;
+  tilesetInitializationPromise: Promise<void>;
 
   cartographicCenter: Vector3 | null;
   cartesianCenter: Vector3 | null;
@@ -324,7 +333,7 @@ export default class Tileset3D {
     this.credits = {};
     this.description = this.options.description || '';
 
-    this._initializeTileSet(json);
+    this.tilesetInitializationPromise = this._initializeTileSet(json);
   }
 
   /** Release resources */
@@ -382,20 +391,55 @@ export default class Tileset3D {
   /**
    * Update visible tiles relying on a list of viewports
    * @param viewports - list of viewports
+   * @deprecated
+   */
+  update(viewports: any[] | null = null) {
+    // 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);
+    });
+  }
+
+  /**
+   * Update visible tiles relying on a list of viewports.
+   * Do it with debounce delay to prevent update spam
+   * @param viewports viewports
+   * @returns Promise of new frameNumber
+   */
+  async selectTiles(viewports: any[] | null = null): Promise<number> {
+    await this.tilesetInitializationPromise;
+    if (viewports) {
+      this.lastUpdatedVieports = viewports;
+    }
+    if (!this.updatePromise) {
+      this.updatePromise = new Promise<number>((resolve) => {
+        setTimeout(() => {
+          this.doUpdate(this.lastUpdatedVieports);
+          resolve(this._frameNumber);
+          this.updatePromise = null;
+        }, this.options.debounceTime);
+      });
+    }
+    return this.updatePromise;
+  }
+
+  /**
+   * Update visible tiles relying on a list of viewports
+   * @param viewports viewports
    */
   // eslint-disable-next-line max-statements, complexity
-  update(viewports: any[]): void {
+  private doUpdate(viewports: any[] | null = null): void {
     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];
     }
@@ -457,7 +501,16 @@ export default class Tileset3D {
     }
     const currentFrameStateData = this.frameStateData[id];
     const selectedTiles = Object.values(this._traverser.selectedTiles);
-    currentFrameStateData.selectedTiles = 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);
 
@@ -540,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;
@@ -600,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);
@@ -759,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) {