Fix terrain globe Mercator tile warping

Author: charlieforward9

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

@@ -33,6 +33,8 @@ const TILE_OVERLAP_PIXELS = 1;
 const MIN_TERRAIN_MESH_MAX_ERROR = 1;
 const MAX_LATITUDE = 90;
 const MAX_LONGITUDE = 180;
+const DEGREES_TO_RADIANS = Math.PI / 180;
+const RADIANS_TO_DEGREES = 180 / Math.PI;
 
 const defaultProps: DefaultProps<TerrainLayerProps> = {
   ...TileLayer.defaultProps,
@@ -255,7 +257,9 @@ export default class TerrainLayer<ExtraPropsT extends {} = {}> extends Composite
       elevationDecoder,
       meshMaxError,
       signal
-    });
+    })?.then(mesh =>
+      viewport.resolution && mesh ? remapMeshToWebMercatorTile(mesh, overlappedBounds) : mesh
+    );
     const surface = textureUrl
       ? // If surface image fails to load, the tile should still be displayed
         fetch(textureUrl, {propName: 'texture', layer: this, loaders: [], signal}).catch(_ => null)
@@ -417,3 +421,43 @@ export default class TerrainLayer<ExtraPropsT extends {} = {}> extends Composite
 
 const isTileSetURL = (url: string): boolean =>
   url.includes('{x}') && (url.includes('{y}') || url.includes('{-y}'));
+
+function remapMeshToWebMercatorTile(mesh: MeshAttributes, bounds: Bounds): MeshAttributes {
+  const positions = mesh.attributes.POSITION?.value;
+  const texCoords = mesh.attributes.TEXCOORD_0?.value;
+  if (!positions || !texCoords) {
+    return mesh;
+  }
+
+  const [, south, , north] = bounds;
+  const northY = lngLatToMercatorY(north);
+  const southY = lngLatToMercatorY(south);
+  const remappedPositions = new Float32Array(positions);
+
+  for (let i = 0; i < texCoords.length / 2; i++) {
+    const v = texCoords[i * 2 + 1];
+    const mercatorY = northY + (southY - northY) * v;
+    remappedPositions[i * 3 + 1] = mercatorYToLat(mercatorY);
+  }
+
+  return {
+    ...mesh,
+    attributes: {
+      ...mesh.attributes,
+      POSITION: {
+        ...mesh.attributes.POSITION,
+        value: remappedPositions
+      }
+    }
+  };
+}
+
+function lngLatToMercatorY(latitude: number): number {
+  const clampedLatitude = Math.max(-85.051129, Math.min(85.051129, latitude));
+  const sin = Math.sin(clampedLatitude * DEGREES_TO_RADIANS);
+  return 0.5 - Math.log((1 + sin) / (1 - sin)) / (4 * Math.PI);
+}
+
+function mercatorYToLat(y: number): number {
+  return Math.atan(Math.sinh(Math.PI * (1 - 2 * y))) * RADIANS_TO_DEGREES;
+}

test/modules/geo-layers/terrain-layer.spec.ts

@@ -5,6 +5,7 @@
 import {test, expect} from 'vitest';
 import {generateLayerTests, testLayerAsync} from '@deck.gl/test-utils/vitest';
 import {TerrainLayer, TileLayer} from '@deck.gl/geo-layers';
+import {_GlobeView as GlobeView} from '@deck.gl/core';
 import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
 import {TerrainLoader} from '@loaders.gl/terrain';
 
@@ -47,3 +48,43 @@ test('TerrainLayer', async () => {
     onError: err => expect(err).toBeFalsy()
   });
 });
+
+test('TerrainLayer#globe remaps WebMercator tile rows to lng/lat mesh positions', async () => {
+  const sourceMesh = {
+    attributes: {
+      POSITION: {value: new Float32Array([0, 80, 0, 0.5, 40, 0, 1, 0, 0]), size: 3},
+      TEXCOORD_0: {value: new Float32Array([0, 0, 0.5, 0.5, 1, 1]), size: 2}
+    }
+  };
+  const layer = new TerrainLayer({
+    id: 'terrain-globe-mercator',
+    elevationData: 'terrain/{z}/{x}/{y}.png',
+    fetch: () => Promise.resolve(sourceMesh)
+  });
+  layer.context = {
+    viewport: new GlobeView().makeViewport({
+      width: 512,
+      height: 512,
+      viewState: {
+        longitude: 0,
+        latitude: 0,
+        zoom: 1
+      }
+    })
+  };
+  layer.state = {isTiled: true};
+
+  const [mesh] = await layer.getTiledTerrainData({
+    index: {x: 0, y: 0, z: 1},
+    id: '0-0-1',
+    bbox: {west: 0, south: 0, east: 1, north: 80},
+    zoom: 1
+  });
+  const positions = mesh.attributes.POSITION.value;
+
+  expect(positions[1], 'top row latitude is preserved').toBeGreaterThan(80);
+  expect(positions[4], 'middle row uses Mercator latitude instead of linear latitude').toBeGreaterThan(
+    40
+  );
+  expect(positions[7], 'bottom row latitude is preserved').toBeLessThan(0);
+});