perf(raster-tileset): memoize tileTransform output per (col, row)

`AffineTilesetLevel.tileTransform` and `TileMatrixAdaptor.tileTransform`
each constructed two new arrow functions (`forwardTransform`,
`inverseTransform`) on every call. `RasterTileLayer._renderSubLayers`
invokes these per tile on every render, so the returned references churned
constantly.

That instability tripped `reprojectionFnsChanged` in
`RasterLayer.updateState`, which re-ran `_generateMesh`, which produced a
fresh `state.mesh` wrapper, which tripped `props.mesh !== oldProps.mesh`
in `SimpleMeshLayer.updateState`, which destroyed and rebuilt the GPU
`Model` — incurring full shader assembly per tile per render.

The transforms for a given `(col, row)` are deterministic and the level
itself is long-lived. Caching them by key collapses the entire chain:
stable transform refs → no spurious mesh regen → no Model rebuild → no
shader reassembly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: kylebarron

packages/deck.gl-raster/src/raster-tileset/affine-tileset-level.ts

@@ -44,6 +44,19 @@ export class AffineTilesetLevel implements TilesetLevel {
 
   private readonly _affine: Affine;
   private readonly _invAffine: Affine;
+  /**
+   * Memoized output of {@link tileTransform}. The transforms for a given
+   * `(col, row)` never change for the life of this level, and consumers
+   * (e.g. `RasterTileLayer._renderSubLayers`) rely on reference stability
+   * to avoid spurious mesh regeneration downstream in `RasterLayer`.
+   */
+  private readonly _tileTransformCache = new Map<
+    string,
+    {
+      forwardTransform: ProjectionFunction;
+      inverseTransform: ProjectionFunction;
+    }
+  >();
 
   constructor(options: AffineTilesetLevelOptions) {
     this._affine = options.affine;
@@ -94,16 +107,25 @@ export class AffineTilesetLevel implements TilesetLevel {
     forwardTransform: ProjectionFunction;
     inverseTransform: ProjectionFunction;
   } {
+    const key = `${col}|${row}`;
+    const cached = this._tileTransformCache.get(key);
+    if (cached) {
+      return cached;
+    }
     const tileOffset = affine.translation(
       col * this.tileWidth,
       row * this.tileHeight,
     );
     const tileAffine = affine.compose(this._affine, tileOffset);
     const invTileAffine = affine.invert(tileAffine);
-    return {
-      forwardTransform: (x, y) => affine.apply(tileAffine, x, y),
-      inverseTransform: (x, y) => affine.apply(invTileAffine, x, y),
+    const result = {
+      forwardTransform: (x: number, y: number): [number, number] =>
+        affine.apply(tileAffine, x, y),
+      inverseTransform: (x: number, y: number): [number, number] =>
+        affine.apply(invTileAffine, x, y),
     };
+    this._tileTransformCache.set(key, result);
+    return result;
   }
 
   crsBoundsToTileRange(

packages/deck.gl-raster/src/raster-tileset/tile-matrix-set.ts

@@ -10,6 +10,19 @@ const SCREEN_PIXEL_SIZE = 0.00028;
 
 class TileMatrixAdaptor implements TilesetLevel {
   inner: TileMatrix;
+  /**
+   * Memoized output of {@link tileTransform}. The transforms for a given
+   * `(col, row)` never change for the life of this level, and consumers
+   * (e.g. `RasterTileLayer._renderSubLayers`) rely on reference stability
+   * to avoid spurious mesh regeneration downstream in `RasterLayer`.
+   */
+  private readonly _tileTransformCache = new Map<
+    string,
+    {
+      forwardTransform: ProjectionFunction;
+      inverseTransform: ProjectionFunction;
+    }
+  >();
 
   constructor(tileMatrix: TileMatrix) {
     this.inner = tileMatrix;
@@ -135,12 +148,21 @@ class TileMatrixAdaptor implements TilesetLevel {
     forwardTransform: ProjectionFunction;
     inverseTransform: ProjectionFunction;
   } {
+    const key = `${col}|${row}`;
+    const cached = this._tileTransformCache.get(key);
+    if (cached) {
+      return cached;
+    }
     const fwd = tileTransform(this.inner, { col, row });
     const inv = affine.invert(fwd);
-    return {
-      forwardTransform: (x, y) => affine.apply(fwd, x, y),
-      inverseTransform: (x, y) => affine.apply(inv, x, y),
+    const result = {
+      forwardTransform: (x: number, y: number): [number, number] =>
+        affine.apply(fwd, x, y),
+      inverseTransform: (x: number, y: number): [number, number] =>
+        affine.apply(inv, x, y),
     };
+    this._tileTransformCache.set(key, result);
+    return result;
   }
 }
 

packages/deck.gl-raster/tests/raster-tileset/affine-tileset-level.test.ts

@@ -194,4 +194,37 @@ describe("AffineTilesetLevel", () => {
       expect(range).toEqual({ minCol: 0, maxCol: 0, minRow: 0, maxRow: 0 });
     });
   });
+
+  describe("tileTransform memoization", () => {
+    it("returns the same reference for the same (col, row)", () => {
+      const level = new AffineTilesetLevel({
+        affine: SQUARE_AFFINE,
+        arrayWidth: 16,
+        arrayHeight: 16,
+        tileWidth: 4,
+        tileHeight: 4,
+        mpu: 1,
+      });
+      const first = level.tileTransform(1, 2);
+      const second = level.tileTransform(1, 2);
+      expect(second).toBe(first);
+      expect(second.forwardTransform).toBe(first.forwardTransform);
+      expect(second.inverseTransform).toBe(first.inverseTransform);
+    });
+
+    it("returns distinct references for different (col, row)", () => {
+      const level = new AffineTilesetLevel({
+        affine: SQUARE_AFFINE,
+        arrayWidth: 16,
+        arrayHeight: 16,
+        tileWidth: 4,
+        tileHeight: 4,
+        mpu: 1,
+      });
+      const a = level.tileTransform(0, 0);
+      const b = level.tileTransform(1, 0);
+      expect(b).not.toBe(a);
+      expect(b.forwardTransform).not.toBe(a.forwardTransform);
+    });
+  });
 });

packages/deck.gl-raster/tests/raster-tileset/tile-transform.test.ts

@@ -57,4 +57,12 @@ describe("TileMatrixSetAdaptor.tileTransform", () => {
     expect(px).toBeCloseTo(1.3, 10);
     expect(py).toBeCloseTo(0.7, 10);
   });
+
+  it("returns the same reference for the same (col, row)", () => {
+    const first = level.tileTransform(0, 0);
+    const second = level.tileTransform(0, 0);
+    expect(second).toBe(first);
+    expect(second.forwardTransform).toBe(first.forwardTransform);
+    expect(second.inverseTransform).toBe(first.inverseTransform);
+  });
 });