@deck.gl/aggregation-layers 8.8.7 → 8.9.0-alpha.2

package/typed/gpu-grid-layer/gpu-grid-layer.js

@@ -0,0 +1,289 @@
+// 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 { Buffer } from '@luma.gl/core';
+import GL from '@luma.gl/constants';
+import { log } from '@deck.gl/core';
+import GPUGridAggregator from '../utils/gpu-grid-aggregation/gpu-grid-aggregator';
+import { AGGREGATION_OPERATION } from '../utils/aggregation-operation-utils';
+import { defaultColorRange, colorRangeToFlatArray } from '../utils/color-utils';
+import GPUGridCellLayer from './gpu-grid-cell-layer';
+import { pointToDensityGridDataCPU } from './../cpu-grid-layer/grid-aggregator';
+import GridAggregationLayer from '../grid-aggregation-layer';
+import { getBoundingBox, getGridParams } from '../utils/grid-aggregation-utils';
+const defaultProps = {
+    // color
+    colorDomain: null,
+    colorRange: defaultColorRange,
+    getColorWeight: { type: 'accessor', value: 1 },
+    colorAggregation: 'SUM',
+    // elevation
+    elevationDomain: null,
+    elevationRange: [0, 1000],
+    getElevationWeight: { type: 'accessor', value: 1 },
+    elevationAggregation: 'SUM',
+    elevationScale: { type: 'number', min: 0, value: 1 },
+    // grid
+    cellSize: { type: 'number', min: 1, max: 1000, value: 1000 },
+    coverage: { type: 'number', min: 0, max: 1, value: 1 },
+    getPosition: { type: 'accessor', value: x => x.position },
+    extruded: false,
+    // Optional material for 'lighting' shader module
+    material: true
+};
+// This layer only perform GPU aggregation, no need to seperate data and weight props
+// aggregation will be dirty when any of the props are changed.
+const DIMENSIONS = {
+    data: {
+        props: ['cellSize', 'colorAggregation', 'elevationAggregation']
+    }
+    // rest of the changes are detected by `state.attributesChanged`
+};
+const POSITION_ATTRIBUTE_NAME = 'positions';
+/**
+ * The `GPUGridLayer` renders a grid heatmap based on an array of inputs.
+ */
+export default class GPUGridLayer extends GridAggregationLayer {
+    initializeState({ gl }) {
+        const isSupported = GPUGridAggregator.isSupported(gl);
+        if (!isSupported) {
+            log.error('GPUGridLayer is not supported on this browser, use GridLayer instead')();
+        }
+        super.initializeAggregationLayer({
+            dimensions: DIMENSIONS
+        });
+        this.setState({
+            gpuAggregation: true,
+            projectPoints: false,
+            isSupported,
+            weights: {
+                color: {
+                    needMin: true,
+                    needMax: true,
+                    combineMaxMin: true,
+                    maxMinBuffer: new Buffer(gl, {
+                        byteLength: 4 * 4,
+                        accessor: { size: 4, type: GL.FLOAT, divisor: 1 }
+                    })
+                },
+                elevation: {
+                    needMin: true,
+                    needMax: true,
+                    combineMaxMin: true,
+                    maxMinBuffer: new Buffer(gl, {
+                        byteLength: 4 * 4,
+                        accessor: { size: 4, type: GL.FLOAT, divisor: 1 }
+                    })
+                }
+            },
+            positionAttributeName: 'positions'
+        });
+        const attributeManager = this.getAttributeManager();
+        attributeManager.add({
+            [POSITION_ATTRIBUTE_NAME]: {
+                size: 3,
+                accessor: 'getPosition',
+                type: GL.DOUBLE,
+                fp64: this.use64bitPositions()
+            },
+            color: { size: 3, accessor: 'getColorWeight' },
+            elevation: { size: 3, accessor: 'getElevationWeight' }
+        });
+    }
+    updateState(opts) {
+        if (this.state.isSupported === false) {
+            // Skip update, layer not supported
+            return;
+        }
+        super.updateState(opts);
+        const { aggregationDirty } = this.state;
+        if (aggregationDirty) {
+            // reset cached CPU Aggregation results (used for picking)
+            this.setState({
+                gridHash: null
+            });
+        }
+    }
+    getHashKeyForIndex(index) {
+        const { numRow, numCol, boundingBox, gridOffset } = this.state;
+        const gridSize = [numCol, numRow];
+        const gridOrigin = [boundingBox.xMin, boundingBox.yMin];
+        const cellSize = [gridOffset.xOffset, gridOffset.yOffset];
+        const yIndex = Math.floor(index / gridSize[0]);
+        const xIndex = index - yIndex * gridSize[0];
+        // This will match the index to the hash-key to access aggregation data from CPU aggregation results.
+        const latIdx = Math.floor((yIndex * cellSize[1] + gridOrigin[1] + 90 + cellSize[1] / 2) / cellSize[1]);
+        const lonIdx = Math.floor((xIndex * cellSize[0] + gridOrigin[0] + 180 + cellSize[0] / 2) / cellSize[0]);
+        return `${latIdx}-${lonIdx}`;
+    }
+    getPositionForIndex(index) {
+        const { numRow, numCol, boundingBox, gridOffset } = this.state;
+        const gridSize = [numCol, numRow];
+        const gridOrigin = [boundingBox.xMin, boundingBox.yMin];
+        const cellSize = [gridOffset.xOffset, gridOffset.yOffset];
+        const yIndex = Math.floor(index / gridSize[0]);
+        const xIndex = index - yIndex * gridSize[0];
+        const yPos = yIndex * cellSize[1] + gridOrigin[1];
+        const xPos = xIndex * cellSize[0] + gridOrigin[0];
+        return [xPos, yPos];
+    }
+    getPickingInfo({ info, mode }) {
+        const { index } = info;
+        let object = null;
+        if (index >= 0) {
+            const { gpuGridAggregator } = this.state;
+            const position = this.getPositionForIndex(index);
+            const colorInfo = GPUGridAggregator.getAggregationData({
+                pixelIndex: index,
+                ...gpuGridAggregator.getData('color')
+            });
+            const elevationInfo = GPUGridAggregator.getAggregationData({
+                pixelIndex: index,
+                ...gpuGridAggregator.getData('elevation')
+            });
+            object = {
+                colorValue: colorInfo.cellWeight,
+                elevationValue: elevationInfo.cellWeight,
+                count: colorInfo.cellCount || elevationInfo.cellCount,
+                position,
+                totalCount: colorInfo.totalCount || elevationInfo.totalCount
+            };
+            if (mode !== 'hover') {
+                // perform CPU aggregation for full list of points for each cell
+                const { props } = this;
+                let { gridHash } = this.state;
+                if (!gridHash) {
+                    const { gridOffset, translation, boundingBox } = this.state;
+                    const { viewport } = this.context;
+                    const attributes = this.getAttributes();
+                    const cpuAggregation = pointToDensityGridDataCPU(props, {
+                        gridOffset,
+                        attributes,
+                        viewport,
+                        translation,
+                        boundingBox
+                    });
+                    gridHash = cpuAggregation.gridHash;
+                    this.setState({ gridHash });
+                }
+                const key = this.getHashKeyForIndex(index);
+                const cpuAggregationData = gridHash[key];
+                Object.assign(object, cpuAggregationData);
+            }
+        }
+        // override object with picked cell
+        info.picked = Boolean(object);
+        info.object = object;
+        return info;
+    }
+    renderLayers() {
+        if (!this.state.isSupported) {
+            return null;
+        }
+        const { elevationScale, extruded, cellSize: cellSizeMeters, coverage, material, elevationRange, colorDomain, elevationDomain } = this.props;
+        const { weights, numRow, numCol, gridOrigin, gridOffset } = this.state;
+        const { color, elevation } = weights;
+        const colorRange = colorRangeToFlatArray(this.props.colorRange);
+        const SubLayerClass = this.getSubLayerClass('gpu-grid-cell', GPUGridCellLayer);
+        return new SubLayerClass({
+            gridSize: [numCol, numRow],
+            gridOrigin,
+            gridOffset: [gridOffset.xOffset, gridOffset.yOffset],
+            colorRange,
+            elevationRange,
+            colorDomain,
+            elevationDomain,
+            cellSize: cellSizeMeters,
+            coverage,
+            material,
+            elevationScale,
+            extruded
+        }, this.getSubLayerProps({
+            id: 'gpu-grid-cell'
+        }), {
+            data: {
+                attributes: {
+                    colors: color.aggregationBuffer,
+                    elevations: elevation.aggregationBuffer
+                }
+            },
+            colorMaxMinBuffer: color.maxMinBuffer,
+            elevationMaxMinBuffer: elevation.maxMinBuffer,
+            numInstances: numCol * numRow
+        });
+    }
+    finalizeState(context) {
+        const { color, elevation } = this.state.weights;
+        [color, elevation].forEach(weight => {
+            const { aggregationBuffer, maxMinBuffer } = weight;
+            maxMinBuffer.delete();
+            aggregationBuffer?.delete();
+        });
+        super.finalizeState(context);
+    }
+    // Aggregation Overrides
+    updateAggregationState(opts) {
+        const { props, oldProps } = opts;
+        const { cellSize, coordinateSystem } = props;
+        const { viewport } = this.context;
+        const cellSizeChanged = oldProps.cellSize !== cellSize;
+        const { dimensions } = this.state;
+        const positionsChanged = this.isAttributeChanged(POSITION_ATTRIBUTE_NAME);
+        // any attribute changed
+        const attributesChanged = positionsChanged || this.isAttributeChanged();
+        let { boundingBox } = this.state;
+        if (positionsChanged) {
+            boundingBox = getBoundingBox(this.getAttributes(), this.getNumInstances());
+            this.setState({ boundingBox });
+        }
+        if (positionsChanged || cellSizeChanged) {
+            const { gridOffset, translation, width, height, numCol, numRow } = getGridParams(boundingBox, cellSize, viewport, coordinateSystem);
+            this.allocateResources(numRow, numCol);
+            this.setState({
+                gridOffset,
+                translation,
+                gridOrigin: [-1 * translation[0], -1 * translation[1]],
+                width,
+                height,
+                numCol,
+                numRow
+            });
+        }
+        const aggregationDataDirty = attributesChanged ||
+            this.isAggregationDirty(opts, {
+                dimension: dimensions.data,
+                compareAll: true
+            });
+        if (aggregationDataDirty) {
+            this._updateAccessors(opts);
+        }
+        this.setState({
+            aggregationDataDirty
+        });
+    }
+    // Private
+    _updateAccessors(opts) {
+        const { colorAggregation, elevationAggregation } = opts.props;
+        const { color, elevation } = this.state.weights;
+        color.operation = AGGREGATION_OPERATION[colorAggregation];
+        elevation.operation = AGGREGATION_OPERATION[elevationAggregation];
+    }
+}
+GPUGridLayer.layerName = 'GPUGridLayer';
+GPUGridLayer.defaultProps = defaultProps;

package/typed/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 AggregationLayer from './aggregation-layer';
+import GPUGridAggregator from './utils/gpu-grid-aggregation/gpu-grid-aggregator';
+import { Buffer } from '@luma.gl/core';
+import { log } from '@deck.gl/core';
+import GL from '@luma.gl/constants';
+import BinSorter from './utils/bin-sorter';
+import { pointToDensityGridDataCPU } from './cpu-grid-layer/grid-aggregator';
+export default class GridAggregationLayer extends AggregationLayer {
+    initializeAggregationLayer({ dimensions }) {
+        const { gl } = this.context;
+        super.initializeAggregationLayer(dimensions);
+        this.setState({
+            // CPU aggregation results
+            layerData: {},
+            gpuGridAggregator: new GPUGridAggregator(gl, { 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 gl = this.context.gl;
+            const { weights } = this.state;
+            for (const name in weights) {
+                const weight = weights[name];
+                if (weight.aggregationBuffer) {
+                    weight.aggregationBuffer.delete();
+                }
+                weight.aggregationBuffer = new Buffer(gl, {
+                    byteLength: dataBytes,
+                    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 });
+    }
+}
+GridAggregationLayer.layerName = 'GridAggregationLayer';

package/typed/grid-layer/grid-layer.js

@@ -0,0 +1,60 @@
+import { CompositeLayer } from '@deck.gl/core';
+import GPUGridAggregator from '../utils/gpu-grid-aggregation/gpu-grid-aggregator';
+import GPUGridLayer from '../gpu-grid-layer/gpu-grid-layer';
+import CPUGridLayer from '../cpu-grid-layer/cpu-grid-layer';
+const defaultProps = {
+    ...GPUGridLayer.defaultProps,
+    ...CPUGridLayer.defaultProps,
+    gpuAggregation: false
+};
+export default class GridLayer extends CompositeLayer {
+    initializeState() {
+        this.state = {
+            useGPUAggregation: true
+        };
+    }
+    updateState({ props }) {
+        this.setState({
+            useGPUAggregation: this.canUseGPUAggregation(props)
+        });
+    }
+    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.gl)) {
+            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;
+    }
+}
+GridLayer.layerName = 'GridLayer';
+GridLayer.defaultProps = defaultProps;

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

@@ -0,0 +1,78 @@
+import GL from '@luma.gl/constants';
+import { isWebGL2 } from '@luma.gl/core';
+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)];
+}
+// Returns format and type for creating texture objects
+export function getTextureParams({ gl, floatTargetSupport }) {
+    return floatTargetSupport
+        ? {
+            // format:  should be RGBA32F on WebGL2 (float textures), RGBA in WebGL1 for float or non float textures
+            format: isWebGL2(gl) ? GL.RGBA32F : GL.RGBA,
+            type: GL.FLOAT
+        }
+        : {
+            format: GL.RGBA,
+            type: GL.UNSIGNED_BYTE
+        };
+}