mapbox · ChrisLoer · May 25, 2017 · Apr 13, 2017 · Apr 26, 2017 · Apr 27, 2017
diff --git a/debug/canvas.html b/debug/canvas.html
@@ -0,0 +1,80 @@
+<!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>
+<canvas id="testCanvasID" width="200" height="100"
+style="border:10px solid blue;">
+Canvas not supported
+</canvas>
+<div id='map'></div>
+
+<script type="application/javascript">
+function drawToCanvas() {
+    var canvas = document.getElementById('testCanvasID');
+    if (canvas.getContext) {
+        var ctx = canvas.getContext('2d');
+
+        ctx.fillStyle = 'rgb(200, 0, 0)';
+        ctx.fillRect(10, 10, 50, 50);
+
+        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
+        ctx.fillRect(30, 30, 50, 50);
+    }
+}
+</script>
+<script src='/dist/mapbox-gl-dev.js'></script>
+<script src='/debug/access_token_generated.js'></script>
+<script>
+
+var canvasStyle = {
+    "version": 8,
+    "sources": {
+        "canvas": {
+            "type": "canvas",
+            "canvas": "testCanvasID",
+            "coordinates": [
+                [-122.51596391201019, 37.56238816766053],
+                [-122.51467645168304, 37.56410183312965],
+                [-122.51309394836426, 37.563391708549425],
+                [-122.51423120498657, 37.56161849366671]
+            ]
+        }
+    },
+    "layers": [{
+        "id": "background",
+        "type": "background",
+        "paint": {
+            "background-color": "rgb(4,7,14)"
+        }
+    }, {
+        "id": "canvas",
+        "type": "raster",
+        "source": "canvas"
+    }]
+};
+
+var map = new mapboxgl.Map({
+    container: 'map',
+    minZoom: 14,
+    zoom: 17,
+    center: [-122.514426, 37.562984],
+    bearing: -96,
+    style: canvasStyle,
+    hash: false
+});
+
+drawToCanvas();
+
+</script>
+</body>
+</html>
diff --git a/src/data/bucket/symbol_bucket.js b/src/data/bucket/symbol_bucket.js
@@ -32,6 +32,7 @@ const elementArrayType = createElementArrayType();
 
 const layoutAttributes = [
     {name: 'a_pos_offset',  components: 4, type: 'Int16'},
+    {name: 'a_label_pos',   components: 2, type: 'Int16'},
     {name: 'a_data',        components: 4, type: 'Uint16'}
 ];
 
@@ -60,22 +61,27 @@ const symbolInterfaces = {
     },
     collisionBox: { // used to render collision boxes for debugging purposes
         layoutAttributes: [
-            {name: 'a_pos',     components: 2, type: 'Int16'},
-            {name: 'a_extrude', components: 2, type: 'Int16'},
-            {name: 'a_data',    components: 2, type: 'Uint8'}
+            {name: 'a_pos',        components: 2, type: 'Int16'},
+            {name: 'a_anchor_pos', components: 2, type: 'Int16'},
+            {name: 'a_extrude',    components: 2, type: 'Int16'},
+            {name: 'a_data',       components: 2, type: 'Uint8'}
         ],
         elementArrayType: createElementArrayType(2)
     }
 };
 
-function addVertex(array, x, y, ox, oy, tx, ty, sizeVertex, minzoom, maxzoom, labelminzoom, labelangle) {
+function addVertex(array, x, y, ox, oy, labelX, labelY, tx, ty, sizeVertex, minzoom, maxzoom, labelminzoom, labelangle) {
     array.emplaceBack(
         // a_pos_offset
         x,
         y,
         Math.round(ox * 64),
         Math.round(oy * 64),
 
+        // a_label_pos
+        labelX,
+        labelY,
+
         // a_data
         tx, // x coordinate of symbol on glyph atlas texture
         ty, // y coordinate of symbol on glyph atlas texture
@@ -95,11 +101,14 @@ function addVertex(array, x, y, ox, oy, tx, ty, sizeVertex, minzoom, maxzoom, la
     );
 }
 
-function addCollisionBoxVertex(layoutVertexArray, point, extrude, maxZoom, placementZoom) {
+function addCollisionBoxVertex(layoutVertexArray, point, anchor, extrude, maxZoom, placementZoom) {
     return layoutVertexArray.emplaceBack(
         // pos
         point.x,
         point.y,
+        // a_anchor_pos
+        anchor.x,
+        anchor.y,
         // extrude
         Math.round(extrude.x),
         Math.round(extrude.y),
@@ -523,6 +532,10 @@ class SymbolBucket {
         const layer = this.layers[0];
         const layout = layer.layout;
 
+        // Symbols that don't show until greater than the CollisionTile's maxScale won't even be added
+        // to the buffers. Even though pan operations on a tilted map might cause the symbol to be
+        // displayable, we have to stay conservative here because the CollisionTile didn't consider
+        // this scale range.
         const maxScale = collisionTile.maxScale;
 
         const textAlongLine = layout['text-rotation-alignment'] === 'map' && layout['symbol-placement'] === 'line';
@@ -608,7 +621,8 @@ class SymbolBucket {
                         textAlongLine,
                         collisionTile.angle,
                         symbolInstance.featureProperties,
-                        symbolInstance.writingModes);
+                        symbolInstance.writingModes,
+                        symbolInstance.anchor);
                 }
             }
 
@@ -629,7 +643,9 @@ class SymbolBucket {
                         layout['icon-keep-upright'],
                         iconAlongLine,
                         collisionTile.angle,
-                        symbolInstance.featureProperties
+                        symbolInstance.featureProperties,
+                        null,
+                        symbolInstance.anchor
                     );
                 }
             }
@@ -639,7 +655,7 @@ class SymbolBucket {
         if (showCollisionBoxes) this.addToDebugBuffers(collisionTile);
     }
 
-    addSymbols(arrays, quads, scale, sizeVertex, keepUpright, alongLine, placementAngle, featureProperties, writingModes) {
+    addSymbols(arrays, quads, scale, sizeVertex, keepUpright, alongLine, placementAngle, featureProperties, writingModes, labelAnchor) {
         const elementArray = arrays.elementArray;
         const layoutVertexArray = arrays.layoutVertexArray;
 
@@ -676,10 +692,10 @@ class SymbolBucket {
             const segment = arrays.prepareSegment(4);
             const index = segment.vertexLength;
 
-            addVertex(layoutVertexArray, anchorPoint.x, anchorPoint.y, tl.x, tl.y, tex.x, tex.y, sizeVertex, minZoom, maxZoom, placementZoom, glyphAngle);
-            addVertex(layoutVertexArray, anchorPoint.x, anchorPoint.y, tr.x, tr.y, tex.x + tex.w, tex.y, sizeVertex, minZoom, maxZoom, placementZoom, glyphAngle);
-            addVertex(layoutVertexArray, anchorPoint.x, anchorPoint.y, bl.x, bl.y, tex.x, tex.y + tex.h, sizeVertex, minZoom, maxZoom, placementZoom, glyphAngle);
-            addVertex(layoutVertexArray, anchorPoint.x, anchorPoint.y, br.x, br.y, tex.x + tex.w, tex.y + tex.h, sizeVertex, minZoom, maxZoom, placementZoom, glyphAngle);
+            addVertex(layoutVertexArray, anchorPoint.x, anchorPoint.y, tl.x, tl.y, labelAnchor.x, labelAnchor.y, tex.x, tex.y, sizeVertex, minZoom, maxZoom, placementZoom, glyphAngle);
+            addVertex(layoutVertexArray, anchorPoint.x, anchorPoint.y, tr.x, tr.y, labelAnchor.x, labelAnchor.y, tex.x + tex.w, tex.y, sizeVertex, minZoom, maxZoom, placementZoom, glyphAngle);
+            addVertex(layoutVertexArray, anchorPoint.x, anchorPoint.y, bl.x, bl.y, labelAnchor.x, labelAnchor.y, tex.x, tex.y + tex.h, sizeVertex, minZoom, maxZoom, placementZoom, glyphAngle);
+            addVertex(layoutVertexArray, anchorPoint.x, anchorPoint.y, br.x, br.y, labelAnchor.x, labelAnchor.y, tex.x + tex.w, tex.y + tex.h, sizeVertex, minZoom, maxZoom, placementZoom, glyphAngle);
 
             elementArray.emplaceBack(index, index + 1, index + 2);
             elementArray.emplaceBack(index + 1, index + 2, index + 3);
@@ -709,7 +725,12 @@ class SymbolBucket {
 
                 for (let b = feature.boxStartIndex; b < feature.boxEndIndex; b++) {
                     const box = this.collisionBoxArray.get(b);
-                    const anchorPoint = box.anchorPoint;
+                    if (collisionTile.perspectiveRatio === 1 && box.maxScale < 1) {
+                        // These boxes aren't used on unpitched maps
+                        // See CollisionTile#insertCollisionFeature
+                        continue;
+                    }
+                    const boxAnchorPoint = box.anchorPoint;
 
                     const tl = new Point(box.x1, box.y1 * yStretch)._rotate(angle);
                     const tr = new Point(box.x2, box.y1 * yStretch)._rotate(angle);
@@ -722,10 +743,10 @@ class SymbolBucket {
                     const segment = arrays.prepareSegment(4);
                     const index = segment.vertexLength;
 
-                    addCollisionBoxVertex(layoutVertexArray, anchorPoint, tl, maxZoom, placementZoom);
-                    addCollisionBoxVertex(layoutVertexArray, anchorPoint, tr, maxZoom, placementZoom);
-                    addCollisionBoxVertex(layoutVertexArray, anchorPoint, br, maxZoom, placementZoom);
-                    addCollisionBoxVertex(layoutVertexArray, anchorPoint, bl, maxZoom, placementZoom);
+                    addCollisionBoxVertex(layoutVertexArray, boxAnchorPoint, symbolInstance.anchor, tl, maxZoom, placementZoom);
+                    addCollisionBoxVertex(layoutVertexArray, boxAnchorPoint, symbolInstance.anchor, tr, maxZoom, placementZoom);
+                    addCollisionBoxVertex(layoutVertexArray, boxAnchorPoint, symbolInstance.anchor, br, maxZoom, placementZoom);
+                    addCollisionBoxVertex(layoutVertexArray, boxAnchorPoint, symbolInstance.anchor, bl, maxZoom, placementZoom);
 
                     elementArray.emplaceBack(index, index + 1);
                     elementArray.emplaceBack(index + 1, index + 2);

diff --git a/src/data/feature_index.js b/src/data/feature_index.js
@@ -242,7 +242,7 @@ class FeatureIndex {
                 if (layerResult === undefined) {
                     layerResult = result[layerID] = [];
                 }
-                layerResult.push(geojsonFeature);
+                layerResult.push({ featureIndex: index, feature: geojsonFeature });
             }
         }
     }

diff --git a/src/geo/transform.js b/src/geo/transform.js
@@ -394,6 +394,21 @@ class Transform {
         return new Float32Array(posMatrix);
     }
 
+    /**
+     * Calculate the distance from the center of a tile to the camera
+     * These distances are in view-space dimensions derived from the size of the
+     * viewport, similar to this.cameraToCenterDistance
+     * If the tile is dead-center in the viewport, then cameraToTileDistance == cameraToCenterDistance
+     *
+     * @param {Tile} tile
+     */
+    cameraToTileDistance(tile: Object) {
+        const posMatrix = this.calculatePosMatrix(tile.coord, tile.sourceMaxZoom);
+        const tileCenter = [tile.tileSize / 2, tile.tileSize / 2, 0, 1];
+        vec4.transformMat4(tileCenter, tileCenter, posMatrix);
+        return tileCenter[3];
+    }
+
     _constrain() {
         if (!this.center || !this.width || !this.height || this._constraining) return;
 

diff --git a/src/render/draw_collision_debug.js b/src/render/draw_collision_debug.js
@@ -7,6 +7,10 @@ function drawCollisionDebug(painter, sourceCache, layer, coords) {
     gl.enable(gl.STENCIL_TEST);
     const program = painter.useProgram('collisionBox');
 
+    gl.activeTexture(gl.TEXTURE1);
+    painter.frameHistory.bind(gl);
+    gl.uniform1i(program.u_fadetexture, 1);
+
     for (let i = 0; i < coords.length; i++) {
         const coord = coords[i];
         const tile = sourceCache.getTile(coord);
@@ -22,7 +26,12 @@ function drawCollisionDebug(painter, sourceCache, layer, coords) {
         painter.lineWidth(1);
         gl.uniform1f(program.u_scale, Math.pow(2, painter.transform.zoom - tile.coord.z));
         gl.uniform1f(program.u_zoom, painter.transform.zoom * 10);
-        gl.uniform1f(program.u_maxzoom, (tile.coord.z + 1) * 10);
+        const maxZoom = Math.max(0, Math.min(25, tile.coord.z + Math.log(tile.collisionTile.maxScale) / Math.LN2));
+        gl.uniform1f(program.u_maxzoom, maxZoom * 10);
+
+        gl.uniform1f(program.u_collision_y_stretch, tile.collisionTile.yStretch);
+        gl.uniform1f(program.u_pitch, painter.transform.pitch / 360 * 2 * Math.PI);
+        gl.uniform1f(program.u_camera_to_center_distance, painter.transform.cameraToCenterDistance);
 
         for (const segment of buffers.segments) {
             segment.vaos[layer.id].bind(gl, program, buffers.layoutVertexBuffer, buffers.elementBuffer, null, segment.vertexOffset);

diff --git a/src/render/draw_symbol.js b/src/render/draw_symbol.js
@@ -100,6 +100,8 @@ function drawLayerSymbols(painter, sourceCache, layer, coords, isText, translate
         gl.uniformMatrix4fv(program.u_matrix, false,
                 painter.translatePosMatrix(coord.posMatrix, tile, translate, translateAnchor));
 
+        gl.uniform1f(program.u_collision_y_stretch, tile.collisionTile.yStretch);
+
         drawTileSymbols(program, programConfiguration, painter, layer, tile, buffers, isText, isSDF,
                 pitchWithMap);
 
@@ -191,6 +193,22 @@ function setSymbolDrawState(program, painter, layer, tileZoom, isText, isSDF, ro
     } else if (sizeData.isFeatureConstant && sizeData.isZoomConstant) {
         gl.uniform1f(program.u_size, sizeData.layoutSize);
     }
+    gl.uniform1f(program.u_camera_to_center_distance, tr.cameraToCenterDistance);
+    if (layer.layout['symbol-placement'] === 'line' &&
+        layer.layout['text-rotation-alignment'] === 'map' &&
+        layer.layout['text-pitch-alignment'] === 'viewport' &&
+        layer.layout['text-field']) {
+        // We hide line labels with viewport alignment as they move into the distance
+        // because the approximations we use for drawing their glyphs get progressively worse
+        // The "1.5" here means we start hiding them when the distance from the label
+        // to the camera is 50% greater than the distance from the center of the map
+        // to the camera. Depending on viewport properties, you might expect this to filter
+        // the top third of the screen at pitch 60, and do almost nothing at pitch 45
+        gl.uniform1f(program.u_max_camera_distance, 1.5);
+    } else {
+        // "10" is effectively infinite at any pitch we support
+        gl.uniform1f(program.u_max_camera_distance, 10);
+    }
 }
 
 function drawTileSymbols(program, programConfiguration, painter, layer, tile, buffers, isText, isSDF, pitchWithMap) {

diff --git a/src/shaders/collision_box.fragment.glsl b/src/shaders/collision_box.fragment.glsl
@@ -1,23 +1,37 @@
 uniform float u_zoom;
+// u_maxzoom is derived from the maximum scale considered by the CollisionTile
+// Labels with placement zoom greater than this value will not be placed,
+// regardless of perspective effects.
 uniform float u_maxzoom;
+uniform sampler2D u_fadetexture;
 
+// v_max_zoom is a collision-box-specific value that controls when line-following
+// collision boxes are used.
 varying float v_max_zoom;
 varying float v_placement_zoom;
+varying float v_perspective_zoom_adjust;
+varying vec2 v_fade_tex;
 
 void main() {
 
     float alpha = 0.5;
 
+    // Green = no collisions, label is showing
     gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0) * alpha;
 
-    if (v_placement_zoom > u_zoom) {
+    // Red = collision, label hidden
+    if (texture2D(u_fadetexture, v_fade_tex).a < 1.0) {
         gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0) * alpha;
     }
 
-    if (u_zoom >= v_max_zoom) {
+    // Faded black = this collision box is not used at this zoom (for curved labels)
+    if (u_zoom >= v_max_zoom + v_perspective_zoom_adjust) {
         gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0) * alpha * 0.25;
     }
 
+    // Faded blue = the placement scale for this label is beyond the CollisionTile
+    // max scale, so it's impossible for this label to show without collision detection
+    // being run again (the label's glyphs haven't even been added to the symbol bucket)
     if (v_placement_zoom >= u_maxzoom) {
         gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0) * alpha * 0.2;
     }

diff --git a/src/shaders/collision_box.vertex.glsl b/src/shaders/collision_box.vertex.glsl
@@ -1,16 +1,32 @@
 attribute vec2 a_pos;
+attribute vec2 a_anchor_pos;
 attribute vec2 a_extrude;
 attribute vec2 a_data;
 
 uniform mat4 u_matrix;
 uniform float u_scale;
+uniform float u_pitch;
+uniform float u_collision_y_stretch;
+uniform float u_camera_to_center_distance;
 
 varying float v_max_zoom;
 varying float v_placement_zoom;
+varying float v_perspective_zoom_adjust;
+varying vec2 v_fade_tex;
 
 void main() {
-    gl_Position = u_matrix * vec4(a_pos + a_extrude / u_scale, 0.0, 1.0);
+    vec4 projectedPoint = u_matrix * vec4(a_anchor_pos, 0, 1);
+    highp float camera_to_anchor_distance = projectedPoint.w;
+    highp float collision_perspective_ratio = 1.0 + 0.5 * ((camera_to_anchor_distance / u_camera_to_center_distance) - 1.0);
+
+    highp float incidence_stretch  = camera_to_anchor_distance / (u_camera_to_center_distance * cos(u_pitch));
+    highp float collision_adjustment = max(1.0, incidence_stretch / u_collision_y_stretch);
+
+    gl_Position = u_matrix * vec4(a_pos + a_extrude * collision_perspective_ratio * collision_adjustment / u_scale, 0.0, 1.0);
 
     v_max_zoom = a_data.x;
     v_placement_zoom = a_data.y;
+
+    v_perspective_zoom_adjust = floor(log2(collision_perspective_ratio * collision_adjustment) * 10.0);
+    v_fade_tex = vec2((v_placement_zoom + v_perspective_zoom_adjust) / 255.0, 0.0);
 }