@deck.gl/aggregation-layers 9.0.35 → 9.1.0-beta.1

package/dist/hexagon-layer/hexagon-layer.js

@@ -1,173 +1,357 @@
-// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-import { log } from '@deck.gl/core';
-import { ColumnLayer } from '@deck.gl/layers';
-import { defaultColorRange } from "../utils/color-utils.js";
-import { pointToHexbin } from "./hexagon-aggregator.js";
-import CPUAggregator from "../utils/cpu-aggregator.js";
-import AggregationLayer from "../aggregation-layer.js";
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { log, createIterable, project32, Viewport } from '@deck.gl/core';
+import { WebGLAggregator, CPUAggregator } from "../common/aggregator/index.js";
+import AggregationLayer from "../common/aggregation-layer.js";
+import { defaultColorRange } from "../common/utils/color-utils.js";
+import { AttributeWithScale } from "../common/utils/scale-utils.js";
+import { getBinIdRange } from "../common/utils/bounds-utils.js";
+import HexagonCellLayer from "./hexagon-cell-layer.js";
+import { pointToHexbin, HexbinVertices, getHexbinCentroid, pointToHexbinGLSL } from "./hexbin.js";
+import { binOptionsUniforms } from "./bin-options-uniforms.js";
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-function nop() { }
+function noop() { }
 const defaultProps = {
+    gpuAggregation: false,
     // color
     colorDomain: null,
     colorRange: defaultColorRange,
-    getColorValue: { type: 'accessor', value: null }, // default value is calcuated from `getColorWeight` and `colorAggregation`
+    getColorValue: { type: 'accessor', value: null }, // default value is calculated from `getColorWeight` and `colorAggregation`
     getColorWeight: { type: 'accessor', value: 1 },
     colorAggregation: 'SUM',
-    lowerPercentile: { type: 'number', value: 0, min: 0, max: 100 },
-    upperPercentile: { type: 'number', value: 100, min: 0, max: 100 },
+    lowerPercentile: { type: 'number', min: 0, max: 100, value: 0 },
+    upperPercentile: { type: 'number', min: 0, max: 100, value: 100 },
     colorScaleType: 'quantize',
-    onSetColorDomain: nop,
+    onSetColorDomain: noop,
     // elevation
     elevationDomain: null,
     elevationRange: [0, 1000],
-    getElevationValue: { type: 'accessor', value: null }, // default value is calcuated from `getElevationWeight` and `elevationAggregation`
+    getElevationValue: { type: 'accessor', value: null }, // default value is calculated from `getElevationWeight` and `elevationAggregation`
     getElevationWeight: { type: 'accessor', value: 1 },
     elevationAggregation: 'SUM',
-    elevationLowerPercentile: { type: 'number', value: 0, min: 0, max: 100 },
-    elevationUpperPercentile: { type: 'number', value: 100, min: 0, max: 100 },
     elevationScale: { type: 'number', min: 0, value: 1 },
+    elevationLowerPercentile: { type: 'number', min: 0, max: 100, value: 0 },
+    elevationUpperPercentile: { type: 'number', min: 0, max: 100, value: 100 },
     elevationScaleType: 'linear',
-    onSetElevationDomain: nop,
-    radius: { type: 'number', value: 1000, min: 1 },
+    onSetElevationDomain: noop,
+    // hexbin
+    radius: { type: 'number', min: 1, value: 1000 },
     coverage: { type: 'number', min: 0, max: 1, value: 1 },
-    extruded: false,
-    hexagonAggregator: pointToHexbin,
     getPosition: { type: 'accessor', value: (x) => x.position },
+    hexagonAggregator: { type: 'function', optional: true, value: null },
+    extruded: false,
     // Optional material for 'lighting' shader module
-    material: true,
-    // data filter
-    _filterData: { type: 'function', value: null, optional: true }
+    material: true
 };
-/** Aggregates data into a hexagon-based heatmap. The color and height of a hexagon are determined based on the objects it contains. */
+/** Aggregate data into a grid-based heatmap. The color and height of a cell are determined based on the objects it contains. */
 class HexagonLayer extends AggregationLayer {
-    initializeState() {
-        const cpuAggregator = new CPUAggregator({
-            getAggregator: props => props.hexagonAggregator,
-            getCellSize: props => props.radius
+    getAggregatorType() {
+        const { gpuAggregation, hexagonAggregator, getColorValue, getElevationValue } = this.props;
+        if (gpuAggregation && (hexagonAggregator || getColorValue || getElevationValue)) {
+            // If these features are desired by the app, the user should explicitly use CPU aggregation
+            log.warn('Features not supported by GPU aggregation, falling back to CPU')();
+            return 'cpu';
+        }
+        if (
+        // GPU aggregation is requested
+        gpuAggregation &&
+            // GPU aggregation is supported by the device
+            WebGLAggregator.isSupported(this.context.device)) {
+            return 'gpu';
+        }
+        return 'cpu';
+    }
+    createAggregator(type) {
+        if (type === 'cpu') {
+            const { hexagonAggregator, radius } = this.props;
+            return new CPUAggregator({
+                dimensions: 2,
+                getBin: {
+                    sources: ['positions'],
+                    getValue: ({ positions }, index, opts) => {
+                        if (hexagonAggregator) {
+                            return hexagonAggregator(positions, radius);
+                        }
+                        const viewport = this.state.aggregatorViewport;
+                        // project to common space
+                        const p = viewport.projectPosition(positions);
+                        const { radiusCommon, hexOriginCommon } = opts;
+                        return pointToHexbin([p[0] - hexOriginCommon[0], p[1] - hexOriginCommon[1]], radiusCommon);
+                    }
+                },
+                getValue: [
+                    { sources: ['colorWeights'], getValue: ({ colorWeights }) => colorWeights },
+                    { sources: ['elevationWeights'], getValue: ({ elevationWeights }) => elevationWeights }
+                ]
+            });
+        }
+        return new WebGLAggregator(this.context.device, {
+            dimensions: 2,
+            channelCount: 2,
+            bufferLayout: this.getAttributeManager().getBufferLayouts({ isInstanced: false }),
+            ...super.getShaders({
+                modules: [project32, binOptionsUniforms],
+                vs: /* glsl */ `
+  in vec3 positions;
+  in vec3 positions64Low;
+  in float colorWeights;
+  in float elevationWeights;
+  
+  ${pointToHexbinGLSL}
+
+  void getBin(out ivec2 binId) {
+    vec3 positionCommon = project_position(positions, positions64Low);
+    binId = pointToHexbin(positionCommon.xy, binOptions.radiusCommon);
+  }
+  void getValue(out vec2 value) {
+    value = vec2(colorWeights, elevationWeights);
+  }
+  `
+            })
         });
-        this.state = {
-            cpuAggregator,
-            aggregatorState: cpuAggregator.state,
-            vertices: null
-        };
+    }
+    initializeState() {
+        super.initializeState();
         const attributeManager = this.getAttributeManager();
         attributeManager.add({
-            positions: { size: 3, type: 'float64', accessor: 'getPosition' }
+            positions: {
+                size: 3,
+                accessor: 'getPosition',
+                type: 'float64',
+                fp64: this.use64bitPositions()
+            },
+            colorWeights: { size: 1, accessor: 'getColorWeight' },
+            elevationWeights: { size: 1, accessor: 'getElevationWeight' }
         });
-        // color and elevation attributes can't be added as attributes
-        // they are calculated using 'getValue' accessor that takes an array of pints.
     }
-    updateState(opts) {
-        super.updateState(opts);
-        if (opts.changeFlags.propsOrDataChanged) {
-            const aggregatorState = this.state.cpuAggregator.updateState(opts, {
-                viewport: this.context.viewport,
-                attributes: this.getAttributes()
+    updateState(params) {
+        const aggregatorChanged = super.updateState(params);
+        const { props, oldProps, changeFlags } = params;
+        const { aggregator } = this.state;
+        if ((changeFlags.dataChanged || !this.state.dataAsArray) &&
+            (props.getColorValue || props.getElevationValue)) {
+            // Convert data to array
+            this.state.dataAsArray = Array.from(createIterable(props.data).iterable);
+        }
+        if (aggregatorChanged ||
+            changeFlags.dataChanged ||
+            props.radius !== oldProps.radius ||
+            props.getColorValue !== oldProps.getColorValue ||
+            props.getElevationValue !== oldProps.getElevationValue ||
+            props.colorAggregation !== oldProps.colorAggregation ||
+            props.elevationAggregation !== oldProps.elevationAggregation) {
+            this._updateBinOptions();
+            const { radiusCommon, hexOriginCommon, binIdRange, dataAsArray } = this.state;
+            aggregator.setProps({
+                // @ts-expect-error only used by GPUAggregator
+                binIdRange,
+                pointCount: this.getNumInstances(),
+                operations: [props.colorAggregation, props.elevationAggregation],
+                binOptions: {
+                    radiusCommon,
+                    hexOriginCommon
+                },
+                onUpdate: this._onAggregationUpdate.bind(this)
             });
-            if (this.state.aggregatorState.layerData !== aggregatorState.layerData) {
-                // if user provided custom aggregator and returns hexagonVertices,
-                // Need to recalculate radius and angle based on vertices
-                // @ts-expect-error
-                const { hexagonVertices } = aggregatorState.layerData || {};
-                this.setState({
-                    vertices: hexagonVertices && this.convertLatLngToMeterOffset(hexagonVertices)
+            if (dataAsArray) {
+                const { getColorValue, getElevationValue } = this.props;
+                aggregator.setProps({
+                    // @ts-expect-error only used by CPUAggregator
+                    customOperations: [
+                        getColorValue &&
+                            ((indices) => getColorValue(indices.map(i => dataAsArray[i]), { indices, data: props.data })),
+                        getElevationValue &&
+                            ((indices) => getElevationValue(indices.map(i => dataAsArray[i]), { indices, data: props.data }))
+                    ]
                 });
             }
-            this.setState({
-                // make a copy of the internal state of cpuAggregator for testing
-                aggregatorState
-            });
         }
+        if (changeFlags.updateTriggersChanged && changeFlags.updateTriggersChanged.getColorValue) {
+            aggregator.setNeedsUpdate(0);
+        }
+        if (changeFlags.updateTriggersChanged && changeFlags.updateTriggersChanged.getElevationValue) {
+            aggregator.setNeedsUpdate(1);
+        }
+        return aggregatorChanged;
     }
-    convertLatLngToMeterOffset(hexagonVertices) {
-        const { viewport } = this.context;
-        if (Array.isArray(hexagonVertices) && hexagonVertices.length === 6) {
-            // get centroid of hexagons
-            const vertex0 = hexagonVertices[0];
-            const vertex3 = hexagonVertices[3];
-            const centroid = [(vertex0[0] + vertex3[0]) / 2, (vertex0[1] + vertex3[1]) / 2];
-            const centroidFlat = viewport.projectFlat(centroid);
-            const { metersPerUnit } = viewport.getDistanceScales(centroid);
-            // offset all points by centroid to meter offset
-            const vertices = hexagonVertices.map(vt => {
-                const vtFlat = viewport.projectFlat(vt);
-                return [
-                    (vtFlat[0] - centroidFlat[0]) * metersPerUnit[0],
-                    (vtFlat[1] - centroidFlat[1]) * metersPerUnit[1]
-                ];
+    _updateBinOptions() {
+        const bounds = this.getBounds();
+        let radiusCommon = 1;
+        let hexOriginCommon = [0, 0];
+        let binIdRange = [
+            [0, 1],
+            [0, 1]
+        ];
+        let viewport = this.context.viewport;
+        if (bounds && Number.isFinite(bounds[0][0])) {
+            let centroid = [(bounds[0][0] + bounds[1][0]) / 2, (bounds[0][1] + bounds[1][1]) / 2];
+            const { radius } = this.props;
+            const { unitsPerMeter } = viewport.getDistanceScales(centroid);
+            radiusCommon = unitsPerMeter[0] * radius;
+            // Use the centroid of the hex at the center of the data
+            // This offsets the common space without changing the bins
+            const centerHex = pointToHexbin(viewport.projectFlat(centroid), radiusCommon);
+            centroid = viewport.unprojectFlat(getHexbinCentroid(centerHex, radiusCommon));
+            const ViewportType = viewport.constructor;
+            // We construct a viewport for the GPU aggregator's project module
+            // This viewport is determined by data
+            // removes arbitrary precision variance that depends on initial view state
+            viewport = viewport.isGeospatial
+                ? new ViewportType({ longitude: centroid[0], latitude: centroid[1], zoom: 12 })
+                : new Viewport({ position: [centroid[0], centroid[1], 0], zoom: 12 });
+            hexOriginCommon = [Math.fround(viewport.center[0]), Math.fround(viewport.center[1])];
+            binIdRange = getBinIdRange({
+                dataBounds: bounds,
+                getBinId: (p) => {
+                    const positionCommon = viewport.projectFlat(p);
+                    positionCommon[0] -= hexOriginCommon[0];
+                    positionCommon[1] -= hexOriginCommon[1];
+                    return pointToHexbin(positionCommon, radiusCommon);
+                },
+                padding: 1
             });
-            return vertices;
         }
-        log.error('HexagonLayer: hexagonVertices needs to be an array of 6 points')();
-        return null;
+        this.setState({ radiusCommon, hexOriginCommon, binIdRange, aggregatorViewport: viewport });
     }
-    getPickingInfo({ info }) {
-        return this.state.cpuAggregator.getPickingInfo({ info });
-    }
-    // create a method for testing
-    _onGetSublayerColor(cell) {
-        return this.state.cpuAggregator.getAccessor('fillColor')(cell);
+    draw(opts) {
+        // Replaces render time viewport with our own
+        if (opts.shaderModuleProps.project) {
+            opts.shaderModuleProps.project.viewport = this.state.aggregatorViewport;
+        }
+        super.draw(opts);
     }
-    // create a method for testing
-    _onGetSublayerElevation(cell) {
-        return this.state.cpuAggregator.getAccessor('elevation')(cell);
+    _onAggregationUpdate({ channel }) {
+        const props = this.getCurrentLayer().props;
+        const { aggregator } = this.state;
+        if (channel === 0) {
+            const result = aggregator.getResult(0);
+            this.setState({
+                colors: new AttributeWithScale(result, aggregator.binCount)
+            });
+            props.onSetColorDomain(aggregator.getResultDomain(0));
+        }
+        else if (channel === 1) {
+            const result = aggregator.getResult(1);
+            this.setState({
+                elevations: new AttributeWithScale(result, aggregator.binCount)
+            });
+            props.onSetElevationDomain(aggregator.getResultDomain(1));
+        }
     }
-    _getSublayerUpdateTriggers() {
-        return this.state.cpuAggregator.getUpdateTriggers(this.props);
+    onAttributeChange(id) {
+        const { aggregator } = this.state;
+        switch (id) {
+            case 'positions':
+                aggregator.setNeedsUpdate();
+                this._updateBinOptions();
+                const { radiusCommon, hexOriginCommon, binIdRange } = this.state;
+                aggregator.setProps({
+                    // @ts-expect-error only used by GPUAggregator
+                    binIdRange,
+                    binOptions: {
+                        radiusCommon,
+                        hexOriginCommon
+                    }
+                });
+                break;
+            case 'colorWeights':
+                aggregator.setNeedsUpdate(0);
+                break;
+            case 'elevationWeights':
+                aggregator.setNeedsUpdate(1);
+                break;
+            default:
+            // This should not happen
+        }
     }
     renderLayers() {
-        const { elevationScale, extruded, coverage, material, transitions } = this.props;
-        const { aggregatorState, vertices } = this.state;
-        const SubLayerClass = this.getSubLayerClass('hexagon-cell', ColumnLayer);
-        const updateTriggers = this._getSublayerUpdateTriggers();
-        const geometry = vertices
-            ? { vertices, radius: 1 }
-            : {
-                // default geometry
-                // @ts-expect-error TODO - undefined property?
-                radius: aggregatorState.layerData.radiusCommon || 1,
-                radiusUnits: 'common',
-                angle: 90
-            };
-        return new SubLayerClass({
-            ...geometry,
+        const { aggregator, radiusCommon, hexOriginCommon } = this.state;
+        const { elevationScale, colorRange, elevationRange, extruded, coverage, material, transitions, colorScaleType, lowerPercentile, upperPercentile, colorDomain, elevationScaleType, elevationLowerPercentile, elevationUpperPercentile, elevationDomain } = this.props;
+        const CellLayerClass = this.getSubLayerClass('cells', HexagonCellLayer);
+        const binAttribute = aggregator.getBins();
+        const colors = this.state.colors?.update({
+            scaleType: colorScaleType,
+            lowerPercentile,
+            upperPercentile
+        });
+        const elevations = this.state.elevations?.update({
+            scaleType: elevationScaleType,
+            lowerPercentile: elevationLowerPercentile,
+            upperPercentile: elevationUpperPercentile
+        });
+        if (!colors || !elevations) {
+            return null;
+        }
+        return new CellLayerClass(this.getSubLayerProps({
+            id: 'cells'
+        }), {
+            data: {
+                length: aggregator.binCount,
+                attributes: {
+                    getBin: binAttribute,
+                    getColorValue: colors.attribute,
+                    getElevationValue: elevations.attribute
+                }
+            },
+            // Data has changed shallowly, but we likely don't need to update the attributes
+            dataComparator: (data, oldData) => data.length === oldData.length,
+            updateTriggers: {
+                getBin: [binAttribute],
+                getColorValue: [colors.attribute],
+                getElevationValue: [elevations.attribute]
+            },
             diskResolution: 6,
+            vertices: HexbinVertices,
+            radius: radiusCommon,
+            hexOriginCommon,
             elevationScale,
+            colorRange,
+            colorScaleType,
+            elevationRange,
             extruded,
             coverage,
             material,
-            getFillColor: this._onGetSublayerColor.bind(this),
-            getElevation: this._onGetSublayerElevation.bind(this),
+            colorDomain: colors.domain || colorDomain || aggregator.getResultDomain(0),
+            elevationDomain: elevations.domain || elevationDomain || aggregator.getResultDomain(1),
+            colorCutoff: colors.cutoff,
+            elevationCutoff: elevations.cutoff,
             transitions: transitions && {
                 getFillColor: transitions.getColorValue || transitions.getColorWeight,
                 getElevation: transitions.getElevationValue || transitions.getElevationWeight
-            }
-        }, this.getSubLayerProps({
-            id: 'hexagon-cell',
-            updateTriggers
-        }), {
-            data: aggregatorState.layerData.data
+            },
+            // Extensions are already handled by the GPUAggregator, do not pass it down
+            extensions: []
         });
     }
+    getPickingInfo(params) {
+        const info = params.info;
+        const { index } = info;
+        if (index >= 0) {
+            const bin = this.state.aggregator.getBin(index);
+            let object;
+            if (bin) {
+                const centroidCommon = getHexbinCentroid(bin.id, this.state.radiusCommon);
+                const centroid = this.context.viewport.unprojectFlat(centroidCommon);
+                object = {
+                    col: bin.id[0],
+                    row: bin.id[1],
+                    position: centroid,
+                    colorValue: bin.value[0],
+                    elevationValue: bin.value[1],
+                    count: bin.count
+                };
+                if (bin.pointIndices) {
+                    object.pointIndices = bin.pointIndices;
+                    object.points = Array.isArray(this.props.data)
+                        ? bin.pointIndices.map(i => this.props.data[i])
+                        : [];
+                }
+            }
+            info.object = object;
+        }
+        return info;
+    }
 }
 HexagonLayer.layerName = 'HexagonLayer';
 HexagonLayer.defaultProps = defaultProps;

package/dist/hexagon-layer/hexbin.d.ts

@@ -0,0 +1,17 @@
+type HexBin = [i: number, j: number];
+type Point = [x: number, y: number];
+export declare const HexbinVertices: number[][];
+/**
+ * Adapted from d3-hexbin
+ * Copyright Mike Bostock, 2012-2016
+   All rights reserved.
+ * https://github.com/d3/d3-hexbin/blob/master/src/hexbin.js
+ *
+ * Returns the hexbin that a point (x,y) falls into
+ */
+export declare function pointToHexbin([px, py]: Point, radius: number): HexBin;
+export declare const pointToHexbinGLSL: string;
+export declare function getHexbinCentroid([i, j]: HexBin, radius: number): Point;
+export declare const getHexbinCentroidGLSL: string;
+export {};
+//# sourceMappingURL=hexbin.d.ts.map

package/dist/hexagon-layer/hexbin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hexbin.d.ts","sourceRoot":"","sources":["../../src/hexagon-layer/hexbin.ts"],"names":[],"mappings":"AAQA,KAAK,MAAM,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;AACrC,KAAK,KAAK,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;AAEpC,eAAO,MAAM,cAAc,YAGzB,CAAC;AAEH;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAiBrE;AAED,eAAO,MAAM,iBAAiB,QAsB7B,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,KAAK,CAEvE;AAED,eAAO,MAAM,qBAAqB,QAOjC,CAAC"}

package/dist/hexagon-layer/hexbin.js

@@ -0,0 +1,69 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+const THIRD_PI = Math.PI / 3;
+const DIST_X = 2 * Math.sin(THIRD_PI);
+const DIST_Y = 1.5;
+export const HexbinVertices = Array.from({ length: 6 }, (_, i) => {
+    const angle = i * THIRD_PI;
+    return [Math.sin(angle), -Math.cos(angle)];
+});
+/**
+ * Adapted from d3-hexbin
+ * Copyright Mike Bostock, 2012-2016
+   All rights reserved.
+ * https://github.com/d3/d3-hexbin/blob/master/src/hexbin.js
+ *
+ * Returns the hexbin that a point (x,y) falls into
+ */
+export function pointToHexbin([px, py], radius) {
+    let pj = Math.round((py = py / radius / DIST_Y));
+    let pi = Math.round((px = px / radius / DIST_X - (pj & 1) / 2));
+    const py1 = py - pj;
+    if (Math.abs(py1) * 3 > 1) {
+        const px1 = px - pi;
+        const pi2 = pi + (px < pi ? -1 : 1) / 2;
+        const pj2 = pj + (py < pj ? -1 : 1);
+        const px2 = px - pi2;
+        const py2 = py - pj2;
+        if (px1 * px1 + py1 * py1 > px2 * px2 + py2 * py2) {
+            pi = pi2 + (pj & 1 ? 1 : -1) / 2;
+            pj = pj2;
+        }
+    }
+    return [pi, pj];
+}
+export const pointToHexbinGLSL = /* glsl */ `
+const vec2 DIST = vec2(${DIST_X}, ${DIST_Y});
+
+ivec2 pointToHexbin(vec2 p, float radius) {
+  p /= radius * DIST;
+  float pj = round(p.y);
+  float pjm2 = mod(pj, 2.0);
+  p.x -= pjm2 * 0.5;
+  float pi = round(p.x);
+  vec2 d1 = p - vec2(pi, pj);
+
+  if (abs(d1.y) * 3. > 1.) {
+    vec2 v2 = step(0.0, d1) - 0.5;
+    v2.y *= 2.0;
+    vec2 d2 = d1 - v2;
+    if (dot(d1, d1) > dot(d2, d2)) {
+      pi += v2.x + pjm2 - 0.5;
+      pj += v2.y;
+    }
+  }
+  return ivec2(pi, pj);
+}
+`;
+export function getHexbinCentroid([i, j], radius) {
+    return [(i + (j & 1) / 2) * radius * DIST_X, j * radius * DIST_Y];
+}
+export const getHexbinCentroidGLSL = `
+const vec2 DIST = vec2(${DIST_X}, ${DIST_Y});
+
+vec2 hexbinCentroid(vec2 binId, float radius) {
+  binId.x += fract(binId.y * 0.5);
+  return binId * DIST * radius;
+}
+`;