Use separate attribute coponent for line normals (#5073)

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',  components: 2, type: 'Int16'},
+        {name: 'a_pos_normal', components: 3, type: 'Int16'},
         {name: 'a_data', components: 4, type: 'Uint8'}
     ],
     paintAttributes: [
@@ -61,11 +62,12 @@ const lineInterface = {
     elementArrayType: createElementArrayType()
 };
 
-function addLineVertex(layoutVertexBuffer, point, extrude, tx, ty, dir, linesofar) {
+function addLineVertex(layoutVertexBuffer, point: Point, extrude: Point, round: boolean, up: boolean, dir: number, linesofar: number) {
     layoutVertexBuffer.emplaceBack(
-        // a_pos
-        (point.x << 1) | tx,
-        (point.y << 1) | ty,
+        // a_pos_normal
+        point.x,
+        point.y,
+        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,
@@ -391,15 +393,14 @@ class LineBucket extends Bucket {
                      endRight: number,
                      round: boolean,
                      segment: Segment) {
-        const tx = round ? 1 : 0;
         let extrude;
         const arrays = this.arrays;
         const layoutVertexArray = arrays.layoutVertexArray;
         const elementArray = arrays.elementArray;
 
         extrude = normal.clone();
         if (endLeft) extrude._sub(normal.perp()._mult(endLeft));
-        addLineVertex(layoutVertexArray, currentVertex, extrude, tx, 0, endLeft, distance);
+        addLineVertex(layoutVertexArray, currentVertex, extrude, round, false, endLeft, distance);
         this.e3 = segment.vertexLength++;
         if (this.e1 >= 0 && this.e2 >= 0) {
             elementArray.emplaceBack(this.e1, this.e2, this.e3);
@@ -410,7 +411,7 @@ class LineBucket extends Bucket {
 
         extrude = normal.mult(-1);
         if (endRight) extrude._sub(normal.perp()._mult(endRight));
-        addLineVertex(layoutVertexArray, currentVertex, extrude, tx, 1, -endRight, distance);
+        addLineVertex(layoutVertexArray, currentVertex, extrude, round, true, -endRight, distance);
         this.e3 = segment.vertexLength++;
         if (this.e1 >= 0 && this.e2 >= 0) {
             elementArray.emplaceBack(this.e1, this.e2, this.e3);
@@ -433,24 +434,23 @@ class LineBucket extends Bucket {
      * Add a single new vertex and a triangle using two previous vertices.
      * This adds a pie slice triangle near a join to simulate round joins
      *
-     * @param {Object} currentVertex the line vertex to add buffer vertices for
-     * @param {number} distance the distance from the beggining of the line to the vertex
-     * @param {Object} extrude the offset of the new vertex from the currentVertex
-     * @param {boolean} whether the line is turning left or right at this angle
+     * @param currentVertex the line vertex to add buffer vertices for
+     * @param distance the distance from the beggining of the line to the vertex
+     * @param extrude the offset of the new vertex from the currentVertex
+     * @param lineTurnsLeft whether the line is turning left or right at this angle
      * @private
      */
     addPieSliceVertex(currentVertex: Point,
                       distance: number,
                       extrude: Point,
                       lineTurnsLeft: boolean,
                       segment: Segment) {
-        const ty = lineTurnsLeft ? 1 : 0;
         extrude = extrude.mult(lineTurnsLeft ? -1 : 1);
         const arrays = this.arrays;
         const layoutVertexArray = arrays.layoutVertexArray;
         const elementArray = arrays.elementArray;
 
-        addLineVertex(layoutVertexArray, currentVertex, extrude, 0, ty, 0, distance);
+        addLineVertex(layoutVertexArray, currentVertex, extrude, false, lineTurnsLeft, 0, distance);
         this.e3 = segment.vertexLength++;
         if (this.e1 >= 0 && this.e2 >= 0) {
             elementArray.emplaceBack(this.e1, this.e2, this.e3);

src/data/extent.js

@@ -8,7 +8,8 @@
  *
  * * Vertex buffer store positions as signed 16 bit integers.
  * * One bit is lost for signedness to support tile buffers.
- * * One bit is lost because the line vertex buffer packs 1 bit of other data into the int.
+ * * One bit is lost because the line vertex buffer used to pack 1 bit of other data into the int.
+ *   This is no longer the case but we're reserving this bit anyway.
  * * One bit is lost to support features extending past the extent on the right edge of the tile.
  * * This leaves us with 2^13 = 8192
  *

src/shaders/line.vertex.glsl

@@ -12,7 +12,7 @@
 // #define scale 63.0
 #define scale 0.015873016
 
-attribute vec2 a_pos;
+attribute vec3 a_pos_normal;
 attribute vec4 a_data;
 
 uniform mat4 u_matrix;
@@ -41,20 +41,21 @@ void main() {
     vec2 a_extrude = a_data.xy - 128.0;
     float a_direction = mod(a_data.z, 4.0) - 1.0;
 
-    // We store the texture normals in the most insignificant bit
-    // transform y so that 0 => -1 and 1 => 1
+    vec2 pos = a_pos_normal.xy;
+
+    // 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 = mod(a_pos, 2.0);
+    mediump vec2 normal = unpack_float(a_pos_normal.z);
     normal.y = sign(normal.y - 0.5);
-    v_normal = normal;
 
+    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. 
+    // 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; 
+    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;
@@ -71,9 +72,6 @@ void main() {
     mediump float t = 1.0 - abs(u);
     mediump vec2 offset2 = offset * a_extrude * scale * normal.y * mat2(t, -u, u, t);
 
-    // Remove the texture normal bit to get the position
-    vec2 pos = floor(a_pos * 0.5);
-
     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;
 

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 vec2 a_pos;
+attribute vec3 a_pos_normal;
 attribute vec4 a_data;
 
 uniform mat4 u_matrix;
@@ -43,19 +43,21 @@ void main() {
     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;
 
-    // We store the texture normals in the most insignificant bit
-    // transform y so that 0 => -1 and 1 => 1
+    vec2 pos = a_pos_normal.xy;
+
+    // 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 = mod(a_pos, 2.0);
+    mediump vec2 normal = unpack_float(a_pos_normal.z);
     normal.y = sign(normal.y - 0.5);
+
     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. 
+    // 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; 
+    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;
@@ -72,9 +74,6 @@ void main() {
     mediump float t = 1.0 - abs(u);
     mediump vec2 offset2 = offset * a_extrude * scale * normal.y * mat2(t, -u, u, t);
 
-    // Remove the texture normal bit to get the position
-    vec2 pos = floor(a_pos * 0.5);
-
     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;
 

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 vec2 a_pos;
+attribute vec3 a_pos_normal;
 attribute vec4 a_data;
 
 uniform mat4 u_matrix;
@@ -52,20 +52,22 @@ void main() {
     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;
 
-    // We store the texture normals in the most insignificant bit
-    // transform y so that 0 => -1 and 1 => 1
+    vec2 pos = a_pos_normal.xy;
+
+    // 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 = mod(a_pos, 2.0);
+    mediump vec2 normal = unpack_float(a_pos_normal.z);
     normal.y = sign(normal.y - 0.5);
+
     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. 
+    // 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;
 
@@ -81,9 +83,6 @@ void main() {
     mediump float t = 1.0 - abs(u);
     mediump vec2 offset2 = offset * a_extrude * scale * normal.y * mat2(t, -u, u, t);
 
-    // Remove the texture normal bit to get the position
-    vec2 pos = floor(a_pos * 0.5);
-
     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;