fix: picking on non-geospatial tile layer with modelMatrix (#9703)

Author: dannda

modules/geo-layers/src/tile-layer/tile-layer.ts

@@ -26,6 +26,7 @@ import {
   Tileset2DProps
 } from '../tileset-2d/index';
 import {urlType, URLTemplate, getURLFromTemplate} from '../tileset-2d/index';
+import {Matrix4} from '@math.gl/core';
 
 const defaultProps: DefaultProps<TileLayerProps> = {
   TilesetClass: Tileset2D,
@@ -401,6 +402,11 @@ export default class TileLayer<DataT = any, ExtraPropsT extends {} = {}> extends
 
   filterSubLayer({layer, cullRect}: FilterContext) {
     const {tile} = (layer as Layer<{tile: Tile2DHeader}>).props;
-    return this.state.tileset!.isTileVisible(tile, cullRect);
+    const {modelMatrix} = this.props;
+    return this.state.tileset!.isTileVisible(
+      tile,
+      cullRect,
+      modelMatrix ? new Matrix4(modelMatrix) : null
+    );
   }
 }

modules/geo-layers/src/tileset-2d/tileset-2d.ts

@@ -9,7 +9,7 @@ import {Matrix4, equals, NumericArray} from '@math.gl/core';
 
 import {Tile2DHeader} from './tile-2d-header';
 
-import {getTileIndices, tileToBoundingBox, getCullBounds} from './utils';
+import {getTileIndices, tileToBoundingBox, getCullBounds, transformBox} from './utils';
 import {Bounds, TileIndex, ZRange} from './types';
 import {TileLoadProps} from './types';
 import {memoize} from './memoize';
@@ -291,7 +291,8 @@ export class Tileset2D {
   // eslint-disable-next-line complexity
   isTileVisible(
     tile: Tile2DHeader,
-    cullRect?: {x: number; y: number; width: number; height: number}
+    cullRect?: {x: number; y: number; width: number; height: number},
+    modelMatrix?: Matrix4 | null
   ): boolean {
     if (!tile.isVisible) {
       return false;
@@ -303,12 +304,19 @@ export class Tileset2D {
         z: this._zRange,
         cullRect
       });
-      const {bbox} = tile;
+      let {bbox} = tile;
       for (const [minX, minY, maxX, maxY] of boundsArr) {
         let overlaps;
         if ('west' in bbox) {
           overlaps = bbox.west < maxX && bbox.east > minX && bbox.south < maxY && bbox.north > minY;
         } else {
+          if (modelMatrix && !Matrix4.IDENTITY.equals(modelMatrix)) {
+            const [left, top, right, bottom] = transformBox(
+              [bbox.left, bbox.top, bbox.right, bbox.bottom],
+              modelMatrix
+            );
+            bbox = {left, top, right, bottom};
+          }
           // top/bottom could be swapped depending on the indexing system
           const y0 = Math.min(bbox.top, bbox.bottom);
           const y1 = Math.max(bbox.top, bbox.bottom);

modules/geo-layers/src/tileset-2d/utils.ts

@@ -39,7 +39,7 @@ export const urlType = {
   }
 };
 
-function transformBox(bbox: Bounds, modelMatrix: Matrix4): Bounds {
+export function transformBox(bbox: Bounds, modelMatrix: Matrix4): Bounds {
   const transformedCoords = [
     // top-left
     modelMatrix.transformAsPoint([bbox[0], bbox[1]]),

test/modules/geo-layers/tileset-2d/tileset-2d.spec.ts

@@ -548,6 +548,95 @@ test('Tileset2D#isTileVisible', async t => {
   t.end();
 });
 
+test('Tileset2D#isTileVisibleWithModelMatrix', async t => {
+  const cullRect = {x: 0, y: 0, width: 256, height: 256};
+  const identityMatrix = new Matrix4();
+  const translationMatrix = new Matrix4().translate([512, 0, 0]);
+  const rotationMatrix = new Matrix4().rotateZ(Math.PI / 2);
+
+  const testCases = [
+    {
+      title: 'identity',
+      viewport: new OrthographicView().makeViewport({
+        width: 1024,
+        height: 512,
+        viewState: {
+          target: [512, 256, 0],
+          zoom: 0
+        }
+      }),
+      modelMatrix: identityMatrix,
+      checks: [
+        {id: '0-0-0', modelMatrix: identityMatrix, result: true},
+        {id: '1-0-0', modelMatrix: identityMatrix, result: true}
+      ]
+    },
+    {
+      title: 'translation',
+      viewport: new OrthographicView().makeViewport({
+        width: 1024,
+        height: 512,
+        viewState: {
+          target: [512, 256, 0],
+          zoom: 0
+        }
+      }),
+      modelMatrix: translationMatrix,
+      checks: [
+        {id: '0-0-0', modelMatrix: translationMatrix, result: true},
+        {id: '0-0-0', cullRect, modelMatrix: translationMatrix, result: false},
+        {id: '1-0-0', modelMatrix: translationMatrix, result: false}
+      ]
+    },
+    {
+      title: 'rotation',
+      viewport: new OrthographicView().makeViewport({
+        width: 1024,
+        height: 512,
+        viewState: {
+          target: [-512, 256, 0],
+          zoom: 0
+        }
+      }),
+      modelMatrix: rotationMatrix,
+      checks: [
+        {id: '0-0-0', modelMatrix: rotationMatrix, result: true},
+        {id: '0-0-0', cullRect, modelMatrix: rotationMatrix, result: false},
+        {id: '0-1-0', modelMatrix: rotationMatrix, result: true},
+        {id: '0-1-0', cullRect, modelMatrix: rotationMatrix, result: true}
+      ]
+    }
+  ];
+
+  let viewport, options;
+  const updateTileset = () => tileset.update(viewport, options);
+  const tileset = new Tileset2D({
+    getTileData,
+    onTileLoad: updateTileset,
+    onTileError: updateTileset
+  });
+
+  for (const testCase of testCases) {
+    t.comment(testCase.title);
+    viewport = testCase.viewport;
+    options = {modelMatrix: testCase.modelMatrix};
+
+    updateTileset();
+    await sleep(10);
+
+    for (const {id, cullRect, modelMatrix, result} of testCase.checks) {
+      const tile = tileset._cache.get(id);
+      t.is(
+        tileset.isTileVisible(tile, cullRect, modelMatrix),
+        result,
+        `isTileVisible with modelMatrix ${cullRect ? 'with cullRect ' : ''}returns correct value for ${id}`
+      );
+    }
+  }
+
+  t.end();
+});
+
 function validateVisibility(strategy, selectedTiles, tiles) {
   /* eslint-disable default-case */
   switch (strategy) {