Mapbox-gl-js: Small-radius heatmap flickers when moving the map

[lbud]

Pitching maps with heatmap layers cause "far" kernels to change on every frame (kind of flicker, in a blurry heatmap sort of way).

Reproducible on any heatmap, including the examples page.
cc @mourner

[mourner]

Wow, not sure what's going on there....

[lbud]

@mourner the effect sort of reminds me of something I ran into in fill-extrusion layers in gl-native, where sometimes the depth buffer resolution was too low (https://github.com/mapbox/mapbox-gl-native/pull/8431#issuecomment-296860060), causing jagged edges on the sides of extrusions; we fixed this by setting the near clip plan in the fill-extrusion layer projection matrix to 100 so as not to waste a lot of precision on shapes extremely close to the camera (https://github.com/mapbox/mapbox-gl-native/pull/8431/commits/72278bfe94ce0d19b515bb92e9d0be88eb53aa89). Not sure if this is relevant to what's going on here, but 🤷‍♀️

[wysisoft]

I don't think this is as much a "further distances" problem as much as a "small radius" problem. Radii above 5 seems to behave well. Radii 3 and under seem to flicker.

[pathmapper]

Agree with @wysisoft, there is no need to pitch a heatmap to trigger the bug. This GIF is just the official example zoomed out so that heatmap-radius = 2.

[ryanhamley]

Thanks for pointing out what's going on here @pathmapper and @wysisoft

I can confirm that this is reproducible in our debug heatmap page as well, if you lower the heatmap-radius to <= 2. I'm not very familiar with the heatmap code though. @mourner does this new information point to a potential cause? could it be related to texture filtering a la https://github.com/mapbox/mapbox-gl-js/pull/8738?

[mpulkki-mapbox]

This is an aliasing issue caused by too low texture resolution in heatmap rendering. Information is lost when the heatmap is rendered to an offscreen texture that has 1/16 size of the viewport. Here's an another example of the bug:

A quick and dirty fix would be to increase the texture resolution to 1:1, but I think the issue is deeper in the heatmap implementation. Here's a heatmap with 1:1 resolution:

Related pull request: #8975