@deck.gl/carto 9.2.0-alpha.2 → 9.2.0-beta.1

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.2.0-alpha.2",
+  "version": "9.2.0-beta.1",
   "publishConfig": {
     "access": "public"
   },
@@ -49,8 +49,8 @@
     "@loaders.gl/mvt": "^4.2.0",
     "@loaders.gl/schema": "^4.2.0",
     "@loaders.gl/tiles": "^4.2.0",
-    "@luma.gl/core": "^9.1.9",
-    "@luma.gl/shadertools": "^9.1.9",
+    "@luma.gl/core": "^9.2.0-alpha.5",
+    "@luma.gl/shadertools": "^9.2.0-alpha.5",
     "@math.gl/web-mercator": "^4.1.0",
     "@types/d3-array": "^3.0.2",
     "@types/d3-color": "^1.4.2",
@@ -73,7 +73,7 @@
     "@deck.gl/geo-layers": "^9.1.0",
     "@deck.gl/layers": "^9.1.0",
     "@loaders.gl/core": "^4.2.0",
-    "@luma.gl/core": "^9.1.9"
+    "@luma.gl/core": "^9.2.0-alpha.5"
   },
-  "gitHead": "f9ca91bb15011ff5552ca8966b4207ada03a08fc"
+  "gitHead": "84407defece157d45954f66cf191cca3c596ee99"
 }

package/src/api/parse-map.ts

@@ -92,7 +92,7 @@ function createParametersProp(layerBlending: string, parameters: ColorParameters
     parameters.blendColorOperation = parameters.blendAlphaOperation = 'add';
   } else if (layerBlending === 'subtractive') {
     parameters.blendColorSrcFactor = 'one';
-    parameters.blendColorDstFactor = 'one-minus-dst-color';
+    parameters.blendColorDstFactor = 'one-minus-dst';
     parameters.blendAlphaSrcFactor = 'src-alpha';
     parameters.blendAlphaDstFactor = 'dst-alpha';
     parameters.blendColorOperation = 'subtract';

package/src/layers/h3-tileset-2d.ts

@@ -19,11 +19,19 @@ export type H3TileIndex = {i: string};
 
 const MAX_LATITUDE = 85.051128;
 
-// `polygonToCells()` fills based on hexagon center, this function will
-// pad the bounds such that all cells that overlap the bounds will be included
+/**
+ * `polygonToCells()` fills based on hexagon center, this function will
+ * pad the bounds such that all cells that overlap the bounds will be included.
+ *
+ * @param bbox - The bounding box to pad.
+ * @param resolution - The resolution of the hexagons.
+ * @param scale - The scale of the buffer. 1 is to pad by the max edge length of the tile cell.
+ * @returns The padded bounding box.
+ */
 function padBoundingBox(
   {west, north, east, south}: GeoBoundingBox,
-  resolution: number
+  resolution: number,
+  scale: number = 1.0
 ): GeoBoundingBox {
   const corners = [
     [north, east],
@@ -35,7 +43,7 @@ function padBoundingBox(
   const cornerEdgeLengths = cornerCells.map(
     c => (Math.max(...originToDirectedEdges(c).map(e => edgeLength(e, UNITS.rads))) * 180) / Math.PI
   );
-  const bufferLat = Math.max(...cornerEdgeLengths);
+  const bufferLat = Math.max(...cornerEdgeLengths) * scale;
   const bufferLon = Math.min(180, bufferLat / Math.cos((((north + south) / 2) * Math.PI) / 180));
 
   return {
@@ -84,7 +92,12 @@ function tileToBoundingBox(index: string): GeoBoundingBox {
   const south = Math.min(...latitudes);
   const east = Math.max(...longitudes);
   const north = Math.max(...latitudes);
-  return {west, south, east, north};
+  const bbox = {west, south, east, north};
+
+  // H3 child cells extend beyond their parent's boundary forming a "snowflake"
+  // fractal pattern. The required buffer is approximately 10% of the
+  // edge length of the tile cell, add a bit more to be safe.
+  return padBoundingBox(bbox, getResolution(index), 0.12);
 }
 
 // Resolution conversion function. Takes a WebMercatorViewport and returns

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

@@ -6,12 +6,14 @@
 
 import type {ShaderModule} from '@luma.gl/shadertools';
 import {getResolution} from 'quadbin';
+import {getResolution as getH3Resolution, getNumCells} from 'h3-js';
 
 import {
   Accessor,
   Color,
   CompositeLayer,
   CompositeLayerProps,
+  _deepEqual as deepEqual,
   DefaultProps,
   Layer,
   UpdateParameters
@@ -21,6 +23,7 @@ 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';
+import H3TileLayer, {H3TileLayerProps} from './h3-tile-layer';
 import {TilejsonPropType} from './utils';
 import {TilejsonResult} from '@carto/api-client';
 import {_Tile2DHeader as Tile2DHeader} from '@deck.gl/geo-layers';
@@ -37,7 +40,9 @@ const defaultColorRange: Color[] = [
 
 const TEXTURE_PROPS: TextureProps = {
   format: 'rgba8unorm',
-  mipmaps: false,
+  dimension: '2d',
+  width: 1,
+  height: 1,
   sampler: {
     minFilter: 'linear',
     magFilter: 'linear',
@@ -46,13 +51,23 @@ const TEXTURE_PROPS: TextureProps = {
   }
 };
 /**
- * Computes the unit density (inverse of cell area)
+ * Computes the unit density for Quadbin cells.
+ * The unit density is the number of cells needed to cover the Earth's surface at a given resolution. It is inversely proportional to the cell area.
  */
-function unitDensityForCell(cell: bigint) {
+function unitDensityForQuadbinCell(cell: bigint) {
   const cellResolution = Number(getResolution(cell));
   return Math.pow(4.0, cellResolution);
 }
 
+/**
+ * Computes the unit density for H3 cells.
+ * The unit density is the number of cells needed to cover the Earth's surface at a given resolution. It is inversely proportional to the cell area.
+ */
+function unitDensityForH3Cell(cellId: string) {
+  const cellResolution = Number(getH3Resolution(cellId));
+  return getNumCells(cellResolution);
+}
+
 /**
  * Converts a colorRange array to a flat array with 4 components per color
  */
@@ -118,12 +133,15 @@ class RTTSolidPolygonLayer extends RTTModifier(SolidPolygonLayer) {
 
   draw(this, opts: any) {
     const cell = this.props!.data[0];
-    const maxDensity = this.props.elevationScale;
-    const densityProps: DensityProps = {
-      factor: unitDensityForCell(cell.id) / maxDensity
-    };
-    for (const model of this.state.models) {
-      model.shaderInputs.setProps({density: densityProps});
+    if (cell) {
+      const maxDensity = this.props.elevationScale;
+      const {scheme} = this.parent.parent.parent.parent.parent.state;
+      const unitDensity =
+        scheme === 'h3' ? unitDensityForH3Cell(cell.id) : unitDensityForQuadbinCell(cell.id);
+      const densityProps: DensityProps = {factor: unitDensity / maxDensity};
+      for (const model of this.state.models) {
+        model.shaderInputs.setProps({density: densityProps});
+      }
     }
 
     super.draw(opts);
@@ -133,6 +151,9 @@ class RTTSolidPolygonLayer extends RTTModifier(SolidPolygonLayer) {
 // Modify QuadbinTileLayer to apply heatmap post process effect
 const PostProcessQuadbinTileLayer = PostProcessModifier(QuadbinTileLayer, heatmap);
 
+// Modify H3TileLayer to apply heatmap post process effect
+const PostProcessH3TileLayer = PostProcessModifier(H3TileLayer, heatmap);
+
 const defaultProps: DefaultProps<HeatmapTileLayerProps> = {
   data: TilejsonPropType,
   getWeight: {type: 'accessor', value: 1},
@@ -150,7 +171,7 @@ export type HeatmapTileLayerProps<DataT = unknown> = _HeatmapTileLayerProps<Data
   };
 
 /** Properties added by HeatmapTileLayer. */
-type _HeatmapTileLayerProps<DataT> = QuadbinTileLayerProps<DataT> &
+type _HeatmapTileLayerProps<DataT> = (QuadbinTileLayerProps<DataT> | H3TileLayerProps<DataT>) &
   HeatmapProps & {
     /**
      * Specified as an array of colors [color1, color2, ...].
@@ -179,12 +200,14 @@ class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends Composit
   state!: {
     colorTexture?: Texture;
     isLoaded: boolean;
+    scheme: string | null;
     tiles: Set<Tile2DHeader>;
     viewportChanged?: boolean;
   };
   initializeState() {
     this.state = {
       isLoaded: false,
+      scheme: null,
       tiles: new Set(),
       viewportChanged: false
     };
@@ -199,9 +222,15 @@ class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends Composit
   updateState(opts: UpdateParameters<this>) {
     const {props, oldProps} = opts;
     super.updateState(opts);
-    if (props.colorRange !== oldProps.colorRange) {
+    if (!deepEqual(props.colorRange, oldProps.colorRange, 2)) {
       this._updateColorTexture(opts);
     }
+
+    const scheme = props.data && 'scheme' in props.data ? props.data.scheme : null;
+    if (this.state.scheme !== scheme) {
+      this.setState({scheme});
+      this.state.tiles.clear();
+    }
   }
 
   renderLayers(): Layer {
@@ -220,15 +249,18 @@ class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends Composit
       ...tileLayerProps
     } = this.props;
 
+    const isH3 = this.state.scheme === 'h3';
+
+    const cellLayerName = isH3 ? 'hexagon-cell-hifi' : 'cell';
     // Inject modified polygon layer as sublayer into TileLayer
     const subLayerProps = {
       ..._subLayerProps,
-      cell: {
-        ..._subLayerProps?.cell,
+      [cellLayerName]: {
+        ..._subLayerProps?.[cellLayerName],
         _subLayerProps: {
-          ..._subLayerProps?.cell?._subLayerProps,
+          ..._subLayerProps?.[cellLayerName]?._subLayerProps,
           fill: {
-            ..._subLayerProps?.cell?._subLayerProps?.fill,
+            ..._subLayerProps?.[cellLayerName]?._subLayerProps?.fill,
             type: RTTSolidPolygonLayer
           }
         }
@@ -246,21 +278,37 @@ class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends Composit
 
     for (const tile of tiles) {
       const cell = tile.content[0];
-      const unitDensity = unitDensityForCell(cell.id);
+      const unitDensity = isH3 ? unitDensityForH3Cell(cell.id) : unitDensityForQuadbinCell(cell.id);
       maxDensity = Math.max(tile.userData!.maxWeight * unitDensity, maxDensity);
       tileZ = Math.max(tile.zoom, tileZ);
     }
 
-    // Between zoom levels the max density will change, but it isn't possible to know by what factor. Uniform data distributions lead to a factor of 4, while very localized data gives 1. As a heurstic estimate with a value inbetween (2) to make the transitions less obvious.
-    const overzoom = this.context.viewport.zoom - tileZ;
-    const estimatedMaxDensity = maxDensity * Math.pow(2, overzoom);
+    // Between zoom levels the max density will change, but it isn't possible to know by what factor.
+    // As a heuristic, an estimatedGrowthFactor makes the transitions less obvious.
+    // For quadbin, uniform data distributions lead to an estimatedGrowthFactor of 4, while very localized data gives 1.
+    // For H3 the same logic applies but the aperture is 7, rather than 4, so a slightly higher estimatedGrowthFactor is used.
+    let overzoom: number;
+    let estimatedGrowthFactor: number;
+    if (isH3) {
+      // For H3, we need to account for the viewport zoom to H3 resolution mapping (see getHexagonResolution())
+      overzoom = (2 / 3) * this.context.viewport.zoom - tileZ - 2.25;
+      estimatedGrowthFactor = 2.2;
+    } else {
+      overzoom = this.context.viewport.zoom - tileZ;
+      estimatedGrowthFactor = 2;
+    }
 
-    maxDensity = estimatedMaxDensity;
+    maxDensity = maxDensity * Math.pow(estimatedGrowthFactor, overzoom);
     if (typeof onMaxDensityChange === 'function') {
       onMaxDensityChange(maxDensity);
     }
-    return new PostProcessQuadbinTileLayer(
-      tileLayerProps as Omit<QuadbinTileLayerProps, 'data'>,
+    const PostProcessTileLayer = isH3 ? PostProcessH3TileLayer : PostProcessQuadbinTileLayer;
+    const layerProps = isH3
+      ? (tileLayerProps as Omit<H3TileLayerProps, 'data'>)
+      : (tileLayerProps as Omit<QuadbinTileLayerProps, 'data'>);
+
+    return new PostProcessTileLayer(
+      layerProps,
       this.getSubLayerProps({
         id: 'heatmap',
         data,
@@ -328,19 +376,14 @@ class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends Composit
     let {colorTexture} = this.state;
     const colors = colorRangeToFlatArray(colorRange);
 
-    if (colorTexture && colorTexture?.width === colorRange.length) {
-      // TODO(v9): Unclear whether `setSubImageData` is a public API, or what to use if not.
-      (colorTexture as any).setTexture2DData({data: colors});
-    } else {
-      colorTexture?.destroy();
-      // @ts-ignore TODO v9.1
-      colorTexture = this.context.device.createTexture({
-        ...TEXTURE_PROPS,
-        data: colors,
-        width: colorRange.length,
-        height: 1
-      });
-    }
+    colorTexture?.destroy();
+    colorTexture = this.context.device.createTexture({
+      ...TEXTURE_PROPS,
+      data: colors,
+      width: colorRange.length,
+      height: 1
+    });
+
     this.setState({colorTexture});
   }
 }

package/src/layers/heatmap.ts

@@ -89,6 +89,9 @@ vec4 heatmap_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
   color.a = pow(color.a, 1.0 / 2.2);
   color.a *= heatmap.opacity;
 
+  // Use premultiplied alpha for compatibility with blending in ScreenPass
+  color.rgb *= color.a;
+
   return color;
 }
 `;

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

@@ -17,7 +17,8 @@ import {
 
 const TEXTURE_PROPS: TextureProps = {
   format: 'rgba8unorm',
-  mipmaps: false,
+  width: 1,
+  height: 1,
   sampler: {
     minFilter: 'linear',
     magFilter: 'linear',

package/src/layers/raster-layer.ts

@@ -145,18 +145,7 @@ export default class RasterLayer<DataT = any, ExtraProps = {}> extends Composite
         offset,
         lineWidthScale, // Re-use widthScale prop to pass cell scale,
         highlightedObjectIndex,
-        highlightColor,
-
-        // RTT requires blending otherwise opacity < 1 blends with black
-        // render target
-        parameters: {
-          blendColorSrcFactor: 'one',
-          blendAlphaSrcFactor: 'one',
-          blendColorDstFactor: 'zero',
-          blendAlphaDstFactor: 'zero',
-          blendColorOperation: 'add',
-          blendAlphaOperation: 'add'
-        }
+        highlightColor
       }
     );
   }