Fix globe pitch-aligned line-placed texts (#4925)

* Fix map-pitch-aligned line-placed texts on globe

* Add render test

* Only use globe text line render tests with collision circles

* Add another symbol-visibility/visible expected image

* Add changelog entry

CHANGELOG.md

@@ -4,6 +4,7 @@
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
+- Fix line-placed map-pitch-aligned texts being too large when viewed from some latitudes on a globe ([#4786](https://github.com/maplibre/maplibre-gl-js/issues/4786))
 - _...Add new stuff here..._
 
 ## 5.0.0-pre.4

src/shaders/symbol_sdf.vertex.glsl

@@ -120,8 +120,7 @@ void main() {
 
     float projectionScaling = 1.0;
 #ifdef GLOBE
-    if(u_pitch_with_map && !u_is_along_line) {
-        // Lines would behave in very weird ways if this adjustment was used for them.
+    if(u_pitch_with_map) {
         float anchor_pos_tile_y = (u_coord_matrix * vec4(projected_pos.xy / projected_pos.w, z, 1.0)).y;
         projectionScaling = mix(projectionScaling, 1.0 / circumferenceRatioAtTileY(anchor_pos_tile_y) * u_pitched_scale, u_projection_transition);
     }

src/symbol/collision_index.ts

@@ -199,7 +199,8 @@ export class CollisionIndex {
 
         const tileUnitAnchorPoint = new Point(symbol.anchorX, symbol.anchorY);
         const perspectiveRatio = this.getPerspectiveRatio(tileUnitAnchorPoint.x, tileUnitAnchorPoint.y, unwrappedTileID, getElevation);
-        const labelPlaneFontSize = pitchWithMap ? fontSize / perspectiveRatio : fontSize * perspectiveRatio;
+
+        const labelPlaneFontSize = pitchWithMap ? (fontSize * this.transform.getPitchedTextCorrection(symbol.anchorX, symbol.anchorY, unwrappedTileID) / perspectiveRatio) : fontSize * perspectiveRatio;
         const labelPlaneFontScale = labelPlaneFontSize / ONE_EM;
 
         const projectionCache = {projections: {}, offsets: {}, cachedAnchorPoint: undefined, anyProjectionOccluded: false};

src/symbol/projection.ts

@@ -279,7 +279,7 @@ export function updateLineLabels(bucket: SymbolBucket,
         const perspectiveRatio = getPerspectiveRatio(painter.transform.cameraToCenterDistance, cameraToAnchorDistance);
 
         const fontSize = symbolSize.evaluateSizeForFeature(sizeData, partiallyEvaluatedSize, symbol);
-        const pitchScaledFontSize = pitchWithMap ? fontSize / perspectiveRatio : fontSize * perspectiveRatio;
+        const pitchScaledFontSize = pitchWithMap ? (fontSize * painter.transform.getPitchedTextCorrection(symbol.anchorX, symbol.anchorY, unwrappedTileID) / perspectiveRatio) : fontSize * perspectiveRatio;
 
         const placeUnflipped = placeGlyphsAlongLine({
             projectionContext,

test/integration/render/tests/projection/globe/text-line-pole-to-pole/style.json → test/integration/render/tests/projection/globe/collision-text-line-equator/style.json

@@ -2,16 +2,23 @@
   "version": 8,
   "metadata": {
     "test": {
+      "collisionDebug": true,
       "height": 256,
       "width": 256
     }
   },
   "sky": {
     "atmosphere-blend": 0.0
   },
-  "zoom": 1,
+  "zoom": 0,
+  "center": [
+    0,
+    45
+  ],
   "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
-  "projection": { "type": "globe" },
+  "projection": {
+    "type": "globe"
+  },
   "sources": {
     "geojson": {
       "type": "geojson",
@@ -21,12 +28,12 @@
           "type": "LineString",
           "coordinates": [
             [
-              0,
-              -85
+              -45,
+              0
             ],
             [
-              0,
-              85
+              45,
+              0
             ]
           ]
         }
@@ -38,7 +45,7 @@
       "id": "background",
       "type": "background",
       "paint": {
-        "background-color": "white"
+        "background-color": "grey"
       }
     },
     {
@@ -60,7 +67,7 @@
       "source": "geojson",
       "layout": {
         "symbol-placement": "line",
-        "text-field": "AAAA AAAAAA A AAAAA AAAA BB",
+        "text-field": "AAAAAAAAAAA",
         "text-font": [
           "Open Sans Semibold",
           "Arial Unicode MS Bold"

test/integration/render/tests/projection/globe/collision-text-line-pole-to-pole/style.json

@@ -12,7 +12,9 @@
   },
   "zoom": 1,
   "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
-  "projection": { "type": "globe" },
+  "projection": {
+    "type": "globe"
+  },
   "sources": {
     "geojson": {
       "type": "geojson",
@@ -39,7 +41,7 @@
       "id": "background",
       "type": "background",
       "paint": {
-        "background-color": "white"
+        "background-color": "grey"
       }
     },
     {
@@ -61,7 +63,7 @@
       "source": "geojson",
       "layout": {
         "symbol-placement": "line",
-        "text-field": "AAAA AAAAAA A AAAAA AAAA BB",
+        "text-field": "AAAAAAAAAA",
         "text-font": [
           "Open Sans Semibold",
           "Arial Unicode MS Bold"