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

package/package.json

@@ -2,7 +2,8 @@
   "name": "@deck.gl/aggregation-layers",
   "description": "deck.gl layers that aggregate the input data into alternative representations",
   "license": "MIT",
-  "version": "9.0.0-beta.1",
+  "type": "module",
+  "version": "9.0.0-beta.10",
   "publishConfig": {
     "access": "public"
   },
@@ -16,13 +17,19 @@
     "type": "git",
     "url": "https://github.com/visgl/deck.gl.git"
   },
-  "main": "dist/es5/index.js",
-  "module": "dist/esm/index.js",
-  "types": "typed/index.d.ts",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
     "dist",
     "src",
-    "typed",
     "dist.min.js"
   ],
   "sideEffects": false,
@@ -31,18 +38,16 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@babel/runtime": "^7.0.0",
-    "@luma.gl/constants": "9.0.0-alpha.54",
-    "@luma.gl/core": "9.0.0-alpha.54",
-    "@luma.gl/shadertools": "9.0.0-alpha.54",
+    "@luma.gl/constants": "^9.0.4",
+    "@luma.gl/shadertools": "^9.0.4",
     "@math.gl/web-mercator": "^4.0.0",
     "d3-hexbin": "^0.2.1"
   },
   "peerDependencies": {
-    "@deck.gl/core": "^9.0.0-alpha",
-    "@deck.gl/layers": "^9.0.0-alpha",
-    "@luma.gl/core": "9.0.0-alpha.54",
-    "@luma.gl/engine": "9.0.0-alpha.54"
+    "@deck.gl/core": "^9.0.0-beta",
+    "@deck.gl/layers": "^9.0.0-beta",
+    "@luma.gl/core": "^9.0.4",
+    "@luma.gl/engine": "^9.0.4"
   },
-  "gitHead": "9628417918bec5cc73c1345bfcd2f2be575741f1"
+  "gitHead": "6c44f602069374cd21268ff279c5bf818c905ff7"
 }

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

@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {GL} from '@luma.gl/constants';
 import {LineLayer, SolidPolygonLayer} from '@deck.gl/layers';
 import {generateContours} from './contour-utils';
 import {
@@ -185,7 +184,7 @@ export default class ContourLayer<
       [POSITION_ATTRIBUTE_NAME]: {
         size: 3,
         accessor: 'getPosition',
-        type: GL.DOUBLE,
+        type: 'float64',
         fp64: this.use64bitPositions()
       },
       // this attribute is used in gpu aggregation path only
@@ -351,7 +350,7 @@ export default class ContourLayer<
     let {aggregationData} = count;
     if (!aggregationData) {
       // @ts-ignore
-      aggregationData = count.aggregationBuffer!.readSyncWebGL2() as Float32Array;
+      aggregationData = count.aggregationBuffer!.readSyncWebGL() as Float32Array;
       count.aggregationData = aggregationData;
     }
 

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

@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {GL} from '@luma.gl/constants';
 import {GridCellLayer} from '@deck.gl/layers';
 import {Accessor, AccessorFunction, Color, Position, Material, DefaultProps} from '@deck.gl/core';
 
@@ -261,7 +260,7 @@ export default class CPUGridLayer<
     };
     const attributeManager = this.getAttributeManager()!;
     attributeManager.add({
-      positions: {size: 3, type: GL.DOUBLE, accessor: 'getPosition'}
+      positions: {size: 3, type: 'float64', accessor: 'getPosition'}
     });
     // color and elevation attributes can't be added as attributes
     // they are calcualted using 'getValue' accessor that takes an array of pints.

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

@@ -192,7 +192,7 @@ export default class GPUGridCellLayer extends Layer<_GPUGridCellLayerProps> {
     // @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 gl = this.context.gl;
     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

@@ -167,7 +167,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 {} = {}
@@ -221,7 +221,7 @@ export default class GPUGridLayer<
       [POSITION_ATTRIBUTE_NAME]: {
         size: 3,
         accessor: 'getPosition',
-        type: GL.DOUBLE,
+        type: 'float64',
         fp64: this.use64bitPositions()
       },
       color: {size: 3, accessor: 'getColorWeight'},

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

@@ -1,6 +1,3 @@
-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)
   const x = points.map(p => p[0]);
@@ -77,23 +74,3 @@ export function getTextureCoordinates(point: number[], bounds: number[]) {
   const [xMin, yMin, xMax, yMax] = bounds;
   return [(point[0] - xMin) / (xMax - xMin), (point[1] - yMin) / (yMax - yMin)];
 }
-
-// Returns format and type for creating texture objects
-export function getTextureParams({
-  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: device.info.type === 'webgl2' ? GL.RGBA32F : GL.RGBA,
-        type: GL.FLOAT
-      }
-    : {
-        format: GL.RGBA,
-        type: GL.UNSIGNED_BYTE
-      };
-}

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

@@ -24,13 +24,10 @@ import {
   boundsContain,
   packVertices,
   scaleToAspectRatio,
-  getTextureCoordinates,
-  getTextureParams
+  getTextureCoordinates
 } from './heatmap-layer-utils';
 import {Buffer, DeviceFeature, Texture, TextureProps, TextureFormat} from '@luma.gl/core';
-import {GL} from '@luma.gl/constants';
 import {TextureTransform, TextureTransformProps} from '@luma.gl/engine';
-import {withGLParameters} from '@luma.gl/webgl';
 import {
   Accessor,
   AccessorFunction,
@@ -51,16 +48,16 @@ import AggregationLayer, {AggregationLayerProps} from '../aggregation-layer';
 import {defaultColorRange, colorRangeToFlatArray} from '../utils/color-utils';
 import weightsVs from './weights-vs.glsl';
 import weightsFs from './weights-fs.glsl';
-import vsMax from './max-vs.glsl';
-import fsMax from './max-fs.glsl';
+import maxVs from './max-vs.glsl';
+import maxFs from './max-fs.glsl';
 
 const RESOLUTION = 2; // (number of common space pixels) / (number texels)
 const TEXTURE_PROPS: TextureProps = {
   format: 'rgba8unorm',
   mipmaps: false,
   sampler: {
-    minFilter: 'nearest',
-    magFilter: 'nearest',
+    minFilter: 'linear',
+    magFilter: 'linear',
     addressModeU: 'clamp-to-edge',
     addressModeV: 'clamp-to-edge'
   }
@@ -85,14 +82,9 @@ const defaultProps: DefaultProps<HeatmapLayerProps> = {
   debounceTimeout: {type: 'number', min: 0, max: 1000, value: 500}
 };
 
-const REQUIRED_FEATURES: DeviceFeature[] = [
-  'blend-minmax-webgl1', // max weight calculation
-  'texture-formats-float32-webgl1' // weight-map as 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
+  'float32-renderable-webgl', // ability to render to float texture
+  'texture-blend-float-webgl' // ability to blend when rendering to float texture
 ];
 
 const DIMENSIONS = {
@@ -189,7 +181,6 @@ export default class HeatmapLayer<
   static defaultProps = defaultProps;
 
   state!: AggregationLayer<DataT>['state'] & {
-    supported: boolean;
     colorDomain?: number[];
     isWeightMapDirty?: boolean;
     weightsTexture?: Texture;
@@ -205,20 +196,14 @@ export default class HeatmapLayer<
     maxWeightTransform?: TextureTransform;
     textureSize: number;
     format: TextureFormat;
-    type: GL;
     weightsScale: number;
     visibleWorldBounds: number[];
     viewportCorners: number[][];
   };
 
   initializeState() {
-    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;
-    }
     super.initializeAggregationLayer(DIMENSIONS);
-    this.setState({supported: true, colorDomain: DEFAULT_COLOR_DOMAIN});
+    this.setState({colorDomain: DEFAULT_COLOR_DOMAIN});
     this._setupTextureParams();
     this._setupAttributes();
     this._setupResources();
@@ -231,9 +216,6 @@ export default class HeatmapLayer<
 
   /* eslint-disable max-statements,complexity */
   updateState(opts: UpdateParameters<this>) {
-    if (!this.state.supported) {
-      return;
-    }
     super.updateState(opts);
     this._updateHeatmapState(opts);
   }
@@ -269,9 +251,6 @@ export default class HeatmapLayer<
   }
 
   renderLayers(): LayersList | Layer {
-    if (!this.state.supported) {
-      return [];
-    }
     const {
       weightsTexture,
       triPositionBuffer,
@@ -303,7 +282,7 @@ export default class HeatmapLayer<
         maxTexture: maxWeightsTexture,
         colorTexture,
         aggregationMode: AGGREGATION_MODE[aggregation] || 0,
-        texture: weightsTexture,
+        weightsTexture,
         intensity,
         threshold,
         colorDomain
@@ -369,24 +348,28 @@ export default class HeatmapLayer<
   }
 
   _createTextures() {
-    const {textureSize, format, type} = this.state;
+    const {textureSize, format} = this.state;
 
     this.setState({
       weightsTexture: this.context.device.createTexture({
+        ...TEXTURE_PROPS,
         width: textureSize,
         height: textureSize,
-        format,
-        type,
-        ...TEXTURE_PROPS
+        format
       }),
-      maxWeightsTexture: this.context.device.createTexture({format, type, ...TEXTURE_PROPS}) // 1 X 1 texture,
+      maxWeightsTexture: this.context.device.createTexture({
+        ...TEXTURE_PROPS,
+        width: 1,
+        height: 1,
+        format
+      })
     });
   }
 
   _setupAttributes() {
     const attributeManager = this.getAttributeManager()!;
     attributeManager.add({
-      positions: {size: 3, type: GL.DOUBLE, accessor: 'getPosition'},
+      positions: {size: 3, type: 'float64', accessor: 'getPosition'},
       weights: {size: 1, accessor: 'getWeight'}
     });
     this.setState({positionAttributeName: 'positions'});
@@ -396,63 +379,73 @@ export default class HeatmapLayer<
     const {device} = this.context;
     const {weightsTextureSize} = this.props;
 
-    const textureSize = Math.min(weightsTextureSize, device.limits.maxTextureDimension2D as number);
+    const textureSize = Math.min(weightsTextureSize, device.limits.maxTextureDimension2D);
     const floatTargetSupport = FLOAT_TARGET_FEATURES.every(feature => device.features.has(feature));
-    const {format, type} = getTextureParams({device, floatTargetSupport});
+    const format: TextureFormat = floatTargetSupport ? 'rgba32float' : 'rgba8unorm';
     const weightsScale = floatTargetSupport ? 1 : 1 / 255;
-    this.setState({textureSize, format, type, weightsScale});
+    this.setState({textureSize, format, weightsScale});
     if (!floatTargetSupport) {
       log.warn(
-        `HeatmapLayer: ${this.id} rendering to float texture not supported, fallingback to low precession format`
+        `HeatmapLayer: ${this.id} rendering to float texture not supported, falling back to low precision format`
       )();
     }
   }
 
-  getShaders(type) {
-    return super.getShaders(
-      type === 'max-weights-transform'
-        ? {
-            vs: vsMax,
-            _fs: fsMax
-          }
-        : {
-            vs: weightsVs,
-            _fs: weightsFs
-          }
-    );
-  }
-
-  _createWeightsTransform(shaders = {}) {
+  _createWeightsTransform(shaders: {vs: string; fs?: string}) {
     let {weightsTransform} = this.state;
-    weightsTransform?.delete();
+    const {weightsTexture} = this.state;
+    const attributeManager = this.getAttributeManager()!;
 
+    weightsTransform?.destroy();
     weightsTransform = new TextureTransform(this.context.device, {
       id: `${this.id}-weights-transform`,
+      bufferLayout: attributeManager.getBufferLayouts(),
       vertexCount: 1,
-      targetTexture: this.state.weightsTexture!,
-      targetTextureVarying: 'weightsTexture',
+      targetTexture: weightsTexture!,
+      parameters: {
+        depthWriteEnabled: false,
+        blendColorOperation: 'add',
+        blendColorSrcFactor: 'one',
+        blendColorDstFactor: 'one',
+        blendAlphaSrcFactor: 'one',
+        blendAlphaDstFactor: 'one'
+      },
+      topology: 'point-list',
       ...shaders
     } as TextureTransformProps);
+
     this.setState({weightsTransform});
   }
 
   _setupResources() {
     this._createTextures();
+    const {device} = this.context;
     const {textureSize, weightsTexture, maxWeightsTexture} = this.state;
 
-    const weightsTransformShaders = this.getShaders('weights-transform');
+    const weightsTransformShaders = this.getShaders({
+      vs: weightsVs,
+      fs: weightsFs
+    });
     this._createWeightsTransform(weightsTransformShaders);
 
-    const maxWeightsTransformShaders = this.getShaders('max-weights-transform');
-    const maxWeightTransform = new TextureTransform(this.context.device, {
+    const maxWeightsTransformShaders = this.getShaders({vs: maxVs, fs: maxFs});
+    const maxWeightTransform = new TextureTransform(device, {
       id: `${this.id}-max-weights-transform`,
-      _sourceTextures: {
-        inTexture: weightsTexture
-      },
-      _targetTexture: maxWeightsTexture,
-      _targetTextureVarying: 'outTexture',
+      bindings: {inTexture: weightsTexture},
+      uniforms: {textureSize},
+      targetTexture: maxWeightsTexture,
       ...maxWeightsTransformShaders,
-      elementCount: textureSize * textureSize
+      vertexCount: textureSize * textureSize,
+      topology: 'point-list',
+      parameters: {
+        depthWriteEnabled: false,
+        blendColorOperation: 'max',
+        blendAlphaOperation: 'max',
+        blendColorSrcFactor: 'one',
+        blendColorDstFactor: 'one',
+        blendAlphaSrcFactor: 'one',
+        blendAlphaDstFactor: 'one'
+      }
     });
 
     this.setState({
@@ -460,35 +453,27 @@ export default class HeatmapLayer<
       maxWeightsTexture,
       maxWeightTransform,
       zoom: null,
-      triPositionBuffer: this.context.device.createBuffer({
-        byteLength: 48,
-        // @ts-expect-error
-        accessor: {size: 3}
-      }),
-      triTexCoordBuffer: this.context.device.createBuffer({
-        byteLength: 48,
-        // @ts-expect-error
-        accessor: {size: 2}
-      })
+      triPositionBuffer: device.createBuffer({byteLength: 48}),
+      triTexCoordBuffer: device.createBuffer({byteLength: 48})
     });
   }
 
   // overwrite super class method to update transform model
   updateShaders(shaderOptions) {
-    // sahder params (modules, injects) changed, update model object
-    this._createWeightsTransform(shaderOptions);
+    // shader params (modules, injects) changed, update model object
+    this._createWeightsTransform({
+      vs: weightsVs,
+      fs: weightsFs,
+      ...shaderOptions
+    });
   }
 
   _updateMaxWeightValue() {
-    const {maxWeightTransform} = this.state;
+    const {maxWeightTransform, textureSize} = this.state;
+
     maxWeightTransform!.run({
-      parameters: {
-        // @ts-expect-error TODO(v9): Resolve errors.
-        blend: true,
-        depthTest: false,
-        blendFunc: [GL.ONE, GL.ONE],
-        blendEquation: GL.MAX
-      }
+      parameters: {viewport: [0, 0, 1, 1]},
+      clearColor: [0, 0, 0, 0]
     });
   }
 
@@ -563,18 +548,16 @@ export default class HeatmapLayer<
     let {colorTexture} = this.state;
     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
-      });
+    if (colorTexture && colorTexture?.width === colorRange.length) {
+      // TODO(v9): Unclear whether `setSubImageData` is a public API, or what to use if not.
+      (colorTexture as any).setSubImageData({data: colors});
     } else {
+      colorTexture?.destroy();
       colorTexture = this.context.device.createTexture({
+        ...TEXTURE_PROPS,
         data: colors,
         width: colorRange.length,
-        height: 1,
-        ...TEXTURE_PROPS
+        height: 1
       });
     }
     this.setState({colorTexture});
@@ -602,41 +585,22 @@ export default class HeatmapLayer<
       this.state.colorDomain = colorDomain || DEFAULT_COLOR_DOMAIN;
     }
 
-    const uniforms = {
-      radiusPixels,
-      commonBounds,
-      textureWidth: textureSize,
-      weightsScale
-    };
-    // Attribute manager sets data array count as instaceCount on model
-    // we need to set that as elementCount on 'weightsTransform'
-    weightsTransform.update({
-      elementCount: this.getNumInstances()
-    });
-    // Need to explictly specify clearColor as external context may have modified it
-    withGLParameters(this.context.gl, {clearColor: [0, 0, 0, 0]}, () => {
-      weightsTransform.run({
-        uniforms,
-        parameters: {
-          // @ts-expect-error TODO(v9): Resolve errors.
-          blend: true,
-          depthTest: false,
-          blendFunc: [GL.ONE, GL.ONE],
-          blendEquation: GL.FUNC_ADD
-        },
-        clearRenderTarget: true,
-        attributes: this.getAttributes(),
-        moduleSettings: this.getModuleSettings()
-      });
+    const attributeManager = this.getAttributeManager()!;
+    const attributes = attributeManager.getAttributes();
+    const moduleSettings = this.getModuleSettings();
+    const positions = attributes.positions.buffer;
+    const uniforms = {radiusPixels, commonBounds, textureWidth: textureSize, weightsScale};
+    const weights = attributes.weights.buffer;
+    weightsTransform.model.setAttributes({positions, weights});
+    weightsTransform.model.setVertexCount(this.getNumInstances());
+    weightsTransform.model.setUniforms(uniforms);
+    weightsTransform.model.updateModuleSettings(moduleSettings);
+    weightsTransform.run({
+      parameters: {viewport: [0, 0, textureSize, textureSize]},
+      clearColor: [0, 0, 0, 0]
     });
-    this._updateMaxWeightValue();
 
-    // reset filtering parameters (TODO: remove once luma issue#1193 is fixed)
-    // TODO v9 sampler support in luma.gl needs to improve
-    // weightsTexture.setSampler({
-    //   magFilter: 'linear',
-    //   minFilter: 'linear'
-    // });
+    this._updateMaxWeightValue();
   }
 
   _debouncedUpdateWeightmap(fromTimer = false) {

package/src/heatmap-layer/max-vs.glsl.ts

@@ -1,13 +1,19 @@
 export default `\
 #version 300 es
-in vec4 inTexture;
+uniform sampler2D inTexture;
+uniform float textureSize;
 out vec4 outTexture;
 
 void main()
 {
-outTexture = inTexture;
-gl_Position = vec4(0, 0, 0, 1.);
-// Enforce default value for ANGLE issue (https://bugs.chromium.org/p/angleproject/issues/detail?id=3941)
-gl_PointSize = 1.0;
+  // Sample every pixel in texture
+  int yIndex = gl_VertexID / int(textureSize);
+  int xIndex = gl_VertexID - (yIndex * int(textureSize));
+  vec2 uv = (0.5 + vec2(float(xIndex), float(yIndex))) / textureSize;
+  outTexture = texture(inTexture, uv);
+
+  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+  // Enforce default value for ANGLE issue (https://bugs.chromium.org/p/angleproject/issues/detail?id=3941)
+  gl_PointSize = 1.0;
 }
 `;

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

@@ -25,7 +25,7 @@ export default `\
 precision highp float;
 
 uniform float opacity;
-uniform sampler2D texture;
+uniform sampler2D weightsTexture;
 uniform sampler2D colorTexture;
 uniform float aggregationMode;
 
@@ -43,7 +43,7 @@ vec4 getLinearColor(float value) {
 }
 
 void main(void) {
-  vec4 weights = texture(texture, vTexCoords);
+  vec4 weights = texture(weightsTexture, vTexCoords);
   float weight = weights.r;
 
   if (aggregationMode > 0.5) {

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

@@ -18,13 +18,14 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import type {Device, Texture} from '@luma.gl/core';
-import {Model, Geometry} from '@luma.gl/engine';
+import type {Buffer, Device, Texture} from '@luma.gl/core';
+import {Model} from '@luma.gl/engine';
 import {Layer, LayerContext, project32} from '@deck.gl/core';
 import vs from './triangle-layer-vertex.glsl';
 import fs from './triangle-layer-fragment.glsl';
 
 type _TriangleLayerProps = {
+  data: {attributes: {positions: Buffer; texCoords: Buffer}};
   colorDomain: number[];
   aggregationMode: string;
   threshold: number;
@@ -32,7 +33,7 @@ type _TriangleLayerProps = {
   vertexCount: number;
   colorTexture: Texture;
   maxTexture: Texture;
-  texture: Texture;
+  weightsTexture: Texture;
 };
 
 export default class TriangleLayer extends Layer<_TriangleLayerProps> {
@@ -40,6 +41,8 @@ export default class TriangleLayer extends Layer<_TriangleLayerProps> {
 
   state!: {
     model: Model;
+    positions: Buffer;
+    texCoords: Buffer;
   };
 
   getShaders() {
@@ -47,40 +50,31 @@ export default class TriangleLayer extends Layer<_TriangleLayerProps> {
   }
 
   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(device)
-    });
+    this.setState({model: this._getModel(device)});
   }
 
   _getModel(device: Device): Model {
-    const {vertexCount} = this.props;
+    const {vertexCount, data, weightsTexture, maxTexture, colorTexture} = this.props;
 
     return new Model(device, {
       ...this.getShaders(),
       id: this.props.id,
-      geometry: new Geometry({
-        topology: 'triangle-fan-webgl',
-        vertexCount
-      })
+      bindings: {weightsTexture, maxTexture, colorTexture},
+      attributes: data.attributes,
+      bufferLayout: [
+        {name: 'positions', format: 'float32x3'},
+        {name: 'texCoords', format: 'float32x2'}
+      ],
+      topology: 'triangle-fan-webgl',
+      vertexCount
     });
   }
 
   draw({uniforms}): void {
     const {model} = this.state;
-
-    const {texture, maxTexture, colorTexture, intensity, threshold, aggregationMode, colorDomain} =
-      this.props;
-
+    const {intensity, threshold, aggregationMode, colorDomain} = this.props;
     model.setUniforms({
       ...uniforms,
-      texture,
-      maxTexture,
-      colorTexture,
       intensity,
       threshold,
       aggregationMode,