[core] easeTo: linear interpolation over zoom instead of scale

[astojilj]

Captured screen video could be compared against videos #15144.
Final version (reusing fly to calculation for constant movement) as in https://github.com/mapbox/mapbox-gl-native/files/3460613/Archive.zip

Version after first patch:

Linear interpolation over zoom looks more natural, as the rate of change looks constant to user: for every zoom change of 1, view displays 2 times wider area.

Problem if using scale could be described by this graph:

http://www.mathopenref.com/graphfunctions.html?fx=log(x)&xh=1000000&xl=0&yh=20&yl=0
Horizontal axis: scale, vertical axis: zoom:

When linearly interpolating over scale, zoom changes very slowly when zoomed in. When zooming out (values of scale towards 0), as reported in #15144, it feels like a sudden zoom out.

The transition could be further improved, by moving center coordinate slower for higher zoom values, to present linear interpolation of center coordinate on the screen, but this improvement already feels like fixing original issue.

Manual verification using modified iosapp:

diff --git a/platform/ios/app/MBXViewController.m b/platform/ios/app/MBXViewController.m
index 2fb95e1b1..bba60c64b 100644
--- a/platform/ios/app/MBXViewController.m
+++ b/platform/ios/app/MBXViewController.m
@@ -1784,11 +1784,28 @@ - (void)addAnnotations:(NSInteger)numAnnotations aroundCoordinate:(CLLocationCoo
 
 - (void)randomWorldTour {
     // Consistent initial conditions (consider setting these by test params)
-    srand48(0);
-    [self.mapView removeAnnotations:self.mapView.annotations];
-    [self.mapView setCenterCoordinate:CLLocationCoordinate2DMake(31, -100) zoomLevel:3 animated:NO];
-
-    [self randomWorldTourInternal];
+//    srand48(0);
+//    [self.mapView removeAnnotations:self.mapView.annotations];
+//    [self.mapView setCenterCoordinate:CLLocationCoordinate2DMake(31, -100) zoomLevel:3 animated:NO];
+
+//    [self randomWorldTourInternal];
+
+    static double altitude = 50000.0;
+    CLLocationCoordinate2D target;
+    if (altitude == 50000.0) {
+        altitude = 10.0;
+        target.latitude = 37.80296867678598;
+        target.longitude = -122.2494649887085;
+    } else {
+        altitude = 50000.0;
+        target.latitude = 37.85296867678598;
+        target.longitude = -122.2494649887085;
+    }
+    MGLMapCamera *camera = [MGLMapCamera cameraLookingAtCenterCoordinate:target
+                                                                altitude:altitude
+                                                                   pitch:0
+                                                                 heading:0];
+    [self.mapView setCamera:camera withDuration:2 animationTimingFunction:nil];
 }
 
 - (void)randomWorldTourInternal {

Fixes: #15144

[astojilj]

@1ec5 ,
PTAL.

[1ec5]

This change does look to be somewhat consistent with how flyTo() works. (I’d be more hesitant to change how flyTo() calculates the zoom level, because I’m pretty sure it’s now aligned with the paper describing the optimal path, following #3301 and #3355.)

We should check whether the trajectory looks good if the origin is at a low latitude and the destination is at a high latitude or vice versa. For example, how does it look if the camera eases from Null Island to Greenwich, England, with identical MGLMapCamera.altitude and thus different zoom levels?

Suggested changelog entry:

• Fixed an issue where animated camera transitions zoomed in or out too dramatically.

[mourner]

The transition could be further improved, by moving center coordinate slower for higher zoom values, to present linear interpolation of center coordinate on the screen, but this improvement already feels like fixing original issue.

The video currently looks like the camera is going in a curve, not as a straight line, which I'd consider a bug for easeTo — how easy it would be to fix?

[astojilj]

@mourner , @1ec5 , @chloekraw , @ansis

Patch eb99e9c
reuses flyTo for easeTo implementation:

• Limit zoom out to min(startZoom, targetZoom).
• Linear zoom interpolation.

The patch also sets linear interpolation for flyTo edgeInsets animation, as it looks more appropriate to follow the approach taken for pitch and bearing.

Attached videos use this easeTo (patch in issue description) with two different set of coordinates.

Archive.zip

[astojilj]

The transition could be further improved, by moving center coordinate slower for higher zoom values, to present linear interpolation of center coordinate on the screen, but this improvement already feels like fixing original issue.

The video currently looks like the camera is going in a curve, not as a straight line, which I'd consider a bug for easeTo — how easy it would be to fix?

Curve related to set latitude and longitude or altitude?

Could you compare it to videos attached to #15281 (comment)? One of the videos uses the same coordinates as in the gif.

[mourner]

@astojilj oh, yeah, I can see the "curve" in the camera path in those videos too (camera not moving in a straight line). I just checked in GL JS and there it is too. I guess it's an unrelated bug that was there before and I didn't pay attention. An example of a straight line camera path would be scroll-zooming with a mouse on a GL JS map.

[astojilj]

@alexshalamov PTAL

[astojilj]

@1ec5 ,
Thanks.

• Fixed an issue where animated camera transitions zoomed in or out too dramatically.

Done.