Fix flickering on lines

CHANGELOG.md

@@ -5,6 +5,7 @@
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
+- Fixes line flickering problem ([#5094](https://github.com/maplibre/maplibre-gl-js/pull/5094))
 - _...Add new stuff here..._
 
 ## 5.0.0-pre.7

src/render/draw_line.ts

@@ -16,6 +16,7 @@
 import {clamp, nextPowerOfTwo} from '../util/util';
 import {renderColorRamp} from '../util/color_ramp';
 import {EXTENT} from '../data/extent';
+import {StencilMode} from '../gl/stencil_mode';
 
 export function drawLine(painter: Painter, sourceCache: SourceCache, layer: LineStyleLayer, coords: Array<OverscaledTileID>, renderOptions: RenderOptions) {
     if (painter.renderPass !== 'translucent') return;
@@ -124,8 +125,13 @@
             gradientTexture.bind(layer.stepInterpolant ? gl.NEAREST : gl.LINEAR, gl.CLAMP_TO_EDGE);
         }
 
-        const [stencilModes] = painter.stencilConfigForOverlap(coords);
-        const stencil = isRenderingToTexture ? stencilModes[coord.overscaledZ] : painter.stencilModeForClipping(coord);
+        let stencil: StencilMode;
+        if (isRenderingToTexture) {
+            const [stencilModes] = painter.stencilConfigForOverlap(coords);
+            stencil = stencilModes[coord.overscaledZ];
+        } else {
+            stencil = painter.stencilModeForClipping(coord);
+        }
 
         program.draw(context, gl.TRIANGLES, depthMode,
             stencil, colorMode, CullFaceMode.disabled, uniformValues, terrainData, projectionData,

src/render/painter.ts

@@ -377,6 +377,9 @@ export class Painter {
      * mask area of tile overlapped by children tiles.
      * Stencil ref values continue range used in _tileClippingMaskIDs.
      *
+     * Attention: This function changes this.nextStencilID even if the result of it
+     * is not used, which might cause problems when rendering due to invalid stencil
+     * values.
      * Returns [StencilMode for tile overscaleZ map, sortedCoords].
      */
     stencilConfigForOverlap(tileIDs: Array<OverscaledTileID>): [{

test/integration/render/tests/line-overlap/style.json

@@ -0,0 +1,52 @@
+{
+  "version": 8,
+  "sources": {
+    "labels": {
+      "type": "geojson",
+      "data": "https://zerda.de/labels_small.geojson"
+    }
+  },
+  "layers": [
+      {
+        "id": "lines-red",
+        "type": "line",
+        "source": "labels",
+        "layout": {
+          "visibility": "visible"
+        },
+        "paint": {
+          "line-color": "rgba(255, 0, 0, 1.0)",
+          "line-width": 20
+        }
+      },
+      {
+        "id": "lines-green",
+        "type": "line",
+        "source": "labels",
+        "layout": {
+          "visibility": "visible"
+        },
+        "paint": {
+          "line-color": "rgba(0, 255, 0, 1.0)",
+          "line-width": 12
+        }
+      },
+      {
+        "id": "lines-blue",
+        "type": "line",
+        "source": "labels",
+        "layout": {
+          "visibility": "visible"
+        },
+        "paint": {
+          "line-color": "rgba(0, 0, 255, 1.0)",
+          "line-width": 4
+        }
+      }
+  ],
+  "zoom": 6.9801106061514195,
+  "center": [10.907878576288454, 31.329259918093854],
+  "pitch": 60,
+  "bearing": -117.25161852328324,
+  "roll": 0.7795022736613696
+}