@deck.gl/aggregation-layers 8.10.0-alpha.7 → 9.0.0-alpha.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/aggregation-layers",
   "description": "deck.gl layers that aggregate the input data into alternative representations",
   "license": "MIT",
-  "version": "8.10.0-alpha.7",
+  "version": "9.0.0-alpha.3",
   "publishConfig": {
     "access": "public"
   },
@@ -31,15 +31,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/constants": "^8.5.20",
-    "@luma.gl/shadertools": "^8.5.20",
+    "@luma.gl/constants": "9.0.0-alpha.42",
+    "@luma.gl/core": "9.0.0-alpha.42",
+    "@luma.gl/shadertools": "9.0.0-alpha.42",
     "@math.gl/web-mercator": "^4.0.0",
     "d3-hexbin": "^0.2.1"
   },
   "peerDependencies": {
     "@deck.gl/core": "^8.0.0",
     "@deck.gl/layers": "^8.0.0",
-    "@luma.gl/core": "^8.0.0"
+    "@luma.gl/core": "9.0.0-alpha.42",
+    "@luma.gl/engine": "9.0.0-alpha.42"
   },
-  "gitHead": "1c62a9eec914019afd3969bc0c59f1488e491207"
+  "gitHead": "51dfb88f9168ccf478d01b28a2c5ada7bd8281c7"
 }

package/src/aggregation-layer.ts

@@ -26,7 +26,6 @@ import {
   UpdateParameters,
   CompositeLayerProps
 } from '@deck.gl/core';
-import {cssToDeviceRatio} from '@luma.gl/core';
 import {filterProps} from './utils/prop-utils';
 
 export type AggregationLayerProps<DataT> = CompositeLayerProps & {
@@ -39,9 +38,10 @@ export default abstract class AggregationLayer<
 > extends CompositeLayer<Required<AggregationLayer<DataT>> & ExtraPropsT> {
   static layerName = 'AggregationLayer';
 
-  state!: CompositeLayer['state'] & {
+  state!: {
     ignoreProps?: Record<string, any>;
     dimensions?: any;
+    changedAttributes?: Record<string, any>;
   };
 
   initializeAggregationLayer(dimensions: any) {
@@ -76,19 +76,20 @@ export default abstract class AggregationLayer<
   }
 
   getAttributes() {
-    return this.getAttributeManager()!.getShaderAttributes();
+    return this.getAttributeManager()!.getAttributes();
   }
 
   getModuleSettings() {
     // For regular layer draw this happens during draw cycle (_drawLayersInViewport) not during update cycle
     // For aggregation layers this is called during updateState to update aggregation data
     // NOTE: it is similar to LayerPass._getModuleParameters() but doesn't inlcude `effects` it is not needed for aggregation
-    const {viewport, mousePosition, gl} = this.context;
+    const {viewport, mousePosition, device} = this.context;
     const moduleSettings = Object.assign(Object.create(this.props), {
       viewport,
       mousePosition,
       pickingActive: 0,
-      devicePixelRatio: cssToDeviceRatio(gl)
+      // @ts-expect-error TODO - assuming WebGL context
+      devicePixelRatio: device.canvasContext.cssToDeviceRatio()
     });
     return moduleSettings;
   }
@@ -168,7 +169,7 @@ export default abstract class AggregationLayer<
 
   // override Composite layer private method to create AttributeManager instance
   _getAttributeManager() {
-    return new AttributeManager(this.context.gl, {
+    return new AttributeManager(this.context.device, {
       id: this.props.id,
       stats: this.context.stats
     });

package/src/contour-layer/contour-layer.ts

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import {LineLayer, SolidPolygonLayer} from '@deck.gl/layers';
 import {generateContours} from './contour-utils';
 import {
@@ -29,7 +29,8 @@ import {
   log,
   Position,
   UpdateParameters,
-  DefaultProps
+  DefaultProps,
+  LayersList
 } from '@deck.gl/core';
 
 import GPUGridAggregator from '../utils/gpu-grid-aggregation/gpu-grid-aggregator';
@@ -44,7 +45,7 @@ const DEFAULT_THRESHOLD = 1;
 const defaultProps: DefaultProps<ContourLayerProps> = {
   // grid aggregation
   cellSize: {type: 'number', min: 1, max: 1000, value: 1000},
-  getPosition: {type: 'accessor', value: x => x.position},
+  getPosition: {type: 'accessor', value: (x: any) => x.position},
   getWeight: {type: 'accessor', value: 1},
   gpuAggregation: true,
   aggregation: 'SUM',
@@ -73,7 +74,7 @@ const DIMENSIONS = {
 };
 
 /** All properties supported by ContourLayer. */
-export type ContourLayerProps<DataT = any> = _ContourLayerProps<DataT> &
+export type ContourLayerProps<DataT = unknown> = _ContourLayerProps<DataT> &
   GridAggregationLayerProps<DataT>;
 
 /** Properties added by ContourLayer. */
@@ -151,6 +152,21 @@ export default class ContourLayer<
   static layerName = 'ContourLayer';
   static defaultProps = defaultProps;
 
+  state!: GridAggregationLayer<DataT>['state'] & {
+    contourData: {
+      contourSegments: {
+        start: number[];
+        end: number[];
+        contour: any;
+      }[];
+      contourPolygons: {
+        vertices: number[][];
+        contour: any;
+      }[];
+    };
+    thresholdData: any;
+  };
+
   initializeState(): void {
     super.initializeAggregationLayer({
       dimensions: DIMENSIONS
@@ -194,7 +210,7 @@ export default class ContourLayer<
     }
   }
 
-  renderLayers(): Layer[] {
+  renderLayers(): LayersList {
     const {contourSegments, contourPolygons} = this.state.contourData;
 
     const LinesSubLayerClass = this.getSubLayerClass('lines', LineLayer);
@@ -238,14 +254,14 @@ export default class ContourLayer<
   // Aggregation Overrides
 
   /* eslint-disable max-statements, complexity */
-  updateAggregationState(opts) {
+  updateAggregationState(opts: UpdateParameters<this>) {
     const {props, oldProps} = opts;
     const {cellSize, coordinateSystem} = props;
     const {viewport} = this.context;
     const cellSizeChanged = oldProps.cellSize !== cellSize;
     let gpuAggregation = props.gpuAggregation;
     if (this.state.gpuAggregation !== props.gpuAggregation) {
-      if (gpuAggregation && !GPUGridAggregator.isSupported(this.context.gl)) {
+      if (gpuAggregation && !GPUGridAggregator.isSupported(this.context.device)) {
         log.warn('GPU Grid Aggregation not supported, falling back to CPU')();
         gpuAggregation = false;
       }
@@ -311,7 +327,7 @@ export default class ContourLayer<
 
   // Private (Aggregation)
 
-  private _updateAccessors(opts) {
+  private _updateAccessors(opts: UpdateParameters<this>) {
     const {getWeight, aggregation, data} = opts.props;
     const {count} = this.state.weights;
     if (count) {
@@ -335,7 +351,7 @@ export default class ContourLayer<
     const {count} = this.state.weights;
     let {aggregationData} = count;
     if (!aggregationData) {
-      aggregationData = count.aggregationBuffer.getData();
+      aggregationData = count.aggregationBuffer!.getData() as Float32Array;
       count.aggregationData = aggregationData;
     }
 

package/src/cpu-grid-layer/cpu-grid-layer.ts

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import GL from '@luma.gl/constants';
+import {GL} from '@luma.gl/constants';
 import {GridCellLayer} from '@deck.gl/layers';
 import {Accessor, AccessorFunction, Color, Position, Material, DefaultProps} from '@deck.gl/core';
 
@@ -62,7 +62,7 @@ const defaultProps: DefaultProps<CPUGridLayerProps> = {
   // grid
   cellSize: {type: 'number', min: 0, max: 1000, value: 1000},
   coverage: {type: 'number', min: 0, max: 1, value: 1},
-  getPosition: {type: 'accessor', value: x => x.position},
+  getPosition: {type: 'accessor', value: (x: any) => x.position},
   extruded: false,
 
   // Optional material for 'lighting' shader module
@@ -73,7 +73,7 @@ const defaultProps: DefaultProps<CPUGridLayerProps> = {
 };
 
 /** All properties supported by CPUGridLayer. */
-export type CPUGridLayerProps<DataT = any> = _CPUGridLayerProps<DataT> &
+export type CPUGridLayerProps<DataT = unknown> = _CPUGridLayerProps<DataT> &
   AggregationLayerProps<DataT>;
 
 /** Properties added by CPUGridLayer. */
@@ -244,6 +244,11 @@ export default class CPUGridLayer<
   static layerName = 'CPUGridLayer';
   static defaultProps = defaultProps;
 
+  state!: AggregationLayer<DataT>['state'] & {
+    cpuAggregator: CPUAggregator;
+    aggregatorState: CPUAggregator['state'];
+  };
+
   initializeState(): void {
     const cpuAggregator = new CPUAggregator({
       getAggregator: props => props.gridAggregator,

package/src/cpu-grid-layer/{grid-aggregator.js → grid-aggregator.ts}

@@ -21,6 +21,15 @@
 import {createIterable} from '@deck.gl/core';
 import {getGridOffset} from '../utils/grid-aggregation-utils';
 
+export type GridHash = {
+  [key: string]: {
+    count: number;
+    points: unknown[];
+    lonIdx: number;
+    latIdx: number;
+  };
+};
+
 /**
  * Calculate density grid from an array of points
  * @param {Object} props - object containing :
@@ -57,8 +66,15 @@ export function pointToDensityGridDataCPU(props, aggregationParams) {
  * @param {function} getPosition - position accessor
  * @returns {object} - grid hash and cell dimension
  */
-/* eslint-disable max-statements, complexity */
-function pointsToGridHashing(props, aggregationParams) {
+/* eslint-disable-next-line max-statements, complexity */
+function pointsToGridHashing(
+  props,
+  aggregationParams
+): {
+  gridHash: GridHash;
+  gridOffset: {xOffset: number; yOffset: number};
+  offsets: [number, number];
+} {
   const {data = [], cellSize} = props;
   const {attributes, viewport, projectPoints, numInstances} = aggregationParams;
   const positions = attributes.positions.value;
@@ -69,7 +85,7 @@ function pointsToGridHashing(props, aggregationParams) {
   const gridOffset = aggregationParams.gridOffset || getGridOffset(boundingBox, cellSize);
 
   if (gridOffset.xOffset <= 0 || gridOffset.yOffset <= 0) {
-    return {gridHash: {}, gridOffset};
+    return {gridHash: {}, gridOffset, offsets: [0, 0]};
   }
 
   const {width, height} = viewport;
@@ -111,7 +127,15 @@ function pointsToGridHashing(props, aggregationParams) {
 }
 /* eslint-enable max-statements, complexity */
 
-function getGridLayerDataFromGridHash({gridHash, gridOffset, offsets}) {
+function getGridLayerDataFromGridHash({
+  gridHash,
+  gridOffset,
+  offsets
+}: {
+  gridHash: GridHash;
+  gridOffset: {xOffset: number; yOffset: number};
+  offsets: [number, number];
+}) {
   const data = new Array(Object.keys(gridHash).length);
   let i = 0;
   for (const key in gridHash) {

package/src/gpu-grid-layer/gpu-grid-cell-layer.ts

@@ -24,13 +24,14 @@ import {
   project32,
   gouraudLighting,
   picking,
-  LayerContext,
   LayerProps,
   DefaultProps
 } from '@deck.gl/core';
-import GL from '@luma.gl/constants';
-import {Model, CubeGeometry, Buffer} from '@luma.gl/core';
+import {CubeGeometry} from '@luma.gl/engine';
 import {fp64arithmetic} from '@luma.gl/shadertools';
+import {Model} from '@luma.gl/engine';
+import {Buffer} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
 import {defaultColorRange, colorRangeToFlatArray} from '../utils/color-utils';
 import type {_GPUGridLayerProps} from './gpu-grid-layer';
 import vs from './gpu-grid-cell-layer-vertex.glsl';
@@ -63,7 +64,12 @@ const defaultProps: DefaultProps<_GPUGridCellLayerProps & LayerProps> = {
 };
 
 type _GPUGridCellLayerProps = _GPUGridLayerProps<any> & {
+  cellSize: number;
   offset: number[];
+  coverage: number;
+  extruded: boolean;
+  elevationScale: number;
+  elevationRange: [number, number];
   gridSize: number[];
   gridOrigin: number[];
   gridOffset: number[];
@@ -75,6 +81,10 @@ export default class GPUGridCellLayer extends Layer<_GPUGridCellLayerProps> {
   static layerName = 'GPUGridCellLayer';
   static defaultProps = defaultProps;
 
+  state!: {
+    model?: Model;
+  };
+
   getShaders() {
     return super.getShaders({
       vs,
@@ -83,7 +93,7 @@ export default class GPUGridCellLayer extends Layer<_GPUGridCellLayerProps> {
     });
   }
 
-  initializeState({gl}: LayerContext) {
+  initializeState(): void {
     const attributeManager = this.getAttributeManager()!;
     attributeManager.addInstanced({
       colors: {
@@ -95,13 +105,13 @@ export default class GPUGridCellLayer extends Layer<_GPUGridCellLayerProps> {
         noAlloc: true
       }
     });
-    const model = this._getModel(gl);
+    const model = this._getModel();
     this._setupUniformBuffer(model);
     this.setState({model});
   }
 
-  _getModel(gl: WebGLRenderingContext): Model {
-    return new Model(gl, {
+  _getModel(): Model {
+    return new Model(this.context.device, {
       ...this.getShaders(),
       id: this.props.id,
       geometry: new CubeGeometry(),
@@ -123,30 +133,30 @@ export default class GPUGridCellLayer extends Layer<_GPUGridCellLayerProps> {
       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);
-    this.state.model
-      .setUniforms(uniforms)
-      .setUniforms(domainUniforms)
-      .setUniforms({
-        cellSize,
-        offset,
-        extruded,
-        elevationScale,
-        coverage,
-        gridSize,
-        gridOrigin,
-        gridOriginLow,
-        gridOffset,
-        gridOffsetLow,
-        colorRange,
-        elevationRange
-      })
-      .draw();
+    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);
   }
 
@@ -179,9 +189,10 @@ export default class GPUGridCellLayer extends Layer<_GPUGridCellLayerProps> {
   }
 
   private _setupUniformBuffer(model: Model): void {
-    const gl = this.context.gl as WebGL2RenderingContext;
-    const programHandle = model.program.handle;
+    // @ts-expect-error TODO v9 This code is not portable to WebGPU
+    const programHandle = model.pipeline.handle;
 
+    const gl = this.context.gl as WebGL2RenderingContext;
     const colorIndex = gl.getUniformBlockIndex(programHandle, 'ColorData');
     const elevationIndex = gl.getUniformBlockIndex(programHandle, 'ElevationData');
     gl.uniformBlockBinding(programHandle, colorIndex, COLOR_DATA_UBO_INDEX);

package/src/gpu-grid-layer/gpu-grid-layer.ts

@@ -18,8 +18,7 @@
 // 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 {GL} from '@luma.gl/constants';
 import {
   Accessor,
   AccessorFunction,
@@ -37,7 +36,7 @@ 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 {pointToDensityGridDataCPU, GridHash} from './../cpu-grid-layer/grid-aggregator';
 import GridAggregationLayer, {GridAggregationLayerProps} from '../grid-aggregation-layer';
 import {getBoundingBox, getGridParams} from '../utils/grid-aggregation-utils';
 
@@ -58,7 +57,7 @@ const defaultProps: DefaultProps<GPUGridLayerProps> = {
   // 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},
+  getPosition: {type: 'accessor', value: (x: any) => x.position},
   extruded: false,
 
   // Optional material for 'lighting' shader module
@@ -77,7 +76,7 @@ const DIMENSIONS = {
 const POSITION_ATTRIBUTE_NAME = 'positions';
 
 /** All properties supported by GPUGridLayer. */
-export type GPUGridLayerProps<DataT = any> = _GPUGridLayerProps<DataT> &
+export type GPUGridLayerProps<DataT = unknown> = _GPUGridLayerProps<DataT> &
   GridAggregationLayerProps<DataT>;
 
 /** Properties added by GPUGridLayer. */
@@ -176,8 +175,13 @@ export default class GPUGridLayer<
   static layerName = 'GPUGridLayer';
   static defaultProps = defaultProps;
 
-  initializeState({gl}: LayerContext): void {
-    const isSupported = GPUGridAggregator.isSupported(gl);
+  state!: GridAggregationLayer<DataT>['state'] & {
+    isSupported: boolean;
+    gridHash?: GridHash;
+  };
+
+  initializeState({device}: LayerContext): void {
+    const isSupported = GPUGridAggregator.isSupported(device);
     if (!isSupported) {
       log.error('GPUGridLayer is not supported on this browser, use GridLayer instead')();
     }
@@ -193,8 +197,9 @@ export default class GPUGridLayer<
           needMin: true,
           needMax: true,
           combineMaxMin: true,
-          maxMinBuffer: new Buffer(gl, {
+          maxMinBuffer: device.createBuffer({
             byteLength: 4 * 4,
+            // @ts-expect-error webgl-legacy
             accessor: {size: 4, type: GL.FLOAT, divisor: 1}
           })
         },
@@ -202,8 +207,9 @@ export default class GPUGridLayer<
           needMin: true,
           needMax: true,
           combineMaxMin: true,
-          maxMinBuffer: new Buffer(gl, {
+          maxMinBuffer: device.createBuffer({
             byteLength: 4 * 4,
+            // @ts-expect-error
             accessor: {size: 4, type: GL.FLOAT, divisor: 1}
           })
         }
@@ -273,7 +279,7 @@ export default class GPUGridLayer<
     const {index} = info;
     let object: any = null;
     if (index >= 0) {
-      const {gpuGridAggregator} = this.state;
+      const gpuGridAggregator = this.state.gpuGridAggregator!;
       const position = this.getPositionForIndex(index);
       const colorInfo = GPUGridAggregator.getAggregationData({
         pixelIndex: index,
@@ -380,8 +386,8 @@ export default class GPUGridLayer<
     const {color, elevation} = this.state.weights;
     [color, elevation].forEach(weight => {
       const {aggregationBuffer, maxMinBuffer} = weight;
-      maxMinBuffer.delete();
-      aggregationBuffer?.delete();
+      maxMinBuffer?.destroy();
+      aggregationBuffer?.destroy();
     });
     super.finalizeState(context);
   }

package/src/grid-aggregation-layer.ts

@@ -18,13 +18,13 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+import {GL} from '@luma.gl/constants';
+import {LayerContext, log, UpdateParameters, Accessor} from '@deck.gl/core';
 import AggregationLayer, {AggregationLayerProps} from './aggregation-layer';
 import GPUGridAggregator from './utils/gpu-grid-aggregation/gpu-grid-aggregator';
-import {Buffer} from '@luma.gl/core';
-import {LayerContext, log, UpdateParameters} from '@deck.gl/core';
-import GL from '@luma.gl/constants';
 import BinSorter from './utils/bin-sorter';
 import {pointToDensityGridDataCPU} from './cpu-grid-layer/grid-aggregator';
+import type {Buffer} from '@luma.gl/core';
 
 export type GridAggregationLayerProps<DataT> = AggregationLayerProps<DataT>;
 
@@ -35,20 +35,46 @@ export default abstract class GridAggregationLayer<
   static layerName = 'GridAggregationLayer';
 
   state!: AggregationLayer<DataT>['state'] & {
-    aggregationDataDirty?: any;
-    aggregationWeightsDirty?: any;
+    aggregationDataDirty?: boolean;
+    aggregationWeightsDirty?: boolean;
+    aggregationDirty?: boolean;
     gpuAggregation?: any;
     getValue?: () => any;
     sortedBins?: BinSorter;
+    weights: {
+      [key: string]: {
+        aggregationBuffer?: Buffer;
+        maxMinBuffer?: Buffer;
+        aggregationData: Float32Array | null;
+        maxMinData: Float32Array;
+        maxData: Float32Array;
+        minData: Float32Array;
+        getWeight: Accessor<DataT, number>;
+        operation: number;
+      };
+    };
+    cpuGridAggregator?: Function;
+    gpuGridAggregator?: GPUGridAggregator;
+    layerData: any;
+    numRow: number;
+    numCol: number;
+    gridOffset: {xOffset: number; yOffset: number};
+    posOffset: number[];
+    gridOrigin: number[];
+    translation: number[];
+    scaling: number[];
+    boundingBox: {xMin: number; yMin: number; xMax: number; yMax: number};
+    projectPoints?: (p: [number, number]) => [number, number];
   };
 
   initializeAggregationLayer({dimensions}) {
-    const {gl} = this.context;
     super.initializeAggregationLayer(dimensions);
     this.setState({
       // CPU aggregation results
       layerData: {},
-      gpuGridAggregator: new GPUGridAggregator(gl, {id: `${this.id}-gpu-aggregator`}),
+      gpuGridAggregator: new GPUGridAggregator(this.context.device, {
+        id: `${this.id}-gpu-aggregator`
+      }),
       cpuGridAggregator: pointToDensityGridDataCPU
     });
   }
@@ -94,13 +120,13 @@ export default abstract class GridAggregationLayer<
 
   updateShaders(shaders: any): void {
     if (this.state.gpuAggregation) {
-      this.state.gpuGridAggregator.updateShaders(shaders);
+      this.state.gpuGridAggregator!.updateShaders(shaders);
     }
   }
 
   // Methods that can be overriden by subclasses for customizations
 
-  updateAggregationState(opts) {
+  updateAggregationState(opts: UpdateParameters<this>) {
     // Sublayers should implement this method.
     log.assert(false);
   }
@@ -108,15 +134,15 @@ export default abstract class GridAggregationLayer<
   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, {
+        weight.aggregationBuffer = this.context.device.createBuffer({
           byteLength: dataBytes,
+          // @ts-expect-error legacy
           accessor: {
             size: 4,
             type: GL.FLOAT,
@@ -159,7 +185,7 @@ export default abstract class GridAggregationLayer<
     const vertexCount = this.getNumInstances();
 
     if (!gpuAggregation) {
-      const result = cpuGridAggregator(props, {
+      const result = cpuGridAggregator!(props, {
         gridOffset,
         projectPoints,
         attributes,
@@ -172,7 +198,7 @@ export default abstract class GridAggregationLayer<
       });
     } else {
       const {weights} = this.state;
-      gpuGridAggregator.run({
+      gpuGridAggregator!.run({
         weights,
         cellSize: [gridOffset.xOffset, gridOffset.yOffset],
         numCol,

package/src/grid-layer/grid-layer.ts

@@ -16,7 +16,7 @@ const defaultProps: DefaultProps<GridLayerProps> = {
 };
 
 /** All properties supported by GridLayer. */
-export type GridLayerProps<DataT = any> = _GridLayerProps<DataT> & CompositeLayerProps;
+export type GridLayerProps<DataT = unknown> = _GridLayerProps<DataT> & CompositeLayerProps;
 
 /** Properties added by GridLayer. */
 type _GridLayerProps<DataT> = CPUGridLayerProps<DataT> &
@@ -90,7 +90,7 @@ export default class GridLayer<DataT = any, ExtraPropsT extends {} = {}> extends
       // cpu aggregation is requested
       return false;
     }
-    if (!GPUGridAggregator.isSupported(this.context.gl)) {
+    if (!GPUGridAggregator.isSupported(this.context.device)) {
       return false;
     }
     if (lowerPercentile !== 0 || upperPercentile !== 100) {

package/src/heatmap-layer/heatmap-layer-utils.ts

@@ -1,5 +1,5 @@
-import GL from '@luma.gl/constants';
-import {isWebGL2} from '@luma.gl/core';
+import {Device} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
 
 export function getBounds(points: number[][]): number[] {
   // Now build bounding box in world space (aligned to world coordiante system)
@@ -79,11 +79,17 @@ export function getTextureCoordinates(point: number[], bounds: number[]) {
 }
 
 // Returns format and type for creating texture objects
-export function getTextureParams({gl, floatTargetSupport}) {
+export function getTextureParams({
+  device,
+  floatTargetSupport
+}: {
+  device: Device;
+  floatTargetSupport?: boolean;
+}) {
   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,
+        format: device.info.type === 'webgl2' ? GL.RGBA32F : GL.RGBA,
         type: GL.FLOAT
       }
     : {