@deck.gl/aggregation-layers 9.0.34 → 9.1.0-beta.1

package/src/{aggregation-layer.ts → heatmap-layer/aggregation-layer.ts}

@@ -1,22 +1,6 @@
-// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
 
 import {
   CompositeLayer,
@@ -27,12 +11,13 @@ import {
   CompositeLayerProps,
   Attribute
 } from '@deck.gl/core';
-import {filterProps} from './utils/prop-utils';
+import {filterProps} from '../common/utils/prop-utils';
 
 export type AggregationLayerProps<DataT> = CompositeLayerProps & {
   data: LayerDataSource<DataT>;
 };
 
+/** Legacy AggregationLayer, to be removed in v9.1 */
 export default abstract class AggregationLayer<
   DataT,
   ExtraPropsT extends {} = {}
@@ -83,7 +68,7 @@ export default abstract class AggregationLayer<
   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
+    // NOTE: it is similar to LayerPass._getShaderModuleProps() but doesn't inlcude `effects` it is not needed for aggregation
     const {viewport, mousePosition, device} = this.context;
     const moduleSettings = Object.assign(Object.create(this.props), {
       viewport,

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

@@ -0,0 +1,50 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Texture} from '@luma.gl/core';
+import type {ShaderModule} from '@luma.gl/shadertools';
+
+const uniformBlock = `\
+uniform weightUniforms {
+  vec4 commonBounds;
+  float radiusPixels;
+  float textureWidth;
+  float weightsScale;
+} weight;
+`;
+export type WeightProps = {
+  commonBounds: [number, number, number, number];
+  radiusPixels: number;
+  textureWidth: number;
+  weightsScale: number;
+  weightsTexture: Texture;
+};
+
+export const weightUniforms = {
+  name: 'weight',
+  vs: uniformBlock,
+  uniformTypes: {
+    commonBounds: 'vec4<f32>',
+    radiusPixels: 'f32',
+    textureWidth: 'f32',
+    weightsScale: 'f32'
+  }
+} as const satisfies ShaderModule<WeightProps>;
+
+export type MaxWeightProps = {
+  inTexture: Texture;
+  textureSize: number;
+};
+
+export const maxWeightUniforms = {
+  name: 'maxWeight',
+  vs: `\
+uniform maxWeightUniforms {
+  float textureSize;
+} maxWeight;
+`,
+  uniformTypes: {
+    textureSize: 'f32'
+  }
+} as const satisfies ShaderModule<MaxWeightProps>;

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

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 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]);
@@ -38,7 +42,11 @@ export function packVertices(points: number[][], dimensions: number = 2): Float3
 }
 
 // Expands boundingBox:[xMin, yMin, xMax, yMax] to match aspect ratio of given width and height
-export function scaleToAspectRatio(boundingBox: number[], width: number, height: number): number[] {
+export function scaleToAspectRatio(
+  boundingBox: [number, number, number, number],
+  width: number,
+  height: number
+): [number, number, number, number] {
   const [xMin, yMin, xMax, yMax] = boundingBox;
 
   const currentWidth = xMax - xMin;

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

@@ -1,22 +1,6 @@
-// Copyright (c) 2015 - 2019 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
 
 /* global setTimeout clearTimeout */
 import {
@@ -41,15 +25,22 @@ import {
   log,
   Position,
   UpdateParameters,
-  DefaultProps
+  DefaultProps,
+  project32
 } from '@deck.gl/core';
 import TriangleLayer from './triangle-layer';
-import AggregationLayer, {AggregationLayerProps} from '../aggregation-layer';
-import {defaultColorRange, colorRangeToFlatArray} from '../utils/color-utils';
+import AggregationLayer, {AggregationLayerProps} from './aggregation-layer';
+import {defaultColorRange, colorRangeToFlatArray} from '../common/utils/color-utils';
 import weightsVs from './weights-vs.glsl';
 import weightsFs from './weights-fs.glsl';
 import maxVs from './max-vs.glsl';
 import maxFs from './max-fs.glsl';
+import {
+  MaxWeightProps,
+  maxWeightUniforms,
+  WeightProps,
+  weightUniforms
+} from './heatmap-layer-uniforms';
 
 const RESOLUTION = 2; // (number of common space pixels) / (number texels)
 const TEXTURE_PROPS: TextureProps = {
@@ -201,6 +192,15 @@ export default class HeatmapLayer<
     viewportCorners: number[][];
   };
 
+  getShaders(shaders: any) {
+    let modules = [project32];
+    if (shaders.modules) {
+      modules = [...modules, ...shaders.modules];
+    }
+
+    return super.getShaders({...shaders, modules});
+  }
+
   initializeState() {
     super.initializeAggregationLayer(DIMENSIONS);
     this.setState({colorDomain: DEFAULT_COLOR_DOMAIN});
@@ -391,7 +391,7 @@ export default class HeatmapLayer<
     }
   }
 
-  _createWeightsTransform(shaders: {vs: string; fs?: string}) {
+  _createWeightsTransform(shaders: {vs: string; fs?: string; modules: any[]}) {
     let {weightsTransform} = this.state;
     const {weightsTexture} = this.state;
     const attributeManager = this.getAttributeManager()!;
@@ -411,7 +411,8 @@ export default class HeatmapLayer<
         blendAlphaDstFactor: 'one'
       },
       topology: 'point-list',
-      ...shaders
+      ...shaders,
+      modules: [...shaders.modules, weightUniforms]
     } as TextureTransformProps);
 
     this.setState({weightsTransform});
@@ -428,12 +429,14 @@ export default class HeatmapLayer<
     });
     this._createWeightsTransform(weightsTransformShaders);
 
-    const maxWeightsTransformShaders = this.getShaders({vs: maxVs, fs: maxFs});
+    const maxWeightsTransformShaders = this.getShaders({
+      vs: maxVs,
+      fs: maxFs,
+      modules: [maxWeightUniforms]
+    });
     const maxWeightTransform = new TextureTransform(device, {
       id: `${this.id}-max-weights-transform`,
-      bindings: {inTexture: weightsTexture},
-      uniforms: {textureSize},
-      targetTexture: maxWeightsTexture,
+      targetTexture: maxWeightsTexture!,
       ...maxWeightsTransformShaders,
       vertexCount: textureSize * textureSize,
       topology: 'point-list',
@@ -448,6 +451,11 @@ export default class HeatmapLayer<
       }
     });
 
+    const maxWeightProps: MaxWeightProps = {inTexture: weightsTexture!, textureSize};
+    maxWeightTransform.model.shaderInputs.setProps({
+      maxWeight: maxWeightProps
+    });
+
     this.setState({
       weightsTexture,
       maxWeightsTexture,
@@ -486,8 +494,8 @@ export default class HeatmapLayer<
     const viewportCorners = [
       viewport.unproject([0, 0]),
       viewport.unproject([viewport.width, 0]),
-      viewport.unproject([viewport.width, viewport.height]),
-      viewport.unproject([0, viewport.height])
+      viewport.unproject([0, viewport.height]),
+      viewport.unproject([viewport.width, viewport.height])
     ].map(p => p.map(Math.fround));
 
     // #1: get world bounds for current viewport extends
@@ -550,9 +558,10 @@ export default class HeatmapLayer<
 
     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});
+      (colorTexture as any).setTexture2DData({data: colors});
     } else {
       colorTexture?.destroy();
+      // @ts-expect-error TODO(ib) - texture API change
       colorTexture = this.context.device.createTexture({
         ...TEXTURE_PROPS,
         data: colors,
@@ -565,7 +574,7 @@ export default class HeatmapLayer<
 
   _updateWeightmap() {
     const {radiusPixels, colorDomain, aggregation} = this.props;
-    const {worldBounds, textureSize, weightsScale} = this.state;
+    const {worldBounds, textureSize, weightsScale, weightsTexture} = this.state;
     const weightsTransform = this.state.weightsTransform!;
     this.state.isWeightMapDirty = false;
 
@@ -588,11 +597,22 @@ export default class HeatmapLayer<
     const attributeManager = this.getAttributeManager()!;
     const attributes = attributeManager.getAttributes();
     const moduleSettings = this.getModuleSettings();
-    const uniforms = {radiusPixels, commonBounds, textureWidth: textureSize, weightsScale};
     this._setModelAttributes(weightsTransform.model, attributes);
     weightsTransform.model.setVertexCount(this.getNumInstances());
-    weightsTransform.model.setUniforms(uniforms);
-    weightsTransform.model.updateModuleSettings(moduleSettings);
+
+    const weightProps: WeightProps = {
+      radiusPixels,
+      commonBounds,
+      textureWidth: textureSize,
+      weightsScale,
+      weightsTexture: weightsTexture!
+    };
+    const {viewport, devicePixelRatio, coordinateSystem, coordinateOrigin} = moduleSettings;
+    const {modelMatrix} = this.props;
+    weightsTransform.model.shaderInputs.setProps({
+      project: {viewport, devicePixelRatio, modelMatrix, coordinateSystem, coordinateOrigin},
+      weight: weightProps
+    });
     weightsTransform.run({
       parameters: {viewport: [0, 0, textureSize, textureSize]},
       clearColor: [0, 0, 0, 0]
@@ -623,7 +643,10 @@ export default class HeatmapLayer<
   // input: worldBounds: [minLong, minLat, maxLong, maxLat]
   // input: opts.useLayerCoordinateSystem : layers coordiante system is used
   // optput: commonBounds: [minX, minY, maxX, maxY] scaled to fit the current texture
-  _worldToCommonBounds(worldBounds, opts: {useLayerCoordinateSystem?: boolean} = {}) {
+  _worldToCommonBounds(
+    worldBounds,
+    opts: {useLayerCoordinateSystem?: boolean} = {}
+  ): [number, number, number, number] {
     const {useLayerCoordinateSystem = false} = opts;
     const [minLong, minLat, maxLong, maxLat] = worldBounds;
     const {viewport} = this.context;

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

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 export default `\
 #version 300 es
 in vec4 outTexture;

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

@@ -1,15 +1,18 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 export default `\
 #version 300 es
 uniform sampler2D inTexture;
-uniform float textureSize;
 out vec4 outTexture;
 
 void main()
 {
   // 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;
+  int yIndex = gl_VertexID / int(maxWeight.textureSize);
+  int xIndex = gl_VertexID - (yIndex * int(maxWeight.textureSize));
+  vec2 uv = (0.5 + vec2(float(xIndex), float(yIndex))) / maxWeight.textureSize;
   outTexture = texture(inTexture, uv);
 
   gl_Position = vec4(0.0, 0.0, 0.0, 1.0);

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

@@ -1,22 +1,6 @@
-// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
 
 export default `\
 #version 300 es
@@ -24,10 +8,8 @@ export default `\
 
 precision highp float;
 
-uniform float opacity;
 uniform sampler2D weightsTexture;
 uniform sampler2D colorTexture;
-uniform float aggregationMode;
 
 in vec2 vTexCoords;
 in float vIntensityMin;
@@ -46,7 +28,7 @@ void main(void) {
   vec4 weights = texture(weightsTexture, vTexCoords);
   float weight = weights.r;
 
-  if (aggregationMode > 0.5) {
+  if (triangle.aggregationMode > 0.5) {
     weight /= max(1.0, weights.a);
   }
 
@@ -56,7 +38,7 @@ void main(void) {
   }
 
   vec4 linearColor = getLinearColor(weight);
-  linearColor.a *= opacity;
+  linearColor.a *= layer.opacity;
   fragColor = linearColor;
 }
 `;

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

@@ -0,0 +1,37 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Texture} from '@luma.gl/core';
+import type {ShaderModule} from '@luma.gl/shadertools';
+
+const uniformBlock = `\
+uniform triangleUniforms {
+  float aggregationMode;
+  vec2 colorDomain;
+  float intensity;
+  float threshold;
+} triangle;
+`;
+
+export type TriangleProps = {
+  aggregationMode: number;
+  colorDomain: [number, number];
+  intensity: number;
+  threshold: number;
+  colorTexture: Texture;
+  maxTexture: Texture;
+  weightsTexture: Texture;
+};
+
+export const triangleUniforms = {
+  name: 'triangle',
+  vs: uniformBlock,
+  fs: uniformBlock,
+  uniformTypes: {
+    aggregationMode: 'f32',
+    colorDomain: 'vec2<f32>',
+    intensity: 'f32',
+    threshold: 'f32'
+  }
+} as const satisfies ShaderModule<TriangleProps>;

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

@@ -1,22 +1,6 @@
-// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
 
 // Inspired by screen-grid-layer vertex shader in deck.gl
 
@@ -25,10 +9,6 @@ export default `\
 #define SHADER_NAME heatp-map-layer-vertex-shader
 
 uniform sampler2D maxTexture;
-uniform float intensity;
-uniform vec2 colorDomain;
-uniform float threshold;
-uniform float aggregationMode;
 
 in vec3 positions;
 in vec2 texCoords;
@@ -41,14 +21,14 @@ void main(void) {
   gl_Position = project_position_to_clipspace(positions, vec3(0.0), vec3(0.0));
   vTexCoords = texCoords;
   vec4 maxTexture = texture(maxTexture, vec2(0.5));
-  float maxValue = aggregationMode < 0.5 ? maxTexture.r : maxTexture.g;
-  float minValue = maxValue * threshold;
-  if (colorDomain[1] > 0.) {
+  float maxValue = triangle.aggregationMode < 0.5 ? maxTexture.r : maxTexture.g;
+  float minValue = maxValue * triangle.threshold;
+  if (triangle.colorDomain[1] > 0.) {
     // if user specified custom domain use it.
-    maxValue = colorDomain[1];
-    minValue = colorDomain[0];
+    maxValue = triangle.colorDomain[1];
+    minValue = triangle.colorDomain[0];
   }
-  vIntensityMax = intensity / maxValue;
-  vIntensityMin = intensity / minValue;
+  vIntensityMax = triangle.intensity / maxValue;
+  vIntensityMin = triangle.intensity / minValue;
 }
 `;

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

@@ -1,33 +1,18 @@
-// Copyright (c) 2015 - 2019 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
 
 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';
+import {TriangleProps, triangleUniforms} from './triangle-layer-uniforms';
 
 type _TriangleLayerProps = {
   data: {attributes: {positions: Buffer; texCoords: Buffer}};
-  colorDomain: number[];
-  aggregationMode: string;
+  colorDomain: [number, number];
+  aggregationMode: number;
   threshold: number;
   intensity: number;
   vertexCount: number;
@@ -46,7 +31,7 @@ export default class TriangleLayer extends Layer<_TriangleLayerProps> {
   };
 
   getShaders() {
-    return {vs, fs, modules: [project32]};
+    return super.getShaders({vs, fs, modules: [project32, triangleUniforms]});
   }
 
   initializeState({device}: LayerContext): void {
@@ -54,32 +39,42 @@ export default class TriangleLayer extends Layer<_TriangleLayerProps> {
   }
 
   _getModel(device: Device): Model {
-    const {vertexCount, data, weightsTexture, maxTexture, colorTexture} = this.props;
+    const {vertexCount, data} = this.props;
 
     return new Model(device, {
       ...this.getShaders(),
       id: this.props.id,
-      bindings: {weightsTexture, maxTexture, colorTexture},
       attributes: data.attributes,
       bufferLayout: [
         {name: 'positions', format: 'float32x3'},
         {name: 'texCoords', format: 'float32x2'}
       ],
-      topology: 'triangle-fan-webgl',
+      topology: 'triangle-strip',
       vertexCount
     });
   }
 
-  draw({uniforms}): void {
+  draw(): void {
     const {model} = this.state;
-    const {intensity, threshold, aggregationMode, colorDomain} = this.props;
-    model.setUniforms({
-      ...uniforms,
+    const {
+      aggregationMode,
+      colorDomain,
       intensity,
       threshold,
+      colorTexture,
+      maxTexture,
+      weightsTexture
+    } = this.props;
+    const triangleProps: TriangleProps = {
       aggregationMode,
-      colorDomain
-    });
+      colorDomain,
+      intensity,
+      threshold,
+      colorTexture,
+      maxTexture,
+      weightsTexture
+    };
+    model.shaderInputs.setProps({triangle: triangleProps});
     model.draw(this.context.renderPass);
   }
 }

package/src/heatmap-layer/weights-fs.glsl.ts

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 export default `\
 #version 300 es
 in vec4 weightsTexture;

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

@@ -1,25 +1,25 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 export default `\
 #version 300 es
 in vec3 positions;
 in vec3 positions64Low;
 in float weights;
 out vec4 weightsTexture;
-uniform float radiusPixels;
-uniform float textureWidth;
-uniform vec4 commonBounds;
-uniform float weightsScale;
 
 void main()
 {
-  weightsTexture = vec4(weights * weightsScale, 0., 0., 1.);
+  weightsTexture = vec4(weights * weight.weightsScale, 0., 0., 1.);
 
-  float radiusTexels = project_pixel_size(radiusPixels) * textureWidth / (commonBounds.z - commonBounds.x);
+  float radiusTexels = project_pixel_size(weight.radiusPixels) * weight.textureWidth / (weight.commonBounds.z - weight.commonBounds.x);
   gl_PointSize = radiusTexels * 2.;
 
   vec3 commonPosition = project_position(positions, positions64Low);
 
   // // map xy from commonBounds to [-1, 1]
-  gl_Position.xy = (commonPosition.xy - commonBounds.xy) / (commonBounds.zw - commonBounds.xy) ;
+  gl_Position.xy = (commonPosition.xy - weight.commonBounds.xy) / (weight.commonBounds.zw - weight.commonBounds.xy) ;
   gl_Position.xy = (gl_Position.xy * 2.) - (1.);
   gl_Position.w = 1.0;
 }

package/src/hexagon-layer/bin-options-uniforms.ts

@@ -0,0 +1,27 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderModule} from '@luma.gl/shadertools';
+import {NumberArray2} from '@math.gl/core';
+
+const uniformBlock = /* glsl */ `\
+uniform binOptionsUniforms {
+  vec2 hexOriginCommon;
+  float radiusCommon;
+} binOptions;
+`;
+
+export type BinOptions = {
+  hexOriginCommon: NumberArray2;
+  radiusCommon: number;
+};
+
+export const binOptionsUniforms = {
+  name: 'binOptions',
+  vs: uniformBlock,
+  uniformTypes: {
+    hexOriginCommon: 'vec2<f32>',
+    radiusCommon: 'f32'
+  }
+} as const satisfies ShaderModule<BinOptions>;