@deck.gl/aggregation-layers 9.0.0-beta.2 → 9.0.0-beta.4

package/dist/grid-aggregation-layer.js

@@ -0,0 +1,172 @@
+// 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 { GL } from '@luma.gl/constants';
+import { log } from '@deck.gl/core';
+import AggregationLayer from "./aggregation-layer.js";
+import GPUGridAggregator from "./utils/gpu-grid-aggregation/gpu-grid-aggregator.js";
+import BinSorter from "./utils/bin-sorter.js";
+import { pointToDensityGridDataCPU } from "./cpu-grid-layer/grid-aggregator.js";
+export default class GridAggregationLayer extends AggregationLayer {
+    static { this.layerName = 'GridAggregationLayer'; }
+    initializeAggregationLayer({ dimensions }) {
+        super.initializeAggregationLayer(dimensions);
+        this.setState({
+            // CPU aggregation results
+            layerData: {},
+            gpuGridAggregator: new GPUGridAggregator(this.context.device, {
+                id: `${this.id}-gpu-aggregator`
+            }),
+            cpuGridAggregator: pointToDensityGridDataCPU
+        });
+    }
+    updateState(opts) {
+        // get current attributes
+        super.updateState(opts);
+        this.updateAggregationState(opts);
+        const { aggregationDataDirty, aggregationWeightsDirty, gpuAggregation } = this.state;
+        if (this.getNumInstances() <= 0) {
+            return;
+        }
+        let aggregationDirty = false;
+        // CPU aggregation is two steps
+        // 1. Create bins (based on cellSize and position) 2. Aggregate weights for each bin
+        // For GPU aggregation both above steps are combined into one step
+        // step-1
+        if (aggregationDataDirty || (gpuAggregation && aggregationWeightsDirty)) {
+            this._updateAggregation(opts);
+            aggregationDirty = true;
+        }
+        // step-2 (Applicalbe for CPU aggregation only)
+        if (!gpuAggregation && (aggregationDataDirty || aggregationWeightsDirty)) {
+            this._updateWeightBins();
+            this._uploadAggregationResults();
+            aggregationDirty = true;
+        }
+        this.setState({ aggregationDirty });
+    }
+    finalizeState(context) {
+        const { count } = this.state.weights;
+        if (count && count.aggregationBuffer) {
+            count.aggregationBuffer.delete();
+        }
+        this.state.gpuGridAggregator?.delete();
+        super.finalizeState(context);
+    }
+    updateShaders(shaders) {
+        if (this.state.gpuAggregation) {
+            this.state.gpuGridAggregator.updateShaders(shaders);
+        }
+    }
+    // Methods that can be overriden by subclasses for customizations
+    updateAggregationState(opts) {
+        // Sublayers should implement this method.
+        log.assert(false);
+    }
+    allocateResources(numRow, numCol) {
+        if (this.state.numRow !== numRow || this.state.numCol !== numCol) {
+            const dataBytes = numCol * numRow * 4 * 4;
+            const { weights } = this.state;
+            for (const name in weights) {
+                const weight = weights[name];
+                if (weight.aggregationBuffer) {
+                    weight.aggregationBuffer.delete();
+                }
+                weight.aggregationBuffer = this.context.device.createBuffer({
+                    byteLength: dataBytes,
+                    // @ts-expect-error legacy
+                    accessor: {
+                        size: 4,
+                        type: GL.FLOAT,
+                        divisor: 1
+                    }
+                });
+            }
+        }
+    }
+    updateResults({ aggregationData, maxMinData, maxData, minData }) {
+        const { count } = this.state.weights;
+        if (count) {
+            count.aggregationData = aggregationData;
+            count.maxMinData = maxMinData;
+            count.maxData = maxData;
+            count.minData = minData;
+        }
+    }
+    // Private
+    _updateAggregation(opts) {
+        const { cpuGridAggregator, gpuGridAggregator, gridOffset, posOffset, translation = [0, 0], scaling = [0, 0, 0], boundingBox, projectPoints, gpuAggregation, numCol, numRow } = this.state;
+        const { props } = opts;
+        const { viewport } = this.context;
+        const attributes = this.getAttributes();
+        const vertexCount = this.getNumInstances();
+        if (!gpuAggregation) {
+            const result = cpuGridAggregator(props, {
+                gridOffset,
+                projectPoints,
+                attributes,
+                viewport,
+                posOffset,
+                boundingBox
+            });
+            this.setState({
+                layerData: result
+            });
+        }
+        else {
+            const { weights } = this.state;
+            gpuGridAggregator.run({
+                weights,
+                cellSize: [gridOffset.xOffset, gridOffset.yOffset],
+                numCol,
+                numRow,
+                translation,
+                scaling,
+                vertexCount,
+                projectPoints,
+                attributes,
+                moduleSettings: this.getModuleSettings()
+            });
+        }
+    }
+    _updateWeightBins() {
+        const { getValue } = this.state;
+        const sortedBins = new BinSorter(this.state.layerData.data || [], { getValue });
+        this.setState({ sortedBins });
+    }
+    _uploadAggregationResults() {
+        const { numCol, numRow } = this.state;
+        const { data } = this.state.layerData;
+        const { aggregatedBins, minValue, maxValue, totalCount } = this.state.sortedBins;
+        const ELEMENTCOUNT = 4;
+        const aggregationSize = numCol * numRow * ELEMENTCOUNT;
+        const aggregationData = new Float32Array(aggregationSize).fill(0);
+        for (const bin of aggregatedBins) {
+            const { lonIdx, latIdx } = data[bin.i];
+            const { value, counts } = bin;
+            const cellIndex = (lonIdx + latIdx * numCol) * ELEMENTCOUNT;
+            aggregationData[cellIndex] = value;
+            aggregationData[cellIndex + ELEMENTCOUNT - 1] = counts;
+        }
+        const maxMinData = new Float32Array([maxValue, 0, 0, minValue]);
+        const maxData = new Float32Array([maxValue, 0, 0, totalCount]);
+        const minData = new Float32Array([minValue, 0, 0, totalCount]);
+        this.updateResults({ aggregationData, maxMinData, maxData, minData });
+    }
+}

package/{typed → dist}/grid-layer/grid-layer.d.ts

@@ -1,6 +1,6 @@
 import { CompositeLayer, CompositeLayerProps, Layer, UpdateParameters, DefaultProps } from '@deck.gl/core';
-import { GPUGridLayerProps } from '../gpu-grid-layer/gpu-grid-layer';
-import { CPUGridLayerProps } from '../cpu-grid-layer/cpu-grid-layer';
+import { GPUGridLayerProps } from "../gpu-grid-layer/gpu-grid-layer.js";
+import { CPUGridLayerProps } from "../cpu-grid-layer/cpu-grid-layer.js";
 /** All properties supported by GridLayer. */
 export type GridLayerProps<DataT = unknown> = _GridLayerProps<DataT> & CompositeLayerProps;
 /** Properties added by GridLayer. */

package/dist/grid-layer/grid-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-layer.d.ts","sourceRoot":"","sources":["../../src/grid-layer/grid-layer.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,KAAK,EACL,gBAAgB,EAChB,YAAY,EACb,MAAM,eAAe,CAAC;AAEvB,OAAqB,EAAC,iBAAiB,EAAC,4CAAyC;AACjF,OAAqB,EAAC,iBAAiB,EAAC,4CAAyC;AAQjF,6CAA6C;AAC7C,MAAM,MAAM,cAAc,CAAC,KAAK,GAAG,OAAO,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,mBAAmB,CAAC;AAE3F,qCAAqC;AACrC,KAAK,eAAe,CAAC,KAAK,IAAI,iBAAiB,CAAC,KAAK,CAAC,GACpD,iBAAiB,CAAC,KAAK,CAAC,GAAG;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEJ,gIAAgI;AAChI,MAAM,CAAC,OAAO,OAAO,SAAS,CAAC,KAAK,GAAG,GAAG,EAAE,WAAW,SAAS,EAAE,GAAG,EAAE,CAAE,SAAQ,cAAc,CAC7F,WAAW,GAAG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAC/C;IACC,MAAM,CAAC,SAAS,SAAe;IAC/B,MAAM,CAAC,YAAY,wCAAgB;IAEnC,KAAK,EAAG,cAAc,CAAC,OAAO,CAAC,GAAG;QAChC,iBAAiB,EAAE,OAAO,CAAC;KAC5B,CAAC;IAEF,eAAe;IAMf,WAAW,CAAC,EAAC,KAAK,EAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAQ3C,YAAY,IAAI,KAAK;IAoBrB,oBAAoB,CAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC;CA8B/C"}

package/dist/grid-layer/grid-layer.js

@@ -0,0 +1,63 @@
+import { CompositeLayer } from '@deck.gl/core';
+import GPUGridAggregator from "../utils/gpu-grid-aggregation/gpu-grid-aggregator.js";
+import GPUGridLayer from "../gpu-grid-layer/gpu-grid-layer.js";
+import CPUGridLayer from "../cpu-grid-layer/cpu-grid-layer.js";
+const defaultProps = {
+    ...GPUGridLayer.defaultProps,
+    ...CPUGridLayer.defaultProps,
+    gpuAggregation: false
+};
+/** Aggregate data into a grid-based heatmap. The color and height of a cell are determined based on the objects it contains. */
+export default class GridLayer extends CompositeLayer {
+    static { this.layerName = 'GridLayer'; }
+    static { this.defaultProps = defaultProps; }
+    initializeState() {
+        this.state = {
+            useGPUAggregation: false // TODO(v9): Re-enable GPU aggregation.
+        };
+    }
+    updateState({ props }) {
+        this.setState({
+            // TODO(v9): Re-enable GPU aggregation.
+            // useGPUAggregation: this.canUseGPUAggregation(props)
+            useGPUAggregation: false
+        });
+    }
+    renderLayers() {
+        const { data, updateTriggers } = this.props;
+        const id = this.state.useGPUAggregation ? 'GPU' : 'CPU';
+        const LayerType = this.state.useGPUAggregation
+            ? this.getSubLayerClass('GPU', GPUGridLayer)
+            : this.getSubLayerClass('CPU', CPUGridLayer);
+        return new LayerType(this.props, this.getSubLayerProps({
+            id,
+            updateTriggers
+        }), {
+            data
+        });
+    }
+    // Private methods
+    canUseGPUAggregation(props) {
+        const { gpuAggregation, lowerPercentile, upperPercentile, getColorValue, getElevationValue, colorScaleType } = props;
+        if (!gpuAggregation) {
+            // cpu aggregation is requested
+            return false;
+        }
+        if (!GPUGridAggregator.isSupported(this.context.device)) {
+            return false;
+        }
+        if (lowerPercentile !== 0 || upperPercentile !== 100) {
+            // percentile calculations requires sorting not supported on GPU
+            return false;
+        }
+        if (getColorValue !== null || getElevationValue !== null) {
+            // accessor for custom color or elevation calculation is specified
+            return false;
+        }
+        if (colorScaleType === 'quantile' || colorScaleType === 'ordinal') {
+            // quantile and ordinal scales are not supported on GPU
+            return false;
+        }
+        return true;
+    }
+}

package/dist/heatmap-layer/heatmap-layer-utils.js

@@ -0,0 +1,63 @@
+export function getBounds(points) {
+    // Now build bounding box in world space (aligned to world coordiante system)
+    const x = points.map(p => p[0]);
+    const y = points.map(p => p[1]);
+    const xMin = Math.min.apply(null, x);
+    const xMax = Math.max.apply(null, x);
+    const yMin = Math.min.apply(null, y);
+    const yMax = Math.max.apply(null, y);
+    return [xMin, yMin, xMax, yMax];
+}
+// true if currentBounds contains targetBounds, false otherwise
+export function boundsContain(currentBounds, targetBounds) {
+    if (targetBounds[0] >= currentBounds[0] &&
+        targetBounds[2] <= currentBounds[2] &&
+        targetBounds[1] >= currentBounds[1] &&
+        targetBounds[3] <= currentBounds[3]) {
+        return true;
+    }
+    return false;
+}
+const scratchArray = new Float32Array(12);
+// For given rectangle bounds generates two triangles vertices that coverit completely
+export function packVertices(points, dimensions = 2) {
+    let index = 0;
+    for (const point of points) {
+        for (let i = 0; i < dimensions; i++) {
+            scratchArray[index++] = point[i] || 0;
+        }
+    }
+    return scratchArray;
+}
+// Expands boundingBox:[xMin, yMin, xMax, yMax] to match aspect ratio of given width and height
+export function scaleToAspectRatio(boundingBox, width, height) {
+    const [xMin, yMin, xMax, yMax] = boundingBox;
+    const currentWidth = xMax - xMin;
+    const currentHeight = yMax - yMin;
+    let newWidth = currentWidth;
+    let newHeight = currentHeight;
+    if (currentWidth / currentHeight < width / height) {
+        // expand bounding box width
+        newWidth = (width / height) * currentHeight;
+    }
+    else {
+        newHeight = (height / width) * currentWidth;
+    }
+    if (newWidth < width) {
+        newWidth = width;
+        newHeight = height;
+    }
+    const xCenter = (xMax + xMin) / 2;
+    const yCenter = (yMax + yMin) / 2;
+    return [
+        xCenter - newWidth / 2,
+        yCenter - newHeight / 2,
+        xCenter + newWidth / 2,
+        yCenter + newHeight / 2
+    ];
+}
+// Get texture coordiante of point inside a bounding box
+export function getTextureCoordinates(point, bounds) {
+    const [xMin, yMin, xMax, yMax] = bounds;
+    return [(point[0] - xMin) / (xMax - xMin), (point[1] - yMin) / (yMax - yMin)];
+}

package/{typed → dist}/heatmap-layer/heatmap-layer.d.ts

@@ -1,7 +1,7 @@
 import { Buffer, Texture, TextureFormat } from '@luma.gl/core';
 import { TextureTransform } from '@luma.gl/engine';
 import { Accessor, AccessorFunction, AttributeManager, ChangeFlags, Color, Layer, LayerContext, LayersList, Position, UpdateParameters, DefaultProps } from '@deck.gl/core';
-import AggregationLayer, { AggregationLayerProps } from '../aggregation-layer';
+import AggregationLayer, { AggregationLayerProps } from "../aggregation-layer.js";
 export type HeatmapLayerProps<DataT = unknown> = _HeatmapLayerProps<DataT> & AggregationLayerProps<DataT>;
 type _HeatmapLayerProps<DataT> = {
     /**

package/dist/heatmap-layer/heatmap-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap-layer.d.ts","sourceRoot":"","sources":["../../src/heatmap-layer/heatmap-layer.ts"],"names":[],"mappings":"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"}