Fix issue #5112 (line labels can render incorrectly on overzoomed tiles)

src/symbol/projection.js

@@ -107,10 +107,14 @@ function getGlCoordMatrix(posMatrix: mat4,
     return m;
 }
 
-function project(point: Point, matrix: mat4): Point {
+function project(point: Point, matrix: mat4) {
     const pos = [point.x, point.y, 0, 1];
     vec4.transformMat4(pos, pos, matrix);
-    return new Point(pos[0] / pos[3], pos[1] / pos[3]);
+    const w = pos[3];
+    return {
+        point: new Point(pos[0] / w, pos[1] / w),
+        signedDistanceFromCamera: w
+    };
 }
 
 function isVisible(anchorPos: [number, number, number, number],
@@ -175,16 +179,17 @@ function updateLineLabels(bucket: SymbolBucket,
             fontSize * perspectiveRatio :
             fontSize / perspectiveRatio;
 
-        const anchorPoint = project(new Point(symbol.anchorX, symbol.anchorY), labelPlaneMatrix);
+        const tileAnchorPoint = new Point(symbol.anchorX, symbol.anchorY);
+        const anchorPoint = project(tileAnchorPoint, labelPlaneMatrix).point;
         const projectionCache = {};
 
         const placeUnflipped = placeGlyphsAlongLine(symbol, pitchScaledFontSize, false /*unflipped*/, keepUpright, posMatrix, labelPlaneMatrix, glCoordMatrix,
-            bucket.glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, projectionCache);
+            bucket.glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, tileAnchorPoint, projectionCache);
 
         if (placeUnflipped.notEnoughRoom ||
             (placeUnflipped.needsFlipping &&
              placeGlyphsAlongLine(symbol, pitchScaledFontSize, true /*flipped*/, keepUpright, posMatrix, labelPlaneMatrix, glCoordMatrix,
-                 bucket.glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, projectionCache).notEnoughRoom)) {
+                 bucket.glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, tileAnchorPoint, projectionCache).notEnoughRoom)) {
             hideGlyphs(symbol.numGlyphs, dynamicLayoutVertexArray);
         }
     }
@@ -207,6 +212,7 @@ function placeGlyphsAlongLine(symbol,
                               lineVertexArray: any,
                               dynamicLayoutVertexArray,
                               anchorPoint: Point,
+                              tileAnchorPoint: Point,
                               projectionCache: {[number]: Point}) {
     const fontScale = fontSize / 24;
     const lineOffsetX = symbol.lineOffsetX * fontSize;
@@ -223,18 +229,18 @@ function placeGlyphsAlongLine(symbol,
         const lineStartIndex = symbol.lineStartIndex;
         const lineEndIndex = symbol.lineStartIndex + symbol.lineLength;
 
-        const firstPlacedGlyph = placeGlyphAlongLine(fontScale * firstGlyphOffset, lineOffsetX, lineOffsetY, flip, anchorPoint, symbol.segment,
+        const firstPlacedGlyph = placeGlyphAlongLine(fontScale * firstGlyphOffset, lineOffsetX, lineOffsetY, flip, anchorPoint, tileAnchorPoint, symbol.segment,
             lineStartIndex, lineEndIndex, lineVertexArray, labelPlaneMatrix, projectionCache);
         if (!firstPlacedGlyph)
             return { notEnoughRoom: true };
 
-        const lastPlacedGlyph = placeGlyphAlongLine(fontScale * lastGlyphOffset, lineOffsetX, lineOffsetY, flip, anchorPoint, symbol.segment,
+        const lastPlacedGlyph = placeGlyphAlongLine(fontScale * lastGlyphOffset, lineOffsetX, lineOffsetY, flip, anchorPoint, tileAnchorPoint, symbol.segment,
             lineStartIndex, lineEndIndex, lineVertexArray, labelPlaneMatrix, projectionCache);
         if (!lastPlacedGlyph)
             return { notEnoughRoom: true };
 
-        const firstPoint = project(firstPlacedGlyph.point, glCoordMatrix);
-        const lastPoint = project(lastPlacedGlyph.point, glCoordMatrix);
+        const firstPoint = project(firstPlacedGlyph.point, glCoordMatrix).point;
+        const lastPoint = project(lastPlacedGlyph.point, glCoordMatrix).point;
 
         if (keepUpright && !flip &&
             (symbol.vertical ? firstPoint.y < lastPoint.y : firstPoint.x > lastPoint.x)) {
@@ -246,22 +252,30 @@ function placeGlyphsAlongLine(symbol,
             const glyph = glyphOffsetArray.get(glyphIndex);
 
             // Since first and last glyph fit on the line, we're sure that the rest of the glyphs can be placed
-            placedGlyphs.push(placeGlyphAlongLine(fontScale * glyph.offsetX, lineOffsetX, lineOffsetY, flip, anchorPoint, symbol.segment,
+            placedGlyphs.push(placeGlyphAlongLine(fontScale * glyph.offsetX, lineOffsetX, lineOffsetY, flip, anchorPoint, tileAnchorPoint, symbol.segment,
                 lineStartIndex, lineEndIndex, lineVertexArray, labelPlaneMatrix, projectionCache));
         }
         placedGlyphs.push(lastPlacedGlyph);
     } else {
         // Only a single glyph to place
         // So, determine whether to flip based on projected angle of the line segment it's on
         if (keepUpright && !flip) {
-            const a = project(lineVertexArray.get(symbol.lineStartIndex + symbol.segment), posMatrix);
-            const b = project(lineVertexArray.get(symbol.lineStartIndex + symbol.segment + 1), posMatrix);
+            const a = project(tileAnchorPoint, posMatrix).point;
+            const tileSegmentEnd = lineVertexArray.get(symbol.lineStartIndex + symbol.segment + 1);
+            const projectedVertex = project(tileSegmentEnd, posMatrix);
+            // We know the anchor will be in the viewport, but the end of the line segment may be
+            // behind the plane of the camera, in which case we can use a point at any arbitrary (closer)
+            // point on the segment.
+            const b = (projectedVertex.signedDistanceFromCamera > 0) ?
+                projectedVertex.point :
+                projectTruncatedLineSegment(tileAnchorPoint, new Point(tileSegmentEnd.x, tileSegmentEnd.y), a, 1, posMatrix);
+
             if (symbol.vertical ? b.y > a.y : b.x < a.x) {
                 return { needsFlipping: true };
             }
         }
         const glyph = glyphOffsetArray.get(symbol.glyphStartIndex);
-        const singleGlyph = placeGlyphAlongLine(fontScale * glyph.offsetX, lineOffsetX, lineOffsetY, flip, anchorPoint, symbol.segment,
+        const singleGlyph = placeGlyphAlongLine(fontScale * glyph.offsetX, lineOffsetX, lineOffsetY, flip, anchorPoint, tileAnchorPoint, symbol.segment,
             symbol.lineStartIndex, symbol.lineStartIndex + symbol.lineLength, lineVertexArray, labelPlaneMatrix, projectionCache);
         if (!singleGlyph)
             return { notEnoughRoom: true };
@@ -276,11 +290,23 @@ function placeGlyphsAlongLine(symbol,
     return {};
 }
 
+function projectTruncatedLineSegment(previousTilePoint: Point, currentTilePoint: Point, previousProjectedPoint: Point, minimumLength: number, projectionMatrix: mat4) {
+    // We are assuming "previousTilePoint" won't project to a point within one unit of the camera plane
+    // If it did, that would mean our label extended all the way out from within the viewport to a (very distant)
+    // point near the plane of the camera. We wouldn't be able to render the label anyway once it crossed the
+    // plane of the camera.
+    const projectedUnitVertex = project(previousTilePoint.add(previousTilePoint.sub(currentTilePoint)._unit()), projectionMatrix).point;
+    const projectedUnitSegment = previousProjectedPoint.sub(projectedUnitVertex);
+
+    return previousProjectedPoint.add(projectedUnitSegment._mult(minimumLength / projectedUnitSegment.mag()));
+}
+
 function placeGlyphAlongLine(offsetX: number,
                              lineOffsetX: number,
                              lineOffsetY: number,
                              flip: boolean,
                              anchorPoint: Point,
+                             tileAnchorPoint: Point,
                              anchorSegment: number,
                              lineStartIndex: number,
                              lineEndIndex: number,
@@ -325,7 +351,19 @@ function placeGlyphAlongLine(offsetX: number,
 
         current = projectionCache[currentIndex];
         if (current === undefined) {
-            current = projectionCache[currentIndex] = project(lineVertexArray.get(currentIndex), labelPlaneMatrix);
+            const projection = project(lineVertexArray.get(currentIndex), labelPlaneMatrix);
+            if (projection.signedDistanceFromCamera > 0) {
+                current = projectionCache[currentIndex] = projection.point;
+            } else {
+                // The vertex is behind the plane of the camera, so we can't project it
+                // Instead, we'll create a vertex along the line that's far enough to include the glyph
+                const previousTilePoint = distanceToPrev === 0 ?
+                    tileAnchorPoint :
+                    new Point(lineVertexArray.get(currentIndex - dir).x, lineVertexArray.get(currentIndex - dir).y);
+                const currentTilePoint = new Point(lineVertexArray.get(currentIndex).x, lineVertexArray.get(currentIndex).y);
+                // Don't cache because the new vertex might not be far enough out for future glyphs on the same segment
+                current = projectTruncatedLineSegment(previousTilePoint, currentTilePoint, prev, absOffsetX - distanceToPrev + 1, labelPlaneMatrix);
+            }
         }
 
         distanceToPrev += currentSegmentDistance;

test/integration/render-tests/text-pitch-alignment/viewport-overzoomed-single-glyph/style.json

@@ -0,0 +1,56 @@
+{
+  "version": 8,
+  "center": [
+    -118.28162,
+    33.86852
+  ],
+  "zoom": 21,
+  "pitch": 60,
+  "bearing": 161.5,
+  "sources": {
+    "mapbox": {
+      "type": "vector",
+      "maxzoom": 16,
+      "tiles": [
+        "local://tiles/mapbox.mapbox-streets-v7/16-11235-26208.mvt"
+      ]
+    }
+  },
+  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "white"
+      }
+    },
+    {
+      "id": "road-label-large",
+      "type": "symbol",
+      "source": "mapbox",
+      "source-layer": "road_label",
+      "layout": {
+        "text-size": { "base": 1, "stops": [ [ 9, 10 ], [ 20, 16 ] ] },
+        "text-max-angle": 30,
+        "symbol-spacing": 250,
+        "text-font": [
+          "Open Sans Semibold",
+          "Arial Unicode MS Bold"
+        ],
+        "symbol-placement": "line",
+        "text-padding": 1,
+        "text-rotation-alignment": "map",
+        "text-pitch-alignment": "viewport",
+        "text-field": "C",
+        "text-letter-spacing": 0.01
+      },
+      "paint": {
+        "text-color": "hsl(0, 0%, 0%)",
+        "text-halo-color": "hsla(0, 0%, 100%, 0.75)",
+        "text-halo-width": 1,
+        "text-halo-blur": 1
+      }
+    }
+  ]
+}

test/integration/render-tests/text-pitch-alignment/viewport-overzoomed/style.json

@@ -0,0 +1,56 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 1024
+    }
+  },
+  "center": [
+    50,
+    0
+  ],
+  "zoom": 18,
+  "pitch": 60,
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "maxzoom": 16,
+      "data": {
+        "type": "LineString",
+        "coordinates": [
+            [ 50, -90 ],
+            [ 50, 90 ]
+        ]
+      }
+    }
+  },
+  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "white"
+      }
+    },
+    {
+      "id": "text",
+      "type": "symbol",
+      "source": "geojson",
+      "layout": {
+        "symbol-placement": "line",
+        "symbol-spacing": 10,
+        "text-rotation-alignment": "map",
+        "text-pitch-alignment": "viewport",
+        "text-field": "Figueroa St.",
+        "text-font": [
+          "Open Sans Semibold",
+          "Arial Unicode MS Bold"
+        ]
+      },
+      "paint": {
+        "text-opacity": 1
+      }
+    }
+  ]
+}