@deck.gl/aggregation-layers 9.4.0-alpha.1 → 9.4.0-beta.1

package/dist.webgl-only/index.js

@@ -0,0 +1,11 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+export { default as ScreenGridLayer } from "./screen-grid-layer/screen-grid-layer.js";
+export { default as HexagonLayer } from "./hexagon-layer/hexagon-layer.js";
+export { default as ContourLayer } from "./contour-layer/contour-layer.js";
+export { default as GridLayer } from "./grid-layer/grid-layer.js";
+export { default as HeatmapLayer } from "./heatmap-layer/heatmap-layer.js";
+export { default as _AggregationLayer } from "./common/aggregation-layer.js";
+export { WebGLAggregator, CPUAggregator } from "./common/aggregator/index.js";
+//# sourceMappingURL=index.js.map

package/dist.webgl-only/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAEpC,OAAO,EAAC,OAAO,IAAI,eAAe,EAAC,iDAA8C;AACjF,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,yCAAsC;AACtE,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,yCAAsC;AACtE,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,mCAAgC;AAC7D,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,yCAAsC;AAEtE,OAAO,EAAC,OAAO,IAAI,iBAAiB,EAAC,sCAAmC;AACxE,OAAO,EAAC,eAAe,EAAE,aAAa,EAAC,qCAAkC"}

package/dist.webgl-only/screen-grid-layer/bin-options-uniforms.js

@@ -0,0 +1,16 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+const uniformBlock = /* glsl */ `\
+layout(std140) uniform binOptionsUniforms {
+  float cellSizePixels;
+} binOptions;
+`;
+export const binOptionsUniforms = {
+    name: 'binOptions',
+    vs: uniformBlock,
+    uniformTypes: {
+        cellSizePixels: 'f32'
+    }
+};
+//# sourceMappingURL=bin-options-uniforms.js.map

package/dist.webgl-only/screen-grid-layer/bin-options-uniforms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bin-options-uniforms.js","sourceRoot":"","sources":["../../src/screen-grid-layer/bin-options-uniforms.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAIpC,MAAM,YAAY,GAAG,UAAU,CAAC;;;;CAI/B,CAAC;AAMF,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,IAAI,EAAE,YAAY;IAClB,EAAE,EAAE,YAAY;IAChB,YAAY,EAAE;QACZ,cAAc,EAAE,KAAK;KACtB;CAC0C,CAAC"}

package/dist.webgl-only/screen-grid-layer/screen-grid-cell-layer.js

@@ -0,0 +1,88 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { Model, Geometry } from '@luma.gl/engine';
+import { Layer, color, picking } from '@deck.gl/core';
+import { createColorRangeTexture, updateColorRangeTexture } from "../common/utils/color-utils.js";
+import source from "./screen-grid-cell-layer.wgsl.js";
+import vs from "./screen-grid-layer-vertex.glsl.js";
+import fs from "./screen-grid-layer-fragment.glsl.js";
+import { screenGridUniforms } from "./screen-grid-layer-uniforms.js";
+class ScreenGridCellLayer extends Layer {
+    getShaders() {
+        return super.getShaders({ source, vs, fs, modules: [color, picking, screenGridUniforms] });
+    }
+    initializeState() {
+        this.getAttributeManager().addInstanced({
+            instancePositions: {
+                size: 2,
+                type: 'float32',
+                accessor: 'getBin'
+            },
+            instanceWeights: {
+                size: 1,
+                type: 'float32',
+                accessor: 'getWeight'
+            }
+        });
+        this.state.model = this._getModel();
+    }
+    updateState(params) {
+        super.updateState(params);
+        const { props, oldProps, changeFlags } = params;
+        const model = this.state.model;
+        if (oldProps.colorRange !== props.colorRange) {
+            this.state.colorTexture?.destroy();
+            this.state.colorTexture = createColorRangeTexture(this.context.device, props.colorRange, props.colorScaleType);
+            const screenGridProps = { colorRange: this.state.colorTexture };
+            model.shaderInputs.setProps({ screenGrid: screenGridProps });
+        }
+        else if (oldProps.colorScaleType !== props.colorScaleType) {
+            updateColorRangeTexture(this.state.colorTexture, props.colorScaleType);
+        }
+        if (oldProps.cellMarginPixels !== props.cellMarginPixels ||
+            oldProps.cellSizePixels !== props.cellSizePixels ||
+            changeFlags.viewportChanged) {
+            const { width, height } = this.context.viewport;
+            const { cellSizePixels: gridSize, cellMarginPixels } = this.props;
+            const cellSize = Math.max(gridSize - cellMarginPixels, 0);
+            const screenGridProps = {
+                gridSizeClipspace: [(gridSize / width) * 2, (gridSize / height) * 2],
+                cellSizeClipspace: [(cellSize / width) * 2, (cellSize / height) * 2]
+            };
+            model.shaderInputs.setProps({ screenGrid: screenGridProps });
+        }
+    }
+    finalizeState(context) {
+        super.finalizeState(context);
+        this.state.colorTexture?.destroy();
+    }
+    draw({ uniforms }) {
+        const colorDomain = this.props.colorDomain();
+        const model = this.state.model;
+        const screenGridProps = { colorDomain };
+        model.shaderInputs.setProps({ screenGrid: screenGridProps });
+        model.draw(this.context.renderPass);
+    }
+    // Private Methods
+    _getModel() {
+        return new Model(this.context.device, {
+            ...this.getShaders(),
+            id: this.props.id,
+            bufferLayout: this.getAttributeManager().getBufferLayouts(),
+            geometry: new Geometry({
+                topology: 'triangle-strip',
+                attributes: {
+                    positions: {
+                        value: new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]),
+                        size: 2
+                    }
+                }
+            }),
+            isInstanced: true
+        });
+    }
+}
+ScreenGridCellLayer.layerName = 'ScreenGridCellLayer';
+export default ScreenGridCellLayer;
+//# sourceMappingURL=screen-grid-cell-layer.js.map

package/dist.webgl-only/screen-grid-layer/screen-grid-cell-layer.js.map

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

package/dist.webgl-only/screen-grid-layer/screen-grid-cell-layer.wgsl.js

@@ -0,0 +1,5 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+export default /* wgsl */ null;
+//# sourceMappingURL=screen-grid-cell-layer.wgsl.js.map

package/dist.webgl-only/screen-grid-layer/screen-grid-cell-layer.wgsl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screen-grid-cell-layer.wgsl.js","sourceRoot":"","sources":["../../src/screen-grid-layer/screen-grid-cell-layer.wgsl.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAEpC,eAAe,UAAU,MAuEvB"}

package/dist.webgl-only/screen-grid-layer/screen-grid-layer-fragment.glsl.js

@@ -0,0 +1,16 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+/* fragment shader for the grid-layer */
+export default /* glsl */ `\
+#version 300 es
+#define SHADER_NAME screen-grid-layer-fragment-shader
+precision highp float;
+in vec4 vColor;
+out vec4 fragColor;
+void main(void) {
+fragColor = vColor;
+DECKGL_FILTER_COLOR(fragColor, geometry);
+}
+`;
+//# sourceMappingURL=screen-grid-layer-fragment.glsl.js.map

package/dist.webgl-only/screen-grid-layer/screen-grid-layer-fragment.glsl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screen-grid-layer-fragment.glsl.js","sourceRoot":"","sources":["../../src/screen-grid-layer/screen-grid-layer-fragment.glsl.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAEpC,wCAAwC;AACxC,eAAe,UAAU;;;;;;;;;;EAevB"}

package/dist.webgl-only/screen-grid-layer/screen-grid-layer-uniforms.js

@@ -0,0 +1,22 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+const uniformBlockWGSL = null;
+const uniformBlock = /* glsl */ `\
+layout(std140) uniform screenGridUniforms {
+  vec2 cellSizeClipspace;
+  vec2 gridSizeClipspace;
+  vec2 colorDomain;
+} screenGrid;
+`;
+export const screenGridUniforms = {
+    name: 'screenGrid',
+    source: uniformBlockWGSL,
+    vs: uniformBlock,
+    uniformTypes: {
+        cellSizeClipspace: 'vec2<f32>',
+        gridSizeClipspace: 'vec2<f32>',
+        colorDomain: 'vec2<f32>'
+    }
+};
+//# sourceMappingURL=screen-grid-layer-uniforms.js.map

package/dist.webgl-only/screen-grid-layer/screen-grid-layer-uniforms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screen-grid-layer-uniforms.js","sourceRoot":"","sources":["../../src/screen-grid-layer/screen-grid-layer-uniforms.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAKpC,MAAM,gBAAgB,QAUpB;AAEF,MAAM,YAAY,GAAG,UAAU,CAAC;;;;;;CAM/B,CAAC;AASF,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,IAAI,EAAE,YAAY;IAClB,MAAM,EAAE,gBAAgB;IACxB,EAAE,EAAE,YAAY;IAChB,YAAY,EAAE;QACZ,iBAAiB,EAAE,WAAW;QAC9B,iBAAiB,EAAE,WAAW;QAC9B,WAAW,EAAE,WAAW;KACzB;CAC+C,CAAC"}

package/dist.webgl-only/screen-grid-layer/screen-grid-layer-vertex.glsl.js

@@ -0,0 +1,31 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+export default /* glsl */ `\
+#version 300 es
+#define SHADER_NAME screen-grid-layer-vertex-shader
+#define RANGE_COUNT 6
+in vec2 positions;
+in vec2 instancePositions;
+in float instanceWeights;
+uniform sampler2D colorRange;
+out vec4 vColor;
+vec4 interp(float value, vec2 domain, sampler2D range) {
+float r = (value - domain.x) / (domain.y - domain.x);
+return texture(range, vec2(r, 0.5));
+}
+void main(void) {
+if (isnan(instanceWeights)) {
+gl_Position = vec4(0.);
+return;
+}
+vec2 pos = instancePositions * screenGrid.gridSizeClipspace + positions * screenGrid.cellSizeClipspace;
+pos.x = pos.x - 1.0;
+pos.y = 1.0 - pos.y;
+gl_Position = vec4(pos, 0., 1.);
+vColor = interp(instanceWeights, screenGrid.colorDomain, colorRange);
+vColor.a *= layer.opacity;
+picking_setPickingColorFromInstanceID();
+}
+`;
+//# sourceMappingURL=screen-grid-layer-vertex.glsl.js.map

package/dist.webgl-only/screen-grid-layer/screen-grid-layer-vertex.glsl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screen-grid-layer-vertex.glsl.js","sourceRoot":"","sources":["../../src/screen-grid-layer/screen-grid-layer-vertex.glsl.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAEpC,eAAe,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCvB"}

package/dist.webgl-only/screen-grid-layer/screen-grid-layer.js

@@ -0,0 +1,194 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { project32 } from '@deck.gl/core';
+import { WebGLAggregator, CPUAggregator } from "../common/aggregator/index.js";
+import AggregationLayer from "../common/aggregation-layer.js";
+import ScreenGridCellLayer from "./screen-grid-cell-layer.js";
+import { binOptionsUniforms } from "./bin-options-uniforms.js";
+import { defaultColorRange } from "../common/utils/color-utils.js";
+const defaultProps = {
+    cellSizePixels: { type: 'number', value: 100, min: 1 },
+    cellMarginPixels: { type: 'number', value: 2, min: 0 },
+    colorRange: defaultColorRange,
+    colorScaleType: 'linear',
+    getPosition: { type: 'accessor', value: (d) => d.position },
+    getWeight: { type: 'accessor', value: 1 },
+    gpuAggregation: true,
+    aggregation: 'SUM'
+};
+/** Aggregates data into histogram bins and renders them as a grid. */
+class ScreenGridLayer extends AggregationLayer {
+    getAggregatorType() {
+        return this.props.gpuAggregation && WebGLAggregator.isSupported(this.context.device)
+            ? 'gpu'
+            : 'cpu';
+    }
+    createAggregator(type) {
+        if (type === 'cpu' || !WebGLAggregator.isSupported(this.context.device)) {
+            return new CPUAggregator({
+                dimensions: 2,
+                getBin: {
+                    sources: ['positions'],
+                    getValue: ({ positions }, index, opts) => {
+                        const viewport = this.context.viewport;
+                        const p = viewport.project(positions);
+                        const cellSizePixels = opts.cellSizePixels;
+                        if (p[0] < 0 || p[0] >= viewport.width || p[1] < 0 || p[1] >= viewport.height) {
+                            // Not on screen
+                            return null;
+                        }
+                        return [Math.floor(p[0] / cellSizePixels), Math.floor(p[1] / cellSizePixels)];
+                    }
+                },
+                getValue: [{ sources: ['counts'], getValue: ({ counts }) => counts }]
+            });
+        }
+        return new WebGLAggregator(this.context.device, {
+            dimensions: 2,
+            channelCount: 1,
+            bufferLayout: this.getAttributeManager().getBufferLayouts({ isInstanced: false }),
+            ...super.getShaders({
+                modules: [project32, binOptionsUniforms],
+                vs: `
+  in vec3 positions;
+  in vec3 positions64Low;
+  in float counts;
+  
+  void getBin(out ivec2 binId) {
+    vec4 pos = project_position_to_clipspace(positions, positions64Low, vec3(0.0));
+    vec2 screenCoords = vec2(pos.x / pos.w + 1.0, 1.0 - pos.y / pos.w) / 2.0 * project.viewportSize.xy / project.devicePixelRatio;
+    vec2 gridCoords = floor(screenCoords / binOptions.cellSizePixels);
+    binId = ivec2(gridCoords);
+  }
+  void getValue(out float weight) {
+    weight = counts;
+  }
+  `
+            })
+        });
+    }
+    initializeState() {
+        super.initializeState();
+        const attributeManager = this.getAttributeManager();
+        attributeManager.add({
+            positions: {
+                size: 3,
+                accessor: 'getPosition',
+                type: 'float64',
+                fp64: this.use64bitPositions()
+            },
+            // this attribute is used in gpu aggregation path only
+            counts: { size: 1, accessor: 'getWeight' }
+        });
+    }
+    shouldUpdateState({ changeFlags }) {
+        return changeFlags.somethingChanged;
+    }
+    updateState(params) {
+        const aggregatorChanged = super.updateState(params);
+        const { props, oldProps, changeFlags } = params;
+        const { cellSizePixels, aggregation } = props;
+        if (aggregatorChanged ||
+            changeFlags.dataChanged ||
+            changeFlags.updateTriggersChanged ||
+            changeFlags.viewportChanged ||
+            aggregation !== oldProps.aggregation ||
+            cellSizePixels !== oldProps.cellSizePixels) {
+            const { width, height } = this.context.viewport;
+            const { aggregator } = this.state;
+            if (aggregator instanceof WebGLAggregator) {
+                aggregator.setProps({
+                    binIdRange: [
+                        [0, Math.ceil(width / cellSizePixels)],
+                        [0, Math.ceil(height / cellSizePixels)]
+                    ]
+                });
+            }
+            aggregator.setProps({
+                pointCount: this.getNumInstances(),
+                operations: [aggregation],
+                binOptions: {
+                    cellSizePixels
+                }
+            });
+        }
+        if (changeFlags.viewportChanged) {
+            // Rerun aggregation on viewport change
+            this.state.aggregator.setNeedsUpdate();
+        }
+        return aggregatorChanged;
+    }
+    onAttributeChange(id) {
+        const { aggregator } = this.state;
+        switch (id) {
+            case 'positions':
+                aggregator.setNeedsUpdate();
+                break;
+            case 'counts':
+                aggregator.setNeedsUpdate(0);
+                break;
+            default:
+            // This should not happen
+        }
+    }
+    renderLayers() {
+        const { aggregator } = this.state;
+        const CellLayerClass = this.getSubLayerClass('cells', ScreenGridCellLayer);
+        const binAttribute = aggregator.getBins();
+        const weightAttribute = aggregator.getResult(0);
+        return new CellLayerClass(this.props, this.getSubLayerProps({
+            id: 'cell-layer'
+        }), {
+            data: {
+                length: aggregator.binCount,
+                attributes: {
+                    getBin: binAttribute,
+                    getWeight: weightAttribute
+                }
+            },
+            // Data has changed shallowly, but we likely don't need to update the attributes
+            dataComparator: (data, oldData) => data.length === oldData.length,
+            updateTriggers: {
+                getBin: [binAttribute],
+                getWeight: [weightAttribute]
+            },
+            parameters: {
+                depthWriteEnabled: false,
+                ...this.props.parameters
+            },
+            // Evaluate domain at draw() time
+            colorDomain: () => this.props.colorDomain || aggregator.getResultDomain(0),
+            // Extensions are already handled by the GPUAggregator, do not pass it down
+            extensions: []
+        });
+    }
+    getPickingInfo(params) {
+        const info = params.info;
+        const { index } = info;
+        if (index >= 0) {
+            const bin = this.state.aggregator.getBin(index);
+            let object;
+            if (bin) {
+                object = {
+                    col: bin.id[0],
+                    row: bin.id[1],
+                    value: bin.value[0],
+                    count: bin.count
+                };
+                if (bin.pointIndices) {
+                    object.pointIndices = bin.pointIndices;
+                    object.points = Array.isArray(this.props.data)
+                        ? bin.pointIndices.map(i => this.props.data[i])
+                        : [];
+                }
+            }
+            info.object = object;
+        }
+        return info;
+    }
+}
+ScreenGridLayer.layerName = 'ScreenGridLayer';
+ScreenGridLayer.defaultProps = defaultProps;
+export default ScreenGridLayer;
+//# sourceMappingURL=screen-grid-layer.js.map

package/dist.webgl-only/screen-grid-layer/screen-grid-layer.js.map

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

package/package.json

@@ -3,7 +3,7 @@
   "description": "deck.gl layers that aggregate the input data into alternative representations",
   "license": "MIT",
   "type": "module",
-  "version": "9.4.0-alpha.1",
+  "version": "9.4.0-beta.1",
   "publishConfig": {
     "access": "public"
   },
@@ -17,18 +17,27 @@
     "type": "git",
     "url": "https://github.com/visgl/deck.gl.git"
   },
+  "bugs": {
+    "url": "https://github.com/visgl/deck.gl/issues"
+  },
+  "homepage": "https://deck.gl",
   "types": "dist/index.d.ts",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "visgl:webgl-only": {
+        "import": "./dist.webgl-only/index.js",
+        "require": "./dist.webgl-only/index.cjs"
+      },
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     }
   },
   "files": [
     "dist",
+    "dist.webgl-only",
     "src",
     "dist.min.js"
   ],
@@ -38,7 +47,7 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@luma.gl/shadertools": "^9.3.3",
+    "@luma.gl/shadertools": "^9.4.0-beta.3",
     "@math.gl/core": "^4.1.0",
     "@math.gl/web-mercator": "^4.1.0",
     "d3-hexbin": "^0.2.1"
@@ -46,8 +55,8 @@
   "peerDependencies": {
     "@deck.gl/core": "~9.3.0-beta.2",
     "@deck.gl/layers": "~9.3.0-beta.2",
-    "@luma.gl/core": "~9.3.3",
-    "@luma.gl/engine": "~9.3.3"
+    "@luma.gl/core": "~9.4.0-beta.3",
+    "@luma.gl/engine": "~9.4.0-beta.3"
   },
-  "gitHead": "a30177af4ec82fd612d116d1528deac09f1800b4"
+  "gitHead": "5b00a0ced09284c2a642c8ffc56748629f5e796b"
 }

package/src/common/aggregator/gpu-aggregator/webgl-aggregation-transform.ts

@@ -112,6 +112,7 @@ export class WebGLAggregationTransform {
     transform.run({
       id: 'gpu-aggregation-domain',
       framebuffer: target,
+      discard: false,
       parameters: {
         viewport: [0, 0, 2, 1]
       },
@@ -243,11 +244,8 @@ void main() {
       blendAlphaOperation: 'max'
     },
     defines: {
-      // @ts-expect-error TODO fix luma type
       NUM_DIMS: props.dimensions,
-      // @ts-expect-error TODO fix luma type
       NUM_CHANNELS: props.channelCount,
-      // @ts-expect-error TODO fix luma type
       SAMPLER_WIDTH: TEXTURE_WIDTH
     },
     varyings: ['binIds', 'values'],

package/src/common/aggregator/gpu-aggregator/webgl-bin-sorter.ts

@@ -248,7 +248,6 @@ void main() {
   const model = new Model(device, {
     bufferLayout: props.bufferLayout,
     modules: [...(props.modules || []), binSorterUniforms],
-    // @ts-expect-error TODO fix luma type
     defines: {...props.defines, NON_INSTANCED_MODEL: 1, NUM_CHANNELS: props.channelCount},
     isInstanced: false,
     vs,

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

@@ -7,6 +7,7 @@ import {UpdateParameters, Color} from '@deck.gl/core';
 import {ColumnLayer} from '@deck.gl/layers';
 import {CubeGeometry} from '@luma.gl/engine';
 import {createColorRangeTexture, updateColorRangeTexture} from '../common/utils/color-utils';
+import source from './grid-cell-layer.wgsl';
 import vs from './grid-cell-layer-vertex.glsl';
 import {GridProps, gridUniforms} from './grid-layer-uniforms';
 import type {ScaleType} from '../common/types';
@@ -37,7 +38,7 @@ export class GridCellLayer<ExtraPropsT extends {} = {}> extends ColumnLayer<
   getShaders() {
     const shaders = super.getShaders();
     shaders.modules.push(gridUniforms);
-    return {...shaders, vs};
+    return {...shaders, source, vs};
   }
 
   initializeState() {
@@ -97,7 +98,7 @@ export class GridCellLayer<ExtraPropsT extends {} = {}> extends ColumnLayer<
 
   protected _updateGeometry() {
     const geometry = new CubeGeometry();
-    this.state.fillModel!.setGeometry(geometry);
+    this._setFillGeometry(geometry);
   }
 
   draw({uniforms}) {

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

@@ -0,0 +1,114 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export default /* wgsl */ `\
+struct Attributes {
+  @builtin(instance_index) instanceIndex: u32,
+  @location(0) positions: vec3<f32>,
+  @location(1) normals: vec3<f32>,
+  @location(2) instancePositions: vec2<f32>,
+  @location(3) instanceColorValues: f32,
+  @location(4) instanceElevationValues: f32,
+};
+
+struct Varyings {
+  @builtin(position) position: vec4<f32>,
+  @location(0) color: vec4<f32>,
+  @location(1) pickingColor: vec3<f32>,
+};
+
+fn interpolate(value: f32, domain: vec2<f32>, range: vec2<f32>) -> f32 {
+  let ratio = clamp((value - domain.x) / (domain.y - domain.x), 0.0, 1.0);
+  return mix(range.x, range.y, ratio);
+}
+
+fn sampleColorRange(value: f32, domain: vec2<f32>) -> vec4<f32> {
+  let ratio = (value - domain.x) / (domain.y - domain.x);
+  return textureSampleLevel(colorRange, colorRangeSampler, vec2<f32>(ratio, 0.5), 0.0);
+}
+
+@vertex
+fn vertexMain(attributes: Attributes) -> Varyings {
+  var output: Varyings;
+  geometry.pickingColor = picking_getPickingColorFromIndex(attributes.instanceIndex);
+  output.pickingColor = geometry.pickingColor;
+
+  if (
+    attributes.instanceColorValues != attributes.instanceColorValues ||
+    attributes.instanceColorValues < grid.colorDomain.z ||
+    attributes.instanceColorValues > grid.colorDomain.w ||
+    attributes.instanceElevationValues < grid.elevationDomain.z ||
+    attributes.instanceElevationValues > grid.elevationDomain.w
+  ) {
+    output.position = vec4<f32>(0.0);
+    output.color = vec4<f32>(0.0);
+    return output;
+  }
+
+  let commonPosition =
+    (attributes.instancePositions +
+      (attributes.positions.xy + vec2<f32>(1.0)) * 0.5 * column.coverage) *
+      grid.sizeCommon +
+    grid.originCommon -
+    project.commonOrigin.xy;
+  geometry.position = vec4<f32>(commonPosition, 0.0, 1.0);
+  geometry.normal = project_normal(attributes.normals);
+
+  if (column.extruded > 0.5) {
+    var elevation = interpolate(
+      attributes.instanceElevationValues,
+      grid.elevationDomain.xy,
+      grid.elevationRange
+    );
+    elevation = project_size_float(elevation);
+    geometry.position.z = (attributes.positions.z + 1.0) * 0.5 * elevation;
+  }
+
+  output.position = project_common_position_to_clipspace(geometry.position);
+  var colorValue = sampleColorRange(attributes.instanceColorValues, grid.colorDomain.xy);
+  if (column.extruded > 0.5) {
+    colorValue = vec4<f32>(
+      lighting_getLightColor2(
+        colorValue.rgb,
+        project.cameraPosition,
+        geometry.position.xyz,
+        geometry.normal
+      ),
+      colorValue.a
+    );
+  }
+  output.color = vec4<f32>(colorValue.rgb, colorValue.a * layer.opacity);
+  return output;
+}
+
+@fragment
+fn fragmentMain(varyings: Varyings) -> @location(0) vec4<f32> {
+  if (picking.isActive > 0.5) {
+    if (!picking_isColorValid(varyings.pickingColor)) {
+      discard;
+    }
+    return vec4<f32>(varyings.pickingColor, 1.0);
+  }
+
+  var color = varyings.color;
+  if (picking.isHighlightActive > 0.5) {
+    let highlightedObjectColor = picking_normalizeColor(picking.highlightedObjectColor);
+    if (picking_isColorZero(abs(varyings.pickingColor - highlightedObjectColor))) {
+      let highlightAlpha = picking.highlightColor.a;
+      let blendedAlpha = highlightAlpha + color.a * (1.0 - highlightAlpha);
+      if (blendedAlpha > 0.0) {
+        let highlightRatio = highlightAlpha / blendedAlpha;
+        color = vec4<f32>(
+          mix(color.rgb, picking.highlightColor.rgb, highlightRatio),
+          blendedAlpha
+        );
+      } else {
+        color = vec4<f32>(color.rgb, 0.0);
+      }
+    }
+  }
+
+  return deckgl_premultiplied_alpha(color);
+}
+`;