Clear tiles with zoom dependent line-width layers from the terrain render cache

[stepankuzmin]

GL JS is not considering a line width change as a prerequisite to clear off tiles from the terrain render cache. Because of that, while zooming between two zoom levels, GL JS is using a stale zoom in getPixelsToTileUnitsMatrix during the entire range [z..z+1].

This fix clears tiles with zoom-dependent line-width layers from the terrain render cache. One thing that bugs me is that most Mapbox core styles use a composite source with zoom-dependant line layers. So we are basically disabling the terrain render cache for the composite source in core styles here.

Closes #11956

Benchmarks

After running benchmarks comparing the main branch with this PR, there is a regression in frameTimeAverage and percentDroppedFrames, see:

• streets-v11 https://sites.mapbox.com/benchmap-js-results/runs/1266
• streets-v12 https://sites.mapbox.com/benchmap-js-results/runs/1267

Before

before-line-width-fix.mov

After

after-line-width-fix.mov

Launch Checklist

• briefly describe the changes in this PR
• include before/after visuals or gifs if this PR includes visual changes
• post benchmark scores
• manually test the debug page
• apply changelog label ('bug', 'feature', 'docs', etc) or use the label 'skip changelog'
• add an entry inside this element for inclusion in the mapbox-gl-js changelog: <changelog>fix blur on draped lines while zoom-in</changelog>

[karimnaaji]

The change looks good in itself, like you mentioned it's a bit worrisome to regress on performance with that change, putting the links to the benchmarks of the style for reference:

• streets-v11 https://sites.mapbox.com/benchmap-js-results/runs/1266

rendering-3d

rendering-globe

• streets-v12 https://sites.mapbox.com/benchmap-js-results/runs/1267

Before going forward with this change, is there any alternative approach we could think about? For example, only trigger the render cache reload on larger/visible line-width differences (e.g. > 1/2px) in order to try and retain performance while still giving accurate results.

Otherwise, we should probably prefer the accuracy of the result and optimize this in the style itself.

[stepankuzmin]

@karimnaaji I've tried an approach that @mourner suggested — to clear terrain render cache on map moveend. The line issue is still visible while the map is moving, but after the move ends, it clears the render cache, and lines are refined. According to the benchmark, the performance is much better (indeterminate compared to the version without the fix). What do you think of this approach?

mapbox-gl-js/src/terrain/terrain.js

Lines 285 to 287 in 1a19e93

	this._style.map.on('moveend', () => {
	this._clearTilesFromRenderCache();
	});

https://sites.mapbox.com/benchmap-js-results/runs/1289
https://sites.mapbox.com/benchmap-js-results/runs/1290

[karimnaaji]

@karimnaaji I've tried an approach that @mourner suggested — to clear terrain render cache on map moveend. The line issue is still visible while the map is moving, but after the move ends, it clears the render cache, and lines are refined.

Yes that's a good idea and seems like a good compromise, the benchmarks look good now 👍

[karimnaaji]

👍 Fix looks good to me

[stepankuzmin]

Note: I've tried to cover the issue in the render test but couldn't reproduce it

test case

{
  "version": 8,
  "metadata": {
    "test": {
      "operations": [
        ["setProjection", "globe"],
        ["wait"],
        ["zoomTo", 2.9, {"duration": 2000}],
        ["wait"]
      ]
    }
  },
  "center": [0, 0],
  "zoom": 2.0,
  "pitch": 0,
  "bearing": 0,
  "sources": {
    "geojson": {
      "type": "geojson",
      "data": {
        "type": "MultiLineString",
        "coordinates": [
          [
            [
              0,
              20
            ],
            [
              20,
              0
            ],
            [
              0,
              -20
            ],
            [
              -20,
              0
            ],
            [
              0,
              20
            ]
          ]
        ]
      }
    }
  },
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": {
        "background-color": "white"
      }
    },
    {
      "id": "line",
      "type": "line",
      "source": "geojson",
      "paint": {
        "line-width": 10,
        "line-opacity": 1
      }
    }
  ]
}