Fix flickering on lines (#5094)

* Fix * Add comment * Add test * Add changelog * Lint fix * Inline test data * Inline test data * Undo fix to make test fail * Update test expected image * Fix again * Rename function
maplibre · Nov 22, 2024 · eb334ec · eb334ec
1 parent dbc8b97
commit eb334ec
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 6 deletions.
diff --git a/CHANGELOG.md b/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

diff --git a/src/render/draw_fill.ts b/src/render/draw_fill.ts
@@ -131,7 +131,7 @@ function drawFillTiles(
 
         let stencil: StencilMode;
         if (painter.renderPass === 'translucent' && isRenderingToTexture) {
-            const [stencilModes] = painter.stencilConfigForOverlap(coords);
+            const [stencilModes] = painter.getStencilConfigForOverlapAndUpdateStencilID(coords);
             stencil = stencilModes[coord.overscaledZ];
         } else {
             stencil = painter.stencilModeForClipping(coord);

diff --git a/src/render/draw_hillshade.ts b/src/render/draw_hillshade.ts
@@ -38,7 +38,7 @@ export function drawHillshade(painter: Painter, sourceCache: SourceCache, layer:
             renderHillshade(painter, sourceCache, layer, coords, stencilBorders, depthMode, colorMode, true, isRenderingToTexture); // draw with borders
         } else {
             // Simple rendering
-            const [stencil, coords] = painter.stencilConfigForOverlap(tileIDs);
+            const [stencil, coords] = painter.getStencilConfigForOverlapAndUpdateStencilID(tileIDs);
             renderHillshade(painter, sourceCache, layer, coords, stencil, depthMode, colorMode, false, isRenderingToTexture);
         }
     }

diff --git a/src/render/draw_line.ts b/src/render/draw_line.ts
@@ -16,6 +16,7 @@ import type {OverscaledTileID} from '../source/tile_id';
 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 @@ export function drawLine(painter: Painter, sourceCache: SourceCache, layer: Line
             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.getStencilConfigForOverlapAndUpdateStencilID(coords);
+            stencil = stencilModes[coord.overscaledZ];
+        } else {
+            stencil = painter.stencilModeForClipping(coord);
+        }
 
         program.draw(context, gl.TRIANGLES, depthMode,
             stencil, colorMode, CullFaceMode.disabled, uniformValues, terrainData, projectionData,

diff --git a/src/render/draw_raster.ts b/src/render/draw_raster.ts
@@ -56,7 +56,7 @@ export function drawRaster(painter: Painter, sourceCache: SourceCache, layer: Ra
         drawTiles(painter, sourceCache, layer, coords, stencilBorders, true, true, cornerCoords, false, isRenderingToTexture); // draw with borders
     } else {
         // Simple rendering
-        const [stencil, coords] = painter.stencilConfigForOverlap(tileIDs);
+        const [stencil, coords] = painter.getStencilConfigForOverlapAndUpdateStencilID(tileIDs);
         drawTiles(painter, sourceCache, layer, coords, stencil, false, true, cornerCoords, false, isRenderingToTexture);
     }
 }

diff --git a/src/render/painter.ts b/src/render/painter.ts
@@ -377,9 +377,12 @@ 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>): [{
+    getStencilConfigForOverlapAndUpdateStencilID(tileIDs: Array<OverscaledTileID>): [{
         [_: number]: Readonly<StencilMode>;
     }, Array<OverscaledTileID>] {
         const gl = this.context.gl;

diff --git a/test/integration/render/tests/line-overlap/expected.png b/test/integration/render/tests/line-overlap/expected.png
diff --git a/test/integration/render/tests/line-overlap/style.json b/test/integration/render/tests/line-overlap/style.json
@@ -0,0 +1,69 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 604,
+      "width": 2500
+    }
+  },
+  "sources": {
+    "labels": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "name": "labels",
+        "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+        "features": [
+          { "type": "Feature", "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 10.4548, 30.23721 ], [ 12.10124, 29.17623 ], [ 13.06919, 28.59383 ], [ 13.90801, 28.14773 ], [ 15.0633, 27.62122 ], [ 16.73336, 26.94366 ], [ 19.25273, 25.9962 ], [ 24.38536, 24.24042 ] ] ] } },
+          { "type": "Feature", "geometry": { "type": "MultiLineString", "coordinates": [ [ [ -2.53029, 24.08627 ], [ -0.92903, 25.43133 ], [ 1.69781, 27.71044 ], [ 2.50976, 28.48152 ], [ 3.12575, 29.15906 ], [ 3.91076, 30.19778 ], [ 4.83945, 31.62538 ], [ 5.99138, 33.53524 ], [ 7.09863, 35.58912 ] ] ] } },
+          { "type": "Feature", "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 9.46878, 36.95101 ], [ 9.12957, 35.162 ], [ 9.0269, 34.31319 ], [ 9.02233, 33.87585 ], [ 9.08728, 33.48338 ], [ 9.21149, 33.11513 ], [ 9.85827, 31.74493 ] ] ] } },
+          { "type": "Feature", "geometry": { "type": "MultiLineString", "coordinates": [ [ [ -8.3277, 37.45789 ], [ -8.26268, 38.29508 ], [ -8.17222, 38.95447 ], [ -7.58916, 41.68053 ] ] ] } },
+          { "type": "Feature", "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 14.23254, 36.17485 ], [ 14.65497, 35.89509 ] ] ] } }
+        ]
+        }
+      }
+  },
+  "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": 7.061048686059204,
+  "center": [10.836805338905833, 31.325456717805366],
+  "pitch": 60,
+  "bearing": -117.25161852328324,
+  "roll": 0.7795022736613696
+}