diff --git a/debug/extrusion-query.html b/debug/extrusion-query.html index 1d38a99bdba..eb716d18812 100644 --- a/debug/extrusion-query.html +++ b/debug/extrusion-query.html @@ -5,12 +5,12 @@ + -
diff --git a/package.json b/package.json index 13f3ce3f6d9..47a8541b360 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "babel-eslint": "^10.0.1", "benchmark": "^2.1.4", "browserify": "^16.2.3", + "canvas": "^2.6.1", "chalk": "^3.0.0", "chokidar": "^3.0.2", "cssnano": "^4.1.10", @@ -74,6 +75,7 @@ "mapbox-gl-styles": "^2.0.2", "mock-geolocation": "^1.0.11", "node-notifier": "^5.4.3", + "npm-font-open-sans": "^1.1.0", "npm-run-all": "^4.1.5", "nyc": "^13.3.0", "pirates": "^4.0.1", diff --git a/src/render/draw_debug.js b/src/render/draw_debug.js index 8071b8444e9..bedb06a5731 100644 --- a/src/render/draw_debug.js +++ b/src/render/draw_debug.js @@ -1,16 +1,11 @@ // @flow -import {mat4} from 'gl-matrix'; -import EXTENT from '../data/extent'; -import {PosArray} from '../data/array_types'; -import {LineIndexArray} from '../data/index_array_type'; -import posAttributes from '../data/pos_attributes'; -import SegmentVector from '../data/segment'; import DepthMode from '../gl/depth_mode'; import StencilMode from '../gl/stencil_mode'; import CullFaceMode from '../gl/cull_face_mode'; import {debugUniformValues} from './program/debug_program'; import Color from '../style-spec/util/color'; +import ColorMode from '../gl/color_mode'; import browser from '../util/browser'; import type Painter from './painter'; @@ -86,6 +81,10 @@ function drawDebugTile(painter, sourceCache, coord: OverscaledTileID) { const colorMode = painter.colorModeForRenderPass(); const id = '$debug'; + context.activeTexture.set(gl.TEXTURE0); + // Bind the empty texture for drawing outlines + painter.emptyTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE); + program.draw(context, gl.LINE_STRIP, depthMode, stencilMode, colorMode, CullFaceMode.disabled, debugUniformValues(posMatrix, Color.red), id, painter.debugBuffer, painter.tileBorderIndexBuffer, painter.debugSegments); @@ -94,186 +93,35 @@ function drawDebugTile(painter, sourceCache, coord: OverscaledTileID) { const tileByteLength = (tileRawData && tileRawData.byteLength) || 0; const tileSizeKb = Math.floor(tileByteLength / 1024); const tileSize = sourceCache.getTile(coord).tileSize; - const scaleRatio = 512 / Math.min(tileSize, 512); + const scaleRatio = (512 / Math.min(tileSize, 512) * (coord.overscaledZ / painter.transform.zoom)) * 0.5; let tileIdText = coord.canonical.toString(); if (coord.overscaledZ !== coord.canonical.z) { tileIdText += ` => ${coord.overscaledZ}`; } - const vertices = createTextVertices(`${tileIdText} ${tileSizeKb}kb`, 50, 200 * scaleRatio, 5 * scaleRatio); - const debugTextArray = new PosArray(); - const debugTextIndices = new LineIndexArray(); - for (let v = 0; v < vertices.length; v += 2) { - debugTextArray.emplaceBack(vertices[v], vertices[v + 1]); - debugTextIndices.emplaceBack(v, v + 1); - } - const debugTextBuffer = context.createVertexBuffer(debugTextArray, posAttributes.members); - const debugTextIndexBuffer = context.createIndexBuffer(debugTextIndices); - const debugTextSegment = SegmentVector.simpleSegment(0, 0, debugTextArray.length / 2, debugTextArray.length / 2); - - // 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. - const onePixel = EXTENT / (Math.pow(2, painter.transform.zoom - coord.overscaledZ) * tileSize * scaleRatio); - - const haloWidth = 1; - const translations = []; - for (let x = -haloWidth; x <= haloWidth; x++) { - for (let y = -haloWidth; y <= haloWidth; y++) { - if (x === 0 && y === 0) { - // don't draw the halo at 0,0 since the text is drawn there - break; - } - - translations.push([x, y]); - } - } - - for (let i = 0; i < translations.length; i++) { - const translation = translations[i]; - - program.draw(context, gl.LINES, depthMode, stencilMode, colorMode, CullFaceMode.disabled, - debugUniformValues( - mat4.translate([], posMatrix, [ - onePixel * translation[0], - onePixel * translation[1], 0]), - Color.white), - id, debugTextBuffer, debugTextIndexBuffer, debugTextSegment); - } + const tileLabel = `${tileIdText} ${tileSizeKb}kb`; + drawTextToOverlay(painter, tileLabel); - program.draw(context, gl.LINES, depthMode, stencilMode, colorMode, CullFaceMode.disabled, - debugUniformValues(posMatrix, Color.black), id, - debugTextBuffer, debugTextIndexBuffer, debugTextSegment); - - debugTextBuffer.destroy(); - debugTextIndexBuffer.destroy(); - debugTextSegment.destroy(); + program.draw(context, gl.TRIANGLES, depthMode, stencilMode, ColorMode.alphaBlended, CullFaceMode.disabled, + debugUniformValues(posMatrix, Color.transparent, scaleRatio), id, + painter.debugBuffer, painter.quadTriangleIndexBuffer, painter.debugSegments); } -// Font data From Hershey Simplex Font -// http://paulbourke.net/dataformats/hershey/ -const simplexFont = { - " ": [16, []], - "!": [10, [5, 21, 5, 7, -1, -1, 5, 2, 4, 1, 5, 0, 6, 1, 5, 2]], - "\"": [16, [4, 21, 4, 14, -1, -1, 12, 21, 12, 14]], - "#": [21, [11, 25, 4, -7, -1, -1, 17, 25, 10, -7, -1, -1, 4, 12, 18, 12, -1, -1, 3, 6, 17, 6]], - "$": [20, [8, 25, 8, -4, -1, -1, 12, 25, 12, -4, -1, -1, 17, 18, 15, 20, 12, 21, 8, 21, 5, 20, 3, 18, 3, 16, 4, 14, 5, 13, 7, 12, 13, 10, 15, 9, 16, 8, 17, 6, 17, 3, 15, 1, 12, 0, 8, 0, 5, 1, 3, 3]], - "%": [24, [21, 21, 3, 0, -1, -1, 8, 21, 10, 19, 10, 17, 9, 15, 7, 14, 5, 14, 3, 16, 3, 18, 4, 20, 6, 21, 8, 21, 10, 20, 13, 19, 16, 19, 19, 20, 21, 21, -1, -1, 17, 7, 15, 6, 14, 4, 14, 2, 16, 0, 18, 0, 20, 1, 21, 3, 21, 5, 19, 7, 17, 7]], - "&": [26, [23, 12, 23, 13, 22, 14, 21, 14, 20, 13, 19, 11, 17, 6, 15, 3, 13, 1, 11, 0, 7, 0, 5, 1, 4, 2, 3, 4, 3, 6, 4, 8, 5, 9, 12, 13, 13, 14, 14, 16, 14, 18, 13, 20, 11, 21, 9, 20, 8, 18, 8, 16, 9, 13, 11, 10, 16, 3, 18, 1, 20, 0, 22, 0, 23, 1, 23, 2]], - "'": [10, [5, 19, 4, 20, 5, 21, 6, 20, 6, 18, 5, 16, 4, 15]], - "(": [14, [11, 25, 9, 23, 7, 20, 5, 16, 4, 11, 4, 7, 5, 2, 7, -2, 9, -5, 11, -7]], - ")": [14, [3, 25, 5, 23, 7, 20, 9, 16, 10, 11, 10, 7, 9, 2, 7, -2, 5, -5, 3, -7]], - "*": [16, [8, 21, 8, 9, -1, -1, 3, 18, 13, 12, -1, -1, 13, 18, 3, 12]], - "+": [26, [13, 18, 13, 0, -1, -1, 4, 9, 22, 9]], - ",": [10, [6, 1, 5, 0, 4, 1, 5, 2, 6, 1, 6, -1, 5, -3, 4, -4]], - "-": [26, [4, 9, 22, 9]], - ".": [10, [5, 2, 4, 1, 5, 0, 6, 1, 5, 2]], - "/": [22, [20, 25, 2, -7]], - "0": [20, [9, 21, 6, 20, 4, 17, 3, 12, 3, 9, 4, 4, 6, 1, 9, 0, 11, 0, 14, 1, 16, 4, 17, 9, 17, 12, 16, 17, 14, 20, 11, 21, 9, 21]], - "1": [20, [6, 17, 8, 18, 11, 21, 11, 0]], - "2": [20, [4, 16, 4, 17, 5, 19, 6, 20, 8, 21, 12, 21, 14, 20, 15, 19, 16, 17, 16, 15, 15, 13, 13, 10, 3, 0, 17, 0]], - "3": [20, [5, 21, 16, 21, 10, 13, 13, 13, 15, 12, 16, 11, 17, 8, 17, 6, 16, 3, 14, 1, 11, 0, 8, 0, 5, 1, 4, 2, 3, 4]], - "4": [20, [13, 21, 3, 7, 18, 7, -1, -1, 13, 21, 13, 0]], - "5": [20, [15, 21, 5, 21, 4, 12, 5, 13, 8, 14, 11, 14, 14, 13, 16, 11, 17, 8, 17, 6, 16, 3, 14, 1, 11, 0, 8, 0, 5, 1, 4, 2, 3, 4]], - "6": [20, [16, 18, 15, 20, 12, 21, 10, 21, 7, 20, 5, 17, 4, 12, 4, 7, 5, 3, 7, 1, 10, 0, 11, 0, 14, 1, 16, 3, 17, 6, 17, 7, 16, 10, 14, 12, 11, 13, 10, 13, 7, 12, 5, 10, 4, 7]], - "7": [20, [17, 21, 7, 0, -1, -1, 3, 21, 17, 21]], - "8": [20, [8, 21, 5, 20, 4, 18, 4, 16, 5, 14, 7, 13, 11, 12, 14, 11, 16, 9, 17, 7, 17, 4, 16, 2, 15, 1, 12, 0, 8, 0, 5, 1, 4, 2, 3, 4, 3, 7, 4, 9, 6, 11, 9, 12, 13, 13, 15, 14, 16, 16, 16, 18, 15, 20, 12, 21, 8, 21]], - "9": [20, [16, 14, 15, 11, 13, 9, 10, 8, 9, 8, 6, 9, 4, 11, 3, 14, 3, 15, 4, 18, 6, 20, 9, 21, 10, 21, 13, 20, 15, 18, 16, 14, 16, 9, 15, 4, 13, 1, 10, 0, 8, 0, 5, 1, 4, 3]], - ":": [10, [5, 14, 4, 13, 5, 12, 6, 13, 5, 14, -1, -1, 5, 2, 4, 1, 5, 0, 6, 1, 5, 2]], - ";": [10, [5, 14, 4, 13, 5, 12, 6, 13, 5, 14, -1, -1, 6, 1, 5, 0, 4, 1, 5, 2, 6, 1, 6, -1, 5, -3, 4, -4]], - "<": [24, [20, 18, 4, 9, 20, 0]], - "=": [26, [4, 12, 22, 12, -1, -1, 4, 6, 22, 6]], - ">": [24, [4, 18, 20, 9, 4, 0]], - "?": [18, [3, 16, 3, 17, 4, 19, 5, 20, 7, 21, 11, 21, 13, 20, 14, 19, 15, 17, 15, 15, 14, 13, 13, 12, 9, 10, 9, 7, -1, -1, 9, 2, 8, 1, 9, 0, 10, 1, 9, 2]], - "@": [27, [18, 13, 17, 15, 15, 16, 12, 16, 10, 15, 9, 14, 8, 11, 8, 8, 9, 6, 11, 5, 14, 5, 16, 6, 17, 8, -1, -1, 12, 16, 10, 14, 9, 11, 9, 8, 10, 6, 11, 5, -1, -1, 18, 16, 17, 8, 17, 6, 19, 5, 21, 5, 23, 7, 24, 10, 24, 12, 23, 15, 22, 17, 20, 19, 18, 20, 15, 21, 12, 21, 9, 20, 7, 19, 5, 17, 4, 15, 3, 12, 3, 9, 4, 6, 5, 4, 7, 2, 9, 1, 12, 0, 15, 0, 18, 1, 20, 2, 21, 3, -1, -1, 19, 16, 18, 8, 18, 6, 19, 5]], - "A": [18, [9, 21, 1, 0, -1, -1, 9, 21, 17, 0, -1, -1, 4, 7, 14, 7]], - "B": [21, [4, 21, 4, 0, -1, -1, 4, 21, 13, 21, 16, 20, 17, 19, 18, 17, 18, 15, 17, 13, 16, 12, 13, 11, -1, -1, 4, 11, 13, 11, 16, 10, 17, 9, 18, 7, 18, 4, 17, 2, 16, 1, 13, 0, 4, 0]], - "C": [21, [18, 16, 17, 18, 15, 20, 13, 21, 9, 21, 7, 20, 5, 18, 4, 16, 3, 13, 3, 8, 4, 5, 5, 3, 7, 1, 9, 0, 13, 0, 15, 1, 17, 3, 18, 5]], - "D": [21, [4, 21, 4, 0, -1, -1, 4, 21, 11, 21, 14, 20, 16, 18, 17, 16, 18, 13, 18, 8, 17, 5, 16, 3, 14, 1, 11, 0, 4, 0]], - "E": [19, [4, 21, 4, 0, -1, -1, 4, 21, 17, 21, -1, -1, 4, 11, 12, 11, -1, -1, 4, 0, 17, 0]], - "F": [18, [4, 21, 4, 0, -1, -1, 4, 21, 17, 21, -1, -1, 4, 11, 12, 11]], - "G": [21, [18, 16, 17, 18, 15, 20, 13, 21, 9, 21, 7, 20, 5, 18, 4, 16, 3, 13, 3, 8, 4, 5, 5, 3, 7, 1, 9, 0, 13, 0, 15, 1, 17, 3, 18, 5, 18, 8, -1, -1, 13, 8, 18, 8]], - "H": [22, [4, 21, 4, 0, -1, -1, 18, 21, 18, 0, -1, -1, 4, 11, 18, 11]], - "I": [8, [4, 21, 4, 0]], - "J": [16, [12, 21, 12, 5, 11, 2, 10, 1, 8, 0, 6, 0, 4, 1, 3, 2, 2, 5, 2, 7]], - "K": [21, [4, 21, 4, 0, -1, -1, 18, 21, 4, 7, -1, -1, 9, 12, 18, 0]], - "L": [17, [4, 21, 4, 0, -1, -1, 4, 0, 16, 0]], - "M": [24, [4, 21, 4, 0, -1, -1, 4, 21, 12, 0, -1, -1, 20, 21, 12, 0, -1, -1, 20, 21, 20, 0]], - "N": [22, [4, 21, 4, 0, -1, -1, 4, 21, 18, 0, -1, -1, 18, 21, 18, 0]], - "O": [22, [9, 21, 7, 20, 5, 18, 4, 16, 3, 13, 3, 8, 4, 5, 5, 3, 7, 1, 9, 0, 13, 0, 15, 1, 17, 3, 18, 5, 19, 8, 19, 13, 18, 16, 17, 18, 15, 20, 13, 21, 9, 21]], - "P": [21, [4, 21, 4, 0, -1, -1, 4, 21, 13, 21, 16, 20, 17, 19, 18, 17, 18, 14, 17, 12, 16, 11, 13, 10, 4, 10]], - "Q": [22, [9, 21, 7, 20, 5, 18, 4, 16, 3, 13, 3, 8, 4, 5, 5, 3, 7, 1, 9, 0, 13, 0, 15, 1, 17, 3, 18, 5, 19, 8, 19, 13, 18, 16, 17, 18, 15, 20, 13, 21, 9, 21, -1, -1, 12, 4, 18, -2]], - "R": [21, [4, 21, 4, 0, -1, -1, 4, 21, 13, 21, 16, 20, 17, 19, 18, 17, 18, 15, 17, 13, 16, 12, 13, 11, 4, 11, -1, -1, 11, 11, 18, 0]], - "S": [20, [17, 18, 15, 20, 12, 21, 8, 21, 5, 20, 3, 18, 3, 16, 4, 14, 5, 13, 7, 12, 13, 10, 15, 9, 16, 8, 17, 6, 17, 3, 15, 1, 12, 0, 8, 0, 5, 1, 3, 3]], - "T": [16, [8, 21, 8, 0, -1, -1, 1, 21, 15, 21]], - "U": [22, [4, 21, 4, 6, 5, 3, 7, 1, 10, 0, 12, 0, 15, 1, 17, 3, 18, 6, 18, 21]], - "V": [18, [1, 21, 9, 0, -1, -1, 17, 21, 9, 0]], - "W": [24, [2, 21, 7, 0, -1, -1, 12, 21, 7, 0, -1, -1, 12, 21, 17, 0, -1, -1, 22, 21, 17, 0]], - "X": [20, [3, 21, 17, 0, -1, -1, 17, 21, 3, 0]], - "Y": [18, [1, 21, 9, 11, 9, 0, -1, -1, 17, 21, 9, 11]], - "Z": [20, [17, 21, 3, 0, -1, -1, 3, 21, 17, 21, -1, -1, 3, 0, 17, 0]], - "[": [14, [4, 25, 4, -7, -1, -1, 5, 25, 5, -7, -1, -1, 4, 25, 11, 25, -1, -1, 4, -7, 11, -7]], - "\\": [14, [0, 21, 14, -3]], - "]": [14, [9, 25, 9, -7, -1, -1, 10, 25, 10, -7, -1, -1, 3, 25, 10, 25, -1, -1, 3, -7, 10, -7]], - "^": [16, [6, 15, 8, 18, 10, 15, -1, -1, 3, 12, 8, 17, 13, 12, -1, -1, 8, 17, 8, 0]], - "_": [16, [0, -2, 16, -2]], - "`": [10, [6, 21, 5, 20, 4, 18, 4, 16, 5, 15, 6, 16, 5, 17]], - "a": [19, [15, 14, 15, 0, -1, -1, 15, 11, 13, 13, 11, 14, 8, 14, 6, 13, 4, 11, 3, 8, 3, 6, 4, 3, 6, 1, 8, 0, 11, 0, 13, 1, 15, 3]], - "b": [19, [4, 21, 4, 0, -1, -1, 4, 11, 6, 13, 8, 14, 11, 14, 13, 13, 15, 11, 16, 8, 16, 6, 15, 3, 13, 1, 11, 0, 8, 0, 6, 1, 4, 3]], - "c": [18, [15, 11, 13, 13, 11, 14, 8, 14, 6, 13, 4, 11, 3, 8, 3, 6, 4, 3, 6, 1, 8, 0, 11, 0, 13, 1, 15, 3]], - "d": [19, [15, 21, 15, 0, -1, -1, 15, 11, 13, 13, 11, 14, 8, 14, 6, 13, 4, 11, 3, 8, 3, 6, 4, 3, 6, 1, 8, 0, 11, 0, 13, 1, 15, 3]], - "e": [18, [3, 8, 15, 8, 15, 10, 14, 12, 13, 13, 11, 14, 8, 14, 6, 13, 4, 11, 3, 8, 3, 6, 4, 3, 6, 1, 8, 0, 11, 0, 13, 1, 15, 3]], - "f": [12, [10, 21, 8, 21, 6, 20, 5, 17, 5, 0, -1, -1, 2, 14, 9, 14]], - "g": [19, [15, 14, 15, -2, 14, -5, 13, -6, 11, -7, 8, -7, 6, -6, -1, -1, 15, 11, 13, 13, 11, 14, 8, 14, 6, 13, 4, 11, 3, 8, 3, 6, 4, 3, 6, 1, 8, 0, 11, 0, 13, 1, 15, 3]], - "h": [19, [4, 21, 4, 0, -1, -1, 4, 10, 7, 13, 9, 14, 12, 14, 14, 13, 15, 10, 15, 0]], - "i": [8, [3, 21, 4, 20, 5, 21, 4, 22, 3, 21, -1, -1, 4, 14, 4, 0]], - "j": [10, [5, 21, 6, 20, 7, 21, 6, 22, 5, 21, -1, -1, 6, 14, 6, -3, 5, -6, 3, -7, 1, -7]], - "k": [17, [4, 21, 4, 0, -1, -1, 14, 14, 4, 4, -1, -1, 8, 8, 15, 0]], - "l": [8, [4, 21, 4, 0]], - "m": [30, [4, 14, 4, 0, -1, -1, 4, 10, 7, 13, 9, 14, 12, 14, 14, 13, 15, 10, 15, 0, -1, -1, 15, 10, 18, 13, 20, 14, 23, 14, 25, 13, 26, 10, 26, 0]], - "n": [19, [4, 14, 4, 0, -1, -1, 4, 10, 7, 13, 9, 14, 12, 14, 14, 13, 15, 10, 15, 0]], - "o": [19, [8, 14, 6, 13, 4, 11, 3, 8, 3, 6, 4, 3, 6, 1, 8, 0, 11, 0, 13, 1, 15, 3, 16, 6, 16, 8, 15, 11, 13, 13, 11, 14, 8, 14]], - "p": [19, [4, 14, 4, -7, -1, -1, 4, 11, 6, 13, 8, 14, 11, 14, 13, 13, 15, 11, 16, 8, 16, 6, 15, 3, 13, 1, 11, 0, 8, 0, 6, 1, 4, 3]], - "q": [19, [15, 14, 15, -7, -1, -1, 15, 11, 13, 13, 11, 14, 8, 14, 6, 13, 4, 11, 3, 8, 3, 6, 4, 3, 6, 1, 8, 0, 11, 0, 13, 1, 15, 3]], - "r": [13, [4, 14, 4, 0, -1, -1, 4, 8, 5, 11, 7, 13, 9, 14, 12, 14]], - "s": [17, [14, 11, 13, 13, 10, 14, 7, 14, 4, 13, 3, 11, 4, 9, 6, 8, 11, 7, 13, 6, 14, 4, 14, 3, 13, 1, 10, 0, 7, 0, 4, 1, 3, 3]], - "t": [12, [5, 21, 5, 4, 6, 1, 8, 0, 10, 0, -1, -1, 2, 14, 9, 14]], - "u": [19, [4, 14, 4, 4, 5, 1, 7, 0, 10, 0, 12, 1, 15, 4, -1, -1, 15, 14, 15, 0]], - "v": [16, [2, 14, 8, 0, -1, -1, 14, 14, 8, 0]], - "w": [22, [3, 14, 7, 0, -1, -1, 11, 14, 7, 0, -1, -1, 11, 14, 15, 0, -1, -1, 19, 14, 15, 0]], - "x": [17, [3, 14, 14, 0, -1, -1, 14, 14, 3, 0]], - "y": [16, [2, 14, 8, 0, -1, -1, 14, 14, 8, 0, 6, -4, 4, -6, 2, -7, 1, -7]], - "z": [17, [14, 14, 3, 0, -1, -1, 3, 14, 14, 14, -1, -1, 3, 0, 14, 0]], - "{": [14, [9, 25, 7, 24, 6, 23, 5, 21, 5, 19, 6, 17, 7, 16, 8, 14, 8, 12, 6, 10, -1, -1, 7, 24, 6, 22, 6, 20, 7, 18, 8, 17, 9, 15, 9, 13, 8, 11, 4, 9, 8, 7, 9, 5, 9, 3, 8, 1, 7, 0, 6, -2, 6, -4, 7, -6, -1, -1, 6, 8, 8, 6, 8, 4, 7, 2, 6, 1, 5, -1, 5, -3, 6, -5, 7, -6, 9, -7]], - "|": [8, [4, 25, 4, -7]], - "}": [14, [5, 25, 7, 24, 8, 23, 9, 21, 9, 19, 8, 17, 7, 16, 6, 14, 6, 12, 8, 10, -1, -1, 7, 24, 8, 22, 8, 20, 7, 18, 6, 17, 5, 15, 5, 13, 6, 11, 10, 9, 6, 7, 5, 5, 5, 3, 6, 1, 7, 0, 8, -2, 8, -4, 7, -6, -1, -1, 8, 8, 6, 6, 6, 4, 7, 2, 8, 1, 9, -1, 9, -3, 8, -5, 7, -6, 5, -7]], - "~": [24, [3, 6, 3, 8, 4, 11, 6, 12, 8, 12, 10, 11, 14, 8, 16, 7, 18, 7, 20, 8, 21, 10, -1, -1, 3, 8, 4, 10, 6, 11, 8, 11, 10, 10, 14, 7, 16, 6, 18, 6, 20, 7, 21, 10, 21, 12]] -}; - -function createTextVertices(text, left, baseline, scale) { - scale = scale || 1; - - const strokes = []; - let i, len, j, len2, glyph, x, y, prev; - - for (i = 0, len = text.length; i < len; i++) { - glyph = simplexFont[text[i]]; - if (!glyph) continue; - prev = null; - - for (j = 0, len2 = glyph[1].length; j < len2; j += 2) { - if (glyph[1][j] === -1 && glyph[1][j + 1] === -1) { - prev = null; - - } else { - x = left + glyph[1][j] * scale; - y = baseline - glyph[1][j + 1] * scale; - if (prev) { - strokes.push(prev.x, prev.y, x, y); - } - prev = {x, y}; - } - } - left += glyph[0] * scale; - } - - return strokes; +function drawTextToOverlay(painter: Painter, text: string) { + painter.initDebugOverlayCanvas(); + const canvas = painter.debugOverlayCanvas; + const gl = painter.context.gl; + const ctx2d = painter.debugOverlayCanvas.getContext('2d'); + ctx2d.clearRect(0, 0, canvas.width, canvas.height); + + ctx2d.shadowColor = 'white'; + ctx2d.shadowBlur = 2; + ctx2d.lineWidth = 1.5; + ctx2d.strokeStyle = 'white'; + ctx2d.textBaseline = 'top'; + ctx2d.font = `bold ${36}px Open Sans, sans-serif`; + ctx2d.fillText(text, 5, 5); + ctx2d.strokeText(text, 5, 5); + + painter.debugOverlayTexture.update(canvas); + painter.debugOverlayTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE); } diff --git a/src/render/painter.js b/src/render/painter.js index 0d815708151..2124d59ba15 100644 --- a/src/render/painter.js +++ b/src/render/painter.js @@ -1,6 +1,7 @@ // @flow import browser from '../util/browser'; +import window from '../util/window'; import {mat4} from 'gl-matrix'; import SourceCache from '../source/source_cache'; @@ -123,6 +124,9 @@ class Painter { crossTileSymbolIndex: CrossTileSymbolIndex; symbolFadeChange: number; gpuTimers: {[_: string]: any }; + emptyTexture: Texture; + debugOverlayTexture: Texture; + debugOverlayCanvas: HTMLCanvasElement; constructor(gl: WebGLRenderingContext, transform: Transform) { this.context = new Context(gl); @@ -214,6 +218,12 @@ class Painter { quadTriangleIndices.emplaceBack(2, 1, 3); this.quadTriangleIndexBuffer = context.createIndexBuffer(quadTriangleIndices); + this.emptyTexture = new Texture(context, { + width: 1, + height: 1, + data: new Uint8ClampedArray([0, 0, 0, 0]) + }, context.gl.RGBA); + const gl = this.context.gl; this.stencilClearMode = new StencilMode({func: gl.ALWAYS, mask: 0}, 0x0, 0xFF, gl.ZERO, gl.ZERO, gl.ZERO); } @@ -639,6 +649,23 @@ class Painter { this.context.viewport.set([0, 0, this.width, this.height]); this.context.blendEquation.set(gl.FUNC_ADD); } + + initDebugOverlayCanvas() { + if (this.debugOverlayCanvas == null) { + this.debugOverlayCanvas = window.document.createElement('canvas'); + this.debugOverlayCanvas.width = 512; + this.debugOverlayCanvas.height = 512; + const gl = this.context.gl; + this.debugOverlayTexture = new Texture(this.context, this.debugOverlayCanvas, gl.RGBA); + } + } + + destroy() { + this.emptyTexture.destroy(); + if (this.debugOverlayTexture) { + this.debugOverlayTexture.destroy(); + } + } } export default Painter; diff --git a/src/render/program/debug_program.js b/src/render/program/debug_program.js index b4e468501d3..a97ad08d213 100644 --- a/src/render/program/debug_program.js +++ b/src/render/program/debug_program.js @@ -2,7 +2,9 @@ import { UniformColor, - UniformMatrix4f + UniformMatrix4f, + Uniform1i, + Uniform1f } from '../uniform_binding'; import type Context from '../../gl/context'; @@ -11,17 +13,23 @@ import type Color from '../../style-spec/util/color'; export type DebugUniformsType = {| 'u_color': UniformColor, - 'u_matrix': UniformMatrix4f + 'u_matrix': UniformMatrix4f, + 'u_overlay': Uniform1i, + 'u_overlay_scale': Uniform1f |}; const debugUniforms = (context: Context, locations: UniformLocations): DebugUniformsType => ({ 'u_color': new UniformColor(context, locations.u_color), - 'u_matrix': new UniformMatrix4f(context, locations.u_matrix) + 'u_matrix': new UniformMatrix4f(context, locations.u_matrix), + 'u_overlay': new Uniform1i(context, locations.u_overlay), + 'u_overlay_scale': new Uniform1f(context, locations.u_overlay_scale), }); -const debugUniformValues = (matrix: Float32Array, color: Color): UniformValues => ({ +const debugUniformValues = (matrix: Float32Array, color: Color, scaleRatio: number = 1): UniformValues => ({ 'u_matrix': matrix, - 'u_color': color + 'u_color': color, + 'u_overlay': 0, + 'u_overlay_scale': scaleRatio }); export {debugUniforms, debugUniformValues}; diff --git a/src/shaders/debug.fragment.glsl b/src/shaders/debug.fragment.glsl index 6ccd64af9e9..c15a694bd1b 100644 --- a/src/shaders/debug.fragment.glsl +++ b/src/shaders/debug.fragment.glsl @@ -1,5 +1,9 @@ uniform highp vec4 u_color; +uniform sampler2D u_overlay; + +varying vec2 v_uv; void main() { - gl_FragColor = u_color; + vec4 overlay_color = texture2D(u_overlay, v_uv); + gl_FragColor = mix(u_color, overlay_color, overlay_color.a); } diff --git a/src/shaders/debug.vertex.glsl b/src/shaders/debug.vertex.glsl index 866c3cd2f39..c872e7fa981 100644 --- a/src/shaders/debug.vertex.glsl +++ b/src/shaders/debug.vertex.glsl @@ -1,7 +1,12 @@ attribute vec2 a_pos; +varying vec2 v_uv; uniform mat4 u_matrix; +uniform float u_overlay_scale; void main() { - gl_Position = u_matrix * vec4(a_pos, 0, 1); + // This vertex shader expects a EXTENT x EXTENT quad, + // The UV co-ordinates for the overlay texture can be calculated using that knowledge + v_uv = a_pos / 8192.0; + gl_Position = u_matrix * vec4(a_pos * u_overlay_scale, 0, 1); } diff --git a/src/ui/map.js b/src/ui/map.js index f7278224f72..54c32aba836 100755 --- a/src/ui/map.js +++ b/src/ui/map.js @@ -2289,6 +2289,7 @@ class Map extends Camera { this._frame = null; } this._renderTaskQueue.clear(); + this.painter.destroy(); this.setStyle(null); if (typeof window !== 'undefined') { window.removeEventListener('resize', this._onWindowResize, false); diff --git a/test/integration/render-tests/debug/raster/expected.png b/test/integration/render-tests/debug/raster/expected.png index b3308e5126b..04f45dc70c9 100644 Binary files a/test/integration/render-tests/debug/raster/expected.png and b/test/integration/render-tests/debug/raster/expected.png differ diff --git a/test/integration/render-tests/debug/raster/style.json b/test/integration/render-tests/debug/raster/style.json index bcd9988a49f..9cc0d03cf9f 100644 --- a/test/integration/render-tests/debug/raster/style.json +++ b/test/integration/render-tests/debug/raster/style.json @@ -3,7 +3,8 @@ "metadata": { "test": { "debug": true, - "height": 256 + "height": 256, + "allowed": 0.0062 } }, "center": [ diff --git a/test/integration/render-tests/debug/tile-overscaled/expected.png b/test/integration/render-tests/debug/tile-overscaled/expected.png index 35c9ba41f54..8ea8baa3839 100644 Binary files a/test/integration/render-tests/debug/tile-overscaled/expected.png and b/test/integration/render-tests/debug/tile-overscaled/expected.png differ diff --git a/test/integration/render-tests/debug/tile-overscaled/style.json b/test/integration/render-tests/debug/tile-overscaled/style.json index 5e81317f233..3d7fce91ec6 100644 --- a/test/integration/render-tests/debug/tile-overscaled/style.json +++ b/test/integration/render-tests/debug/tile-overscaled/style.json @@ -3,7 +3,8 @@ "metadata": { "test": { "debug": true, - "height": 256 + "height": 256, + "allowed": 0.0039 } }, "center": [ diff --git a/test/integration/render-tests/debug/tile/expected.png b/test/integration/render-tests/debug/tile/expected.png index 15f1d78f1e0..12c0ba92834 100644 Binary files a/test/integration/render-tests/debug/tile/expected.png and b/test/integration/render-tests/debug/tile/expected.png differ diff --git a/test/integration/render-tests/debug/tile/style.json b/test/integration/render-tests/debug/tile/style.json index 3188f1a0d63..fc6888bc79a 100644 --- a/test/integration/render-tests/debug/tile/style.json +++ b/test/integration/render-tests/debug/tile/style.json @@ -3,7 +3,8 @@ "metadata": { "test": { "debug": true, - "height": 256 + "height": 256, + "allowed": 0.0022 } }, "center": [ diff --git a/test/render.test.js b/test/render.test.js index e1696d698b2..3c594a37a71 100644 --- a/test/render.test.js +++ b/test/render.test.js @@ -2,10 +2,12 @@ require('./stub_loader'); require('@mapbox/flow-remove-types/register'); +const {registerFont} = require('canvas'); require = require("esm")(module, true); const suite = require('./integration/lib/render'); const suiteImplementation = require('./suite_implementation'); const ignores = require('./ignores.json'); +registerFont('./node_modules/npm-font-open-sans/fonts/Bold/OpenSans-Bold.ttf', {family: 'Open Sans', weight: 'bold'}); suite.run('js', ignores, suiteImplementation); diff --git a/yarn.lock b/yarn.lock index ae32957fac0..b6ab00068e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2191,6 +2191,15 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001004: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001006.tgz#5b6e8288792cfa275f007b2819a00ccad7112655" integrity sha512-MXnUVX27aGs/QINz+QG1sWSLDr3P1A3Hq5EUWoIt0T7K24DuvMxZEnh3Y5aHlJW6Bz2aApJdSewdYLd8zQnUuw== +canvas@^2.6.1: + version "2.6.1" + resolved "https://registry.yarnpkg.com/canvas/-/canvas-2.6.1.tgz#0d087dd4d60f5a5a9efa202757270abea8bef89e" + integrity sha512-S98rKsPcuhfTcYbtF53UIJhcbgIAK533d1kJKMwsMwAIFgfd58MOyxRud3kktlzWiEkFliaJtvyZCBtud/XVEA== + dependencies: + nan "^2.14.0" + node-pre-gyp "^0.11.0" + simple-get "^3.0.3" + capture-stack-trace@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d" @@ -6840,6 +6849,22 @@ node-notifier@^5.0.1, node-notifier@^5.4.3: shellwords "^0.1.1" which "^1.3.0" +node-pre-gyp@^0.11.0: + version "0.11.0" + resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.11.0.tgz#db1f33215272f692cd38f03238e3e9b47c5dd054" + integrity sha512-TwWAOZb0j7e9eGaf9esRx3ZcLaE5tQ2lvYy1pb5IAaG1a2e2Kv5Lms1Y4hpj+ciXJRofIxxlt5haeQ/2ANeE0Q== + dependencies: + detect-libc "^1.0.2" + mkdirp "^0.5.1" + needle "^2.2.1" + nopt "^4.0.1" + npm-packlist "^1.1.6" + npmlog "^4.0.2" + rc "^1.2.7" + rimraf "^2.6.1" + semver "^5.3.0" + tar "^4" + node-pre-gyp@^0.12.0: version "0.12.0" resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz#39ba4bb1439da030295f899e3b520b7785766149" @@ -6950,6 +6975,11 @@ npm-bundled@^1.0.1: resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd" integrity sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g== +npm-font-open-sans@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/npm-font-open-sans/-/npm-font-open-sans-1.1.0.tgz#8c27a56e43872747b8448dcc30653a649866c6ef" + integrity sha512-t1y5ShWm6a8FSLwBdINT47XYMcuKY2rkTBsTdz/76YB2MtX0YD89RUkY2eSS2/XOmlZfBe1HFBAwD+b9+/UfmQ== + npm-packlist@^1.1.6: version "1.4.6" resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.6.tgz#53ba3ed11f8523079f1457376dd379ee4ea42ff4"