Try packing normals into a single component

src/data/bucket/line_bucket.js

@@ -5,6 +5,7 @@ const createElementArrayType = require('../element_array_type');
 const loadGeometry = require('../load_geometry');
 const EXTENT = require('../extent');
 const vectorTileFeatureTypes = require('@mapbox/vector-tile').VectorTileFeature.types;
+const {packUint8ToFloat} = require('../../shaders/encode_attribute');
 
 import type {BucketParameters} from '../bucket';
 import type {ProgramInterface} from '../program_configuration';
@@ -46,7 +47,7 @@ const MAX_LINE_DISTANCE = Math.pow(2, LINE_DISTANCE_BUFFER_BITS - 1) / LINE_DIST
 
 const lineInterface = {
  layoutAttributes: [
- {name: 'a_pos_normal', components: 4, type: 'Int16'},
+ {name: 'a_pos_normal', components: 3, type: 'Int16'},
  {name: 'a_data', components: 4, type: 'Uint8'}
  ],
  paintAttributes: [
@@ -66,8 +67,7 @@ function addLineVertex(layoutVertexBuffer, point: Point, extrude: Point, round:
  // a_pos_normal
  point.x,
  point.y,
- round ? 1 : 0,
- up ? 1 : -1,
+ packUint8ToFloat(round ? 1 : 0, up ? 1 : 0),
  // a_data
  // add 128 to store a byte in an unsigned byte
  Math.round(EXTRUDE_SCALE * extrude.x) + 128,

src/shaders/line.vertex.glsl

@@ -12,7 +12,7 @@
 // #define scale 63.0
 #define scale 0.015873016
 
-attribute vec4 a_pos_normal;
+attribute vec3 a_pos_normal;
 attribute vec4 a_data;
 
 uniform mat4 u_matrix;
@@ -42,7 +42,12 @@ void main() {
  float a_direction = mod(a_data.z, 4.0) - 1.0;
 
  vec2 pos = a_pos_normal.xy;
- vec2 normal = a_pos_normal.zw;
+
+ // transform y normal so that 0 => -1 and 1 => 1
+ // In the texture normal, x is 0 if the normal points straight up/down and 1 if it's a round cap
+ // y is 1 if the normal points up, and -1 if it points down
+ mediump vec2 normal = unpack_float(a_pos_normal.z);
+ normal.y = sign(normal.y - 0.5);
 
  v_normal = normal;
 

src/shaders/line_pattern.vertex.glsl

@@ -14,7 +14,7 @@
 // Retina devices need a smaller distance to avoid aliasing.
 #define ANTIALIASING 1.0 / DEVICE_PIXEL_RATIO / 2.0
 
-attribute vec4 a_pos_normal;
+attribute vec3 a_pos_normal;
 attribute vec4 a_data;
 
 uniform mat4 u_matrix;
@@ -44,7 +44,12 @@ void main() {
  float a_linesofar = (floor(a_data.z / 4.0) + a_data.w * 64.0) * LINE_DISTANCE_SCALE;
 
  vec2 pos = a_pos_normal.xy;
- vec2 normal = a_pos_normal.zw;
+
+ // transform y normal so that 0 => -1 and 1 => 1
+ // In the texture normal, x is 0 if the normal points straight up/down and 1 if it's a round cap
+ // y is 1 if the normal points up, and -1 if it points down
+ mediump vec2 normal = unpack_float(a_pos_normal.z);
+ normal.y = sign(normal.y - 0.5);
 
  v_normal = normal;
 

src/shaders/line_sdf.vertex.glsl

@@ -14,7 +14,7 @@
 // Retina devices need a smaller distance to avoid aliasing.
 #define ANTIALIASING 1.0 / DEVICE_PIXEL_RATIO / 2.0
 
-attribute vec4 a_pos_normal;
+attribute vec3 a_pos_normal;
 attribute vec4 a_data;
 
 uniform mat4 u_matrix;
@@ -53,7 +53,12 @@ void main() {
  float a_linesofar = (floor(a_data.z / 4.0) + a_data.w * 64.0) * LINE_DISTANCE_SCALE;
 
  vec2 pos = a_pos_normal.xy;
- vec2 normal = a_pos_normal.zw;
+
+ // transform y normal so that 0 => -1 and 1 => 1
+ // In the texture normal, x is 0 if the normal points straight up/down and 1 if it's a round cap
+ // y is 1 if the normal points up, and -1 if it points down
+ mediump vec2 normal = unpack_float(a_pos_normal.z);
+ normal.y = sign(normal.y - 0.5);
 
  v_normal = normal;