diff --git a/js/render/draw_debug.js b/js/render/draw_debug.js index 9544a8fe405..6b43b32ffad 100644 --- a/js/render/draw_debug.js +++ b/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); } diff --git a/js/render/painter.js b/js/render/painter.js index 30059eb9964..35bdc3d8267 100644 --- a/js/render/painter.js +++ b/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); + } } }; diff --git a/package.json b/package.json index e1777ca7aed..13a1258d2c0 100644 --- a/package.json +++ b/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", diff --git a/test/render.test.js b/test/render.test.js index b3bc14c8ddd..b6d2f2f9971 100644 --- a/test/render.test.js +++ b/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() {