Remove the simplex font and switch to using canvas for debug text

.circleci/config.yml

@@ -203,6 +203,8 @@ jobs:
     steps:
       - attach_workspace:
           at: .
+      - run: sudo apt-get install fonts-open-sans
+      - run: fc-cache
       - run: yarn run test-render
       - store_artifacts:
           path: "test/integration/render-tests/index.html"

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",

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';
@@ -122,6 +123,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);
@@ -215,6 +219,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);
     }
@@ -636,6 +646,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;

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<DebugUniformsType> => ({
+const debugUniformValues = (matrix: Float32Array, color: Color, scaleRatio: number = 1): UniformValues<DebugUniformsType> => ({
     'u_matrix': matrix,
-    'u_color': color
+    'u_color': color,
+    'u_overlay': 0,
+    'u_overlay_scale': scaleRatio
 });
 
 export {debugUniforms, debugUniformValues};

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);
 }

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);
 }

src/ui/map.js

@@ -2287,6 +2287,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);

test/integration/render-tests/debug/raster/style.json

@@ -3,7 +3,8 @@
   "metadata": {
     "test": {
       "debug": true,
-      "height": 256
+      "height": 256,
+      "allowed": 0.005
     }
   },
   "center": [

test/integration/render-tests/debug/tile-overscaled/style.json

@@ -3,7 +3,8 @@
   "metadata": {
     "test": {
       "debug": true,
-      "height": 256
+      "height": 256,
+      "allowed": 0.002
     }
   },
   "center": [

test/integration/render-tests/debug/tile/style.json

@@ -3,7 +3,8 @@
   "metadata": {
     "test": {
       "debug": true,
-      "height": 256
+      "height": 256,
+      "allowed": 0.002
     }
   },
   "center": [

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"
@@ -6818,6 +6827,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"