CARTO: Implement QuadbinHeatmapTileLayer

[felixpalmer]

Background

Implementation of custom layer for CARTO module to allow display of a QuadbinTileLayer as a heatmap. LIVE DEMO

Some of the ideas used here might be interesting for discussion for inclusion in core, however this PR aims to implement the functionality with minimal changes required to code outside of deck.gl/carto. As such, there may be a cleaner way if we move some of the code to core (see PostProcessModifier & OffscreenModifier below).

Screen.Recording.2024-03-25.at.14.47.44.mov

Implementation

Unlike the existing HeatmapLayer which renders points as 2D gaussians (essentially a blurred point) and then sums them, this layer performs the sum using a spatial index, and performs the blur in screen space. Both layers then apply a color map to the resulting value to give the familiar heatmap look.

Offscreen rendering

In order to achieve the above effect it was necessary to apply a custom post process effect to a single layer, specifically a CompositeLayer, to allow the use of tiled data.

A new set of helper functions is introduced to make it simpler to apply the postprocessing:

PostProcessModifier & OffscreenModifier

PostProcessModifer modifies a layer to make it apply a given post process effect:

const BlurredQuadbinTileLayer = PostProcessModifier(QuadbinTileLayer, triangleBlur);

For this to work, the non-composite layers that the CompositeLayer will draw will need to be rendered off-screen:

const OffscreenSolidPolygonLayer = OffscreenModifier(SolidPolygonLayer)
const _subLayerProps = {cell: {_subLayerProps: {fill: {type: OffscreenSolidPolygonLayer}}}};
BlurredQuadbinTileLayer.defaultProps._subLayerProps = _subLayerProps;

This approach is conceptually related to the ColorFilterExtension RFC, but it is much more powerful, as it supports effects which sample nearby pixels, allowing for effects like blur, heatmap, edge-detection or any other kernel-based transformation. By contrast the ColorFilterExtension RFC only allows color filters.

Integration

QuadbinHeatmapTileLayer is a drop-in replacement for QuadbinTileLayer with a number of extra props added to control the heatmap:

return new QuadbinHeatmapTileLayer({
  // Heatmap effect props
  palette,
  radius,
  rangeScale,

  // Standard QuadbinTileLayer props
  getFillColor: d => {
    let v = d.properties.population_sum;
    return [v % 256, Math.floor(v / 256), Math.floor(v / (256 * 256)), 0];
  },
  ...
});

Change List

• Add PostProcessModifier & OffscreenModifier helper functions
• Add custom heatmap shader module
• Modify SolidPolygonLayer to output correct screen-normalized value that the heatmap shader module required
• Add clearTarget option to PostProcessEffect & ScreenPass (only change required to core)
• Test app

[coveralls]

coverage: 89.83% (-0.2%) from 90.027%
when pulling 1b15be1 on felix/quadbin-heatmap
into 1e53513 on master.

[felixpalmer]

See #8801