search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.23k stars 2.23k forks source link

Terrain exaggeration with zoom expression results in flickering #11044

Open rreusser opened 3 years ago

rreusser commented 3 years ago

mapbox-gl-js version: latest/2.5.0-beta.1

browser: Chrome 93

Steps to Trigger Behavior

  1. Use zoom expression for terrain exaggeration, e.g. map.setTerrain({"exaggeration": ["interpolate", ["linear"], ["zoom"], 12, 1, 15, 0 ]});
  2. Zoom

Link to Demonstration

https://jsfiddle.net/hywpmjce/1/

zoom-flickering

(shows some flickering, but due to 30fps capture of 60fps frame by frame flickering, most of the flickering is removed)

Expected Behavior

Valid zoom expressions for exaggeration aren't rendered unusable by flickering.

Actual Behavior

The map enters a feedback loop:

  1. camera position depends on terrain exaggeration (because of transform logic)
  2. terrain exaggeration depends on zoom (due to zoom expression)
  3. zoom depends on camera position (due to re-centering of camera—which normally occurs only on idle but maybe is occurring on every frame due to the modification of exaggeration? I'm not 100% certain about the trigger for this part.)

I believe one way to exit this feedback loop would be to avoid or defer the camera recentering when the exaggeration is modified. At the very least, it would be nice if the style spec would not accept an expression that it cannot successfully render.

rreusser commented 3 years ago

Related bugs noticed during this are that I'm not able to trigger an exaggeration transition even though it's marked transitionable and map.setTerrain() doesn't seem to trigger a repaint when the exaggeration changes.

astojilj commented 2 years ago

Issue is noticeable also while dragging over terrain, given that zoom used in expression is recalculated continuously. Video is taken against current main branch and somewhat exaggerated expression (compared to original report https://github.com/mapbox/mapbox-gl-js/issues/11044#issue-1002848550):

"exaggeration": [
                "interpolate",
                ["linear"],
                ["zoom"],
                0, 20,
                14, 1.5,
                18, 0
            ]

https://user-images.githubusercontent.com/549216/157892426-49e5879e-4439-449b-8853-eeeb1d3bfdad.mov