Mapbox-gl-js: DEM rendering appears to create zoom & rendering issue

[agoddard]

_I apologize that this issue is vague, but hopefully the demo video is clear. _
When zooming in to a specific location on the map with a mapbox DEM layer, the map gets super jumpy and half the map appears to bounce. When looking at it on an angle, it appears like the map thinks that there's a huge drop-off at the edge of the tile(perhaps). But I don't know if this is a data/dem issue, or a rendering issue.

mapbox-gl-js version: 2.0.0

browser: Safari 14.0.2 (16610.3.7.1.9)

Steps to Trigger Behavior

1. Browse to location in video in a map using mapbox dem & sat layers
2. zoom in and observe half the map zooming in and out as you zoom slowly in, and then zooming in and out again when you zoom slowly out.

Link to Demonstration

http://z6z.co/demo/zoom.mov

If there's additional debugging I can do on this end to get better data, I'll gladly dig into it and update here to make this report more useful, if anyone can let me know where to look.

[mourner]

Whoa, weird — we haven't encountered anything like this yet. Can you please set up a minimal live test case where this is reproducible? It's very hard to guess the exact location from the video.

[agoddard]

@mourner absolutely - I found the spot again, it shows it at what looks like the border of 4 'tiles'

https://codepen.io/agoddard-the-flexboxer/pen/dypWNmg - slowly zoom out from where the map loads and you should see it. I added a FlyTo to demonstrate, but that causes a really fast strobe effect so I was worried about folks with photosensitive epilepsy.. I imagine the strobing with flyTo is an artifact of the same issue anyway.

Here's two pics which might also provide hints about what is happening. It seems as if one section can't decide whether it's at 0ft above ground level, or like -1000ft below ground level. Once the zoom level is zoomed out enough, the tile stays correctly at 0ft above the ground

In this one, you can see the southeast tile is floating far below the other tiles:

And in this one you can see a clear gap, and also some of that lower tile underneath the southern portion of the map. If you follow this gap north it seems to just keep going for a while too.

Lastly, terrain-dem-v1 maxZoom (in this map at least) is 14. The problem only begins at zoom 16, in case this is relevant. I didn't initially notice this bug by zooming in to crazy zoom levels to see if it might break, I was just looking at that river in the new sat imagery and I noticed the map suddenly do this:

Hopefully that helps!

[mourner]

@agoddard perfect, thanks a lot for the test case! This is really weird. I wonder if this is some kind of a data glitch that the client doesn't account for properly. Will investigate. 👍

[mourner]

I confirmed this to be a data problem (although we should handle this better on the client too) — some DEM tiles appear to be empty in this area — here are 4 neighbouring z14 tiles (see comment source for urls):

cc @dnomadb

[agoddard]

This also happens in Wales, but further zoomed out. Might be some missing DEM data in Wales (slightly to the right of there map center here if you zoom in and out). https://codepen.io/agoddard-the-flexboxer/pen/qBaxyGB

[mourner]

This appears to have been fixed on the data side.

[rreusser]

@mourner does this look like the same issue? Here's a reproducible gap in v2.1.1:

https://codepen.io/rsreusser/pen/wvoPprz

I do see a single-pixel line and a slight discontinuity across the terrain tiles here, which suggests to me it might indeed be an upstream data issue rather than a client-side issue:

[dnomadb]

which suggests to me it might indeed be an upstream data issue

Indeed, I see it in the tiled data but it is not present in the source data. I don't think it is related to this issue though, thanks for the report @rreusser

[rreusser]

Thanks for checking, @dnomadb! Please let me know if there's anything else I can do to get this into the proper issue tracker/inbox, otherwise it sounds like maybe there's not further investigation to be done on the gl-js side.