clean up matrix creation

js/geo/transform.js

@@ -32,7 +32,7 @@ class Transform {
         this._center = new LngLat(0, 0);
         this.zoom = 0;
         this.angle = 0;
-        this._altitude = 1.5;
+        this._fov = 0.6435011087932844;
         this._pitch = 0;
         this._unmodified = true;
     }
@@ -89,14 +89,14 @@ class Transform {
         this._calcMatrices();
     }
 
-    get altitude() {
-        return this._altitude;
+    get fov() {
+        return this._fov / Math.PI * 180;
     }
-    set altitude(altitude) {
-        const a = Math.max(0.75, altitude);
-        if (this._altitude === a) return;
+    set fov(fov) {
+        fov = Math.max(0.01, Math.min(60, fov));
+        if (this._fov === fov) return;
         this._unmodified = false;
-        this._altitude = a;
+        this._fov = fov / 180 * Math.PI;
         this._calcMatrices();
     }
 
@@ -396,25 +396,27 @@ class Transform {
     _calcMatrices() {
         if (!this.height) return;
 
-        // Find the distance from the center point to the center top in altitude units using law of sines.
-        const halfFov = Math.atan(0.5 / this.altitude);
-        const topHalfSurfaceDistance = Math.sin(halfFov) * this.altitude / Math.sin(Math.PI / 2 - this._pitch - halfFov);
+        this.cameraToCenterDistance = 0.5 / Math.tan(this._fov / 2) * this.height;
 
-        // Calculate z value of the farthest fragment that should be rendered.
-        const farZ = Math.cos(Math.PI / 2 - this._pitch) * topHalfSurfaceDistance + this.altitude;
+        // Find the distance from the center point [width/2, height/2] to the
+        // center top point [width/2, 0] in Z units, using the law of sines.
+        // 1 Z unit is equivalent to 1 horizontal px at the center of the map
+        // (the distance between[width/2, height/2] and [width/2 + 1, height/2])
+        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);
+
+        // Calculate z distance of the farthest fragment that should be rendered.
+        const furthestDistance = Math.cos(Math.PI / 2 - this._pitch) * topHalfSurfaceDistance + this.cameraToCenterDistance;
+        // Add a bit extra to avoid precision problems when a fragment's distance is exactly `furthestDistance`
+        const farZ = furthestDistance * 1.01;
 
         // matrix for conversion from location to GL coordinates (-1 .. 1)
         let m = new Float64Array(16);
-        mat4.perspective(m, 2 * Math.atan((this.height / 2) / this.altitude), this.width / this.height, 0.1, farZ);
-        mat4.translate(m, m, [0, 0, -this.altitude]);
-
-        // a hack around https://github.com/mapbox/mapbox-gl-js/issues/2270
-        m[14] = Math.min(m[14], m[15]);
-
-        // After the rotateX, z values are in pixel units. Convert them to
-        // altitude units. 1 altitude unit = the screen height.
-        mat4.scale(m, m, [1, -1, 1 / this.height]);
+        mat4.perspective(m, this._fov, this.width / this.height, 1, farZ);
 
+        mat4.scale(m, m, [1, -1, 1]);
+        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]);
@@ -437,16 +439,6 @@ class Transform {
         if (!m) throw new Error("failed to invert matrix");
         this.pixelMatrixInverse = m;
 
-        // line antialiasing matrix
-        m = mat2.create();
-        mat2.scale(m, m, [1, Math.cos(this._pitch)]);
-        mat2.rotate(m, m, this.angle);
-        this.lineAntialiasingMatrix = m;
-
-        // calculate how much longer the real world distance is at the top of the screen
-        // than at the middle of the screen.
-        const topEdgeLength = Math.sqrt(this.height * this.height / 4  * (1 + this.altitude * this.altitude));
-        this.lineStretch = (this.height / 2 * Math.tan(this._pitch)) / topEdgeLength;
     }
 }
 

js/render/draw_circle.js

@@ -32,8 +32,8 @@ function drawCircles(painter, sourceCache, layer, coords) {
         if (layer.paint['circle-pitch-scale'] === 'map') {
             gl.uniform1i(program.u_scale_with_map, true);
             gl.uniform2f(program.u_extrude_scale,
-                painter.transform.pixelsToGLUnits[0] * painter.transform.altitude,
-                painter.transform.pixelsToGLUnits[1] * painter.transform.altitude);
+                painter.transform.pixelsToGLUnits[0] * painter.transform.cameraToCenterDistance,
+                painter.transform.pixelsToGLUnits[1] * painter.transform.cameraToCenterDistance);
         } else {
             gl.uniform1i(program.u_scale_with_map, false);
             gl.uniform2fv(program.u_extrude_scale, painter.transform.pixelsToGLUnits);

js/render/draw_line.js

@@ -80,6 +80,8 @@ function drawLineTile(program, painter, tile, buffers, layer, coord, layerData,
             gl.uniform2f(program.u_pattern_size_a, imagePosA.size[0] * image.fromScale / tileRatio, imagePosB.size[1]);
             gl.uniform2f(program.u_pattern_size_b, imagePosB.size[0] * image.toScale / tileRatio, imagePosB.size[1]);
         }
+
+        gl.uniform2f(program.u_gl_units_to_pixels, 1 / painter.transform.pixelsToGLUnits[0], 1 / painter.transform.pixelsToGLUnits[1]);
     }
 
     if (programChanged) {
@@ -105,9 +107,6 @@ function drawLineTile(program, painter, tile, buffers, layer, coord, layerData,
             gl.uniform1f(program.u_fade, image.t);
         }
         gl.uniform1f(program.u_width, layer.paint['line-width']);
-
-        gl.uniformMatrix2fv(program.u_antialiasingmatrix, false, painter.transform.lineAntialiasingMatrix);
-        gl.uniform1f(program.u_extra, painter.transform.lineStretch);
     }
 
     painter.enableTileClippingMask(coord);

js/render/draw_symbol.js

@@ -173,12 +173,12 @@ function drawTileSymbols(program, painter, layer, tile, buffers, isText, isSDF,
         const s = pixelsToTileUnits(tile, fontScale, tr.zoom);
         gl.uniform2f(program.u_extrude_scale, s, s);
     } else {
-        const s = tr.altitude * fontScale;
+        const s = tr.cameraToCenterDistance * fontScale;
         gl.uniform2f(program.u_extrude_scale, tr.pixelsToGLUnits[0] * s, tr.pixelsToGLUnits[1] * s);
     }
 
     if (isSDF) {
-        const gammaScale = fontScale * (pitchWithMap ? Math.cos(tr._pitch) : 1);
+        const gammaScale = fontScale * (pitchWithMap ? Math.cos(tr._pitch) : 1) * tr.cameraToCenterDistance;
 
         if (haloWidth) { // Draw halo underneath the text.
             gl.uniform1f(program.u_gamma, (haloBlur * blurOffset / sdfPx + gamma) / gammaScale);

package.json

@@ -62,7 +62,7 @@
     "in-publish": "^2.0.0",
     "jsdom": "^9.4.2",
     "lodash.template": "^4.4.0",
-    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#52acb6e9e4b75b7e765ef087a0e539739e9846c1",
+    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#f13a9710d754fe7357d04175ba960a298aa43a2c",
     "minifyify": "^7.0.1",
     "npm-run-all": "^3.0.0",
     "nyc": "^8.3.0",

shaders/line.vertex.glsl

@@ -17,9 +17,8 @@ attribute vec4 a_data;
 
 uniform mat4 u_matrix;
 uniform mediump float u_ratio;
-uniform mediump float u_extra;
-uniform mat2 u_antialiasingmatrix;
 uniform mediump float u_width;
+uniform vec2 u_gl_units_to_pixels;
 
 varying vec2 v_normal;
 varying vec2 v_width2;
@@ -71,19 +70,16 @@ void main() {
     mediump float t = 1.0 - abs(u);
     mediump vec2 offset2 = offset * a_extrude * scale * normal.y * mat2(t, -u, u, t);
 
-    // Remove the texture normal bit of the position before scaling it with the
-    // model/view matrix.
-    gl_Position = u_matrix * vec4(floor(a_pos * 0.5) + (offset2 + dist) / u_ratio, 0.0, 1.0);
+    // Remove the texture normal bit to get the position
+    vec2 pos = floor(a_pos * 0.5);
 
-    // position of y on the screen
-    float y = gl_Position.y / gl_Position.w;
+    vec4 projected_extrude = u_matrix * vec4(dist / u_ratio, 0.0, 0.0);
+    gl_Position = u_matrix * vec4(pos + offset2 / u_ratio, 0.0, 1.0) + projected_extrude;
 
-    // how much features are squished in the y direction by the tilt
-    float squish_scale = length(a_extrude) / length(u_antialiasingmatrix * a_extrude);
-
-    // how much features are squished in all directions by the perspectiveness
-    float perspective_scale = 1.0 / (1.0 - min(y * u_extra, 0.9));
+    // calculate how much the perspective view squishes or stretches the extrude
+    float extrude_length_without_perspective = length(dist);
+    float extrude_length_with_perspective = length(projected_extrude.xy / gl_Position.w * u_gl_units_to_pixels);
+    v_gamma_scale = extrude_length_without_perspective / extrude_length_with_perspective;
 
     v_width2 = vec2(outset, inset);
-    v_gamma_scale = perspective_scale * squish_scale;
 }

shaders/line_pattern.vertex.glsl

@@ -20,8 +20,7 @@ attribute vec4 a_data;
 uniform mat4 u_matrix;
 uniform mediump float u_ratio;
 uniform mediump float u_width;
-uniform mediump float u_extra;
-uniform mat2 u_antialiasingmatrix;
+uniform vec2 u_gl_units_to_pixels;
 
 varying vec2 v_normal;
 varying vec2 v_width2;
@@ -72,20 +71,17 @@ void main() {
     mediump float t = 1.0 - abs(u);
     mediump vec2 offset2 = offset * a_extrude * scale * normal.y * mat2(t, -u, u, t);
 
-    // Remove the texture normal bit of the position before scaling it with the
-    // model/view matrix.
-    gl_Position = u_matrix * vec4(floor(a_pos * 0.5) + (offset2 + dist) / u_ratio, 0.0, 1.0);
-    v_linesofar = a_linesofar;
-
-    // position of y on the screen
-    float y = gl_Position.y / gl_Position.w;
+    // Remove the texture normal bit to get the position
+    vec2 pos = floor(a_pos * 0.5);
 
-    // how much features are squished in the y direction by the tilt
-    float squish_scale = length(a_extrude) / length(u_antialiasingmatrix * a_extrude);
+    vec4 projected_extrude = u_matrix * vec4(dist / u_ratio, 0.0, 0.0);
+    gl_Position = u_matrix * vec4(pos + offset2 / u_ratio, 0.0, 1.0) + projected_extrude;
 
-    // how much features are squished in all directions by the perspectiveness
-    float perspective_scale = 1.0 / (1.0 - min(y * u_extra, 0.9));
+    // calculate how much the perspective view squishes or stretches the extrude
+    float extrude_length_without_perspective = length(dist);
+    float extrude_length_with_perspective = length(projected_extrude.xy / gl_Position.w * u_gl_units_to_pixels);
+    v_gamma_scale = extrude_length_without_perspective / extrude_length_with_perspective;
 
+    v_linesofar = a_linesofar;
     v_width2 = vec2(outset, inset);
-    v_gamma_scale = perspective_scale * squish_scale;
 }

shaders/line_sdf.vertex.glsl

@@ -23,8 +23,7 @@ uniform vec2 u_patternscale_a;
 uniform float u_tex_y_a;
 uniform vec2 u_patternscale_b;
 uniform float u_tex_y_b;
-uniform float u_extra;
-uniform mat2 u_antialiasingmatrix;
+uniform vec2 u_gl_units_to_pixels;
 uniform mediump float u_width;
 
 varying vec2 v_normal;
@@ -79,22 +78,19 @@ void main() {
     mediump float t = 1.0 - abs(u);
     mediump vec2 offset2 = offset * a_extrude * scale * normal.y * mat2(t, -u, u, t);
 
-    // Remove the texture normal bit of the position before scaling it with the
-    // model/view matrix.
-    gl_Position = u_matrix * vec4(floor(a_pos * 0.5) + (offset2 + dist) / u_ratio, 0.0, 1.0);
+    // Remove the texture normal bit to get the position
+    vec2 pos = floor(a_pos * 0.5);
 
-    v_tex_a = vec2(a_linesofar * u_patternscale_a.x, normal.y * u_patternscale_a.y + u_tex_y_a);
-    v_tex_b = vec2(a_linesofar * u_patternscale_b.x, normal.y * u_patternscale_b.y + u_tex_y_b);
-
-    // position of y on the screen
-    float y = gl_Position.y / gl_Position.w;
+    vec4 projected_extrude = u_matrix * vec4(dist / u_ratio, 0.0, 0.0);
+    gl_Position = u_matrix * vec4(pos + offset2 / u_ratio, 0.0, 1.0) + projected_extrude;
 
-    // how much features are squished in the y direction by the tilt
-    float squish_scale = length(a_extrude) / length(u_antialiasingmatrix * a_extrude);
+    // calculate how much the perspective view squishes or stretches the extrude
+    float extrude_length_without_perspective = length(dist);
+    float extrude_length_with_perspective = length(projected_extrude.xy / gl_Position.w * u_gl_units_to_pixels);
+    v_gamma_scale = extrude_length_without_perspective / extrude_length_with_perspective;
 
-    // how much features are squished in all directions by the perspectiveness
-    float perspective_scale = 1.0 / (1.0 - min(y * u_extra, 0.9));
+    v_tex_a = vec2(a_linesofar * u_patternscale_a.x, normal.y * u_patternscale_a.y + u_tex_y_a);
+    v_tex_b = vec2(a_linesofar * u_patternscale_b.x, normal.y * u_patternscale_b.y + u_tex_y_b);
 
     v_width2 = vec2(outset, inset);
-    v_gamma_scale = perspective_scale * squish_scale;
 }

shaders/symbol_sdf.vertex.glsl

@@ -75,7 +75,7 @@ void main() {
         gl_Position = u_matrix * vec4(a_pos, 0, 1) + vec4(extrude, 0, 0);
     }
 
-    v_gamma_scale = (gl_Position.w - 0.5);
+    v_gamma_scale = gl_Position.w;
 
     v_tex = a_tex / u_texsize;
     v_fade_tex = vec2(a_labelminzoom / 255.0, 0.0);

test/js/geo/transform.test.js

@@ -113,6 +113,9 @@ test('transform', (t) => {
         const transform = new Transform();
         transform.resize(200, 200);
 
+        // make slightly off center so that sort order is not subject to precision issues
+        transform.center = { lng: -0.01, lat: 0.01 };
+
         transform.zoom = 0;
         t.deepEqual(transform.coveringTiles(options), []);
 

test/js/source/source_cache.test.js

@@ -443,7 +443,9 @@ test('SourceCache#update', (t) => {
         const transform = new Transform();
         transform.resize(511, 511);
         transform.zoom = 16;
-        transform.center = new LngLat(0, 0);
+
+        // use slightly offset center so that sort order is better defined
+        transform.center = new LngLat(-0.001, 0.001);
 
 
         const sourceCache = createSourceCache({
@@ -459,8 +461,8 @@ test('SourceCache#update', (t) => {
             t.deepEqual(sourceCache.getRenderableIds(), [
                 new TileCoord(16, 8191, 8191, 0).id,
                 new TileCoord(16, 8192, 8191, 0).id,
-                new TileCoord(16, 8192, 8192, 0).id,
-                new TileCoord(16, 8191, 8192, 0).id
+                new TileCoord(16, 8191, 8192, 0).id,
+                new TileCoord(16, 8192, 8192, 0).id
             ]);
 
             transform.zoom = 15;
@@ -469,8 +471,8 @@ test('SourceCache#update', (t) => {
             t.deepEqual(sourceCache.getRenderableIds(), [
                 new TileCoord(16, 8191, 8191, 0).id,
                 new TileCoord(16, 8192, 8191, 0).id,
-                new TileCoord(16, 8192, 8192, 0).id,
-                new TileCoord(16, 8191, 8192, 0).id
+                new TileCoord(16, 8191, 8192, 0).id,
+                new TileCoord(16, 8192, 8192, 0).id
             ]);
             t.end();
         });

test/js/ui/map.test.js

@@ -9,6 +9,7 @@ const LngLat = require('../../../js/geo/lng_lat');
 const fixed = require('mapbox-gl-js-test/fixed');
 const fixedNum = fixed.Num;
 const fixedLngLat = fixed.LngLat;
+const fixedCoord = fixed.Coord;
 
 function createMap(options, callback) {
     const container = window.document.createElement('div');
@@ -505,7 +506,7 @@ test('Map', (t) => {
         });
 
         function toFixed(bounds) {
-            const n = 10;
+            const n = 9;
             return [
                 [bounds[0][0].toFixed(n), bounds[0][1].toFixed(n)],
                 [bounds[1][0].toFixed(n), bounds[1][1].toFixed(n)]
@@ -659,7 +660,7 @@ test('Map', (t) => {
 
     t.test('#unproject', (t) => {
         const map = createMap();
-        t.deepEqual(map.unproject([100, 100]), { lng: 0, lat: 0 });
+        t.deepEqual(fixedLngLat(map.unproject([100, 100])), { lng: 0, lat: 0 });
         t.end();
     });
 
@@ -689,7 +690,7 @@ test('Map', (t) => {
                 const output = map.queryRenderedFeatures(map.project(new LngLat(0, 0)));
 
                 const args = map.style.queryRenderedFeatures.getCall(0).args;
-                t.deepEqual(args[0], [{ column: 0.5, row: 0.5, zoom: 0 }]); // query geometry
+                t.deepEqual(args[0].map(c => fixedCoord(c)), [{ column: 0.5, row: 0.5, zoom: 0 }]); // query geometry
                 t.deepEqual(args[1], {}); // params
                 t.deepEqual(args[2], 0); // bearing
                 t.deepEqual(args[3], 0); // zoom
@@ -738,8 +739,8 @@ test('Map', (t) => {
 
                 map.queryRenderedFeatures(map.project(new LngLat(360, 0)));
 
-                const coords = map.style.queryRenderedFeatures.getCall(0).args[0];
-                t.equal(parseFloat(coords[0].column.toFixed(4)), 1.5);
+                const coords = map.style.queryRenderedFeatures.getCall(0).args[0].map(c => fixedCoord(c));
+                t.equal(coords[0].column, 1.5);
                 t.equal(coords[0].row, 0.5);
                 t.equal(coords[0].zoom, 0);