Make gradient attributes packed

src/data/array_types.js

@@ -1169,7 +1169,7 @@ export {
     StructArrayLayout4i8 as FillExtrusionLayoutArray,
     StructArrayLayout2i4 as HeatmapLayoutArray,
     StructArrayLayout2i4ub1f12 as LineLayoutArray,
-    StructArrayLayout2f8 as LineExtLayoutArray,
+    StructArrayLayout3f12 as LineExtLayoutArray,
     StructArrayLayout10ui20 as PatternLayoutArray,
     StructArrayLayout8ui16 as DashLayoutArray,
     StructArrayLayout4i4ui4i24 as SymbolLayoutArray,

src/data/bucket/line_attributes_ext.js

@@ -2,8 +2,7 @@
 import {createLayout} from '../../util/struct_array.js';
 
 const lineLayoutAttributesExt = createLayout([
-    {name: 'a_uv_x', components: 1, type: 'Float32'},
-    {name: 'a_split_index', components: 1, type: 'Float32'},
+    {name: 'a_packed', components: 3, type: 'Float32'}
 ]);
 
 export default lineLayoutAttributesExt;

src/data/bucket/line_bucket.js

@@ -621,7 +621,7 @@ class LineBucket implements Bucket {
 
         // Constructs a second vertex buffer with higher precision line progress
         if (this.lineClips) {
-            this.layoutVertexArray2.emplaceBack(this.scaledDistance, this.lineClipsArray.length);
+            this.layoutVertexArray2.emplaceBack(this.scaledDistance, this.lineClipsArray.length, this.lineSoFar);
         }
 
         const e = segment.vertexLength++;

src/shaders/line.fragment.glsl

@@ -1,15 +1,21 @@
 uniform lowp float u_device_pixel_ratio;
-uniform sampler2D u_dash_image;
-uniform sampler2D u_gradient_image;
-uniform float u_mix;
-uniform vec3 u_scale;
 
 varying vec2 v_width2;
 varying vec2 v_normal;
 varying float v_gamma_scale;
-varying highp vec2 v_uv;
+
+#ifdef RENDER_LINE_DASH
+uniform sampler2D u_dash_image;
+uniform float u_mix;
+uniform vec3 u_scale;
 varying vec2 v_tex_a;
 varying vec2 v_tex_b;
+#endif
+
+#ifdef RENDER_LINE_GRADIENT
+uniform sampler2D u_gradient_image;
+varying highp vec2 v_uv;
+#endif
 
 #pragma mapbox: define highp vec4 color
 #pragma mapbox: define lowp float floorwidth

src/shaders/line.vertex.glsl

@@ -8,24 +8,35 @@
 
 attribute vec2 a_pos_normal;
 attribute vec4 a_data;
-attribute float a_uv_x;
-attribute float a_split_index;
+
+#ifdef RENDER_LINE_GRADIENT
+// Includes in order: a_uv_x, a_split_index, a_linesofar
+// to reduce attribute count on older devices
+attribute vec3 a_packed;
+#else
 attribute float a_linesofar;
+#endif
 
 uniform mat4 u_matrix;
 uniform mediump float u_ratio;
 uniform vec2 u_units_to_pixels;
 uniform lowp float u_device_pixel_ratio;
-uniform float u_image_height;
-uniform vec2 u_texsize;
-uniform mediump vec3 u_scale;
 
 varying vec2 v_normal;
 varying vec2 v_width2;
 varying float v_gamma_scale;
-varying highp vec2 v_uv;
+
+#ifdef RENDER_LINE_DASH
+uniform vec2 u_texsize;
+uniform mediump vec3 u_scale;
 varying vec2 v_tex_a;
 varying vec2 v_tex_b;
+#endif
+
+#ifdef RENDER_LINE_GRADIENT
+uniform float u_image_height;
+varying highp vec2 v_uv;
+#endif
 
 #pragma mapbox: define highp vec4 color
 #pragma mapbox: define lowp float floorwidth
@@ -97,6 +108,9 @@ void main() {
 #endif
 
 #ifdef RENDER_LINE_GRADIENT
+    float a_uv_x = a_packed[0];
+    float a_split_index = a_packed[1];
+    float a_linesofar = a_packed[2];
     highp float texel_height = 1.0 / u_image_height;
     highp float half_texel_height = 0.5 * texel_height;
     v_uv = vec2(a_uv_x, a_split_index * texel_height - half_texel_height);