Prevent pitching when zooming into terrain

src/geo/transform.js

@@ -231,7 +231,7 @@ class Transform {
             this._updateCameraOnTerrain();
         }
         if (constrainCameraOverTerrain || centerAltitudeChanged) {
-            this._constrainCameraAltitude();
+            this._constrainCamera();
         }
         this._calcMatrices();
     }
@@ -1586,7 +1586,7 @@ class Transform {
         }
     }
 
-    _constrainCameraAltitude() {
+    _constrainCamera() {
         if (!this._elevation)
             return;
 
@@ -1606,20 +1606,10 @@ class Transform {
         if (cameraHeight < minHeight) {
             const center = this.locationCoordinate(this._center, this._centerAltitude);
             const cameraToCenter = [center.x - pos[0], center.y - pos[1], center.z - pos[2]];
-            const prevDistToCamera = vec3.length(cameraToCenter);
 
-            // Adjust the camera vector so that the camera is placed above the terrain.
-            // Distance between the camera and the center point is kept constant.
-            cameraToCenter[2] -= (minHeight - cameraHeight) / this._pixelsPerMercatorPixel;
-
-            const newDistToCamera = vec3.length(cameraToCenter);
-            if (newDistToCamera === 0)
-                return;
-
-            vec3.scale(cameraToCenter, cameraToCenter, prevDistToCamera / newDistToCamera * this._pixelsPerMercatorPixel);
+            vec3.scale(cameraToCenter, cameraToCenter, this._pixelsPerMercatorPixel);
             this._camera.position = [center.x - cameraToCenter[0], center.y - cameraToCenter[1], center.z * this._pixelsPerMercatorPixel - cameraToCenter[2]];
 
-            this._camera.orientation = orientationFromFrame(cameraToCenter, this._camera.up());
             this._updateStateFromCamera();
         }
     }
@@ -1681,7 +1671,7 @@ class Transform {
             this.zoom += this.scaleZoom(s);
         }
 
-        this._constrainCameraAltitude();
+        this._constrainCamera();
         this._unmodified = unmodified;
         this._constraining = false;
     }

test/integration/render-tests/debug/terrain/camera-collides-with-terrain/style.json

@@ -0,0 +1,48 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256,
+      "width": 256
+    }
+  },
+  "center": [
+    -104.93611234965806,
+    38.85724324489064
+  ],
+  "zoom": 22,
+  "pitch": 85,
+  "bearing": -79,
+  "terrain": {
+    "source": "rgbterrain",
+    "exaggeration": 1
+  },
+  "sources": {
+    "rgbterrain": {
+      "type": "raster-dem",
+      "tiles": [
+        "local://tiles/12-759-1609.terrain.png"
+      ],
+      "maxzoom": 11,
+      "tileSize": 256
+    }
+  },
+  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "gray"
+      }
+    },
+    {
+      "id": "hillshade-translucent",
+      "type": "hillshade",
+      "source": "rgbterrain",
+      "paint": {
+        "hillshade-exaggeration": 1
+      }
+    }
+  ]
+}

test/unit/geo/transform.test.js

@@ -5,7 +5,7 @@ import LngLat from '../../../src/geo/lng_lat.js';
 import {OverscaledTileID, CanonicalTileID} from '../../../src/source/tile_id.js';
 import {fixedNum, fixedLngLat, fixedCoord, fixedPoint, fixedVec3, fixedVec4} from '../../util/fixed.js';
 import {FreeCameraOptions} from '../../../src/ui/free_camera.js';
-import MercatorCoordinate, {mercatorZfromAltitude, MAX_MERCATOR_LATITUDE} from '../../../src/geo/mercator_coordinate.js';
+import MercatorCoordinate, {mercatorZfromAltitude, altitudeFromMercatorZ, MAX_MERCATOR_LATITUDE} from '../../../src/geo/mercator_coordinate.js';
 import {vec3, quat} from 'gl-matrix';
 import LngLatBounds from '../../../src/geo/lng_lat_bounds.js';
 import {degToRad, radToDeg} from '../../../src/util/util.js';
@@ -714,13 +714,12 @@ test('transform', (t) => {
         };
     };
 
-    test('Constrained camera height over terrain', (t) => {
+    test('Camera height and pitch does not change when colliding with terrain', (t) => {
         const transform = new Transform();
         transform.resize(200, 200);
         transform.maxPitch = 85;
 
         transform.elevation = createCollisionElevation(10);
-        transform.constantCameraHeight = false;
         transform.bearing = -45;
         transform.pitch = 85;
 
@@ -729,13 +728,37 @@ test('transform', (t) => {
         const zoom = transform._zoomFromMercatorZ(altitudeZ);
         transform.zoom = zoom;
 
-        // Pitch should have been adjusted so that the camera isn't under the terrain
-        const pixelsPerMeter = mercatorZfromAltitude(1, transform.center.lat) * transform.worldSize;
-        const updatedAltitude = transform.cameraToCenterDistance / pixelsPerMeter * Math.cos(degToRad(transform.pitch));
+        const cameraAltitude = altitudeFromMercatorZ(transform.getFreeCameraOptions().position.z, transform.getFreeCameraOptions().position.y);
+        transform.updateElevation(false);
+
+        t.equal(fixedNum(cameraAltitude), 4.9999999999);
+        t.equal(fixedNum(transform.zoom), fixedNum(zoom));
+        t.equal(fixedNum(transform.bearing), -45);
+        t.equal(fixedNum(transform.pitch), 85);
+
+        t.end();
+    });
+
+    test('Camera height is above terrain with constant elevation', (t) => {
+        const transform = new Transform();
+        transform.resize(200, 200);
+        transform.maxPitch = 85;
+
+        transform.elevation = createConstantElevation(10);
+        transform.bearing = -45;
+        transform.pitch = 85;
+
+        // Set camera altitude to 5 meters
+        const altitudeZ = mercatorZfromAltitude(5, transform.center.lat) / Math.cos(degToRad(85));
+        const zoom = transform._zoomFromMercatorZ(altitudeZ);
+        transform.zoom = zoom;
+
+        const cameraAltitude = altitudeFromMercatorZ(transform.getFreeCameraOptions().position.z, transform.getFreeCameraOptions().position.y);
 
-        t.true(updatedAltitude > 10);
+        t.ok(cameraAltitude > 10);
         t.equal(fixedNum(transform.zoom), fixedNum(zoom));
         t.equal(fixedNum(transform.bearing), -45);
+        t.equal(fixedNum(transform.pitch), 85);
 
         t.end();
     });
@@ -763,31 +786,38 @@ test('transform', (t) => {
 
         t.equal(fixedNum(cameraAltitude()), 5);
         t.equal(transform._centerAltitude, 0);
+
         // increase exaggeration to lift the center (and camera that follows it) up.
         transform.elevation._exaggeration = 1;
         transform.updateElevation(false);
         t.equal(transform._centerAltitude, 10);
+
         const cameraAltitudeAfterLift = cameraAltitude();
         t.equal(fixedNum(cameraAltitudeAfterLift), 15);
+
         transform.elevation._exaggeration = 15;
         transform.updateElevation(false);
         t.equal(transform._centerAltitude, 150);
         t.equal(fixedNum(cameraAltitude()), 155);
+
         transform.elevation._exaggeration = 0;
         transform.updateElevation(false);
         t.equal(fixedNum(cameraAltitude()), 5);
+
         // zoom out to 10 meters and back to 5
         transform.zoom = transform._zoomFromMercatorZ(altitudeZ * 2);
         t.equal(fixedNum(cameraAltitude()), 10);
         transform.zoom = zoom;
         t.equal(fixedNum(cameraAltitude()), 5);
+        t.equal(fixedNum(transform.pitch), 85);
 
         transform.elevation = null;
         t.ok(cameraAltitude() < 10);
 
-        // collision elevation keeps center at 0 but pushes camera up.
+        // collision elevation does not push camera up
         const elevation1 = createCollisionElevation(10);
         elevation1._exaggeration = 0;
+
         transform.elevation = elevation1;
         transform.updateElevation(false);
         t.equal(transform._centerAltitude, 0);
@@ -796,7 +826,8 @@ test('transform', (t) => {
         elevation1._exaggeration = 1;
         transform.updateElevation(false);
         t.equal(transform._centerAltitude, 0);
-        t.ok(cameraAltitude() > 11 && cameraAltitude() < 12);
+        t.ok(cameraAltitude() < 10);
+        t.equal(fixedNum(transform.pitch), 85);
 
         t.end();
     });
@@ -1066,7 +1097,17 @@ test('transform', (t) => {
                 new OverscaledTileID(22, 0, 22, 873835, 1592007),
                 new OverscaledTileID(22, 0, 22, 873834, 1592007),
                 new OverscaledTileID(22, 0, 22, 873835, 1592006),
-                new OverscaledTileID(22, 0, 22, 873834, 1592006)
+                new OverscaledTileID(22, 0, 22, 873834, 1592006),
+                new OverscaledTileID(22, 0, 22, 873835, 1592008),
+                new OverscaledTileID(22, 0, 22, 873836, 1592007),
+                new OverscaledTileID(22, 0, 22, 873836, 1592006),
+                new OverscaledTileID(22, 0, 22, 873836, 1592008),
+                new OverscaledTileID(22, 0, 22, 873836, 1592005),
+                new OverscaledTileID(22, 0, 22, 873837, 1592007),
+                new OverscaledTileID(22, 0, 22, 873837, 1592006),
+                new OverscaledTileID(22, 0, 22, 873837, 1592008),
+                new OverscaledTileID(22, 0, 22, 873837, 1592005),
+                new OverscaledTileID(21, 0, 21, 436919, 796002)
             ]);
             t.end();
         });

test/unit/terrain/terrain.test.js

@@ -378,19 +378,19 @@ test('Elevation', (t) => {
                 changed = map._updateAverageElevation(timestamp);
                 t.true(changed);
                 t.true(map._averageElevation.isEasing(timestamp));
-                assertAlmostEqual(t, map.transform.averageElevation, 154.15083854452925);
+                assertAlmostEqual(t, map.transform.averageElevation,  718.9728880094883);
 
                 timestamp += AVERAGE_ELEVATION_EASE_TIME * 0.5;
                 changed = map._updateAverageElevation(timestamp);
                 t.true(changed);
                 t.true(map._averageElevation.isEasing(timestamp));
-                assertAlmostEqual(t, map.transform.averageElevation, 308.3016770890585);
+                assertAlmostEqual(t, map.transform.averageElevation, 1437.9457760189766);
 
                 timestamp += AVERAGE_ELEVATION_SAMPLING_INTERVAL;
                 changed = map._updateAverageElevation(timestamp);
                 t.false(changed);
                 t.false(map._averageElevation.isEasing(timestamp));
-                assertAlmostEqual(t, map.transform.averageElevation, 308.3016770890585);
+                assertAlmostEqual(t, map.transform.averageElevation, 1437.9457760189766);
 
                 t.end();
             });