@deck.gl/geo-layers 9.3.7 → 9.4.0-alpha.1

package/package.json

@@ -3,7 +3,7 @@
   "description": "deck.gl layers supporting geospatial use cases and GIS formats",
   "license": "MIT",
   "type": "module",
-  "version": "9.3.7",
+  "version": "9.4.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -57,13 +57,13 @@
     "long": "^3.2.0"
   },
   "peerDependencies": {
-    "@deck.gl/core": "~9.3.0",
-    "@deck.gl/extensions": "~9.3.0",
-    "@deck.gl/layers": "~9.3.0",
-    "@deck.gl/mesh-layers": "~9.3.0",
+    "@deck.gl/core": "~9.3.0-beta.2",
+    "@deck.gl/extensions": "~9.3.0-beta.2",
+    "@deck.gl/layers": "~9.3.0-beta.2",
+    "@deck.gl/mesh-layers": "~9.3.0-beta.2",
     "@loaders.gl/core": "^4.4.3",
     "@luma.gl/core": "~9.3.3",
     "@luma.gl/engine": "~9.3.3"
   },
-  "gitHead": "ac8cd3dd7a70b1f1471729425d63fcff38dc0a13"
+  "gitHead": "a30177af4ec82fd612d116d1528deac09f1800b4"
 }

package/src/mesh-layer/mesh-layer-vertex.glsl.ts

@@ -11,11 +11,10 @@ in vec3 normals;
 in vec3 colors;
 in vec2 texCoords;
 in vec4 uvRegions;
-in vec3 featureIdsPickingColors;
+in float rowIndexes;
 
 // Instance attributes
 in vec4 instanceColors;
-in vec3 instancePickingColors;
 in vec3 instanceModelMatrixCol0;
 in vec3 instanceModelMatrixCol1;
 in vec3 instanceModelMatrixCol2;
@@ -41,9 +40,9 @@ void main(void) {
   geometry.uv = uv;
 
   if (mesh.pickFeatureIds) {
-    geometry.pickingColor = featureIdsPickingColors;
+    geometry.pickingColor = picking_getPickingColorFromIndex(rowIndexes);
   } else {
-    geometry.pickingColor = instancePickingColors;
+    geometry.pickingColor = picking_getPickingColorFromInstanceID();
   }
 
   mat3 instanceModelMatrix = mat3(instanceModelMatrixCol0, instanceModelMatrixCol1, instanceModelMatrixCol2);

package/src/mesh-layer/mesh-layer.ts

@@ -75,12 +75,13 @@ export default class MeshLayer<DataT = any, ExtraProps extends {} = {}> extends
     if (featureIds) {
       // attributeManager is always defined in a primitive layer
       attributeManager!.add({
-        featureIdsPickingColors: {
-          type: 'uint8',
-          size: 3,
+        /** Feature id for each mesh vertex. */
+        rowIndexes: {
+          type: 'uint32',
+          size: 1,
           noAlloc: true,
           // eslint-disable-next-line @typescript-eslint/unbound-method
-          update: this.calculateFeatureIdsPickingColors
+          update: this.calculateFeatureIdsPickingIndexes
         }
       });
     }
@@ -179,21 +180,10 @@ export default class MeshLayer<DataT = any, ExtraProps extends {} = {}> extends
     );
   }
 
-  calculateFeatureIdsPickingColors(attribute) {
+  calculateFeatureIdsPickingIndexes(attribute) {
     // This updater is only called if featureIds is not null
     const featureIds = this.props.featureIds!;
-    const value = new Uint8ClampedArray(featureIds.length * attribute.size);
-
-    const pickingColor = [];
-    for (let index = 0; index < featureIds.length; index++) {
-      this.encodePickingColor(featureIds[index], pickingColor);
-
-      value[index * 3] = pickingColor[0];
-      value[index * 3 + 1] = pickingColor[1];
-      value[index * 3 + 2] = pickingColor[2];
-    }
-
-    attribute.value = value;
+    attribute.value = new Uint32Array(featureIds);
   }
 
   finalizeState(context: LayerContext) {

package/src/terrain-layer/terrain-layer.ts

@@ -30,6 +30,10 @@ import type {
 import {getURLFromTemplate, Tile2DHeader, URLTemplate, urlType} from '../tileset-2d/index';
 
 const DUMMY_DATA = [1];
+const TILE_OVERLAP_PIXELS = 1;
+const MIN_TERRAIN_MESH_MAX_ERROR = 1;
+const MAX_LATITUDE = 90;
+const MAX_LONGITUDE = 180;
 
 const defaultProps: DefaultProps<TerrainLayerProps> = {
   ...TileLayer.defaultProps,
@@ -70,6 +74,35 @@ function urlTemplateToUpdateTrigger(template: URLTemplate): string {
   return template || '';
 }
 
+function getOverlappedBounds(bounds: Bounds, tileSize: number, clampLngLat: boolean): Bounds {
+  const xPad = ((bounds[2] - bounds[0]) / tileSize) * TILE_OVERLAP_PIXELS;
+  const yPad = ((bounds[3] - bounds[1]) / tileSize) * TILE_OVERLAP_PIXELS;
+  const overlappedBounds: Bounds = [
+    bounds[0] - xPad,
+    bounds[1] - yPad,
+    bounds[2] + xPad,
+    bounds[3] + yPad
+  ];
+
+  if (!clampLngLat) {
+    return overlappedBounds;
+  }
+
+  return [
+    Math.max(overlappedBounds[0], -MAX_LONGITUDE),
+    Math.max(overlappedBounds[1], -MAX_LATITUDE),
+    Math.min(overlappedBounds[2], MAX_LONGITUDE),
+    Math.min(overlappedBounds[3], MAX_LATITUDE)
+  ];
+}
+
+function getEffectiveMeshMaxError(meshMaxError: number): number {
+  if (!Number.isFinite(meshMaxError) || meshMaxError <= 0) {
+    return MIN_TERRAIN_MESH_MAX_ERROR;
+  }
+  return Math.max(meshMaxError, MIN_TERRAIN_MESH_MAX_ERROR);
+}
+
 type ElevationDecoder = {rScaler: number; gScaler: number; bScaler: number; offset: number};
 type TerrainLoadProps = {
   bounds: Bounds;
@@ -80,6 +113,12 @@ type TerrainLoadProps = {
 };
 
 type MeshAndTexture = [MeshAttributes | null, TextureSource | null];
+type MeshBoundingBox = [min: number[], max: number[]];
+type MeshWithBoundingBox = MeshAttributes & {
+  header?: {
+    boundingBox?: MeshBoundingBox;
+  };
+};
 
 /** All properties supported by TerrainLayer */
 export type TerrainLayerProps = _TerrainLayerProps &
@@ -170,14 +209,15 @@ export default class TerrainLayer<ExtraPropsT extends {} = {}> extends Composite
     if (!elevationData) {
       return null;
     }
+    const effectiveMeshMaxError = getEffectiveMeshMaxError(meshMaxError);
     let loadOptions = this.getLoadOptions();
     loadOptions = {
       ...loadOptions,
       terrain: {
-        skirtHeight: this.state.isTiled ? meshMaxError * 2 : 0,
+        skirtHeight: this.state.isTiled ? effectiveMeshMaxError * 2 : 0,
         ...loadOptions?.terrain,
         bounds,
-        meshMaxError,
+        meshMaxError: effectiveMeshMaxError,
         elevationDecoder
       }
     };
@@ -204,10 +244,15 @@ export default class TerrainLayer<ExtraPropsT extends {} = {}> extends Composite
       topRight = [bbox.right, bbox.top];
     }
     const bounds: Bounds = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];
+    const overlappedBounds = getOverlappedBounds(
+      bounds,
+      this.props.tileSize,
+      viewport instanceof GlobeViewport
+    );
 
     const terrain = this.loadTerrain({
       elevationData: dataUrl,
-      bounds,
+      bounds: overlappedBounds,
       elevationDecoder,
       meshMaxError,
       signal
@@ -238,12 +283,27 @@ export default class TerrainLayer<ExtraPropsT extends {} = {}> extends Composite
 
     const [mesh, texture] = data;
 
+    const {viewport} = this.context;
+    // Bounds are baked with projectFlat. In GlobeView projectFlat is identity,
+    // so tiled terrain meshes are in lng/lat degrees instead of common-space
+    // web-mercator units.
+    const isGlobe = viewport instanceof GlobeViewport;
+    const boundingBox = (mesh as MeshWithBoundingBox | null)?.header?.boundingBox;
+    const hasLngLatBounds =
+      boundingBox &&
+      boundingBox.every(
+        ([x, y]) =>
+          x >= -MAX_LONGITUDE && x <= MAX_LONGITUDE && y >= -MAX_LATITUDE && y <= MAX_LATITUDE
+      );
+    const coordinateSystem =
+      isGlobe && hasLngLatBounds ? COORDINATE_SYSTEM.LNGLAT : COORDINATE_SYSTEM.CARTESIAN;
+
     return new SubLayerClass(props, {
       data: DUMMY_DATA,
       mesh,
       texture,
       _instanced: false,
-      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      coordinateSystem,
       getPosition: d => [0, 0, 0],
       getColor: color,
       wireframe,

package/src/tileset-2d/tile-2d-header.ts

@@ -10,6 +10,7 @@ import type {Layer} from '@deck.gl/core';
 export type TileLoadDataProps<DataT = any> = {
   requestScheduler: RequestScheduler;
   getData: (props: TileLoadProps) => Promise<DataT>;
+  getRequestPriority: (tile: Tile2DHeader<DataT>) => number;
   onLoad: (tile: Tile2DHeader<DataT>) => void;
   onError: (error: any, tile: Tile2DHeader<DataT>) => void;
 };
@@ -106,6 +107,7 @@ export class Tile2DHeader<DataT = any> {
   /* eslint-disable max-statements */
   private async _loadData({
     getData,
+    getRequestPriority,
     requestScheduler,
     onLoad,
     onError
@@ -116,10 +118,8 @@ export class Tile2DHeader<DataT = any> {
     this._abortController = new AbortController();
     const {signal} = this._abortController;
 
-    // @ts-expect-error (2345) Argument of type '(tile: any) => 1 | -1' is not assignable ...
-    const requestToken = await requestScheduler.scheduleRequest(this, tile => {
-      return tile.isSelected ? 1 : -1;
-    });
+    // @ts-expect-error (2345) loaders.gl's RequestScheduler callback type is too narrow.
+    const requestToken = await requestScheduler.scheduleRequest(this, getRequestPriority);
 
     if (!requestToken) {
       this._isCancelled = true;

package/src/tileset-2d/tile-2d-traversal.ts

@@ -91,6 +91,11 @@ class OSMNode {
       return false;
     }
 
+    // Globe: reject tiles occluded by the near hemisphere
+    if (project && this.beyondHorizon(viewport.cameraPosition, project, elevationBounds[1])) {
+      return false;
+    }
+
     // Avoid loading overlapping tiles - if a descendant is requested, do not request the ancester
     if (!this.childVisible) {
       let {z} = this;
@@ -129,6 +134,33 @@ class OSMNode {
     return result;
   }
 
+  beyondHorizon(
+    cameraPosition: number[],
+    project: (xyz: number[]) => number[],
+    elevation: number
+  ): boolean {
+    const cx = cameraPosition[0];
+    const cy = cameraPosition[1];
+    const cz = cameraPosition[2];
+    const cMag = Math.sqrt(cx * cx + cy * cy + cz * cz);
+
+    const camLng = (Math.atan2(cx, -cy) * 180) / Math.PI;
+    const camLat = (Math.asin(cz / cMag) * 180) / Math.PI;
+
+    const [west, north] = osmTile2lngLat(this.x, this.y, this.z);
+    const [east, south] = osmTile2lngLat(this.x + 1, this.y + 1, this.z);
+
+    const tileCenterLng = (west + east) / 2;
+    const wrappedCamLng = tileCenterLng + (((camLng - tileCenterLng + 540) % 360) - 180);
+    const closestLng = Math.max(west, Math.min(wrappedCamLng, east));
+    const closestLat = Math.max(south, Math.min(camLat, north));
+
+    const closest = project([closestLng, closestLat, elevation]);
+    const dot = closest[0] * cx + closest[1] * cy + closest[2] * cz;
+    const magSq = closest[0] * closest[0] + closest[1] * closest[1] + closest[2] * closest[2];
+    return dot <= magSq;
+  }
+
   insideBounds([minX, minY, maxX, maxY]: Bounds): boolean {
     const scale = Math.pow(2, this.z);
     const extent = TILE_SIZE / scale;
@@ -191,7 +223,7 @@ export function getOSMTileIndices(
   bounds?: Bounds
 ): TileIndex[] {
   const project: ((xyz: number[]) => number[]) | null =
-    viewport instanceof _GlobeViewport && viewport.resolution
+    viewport instanceof _GlobeViewport
       ? // eslint-disable-next-line @typescript-eslint/unbound-method
         viewport.projectPosition
       : null;

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

@@ -10,7 +10,7 @@ import {Matrix4, equals, NumericArray} from '@math.gl/core';
 import {Tile2DHeader} from './tile-2d-header';
 
 import {getTileIndices, tileToBoundingBox, getCullBounds, transformBox} from './utils';
-import {Bounds, TileIndex, ZRange} from './types';
+import {Bounds, TileBoundingBox, TileIndex, ZRange} from './types';
 import {TileLoadProps} from './types';
 import {memoize} from './memoize';
 
@@ -48,6 +48,9 @@ export type RefinementStrategy =
   | RefinementStrategyFunction;
 
 const DEFAULT_CACHE_SCALE = 5;
+const SELECTED_TILE_PRIORITY = 0;
+const VISIBLE_TILE_PRIORITY = 1e8;
+const MAX_TILE_DISTANCE_PRIORITY = VISIBLE_TILE_PRIORITY - SELECTED_TILE_PRIORITY - 1;
 
 const STRATEGIES = {
   [STRATEGY_DEFAULT]: updateTileStateDefault,
@@ -437,6 +440,102 @@ export class Tileset2D {
 
   private _getCullBounds = memoize(getCullBounds);
 
+  private _getRequestPriority(tile: Tile2DHeader): number {
+    if (!tile.isSelected && !tile.isVisible) {
+      return -1;
+    }
+
+    // RequestScheduler loads lower priority values first.
+    const distance = this._getTileDistancePriority(tile);
+    if (tile.isSelected) {
+      return SELECTED_TILE_PRIORITY + distance;
+    }
+    return VISIBLE_TILE_PRIORITY + distance;
+  }
+
+  private _getTileDistancePriority(tile: Tile2DHeader): number {
+    const {width, height} = this._viewport || {};
+    if (!this._viewport || !width || !height) {
+      return 0;
+    }
+
+    try {
+      const points = this._getTileScreenCorners(tile.bbox);
+      const center: [number, number] = [width / 2, height / 2];
+      if (points.length === 4) {
+        if (this._isPointInPolygon(center, points)) {
+          return 0;
+        }
+        const distance = points.reduce((minDistance, point, i) => {
+          const nextPoint = points[(i + 1) % points.length];
+          return Math.min(
+            minDistance,
+            this._getPointToSegmentDistanceSquared(center, point, nextPoint)
+          );
+        }, Number.MAX_SAFE_INTEGER);
+        return Math.min(distance, MAX_TILE_DISTANCE_PRIORITY);
+      }
+    } catch {
+      // Some viewport/tile combinations are not projectable. Keep them valid but last in tier.
+    }
+    return MAX_TILE_DISTANCE_PRIORITY;
+  }
+
+  private _getTileScreenCorners(bbox: TileBoundingBox): [number, number][] {
+    const coordinates: [number, number][] =
+      'west' in bbox
+        ? [
+            [bbox.west, bbox.south],
+            [bbox.east, bbox.south],
+            [bbox.east, bbox.north],
+            [bbox.west, bbox.north]
+          ]
+        : [
+            [bbox.left, bbox.top],
+            [bbox.right, bbox.top],
+            [bbox.right, bbox.bottom],
+            [bbox.left, bbox.bottom]
+          ];
+
+    return coordinates
+      .map(coordinate => this._viewport!.project(coordinate))
+      .filter(([x, y]) => Number.isFinite(x) && Number.isFinite(y)) as [number, number][];
+  }
+
+  private _isPointInPolygon(point: [number, number], polygon: [number, number][]): boolean {
+    let inside = false;
+    const [x, y] = point;
+    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+      const [xi, yi] = polygon[i];
+      const [xj, yj] = polygon[j];
+      if (yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) {
+        inside = !inside;
+      }
+    }
+    return inside;
+  }
+
+  private _getPointToSegmentDistanceSquared(
+    point: [number, number],
+    segmentStart: [number, number],
+    segmentEnd: [number, number]
+  ): number {
+    const [x, y] = point;
+    const [x1, y1] = segmentStart;
+    const [x2, y2] = segmentEnd;
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const lengthSquared = dx * dx + dy * dy;
+    const t = lengthSquared
+      ? Math.max(0, Math.min(1, ((x - x1) * dx + (y - y1) * dy) / lengthSquared))
+      : 0;
+    const segmentX = x1 + t * dx;
+    const segmentY = y1 + t * dy;
+    const distanceX = x - segmentX;
+    const distanceY = y - segmentY;
+    return distanceX * distanceX + distanceY * distanceY;
+  }
+
   private _pruneRequests(): void {
     const {maxRequests = 0} = this.opts;
 
@@ -542,6 +641,7 @@ export class Tileset2D {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       tile.loadData({
         getData: this.opts.getTileData,
+        getRequestPriority: this._getRequestPriority.bind(this),
         requestScheduler: this._requestScheduler,
         onLoad: this.onTileLoad,
         onError: this.opts.onTileError