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

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

@@ -19,7 +19,6 @@
 // THE SOFTWARE.
 
 /* global setTimeout clearTimeout */
-import GL from '@luma.gl/constants';
 import {
   getBounds,
   boundsContain,
@@ -28,15 +27,10 @@ import {
   getTextureCoordinates,
   getTextureParams
 } from './heatmap-layer-utils';
-import {
-  Buffer,
-  Texture2D,
-  Transform,
-  getParameters,
-  withParameters,
-  FEATURES,
-  hasFeatures
-} from '@luma.gl/core';
+import {DeviceFeature, Texture, TextureProps, TextureFormat} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+import {Transform} from '@luma.gl/engine';
+import {BufferWithAccessor, withGLParameters} from '@luma.gl/webgl';
 import {
   Accessor,
   AccessorFunction,
@@ -61,15 +55,15 @@ import vsMax from './max-vs.glsl';
 import fsMax from './max-fs.glsl';
 
 const RESOLUTION = 2; // (number of common space pixels) / (number texels)
-const TEXTURE_OPTIONS = {
+const TEXTURE_PROPS: TextureProps = {
+  format: 'rgba8unorm',
   mipmaps: false,
-  parameters: {
-    [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
-    [GL.TEXTURE_MIN_FILTER]: GL.LINEAR,
-    [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
-    [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
-  },
-  dataFormat: GL.RGBA
+  sampler: {
+    minFilter: 'nearest',
+    magFilter: 'nearest',
+    addressModeU: 'clamp-to-edge',
+    addressModeV: 'clamp-to-edge'
+  }
 };
 const DEFAULT_COLOR_DOMAIN = [0, 0];
 const AGGREGATION_MODE = {
@@ -78,7 +72,7 @@ const AGGREGATION_MODE = {
 };
 
 const defaultProps: DefaultProps<HeatmapLayerProps> = {
-  getPosition: {type: 'accessor', value: x => x.position},
+  getPosition: {type: 'accessor', value: (x: any) => x.position},
   getWeight: {type: 'accessor', value: 1},
   intensity: {type: 'number', min: 0, value: 1},
   radiusPixels: {type: 'number', min: 1, max: 100, value: 50},
@@ -91,14 +85,14 @@ const defaultProps: DefaultProps<HeatmapLayerProps> = {
   debounceTimeout: {type: 'number', min: 0, max: 1000, value: 500}
 };
 
-const REQUIRED_FEATURES = [
-  FEATURES.BLEND_EQUATION_MINMAX, // max weight calculation
-  FEATURES.TEXTURE_FLOAT // weight-map as texture
+const REQUIRED_FEATURES: DeviceFeature[] = [
+  'blend-minmax-webgl1', // max weight calculation
+  'texture-formats-float32-webgl1' // weight-map as texture
 ];
 
-const FLOAT_TARGET_FEATURES = [
-  FEATURES.COLOR_ATTACHMENT_RGBA32F, // ability to render to float texture
-  FEATURES.FLOAT_BLEND // ability to blend when rendering to float texture
+const FLOAT_TARGET_FEATURES: DeviceFeature[] = [
+  'texture-renderable-float32-webgl', // ability to render to float texture
+  'texture-blend-float-webgl1' // ability to blend when rendering to float texture
 ];
 
 const DIMENSIONS = {
@@ -107,7 +101,7 @@ const DIMENSIONS = {
   }
 };
 
-export type HeatmapLayerProps<DataT = any> = _HeatmapLayerProps<DataT> &
+export type HeatmapLayerProps<DataT = unknown> = _HeatmapLayerProps<DataT> &
   AggregationLayerProps<DataT>;
 
 type _HeatmapLayerProps<DataT> = {
@@ -198,18 +192,27 @@ export default class HeatmapLayer<
     supported: boolean;
     colorDomain?: number[];
     isWeightMapDirty?: boolean;
-    weightsTexture?: Texture2D;
+    weightsTexture?: Texture;
+    maxWeightsTexture?: Texture;
+    colorTexture?: Texture;
     zoom?: number;
     worldBounds?: number[];
     normalizedCommonBounds?: number[];
     updateTimer?: any;
-    triPositionBuffer?: Buffer;
-    triTexCoordBuffer?: Buffer;
+    triPositionBuffer?: BufferWithAccessor;
+    triTexCoordBuffer?: BufferWithAccessor;
+    weightsTransform?: Transform;
+    maxWeightTransform?: Transform;
+    textureSize: number;
+    format: TextureFormat;
+    type: GL;
+    weightsScale: number;
+    visibleWorldBounds: number[];
+    viewportCorners: number[][];
   };
 
   initializeState() {
-    const {gl} = this.context;
-    if (!hasFeatures(gl, REQUIRED_FEATURES)) {
+    if (!REQUIRED_FEATURES.every(feature => this.context.device.features.has(feature))) {
       this.setState({supported: false});
       log.error(`HeatmapLayer: ${this.id} is not supported on this browser`)();
       return;
@@ -320,13 +323,13 @@ export default class HeatmapLayer<
       colorTexture,
       updateTimer
     } = this.state;
-    weightsTransform?.delete();
-    weightsTexture?.delete();
-    maxWeightTransform?.delete();
-    maxWeightsTexture?.delete();
-    triPositionBuffer?.delete();
-    triTexCoordBuffer?.delete();
-    colorTexture?.delete();
+    weightsTransform?.destroy();
+    weightsTexture?.destroy();
+    maxWeightTransform?.destroy();
+    maxWeightsTexture?.destroy();
+    triPositionBuffer?.destroy();
+    triTexCoordBuffer?.destroy();
+    colorTexture?.destroy();
     if (updateTimer) {
       clearTimeout(updateTimer);
     }
@@ -336,7 +339,7 @@ export default class HeatmapLayer<
 
   // 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
     });
@@ -349,11 +352,12 @@ export default class HeatmapLayer<
     } = {};
     const {dimensions} = this.state;
     changeFlags.dataChanged =
-      this.isAttributeChanged() || // if any attribute is changed
-      this.isAggregationDirty(opts, {
+      (this.isAttributeChanged() && 'attribute changed') || // if any attribute is changed
+      (this.isAggregationDirty(opts, {
         compareAll: true,
         dimension: dimensions.data
-      });
+      }) &&
+        'aggregation is dirty');
     changeFlags.viewportChanged = opts.changeFlags.viewportChanged;
 
     const {zoom} = this.state;
@@ -365,18 +369,17 @@ export default class HeatmapLayer<
   }
 
   _createTextures() {
-    const {gl} = this.context;
     const {textureSize, format, type} = this.state;
 
     this.setState({
-      weightsTexture: new Texture2D(gl, {
+      weightsTexture: this.context.device.createTexture({
         width: textureSize,
         height: textureSize,
         format,
         type,
-        ...TEXTURE_OPTIONS
+        ...TEXTURE_PROPS
       }),
-      maxWeightsTexture: new Texture2D(gl, {format, type, ...TEXTURE_OPTIONS}) // 1 X 1 texture,
+      maxWeightsTexture: this.context.device.createTexture({format, type, ...TEXTURE_PROPS}) // 1 X 1 texture,
     });
   }
 
@@ -390,12 +393,12 @@ export default class HeatmapLayer<
   }
 
   _setupTextureParams() {
-    const {gl} = this.context;
+    const {device} = this.context;
     const {weightsTextureSize} = this.props;
 
-    const textureSize = Math.min(weightsTextureSize, getParameters(gl, gl.MAX_TEXTURE_SIZE));
-    const floatTargetSupport = hasFeatures(gl, FLOAT_TARGET_FEATURES);
-    const {format, type} = getTextureParams({gl, floatTargetSupport});
+    const textureSize = Math.min(weightsTextureSize, device.limits.maxTextureDimension2D as number);
+    const floatTargetSupport = FLOAT_TARGET_FEATURES.every(feature => device.features.has(feature));
+    const {format, type} = getTextureParams({device, floatTargetSupport});
     const weightsScale = floatTargetSupport ? 1 : 1 / 255;
     this.setState({textureSize, format, type, weightsScale});
     if (!floatTargetSupport) {
@@ -420,12 +423,11 @@ export default class HeatmapLayer<
   }
 
   _createWeightsTransform(shaders = {}) {
-    const {gl} = this.context;
     let {weightsTransform} = this.state;
     const {weightsTexture} = this.state;
     weightsTransform?.delete();
 
-    weightsTransform = new Transform(gl, {
+    weightsTransform = new Transform(this.context.device, {
       id: `${this.id}-weights-transform`,
       elementCount: 1,
       _targetTexture: weightsTexture,
@@ -436,7 +438,6 @@ export default class HeatmapLayer<
   }
 
   _setupResources() {
-    const {gl} = this.context;
     this._createTextures();
     const {textureSize, weightsTexture, maxWeightsTexture} = this.state;
 
@@ -444,7 +445,7 @@ export default class HeatmapLayer<
     this._createWeightsTransform(weightsTransformShaders);
 
     const maxWeightsTransformShaders = this.getShaders('max-weights-transform');
-    const maxWeightTransform = new Transform(gl, {
+    const maxWeightTransform = new Transform(this.context.device, {
       id: `${this.id}-max-weights-transform`,
       _sourceTextures: {
         inTexture: weightsTexture
@@ -460,12 +461,14 @@ export default class HeatmapLayer<
       maxWeightsTexture,
       maxWeightTransform,
       zoom: null,
-      triPositionBuffer: new Buffer(gl, {
+      triPositionBuffer: this.context.device.createBuffer({
         byteLength: 48,
+        // @ts-expect-error
         accessor: {size: 3}
       }),
-      triTexCoordBuffer: new Buffer(gl, {
+      triTexCoordBuffer: this.context.device.createBuffer({
         byteLength: 48,
+        // @ts-expect-error
         accessor: {size: 2}
       })
     });
@@ -479,7 +482,7 @@ export default class HeatmapLayer<
 
   _updateMaxWeightValue() {
     const {maxWeightTransform} = this.state;
-    maxWeightTransform.run({
+    maxWeightTransform!.run({
       parameters: {
         blend: true,
         depthTest: false,
@@ -547,12 +550,12 @@ export default class HeatmapLayer<
 
     const {viewport} = this.context;
 
-    triPositionBuffer.subData(packVertices(viewportCorners, 3));
+    triPositionBuffer!.subData(packVertices(viewportCorners, 3));
 
     const textureBounds = viewportCorners.map(p =>
       getTextureCoordinates(viewport.projectPosition(p), normalizedCommonBounds!)
     );
-    triTexCoordBuffer.subData(packVertices(textureBounds, 2));
+    triTexCoordBuffer!.subData(packVertices(textureBounds, 2));
   }
 
   _updateColorTexture(opts) {
@@ -561,16 +564,17 @@ export default class HeatmapLayer<
     const colors = colorRangeToFlatArray(colorRange, false, Uint8Array as any);
 
     if (colorTexture) {
+      // @ts-expect-error TODO - no longer supported in v9?
       colorTexture.setImageData({
         data: colors,
         width: colorRange.length
       });
     } else {
-      colorTexture = new Texture2D(this.context.gl, {
+      colorTexture = this.context.device.createTexture({
         data: colors,
         width: colorRange.length,
         height: 1,
-        ...TEXTURE_OPTIONS
+        ...TEXTURE_PROPS
       });
     }
     this.setState({colorTexture});
@@ -578,7 +582,8 @@ export default class HeatmapLayer<
 
   _updateWeightmap() {
     const {radiusPixels, colorDomain, aggregation} = this.props;
-    const {weightsTransform, worldBounds, textureSize, weightsTexture, weightsScale} = this.state;
+    const {worldBounds, textureSize, weightsScale} = this.state;
+    const weightsTransform = this.state.weightsTransform!;
     this.state.isWeightMapDirty = false;
 
     // convert world bounds to common using Layer's coordiante system and origin
@@ -609,7 +614,7 @@ export default class HeatmapLayer<
       elementCount: this.getNumInstances()
     });
     // Need to explictly specify clearColor as external context may have modified it
-    withParameters(this.context.gl, {clearColor: [0, 0, 0, 0]}, () => {
+    withGLParameters(this.context.gl, {clearColor: [0, 0, 0, 0]}, () => {
       weightsTransform.run({
         uniforms,
         parameters: {
@@ -619,6 +624,7 @@ export default class HeatmapLayer<
           blendEquation: GL.FUNC_ADD
         },
         clearRenderTarget: true,
+        // @ts-expect-error TODO - no longer supported in v9?
         attributes: this.getAttributes(),
         moduleSettings: this.getModuleSettings()
       });
@@ -626,10 +632,11 @@ export default class HeatmapLayer<
     this._updateMaxWeightValue();
 
     // reset filtering parameters (TODO: remove once luma issue#1193 is fixed)
-    weightsTexture.setParameters({
-      [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
-      [GL.TEXTURE_MIN_FILTER]: GL.LINEAR
-    });
+    // TODO v9 sampler support in luma.gl needs to improve
+    // weightsTexture.setSampler({
+    //   magFilter: 'linear',
+    //   minFilter: 'linear'
+    // });
   }
 
   _debouncedUpdateWeightmap(fromTimer = false) {

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

@@ -18,8 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import GL from '@luma.gl/constants';
-import {Model, Geometry, Texture2D} from '@luma.gl/core';
+import type {Device, Texture} from '@luma.gl/core';
+import {Model, Geometry} from '@luma.gl/engine';
+import {GL} from '@luma.gl/constants';
 import {Layer, LayerContext, project32} from '@deck.gl/core';
 import vs from './triangle-layer-vertex.glsl';
 import fs from './triangle-layer-fragment.glsl';
@@ -30,37 +31,41 @@ type _TriangleLayerProps = {
   threshold: number;
   intensity: number;
   vertexCount: number;
-  colorTexture: Texture2D;
-  maxTexture: Texture2D;
-  texture: Texture2D;
+  colorTexture: Texture;
+  maxTexture: Texture;
+  texture: Texture;
 };
 
 export default class TriangleLayer extends Layer<_TriangleLayerProps> {
   static layerName = 'TriangleLayer';
 
+  state!: {
+    model: Model;
+  };
+
   getShaders() {
     return {vs, fs, modules: [project32]};
   }
 
-  initializeState({gl}: LayerContext): void {
+  initializeState({device}: LayerContext): void {
     const attributeManager = this.getAttributeManager()!;
     attributeManager.add({
       positions: {size: 3, noAlloc: true},
       texCoords: {size: 2, noAlloc: true}
     });
     this.setState({
-      model: this._getModel(gl)
+      model: this._getModel(device)
     });
   }
 
-  _getModel(gl: WebGLRenderingContext): Model {
+  _getModel(device: Device): Model {
     const {vertexCount} = this.props;
 
-    return new Model(gl, {
+    return new Model(device, {
       ...this.getShaders(),
       id: this.props.id,
       geometry: new Geometry({
-        drawMode: GL.TRIANGLE_FAN,
+        topology: 'triangle-fan-webgl',
         vertexCount
       })
     });
@@ -72,17 +77,16 @@ export default class TriangleLayer extends Layer<_TriangleLayerProps> {
     const {texture, maxTexture, colorTexture, intensity, threshold, aggregationMode, colorDomain} =
       this.props;
 
-    model
-      .setUniforms({
-        ...uniforms,
-        texture,
-        maxTexture,
-        colorTexture,
-        intensity,
-        threshold,
-        aggregationMode,
-        colorDomain
-      })
-      .draw();
+    model.setUniforms({
+      ...uniforms,
+      texture,
+      maxTexture,
+      colorTexture,
+      intensity,
+      threshold,
+      aggregationMode,
+      colorDomain
+    });
+    model.draw(this.context.renderPass);
   }
 }

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

@@ -38,7 +38,11 @@ export function pointToHexbin(props, aggregationParams) {
   const radiusCommon = getRadiusInCommon(radius, viewport, centerLngLat);
 
   // add world space coordinates to points
-  const screenPoints = [];
+  const screenPoints: {
+    screenCoord: number[];
+    source: any;
+    index: number;
+  }[] = [];
   const {iterable, objectInfo} = createIterable(data);
   const positions = attributes.positions.value;
   const {size} = attributes.positions.getAccessor();

package/src/hexagon-layer/hexagon-layer.ts

@@ -29,6 +29,7 @@ import {
   DefaultProps
 } from '@deck.gl/core';
 import {ColumnLayer} from '@deck.gl/layers';
+import {GL} from '@luma.gl/constants';
 
 import {defaultColorRange} from '../utils/color-utils';
 
@@ -36,7 +37,6 @@ import {pointToHexbin} from './hexagon-aggregator';
 import CPUAggregator from '../utils/cpu-aggregator';
 import AggregationLayer, {AggregationLayerProps} from '../aggregation-layer';
 
-import GL from '@luma.gl/constants';
 import {AggregateAccessor} from '../types';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -70,7 +70,7 @@ const defaultProps: DefaultProps<HexagonLayerProps> = {
   coverage: {type: 'number', min: 0, max: 1, value: 1},
   extruded: false,
   hexagonAggregator: pointToHexbin,
-  getPosition: {type: 'accessor', value: x => x.position},
+  getPosition: {type: 'accessor', value: (x: any) => x.position},
   // Optional material for 'lighting' shader module
   material: true,
 
@@ -79,11 +79,11 @@ const defaultProps: DefaultProps<HexagonLayerProps> = {
 };
 
 /** All properties supported by by HexagonLayer. */
-export type HexagonLayerProps<DataT = any> = _HexagonLayerProps<DataT> &
+export type HexagonLayerProps<DataT = unknown> = _HexagonLayerProps<DataT> &
   AggregationLayerProps<DataT>;
 
 /** Properties added by HexagonLayer. */
-type _HexagonLayerProps<DataT = any> = {
+type _HexagonLayerProps<DataT = unknown> = {
   /**
    * Radius of hexagon bin in meters. The hexagons are pointy-topped (rather than flat-topped).
    * @default 1000
@@ -256,7 +256,8 @@ export default class HexagonLayer<DataT, ExtraPropsT extends {} = {}> extends Ag
 
   state!: AggregationLayer<DataT>['state'] & {
     cpuAggregator: CPUAggregator;
-    aggregatorState: any;
+    aggregatorState: CPUAggregator['state'];
+    vertices: number[][] | null;
   };
   initializeState() {
     const cpuAggregator = new CPUAggregator({
@@ -288,6 +289,7 @@ export default class HexagonLayer<DataT, ExtraPropsT extends {} = {}> extends Ag
       if (this.state.aggregatorState.layerData !== aggregatorState.layerData) {
         // if user provided custom aggregator and returns hexagonVertices,
         // Need to recalculate radius and angle based on vertices
+        // @ts-expect-error
         const {hexagonVertices} = aggregatorState.layerData || {};
         this.setState({
           vertices: hexagonVertices && this.convertLatLngToMeterOffset(hexagonVertices)
@@ -359,6 +361,7 @@ export default class HexagonLayer<DataT, ExtraPropsT extends {} = {}> extends Ag
       ? {vertices, radius: 1}
       : {
           // default geometry
+          // @ts-expect-error TODO - undefined property?
           radius: aggregatorState.layerData.radiusCommon || 1,
           radiusUnits: 'common',
           angle: 90

package/src/index.ts

@@ -17,7 +17,6 @@
 // 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.
-/* eslint-disable max-len */
 
 export {default as ScreenGridLayer} from './screen-grid-layer/screen-grid-layer';
 export {default as CPUGridLayer} from './cpu-grid-layer/cpu-grid-layer';

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

@@ -18,9 +18,10 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import GL from '@luma.gl/constants';
-import {Model, Geometry, FEATURES, hasFeatures, Texture2D, DefaultProps} from '@luma.gl/core';
-import {Layer, LayerProps, log, picking, UpdateParameters} from '@deck.gl/core';
+import {Device, Texture} from '@luma.gl/core';
+import {Model, Geometry} from '@luma.gl/engine';
+import {GL} from '@luma.gl/constants';
+import {Layer, LayerProps, log, picking, UpdateParameters, DefaultProps} from '@deck.gl/core';
 import {defaultColorRange, colorRangeToFlatArray} from '../utils/color-utils';
 import vs from './screen-grid-layer-vertex.glsl';
 import fs from './screen-grid-layer-fragment.glsl';
@@ -31,19 +32,20 @@ const DEFAULT_MAXCOLOR = [0, 255, 0, 255];
 const COLOR_PROPS = ['minColor', 'maxColor', 'colorRange', 'colorDomain'];
 
 const defaultProps: DefaultProps<ScreenGridCellLayerProps> = {
-  cellSizePixels: {value: 100, min: 1},
-  cellMarginPixels: {value: 2, min: 0, max: 5},
+  cellSizePixels: {type: 'number', value: 100, min: 1},
+  cellMarginPixels: {type: 'number', value: 2, min: 0, max: 5},
 
   colorDomain: null,
   colorRange: defaultColorRange
 };
 
 /** All properties supported by ScreenGridCellLayer. */
-export type ScreenGridCellLayerProps<DataT = any> = _ScreenGridCellLayerProps<DataT> & LayerProps;
+export type ScreenGridCellLayerProps<DataT = unknown> = _ScreenGridCellLayerProps<DataT> &
+  LayerProps;
 
 /** Proprties added by ScreenGridCellLayer. */
 export type _ScreenGridCellLayerProps<DataT> = _ScreenGridLayerProps<DataT> & {
-  maxTexture: Texture2D;
+  maxTexture: Texture;
 };
 
 export default class ScreenGridCellLayer<DataT = any, ExtraPropsT extends {} = {}> extends Layer<
@@ -52,19 +54,18 @@ export default class ScreenGridCellLayer<DataT = any, ExtraPropsT extends {} = {
   static layerName = 'ScreenGridCellLayer';
   static defaultProps = defaultProps;
 
-  static isSupported(gl) {
-    return hasFeatures(gl, [FEATURES.TEXTURE_FLOAT]);
+  static isSupported(device: Device) {
+    return device.features.has('texture-formats-float32-webgl1');
   }
 
-  state!: Layer['state'] & {
-    model: Model;
+  state!: {
+    model?: Model;
   };
   getShaders() {
     return {vs, fs, modules: [picking]};
   }
 
   initializeState() {
-    const {gl} = this.context;
     const attributeManager = this.getAttributeManager()!;
     attributeManager.addInstanced({
       // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -72,7 +73,7 @@ export default class ScreenGridCellLayer<DataT = any, ExtraPropsT extends {} = {
       instanceCounts: {size: 4, noAlloc: true}
     });
     this.setState({
-      model: this._getModel(gl)
+      model: this._getModel()
     });
   }
 
@@ -104,22 +105,23 @@ export default class ScreenGridCellLayer<DataT = any, ExtraPropsT extends {} = {
     // If colorDomain not specified we use default domain [1, maxCount]
     // maxCount value will be sampled form maxTexture in vertex shader.
     const colorDomain = this.props.colorDomain || [1, 0];
-    const {model} = this.state;
-    model
-      .setUniforms(uniforms)
-      .setUniforms({
-        minColor,
-        maxColor,
-        maxTexture,
-        colorDomain
-      })
-      .draw({
-        parameters: {
-          depthTest: false,
-          depthMask: false,
-          ...parameters
-        }
-      });
+    const model = this.state.model!;
+    model.setUniforms(uniforms);
+    model.setBindings({
+      maxTexture
+    });
+    model.setUniforms({
+      minColor,
+      maxColor,
+      colorDomain
+    });
+    model.setParameters({
+      depthWriteEnabled: false,
+      // How to specify depth mask in WebGPU?
+      // depthMask: false,
+      ...parameters
+    });
+    model.draw(this.context.renderPass);
   }
 
   calculateInstancePositions(attribute, {numInstances}) {
@@ -140,16 +142,17 @@ export default class ScreenGridCellLayer<DataT = any, ExtraPropsT extends {} = {
 
   // Private Methods
 
-  _getModel(gl: WebGLRenderingContext): Model {
-    return new Model(gl, {
+  _getModel(): Model {
+    return new Model(this.context.device, {
       ...this.getShaders(),
       id: this.props.id,
       geometry: new Geometry({
-        drawMode: GL.TRIANGLE_FAN,
+        topology: 'triangle-fan-webgl',
         attributes: {
           positions: new Float32Array([0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0])
         }
       }),
+      // @ts-expect-error TODO v9 API not as dynamic
       isInstanced: true
     });
   }
@@ -170,7 +173,7 @@ export default class ScreenGridCellLayer<DataT = any, ExtraPropsT extends {} = {
   }
 
   _updateUniforms(oldProps, props, changeFlags): void {
-    const {model} = this.state;
+    const model = this.state.model!;
     if (COLOR_PROPS.some(key => oldProps[key] !== props[key])) {
       model.setUniforms({shouldUseMinMax: this._shouldUseMinMax()});
     }