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

…pbox#9267)
procore · Mar 18, 2020 · 8509a8b · 8509a8b
1 parent 59ed3fb
commit 8509a8b
Show file tree

Hide file tree

Showing 16 changed files with 122 additions and 192 deletions.
diff --git a/debug/extrusion-query.html b/debug/extrusion-query.html
@@ -5,12 +5,12 @@
     <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>
 <div id='map'></div>
 

diff --git 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
diff --git 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';
@@ -121,6 +122,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);
@@ -203,6 +207,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);
     }
@@ -621,6 +631,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
@@ -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};
diff --git 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
@@ -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
@@ -2299,6 +2299,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
diff --git 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
diff --git 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
diff --git 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
@@ -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
@@ -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"