@deck.gl/carto 9.0.11 → 9.0.13

package/package.json

@@ -3,7 +3,7 @@
   "description": "CARTO official integration with Deck.gl. Build geospatial applications using CARTO and Deck.gl.",
   "license": "MIT",
   "type": "module",
-  "version": "9.0.11",
+  "version": "9.0.13",
   "publishConfig": {
     "access": "public"
   },
@@ -48,6 +48,8 @@
     "@loaders.gl/schema": "^4.2.0",
     "@loaders.gl/tiles": "^4.2.0",
     "@luma.gl/constants": "^9.0.11",
+    "@luma.gl/core": "^9.0.11",
+    "@luma.gl/shadertools": "^9.0.11",
     "@math.gl/web-mercator": "^4.0.0",
     "@types/d3-array": "^3.0.2",
     "@types/d3-color": "^1.4.2",
@@ -69,8 +71,7 @@
     "@deck.gl/extensions": "^9.0.0",
     "@deck.gl/geo-layers": "^9.0.0",
     "@deck.gl/layers": "^9.0.0",
-    "@loaders.gl/core": "^4.2.0",
-    "@luma.gl/core": "^9.0.0"
+    "@loaders.gl/core": "^4.2.0"
   },
-  "gitHead": "0f342da92b42dce68b647687111fcca332e954c0"
+  "gitHead": "39b76f3cd7d6041dd36b93dc3e91b740ed2c57f9"
 }

package/src/index.ts

@@ -1,12 +1,14 @@
 import {default as H3TileLayer} from './layers/h3-tile-layer';
 import {default as _PointLabelLayer} from './layers/point-label-layer';
 import {default as QuadbinTileLayer} from './layers/quadbin-tile-layer';
+import {default as QuadbinHeatmapTileLayer} from './layers/quadbin-heatmap-tile-layer';
 import {default as RasterTileLayer} from './layers/raster-tile-layer';
 import {default as VectorTileLayer} from './layers/vector-tile-layer';
 const CARTO_LAYERS = {
   H3TileLayer,
   _PointLabelLayer,
   QuadbinTileLayer,
+  QuadbinHeatmapTileLayer,
   RasterTileLayer,
   VectorTileLayer
 };
@@ -15,6 +17,7 @@ export {
   H3TileLayer,
   _PointLabelLayer,
   QuadbinTileLayer,
+  QuadbinHeatmapTileLayer,
   RasterTileLayer,
   VectorTileLayer
 };

package/src/layers/heatmap.ts

@@ -0,0 +1,196 @@
+import type {ShaderPass} from '@luma.gl/shadertools';
+import {random} from '@luma.gl/shadertools';
+import {Color} from '@deck.gl/core';
+const glsl = (s: TemplateStringsArray) => `${s}`;
+
+/**
+ * @filter       Heatmap
+ * @param radiusPixels Blur radius in pixels, controls smoothness of heatmap
+ * @param colorDomain Domain to apply to values prior to applying color scale
+ * @param color1-6 Colors to use in color scale
+ */
+
+const fs = glsl`\
+uniform heatmapUniforms {
+  float radiusPixels;
+  vec2 colorDomain;
+  vec3 color1;
+  vec3 color2;
+  vec3 color3;
+  vec3 color4;
+  vec3 color5;
+  vec3 color6;
+  float opacity;
+} heatmap;
+
+// Controls quality of heatmap, larger values increase quality at expense of performance
+const float SUPPORT = 8.0;
+const vec4 STOPS = vec4(0.2, 0.4, 0.6, 0.8);
+
+vec3 colorGradient(float value) {
+  vec3 c1;
+  vec3 c2;
+  vec2 range;
+  if (value < STOPS.x) {
+    range = vec2(0.0, STOPS.x);
+    c1 = heatmap.color1; c2 = heatmap.color2;
+  } else if (value < STOPS.y) {
+    range = STOPS.xy;
+    c1 = heatmap.color2; c2 = heatmap.color3;
+  } else if (value < STOPS.z) {
+    range = STOPS.yz;
+    c1 = heatmap.color3; c2 = heatmap.color4;
+  } else if (value < STOPS.w) {
+    range = STOPS.zw;
+    c1 = heatmap.color4; c2 = heatmap.color5;
+  } else if (value < 1.0 ) {
+    range = vec2(STOPS.w, 1.0);
+    c1 = heatmap.color5; c2 = heatmap.color6;
+  } else {
+    // Fade out to white
+    range = vec2(1.0, 10.0);
+    c1 = heatmap.color6; c2 = vec3(255.0);
+  }
+
+  float f = (value - range.x) / (range.y - range.x);
+  return mix(c1, c2, f) / 255.0;
+}
+
+const vec3 SHIFT = vec3(1.0, 256.0, 256.0 * 256.0);
+float unpack(vec3 color) {
+  return 255.0 * dot(color, SHIFT);
+}
+
+vec4 heatmap_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
+  float accumulator = 0.0;
+
+  // Randomize the lookup values to hide the fixed number of samples
+  float offset = 0.5 * random(vec3(12.9898, 78.233, 151.7182), 0.0);
+
+  // Gaussian normalization parameters
+  const float sigma = SUPPORT / 3.0;
+  const float a = -0.5 / (sigma * sigma);
+  const float w0 = 1.0 / (2.0 * 3.141592653589793 * sigma * sigma); // 2D normalization
+
+  for (float t = -SUPPORT; t <= SUPPORT; t++) {
+  for (float s = -SUPPORT; s <= SUPPORT; s++) {
+    vec2 percent = (vec2(s, t) + offset - 0.5) / SUPPORT;
+    vec2 delta = percent * heatmap.radiusPixels / texSize;
+    vec4 offsetColor = texture(source, texCoord + delta);
+
+    // Unpack float
+    float value = unpack(offsetColor.rgb);
+
+    // Gaussian
+    float weight = w0 * exp(a * (s * s + t * t));
+    
+    accumulator += value * weight;
+  }
+  }
+
+  // Apply domain
+  float f = (accumulator - heatmap.colorDomain[0]) / (heatmap.colorDomain[1] - heatmap.colorDomain[0]);
+
+  // Color map
+  vec4 color = vec4(0.0);
+  color.rgb = colorGradient(f);
+
+  color.a = smoothstep(0.0, 0.1, f);
+  color.a = pow(color.a, 1.0 / 2.2);
+  color.a *= heatmap.opacity;
+
+  return color;
+}
+`;
+
+const defaultColorRange: Color[] = [
+  [255, 255, 178],
+  [254, 217, 118],
+  [254, 178, 76],
+  [253, 141, 60],
+  [240, 59, 32],
+  [189, 0, 38]
+];
+
+export type HeatmapProps = {
+  /**
+   * Radius of the circle in pixels, to which the weight of an object is distributed.
+   *
+   * @default 30
+   */
+  radiusPixels?: number;
+  /**
+   * Controls how weight values are mapped to the `colorRange`, as an array of two numbers [`minValue`, `maxValue`].
+   *
+   * @default [0, 1]
+   */
+  colorDomain?: [number, number];
+  /**
+   * Specified as an array of colors [color1, color2, ...].
+   *
+   * @default `6-class YlOrRd` - [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6)
+   */
+  colorRange: Color[];
+  opacity: number;
+};
+
+export type HeatmapUniforms = {
+  radiusPixels?: number;
+  colorDomain?: [number, number];
+  color1?: [number, number, number];
+  color2?: [number, number, number];
+  color3?: [number, number, number];
+  color4?: [number, number, number];
+  color5?: [number, number, number];
+  color6?: [number, number, number];
+  opacity?: number;
+};
+
+export const heatmap: ShaderPass<HeatmapProps, HeatmapUniforms> = {
+  name: 'heatmap',
+  uniformPropTypes: {
+    radiusPixels: {value: 20, min: 0, softMax: 100},
+    colorDomain: {value: [0, 1]},
+    color1: {value: [0, 0, 0]},
+    color2: {value: [0, 0, 0]},
+    color3: {value: [0, 0, 0]},
+    color4: {value: [0, 0, 0]},
+    color5: {value: [0, 0, 0]},
+    color6: {value: [0, 0, 0]},
+    opacity: {value: 1, min: 0, max: 1}
+  },
+  uniformTypes: {
+    radiusPixels: 'f32',
+    colorDomain: 'vec2<f32>',
+    color1: 'vec3<f32>',
+    color2: 'vec3<f32>',
+    color3: 'vec3<f32>',
+    color4: 'vec3<f32>',
+    color5: 'vec3<f32>',
+    color6: 'vec3<f32>',
+    opacity: 'f32'
+  },
+  getUniforms: opts => {
+    const {
+      colorRange = defaultColorRange,
+      radiusPixels = 20,
+      colorDomain = [0, 1],
+      opacity = 1
+    } = opts as HeatmapProps;
+    const [color1, color2, color3, color4, color5, color6] = colorRange;
+    return {
+      color1,
+      color2,
+      color3,
+      color4,
+      color5,
+      color6,
+      radiusPixels,
+      colorDomain,
+      opacity
+    };
+  },
+  dependencies: [random],
+  fs,
+  passes: [{sampler: true}]
+};

package/src/layers/post-process-utils.ts

@@ -0,0 +1,180 @@
+import {Framebuffer, TextureProps} from '@luma.gl/core';
+import {
+  CompositeLayer,
+  Layer,
+  LayerContext,
+  LayerProps,
+  LayersList,
+  PostProcessEffect,
+  PostRenderOptions
+} from '@deck.gl/core';
+
+const TEXTURE_PROPS: TextureProps = {
+  format: 'rgba8unorm',
+  mipmaps: false,
+  sampler: {
+    minFilter: 'linear',
+    magFilter: 'linear',
+    addressModeU: 'clamp-to-edge',
+    addressModeV: 'clamp-to-edge'
+  }
+};
+
+interface IPostProcessLayer {
+  applyPostProcess: () => void;
+  enableRTT: Layer['draw'];
+  disableRTT: () => void;
+  props: LayerProps;
+}
+
+type Constructor<T> = (new (...args: any[]) => T) & {layerName: string};
+type DrawableCompositeLayer = CompositeLayer & {
+  renderLayers(): Layer<{}> | null | LayersList;
+};
+
+function getPostProcessLayer(layer: any): IPostProcessLayer {
+  while (layer.parent && !layer.applyPostProcess) {
+    layer = layer.parent;
+  }
+  return layer as unknown as IPostProcessLayer;
+}
+
+/**
+ * Dummy Layer that draws nothing, just calls back to root Layer
+ */
+class DrawCallbackLayer extends Layer {
+  static layerName = 'DrawCallbackLayer';
+
+  initializeState(this: DrawCallbackLayer): void {
+    this.id = `draw-callback-${getPostProcessLayer(this).props.id}`;
+  }
+
+  _drawLayer(this: DrawCallbackLayer) {
+    getPostProcessLayer(this).applyPostProcess();
+  }
+}
+
+/**
+ * Modifier that marks a layer for Render-to-Target rendering.
+ * Resulting layer must be used as a sublayer of a layer created
+ * with `PostProcessModifier`
+ */
+export function RTTModifier(BaseLayer) {
+  return class RTTLayer extends BaseLayer {
+    static layerName = `RTT-${BaseLayer.layerName}`;
+
+    draw(this: RTTLayer, opts: any) {
+      const {moduleParameters} = opts;
+      const {picking} = moduleParameters;
+      const postProcessLayer = getPostProcessLayer(this);
+
+      if (!picking.isActive) {
+        postProcessLayer.enableRTT(opts);
+      }
+
+      // Draw actual layer
+      super.draw(opts);
+
+      if (!picking.isActive) {
+        postProcessLayer.disableRTT();
+      }
+    }
+  };
+}
+
+/**
+ * Modifier that returns the a modified Layer, which applies a
+ * postprocess effect to all subLayers created using `RTTModifier`
+ */
+export function PostProcessModifier<T extends Constructor<DrawableCompositeLayer>>(
+  BaseLayer: T,
+  effect: any
+): T {
+  return class PostProcessLayer extends BaseLayer {
+    static layerName = `PostProcess${BaseLayer.layerName}`;
+
+    internalState: any;
+
+    initializeState(this: PostProcessLayer, context: LayerContext): void {
+      super.initializeState(context);
+
+      this._createTextures();
+      this.internalState.postProcess = new PostProcessEffect(effect, this.props);
+      this.internalState.postProcess.setup(context);
+    }
+
+    updateState(this: PostProcessLayer, params: any): void {
+      super.updateState(params);
+      this.internalState.postProcess.setProps(this.props);
+    }
+
+    renderLayers(): PostProcessLayer | null | LayersList {
+      let subLayers = super.renderLayers();
+      if (!subLayers) {
+        return null;
+      }
+      subLayers = Array.isArray(subLayers) ? subLayers : [subLayers];
+      return [...subLayers, new DrawCallbackLayer()];
+    }
+
+    _createTextures(this: PostProcessLayer) {
+      const {device} = this.context;
+      this.internalState.renderBuffers = [0, 1].map(i => {
+        return device.createFramebuffer({
+          id: `layer-fbo-${i}`,
+          colorAttachments: [device.createTexture(TEXTURE_PROPS)],
+          depthStencilAttachment: 'depth16unorm'
+        });
+      });
+    }
+
+    _resizeBuffers(this: PostProcessLayer, opts: any) {
+      // TODO we could likely render to a smaller buffer for better perf
+      const {moduleParameters} = opts;
+      const {viewport} = this.context;
+      const width = moduleParameters.devicePixelRatio * viewport.width;
+      const height = moduleParameters.devicePixelRatio * viewport.height;
+      this.internalState.renderBuffers.forEach((fbo: Framebuffer) => fbo.resize({width, height}));
+    }
+
+    enableRTT(this: PostProcessLayer, opts: any) {
+      this._resizeBuffers(opts);
+      this.internalState.originalRenderPass = this.context.renderPass;
+
+      const [framebuffer] = this.internalState.renderBuffers;
+
+      // Create new render pass for RTT
+      this.internalState.internalRenderPass = this.context.device.beginRenderPass({
+        framebuffer,
+        parameters: {viewport: [0, 0, framebuffer.width, framebuffer.height]},
+        // Only clear on first render
+        clearColor: this.internalState.renderInProgress ? false : [0, 0, 0, 0]
+      });
+      this.internalState.renderInProgress = true;
+      this.context.renderPass = this.internalState.internalRenderPass;
+    }
+
+    disableRTT(this: PostProcessLayer) {
+      // End render pass, and reinstate original
+      this.internalState.internalRenderPass.end();
+      this.context.renderPass = this.internalState.originalRenderPass;
+    }
+
+    applyPostProcess(this: PostProcessLayer) {
+      if (!this.internalState.renderInProgress) {
+        return;
+      }
+
+      // Apply post process effect
+      const [inputBuffer, swapBuffer] = this.internalState.renderBuffers;
+      const {framebuffer: target} = this.context.renderPass.props;
+      this.internalState.postProcess.postRender({
+        inputBuffer,
+        swapBuffer,
+        target
+      } as PostRenderOptions);
+
+      this.internalState.renderInProgress = false;
+    }
+  };
+}

package/src/layers/quadbin-heatmap-tile-layer.ts

@@ -0,0 +1,122 @@
+import {getResolution} from 'quadbin';
+
+import {Accessor, CompositeLayer, DefaultProps, Layer} from '@deck.gl/core';
+import {SolidPolygonLayer} from '@deck.gl/layers';
+
+import {HeatmapProps, heatmap} from './heatmap';
+import {RTTModifier, PostProcessModifier} from './post-process-utils';
+import QuadbinTileLayer, {QuadbinTileLayerProps} from './quadbin-tile-layer';
+
+// Modified polygon layer to draw offscreen and output value expected by heatmap
+class RTTSolidPolygonLayer extends RTTModifier(SolidPolygonLayer) {
+  static layerName = 'RTTSolidPolygonLayer';
+
+  getShaders(type) {
+    const shaders = super.getShaders(type);
+    shaders.inject = {
+      'vs:#decl': 'uniform float cellResolution;',
+      'vs:DECKGL_FILTER_COLOR': `
+  const vec3 SHIFT = vec3(1.0, 256.0, 256.0 * 256.0);
+  float value = 255.0 * dot(SHIFT, color.rgb);
+
+  // Keep "power" delivered to screen constant when tiles update
+  float relativeZoom = log2(project_uScale) - cellResolution + 3.5; // range 0-1
+  float relativeArea = pow(2.0, -2.0 * relativeZoom); // range 0.25-1
+  value *= relativeArea;
+
+  // Pack float into 3 channels to pass to heatmap shader
+  color = vec4(mod(vec3(value, floor(value / SHIFT.yz)), 256.0), 255.0) / 255.0;
+      `
+    };
+    return shaders;
+  }
+
+  draw(this, opts: any) {
+    const cell0 = this.props!.data[0];
+    const cellResolution = Number(getResolution(cell0.id));
+    for (const model of this.state.models) {
+      model.setUniforms({cellResolution});
+    }
+
+    super.draw(opts);
+  }
+}
+
+// Modify QuadbinTileLayer to apply heatmap post process effect
+const PostProcessQuadbinTileLayer = PostProcessModifier(QuadbinTileLayer, heatmap);
+
+function encodeWeight(w: number) {
+  return [w % 256, Math.floor(w / 256), Math.floor(w / (256 * 256))];
+}
+
+const defaultProps: DefaultProps<QuadbinHeatmapTileLayerProps> = {
+  ...QuadbinTileLayer.defaultProps,
+
+  getWeight: {type: 'accessor', value: 1}
+};
+
+/** All properties supported by QuadbinHeatmapTileLayer. */
+export type QuadbinHeatmapTileLayerProps<DataT = unknown> = _QuadbinHeatmapTileLayerProps<DataT> &
+  QuadbinTileLayerProps;
+
+/** Properties added by QuadbinHeatmapTileLayer. */
+type _QuadbinHeatmapTileLayerProps<DataT> = QuadbinTileLayerProps<DataT> &
+  HeatmapProps & {
+    /**
+     * The weight of each object.
+     *
+     * @default 1
+     */
+    getWeight?: Accessor<DataT, number>;
+  };
+
+class QuadbinHeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends CompositeLayer<
+  ExtraProps & Required<_QuadbinHeatmapTileLayerProps<DataT>>
+> {
+  static layerName = 'QuadbinHeatmapTileLayer';
+  static defaultProps = defaultProps;
+
+  renderLayers(): Layer {
+    const {getWeight, colorDomain, colorRange, radiusPixels, _subLayerProps} = this.props;
+
+    // Inject modified polygon layer as sublayer into TileLayer
+    const subLayerProps = {
+      ..._subLayerProps,
+      cell: {
+        ..._subLayerProps?.cell,
+        _subLayerProps: {
+          ..._subLayerProps?.cell?._subLayerProps,
+          fill: {
+            ..._subLayerProps?.cell?._subLayerProps?.fill,
+            type: RTTSolidPolygonLayer
+          }
+        }
+      }
+    };
+
+    const getFillColor =
+      typeof getWeight === 'function'
+        ? (d, info) => encodeWeight(getWeight(d, info))
+        : encodeWeight(getWeight);
+
+    return new PostProcessQuadbinTileLayer(
+      this.getSubLayerProps({
+        id: 'heatmap',
+        data: this.props.data,
+
+        getFillColor,
+
+        colorDomain,
+        colorRange,
+        radiusPixels,
+        _subLayerProps: subLayerProps,
+
+        updateTriggers: {
+          getPosition: this.props.updateTriggers.getWeight
+        }
+      })
+    );
+  }
+}
+
+export default QuadbinHeatmapTileLayer;