Enable property functions for more symbol paint properties (#4226)

* Enable property functions for {text,icon}-opacity

* Add property-function tests for {text,icon}-opacity

* Enable property functions for *-halo-{width,blur}

* Add render tests for {text,icon}-halo-{blur,width}

* Skip halo-blur/width tests on native

* Remove stray debugging statement

* Very slightly demistify a couple of constants

* Revert unchanged render test images

src/data/bucket/symbol_bucket.js

@@ -44,15 +44,21 @@ const symbolInterfaces = {
         elementArrayType: elementArrayType,
         paintAttributes: [
             {name: 'a_fill_color', property: 'text-color', type: 'Uint8'},
-            {name: 'a_halo_color', property: 'text-halo-color', type: 'Uint8'}
+            {name: 'a_halo_color', property: 'text-halo-color', type: 'Uint8'},
+            {name: 'a_halo_width', property: 'text-halo-width', type: 'Uint16', multiplier: 10},
+            {name: 'a_halo_blur', property: 'text-halo-blur', type: 'Uint16', multiplier: 10},
+            {name: 'a_opacity', property: 'text-opacity', type: 'Uint8', multiplier: 255}
         ]
     },
     icon: {
         layoutVertexArrayType: layoutVertexArrayType,
         elementArrayType: elementArrayType,
         paintAttributes: [
             {name: 'a_fill_color', property: 'icon-color', type: 'Uint8'},
-            {name: 'a_halo_color', property: 'icon-halo-color', type: 'Uint8'}
+            {name: 'a_halo_color', property: 'icon-halo-color', type: 'Uint8'},
+            {name: 'a_halo_width', property: 'icon-halo-width', type: 'Uint16', multiplier: 10},
+            {name: 'a_halo_blur', property: 'icon-halo-blur', type: 'Uint16', multiplier: 10},
+            {name: 'a_opacity', property: 'icon-opacity', type: 'Uint8', multiplier: 255}
         ]
     },
     collisionBox: {

src/render/draw_symbol.js

@@ -6,11 +6,6 @@ const pixelsToTileUnits = require('../source/pixels_to_tile_units');
 
 module.exports = drawSymbols;
 
-const sdfPx = 8;
-const blurOffset = 1.19;
-const haloOffset = 6;
-const gamma = 0.105 / browser.devicePixelRatio;
-
 function drawSymbols(painter, sourceCache, layer, coords) {
     if (painter.isOpaquePass) return;
 
@@ -43,23 +38,15 @@ function drawSymbols(painter, sourceCache, layer, coords) {
         // icon-pitch-alignment is not yet implemented
         // and we simply inherit the rotation alignment
         layer.layout['icon-rotation-alignment'],
-        layer.layout['icon-size'],
-        layer.paint['icon-halo-width'],
-        layer.paint['icon-halo-color'],
-        layer.paint['icon-halo-blur'],
-        layer.paint['icon-opacity']
+        layer.layout['icon-size']
     );
 
     drawLayerSymbols(painter, sourceCache, layer, coords, true,
         layer.paint['text-translate'],
         layer.paint['text-translate-anchor'],
         layer.layout['text-rotation-alignment'],
         layer.layout['text-pitch-alignment'],
-        layer.layout['text-size'],
-        layer.paint['text-halo-width'],
-        layer.paint['text-halo-color'],
-        layer.paint['text-halo-blur'],
-        layer.paint['text-opacity']
+        layer.layout['text-size']
     );
 
     if (sourceCache.map.showCollisionBoxes) {
@@ -68,7 +55,7 @@ function drawSymbols(painter, sourceCache, layer, coords) {
 }
 
 function drawLayerSymbols(painter, sourceCache, layer, coords, isText, translate, translateAnchor,
-        rotationAlignment, pitchAlignment, size, haloWidth, haloColor, haloBlur, opacity) {
+        rotationAlignment, pitchAlignment, size) {
 
     if (!isText && painter.style.sprite && !painter.style.sprite.loaded())
         return;
@@ -104,7 +91,7 @@ function drawLayerSymbols(painter, sourceCache, layer, coords, isText, translate
             programConfiguration.setUniforms(gl, program, layer, {zoom: painter.transform.zoom});
 
             setSymbolDrawState(program, painter, isText, isSDF, rotateWithMap, pitchWithMap, bucket.fontstack, size,
-                    bucket.iconsNeedLinear, isText ? bucket.adjustedTextSize : bucket.adjustedIconSize, opacity);
+                    bucket.iconsNeedLinear, isText ? bucket.adjustedTextSize : bucket.adjustedIconSize);
         }
 
         painter.enableTileClippingMask(coord);
@@ -113,7 +100,7 @@ function drawLayerSymbols(painter, sourceCache, layer, coords, isText, translate
                 painter.translatePosMatrix(coord.posMatrix, tile, translate, translateAnchor));
 
         drawTileSymbols(program, painter, layer, tile, buffers, isText, isSDF,
-                pitchWithMap, size, haloWidth, haloColor, haloBlur);
+                pitchWithMap, size);
 
         prevFontstack = bucket.fontstack;
     }
@@ -122,7 +109,7 @@ function drawLayerSymbols(painter, sourceCache, layer, coords, isText, translate
 }
 
 function setSymbolDrawState(program, painter, isText, isSDF, rotateWithMap, pitchWithMap, fontstack, size,
-        iconsNeedLinear, adjustedSize, opacity) {
+        iconsNeedLinear, adjustedSize) {
 
     const gl = painter.gl;
     const tr = painter.transform;
@@ -160,12 +147,10 @@ function setSymbolDrawState(program, painter, isText, isSDF, rotateWithMap, pitc
     gl.uniform1f(program.u_pitch, tr.pitch / 360 * 2 * Math.PI);
     gl.uniform1f(program.u_bearing, tr.bearing / 360 * 2 * Math.PI);
     gl.uniform1f(program.u_aspect_ratio, tr.width / tr.height);
-
-    gl.uniform1f(program.u_opacity, opacity);
 }
 
 function drawTileSymbols(program, painter, layer, tile, buffers, isText, isSDF,
-        pitchWithMap, size, haloWidth, haloColor, haloBlur) {
+        pitchWithMap, size) {
 
     const gl = painter.gl;
     const tr = painter.transform;
@@ -181,19 +166,18 @@ function drawTileSymbols(program, painter, layer, tile, buffers, isText, isSDF,
     }
 
     if (isSDF) {
+        const haloWidthProperty = `${isText ? 'text' : 'icon'}-halo-width`;
+        const hasHalo = !layer.isPaintValueFeatureConstant(haloWidthProperty) || layer.paint[haloWidthProperty];
         const gammaScale = fontScale * (pitchWithMap ? Math.cos(tr._pitch) : 1) * tr.cameraToCenterDistance;
+        gl.uniform1f(program.u_font_scale, fontScale);
+        gl.uniform1f(program.u_gamma_scale, gammaScale);
 
-        if (haloWidth) { // Draw halo underneath the text.
-            gl.uniform1f(program.u_gamma, (haloBlur * blurOffset / sdfPx + gamma) / gammaScale);
-            gl.uniform1f(program.u_buffer, (haloOffset - haloWidth / fontScale) / sdfPx);
+        if (hasHalo) { // Draw halo underneath the text.
             gl.uniform1f(program.u_is_halo, 1);
-
             drawSymbolElements(buffers, layer, gl, program);
         }
 
         gl.uniform1f(program.u_is_halo, 0);
-        gl.uniform1f(program.u_gamma, gamma / gammaScale);
-        gl.uniform1f(program.u_buffer, (256 - 64) / 256);
     }
 
     drawSymbolElements(buffers, layer, gl, program);

src/render/painter.js

@@ -370,14 +370,17 @@ class Painter {
             definesSource += '#define OVERDRAW_INSPECTOR;\n';
         }
 
+        const fragmentSource = configuration.applyPragmas(definesSource + shaders.prelude.fragmentSource + definition.fragmentSource, 'fragment');
+        const vertexSource = configuration.applyPragmas(definesSource + shaders.prelude.vertexSource + definition.vertexSource, 'vertex');
+
         const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-        gl.shaderSource(fragmentShader, configuration.applyPragmas(definesSource + shaders.prelude.fragmentSource + definition.fragmentSource, 'fragment'));
+        gl.shaderSource(fragmentShader, fragmentSource);
         gl.compileShader(fragmentShader);
         assert(gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS), gl.getShaderInfoLog(fragmentShader));
         gl.attachShader(program, fragmentShader);
 
         const vertexShader = gl.createShader(gl.VERTEX_SHADER);
-        gl.shaderSource(vertexShader, configuration.applyPragmas(definesSource + shaders.prelude.vertexSource + definition.vertexSource, 'vertex'));
+        gl.shaderSource(vertexShader, vertexSource);
         gl.compileShader(vertexShader);
         assert(gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS), gl.getShaderInfoLog(vertexShader));
         gl.attachShader(program, vertexShader);

src/shaders/symbol_icon.fragment.glsl

@@ -1,12 +1,15 @@
 uniform sampler2D u_texture;
 uniform sampler2D u_fadetexture;
-uniform lowp float u_opacity;
+
+#pragma mapbox: define lowp float opacity
 
 varying vec2 v_tex;
 varying vec2 v_fade_tex;
 
 void main() {
-    lowp float alpha = texture2D(u_fadetexture, v_fade_tex).a * u_opacity;
+    #pragma mapbox: initialize lowp float opacity
+
+    lowp float alpha = texture2D(u_fadetexture, v_fade_tex).a * opacity;
     gl_FragColor = texture2D(u_texture, v_tex) * alpha;
 
 #ifdef OVERDRAW_INSPECTOR

src/shaders/symbol_icon.vertex.glsl

@@ -3,6 +3,7 @@ attribute vec2 a_offset;
 attribute vec2 a_texture_pos;
 attribute vec4 a_data;
 
+#pragma mapbox: define lowp float opacity
 
 // matrix is for the vertex position.
 uniform mat4 u_matrix;
@@ -17,6 +18,8 @@ varying vec2 v_tex;
 varying vec2 v_fade_tex;
 
 void main() {
+    #pragma mapbox: initialize lowp float opacity
+
     vec2 a_tex = a_texture_pos.xy;
     mediump float a_labelminzoom = a_data[0];
     mediump vec2 a_zoom = a_data.pq;

src/shaders/symbol_sdf.fragment.glsl

@@ -1,12 +1,17 @@
+#define SDF_PX 8.0
+#define EDGE_GAMMA 0.105/DEVICE_PIXEL_RATIO
+
+uniform bool u_is_halo;
 #pragma mapbox: define lowp vec4 fill_color
 #pragma mapbox: define lowp vec4 halo_color
-uniform bool u_is_halo;
+#pragma mapbox: define lowp float opacity
+#pragma mapbox: define lowp float halo_width
+#pragma mapbox: define lowp float halo_blur
 
 uniform sampler2D u_texture;
 uniform sampler2D u_fadetexture;
-uniform lowp float u_opacity;
-uniform lowp float u_buffer;
-uniform lowp float u_gamma;
+uniform lowp float u_font_scale;
+uniform lowp float u_gamma_scale;
 
 varying vec2 v_tex;
 varying vec2 v_fade_tex;
@@ -15,18 +20,25 @@ varying float v_gamma_scale;
 void main() {
     #pragma mapbox: initialize lowp vec4 fill_color
     #pragma mapbox: initialize lowp vec4 halo_color
+    #pragma mapbox: initialize lowp float opacity
+    #pragma mapbox: initialize lowp float halo_width
+    #pragma mapbox: initialize lowp float halo_blur
 
     lowp vec4 color = fill_color;
+    lowp float gamma = EDGE_GAMMA / u_gamma_scale;
+    lowp float buff = (256.0 - 64.0) / 256.0;
     if (u_is_halo) {
         color = halo_color;
+        gamma = (halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / u_gamma_scale;
+        buff = (6.0 - halo_width / u_font_scale) / SDF_PX;
     }
 
     lowp float dist = texture2D(u_texture, v_tex).a;
     lowp float fade_alpha = texture2D(u_fadetexture, v_fade_tex).a;
-    lowp float gamma = u_gamma * v_gamma_scale;
-    lowp float alpha = smoothstep(u_buffer - gamma, u_buffer + gamma, dist) * fade_alpha;
+    lowp float gamma_scaled = gamma * v_gamma_scale;
+    lowp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist) * fade_alpha;
 
-    gl_FragColor = color * (alpha * u_opacity);
+    gl_FragColor = color * (alpha * opacity);
 
 #ifdef OVERDRAW_INSPECTOR
     gl_FragColor = vec4(1.0);

src/shaders/symbol_sdf.vertex.glsl

@@ -7,6 +7,9 @@ attribute vec4 a_data;
 
 #pragma mapbox: define lowp vec4 fill_color
 #pragma mapbox: define lowp vec4 halo_color
+#pragma mapbox: define lowp float opacity
+#pragma mapbox: define lowp float halo_width
+#pragma mapbox: define lowp float halo_blur
 
 // matrix is for the vertex position.
 uniform mat4 u_matrix;
@@ -28,6 +31,9 @@ varying float v_gamma_scale;
 void main() {
     #pragma mapbox: initialize lowp vec4 fill_color
     #pragma mapbox: initialize lowp vec4 halo_color
+    #pragma mapbox: initialize lowp float opacity
+    #pragma mapbox: initialize lowp float halo_width
+    #pragma mapbox: initialize lowp float halo_blur
 
     vec2 a_tex = a_texture_pos.xy;
     mediump float a_labelminzoom = a_data[0];

src/style-spec/reference/v8.json

@@ -2479,6 +2479,7 @@
       "maximum": 1,
       "function": "interpolated",
       "zoom-function": true,
+      "property-function": true,
       "transition": true,
       "requires": [
         "icon-image"
@@ -2541,6 +2542,7 @@
       "minimum": 0,
       "function": "interpolated",
       "zoom-function": true,
+      "property-function": true,
       "transition": true,
       "units": "pixels",
       "doc": "Distance of halo to the icon outline.",
@@ -2563,6 +2565,7 @@
       "minimum": 0,
       "function": "interpolated",
       "zoom-function": true,
+      "property-function": true,
       "transition": true,
       "units": "pixels",
       "doc": "Fade out the halo towards the outside.",
@@ -2641,6 +2644,7 @@
       "maximum": 1,
       "function": "interpolated",
       "zoom-function": true,
+      "property-function": true,
       "transition": true,
       "requires": [
         "text-field"
@@ -2703,6 +2707,7 @@
       "minimum": 0,
       "function": "interpolated",
       "zoom-function": true,
+      "property-function": true,
       "transition": true,
       "units": "pixels",
       "doc": "Distance of halo to the font outline. Max text halo width is 1/4 of the font-size.",
@@ -2725,6 +2730,7 @@
       "minimum": 0,
       "function": "interpolated",
       "zoom-function": true,
+      "property-function": true,
       "transition": true,
       "units": "pixels",
       "doc": "The halo's fadeout distance towards the outside.",

test/integration/render-tests/icon-halo-blur/property-function/style.json

@@ -0,0 +1,71 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64,
+      "skipped": {
+        "native": "https://github.com/mapbox/mapbox-gl-native/issues/7866"
+      }
+    }
+  },
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "properties": { "x": 0 },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [
+                0,
+               -10
+              ]
+            }
+          }, {
+            "type": "Feature",
+            "properties": { "x": 1 },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [
+                0,
+                10
+              ]
+            }
+          }
+        ]
+      }
+    }
+  },
+  "sprite": "local://sprites/sprite",
+  "layers": [
+    {
+      "id": "symbol",
+      "type": "symbol",
+      "source": "geojson",
+      "layout": {
+        "icon-image": "dot.sdf"
+      },
+      "paint": {
+        "icon-halo-width": 3,
+        "icon-halo-color": "green",
+        "icon-halo-blur": {
+          "property": "x",
+          "stops": [
+            [
+              0,
+              1
+            ],
+            [
+              1,
+              3
+            ]
+          ]
+        }
+      }
+    }
+  ]
+}