Move scaling calculation to vertex shader

src/shaders/index.js

@@ -90,7 +90,7 @@ const shaders: {[string]: {fragmentSource: string, vertexSource: string}} = {
     },
     lineGradient: {
         fragmentSource: fs.readFileSync(__dirname + '/../shaders/line_gradient.fragment.glsl', 'utf8'),
-        vertexSource: fs.readFileSync(__dirname + '/../shaders/line.vertex.glsl', 'utf8')
+        vertexSource: fs.readFileSync(__dirname + '/../shaders/line_gradient.vertex.glsl', 'utf8')
     },
     linePattern: {
         fragmentSource: fs.readFileSync(__dirname + '/../shaders/line_pattern.fragment.glsl', 'utf8'),

src/shaders/line_gradient.fragment.glsl

@@ -1,6 +1,4 @@
-#define MAX_LINE_DISTANCE 32767.0
 
-#pragma mapbox: define highp vec4 color
 #pragma mapbox: define lowp float blur
 #pragma mapbox: define lowp float opacity
 
@@ -9,10 +7,9 @@ uniform sampler2D u_image;
 varying vec2 v_width2;
 varying vec2 v_normal;
 varying float v_gamma_scale;
-varying highp float v_linesofar;
+varying highp float v_lineprogress;
 
 void main() {
-    #pragma mapbox: initialize highp vec4 color
     #pragma mapbox: initialize lowp float blur
     #pragma mapbox: initialize lowp float opacity
 
@@ -25,9 +22,9 @@ void main() {
     float blur2 = (blur + 1.0 / 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_linesofar is the ratio along the entire line,
+    // 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.
-    color = texture2D(u_image, vec2(v_linesofar / MAX_LINE_DISTANCE, 0.5));
+    vec4 color = texture2D(u_image, vec2(v_lineprogress, 0.5));
 
     gl_FragColor = color * (alpha * opacity);
 

src/shaders/line_gradient.vertex.glsl

@@ -0,0 +1,84 @@
+
+// the attribute conveying progress along a line is scaled to [0, 2^15)
+#define MAX_LINE_DISTANCE 32767.0
+
+// the distance over which the line edge fades out.
+// Retina devices need a smaller distance to avoid aliasing.
+#define ANTIALIASING 1.0 / DEVICE_PIXEL_RATIO / 2.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
+
+attribute vec4 a_pos_normal;
+attribute vec4 a_data;
+
+uniform mat4 u_matrix;
+uniform mediump float u_ratio;
+uniform vec2 u_gl_units_to_pixels;
+
+varying vec2 v_normal;
+varying vec2 v_width2;
+varying float v_gamma_scale;
+varying 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
+
+    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 = a_pos_normal.xy;
+
+    // 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
+    mediump vec2 normal = a_pos_normal.zw;
+    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) + 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_gl_units_to_pixels);
+    v_gamma_scale = extrude_length_without_perspective / extrude_length_with_perspective;
+
+    v_width2 = vec2(outset, inset);
+}