Merge remote-tracking branch 'mapbox-gl-shaders/master'

js/render/painter.js

@@ -12,7 +12,7 @@ const VertexArrayObject = require('./vertex_array_object');
 const RasterBoundsArray = require('../data/raster_bounds_array');
 const PosArray = require('../data/pos_array');
 const ProgramConfiguration = require('../data/program_configuration');
-const shaders = require('mapbox-gl-shaders');
+const shaders = require('./shaders');
 const assert = require('assert');
 
 const draw = {

js/render/shaders.js

@@ -0,0 +1,76 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+// readFileSync calls must be written out long-form for brfs.
+module.exports = {
+    prelude: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/_prelude.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/_prelude.vertex.glsl'), 'utf8')
+    },
+    circle: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/circle.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/circle.vertex.glsl'), 'utf8')
+    },
+    collisionBox: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/collision_box.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/collision_box.vertex.glsl'), 'utf8')
+    },
+    debug: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/debug.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/debug.vertex.glsl'), 'utf8')
+    },
+    fill: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/fill.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/fill.vertex.glsl'), 'utf8')
+    },
+    fillOutline: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/fill_outline.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/fill_outline.vertex.glsl'), 'utf8')
+    },
+    fillOutlinePattern: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/fill_outline_pattern.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/fill_outline_pattern.vertex.glsl'), 'utf8')
+    },
+    fillPattern: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/fill_pattern.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/fill_pattern.vertex.glsl'), 'utf8')
+    },
+    fillExtrusion: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/fill_extrusion.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/fill_extrusion.vertex.glsl'), 'utf8')
+    },
+    fillExtrusionPattern: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/fill_extrusion_pattern.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/fill_extrusion_pattern.vertex.glsl'), 'utf8')
+    },
+    extrusionTexture: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/extrusion_texture.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/extrusion_texture.vertex.glsl'), 'utf8')
+    },
+    line: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/line.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/line.vertex.glsl'), 'utf8')
+    },
+    linePattern: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/line_pattern.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/line_pattern.vertex.glsl'), 'utf8')
+    },
+    lineSDF: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/line_sdf.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/line_sdf.vertex.glsl'), 'utf8')
+    },
+    raster: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/raster.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/raster.vertex.glsl'), 'utf8')
+    },
+    symbolIcon: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/symbol_icon.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/symbol_icon.vertex.glsl'), 'utf8')
+    },
+    symbolSDF: {
+        fragmentSource: fs.readFileSync(path.join(__dirname, '../../shaders/symbol_sdf.fragment.glsl'), 'utf8'),
+        vertexSource: fs.readFileSync(path.join(__dirname, '../../shaders/symbol_sdf.vertex.glsl'), 'utf8')
+    }
+};

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@mapbox/gl-matrix": "^0.0.1",
+    "brfs": "^1.4.0",
     "bubleify": "^0.5.1",
     "csscolorparser": "^1.0.2",
     "earcut": "^2.0.3",
@@ -21,7 +22,6 @@
     "geojson-vt": "^2.4.0",
     "grid-index": "^1.0.0",
     "mapbox-gl-function": "mapbox/mapbox-gl-function#41c6724e2bbd7bd1eb5991451bbf118b7d02b525",
-    "mapbox-gl-shaders": "mapbox/mapbox-gl-shaders#94518afb141b376e7f86e492c1b022c0159ca4a3",
     "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#e85407a377510acb647161de6be6357ab4f606dd",
     "mapbox-gl-supported": "^1.2.0",
     "package-json-versionify": "^1.0.2",
@@ -87,7 +87,8 @@
         }
       ],
       "package-json-versionify",
-      "unassertify"
+      "unassertify",
+      "brfs"
     ]
   },
   "browser": {

shaders/README.md

@@ -0,0 +1,42 @@
+# Mapbox GL Shaders
+
+This repository contains GL shaders which are shared by [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) and [Mapbox GL Native](https://github.com/mapbox/mapbox-gl-native).
+
+## Pragmas
+
+Some variables change type depending on their context:
+
+ - if the variable is the same for all features, we declare it as a `uniform`
+ - if the variable is different for each feature, we declare it as an `attribute`
+ - if the variable is different for each feature and a function of zoom, we declare several `attributes` and `uniforms` then calculate the value using interpolation
+
+We abstract over this functionality using pragmas.
+
+```glsl
+#pragma mapbox: define lowp vec4 color
+
+main() {
+    #pragma mapbox: initialize lowp vec4 color
+    ...
+    gl_FragColor = color;
+}
+```
+
+This program defines a variable within `main` called `color`, initialize the value of `color`, then sets `gl_FragColor` to the value of `color`.
+
+Pragmas take the following form.
+
+```glsl
+#pragma mapbox: (define|initialize) (lowp|mediump|highp) (float|vec2|vec3|vec4) {name}
+```
+
+When using pragmas, the following requirements apply.
+
+ - all pragma-defined variables must have both `define` and `initialize` pragmas
+ - `define` pragmas must be in file scope
+ - `initialize` pragmas must be in function scope
+ - all pragma-defined variables defined and initialized in the fragment shader must also be defined and initialized in the vertex shader because `attribute`s are not accessible from the fragment shader
+
+## Util
+
+The `util.glsl` file is automatically included in all shaders by the compiler.

shaders/_prelude.fragment.glsl

@@ -0,0 +1,17 @@
+#ifdef GL_ES
+precision mediump float;
+#else
+
+#if !defined(lowp)
+#define lowp
+#endif
+
+#if !defined(mediump)
+#define mediump
+#endif
+
+#if !defined(highp)
+#define highp
+#endif
+
+#endif

shaders/_prelude.vertex.glsl

@@ -0,0 +1,54 @@
+#ifdef GL_ES
+precision highp float;
+#else
+
+#if !defined(lowp)
+#define lowp
+#endif
+
+#if !defined(mediump)
+#define mediump
+#endif
+
+#if !defined(highp)
+#define highp
+#endif
+
+#endif
+
+float evaluate_zoom_function_1(const vec4 values, const float t) {
+    if (t < 1.0) {
+        return mix(values[0], values[1], t);
+    } else if (t < 2.0) {
+        return mix(values[1], values[2], t - 1.0);
+    } else {
+        return mix(values[2], values[3], t - 2.0);
+    }
+}
+vec4 evaluate_zoom_function_4(const vec4 value0, const vec4 value1, const vec4 value2, const vec4 value3, const float t) {
+    if (t < 1.0) {
+        return mix(value0, value1, t);
+    } else if (t < 2.0) {
+        return mix(value1, value2, t - 1.0);
+    } else {
+        return mix(value2, value3, t - 2.0);
+    }
+}
+
+// The offset depends on how many pixels are between the world origin and the edge of the tile:
+// vec2 offset = mod(pixel_coord, size)
+//
+// At high zoom levels there are a ton of pixels between the world origin and the edge of the tile.
+// The glsl spec only guarantees 16 bits of precision for highp floats. We need more than that.
+//
+// The pixel_coord is passed in as two 16 bit values:
+// pixel_coord_upper = floor(pixel_coord / 2^16)
+// pixel_coord_lower = mod(pixel_coord, 2^16)
+//
+// The offset is calculated in a series of steps that should preserve this precision:
+vec2 get_pattern_pos(const vec2 pixel_coord_upper, const vec2 pixel_coord_lower,
+    const vec2 pattern_size, const float tile_units_to_pixels, const vec2 pos) {
+
+    vec2 offset = mod(mod(mod(pixel_coord_upper, pattern_size) * 256.0, pattern_size) * 256.0 + pixel_coord_lower, pattern_size);
+    return (tile_units_to_pixels * pos + offset) / pattern_size;
+}

shaders/circle.fragment.glsl

@@ -0,0 +1,37 @@
+#pragma mapbox: define lowp vec4 color
+#pragma mapbox: define mediump float radius
+#pragma mapbox: define lowp float blur
+#pragma mapbox: define lowp float opacity
+#pragma mapbox: define lowp vec4 stroke_color
+#pragma mapbox: define mediump float stroke_width
+#pragma mapbox: define lowp float stroke_opacity
+
+varying vec2 v_extrude;
+varying lowp float v_antialiasblur;
+
+void main() {
+    #pragma mapbox: initialize lowp vec4 color
+    #pragma mapbox: initialize mediump float radius
+    #pragma mapbox: initialize lowp float blur
+    #pragma mapbox: initialize lowp float opacity
+    #pragma mapbox: initialize lowp vec4 stroke_color
+    #pragma mapbox: initialize mediump float stroke_width
+    #pragma mapbox: initialize lowp float stroke_opacity
+
+    float extrude_length = length(v_extrude);
+    float antialiased_blur = -max(blur, v_antialiasblur);
+
+    float opacity_t = smoothstep(0.0, antialiased_blur, extrude_length - 1.0);
+
+    float color_t = stroke_width < 0.01 ? 0.0 : smoothstep(
+        antialiased_blur,
+        0.0,
+        extrude_length - radius / (radius + stroke_width)
+    );
+
+    gl_FragColor = opacity_t * mix(color * opacity, stroke_color * stroke_opacity, color_t);
+
+#ifdef OVERDRAW_INSPECTOR
+    gl_FragColor = vec4(1.0);
+#endif
+}

shaders/circle.vertex.glsl

@@ -0,0 +1,45 @@
+uniform mat4 u_matrix;
+uniform bool u_scale_with_map;
+uniform vec2 u_extrude_scale;
+
+attribute vec2 a_pos;
+
+#pragma mapbox: define lowp vec4 color
+#pragma mapbox: define mediump float radius
+#pragma mapbox: define lowp float blur
+#pragma mapbox: define lowp float opacity
+#pragma mapbox: define lowp vec4 stroke_color
+#pragma mapbox: define mediump float stroke_width
+#pragma mapbox: define lowp float stroke_opacity
+
+varying vec2 v_extrude;
+varying lowp float v_antialiasblur;
+
+void main(void) {
+    #pragma mapbox: initialize lowp vec4 color
+    #pragma mapbox: initialize mediump float radius
+    #pragma mapbox: initialize lowp float blur
+    #pragma mapbox: initialize lowp float opacity
+    #pragma mapbox: initialize lowp vec4 stroke_color
+    #pragma mapbox: initialize mediump float stroke_width
+    #pragma mapbox: initialize lowp float stroke_opacity
+
+    // unencode the extrusion vector that we snuck into the a_pos vector
+    v_extrude = vec2(mod(a_pos, 2.0) * 2.0 - 1.0);
+
+    vec2 extrude = v_extrude * (radius + stroke_width) * u_extrude_scale;
+    // multiply a_pos by 0.5, since we had it * 2 in order to sneak
+    // in extrusion data
+    gl_Position = u_matrix * vec4(floor(a_pos * 0.5), 0, 1);
+
+    if (u_scale_with_map) {
+        gl_Position.xy += extrude;
+    } else {
+        gl_Position.xy += extrude * gl_Position.w;
+    }
+
+    // This is a minimum blur distance that serves as a faux-antialiasing for
+    // the circle. since blur is a ratio of the circle's size and the intent is
+    // to keep the blur at roughly 1px, the two are inversely related.
+    v_antialiasblur = 1.0 / DEVICE_PIXEL_RATIO / (radius + stroke_width);
+}

shaders/collision_box.fragment.glsl

@@ -0,0 +1,24 @@
+uniform float u_zoom;
+uniform float u_maxzoom;
+
+varying float v_max_zoom;
+varying float v_placement_zoom;
+
+void main() {
+
+    float alpha = 0.5;
+
+    gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0) * alpha;
+
+    if (v_placement_zoom > u_zoom) {
+        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0) * alpha;
+    }
+
+    if (u_zoom >= v_max_zoom) {
+        gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0) * alpha * 0.25;
+    }
+
+    if (v_placement_zoom >= u_maxzoom) {
+        gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0) * alpha * 0.2;
+    }
+}

shaders/collision_box.vertex.glsl

@@ -0,0 +1,16 @@
+attribute vec2 a_pos;
+attribute vec2 a_extrude;
+attribute vec2 a_data;
+
+uniform mat4 u_matrix;
+uniform float u_scale;
+
+varying float v_max_zoom;
+varying float v_placement_zoom;
+
+void main() {
+    gl_Position = u_matrix * vec4(a_pos + a_extrude / u_scale, 0.0, 1.0);
+
+    v_max_zoom = a_data.x;
+    v_placement_zoom = a_data.y;
+}

shaders/debug.fragment.glsl

@@ -0,0 +1,5 @@
+uniform lowp vec4 u_color;
+
+void main() {
+    gl_FragColor = u_color;
+}

shaders/debug.vertex.glsl

@@ -0,0 +1,7 @@
+attribute vec2 a_pos;
+
+uniform mat4 u_matrix;
+
+void main() {
+    gl_Position = u_matrix * vec4(a_pos, step(32767.0, a_pos.x), 1);
+}

shaders/extrusion_texture.fragment.glsl

@@ -0,0 +1,8 @@
+uniform sampler2D u_texture;
+uniform float u_opacity;
+
+varying vec2 v_pos;
+
+void main() {
+    gl_FragColor = texture2D(u_texture, v_pos) * u_opacity;
+}

shaders/extrusion_texture.vertex.glsl

@@ -0,0 +1,12 @@
+uniform mat4 u_matrix;
+uniform int u_xdim;
+uniform int u_ydim;
+attribute vec2 a_pos;
+varying vec2 v_pos;
+
+void main() {
+    gl_Position = u_matrix * vec4(a_pos, 0, 1);
+
+    v_pos.x = a_pos.x / float(u_xdim);
+    v_pos.y = 1.0 - a_pos.y / float(u_ydim);
+}