fix #2034, fix tile debug rendering

Switch lineWidth for debug rendering to `1` because the gl spec does not
guarantee a width > 1.

js/render/draw_debug.js

@@ -2,40 +2,53 @@
 
 var textVertices = require('../lib/debugtext');
 var browser = require('../util/browser');
+var mat4 = require('gl-matrix').mat4;
+var EXTENT = require('../data/buffer').EXTENT;
 
 module.exports = drawDebug;
 
-function drawDebug(painter, coords) {
+function drawDebug(painter, source, coords) {
     if (painter.isOpaquePass) return;
     if (!painter.options.debug) return;
 
     for (var i = 0; i < coords.length; i++) {
-        drawDebugTile(painter, coords[i]);
+        drawDebugTile(painter, source, coords[i]);
     }
 }
 
-function drawDebugTile(painter, coord) {
+function drawDebugTile(painter, source, coord) {
     var gl = painter.gl;
 
+    gl.lineWidth(1 * browser.devicePixelRatio);
+
+    var posMatrix = painter.calculatePosMatrix(coord, source.maxzoom);
     var shader = painter.debugShader;
-    gl.switchShader(shader, painter.calculatePosMatrix(coord));
+    gl.switchShader(shader, posMatrix);
 
     // draw bounding rectangle
     gl.bindBuffer(gl.ARRAY_BUFFER, painter.debugBuffer);
     gl.vertexAttribPointer(shader.a_pos, painter.debugBuffer.itemSize, gl.SHORT, false, 0, 0);
     gl.uniform4f(shader.u_color, 1, 0, 0, 1);
-    gl.lineWidth(4);
     gl.drawArrays(gl.LINE_STRIP, 0, painter.debugBuffer.itemCount);
 
     var vertices = textVertices(coord.toString(), 50, 200, 5);
-
     gl.bindBuffer(gl.ARRAY_BUFFER, painter.debugTextBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, new Int16Array(vertices), gl.STREAM_DRAW);
     gl.vertexAttribPointer(shader.a_pos, painter.debugTextBuffer.itemSize, gl.SHORT, false, 0, 0);
-    gl.lineWidth(8 * browser.devicePixelRatio);
     gl.uniform4f(shader.u_color, 1, 1, 1, 1);
-    gl.drawArrays(gl.LINES, 0, vertices.length / painter.debugTextBuffer.itemSize);
-    gl.lineWidth(2 * browser.devicePixelRatio);
+
+    // Draw the halo with multiple 1px lines instead of one wider line because
+    // the gl spec doesn't guarantee support for lines with width > 1.
+    var tileSize = source.getTile(coord).tileSize;
+    var onePixel = EXTENT / (Math.pow(2, painter.transform.zoom - coord.z) * tileSize);
+    var translations = [[-1, -1], [-1, 1], [1, -1], [1, 1]];
+    for (var i = 0; i < translations.length; i++) {
+        var translation = translations[i];
+        gl.setPosMatrix(mat4.translate([], posMatrix, [onePixel * translation[0], onePixel * translation[1], 0]));
+        gl.drawArrays(gl.LINES, 0, vertices.length / painter.debugTextBuffer.itemSize);
+    }
+
     gl.uniform4f(shader.u_color, 0, 0, 0, 1);
+    gl.setPosMatrix(posMatrix);
     gl.drawArrays(gl.LINES, 0, vertices.length / painter.debugTextBuffer.itemSize);
 }

js/render/painter.js

@@ -152,7 +152,7 @@ Painter.prototype.setup = function() {
     gl.bufferData(
         gl.ARRAY_BUFFER,
         new Int16Array([
-            0, 0, EXTENT - 1, 0, EXTENT - 1, EXTENT - 1, 0, EXTENT - 1, 0, 0]),
+            0, 0, EXTENT, 0, EXTENT, EXTENT, 0, EXTENT, 0, 0]),
         gl.STATIC_DRAW);
 
     // The debugTextBuffer is used to draw tile IDs for debugging
@@ -299,7 +299,9 @@ Painter.prototype.renderPass = function(options) {
             this.renderLayer(this, source, layer, coords);
         }
 
-        draw.debug(this, coords);
+        if (source) {
+            draw.debug(this, source, coords);
+        }
     }
 };
 

package.json

@@ -39,7 +39,7 @@
     "eslint": "^1.5.0",
     "eslint-config-mourner": "^1.0.0",
     "istanbul": "^0.4.1",
-    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#3fe57d5b2c885f758cc7667dbcce14a214b790e0",
+    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#118cf6f20049b95658602c6cf59774f8b8c06704",
     "prova": "^2.1.2",
     "sinon": "^1.15.4",
     "st": "^1.0.0",

test/render.test.js

@@ -28,6 +28,9 @@ suite.run('js', {tests: tests}, function(style, options, callback) {
         attributionControl: false
     });
 
+    if (options.debug) map.debug = true;
+    if (options.collisionDebug) map.collisionDebug = true;
+
     var gl = map.painter.gl;
 
     map.once('load', function() {