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

…pbox#9267)
procore · Mar 18, 2020 · a1471ed · a1471ed
1 parent 9d3b0a3
commit a1471ed
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"