Merge pull request #2 from geoplan/reAddHaloOverlay

mapbox#4423 Add geoplan specific halo-overdraw functionality onto the latest version of mapbox.
geoplan · Feb 8, 2021 · 88f0c78 · 88f0c78
2 parents 8fde409 + 8f01a0c
commit 88f0c78
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 1 deletion.
diff --git a/flow-typed/style-spec.js b/flow-typed/style-spec.js
@@ -254,6 +254,7 @@ declare type SymbolLayerSpecification = {|
         "text-halo-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>,
         "text-halo-width"?: DataDrivenPropertyValueSpecification<number>,
         "text-halo-blur"?: DataDrivenPropertyValueSpecification<number>,
+        "halo-overdraw"?: PropertyValueSpecification<boolean>,
         "text-translate"?: PropertyValueSpecification<[number, number]>,
         "text-translate-anchor"?: PropertyValueSpecification<"map" | "viewport">
     |}

diff --git a/src/render/draw_symbol.js b/src/render/draw_symbol.js
@@ -164,9 +164,11 @@ function drawTileSymbols(program, programConfiguration, painter, layer, tile, bu
     if (isSDF) {
         const hasHalo = layer.paint.get(isText ? 'text-halo-width' : 'icon-halo-width').constantOr(1) !== 0;
         const gammaScale = (pitchWithMap ? Math.cos(tr._pitch) * tr.cameraToCenterDistance : 1);
+        const haloOverDraw = layer.paint.get('halo-overdraw');
         gl.uniform1f(program.uniforms.u_gamma_scale, gammaScale);
+        gl.uniform1f(program.uniforms.u_halo_overdraw, haloOverDraw);
 
-        if (hasHalo) { // Draw halo underneath the text.
+        if (hasHalo && !haloOverDraw) { // Draw halo underneath the text.
             gl.uniform1f(program.uniforms.u_is_halo, 1);
             drawSymbolElements(buffers, layer, context, program);
         }

diff --git a/src/shaders/symbol_sdf.fragment.glsl b/src/shaders/symbol_sdf.fragment.glsl
@@ -2,6 +2,7 @@
 #define EDGE_GAMMA 0.105/DEVICE_PIXEL_RATIO
 
 uniform bool u_is_halo;
+uniform bool u_halo_overdraw;
 #pragma mapbox: define highp vec4 fill_color
 #pragma mapbox: define highp vec4 halo_color
 #pragma mapbox: define lowp float opacity
@@ -42,6 +43,14 @@ void main() {
     highp float gamma_scaled = gamma * gamma_scale;
     highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
 
+    if (u_halo_overdraw) {
+        gamma = (halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / (fontScale * u_gamma_scale);
+        lowp float buff_halo = (6.0 - halo_width / fontScale) / SDF_PX;
+        highp float alpha_halo = smoothstep(buff_halo - gamma_scaled, buff_halo + gamma_scaled, dist);
+        color = mix(halo_color, color, alpha);
+        alpha = alpha_halo;
+    }
+
     gl_FragColor = color * (alpha * opacity * fade_opacity);
 
 #ifdef OVERDRAW_INSPECTOR

diff --git a/src/style-spec/reference/v8.json b/src/style-spec/reference/v8.json
@@ -4862,6 +4862,27 @@
       },
       "property-type": "data-driven"
     },
+    "halo-overdraw": {
+      "type": "boolean",
+      "default": false,
+      "doc": "If true, the halo will  be drawn with their text overlapping other text",
+      "sdk-support": {
+        "basic functionality": {
+          "js": "0.33.0",
+          "android": "5.0.0",
+          "ios": "3.5.0",
+          "macos": "0.4.0"
+        },
+        "data-driven styling": {}
+      },
+      "expression": {
+        "interpolated": false,
+        "parameters": [
+          "zoom"
+        ]
+      },
+      "property-type": "data-constant"
+    },
     "text-translate": {
       "type": "array",
       "value": "number",

diff --git a/src/style/style_layer/symbol_style_layer_properties.js b/src/style/style_layer/symbol_style_layer_properties.js
@@ -105,6 +105,7 @@ export type PaintProps = {|
     "text-halo-color": DataDrivenProperty<Color>,
     "text-halo-width": DataDrivenProperty<number>,
     "text-halo-blur": DataDrivenProperty<number>,
+    "halo-overdraw": DataConstantProperty<boolean>,
     "text-translate": DataConstantProperty<[number, number]>,
     "text-translate-anchor": DataConstantProperty<"map" | "viewport">,
 |};
@@ -122,6 +123,7 @@ const paint: Properties<PaintProps> = new Properties({
     "text-halo-color": new DataDrivenProperty(styleSpec["paint_symbol"]["text-halo-color"]),
     "text-halo-width": new DataDrivenProperty(styleSpec["paint_symbol"]["text-halo-width"]),
     "text-halo-blur": new DataDrivenProperty(styleSpec["paint_symbol"]["text-halo-blur"]),
+    "halo-overdraw": new DataConstantProperty(styleSpec["paint_symbol"]["halo-overdraw"]),
     "text-translate": new DataConstantProperty(styleSpec["paint_symbol"]["text-translate"]),
     "text-translate-anchor": new DataConstantProperty(styleSpec["paint_symbol"]["text-translate-anchor"]),
 });