Terrain3D symbol cutoff at horizon

src/geo/transform.test.ts

@@ -384,4 +384,27 @@ describe('transform', () => {
 
         expect(coordinate).toBeDefined();
     });
+
+    test('horizon', () => {
+        const transform = new Transform(0, 22, 0, 85, true);
+        transform.resize(500, 500);
+        transform.pitch = 75;
+        const horizon = transform.getHorizon();
+
+        expect(horizon).toBeCloseTo(170.8176101748407, 10);
+    });
+
+    test('getBounds with horizon', () => {
+        const transform = new Transform(0, 22, 0, 85, true);
+        transform.resize(500, 500);
+
+        transform.pitch = 60;
+        expect(transform.getBounds().getNorthWest().toArray()).toStrictEqual(transform.pointLocation(new Point(0, 0)).toArray());
+
+        transform.pitch = 75;
+        const top = Math.max(0, transform.height / 2 - transform.getHorizon());
+        expect(top).toBeCloseTo(79.1823898251593, 10);
+        expect(transform.getBounds().getNorthWest().toArray()).toStrictEqual(transform.pointLocation(new Point(0, top)).toArray());
+    });
+
 });

src/geo/transform.ts

@@ -671,9 +671,10 @@ class Transform {
      * @returns {LngLatBounds} Returns a {@link LngLatBounds} object describing the map's geographical bounds.
      */
     getBounds(): LngLatBounds {
+        const top = Math.max(0, this.height / 2 - this.getHorizon());
         return new LngLatBounds()
-            .extend(this.pointLocation(new Point(0, 0)))
-            .extend(this.pointLocation(new Point(this.width, 0)))
+            .extend(this.pointLocation(new Point(0, top)))
+            .extend(this.pointLocation(new Point(this.width, top)))
             .extend(this.pointLocation(new Point(this.width, this.height)))
             .extend(this.pointLocation(new Point(0, this.height)));
     }
@@ -695,7 +696,7 @@ class Transform {
      * The calculated value is the horizontal line from the camera-height to sea-level.
      * @returns {number} Horizon above center in pixels.
      */
-    getHorizon() {
+    getHorizon(): number {
         return Math.tan(Math.PI / 2 - this._pitch) * this.cameraToCenterDistance * 0.85;
     }
 

src/symbol/collision_index.ts

@@ -55,6 +55,10 @@ class CollisionIndex {
     gridRightBoundary: number;
     gridBottomBoundary: number;
 
+    // With perspectiveRatio the fontsize is calculated for tilted maps (near = bigger, far = smaller).
+    // The cutoff defines a threshold to no longer render labels near the horizon.
+    perspectiveRatioCutoff: number;
+
     constructor(
         transform: Transform,
         grid = new GridIndex<FeatureKey>(transform.width + 2 * viewportPadding, transform.height + 2 * viewportPadding, 25),
@@ -70,6 +74,8 @@ class CollisionIndex {
         this.screenBottomBoundary = transform.height + viewportPadding;
         this.gridRightBoundary = transform.width + 2 * viewportPadding;
         this.gridBottomBoundary = transform.height + 2 * viewportPadding;
+
+        this.perspectiveRatioCutoff = 0.6;
     }
 
     placeCollisionBox(
@@ -91,7 +97,8 @@ class CollisionIndex {
         const brY = collisionBox.y2 * tileToViewport + projectedPoint.point.y;
 
         if (!this.isInsideGrid(tlX, tlY, brX, brY) ||
-            (overlapMode !== 'always' && this.grid.hitTest(tlX, tlY, brX, brY, overlapMode, collisionGroupPredicate))) {
+            (overlapMode !== 'always' && this.grid.hitTest(tlX, tlY, brX, brY, overlapMode, collisionGroupPredicate)) ||
+            projectedPoint.perspectiveRatio < this.perspectiveRatioCutoff) {
             return {
                 box: [],
                 offscreen: false
@@ -268,7 +275,7 @@ class CollisionIndex {
         }
 
         return {
-            circles: ((!showCollisionCircles && collisionDetected) || !inGrid) ? [] : placedCollisionCircles,
+            circles: ((!showCollisionCircles && collisionDetected) || !inGrid || perspectiveRatio < this.perspectiveRatioCutoff) ? [] : placedCollisionCircles,
             offscreen: entirelyOffscreen,
             collisionDetected
         };

test/integration/render/render.test.ts

@@ -66,6 +66,7 @@ type TestData = {
     actualPath: string;
     diffPath: string;
     expectedPath: string;
+    maxPitch: number;
 }
 
 type RenderOptions = {
@@ -415,6 +416,7 @@ function getImageFromStyle(style: StyleWithTestData): Promise<Uint8Array> {
             classes: options.classes,
             interactive: false,
             attributionControl: false,
+            maxPitch: options.maxPitch,
             pixelRatio: options.pixelRatio,
             preserveDrawingBuffer: true,
             axonometric: options.axonometric || false,

test/integration/render/tests/debug/collision-horizon-cutoff/style.json

@@ -0,0 +1,49 @@
+{
+   "version": 8,
+   "metadata": {
+     "test": {
+       "collisionDebug": true,
+       "width": 500,
+       "height": 500,
+       "allowed": 0.005,
+       "maxPitch": 85
+     }
+   },
+   "center": [
+     -60,
+     0
+   ],
+   "zoom": 5,
+   "pitch": 75,
+   "bearing": 0,
+   "sources": {
+     "geojson": {
+       "type": "geojson",
+       "data": "local://data/places.geojson"
+     }
+   },
+   "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+   "sprite": "local://sprites/sprite",
+   "layers": [
+     {
+       "id": "background",
+       "type": "background",
+       "paint": {
+         "background-color": "white"
+       }
+     },
+     {
+       "id": "symbol",
+       "type": "symbol",
+       "source": "geojson",
+       "layout": {
+         "symbol-placement": "point",
+         "text-field": "test test test",
+         "text-font": [
+           "Open Sans Semibold",
+           "Arial Unicode MS Bold"
+         ]
+       }
+     }
+   ]
+ }