align projection matrix to pixel grids to draw crisp raster tiles

mapbox · Jan 22, 2018 · 19d233e · 19d233e
1 parent 579abba
commit 19d233e
Show file tree

Hide file tree

Showing 73 changed files with 246 additions and 8 deletions.
diff --git a/debug/raster-streets.html b/debug/raster-streets.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+
+<script src='/dist/mapbox-gl-dev.js'></script>
+<script src='/debug/access_token_generated.js'></script>
+<script>
+
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 12.5,
+    center: [-77.01866, 38.888],
+    style: {
+        "version": 8,
+        "sources": {
+            "raster-tiles": {
+                "type": "raster",
+                "url": "mapbox://mapbox.streets",
+                "tileSize": 256
+            }
+        },
+        "layers": [{
+            "id": "simple-tiles",
+            "type": "raster",
+            "source": "raster-tiles",
+            "minzoom": 0,
+            "maxzoom": 22
+        }]
+    },
+    hash: true
+});
+
+
+</script>
+</body>
+</html>
diff --git a/src/geo/transform.js b/src/geo/transform.js
@@ -33,6 +33,7 @@ class Transform {
     pixelsToGLUnits: Array<number>;
     cameraToCenterDistance: number;
     projMatrix: Float64Array;
+    alignedProjMatrix: Float64Array;
     pixelMatrix: Float64Array;
     pixelMatrixInverse: Float64Array;
     _fov: number;
@@ -45,6 +46,7 @@ class Transform {
     _center: LngLat;
     _constraining: boolean;
     _posMatrixCache: {[number]: Float32Array};
+    _alignedPosMatrixCache: {[number]: Float32Array};
 
     constructor(minZoom: ?number, maxZoom: ?number, renderWorldCopies: boolean | void) {
         this.tileSize = 512; // constant
@@ -64,6 +66,7 @@ class Transform {
         this._pitch = 0;
         this._unmodified = true;
         this._posMatrixCache = {};
+        this._alignedPosMatrixCache = {};
     }
 
     clone(): Transform {
@@ -398,10 +401,11 @@ class Transform {
      * Calculate the posMatrix that, given a tile coordinate, would be used to display the tile on a map.
      * @param {UnwrappedTileID} unwrappedTileID;
      */
-    calculatePosMatrix(unwrappedTileID: UnwrappedTileID): Float32Array {
+    calculatePosMatrix(unwrappedTileID: UnwrappedTileID, aligned: boolean = false): Float32Array {
         const posMatrixKey = unwrappedTileID.key;
-        if (this._posMatrixCache[posMatrixKey]) {
-            return this._posMatrixCache[posMatrixKey];
+        const cache = aligned ? this._alignedPosMatrixCache : this._posMatrixCache;
+        if (cache[posMatrixKey]) {
+            return cache[posMatrixKey];
         }
 
         const canonical = unwrappedTileID.canonical;
@@ -411,10 +415,10 @@ class Transform {
         const posMatrix = mat4.identity(new Float64Array(16));
         mat4.translate(posMatrix, posMatrix, [unwrappedX * scale, canonical.y * scale, 0]);
         mat4.scale(posMatrix, posMatrix, [scale / EXTENT, scale / EXTENT, 1]);
-        mat4.multiply(posMatrix, this.projMatrix, posMatrix);
+        mat4.multiply(posMatrix, aligned ? this.alignedProjMatrix : this.projMatrix, posMatrix);
 
-        this._posMatrixCache[posMatrixKey] = new Float32Array(posMatrix);
-        return this._posMatrixCache[posMatrixKey];
+        cache[posMatrixKey] = new Float32Array(posMatrix);
+        return cache[posMatrixKey];
     }
 
     _constrain() {
@@ -496,6 +500,7 @@ class Transform {
         const halfFov = this._fov / 2;
         const groundAngle = Math.PI / 2 + this._pitch;
         const topHalfSurfaceDistance = Math.sin(halfFov) * this.cameraToCenterDistance / Math.sin(Math.PI - groundAngle - halfFov);
+        const x = this.x, y = this.y;
 
         // Calculate z distance of the farthest fragment that should be rendered.
         const furthestDistance = Math.cos(Math.PI / 2 - this._pitch) * topHalfSurfaceDistance + this.cameraToCenterDistance;
@@ -510,7 +515,7 @@ class Transform {
         mat4.translate(m, m, [0, 0, -this.cameraToCenterDistance]);
         mat4.rotateX(m, m, this._pitch);
         mat4.rotateZ(m, m, this.angle);
-        mat4.translate(m, m, [-this.x, -this.y, 0]);
+        mat4.translate(m, m, [-x, -y, 0]);
 
         // scale vertically to meters per pixel (inverse of ground resolution):
         // worldSize / (circumferenceOfEarth * cos(lat * π / 180))
@@ -519,6 +524,20 @@ class Transform {
 
         this.projMatrix = m;
 
+        // Make a second projection matrix that is aligned to a pixel grid for rendering raster tiles.
+        // We're rounding the (floating point) x/y values to achieve to avoid rendering raster images to fractional
+        // coordinates. Additionally, we adjust by half a pixel in either direction in case that viewport dimension
+        // is an odd integer to preserve rendering to the pixel grid. We're rotating this shift based on the angle
+        // of the transformation so that 0°, 90°, 180°, and 270° rasters are crisp, and adjust the shift so that
+        // it is always <= 0.5 pixels.
+        const xShift = (this.width % 2) / 2, yShift = (this.height % 2) / 2,
+            angleCos = Math.cos(this.angle), angleSin = Math.sin(this.angle),
+            dx = x - Math.round(x) + angleCos * xShift + angleSin * yShift,
+            dy = y - Math.round(y) + angleCos * yShift + angleSin * xShift;
+        const alignedM = new Float64Array(m);
+        mat4.translate(alignedM, alignedM, [ dx > 0.5 ? dx - 1 : dx, dy > 0.5 ? dy - 1 : dy, 0 ]);
+        this.alignedProjMatrix = alignedM;
+
         // matrix for conversion from location to screen coordinates
         m = mat4.create();
         mat4.scale(m, m, [this.width / 2, -this.height / 2, 1]);
@@ -531,6 +550,7 @@ class Transform {
         this.pixelMatrixInverse = m;
 
         this._posMatrixCache = {};
+        this._alignedPosMatrixCache = {};
     }
 }
 

diff --git a/src/render/draw_raster.js b/src/render/draw_raster.js
@@ -44,7 +44,7 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterSty
             layer.paint.get('raster-opacity') === 1 ? DepthMode.ReadWrite : DepthMode.ReadOnly, gl.LESS));
 
         const tile = sourceCache.getTile(coord);
-        const posMatrix = painter.transform.calculatePosMatrix(coord.toUnwrapped());
+        const posMatrix = painter.transform.calculatePosMatrix(coord.toUnwrapped(), true);
 
         tile.registerFadeDuration(layer.paint.get('raster-fade-duration'));
 

diff --git a/test/integration/render-tests/background-opacity/image/expected.png b/test/integration/render-tests/background-opacity/image/expected.png
diff --git a/...on/render-tests/combinations/background-opaque--raster-translucent/expected.png b/...on/render-tests/combinations/background-opaque--raster-translucent/expected.png
diff --git a/...nder-tests/combinations/background-translucent--raster-translucent/expected.png b/...nder-tests/combinations/background-translucent--raster-translucent/expected.png
diff --git a/...n/render-tests/combinations/circle-translucent--raster-translucent/expected.png b/...n/render-tests/combinations/circle-translucent--raster-translucent/expected.png
diff --git a/...-tests/combinations/fill-extrusion-translucent--raster-translucent/expected.png b/...-tests/combinations/fill-extrusion-translucent--raster-translucent/expected.png
diff --git a/...egration/render-tests/combinations/fill-opaque--raster-translucent/expected.png b/...egration/render-tests/combinations/fill-opaque--raster-translucent/expected.png
diff --git a/...ion/render-tests/combinations/fill-translucent--raster-translucent/expected.png b/...ion/render-tests/combinations/fill-translucent--raster-translucent/expected.png
diff --git a/.../render-tests/combinations/heatmap-translucent--raster-translucent/expected.png b/.../render-tests/combinations/heatmap-translucent--raster-translucent/expected.png
diff --git a/...ender-tests/combinations/hillshade-translucent--raster-translucent/expected.png b/...ender-tests/combinations/hillshade-translucent--raster-translucent/expected.png
diff --git a/...ion/render-tests/combinations/line-translucent--raster-translucent/expected.png b/...ion/render-tests/combinations/line-translucent--raster-translucent/expected.png
diff --git a/...nder-tests/combinations/raster-translucent--background-translucent/expected.png b/...nder-tests/combinations/raster-translucent--background-translucent/expected.png
diff --git a/...n/render-tests/combinations/raster-translucent--circle-translucent/expected.png b/...n/render-tests/combinations/raster-translucent--circle-translucent/expected.png
diff --git a/...-tests/combinations/raster-translucent--fill-extrusion-translucent/expected.png b/...-tests/combinations/raster-translucent--fill-extrusion-translucent/expected.png
diff --git a/...egration/render-tests/combinations/raster-translucent--fill-opaque/expected.png b/...egration/render-tests/combinations/raster-translucent--fill-opaque/expected.png
diff --git a/...ion/render-tests/combinations/raster-translucent--fill-translucent/expected.png b/...ion/render-tests/combinations/raster-translucent--fill-translucent/expected.png
diff --git a/.../render-tests/combinations/raster-translucent--heatmap-translucent/expected.png b/.../render-tests/combinations/raster-translucent--heatmap-translucent/expected.png
diff --git a/...ender-tests/combinations/raster-translucent--hillshade-translucent/expected.png b/...ender-tests/combinations/raster-translucent--hillshade-translucent/expected.png
diff --git a/...ion/render-tests/combinations/raster-translucent--line-translucent/expected.png b/...ion/render-tests/combinations/raster-translucent--line-translucent/expected.png
diff --git a/...n/render-tests/combinations/raster-translucent--raster-translucent/expected.png b/...n/render-tests/combinations/raster-translucent--raster-translucent/expected.png
diff --git a/...n/render-tests/combinations/raster-translucent--symbol-translucent/expected.png b/...n/render-tests/combinations/raster-translucent--symbol-translucent/expected.png
diff --git a/...n/render-tests/combinations/symbol-translucent--raster-translucent/expected.png b/...n/render-tests/combinations/symbol-translucent--raster-translucent/expected.png
diff --git a/test/integration/render-tests/image/default/expected.png b/test/integration/render-tests/image/default/expected.png
diff --git a/test/integration/render-tests/image/pitched/expected.png b/test/integration/render-tests/image/pitched/expected.png
diff --git a/test/integration/render-tests/image/raster-brightness/expected.png b/test/integration/render-tests/image/raster-brightness/expected.png
diff --git a/test/integration/render-tests/image/raster-contrast/expected.png b/test/integration/render-tests/image/raster-contrast/expected.png
diff --git a/test/integration/render-tests/image/raster-hue-rotate/expected.png b/test/integration/render-tests/image/raster-hue-rotate/expected.png
diff --git a/test/integration/render-tests/image/raster-opacity/expected.png b/test/integration/render-tests/image/raster-opacity/expected.png
diff --git a/test/integration/render-tests/image/raster-saturation/expected.png b/test/integration/render-tests/image/raster-saturation/expected.png
diff --git a/test/integration/render-tests/image/raster-visibility/expected.png b/test/integration/render-tests/image/raster-visibility/expected.png
diff --git a/test/integration/render-tests/raster-alpha/default/expected.png b/test/integration/render-tests/raster-alpha/default/expected.png
diff --git a/test/integration/render-tests/raster-brightness/default/expected.png b/test/integration/render-tests/raster-brightness/default/expected.png
diff --git a/test/integration/render-tests/raster-brightness/function/expected.png b/test/integration/render-tests/raster-brightness/function/expected.png
diff --git a/test/integration/render-tests/raster-brightness/literal/expected.png b/test/integration/render-tests/raster-brightness/literal/expected.png
diff --git a/test/integration/render-tests/raster-contrast/default/expected.png b/test/integration/render-tests/raster-contrast/default/expected.png
diff --git a/test/integration/render-tests/raster-contrast/function/expected.png b/test/integration/render-tests/raster-contrast/function/expected.png
diff --git a/test/integration/render-tests/raster-contrast/literal/expected.png b/test/integration/render-tests/raster-contrast/literal/expected.png
diff --git a/test/integration/render-tests/raster-hue-rotate/default/expected.png b/test/integration/render-tests/raster-hue-rotate/default/expected.png
diff --git a/test/integration/render-tests/raster-hue-rotate/function/expected.png b/test/integration/render-tests/raster-hue-rotate/function/expected.png
diff --git a/test/integration/render-tests/raster-hue-rotate/literal/expected.png b/test/integration/render-tests/raster-hue-rotate/literal/expected.png
diff --git a/test/integration/render-tests/raster-loading/missing/expected.png b/test/integration/render-tests/raster-loading/missing/expected.png
diff --git a/test/integration/render-tests/raster-masking/overlapping-zoom/expected.png b/test/integration/render-tests/raster-masking/overlapping-zoom/expected.png
diff --git a/test/integration/render-tests/raster-masking/overlapping/expected.png b/test/integration/render-tests/raster-masking/overlapping/expected.png
diff --git a/test/integration/render-tests/raster-opacity/default/expected.png b/test/integration/render-tests/raster-opacity/default/expected.png
diff --git a/test/integration/render-tests/raster-opacity/function/expected.png b/test/integration/render-tests/raster-opacity/function/expected.png
diff --git a/test/integration/render-tests/raster-opacity/literal/expected.png b/test/integration/render-tests/raster-opacity/literal/expected.png
diff --git a/test/integration/render-tests/raster-rotation/0/expected.png b/test/integration/render-tests/raster-rotation/0/expected.png
diff --git a/test/integration/render-tests/raster-rotation/0/style.json b/test/integration/render-tests/raster-rotation/0/style.json
@@ -0,0 +1,34 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256
+    }
+  },
+  "center": [
+    13.418056,
+    52.499167
+  ],
+  "zoom": 16,
+  "bearing": 0,
+  "sources": {
+    "satellite": {
+      "type": "raster",
+      "tiles": [
+        "local://tiles/{z}-{x}-{y}.satellite.png"
+      ],
+      "maxzoom": 17,
+      "tileSize": 256
+    }
+  },
+  "layers": [
+    {
+      "id": "raster",
+      "type": "raster",
+      "source": "satellite",
+      "paint": {
+        "raster-fade-duration": 0
+      }
+    }
+  ]
+}
diff --git a/test/integration/render-tests/raster-rotation/180/expected.png b/test/integration/render-tests/raster-rotation/180/expected.png
diff --git a/test/integration/render-tests/raster-rotation/180/style.json b/test/integration/render-tests/raster-rotation/180/style.json
@@ -0,0 +1,34 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256
+    }
+  },
+  "center": [
+    13.418056,
+    52.499167
+  ],
+  "zoom": 16,
+  "bearing": 180,
+  "sources": {
+    "satellite": {
+      "type": "raster",
+      "tiles": [
+        "local://tiles/{z}-{x}-{y}.satellite.png"
+      ],
+      "maxzoom": 17,
+      "tileSize": 256
+    }
+  },
+  "layers": [
+    {
+      "id": "raster",
+      "type": "raster",
+      "source": "satellite",
+      "paint": {
+        "raster-fade-duration": 0
+      }
+    }
+  ]
+}
diff --git a/test/integration/render-tests/raster-rotation/270/expected.png b/test/integration/render-tests/raster-rotation/270/expected.png
diff --git a/test/integration/render-tests/raster-rotation/270/style.json b/test/integration/render-tests/raster-rotation/270/style.json
@@ -0,0 +1,34 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256
+    }
+  },
+  "center": [
+    13.418056,
+    52.499167
+  ],
+  "zoom": 16,
+  "bearing": 270,
+  "sources": {
+    "satellite": {
+      "type": "raster",
+      "tiles": [
+        "local://tiles/{z}-{x}-{y}.satellite.png"
+      ],
+      "maxzoom": 17,
+      "tileSize": 256
+    }
+  },
+  "layers": [
+    {
+      "id": "raster",
+      "type": "raster",
+      "source": "satellite",
+      "paint": {
+        "raster-fade-duration": 0
+      }
+    }
+  ]
+}
diff --git a/test/integration/render-tests/raster-rotation/45/expected.png b/test/integration/render-tests/raster-rotation/45/expected.png
diff --git a/test/integration/render-tests/raster-rotation/45/style.json b/test/integration/render-tests/raster-rotation/45/style.json
@@ -0,0 +1,34 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256
+    }
+  },
+  "center": [
+    13.418056,
+    52.499167
+  ],
+  "zoom": 16,
+  "bearing": 45,
+  "sources": {
+    "satellite": {
+      "type": "raster",
+      "tiles": [
+        "local://tiles/{z}-{x}-{y}.satellite.png"
+      ],
+      "maxzoom": 17,
+      "tileSize": 256
+    }
+  },
+  "layers": [
+    {
+      "id": "raster",
+      "type": "raster",
+      "source": "satellite",
+      "paint": {
+        "raster-fade-duration": 0
+      }
+    }
+  ]
+}
diff --git a/test/integration/render-tests/raster-rotation/90/expected.png b/test/integration/render-tests/raster-rotation/90/expected.png
diff --git a/test/integration/render-tests/raster-rotation/90/style.json b/test/integration/render-tests/raster-rotation/90/style.json
@@ -0,0 +1,34 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256
+    }
+  },
+  "center": [
+    13.418056,
+    52.499167
+  ],
+  "zoom": 16,
+  "bearing": 90,
+  "sources": {
+    "satellite": {
+      "type": "raster",
+      "tiles": [
+        "local://tiles/{z}-{x}-{y}.satellite.png"
+      ],
+      "maxzoom": 17,
+      "tileSize": 256
+    }
+  },
+  "layers": [
+    {
+      "id": "raster",
+      "type": "raster",
+      "source": "satellite",
+      "paint": {
+        "raster-fade-duration": 0
+      }
+    }
+  ]
+}
diff --git a/test/integration/render-tests/raster-saturation/default/expected.png b/test/integration/render-tests/raster-saturation/default/expected.png
diff --git a/test/integration/render-tests/raster-saturation/function/expected.png b/test/integration/render-tests/raster-saturation/function/expected.png
diff --git a/test/integration/render-tests/raster-saturation/literal/expected.png b/test/integration/render-tests/raster-saturation/literal/expected.png
diff --git a/test/integration/render-tests/raster-visibility/visible/expected.png b/test/integration/render-tests/raster-visibility/visible/expected.png
diff --git a/test/integration/render-tests/retina-raster/default/expected.png b/test/integration/render-tests/retina-raster/default/expected.png
diff --git a/test/integration/render-tests/runtime-styling/layer-add-raster/expected.png b/test/integration/render-tests/runtime-styling/layer-add-raster/expected.png
diff --git a/...ntegration/render-tests/runtime-styling/set-style-layer-add-raster/expected.png b/...ntegration/render-tests/runtime-styling/set-style-layer-add-raster/expected.png
diff --git a/...on/render-tests/runtime-styling/set-style-source-add-raster-inline/expected.png b/...on/render-tests/runtime-styling/set-style-source-add-raster-inline/expected.png
diff --git a/...ation/render-tests/runtime-styling/set-style-source-add-raster-url/expected.png b/...ation/render-tests/runtime-styling/set-style-source-add-raster-url/expected.png
diff --git a/.../integration/render-tests/runtime-styling/source-add-raster-inline/expected.png b/.../integration/render-tests/runtime-styling/source-add-raster-inline/expected.png
diff --git a/test/integration/render-tests/runtime-styling/source-add-raster-url/expected.png b/test/integration/render-tests/runtime-styling/source-add-raster-url/expected.png
diff --git a/test/integration/render-tests/video/default/expected.png b/test/integration/render-tests/video/default/expected.png
diff --git a/test/integration/render-tests/zoomed-raster/fractional/expected.png b/test/integration/render-tests/zoomed-raster/fractional/expected.png
diff --git a/test/integration/render-tests/zoomed-raster/overzoom/expected.png b/test/integration/render-tests/zoomed-raster/overzoom/expected.png
diff --git a/test/integration/render-tests/zoomed-raster/underzoom/expected.png b/test/integration/render-tests/zoomed-raster/underzoom/expected.png