@deck.gl/aggregation-layers 9.0.0-beta.1 → 9.0.0-beta.10

package/dist/gpu-grid-layer/gpu-grid-cell-layer-fragment.glsl.js

@@ -0,0 +1,30 @@
+// 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.
+export default `\
+#version 300 es
+#define SHADER_NAME gpu-grid-cell-layer-fragment-shader
+precision highp float;
+in vec4 vColor;
+out vec4 fragColor;
+void main(void) {
+fragColor = vColor;
+fragColor = picking_filterColor(fragColor);
+}
+`;

package/dist/gpu-grid-layer/gpu-grid-cell-layer-vertex.glsl.js

@@ -0,0 +1,112 @@
+// 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.
+// Inspired by screen-grid-layer vertex shader in deck.gl
+export default `\
+#version 300 es
+#define SHADER_NAME gpu-grid-cell-layer-vertex-shader
+#define RANGE_COUNT 6
+in vec3 positions;
+in vec3 normals;
+in vec4 colors;
+in vec4 elevations;
+in vec3 instancePickingColors;
+uniform vec2 offset;
+uniform bool extruded;
+uniform float cellSize;
+uniform float coverage;
+uniform float opacity;
+uniform float elevationScale;
+uniform ivec2 gridSize;
+uniform vec2 gridOrigin;
+uniform vec2 gridOriginLow;
+uniform vec2 gridOffset;
+uniform vec2 gridOffsetLow;
+uniform vec4 colorRange[RANGE_COUNT];
+uniform vec2 elevationRange;
+uniform vec2 colorDomain;
+uniform bool colorDomainValid;
+uniform vec2 elevationDomain;
+uniform bool elevationDomainValid;
+layout(std140) uniform;
+uniform ColorData
+{
+vec4 maxMinCount;
+} colorData;
+uniform ElevationData
+{
+vec4 maxMinCount;
+} elevationData;
+#define EPSILON 0.00001
+out vec4 vColor;
+vec4 quantizeScale(vec2 domain, vec4 range[RANGE_COUNT], float value) {
+vec4 outColor = vec4(0., 0., 0., 0.);
+if (value >= (domain.x - EPSILON) && value <= (domain.y + EPSILON)) {
+float domainRange = domain.y - domain.x;
+if (domainRange <= 0.) {
+outColor = colorRange[0];
+} else {
+float rangeCount = float(RANGE_COUNT);
+float rangeStep = domainRange / rangeCount;
+float idx = floor((value - domain.x) / rangeStep);
+idx = clamp(idx, 0., rangeCount - 1.);
+int intIdx = int(idx);
+outColor = colorRange[intIdx];
+}
+}
+return outColor;
+}
+float linearScale(vec2 domain, vec2 range, float value) {
+if (value >= (domain.x - EPSILON) && value <= (domain.y + EPSILON)) {
+return ((value - domain.x) / (domain.y - domain.x)) * (range.y - range.x) + range.x;
+}
+return -1.;
+}
+void main(void) {
+vec2 clrDomain = colorDomainValid ? colorDomain : vec2(colorData.maxMinCount.a, colorData.maxMinCount.r);
+vec4 color = quantizeScale(clrDomain, colorRange, colors.r);
+float elevation = 0.0;
+if (extruded) {
+vec2 elvDomain = elevationDomainValid ? elevationDomain : vec2(elevationData.maxMinCount.a, elevationData.maxMinCount.r);
+elevation = linearScale(elvDomain, elevationRange, elevations.r);
+elevation = elevation  * (positions.z + 1.0) / 2.0 * elevationScale;
+}
+float shouldRender = float(color.r > 0.0 && elevations.r >= 0.0);
+float dotRadius = cellSize / 2. * coverage * shouldRender;
+int yIndex = (gl_InstanceID / gridSize[0]);
+int xIndex = gl_InstanceID - (yIndex * gridSize[0]);
+vec2 instancePositionXFP64 = mul_fp64(vec2(gridOffset[0], gridOffsetLow[0]), vec2(float(xIndex), 0.));
+instancePositionXFP64 = sum_fp64(instancePositionXFP64, vec2(gridOrigin[0], gridOriginLow[0]));
+vec2 instancePositionYFP64 = mul_fp64(vec2(gridOffset[1], gridOffsetLow[1]), vec2(float(yIndex), 0.));
+instancePositionYFP64 = sum_fp64(instancePositionYFP64, vec2(gridOrigin[1], gridOriginLow[1]));
+vec3 centroidPosition = vec3(instancePositionXFP64[0], instancePositionYFP64[0], elevation);
+vec3 centroidPosition64Low = vec3(instancePositionXFP64[1], instancePositionYFP64[1], 0.0);
+geometry.worldPosition = centroidPosition;
+vec3 pos = vec3(project_size(positions.xy + offset) * dotRadius, 0.);
+picking_setPickingColor(instancePickingColors);
+gl_Position = project_position_to_clipspace(centroidPosition, centroidPosition64Low, pos, geometry.position);
+vec3 normals_commonspace = project_normal(normals);
+if (extruded) {
+vec3 lightColor = lighting_getLightColor(color.rgb, project_uCameraPosition, geometry.position.xyz, normals_commonspace);
+vColor = vec4(lightColor, color.a * opacity) / 255.;
+} else {
+vColor = vec4(color.rgb, color.a * opacity) / 255.;
+}
+}
+`;

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

@@ -1,7 +1,7 @@
 import { Layer, LayerProps, DefaultProps } from '@deck.gl/core';
 import { Model } from '@luma.gl/engine';
 import { Buffer } from '@luma.gl/core';
-import type { _GPUGridLayerProps } from './gpu-grid-layer';
+import type { _GPUGridLayerProps } from "./gpu-grid-layer.js";
 type _GPUGridCellLayerProps = _GPUGridLayerProps<any> & {
     cellSize: number;
     offset: number[];

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

@@ -0,0 +1 @@
+{"version":3,"file":"gpu-grid-cell-layer.d.ts","sourceRoot":"","sources":["../../src/gpu-grid-layer/gpu-grid-cell-layer.ts"],"names":[],"mappings":"AAoBA,OAAO,EACL,KAAK,EAKL,UAAU,EACV,YAAY,EACb,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,KAAK,EAAC,MAAM,iBAAiB,CAAC;AACtC,OAAO,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AAGrC,OAAO,KAAK,EAAC,kBAAkB,EAAC,4BAAyB;AA8BzD,KAAK,sBAAsB,GAAG,kBAAkB,CAAC,GAAG,CAAC,GAAG;IACtD,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qBAAqB,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,KAAK,CAAC,sBAAsB,CAAC;IACzE,MAAM,CAAC,SAAS,SAAsB;IACtC,MAAM,CAAC,YAAY;;;;;;;;;;;;oBAAgB;IAEnC,KAAK,EAAG;QACN,KAAK,CAAC,EAAE,KAAK,CAAC;KACf,CAAC;IAEF,UAAU;IAQV,eAAe,IAAI,IAAI;IAiBvB,SAAS,IAAI,KAAK;IASlB,IAAI,CAAC,EAAC,QAAQ,EAAC;;KAAA;IAyCf,kBAAkB,CAAC,iBAAiB,KAAA,EAAE,qBAAqB,KAAA;IAK3D,oBAAoB,CAAC,iBAAiB,KAAA,EAAE,qBAAqB,KAAA;IAK7D,iBAAiB;IAkBjB,OAAO,CAAC,mBAAmB;CAU5B"}

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

@@ -0,0 +1,145 @@
+// 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 { Layer, fp64LowPart, project32, gouraudLighting, picking } from '@deck.gl/core';
+import { CubeGeometry } from '@luma.gl/engine';
+import { fp64arithmetic } from '@luma.gl/shadertools';
+import { Model } from '@luma.gl/engine';
+import { GL } from '@luma.gl/constants';
+import { defaultColorRange, colorRangeToFlatArray } from "../utils/color-utils.js";
+import vs from "./gpu-grid-cell-layer-vertex.glsl.js";
+import fs from "./gpu-grid-cell-layer-fragment.glsl.js";
+const COLOR_DATA_UBO_INDEX = 0;
+const ELEVATION_DATA_UBO_INDEX = 1;
+const defaultProps = {
+    // color
+    colorDomain: null,
+    colorRange: defaultColorRange,
+    // elevation
+    elevationDomain: null,
+    elevationRange: [0, 1000],
+    elevationScale: { type: 'number', min: 0, value: 1 },
+    // grid
+    gridSize: { type: 'array', value: [1, 1] },
+    gridOrigin: { type: 'array', value: [0, 0] },
+    gridOffset: { type: 'array', value: [0, 0] },
+    cellSize: { type: 'number', min: 0, max: 1000, value: 1000 },
+    offset: { type: 'array', value: [1, 1] },
+    coverage: { type: 'number', min: 0, max: 1, value: 1 },
+    extruded: true,
+    material: true // Use lighting module defaults
+};
+export default class GPUGridCellLayer extends Layer {
+    static { this.layerName = 'GPUGridCellLayer'; }
+    static { this.defaultProps = defaultProps; }
+    getShaders() {
+        return super.getShaders({
+            vs,
+            fs,
+            modules: [project32, gouraudLighting, picking, fp64arithmetic]
+        });
+    }
+    initializeState() {
+        const attributeManager = this.getAttributeManager();
+        attributeManager.addInstanced({
+            colors: {
+                size: 4,
+                noAlloc: true
+            },
+            elevations: {
+                size: 4,
+                noAlloc: true
+            }
+        });
+        const model = this._getModel();
+        this._setupUniformBuffer(model);
+        this.setState({ model });
+    }
+    _getModel() {
+        return new Model(this.context.device, {
+            ...this.getShaders(),
+            id: this.props.id,
+            geometry: new CubeGeometry(),
+            isInstanced: true
+        });
+    }
+    draw({ uniforms }) {
+        const { cellSize, offset, extruded, elevationScale, coverage, gridSize, gridOrigin, gridOffset, elevationRange, colorMaxMinBuffer, elevationMaxMinBuffer } = this.props;
+        const model = this.state.model;
+        const gridOriginLow = [fp64LowPart(gridOrigin[0]), fp64LowPart(gridOrigin[1])];
+        const gridOffsetLow = [fp64LowPart(gridOffset[0]), fp64LowPart(gridOffset[1])];
+        const domainUniforms = this.getDomainUniforms();
+        const colorRange = colorRangeToFlatArray(this.props.colorRange);
+        this.bindUniformBuffers(colorMaxMinBuffer, elevationMaxMinBuffer);
+        model.setUniforms(uniforms);
+        model.setUniforms(domainUniforms);
+        model.setUniforms({
+            cellSize,
+            offset,
+            extruded,
+            elevationScale,
+            coverage,
+            gridSize,
+            gridOrigin,
+            gridOriginLow,
+            gridOffset,
+            gridOffsetLow,
+            colorRange,
+            elevationRange
+        });
+        model.draw(this.context.renderPass);
+        this.unbindUniformBuffers(colorMaxMinBuffer, elevationMaxMinBuffer);
+    }
+    bindUniformBuffers(colorMaxMinBuffer, elevationMaxMinBuffer) {
+        colorMaxMinBuffer.bind({ target: 35345, index: COLOR_DATA_UBO_INDEX });
+        elevationMaxMinBuffer.bind({ target: 35345, index: ELEVATION_DATA_UBO_INDEX });
+    }
+    unbindUniformBuffers(colorMaxMinBuffer, elevationMaxMinBuffer) {
+        colorMaxMinBuffer.unbind({ target: 35345, index: COLOR_DATA_UBO_INDEX });
+        elevationMaxMinBuffer.unbind({ target: 35345, index: ELEVATION_DATA_UBO_INDEX });
+    }
+    getDomainUniforms() {
+        const { colorDomain, elevationDomain } = this.props;
+        const domainUniforms = {};
+        if (colorDomain !== null) {
+            domainUniforms.colorDomainValid = true;
+            domainUniforms.colorDomain = colorDomain;
+        }
+        else {
+            domainUniforms.colorDomainValid = false;
+        }
+        if (elevationDomain !== null) {
+            domainUniforms.elevationDomainValid = true;
+            domainUniforms.elevationDomain = elevationDomain;
+        }
+        else {
+            domainUniforms.elevationDomainValid = false;
+        }
+        return domainUniforms;
+    }
+    _setupUniformBuffer(model) {
+        // @ts-expect-error TODO v9 This code is not portable to WebGPU
+        const programHandle = model.pipeline.handle;
+        const gl = this.context.gl;
+        const colorIndex = gl.getUniformBlockIndex(programHandle, 'ColorData');
+        const elevationIndex = gl.getUniformBlockIndex(programHandle, 'ElevationData');
+        gl.uniformBlockBinding(programHandle, colorIndex, COLOR_DATA_UBO_INDEX);
+        gl.uniformBlockBinding(programHandle, elevationIndex, ELEVATION_DATA_UBO_INDEX);
+    }
+}

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

@@ -1,7 +1,7 @@
 import { Accessor, AccessorFunction, Color, Material, GetPickingInfoParams, LayerContext, PickingInfo, Position, DefaultProps } from '@deck.gl/core';
-import GPUGridCellLayer from './gpu-grid-cell-layer';
-import { GridHash } from './../cpu-grid-layer/grid-aggregator';
-import GridAggregationLayer, { GridAggregationLayerProps } from '../grid-aggregation-layer';
+import GPUGridCellLayer from "./gpu-grid-cell-layer.js";
+import { GridHash } from "./../cpu-grid-layer/grid-aggregator.js";
+import GridAggregationLayer, { GridAggregationLayerProps } from "../grid-aggregation-layer.js";
 /** All properties supported by GPUGridLayer. */
 export type GPUGridLayerProps<DataT = unknown> = _GPUGridLayerProps<DataT> & GridAggregationLayerProps<DataT>;
 /** Properties added by GPUGridLayer. */
@@ -78,7 +78,7 @@ export type _GPUGridLayerProps<DataT> = {
      */
     getElevationWeight?: Accessor<DataT, number>;
 };
-/** Aggregate data into a grid-based heatmap. Aggregation is performed on GPU (WebGL2 only). */
+/** Aggregate data into a grid-based heatmap. Aggregation is performed on GPU. */
 export default class GPUGridLayer<DataT = any, ExtraPropsT extends {} = {}> extends GridAggregationLayer<DataT, ExtraPropsT & Required<_GPUGridLayerProps<DataT>>> {
     static layerName: string;
     static defaultProps: DefaultProps<GPUGridLayerProps<unknown>>;

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

@@ -0,0 +1 @@
+{"version":3,"file":"gpu-grid-layer.d.ts","sourceRoot":"","sources":["../../src/gpu-grid-layer/gpu-grid-layer.ts"],"names":[],"mappings":"AAqBA,OAAO,EACL,QAAQ,EACR,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,oBAAoB,EACpB,YAAY,EAEZ,WAAW,EACX,QAAQ,EACR,YAAY,EACb,MAAM,eAAe,CAAC;AAKvB,OAAO,gBAAgB,iCAA8B;AACrD,OAAO,EAA4B,QAAQ,EAAC,+CAA4C;AACxF,OAAO,oBAAoB,EAAE,EAAC,yBAAyB,EAAC,qCAAkC;AAsC1F,gDAAgD;AAChD,MAAM,MAAM,iBAAiB,CAAC,KAAK,GAAG,OAAO,IAAI,kBAAkB,CAAC,KAAK,CAAC,GACxE,yBAAyB,CAAC,KAAK,CAAC,CAAC;AAEnC,wCAAwC;AACxC,MAAM,MAAM,kBAAkB,CAAC,KAAK,IAAI;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IAEtC;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,EAAE,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IAE1C;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAElC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;IAElD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;IAEtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAEhD;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAEzC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAC9C,CAAC;AAEF,iFAAiF;AACjF,MAAM,CAAC,OAAO,OAAO,YAAY,CAC/B,KAAK,GAAG,GAAG,EACX,WAAW,SAAS,EAAE,GAAG,EAAE,CAC3B,SAAQ,oBAAoB,CAAC,KAAK,EAAE,WAAW,GAAG,QAAQ,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC;IACtF,MAAM,CAAC,SAAS,SAAkB;IAClC,MAAM,CAAC,YAAY,2CAAgB;IAEnC,KAAK,EAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,GAAG;QAC7C,WAAW,EAAE,OAAO,CAAC;QACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;KACrB,CAAC;IAEF,eAAe,CAAC,EAAC,MAAM,EAAC,EAAE,YAAY,GAAG,IAAI;IAiD7C,WAAW,CAAC,IAAI,KAAA;IAehB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAkBzC,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ;IAa5C,cAAc,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,EAAE,oBAAoB,GAAG,WAAW;IAqD/D,YAAY;IAsDZ,aAAa,CAAC,OAAO,EAAE,YAAY;IAYnC,sBAAsB,CAAC,IAAI,KAAA;IAoD3B,gBAAgB,CAAC,IAAI,KAAA;CAMtB"}

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

@@ -0,0 +1,288 @@
+// 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 GPUGridAggregator from "../utils/gpu-grid-aggregation/gpu-grid-aggregator.js";
+import { AGGREGATION_OPERATION } from "../utils/aggregation-operation-utils.js";
+import { defaultColorRange, colorRangeToFlatArray } from "../utils/color-utils.js";
+import GPUGridCellLayer from "./gpu-grid-cell-layer.js";
+import { pointToDensityGridDataCPU } from "./../cpu-grid-layer/grid-aggregator.js";
+import GridAggregationLayer from "../grid-aggregation-layer.js";
+import { getBoundingBox, getGridParams } from "../utils/grid-aggregation-utils.js";
+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';
+/** Aggregate data into a grid-based heatmap. Aggregation is performed on GPU. */
+export default class GPUGridLayer extends GridAggregationLayer {
+    static { this.layerName = 'GPUGridLayer'; }
+    static { this.defaultProps = defaultProps; }
+    initializeState({ device }) {
+        const isSupported = GPUGridAggregator.isSupported(device);
+        if (!isSupported) {
+            log.error('GPUGridLayer is not supported on this browser, use GridLayer instead')();
+        }
+        super.initializeAggregationLayer({
+            dimensions: DIMENSIONS
+        });
+        this.setState({
+            gpuAggregation: false, // TODO(v9): Re-enable GPU aggregation.
+            projectPoints: false, // aggregation in world space
+            isSupported,
+            weights: {
+                color: {
+                    needMin: true,
+                    needMax: true,
+                    combineMaxMin: true,
+                    maxMinBuffer: device.createBuffer({
+                        byteLength: 4 * 4,
+                        // @ts-expect-error webgl-legacy
+                        accessor: { size: 4, type: 5126, divisor: 1 }
+                    })
+                },
+                elevation: {
+                    needMin: true,
+                    needMax: true,
+                    combineMaxMin: true,
+                    maxMinBuffer: device.createBuffer({
+                        byteLength: 4 * 4,
+                        // @ts-expect-error
+                        accessor: { size: 4, type: 5126, divisor: 1 }
+                    })
+                }
+            },
+            positionAttributeName: 'positions'
+        });
+        const attributeManager = this.getAttributeManager();
+        attributeManager.add({
+            [POSITION_ATTRIBUTE_NAME]: {
+                size: 3,
+                accessor: 'getPosition',
+                type: 'float64',
+                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.gpuGridAggregator;
+            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?.destroy();
+            aggregationBuffer?.destroy();
+        });
+        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];
+    }
+}

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

@@ -1,7 +1,7 @@
 import { LayerContext, UpdateParameters, Accessor } from '@deck.gl/core';
-import AggregationLayer, { AggregationLayerProps } from './aggregation-layer';
-import GPUGridAggregator from './utils/gpu-grid-aggregation/gpu-grid-aggregator';
-import BinSorter from './utils/bin-sorter';
+import AggregationLayer, { AggregationLayerProps } from "./aggregation-layer.js";
+import GPUGridAggregator from "./utils/gpu-grid-aggregation/gpu-grid-aggregator.js";
+import BinSorter from "./utils/bin-sorter.js";
 import type { Buffer } from '@luma.gl/core';
 export type GridAggregationLayerProps<DataT> = AggregationLayerProps<DataT>;
 export default abstract class GridAggregationLayer<DataT, ExtraPropsT extends {} = {}> extends AggregationLayer<DataT, ExtraPropsT> {

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid-aggregation-layer.d.ts","sourceRoot":"","sources":["../src/grid-aggregation-layer.ts"],"names":[],"mappings":"AAqBA,OAAO,EAAC,YAAY,EAAO,gBAAgB,EAAE,QAAQ,EAAC,MAAM,eAAe,CAAC;AAC5E,OAAO,gBAAgB,EAAE,EAAC,qBAAqB,EAAC,+BAA4B;AAC5E,OAAO,iBAAiB,4DAAyD;AACjF,OAAO,SAAS,8BAA2B;AAE3C,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AAE1C,MAAM,MAAM,yBAAyB,CAAC,KAAK,IAAI,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAE5E,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,oBAAoB,CAChD,KAAK,EACL,WAAW,SAAS,EAAE,GAAG,EAAE,CAC3B,SAAQ,gBAAgB,CAAC,KAAK,EAAE,WAAW,CAAC;IAC5C,MAAM,CAAC,SAAS,SAA0B;IAE1C,KAAK,EAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,GAAG;QACzC,oBAAoB,CAAC,EAAE,OAAO,CAAC;QAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;QAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;QAC3B,cAAc,CAAC,EAAE,GAAG,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;QACrB,UAAU,CAAC,EAAE,SAAS,CAAC;QACvB,OAAO,EAAE;YACP,CAAC,GAAG,EAAE,MAAM,GAAG;gBACb,iBAAiB,CAAC,EAAE,MAAM,CAAC;gBAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,eAAe,EAAE,YAAY,GAAG,IAAI,CAAC;gBACrC,UAAU,EAAE,YAAY,CAAC;gBACzB,OAAO,EAAE,YAAY,CAAC;gBACtB,OAAO,EAAE,YAAY,CAAC;gBACtB,SAAS,EAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;gBACnC,SAAS,EAAE,MAAM,CAAC;aACnB,CAAC;SACH,CAAC;QACF,iBAAiB,CAAC,EAAE,QAAQ,CAAC;QAC7B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;QACtC,SAAS,EAAE,GAAG,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE;YAAC,OAAO,EAAE,MAAM,CAAC;YAAC,OAAO,EAAE,MAAM,CAAA;SAAC,CAAC;QAC/C,SAAS,EAAE,MAAM,EAAE,CAAC;QACpB,UAAU,EAAE,MAAM,EAAE,CAAC;QACrB,WAAW,EAAE,MAAM,EAAE,CAAC;QACtB,OAAO,EAAE,MAAM,EAAE,CAAC;QAClB,WAAW,EAAE;YAAC,IAAI,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAC,CAAC;QACtE,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAC3D,CAAC;IAEF,0BAA0B,CAAC,EAAC,UAAU,EAAC;;KAAA;IAYvC,WAAW,CAAC,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;IA8BxC,aAAa,CAAC,OAAO,EAAE,YAAY;IASnC,aAAa,CAAC,OAAO,EAAE,GAAG,GAAG,IAAI;IAQjC,sBAAsB,CAAC,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAKnD,iBAAiB,CAAC,MAAM,KAAA,EAAE,MAAM,KAAA;IAsBhC,aAAa,CAAC,EAAC,eAAe,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAC;;;;;KAAA;IAY7D,kBAAkB,CAAC,IAAI,KAAA;IAgDvB,iBAAiB;IAOjB,yBAAyB,IAAI,IAAI;CAoBlC"}