feat: per-origin HTTP concurrency limiter for COG layers

examples/naip-mosaic/src/App.tsx

@@ -11,7 +11,7 @@ import {
   LinearRescale,
 } from "@developmentseed/deck.gl-raster/gpu-modules";
 import colormapsPngUrl from "@developmentseed/deck.gl-raster/gpu-modules/colormaps.png";
-import type { Overview } from "@developmentseed/geotiff";
+import type { GeoTIFFFromUrlOptions, Overview } from "@developmentseed/geotiff";
 import { GeoTIFF } from "@developmentseed/geotiff";
 import type { Device, Texture } from "@luma.gl/core";
 import type { ShaderModule } from "@luma.gl/shadertools";
@@ -85,10 +85,13 @@ type TextureDataT = {
  */
 const geotiffCache = new Map<string, Promise<GeoTIFF>>();
 
-function getCachedGeoTIFF(url: string, signal?: AbortSignal): Promise<GeoTIFF> {
+function getCachedGeoTIFF(
+  url: string,
+  opts: GeoTIFFFromUrlOptions,
+): Promise<GeoTIFF> {
   let promise = geotiffCache.get(url);
   if (!promise) {
-    promise = GeoTIFF.fromUrl(url, { signal }).catch((err) => {
+    promise = GeoTIFF.fromUrl(url, opts).catch((err) => {
       geotiffCache.delete(url);
       throw err;
     });
@@ -351,7 +354,6 @@ export default function App() {
     async function wrappedFetchSTACItems() {
       try {
         const data = STAC_DATA as unknown as STACFeatureCollection;
-        (window as any).data = data;
         setStacItems(data.features);
       } catch (err) {
         console.error("Error fetching STAC items:", err);
@@ -410,8 +412,8 @@ export default function App() {
       // the MosaicLayer's TileLayer cache so we can keep cheap header metadata
       // around indefinitely without pinning every parent tile (and its inner
       // COGLayer's in-flight tile requests) in memory.
-      getSource: async (source, { signal }) =>
-        getCachedGeoTIFF(source.assets.image.href, signal),
+      getSource: async (source, opts) =>
+        getCachedGeoTIFF(source.assets.image.href, opts),
       renderSource: (source, { data, signal }) => {
         const url = source.assets.image.href;
         return new COGLayer<TextureDataT>({
@@ -434,8 +436,9 @@ export default function App() {
           signal,
         });
       },
-      // Smaller cache for MosaicLayer cache, since it caches full COGLayer
-      // instances
+      // Disable the MosaicLayer tile cache: each cached tile is a full
+      // COGLayer instance, and opened GeoTIFFs are already kept in the
+      // module-level `geotiffCache`, so there's nothing cheap to retain here.
       maxCacheSize: 0,
       // @ts-expect-error beforeId is injected by @deck.gl/mapbox; LayerProps
       // doesn't know about it.

packages/deck.gl-geotiff/src/cog-layer.ts

@@ -1,4 +1,4 @@
-import type { UpdateParameters } from "@deck.gl/core";
+import type { LayerContext, UpdateParameters } from "@deck.gl/core";
 import type {
   MinimalTileData,
   GetTileDataOptions as RasterTileGetTileDataOptions,
@@ -7,7 +7,12 @@ import type {
   RenderTileResult,
 } from "@developmentseed/deck.gl-raster";
 import { RasterTileLayer } from "@developmentseed/deck.gl-raster";
-import type { DecoderPool, GeoTIFF, Overview } from "@developmentseed/geotiff";
+import type {
+  ConcurrencyLimiter,
+  DecoderPool,
+  GeoTIFF,
+  Overview,
+} from "@developmentseed/geotiff";
 import { defaultDecoderPool } from "@developmentseed/geotiff";
 import type { EpsgResolver, ProjectionDefinition } from "@developmentseed/proj";
 import {
@@ -18,6 +23,7 @@ import {
 } from "@developmentseed/proj";
 import type { Texture } from "@luma.gl/core";
 import proj4 from "proj4";
+import { DEFAULT_CONCURRENCY_LIMITER } from "./default-concurrency-limiter.js";
 import { fetchGeoTIFF, getGeographicBounds } from "./geotiff/geotiff.js";
 import type { TextureDataT } from "./geotiff/render-pipeline.js";
 import { inferRenderPipeline } from "./geotiff/render-pipeline.js";
@@ -133,6 +139,19 @@ export type COGLayerProps<DataT extends MinimalTileData = DefaultDataT> = Omit<
      * automatically aborted.
      */
     signal?: AbortSignal;
+
+    /**
+     * Caps concurrent HTTP requests for this layer's source fetches.
+     *
+     * Defaults to a maximum of 6 concurrent requests per origin, which aligns
+     * with browser limits of 6 HTTP/1.1 requests per origin. If your sources
+     * support HTTP/2 or HTTP/3, you may want to increase this limit or disable
+     * it entirely by passing `null`.
+     *
+     * Ignored when `geotiff` is a pre-opened `GeoTIFF` instance — wire the
+     * limiter via {@link GeoTIFF.fromUrl} at construction time instead.
+     */
+    concurrencyLimiter?: ConcurrencyLimiter | null;
   };
 
 /**
@@ -150,17 +169,27 @@ export class COGLayer<
   static override defaultProps = {
     ...RasterTileLayer.defaultProps,
     epsgResolver,
+    concurrencyLimiter: DEFAULT_CONCURRENCY_LIMITER,
   } as typeof RasterTileLayer.defaultProps;
 
   declare state: {
     geotiff?: GeoTIFF;
     tilesetDescriptor?: RasterTilesetDescriptor;
     defaultGetTileData?: COGLayerProps<TextureDataT>["getTileData"];
     defaultRenderTile?: COGLayerProps<TextureDataT>["renderTile"];
+    /** Aborts the in-flight header read when the `geotiff` prop changes or the
+     *  layer is removed
+     */
+    abortController?: AbortController;
   };
 
   override initializeState(): void {
-    this.setState({});
+    this.setState({ abortController: new AbortController() });
+  }
+
+  override finalizeState(context: LayerContext): void {
+    this.state.abortController?.abort();
+    super.finalizeState(context);
   }
 
   override updateState(params: UpdateParameters<this>) {
@@ -189,13 +218,31 @@ export class COGLayer<
   }
 
   async _parseGeoTIFF(): Promise<void> {
-    const geotiff = await fetchGeoTIFF(this.props.geotiff);
+    const signal = this.state.abortController?.signal;
+
+    let geotiff: GeoTIFF;
+    try {
+      geotiff = await fetchGeoTIFF(this.props.geotiff, {
+        concurrencyLimiter: this.props.concurrencyLimiter,
+        signal,
+      });
+    } catch (err) {
+      // Layer removed mid-open (finalizeState aborted the signal); drop it.
+      if (signal?.aborted) {
+        return;
+      }
+      throw err;
+    }
     const crs = geotiff.crs;
     const sourceProjection =
       typeof crs === "number"
         ? await this.props.epsgResolver!(crs)
         : parseWkt(crs);
 
+    if (signal?.aborted) {
+      return;
+    }
+
     // @ts-expect-error - proj4 typings are incomplete and don't support
     // wkt-parser input
     const converter4326 = proj4(sourceProjection, "EPSG:4326");

packages/deck.gl-geotiff/src/default-concurrency-limiter.ts

@@ -0,0 +1,12 @@
+import { PerOriginSemaphore } from "@developmentseed/geotiff";
+
+/**
+ * Shared default concurrency limiter for every COGLayer / MultiCOGLayer that
+ * doesn't override its `concurrencyLimiter` prop. A single module-level
+ * `PerOriginSemaphore({ maxRequests: 6 })` so two layers fetching from the
+ * same origin (e.g. the same S3 bucket) share *one* HTTP/1.1 connection
+ * pool. The cap matches Chrome's default per-origin HTTP/1.1 limit.
+ */
+export const DEFAULT_CONCURRENCY_LIMITER = new PerOriginSemaphore({
+  maxRequests: 6,
+});

packages/deck.gl-geotiff/src/geotiff/geotiff.ts

@@ -1,6 +1,10 @@
 // Utilities for interacting with a GeoTIFF
 
-import type { RasterArray } from "@developmentseed/geotiff";
+import type {
+  ConcurrencyLimiter,
+  Priority,
+  RasterArray,
+} from "@developmentseed/geotiff";
 import { GeoTIFF } from "@developmentseed/geotiff";
 import type { Converter } from "proj4";
 
@@ -54,9 +58,14 @@ export function addAlphaChannel(rgbImage: RasterArray): RasterArray {
 
 export async function fetchGeoTIFF(
   input: GeoTIFF | string | URL | ArrayBuffer,
+  options: {
+    concurrencyLimiter?: ConcurrencyLimiter | null;
+    getPriority?: () => Priority;
+    signal?: AbortSignal;
+  } = {},
 ): Promise<GeoTIFF> {
   if (typeof input === "string" || input instanceof URL) {
-    return await GeoTIFF.fromUrl(input);
+    return await GeoTIFF.fromUrl(input, options);
   }
 
   if (input instanceof ArrayBuffer) {

packages/deck.gl-geotiff/src/index.ts

@@ -3,6 +3,7 @@ export type {
   GetTileDataOptions,
 } from "./cog-layer.js";
 export { COGLayer } from "./cog-layer.js";
+export { DEFAULT_CONCURRENCY_LIMITER } from "./default-concurrency-limiter.js";
 export { addAlphaChannel } from "./geotiff/geotiff.js";
 export * as texture from "./geotiff/texture.js";
 export type { MosaicLayerProps } from "./mosaic-layer/mosaic-layer.js";