Line Layer (#1142)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Tim Sylvester <tim@wetdogweather.com>
Co-authored-by: mwilsnd <mwilsnd@gmail.com>

shaders/drawable.line.fragment.glsl

@@ -0,0 +1,58 @@
+layout (std140) uniform LineUBO {
+    highp mat4 u_matrix;
+    highp vec2 u_units_to_pixels;
+    mediump float u_ratio;
+    lowp float u_device_pixel_ratio;
+};
+
+layout (std140) uniform LinePropertiesUBO {
+    highp vec4 u_color;
+    lowp float u_blur;
+    lowp float u_opacity;
+    mediump float u_gapwidth;
+    lowp float u_offset;
+    mediump float u_width;
+
+    highp float pad1;
+    highp vec2 pad2;
+};
+
+layout (std140) uniform LineInterpolationUBO {
+    lowp float u_color_t;
+    lowp float u_blur_t;
+    lowp float u_opacity_t;
+    lowp float u_gapwidth_t;
+    lowp float u_offset_t;
+    lowp float u_width_t;
+
+    highp vec2 pad3;
+};
+
+in vec2 v_width2;
+in vec2 v_normal;
+in float v_gamma_scale;
+
+#pragma mapbox: define highp vec4 color
+#pragma mapbox: define lowp float blur
+#pragma mapbox: define lowp float opacity
+
+void main() {
+    #pragma mapbox: initialize highp vec4 color
+    #pragma mapbox: initialize lowp float blur
+    #pragma mapbox: initialize lowp float opacity
+
+    // Calculate the distance of the pixel from the line in pixels.
+    float dist = length(v_normal) * v_width2.s;
+
+    // Calculate the antialiasing fade factor. This is either when fading in
+    // the line in case of an offset line (v_width2.t) or when fading out
+    // (v_width2.s)
+    float blur2 = (blur + 1.0 / u_device_pixel_ratio) * v_gamma_scale;
+    float alpha = clamp(min(dist - (v_width2.t - blur2), v_width2.s - dist) / blur2, 0.0, 1.0);
+
+    fragColor = color * (alpha * opacity);
+
+#ifdef OVERDRAW_INSPECTOR
+    fragColor = vec4(1.0);
+#endif
+}

shaders/drawable.line.vertex.glsl

@@ -0,0 +1,110 @@
+// floor(127 / 2) == 63.0
+// the maximum allowed miter limit is 2.0 at the moment. the extrude normal is
+// stored in a byte (-128..127). we scale regular normals up to length 63, but
+// there are also "special" normals that have a bigger length (of up to 126 in
+// this case).
+// #define scale 63.0
+#define scale 0.015873016
+
+layout (location = 0) in vec2 a_pos_normal;
+layout (location = 1) in vec4 a_data;
+
+layout (std140) uniform LineUBO {
+    highp mat4 u_matrix;
+    highp vec2 u_units_to_pixels;
+    mediump float u_ratio;
+    lowp float u_device_pixel_ratio;
+};
+
+layout (std140) uniform LinePropertiesUBO {
+    highp vec4 u_color;
+    lowp float u_blur;
+    lowp float u_opacity;
+    mediump float u_gapwidth;
+    lowp float u_offset;
+    mediump float u_width;
+
+    highp float pad1;
+    highp vec2 pad2;
+};
+
+layout (std140) uniform LineInterpolationUBO {
+    lowp float u_color_t;
+    lowp float u_blur_t;
+    lowp float u_opacity_t;
+    lowp float u_gapwidth_t;
+    lowp float u_offset_t;
+    lowp float u_width_t;
+
+    highp vec2 pad3;
+};
+
+out vec2 v_normal;
+out vec2 v_width2;
+out float v_gamma_scale;
+out highp float v_linesofar;
+
+#pragma mapbox: define highp vec4 color
+#pragma mapbox: define lowp float blur
+#pragma mapbox: define lowp float opacity
+#pragma mapbox: define mediump float gapwidth
+#pragma mapbox: define lowp float offset
+#pragma mapbox: define mediump float width
+
+void main() {
+    #pragma mapbox: initialize highp vec4 color
+    #pragma mapbox: initialize lowp float blur
+    #pragma mapbox: initialize lowp float opacity
+    #pragma mapbox: initialize mediump float gapwidth
+    #pragma mapbox: initialize lowp float offset
+    #pragma mapbox: initialize mediump float width
+
+    // the distance over which the line edge fades out.
+    // Retina devices need a smaller distance to avoid aliasing.
+    float ANTIALIASING = 1.0 / u_device_pixel_ratio / 2.0;
+
+    vec2 a_extrude = a_data.xy - 128.0;
+    float a_direction = mod(a_data.z, 4.0) - 1.0;
+
+    v_linesofar = (floor(a_data.z / 4.0) + a_data.w * 64.0) * 2.0;
+
+    vec2 pos = floor(a_pos_normal * 0.5);
+
+    // x is 1 if it's a round cap, 0 otherwise
+    // y is 1 if the normal points up, and -1 if it points down
+    // We store these in the least significant bit of a_pos_normal
+    mediump vec2 normal = a_pos_normal - 2.0 * pos;
+    normal.y = normal.y * 2.0 - 1.0;
+    v_normal = normal;
+
+    // these transformations used to be applied in the JS and native code bases.
+    // moved them into the shader for clarity and simplicity.
+    gapwidth = gapwidth / 2.0;
+    float halfwidth = width / 2.0;
+    offset = -1.0 * offset;
+
+    float inset = gapwidth + (gapwidth > 0.0 ? ANTIALIASING : 0.0);
+    float outset = gapwidth + halfwidth * (gapwidth > 0.0 ? 2.0 : 1.0) + (halfwidth == 0.0 ? 0.0 : ANTIALIASING);
+
+    // Scale the extrusion vector down to a normal and then up by the line width
+    // of this vertex.
+    mediump vec2 dist = outset * a_extrude * scale;
+
+    // Calculate the offset when drawing a line that is to the side of the actual line.
+    // We do this by creating a vector that points towards the extrude, but rotate
+    // it when we're drawing round end points (a_direction = -1 or 1) since their
+    // extrude vector points in another direction.
+    mediump float u = 0.5 * a_direction;
+    mediump float t = 1.0 - abs(u);
+    mediump vec2 offset2 = offset * a_extrude * scale * normal.y * mat2(t, -u, u, t);
+
+    vec4 projected_extrude = u_matrix * vec4(dist / u_ratio, 0.0, 0.0);
+    gl_Position = u_matrix * vec4(pos + offset2 / u_ratio, 0.0, 1.0) + projected_extrude;
+
+    // calculate how much the perspective view squishes or stretches the extrude
+    float extrude_length_without_perspective = length(dist);
+    float extrude_length_with_perspective = length(projected_extrude.xy / gl_Position.w * u_units_to_pixels);
+    v_gamma_scale = extrude_length_without_perspective / extrude_length_with_perspective;
+
+    v_width2 = vec2(outset, inset);
+}

shaders/drawable.line_gradient.fragment.glsl

@@ -0,0 +1,62 @@
+layout (std140) uniform LineGradientUBO {
+    highp mat4 u_matrix;
+    highp vec2 u_units_to_pixels;
+    mediump float u_ratio;
+    lowp float u_device_pixel_ratio;
+};
+
+layout (std140) uniform LineGradientPropertiesUBO {
+    lowp float u_blur;
+    lowp float u_opacity;
+    mediump float u_gapwidth;
+    lowp float u_offset;
+    mediump float u_width;
+
+    highp float pad1;
+    highp vec2 pad2;
+};
+
+layout (std140) uniform LineGradientInterpolationUBO {
+    lowp float u_blur_t;
+    lowp float u_opacity_t;
+    lowp float u_gapwidth_t;
+    lowp float u_offset_t;
+    lowp float u_width_t;
+
+    highp float pad3;
+    highp vec2 pad4;
+};
+
+uniform sampler2D u_image;
+
+in vec2 v_width2;
+in vec2 v_normal;
+in float v_gamma_scale;
+in highp float v_lineprogress;
+
+#pragma mapbox: define lowp float blur
+#pragma mapbox: define lowp float opacity
+
+void main() {
+    #pragma mapbox: initialize lowp float blur
+    #pragma mapbox: initialize lowp float opacity
+
+    // Calculate the distance of the pixel from the line in pixels.
+    float dist = length(v_normal) * v_width2.s;
+
+    // Calculate the antialiasing fade factor. This is either when fading in
+    // the line in case of an offset line (v_width2.t) or when fading out
+    // (v_width2.s)
+    float blur2 = (blur + 1.0 / u_device_pixel_ratio) * v_gamma_scale;
+    float alpha = clamp(min(dist - (v_width2.t - blur2), v_width2.s - dist) / blur2, 0.0, 1.0);
+
+    // For gradient lines, v_lineprogress is the ratio along the entire line,
+    // scaled to [0, 2^15), and the gradient ramp is stored in a texture.
+    vec4 color = texture(u_image, vec2(v_lineprogress, 0.5));
+
+    fragColor = color * (alpha * opacity);
+
+#ifdef OVERDRAW_INSPECTOR
+    fragColor = vec4(1.0);
+#endif
+}

shaders/drawable.line_gradient.vertex.glsl

@@ -0,0 +1,111 @@
+
+// the attribute conveying progress along a line is scaled to [0, 2^15)
+#define MAX_LINE_DISTANCE 32767.0
+
+// floor(127 / 2) == 63.0
+// the maximum allowed miter limit is 2.0 at the moment. the extrude normal is
+// stored in a byte (-128..127). we scale regular normals up to length 63, but
+// there are also "special" normals that have a bigger length (of up to 126 in
+// this case).
+// #define scale 63.0
+#define scale 0.015873016
+
+layout (location = 0) in vec2 a_pos_normal;
+layout (location = 1) in vec4 a_data;
+
+layout (std140) uniform LineGradientUBO {
+    highp mat4 u_matrix;
+    highp vec2 u_units_to_pixels;
+    mediump float u_ratio;
+    lowp float u_device_pixel_ratio;
+};
+
+layout (std140) uniform LineGradientPropertiesUBO {
+    lowp float u_blur;
+    lowp float u_opacity;
+    mediump float u_gapwidth;
+    lowp float u_offset;
+    mediump float u_width;
+
+    highp float pad1;
+    highp vec2 pad2;
+};
+
+layout (std140) uniform LineGradientInterpolationUBO {
+    lowp float u_blur_t;
+    lowp float u_opacity_t;
+    lowp float u_gapwidth_t;
+    lowp float u_offset_t;
+    lowp float u_width_t;
+
+    highp float pad3;
+    highp vec2 pad4;
+};
+
+out vec2 v_normal;
+out vec2 v_width2;
+out float v_gamma_scale;
+out highp float v_lineprogress;
+
+#pragma mapbox: define lowp float blur
+#pragma mapbox: define lowp float opacity
+#pragma mapbox: define mediump float gapwidth
+#pragma mapbox: define lowp float offset
+#pragma mapbox: define mediump float width
+
+void main() {
+    #pragma mapbox: initialize lowp float blur
+    #pragma mapbox: initialize lowp float opacity
+    #pragma mapbox: initialize mediump float gapwidth
+    #pragma mapbox: initialize lowp float offset
+    #pragma mapbox: initialize mediump float width
+
+    // the distance over which the line edge fades out.
+    // Retina devices need a smaller distance to avoid aliasing.
+    float ANTIALIASING = 1.0 / u_device_pixel_ratio / 2.0;
+
+    vec2 a_extrude = a_data.xy - 128.0;
+    float a_direction = mod(a_data.z, 4.0) - 1.0;
+
+    v_lineprogress = (floor(a_data.z / 4.0) + a_data.w * 64.0) * 2.0 / MAX_LINE_DISTANCE;
+
+    vec2 pos = floor(a_pos_normal * 0.5);
+
+    // x is 1 if it's a round cap, 0 otherwise
+    // y is 1 if the normal points up, and -1 if it points down
+    // We store these in the least significant bit of a_pos_normal
+    mediump vec2 normal = a_pos_normal - 2.0 * pos;
+    normal.y = normal.y * 2.0 - 1.0;
+    v_normal = normal;
+
+    // these transformations used to be applied in the JS and native code bases.
+    // moved them into the shader for clarity and simplicity.
+    gapwidth = gapwidth / 2.0;
+    float halfwidth = width / 2.0;
+    offset = -1.0 * offset;
+
+    float inset = gapwidth + (gapwidth > 0.0 ? ANTIALIASING : 0.0);
+    float outset = gapwidth + halfwidth * (gapwidth > 0.0 ? 2.0 : 1.0) + (halfwidth == 0.0 ? 0.0 : ANTIALIASING);
+
+    // Scale the extrusion vector down to a normal and then up by the line width
+    // of this vertex.
+    mediump vec2 dist = outset * a_extrude * scale;
+
+    // Calculate the offset when drawing a line that is to the side of the actual line.
+    // We do this by creating a vector that points towards the extrude, but rotate
+    // it when we're drawing round end points (a_direction = -1 or 1) since their
+    // extrude vector points in another direction.
+    mediump float u = 0.5 * a_direction;
+    mediump float t = 1.0 - abs(u);
+    mediump vec2 offset2 = offset * a_extrude * scale * normal.y * mat2(t, -u, u, t);
+
+    vec4 projected_extrude = u_matrix * vec4(dist / u_ratio, 0.0, 0.0);
+    gl_Position = u_matrix * vec4(pos + offset2 / u_ratio, 0.0, 1.0) + projected_extrude;
+
+    // calculate how much the perspective view squishes or stretches the extrude
+    float extrude_length_without_perspective = length(dist);
+    float extrude_length_with_perspective = length(projected_extrude.xy / gl_Position.w * u_units_to_pixels);
+    v_gamma_scale = extrude_length_without_perspective / extrude_length_with_perspective;
+
+    v_width2 = vec2(outset, inset);
+}

shaders/drawable.line_pattern.fragment.glsl

@@ -0,0 +1,105 @@
+layout (std140) uniform LinePatternUBO {
+    highp mat4 u_matrix;
+    mediump vec4 u_scale;
+    highp vec2 u_texsize;
+    highp vec2 u_units_to_pixels;
+    mediump float u_ratio;
+    lowp float u_device_pixel_ratio;
+    highp float u_fade;
+
+    highp float pad1;
+};
+
+layout (std140) uniform LinePatternPropertiesUBO {
+    lowp float u_blur;
+    lowp float u_opacity;
+    lowp float u_offset;
+    mediump float u_gapwidth;
+    mediump float u_width;
+
+    highp float pad2;
+    highp vec2 pad3;
+};
+
+layout (std140) uniform LinePatternTilePropertiesUBO {
+    lowp vec4 u_pattern_from;
+    lowp vec4 u_pattern_to;
+};
+
+layout (std140) uniform LinePatternInterpolationUBO {
+    lowp float u_blur_t;
+    lowp float u_opacity_t;
+    lowp float u_offset_t;
+    lowp float u_gapwidth_t;
+    lowp float u_width_t;
+    lowp float u_pattern_from_t;
+    lowp float u_pattern_to_t;
+
+    highp float pad4;
+};
+
+uniform sampler2D u_image;
+
+in vec2 v_normal;
+in vec2 v_width2;
+in float v_linesofar;
+in float v_gamma_scale;
+
+#pragma mapbox: define lowp vec4 pattern_from
+#pragma mapbox: define lowp vec4 pattern_to
+#pragma mapbox: define lowp float blur
+#pragma mapbox: define lowp float opacity
+
+void main() {
+    #pragma mapbox: initialize mediump vec4 pattern_from
+    #pragma mapbox: initialize mediump vec4 pattern_to
+
+    #pragma mapbox: initialize lowp float blur
+    #pragma mapbox: initialize lowp float opacity
+
+    vec2 pattern_tl_a = pattern_from.xy;
+    vec2 pattern_br_a = pattern_from.zw;
+    vec2 pattern_tl_b = pattern_to.xy;
+    vec2 pattern_br_b = pattern_to.zw;
+
+    float pixelRatio = u_scale.x;
+    float tileZoomRatio = u_scale.y;
+    float fromScale = u_scale.z;
+    float toScale = u_scale.w;
+
+    vec2 display_size_a = vec2((pattern_br_a.x - pattern_tl_a.x) / pixelRatio, (pattern_br_a.y - pattern_tl_a.y) / pixelRatio);
+    vec2 display_size_b = vec2((pattern_br_b.x - pattern_tl_b.x) / pixelRatio, (pattern_br_b.y - pattern_tl_b.y) / pixelRatio);
+
+    vec2 pattern_size_a = vec2(display_size_a.x * fromScale / tileZoomRatio, display_size_a.y);
+    vec2 pattern_size_b = vec2(display_size_b.x * toScale / tileZoomRatio, display_size_b.y);
+
+    // Calculate the distance of the pixel from the line in pixels.
+    float dist = length(v_normal) * v_width2.s;
+
+    // Calculate the antialiasing fade factor. This is either when fading in
+    // the line in case of an offset line (v_width2.t) or when fading out
+    // (v_width2.s)
+    float blur2 = (blur + 1.0 / u_device_pixel_ratio) * v_gamma_scale;
+    float alpha = clamp(min(dist - (v_width2.t - blur2), v_width2.s - dist) / blur2, 0.0, 1.0);
+
+    float x_a = mod(v_linesofar / pattern_size_a.x, 1.0);
+    float x_b = mod(v_linesofar / pattern_size_b.x, 1.0);
+
+    // v_normal.y is 0 at the midpoint of the line, -1 at the lower edge, 1 at the upper edge
+    // we clamp the line width outset to be between 0 and half the pattern height plus padding (2.0)
+    // to ensure we don't sample outside the designated symbol on the sprite sheet.
+    // 0.5 is added to shift the component to be bounded between 0 and 1 for interpolation of
+    // the texture coordinate
+    float y_a = 0.5 + (v_normal.y * clamp(v_width2.s, 0.0, (pattern_size_a.y + 2.0) / 2.0) / pattern_size_a.y);
+    float y_b = 0.5 + (v_normal.y * clamp(v_width2.s, 0.0, (pattern_size_b.y + 2.0) / 2.0) / pattern_size_b.y);
+    vec2 pos_a = mix(pattern_tl_a / u_texsize, pattern_br_a / u_texsize, vec2(x_a, y_a));
+    vec2 pos_b = mix(pattern_tl_b / u_texsize, pattern_br_b / u_texsize, vec2(x_b, y_b));
+
+    vec4 color = mix(texture(u_image, pos_a), texture(u_image, pos_b), u_fade);
+
+    fragColor = color * alpha * opacity;
+
+#ifdef OVERDRAW_INSPECTOR
+    fragColor = vec4(1.0);
+#endif
+}

shaders/drawable.line_pattern.vertex.glsl

@@ -0,0 +1,126 @@
+// floor(127 / 2) == 63.0
+// the maximum allowed miter limit is 2.0 at the moment. the extrude normal is
+// stored in a byte (-128..127). we scale regular normals up to length 63, but
+// there are also "special" normals that have a bigger length (of up to 126 in
+// this case).
+// #define scale 63.0
+#define scale 0.015873016
+
+// We scale the distance before adding it to the buffers so that we can store
+// long distances for long segments. Use this value to unscale the distance.
+#define LINE_DISTANCE_SCALE 2.0
+
+layout (location = 0) in vec2 a_pos_normal;
+layout (location = 1) in vec4 a_data;
+
+layout (std140) uniform LinePatternUBO {
+    highp mat4 u_matrix;
+    mediump vec4 u_scale;
+    highp vec2 u_texsize;
+    highp vec2 u_units_to_pixels;
+    mediump float u_ratio;
+    lowp float u_device_pixel_ratio;
+    highp float u_fade;
+
+    highp float pad1;
+};
+
+layout (std140) uniform LinePatternPropertiesUBO {
+    lowp float u_blur;
+    lowp float u_opacity;
+    lowp float u_offset;
+    mediump float u_gapwidth;
+    mediump float u_width;
+
+    highp float pad2;
+    highp vec2 pad3;
+};
+
+layout (std140) uniform LinePatternTilePropertiesUBO {
+    lowp vec4 u_pattern_from;
+    lowp vec4 u_pattern_to;
+};
+
+layout (std140) uniform LinePatternInterpolationUBO {
+    lowp float u_blur_t;
+    lowp float u_opacity_t;
+    lowp float u_offset_t;
+    lowp float u_gapwidth_t;
+    lowp float u_width_t;
+    lowp float u_pattern_from_t;
+    lowp float u_pattern_to_t;
+
+    highp float pad4;
+};
+
+out vec2 v_normal;
+out vec2 v_width2;
+out float v_linesofar;
+out float v_gamma_scale;
+
+#pragma mapbox: define lowp float blur
+#pragma mapbox: define lowp float opacity
+#pragma mapbox: define lowp float offset
+#pragma mapbox: define mediump float gapwidth
+#pragma mapbox: define mediump float width
+#pragma mapbox: define lowp vec4 pattern_from
+#pragma mapbox: define lowp vec4 pattern_to
+
+void main() {
+    #pragma mapbox: initialize lowp float blur
+    #pragma mapbox: initialize lowp float opacity
+    #pragma mapbox: initialize lowp float offset
+    #pragma mapbox: initialize mediump float gapwidth
+    #pragma mapbox: initialize mediump float width
+    #pragma mapbox: initialize mediump vec4 pattern_from
+    #pragma mapbox: initialize mediump vec4 pattern_to
+
+    // the distance over which the line edge fades out.
+    // Retina devices need a smaller distance to avoid aliasing.
+    float ANTIALIASING = 1.0 / u_device_pixel_ratio / 2.0;
+
+    vec2 a_extrude = a_data.xy - 128.0;
+    float a_direction = mod(a_data.z, 4.0) - 1.0;
+    float a_linesofar = (floor(a_data.z / 4.0) + a_data.w * 64.0) * LINE_DISTANCE_SCALE;
+    // float tileRatio = u_scale.y;
+    vec2 pos = floor(a_pos_normal * 0.5);
+
+    // x is 1 if it's a round cap, 0 otherwise
+    // y is 1 if the normal points up, and -1 if it points down
+    // We store these in the least significant bit of a_pos_normal
+    mediump vec2 normal = a_pos_normal - 2.0 * pos;
+    normal.y = normal.y * 2.0 - 1.0;
+    v_normal = normal;
+
+    // these transformations used to be applied in the JS and native code bases.
+    // moved them into the shader for clarity and simplicity.
+    gapwidth = gapwidth / 2.0;
+    float halfwidth = width / 2.0;
+    offset = -1.0 * offset;
+
+    float inset = gapwidth + (gapwidth > 0.0 ? ANTIALIASING : 0.0);
+    float outset = gapwidth + halfwidth * (gapwidth > 0.0 ? 2.0 : 1.0) + (halfwidth == 0.0 ? 0.0 : ANTIALIASING);
+
+    // Scale the extrusion vector down to a normal and then up by the line width
+    // of this vertex.
+    mediump vec2 dist = outset * a_extrude * scale;
+
+    // Calculate the offset when drawing a line that is to the side of the actual line.
+    // We do this by creating a vector that points towards the extrude, but rotate
+    // it when we're drawing round end points (a_direction = -1 or 1) since their
+    // extrude vector points in another direction.
+    mediump float u = 0.5 * a_direction;
+    mediump float t = 1.0 - abs(u);
+    mediump vec2 offset2 = offset * a_extrude * scale * normal.y * mat2(t, -u, u, t);
+
+    vec4 projected_extrude = u_matrix * vec4(dist / u_ratio, 0.0, 0.0);
+    gl_Position = u_matrix * vec4(pos + offset2 / u_ratio, 0.0, 1.0) + projected_extrude;
+
+    // calculate how much the perspective view squishes or stretches the extrude
+    float extrude_length_without_perspective = length(dist);
+    float extrude_length_with_perspective = length(projected_extrude.xy / gl_Position.w * u_units_to_pixels);
+    v_gamma_scale = extrude_length_without_perspective / extrude_length_with_perspective;
+
+    v_linesofar = a_linesofar;
+    v_width2 = vec2(outset, inset);
+}

shaders/drawable.line_sdf.fragment.glsl

@@ -0,0 +1,79 @@
+
+layout (std140) uniform LineSDFUBO {
+    highp mat4 u_matrix;
+    highp vec2 u_units_to_pixels;
+    highp vec2 u_patternscale_a;
+    highp vec2 u_patternscale_b;
+    mediump float u_ratio;
+    lowp float u_device_pixel_ratio;
+    highp float u_tex_y_a;
+    highp float u_tex_y_b;
+    highp float u_sdfgamma;
+    highp float u_mix;
+};
+
+layout (std140) uniform LineSDFPropertiesUBO {
+    highp vec4 u_color;
+    lowp float u_blur;
+    lowp float u_opacity;
+    mediump float u_gapwidth;
+    lowp float u_offset;
+    mediump float u_width;
+    lowp float u_floorwidth;
+
+    highp vec2 pad1;
+};
+
+layout (std140) uniform LineSDFInterpolationUBO {
+    lowp float u_color_t;
+    lowp float u_blur_t;
+    lowp float u_opacity_t;
+    lowp float u_gapwidth_t;
+    lowp float u_offset_t;
+    lowp float u_width_t;
+    lowp float u_floorwidth_t;
+    
+    highp float pad2;
+};
+
+uniform sampler2D u_image;
+
+in vec2 v_normal;
+in vec2 v_width2;
+in vec2 v_tex_a;
+in vec2 v_tex_b;
+in float v_gamma_scale;
+
+#pragma mapbox: define highp vec4 color
+#pragma mapbox: define lowp float blur
+#pragma mapbox: define lowp float opacity
+#pragma mapbox: define mediump float width
+#pragma mapbox: define lowp float floorwidth
+
+void main() {
+    #pragma mapbox: initialize highp vec4 color
+    #pragma mapbox: initialize lowp float blur
+    #pragma mapbox: initialize lowp float opacity
+    #pragma mapbox: initialize mediump float width
+    #pragma mapbox: initialize lowp float floorwidth
+
+    // Calculate the distance of the pixel from the line in pixels.
+    float dist = length(v_normal) * v_width2.s;
+
+    // Calculate the antialiasing fade factor. This is either when fading in
+    // the line in case of an offset line (v_width2.t) or when fading out
+    // (v_width2.s)
+    float blur2 = (blur + 1.0 / u_device_pixel_ratio) * v_gamma_scale;
+    float alpha = clamp(min(dist - (v_width2.t - blur2), v_width2.s - dist) / blur2, 0.0, 1.0);
+
+    float sdfdist_a = texture(u_image, v_tex_a).a;
+    float sdfdist_b = texture(u_image, v_tex_b).a;
+    float sdfdist = mix(sdfdist_a, sdfdist_b, u_mix);
+    alpha *= smoothstep(0.5 - u_sdfgamma / floorwidth, 0.5 + u_sdfgamma / floorwidth, sdfdist);
+
+    fragColor = color * (alpha * opacity);
+
+#ifdef OVERDRAW_INSPECTOR
+    fragColor = vec4(1.0);
+#endif
+}

shaders/drawable.line_sdf.vertex.glsl

@@ -0,0 +1,126 @@
+// floor(127 / 2) == 63.0
+// the maximum allowed miter limit is 2.0 at the moment. the extrude normal is
+// stored in a byte (-128..127). we scale regular normals up to length 63, but
+// there are also "special" normals that have a bigger length (of up to 126 in
+// this case).
+// #define scale 63.0
+#define scale 0.015873016
+
+// We scale the distance before adding it to the buffers so that we can store
+// long distances for long segments. Use this value to unscale the distance.
+#define LINE_DISTANCE_SCALE 2.0
+
+layout (location = 0) in vec2 a_pos_normal;
+layout (location = 1) in vec4 a_data;
+
+layout (std140) uniform LineSDFUBO {
+    highp mat4 u_matrix;
+    highp vec2 u_units_to_pixels;
+    highp vec2 u_patternscale_a;
+    highp vec2 u_patternscale_b;
+    mediump float u_ratio;
+    lowp float u_device_pixel_ratio;
+    highp float u_tex_y_a;
+    highp float u_tex_y_b;
+    highp float u_sdfgamma;
+    highp float u_mix;
+};
+
+layout (std140) uniform LineSDFPropertiesUBO {
+    highp vec4 u_color;
+    lowp float u_blur;
+    lowp float u_opacity;
+    mediump float u_gapwidth;
+    lowp float u_offset;
+    mediump float u_width;
+    lowp float u_floorwidth;
+
+    highp vec2 pad1;
+};
+
+layout (std140) uniform LineSDFInterpolationUBO {
+    lowp float u_color_t;
+    lowp float u_blur_t;
+    lowp float u_opacity_t;
+    lowp float u_gapwidth_t;
+    lowp float u_offset_t;
+    lowp float u_width_t;
+    lowp float u_floorwidth_t;
+    
+    highp float pad2;
+};
+
+out vec2 v_normal;
+out vec2 v_width2;
+out vec2 v_tex_a;
+out vec2 v_tex_b;
+out float v_gamma_scale;
+
+#pragma mapbox: define highp vec4 color
+#pragma mapbox: define lowp float blur
+#pragma mapbox: define lowp float opacity
+#pragma mapbox: define mediump float gapwidth
+#pragma mapbox: define lowp float offset
+#pragma mapbox: define mediump float width
+#pragma mapbox: define lowp float floorwidth
+
+void main() {
+    #pragma mapbox: initialize highp vec4 color
+    #pragma mapbox: initialize lowp float blur
+    #pragma mapbox: initialize lowp float opacity
+    #pragma mapbox: initialize mediump float gapwidth
+    #pragma mapbox: initialize lowp float offset
+    #pragma mapbox: initialize mediump float width
+    #pragma mapbox: initialize lowp float floorwidth
+
+    // the distance over which the line edge fades out.
+    // Retina devices need a smaller distance to avoid aliasing.
+    float ANTIALIASING = 1.0 / u_device_pixel_ratio / 2.0;
+
+    vec2 a_extrude = a_data.xy - 128.0;
+    float a_direction = mod(a_data.z, 4.0) - 1.0;
+    float a_linesofar = (floor(a_data.z / 4.0) + a_data.w * 64.0) * LINE_DISTANCE_SCALE;
+
+    vec2 pos = floor(a_pos_normal * 0.5);
+
+    // x is 1 if it's a round cap, 0 otherwise
+    // y is 1 if the normal points up, and -1 if it points down
+    // We store these in the least significant bit of a_pos_normal
+    mediump vec2 normal = a_pos_normal - 2.0 * pos;
+    normal.y = normal.y * 2.0 - 1.0;
+    v_normal = normal;
+
+    // these transformations used to be applied in the JS and native code bases.
+    // moved them into the shader for clarity and simplicity.
+    gapwidth = gapwidth / 2.0;
+    float halfwidth = width / 2.0;
+    offset = -1.0 * offset;
+
+    float inset = gapwidth + (gapwidth > 0.0 ? ANTIALIASING : 0.0);
+    float outset = gapwidth + halfwidth * (gapwidth > 0.0 ? 2.0 : 1.0) + (halfwidth == 0.0 ? 0.0 : ANTIALIASING);
+
+    // Scale the extrusion vector down to a normal and then up by the line width
+    // of this vertex.
+    mediump vec2 dist =outset * a_extrude * scale;
+
+    // Calculate the offset when drawing a line that is to the side of the actual line.
+    // We do this by creating a vector that points towards the extrude, but rotate
+    // it when we're drawing round end points (a_direction = -1 or 1) since their
+    // extrude vector points in another direction.
+    mediump float u = 0.5 * a_direction;
+    mediump float t = 1.0 - abs(u);
+    mediump vec2 offset2 = offset * a_extrude * scale * normal.y * mat2(t, -u, u, t);
+
+    vec4 projected_extrude = u_matrix * vec4(dist / u_ratio, 0.0, 0.0);
+    gl_Position = u_matrix * vec4(pos + offset2 / u_ratio, 0.0, 1.0) + projected_extrude;
+
+    // calculate how much the perspective view squishes or stretches the extrude
+    float extrude_length_without_perspective = length(dist);
+    float extrude_length_with_perspective = length(projected_extrude.xy / gl_Position.w * u_units_to_pixels);
+    v_gamma_scale = extrude_length_without_perspective / extrude_length_with_perspective;
+
+    v_tex_a = vec2(a_linesofar * u_patternscale_a.x / floorwidth, normal.y * u_patternscale_a.y + u_tex_y_a);
+    v_tex_b = vec2(a_linesofar * u_patternscale_b.x / floorwidth, normal.y * u_patternscale_b.y + u_tex_y_b);
+
+    v_width2 = vec2(outset, inset);
+}

shaders/manifest.json

@@ -34,6 +34,34 @@
         "glsl_frag": "drawable.fill_outline.fragment.glsl",
         "uses_ubos": true
     },
+    { 
+        "name": "LineGradientShader",
+        "header": "drawable_line_gradient",
+        "glsl_vert": "drawable.line_gradient.vertex.glsl",
+        "glsl_frag": "drawable.line_gradient.fragment.glsl",
+        "uses_ubos": true
+    },
+    {
+        "name": "LinePatternShader",
+        "header": "drawable_line_pattern",
+        "glsl_vert": "drawable.line_pattern.vertex.glsl",
+        "glsl_frag": "drawable.line_pattern.fragment.glsl",
+        "uses_ubos": true
+    },
+    {
+        "name": "LineSDFShader",
+        "header": "drawable_line_sdf",
+        "glsl_vert": "drawable.line_sdf.vertex.glsl",
+        "glsl_frag": "drawable.line_sdf.fragment.glsl",
+        "uses_ubos": true
+    },
+    {
+        "name": "LineShader",
+        "header": "drawable_line",
+        "glsl_vert": "drawable.line.vertex.glsl",
+        "glsl_frag": "drawable.line.fragment.glsl",
+        "uses_ubos": true
+    },
     {
         "name": "FillPatternShader",
         "header": "drawable_fill_pattern",