only align raster sources to pixel grid when map is idle to prevent s…

…haking (mapbox#7426)

* only align raster sources to pixel grid when map is idle to prevent shaking

* remove integer zoom condition per kk's comment

* ensure map renders once more on moveend

src/render/draw_raster.js

@@ -23,15 +23,15 @@ function drawRaster(painter, sourceCache, layer, coords) {
     const stencilMode = StencilMode.disabled;
     const colorMode = painter.colorModeForRenderPass();
     const minTileZ = coords.length && coords[0].overscaledZ;
-
+    const align = !painter.options.moving;
     for (const coord of coords) {
         // Set the lower zoom level to sublayer 0, and higher zoom levels to higher sublayers
         // Use gl.LESS to prevent double drawing in areas where tiles overlap.
         const depthMode = painter.depthModeForSublayer(coord.overscaledZ - minTileZ,
             layer.paint.get('raster-opacity') === 1 ? DepthMode.ReadWrite : DepthMode.ReadOnly, gl.LESS);
 
         const tile = sourceCache.getTile(coord);
-        const posMatrix = painter.transform.calculatePosMatrix(coord.toUnwrapped(), true);
+        const posMatrix = painter.transform.calculatePosMatrix(coord.toUnwrapped(), align);
 
         tile.registerFadeDuration(layer.paint.get('raster-fade-duration'));
 

src/render/painter.js

@@ -47,8 +47,6 @@ const draw = {
 };
 
 
-
-
 /**
  * Initialize a new painter object.
  *

src/render/program/hillshade_program.js

@@ -45,9 +45,9 @@ const hillshadeUniformValues = (
     if (layer.paint.get('hillshade-illumination-anchor') === 'viewport') {
         azimuthal -= painter.transform.angle;
     }
-
+    const align = !painter.options.moving;
     return {
-        'u_matrix': painter.transform.calculatePosMatrix(tile.tileID.toUnwrapped(), true),
+        'u_matrix': painter.transform.calculatePosMatrix(tile.tileID.toUnwrapped(), align),
         'u_image': 0,
         'u_latrange': getTileLatRange(painter, tile.tileID),
         'u_light': [layer.paint.get('hillshade-exaggeration'), azimuthal],

src/ui/map.js

@@ -225,6 +225,7 @@ class Map extends Camera {
         this._setupPainter();
 
         this.on('move', this._update.bind(this, false));
+        this.on('moveend', this._update.bind(this, false));
         this.on('zoom', this._update.bind(this, true));
 
         if (typeof window !== 'undefined') {
@@ -1363,6 +1364,7 @@ class Map extends Camera {
             showOverdrawInspector: this._showOverdrawInspector,
             rotating: this.isRotating(),
             zooming: this.isZooming(),
+            moving: this.isMoving(),
             fadeDuration: this._fadeDuration
         });