deck.gl
deck.gl copied to clipboard
visgl
[Feat] HeatmapLayer: render more consistently across zoom levels
Target Use Case
It would be nice to have a way to keep a Heatmap rendering consistently across multiple zoom levels. Currently zooming in results in significant changes to the visualization which can be disorienting.
deck.gl current behavior
(via deck.gl HeatmapLayer docs)
https://user-images.githubusercontent.com/120596/227360722-f92f12c3-4693-4e7d-8df7-bbefb0c21cc6.mp4
Examples of expected behavior
Uber
- movement.uber.com - note how it's not as disorienting when zooming in, since the heatmap doesn't change too abruptly when rerendering:
https://user-images.githubusercontent.com/120596/227361397-74701107-68c3-4545-ad5e-c6aba3e69e10.mp4
ArcGIS docs
- ArcGIS - zooming results in rendering changes that aren't too jarring:
https://user-images.githubusercontent.com/120596/227363837-051516d4-e7a0-40fb-806a-12986d582548.mp4
Related discussions
- https://github.com/visgl/deck.gl/discussions/6908
- https://github.com/visgl/deck.gl/discussions/7191
- https://github.com/visgl/deck.gl/issues/5003 - this issue is adjusting weight based on zoom level, presumably this wouldn't be needed if there was a way to make heatmap display more consistently across zoom levels.
Proposal
Some layers such as Scatterplot allow users to set radiusUnits to meters which helps make visualizations more consistent across zoom levels. It would be nice if HeatmapLayer had something like radiusUnits as well, though this would probably require a breaking change (radiusPixels would need to be renamed to radius).
Alternatively it would be nice to have some new boolean property to turn on which would result in more consistent rendering between different zoom levels.
@davidcalhoun we've been working on this issue as part of our CodeDay Labs internship. To make sure we understand the expected behavior here, is this how it should look? (zooming in/out does not change the rendering)
https://github.com/visgl/deck.gl/assets/105250463/e1b0f794-2be9-4911-9ed3-22a33dda7db2
(This was recorded by forcing it to never update, by setting a very high debounceTimeout ) If so, what is the best way to go about this? Do you recommend trying to implement a radiusUnits option like the scatterplot layer has?
The scatterplot layer seems to do this in the shader (here https://github.com/visgl/deck.gl/blob/master/modules/layers/src/scatterplot-layer/scatterplot-layer-vertex.glsl.ts#L60C1-L61C1). Would we need to basically port that to the heatmap shader here (https://github.com/visgl/deck.gl/blob/master/modules/aggregation-layers/src/heatmap-layer/triangle-layer-vertex.glsl.ts#L40) ? Any advice or pointers you have here would be greatly appreciated, thank you so much!
@Edgar127 Thanks for the preview, that is definitely the sort of experience I'm after. I think even something that updates slightly like the ArcGIS video above would be fine, it's not so jarring. I'm not the best person to ask about implementation, sorry!
