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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loaders.gl/tiles",
-  "version": "3.1.6",
+  "version": "3.2.0-alpha.1",
   "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.1.6",
-    "@loaders.gl/math": "3.1.6",
+    "@loaders.gl/loader-utils": "3.2.0-alpha.1",
+    "@loaders.gl/math": "3.2.0-alpha.1",
     "@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": "3.1.0"
+    "@loaders.gl/core": "4.0.0-alpha.4"
   },
-  "gitHead": "4fe0724b942697a95ff3eb3af47b7a7c18556c52"
+  "gitHead": "423a2815092b08dcf93ad5b7dc2940b167305afe"
 }

package/src/tileset/helpers/frame-state.ts

@@ -1,3 +1,4 @@
+import {Tile3D} from '@loaders.gl/tiles';
 import {Vector3} from '@math.gl/core';
 import {CullingVolume, Plane} from '@math.gl/culling';
 import {Ellipsoid} from '@math.gl/geospatial';
@@ -9,6 +10,7 @@ export type FrameState = {
     up: number[];
   };
   viewport: {[key: string]: any};
+  topDownViewport: {[key: string]: any}; // Use it to calculate projected radius for a tile
   height: number;
   cullingVolume: CullingVolume;
   frameNumber: number; // TODO: This can be the same between updates, what number is unique for between updates?
@@ -60,6 +62,19 @@ export function getFrameState(viewport, frameNumber: number): FrameState {
 
   commonSpacePlanesToWGS84(viewport, viewportCenterCartesian);
 
+  const ViewportClass = viewport.constructor;
+  const {longitude, latitude, width, bearing, zoom} = viewport;
+  // @ts-ignore
+  const topDownViewport = new ViewportClass({
+    longitude,
+    latitude,
+    height,
+    width,
+    bearing,
+    zoom,
+    pitch: 0
+  });
+
   // TODO: make a file/class for frameState and document what needs to be attached to this so that traversal can function
   return {
     camera: {
@@ -68,6 +83,7 @@ export function getFrameState(viewport, frameNumber: number): FrameState {
       up: cameraUpCartesian
     },
     viewport,
+    topDownViewport,
     height,
     cullingVolume,
     frameNumber, // TODO: This can be the same between updates, what number is unique for between updates?
@@ -75,6 +91,46 @@ export function getFrameState(viewport, frameNumber: number): FrameState {
   };
 }
 
+/**
+ * Limit `tiles` array length with `maximumTilesSelected` number.
+ * The criteria for this filtering is distance of a tile center
+ * to the `frameState.viewport`'s longitude and latitude
+ * @param tiles - tiles array to filter
+ * @param frameState - frameState to calculate distances
+ * @param maximumTilesSelected - maximal amount of tiles in the output array
+ * @returns new tiles array
+ */
+export function limitSelectedTiles(
+  tiles: Tile3D[],
+  frameState: FrameState,
+  maximumTilesSelected: number
+): [Tile3D[], Tile3D[]] {
+  if (maximumTilesSelected === 0 || tiles.length <= maximumTilesSelected) {
+    return [tiles, []];
+  }
+  // Accumulate distances in couples array: [tileIndex: number, distanceToViewport: number]
+  const tuples: [number, number][] = [];
+  const {longitude: viewportLongitude, latitude: viewportLatitude} = frameState.viewport;
+  for (const [index, tile] of tiles.entries()) {
+    const [longitude, latitude] = tile.header.mbs;
+    const deltaLon = Math.abs(viewportLongitude - longitude);
+    const deltaLat = Math.abs(viewportLatitude - latitude);
+    const distance = Math.sqrt(deltaLat * deltaLat + deltaLon * deltaLon);
+    tuples.push([index, distance]);
+  }
+  const tuplesSorted = tuples.sort((a, b) => a[1] - b[1]);
+  const selectedTiles: Tile3D[] = [];
+  for (let i = 0; i < maximumTilesSelected; i++) {
+    selectedTiles.push(tiles[tuplesSorted[i][0]]);
+  }
+  const unselectedTiles: Tile3D[] = [];
+  for (let i = maximumTilesSelected; i < tuplesSorted.length; i++) {
+    unselectedTiles.push(tiles[tuplesSorted[i][0]]);
+  }
+
+  return [selectedTiles, unselectedTiles];
+}
+
 function commonSpacePlanesToWGS84(viewport, viewportCenterCartesian) {
   // Extract frustum planes based on current view.
   const frustumPlanes = viewport.getFrustumPlanes();

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/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,7 +48,7 @@ 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 {FrameState, getFrameState, limitSelectedTiles} from './helpers/frame-state';
 import {getZoomFromBoundingVolume} from './helpers/zoom';
 import Tile3D from './tile-3d';
 import Tileset3DTraverser from './traversers/tileset-3d-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
@@ -207,6 +215,7 @@ export default class Tileset3D {
   traverseCounter: number;
   geometricError: number;
   selectedTiles: Tile3D[];
+  private updatePromise: Promise<number> | null = null;
 
   cartographicCenter: Vector3 | null;
   cartesianCenter: Vector3 | null;
@@ -382,20 +391,51 @@ export default class Tileset3D {
   /**
    * Update visible tiles relying on a list of viewports
    * @param viewports - list of viewports
+   * @deprecated
+   */
+  update(viewports: any[] | null = null) {
+    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> {
+    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 +497,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);