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

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

@@ -5,6 +5,20 @@
 import {Texture} from '@luma.gl/core';
 import type {ShaderModule} from '@luma.gl/shadertools';
 
+const uniformBlockWGSL = /* wgsl */ `\
+struct gridUniforms {
+  colorDomain: vec4<f32>,
+  elevationDomain: vec4<f32>,
+  elevationRange: vec2<f32>,
+  originCommon: vec2<f32>,
+  sizeCommon: vec2<f32>,
+};
+
+@group(0) @binding(auto) var<uniform> grid: gridUniforms;
+@group(0) @binding(auto) var colorRange: texture_2d<f32>;
+@group(0) @binding(auto) var colorRangeSampler: sampler;
+`;
+
 const uniformBlock = /* glsl */ `\
 layout(std140) uniform gridUniforms {
   vec4 colorDomain;
@@ -26,6 +40,7 @@ export type GridProps = {
 
 export const gridUniforms = {
   name: 'grid',
+  source: uniformBlockWGSL,
   vs: uniformBlock,
   uniformTypes: {
     colorDomain: 'vec4<f32>',

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

@@ -5,6 +5,17 @@
 import {Texture} from '@luma.gl/core';
 import type {ShaderModule} from '@luma.gl/shadertools';
 
+const uniformBlockWGSL = /* wgsl */ `\
+struct weightUniforms {
+  commonBounds: vec4<f32>,
+  radiusPixels: f32,
+  textureWidth: f32,
+  weightsScale: f32,
+};
+
+@group(0) @binding(auto) var<uniform> weight: weightUniforms;
+`;
+
 const uniformBlock = `\
 layout(std140) uniform weightUniforms {
   vec4 commonBounds;
@@ -23,6 +34,7 @@ export type WeightProps = {
 
 export const weightUniforms = {
   name: 'weight',
+  source: uniformBlockWGSL,
   vs: uniformBlock,
   uniformTypes: {
     commonBounds: 'vec4<f32>',
@@ -39,6 +51,14 @@ export type MaxWeightProps = {
 
 export const maxWeightUniforms = {
   name: 'maxWeight',
+  source: /* wgsl */ `\
+struct maxWeightUniforms {
+  textureSize: f32,
+};
+
+@group(0) @binding(auto) var<uniform> maxWeight: maxWeightUniforms;
+@group(0) @binding(auto) var inTexture: texture_2d<f32>;
+`,
   vs: `\
 layout(std140) uniform maxWeightUniforms {
   float textureSize;

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

@@ -10,7 +10,14 @@ import {
   scaleToAspectRatio,
   getTextureCoordinates
 } from './heatmap-layer-utils';
-import {Buffer, DeviceFeature, Texture, TextureProps, TextureFormat} from '@luma.gl/core';
+import {
+  Buffer,
+  DeviceFeature,
+  Texture,
+  TextureProps,
+  TextureFormat,
+  TextureFormatColor
+} from '@luma.gl/core';
 import {TextureTransform, TextureTransformProps} from '@luma.gl/engine';
 import {
   Accessor,
@@ -34,6 +41,8 @@ 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 maxSource from './max.wgsl';
+import weightsSource from './weights.wgsl';
 import {
   MaxWeightProps,
   maxWeightUniforms,
@@ -42,6 +51,7 @@ import {
 } from './heatmap-layer-uniforms';
 
 const RESOLUTION = 2; // (number of common space pixels) / (number texels)
+const MAX_WEIGHT_REDUCTION_SIZE = 16;
 const TEXTURE_PROPS: TextureProps = {
   format: 'rgba8unorm',
   dimension: '2d',
@@ -376,11 +386,26 @@ export default class HeatmapLayer<
 
   _setupAttributes() {
     const attributeManager = this.getAttributeManager()!;
-    attributeManager.add({
-      positions: {size: 3, type: 'float64', accessor: 'getPosition'},
-      weights: {size: 1, accessor: 'getWeight'}
-    });
-    this.setState({positionAttributeName: 'positions'});
+
+    if (this.context.device.type === 'webgpu') {
+      attributeManager.addInstanced({
+        instancePositions: {
+          size: 3,
+          type: 'float64',
+          accessor: 'getPosition',
+          // Normalize binary XY positions into the packed XYZ high/low layout WebGPU requires.
+          transform: (position: Position) => [position[0], position[1], position[2] ?? 0]
+        },
+        instanceWeights: {size: 1, accessor: 'getWeight'}
+      });
+      this.setState({positionAttributeName: 'instancePositions'});
+    } else {
+      attributeManager.add({
+        positions: {size: 3, type: 'float64', accessor: 'getPosition'},
+        weights: {size: 1, accessor: 'getWeight'}
+      });
+      this.setState({positionAttributeName: 'positions'});
+    }
   }
 
   _setupTextureParams() {
@@ -388,8 +413,15 @@ export default class HeatmapLayer<
     const {weightsTextureSize} = this.props;
 
     const textureSize = Math.min(weightsTextureSize, device.limits.maxTextureDimension2D);
-    const floatTargetSupport = FLOAT_TARGET_FEATURES.every(feature => device.features.has(feature));
-    const format: TextureFormat = floatTargetSupport ? 'rgba32float' : 'rgba8unorm';
+    const isWebGPU = device.type === 'webgpu';
+    const floatTargetSupport = isWebGPU
+      ? device.getTextureFormatCapabilities('rgba16float').blend
+      : FLOAT_TARGET_FEATURES.every(feature => device.features.has(feature));
+    const format: TextureFormat = floatTargetSupport
+      ? isWebGPU
+        ? 'rgba16float'
+        : 'rgba32float'
+      : 'rgba8unorm';
     const weightsScale = floatTargetSupport ? 1 : 1 / 255;
     this.setState({textureSize, format, weightsScale});
     if (!floatTargetSupport) {
@@ -402,14 +434,23 @@ export default class HeatmapLayer<
   _createWeightsTransform(shaders: {vs: string; fs?: string; modules: any[]}) {
     let {weightsTransform} = this.state;
     const {weightsTexture} = this.state;
+    const isWebGPU = this.context.device.type === 'webgpu';
     const attributeManager = this.getAttributeManager()!;
 
     weightsTransform?.destroy();
     weightsTransform = new TextureTransform(this.context.device, {
       id: `${this.id}-weights-transform`,
       ...shaders,
-      bufferLayout: attributeManager.getBufferLayouts(),
-      vertexCount: 1,
+      source: weightsSource,
+      bufferLayout: attributeManager.getBufferLayouts({isInstanced: isWebGPU}),
+      vertexCount: isWebGPU ? 6 : 1,
+      ...(isWebGPU
+        ? {
+            colorAttachmentFormats: [weightsTexture!.format as TextureFormatColor],
+            isInstanced: true,
+            instanceCount: this.getNumInstances()
+          }
+        : {}),
       targetTexture: weightsTexture!,
       parameters: {
         depthWriteEnabled: false,
@@ -420,7 +461,7 @@ export default class HeatmapLayer<
         blendAlphaSrcFactor: 'one',
         blendAlphaDstFactor: 'one'
       },
-      topology: 'point-list',
+      topology: isWebGPU ? 'triangle-list' : 'point-list',
       modules: [...shaders.modules, weightUniforms]
     } as TextureTransformProps);
 
@@ -439,6 +480,7 @@ export default class HeatmapLayer<
     this._createWeightsTransform(weightsTransformShaders);
 
     const maxWeightsTransformShaders = this.getShaders({
+      source: maxSource,
       vs: maxVs,
       fs: maxFs,
       modules: [maxWeightUniforms]
@@ -447,7 +489,13 @@ export default class HeatmapLayer<
       id: `${this.id}-max-weights-transform`,
       targetTexture: maxWeightsTexture!,
       ...maxWeightsTransformShaders,
-      vertexCount: textureSize * textureSize,
+      ...(device.type === 'webgpu'
+        ? {colorAttachmentFormats: [maxWeightsTexture!.format as TextureFormatColor]}
+        : {}),
+      vertexCount:
+        device.type === 'webgpu'
+          ? Math.ceil(textureSize / MAX_WEIGHT_REDUCTION_SIZE) ** 2
+          : textureSize * textureSize,
       topology: 'point-list',
       parameters: {
         depthWriteEnabled: false,
@@ -605,7 +653,13 @@ export default class HeatmapLayer<
     const attributes = attributeManager.getAttributes();
     const moduleSettings = this.getModuleSettings();
     this._setModelAttributes(weightsTransform.model, attributes);
-    weightsTransform.model.setVertexCount(this.getNumInstances());
+    if (this.context.device.type === 'webgpu') {
+      const instanceCount = this.getNumInstances();
+      weightsTransform.model.setVertexCount(instanceCount > 0 ? 6 : 0);
+      weightsTransform.model.setInstanceCount(instanceCount);
+    } else {
+      weightsTransform.model.setVertexCount(this.getNumInstances());
+    }
 
     const weightProps: WeightProps = {
       radiusPixels,

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

@@ -0,0 +1,48 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export default /* wgsl */ `\
+struct MaxWeightVaryings {
+  @builtin(position) position: vec4<f32>,
+  @location(0) weights: vec4<f32>,
+};
+
+const MAX_WEIGHT_REDUCTION_SIZE: u32 = 16u;
+
+@vertex
+fn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> MaxWeightVaryings {
+  var output: MaxWeightVaryings;
+  let textureSize = u32(maxWeight.textureSize);
+  let reducedTextureSize =
+    (textureSize + MAX_WEIGHT_REDUCTION_SIZE - 1u) / MAX_WEIGHT_REDUCTION_SIZE;
+  let blockCoordinates = vec2<u32>(
+    vertexIndex % reducedTextureSize,
+    vertexIndex / reducedTextureSize
+  );
+  var maximumWeights = vec4<f32>(0.0);
+
+  for (var y = 0u; y < MAX_WEIGHT_REDUCTION_SIZE; y++) {
+    for (var x = 0u; x < MAX_WEIGHT_REDUCTION_SIZE; x++) {
+      let textureCoordinates = blockCoordinates * MAX_WEIGHT_REDUCTION_SIZE + vec2<u32>(x, y);
+
+      if (textureCoordinates.x < textureSize && textureCoordinates.y < textureSize) {
+        let weights = textureLoad(inTexture, vec2<i32>(textureCoordinates), 0);
+        maximumWeights.r = max(maximumWeights.r, weights.r);
+        maximumWeights.g = max(maximumWeights.g, weights.r / max(1.0, weights.a));
+        maximumWeights.b = max(maximumWeights.b, weights.b);
+        maximumWeights.a = max(maximumWeights.a, weights.a);
+      }
+    }
+  }
+
+  output.position = vec4<f32>(0.0, 0.0, 0.0, 1.0);
+  output.weights = maximumWeights;
+  return output;
+}
+
+@fragment
+fn fragmentMain(varyings: MaxWeightVaryings) -> @location(0) vec4<f32> {
+  return varyings.weights;
+}
+`;

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

@@ -5,6 +5,22 @@
 import {Texture} from '@luma.gl/core';
 import type {ShaderModule} from '@luma.gl/shadertools';
 
+const uniformBlockWGSL = /* wgsl */ `\
+struct triangleUniforms {
+  aggregationMode: f32,
+  colorDomain: vec2<f32>,
+  intensity: f32,
+  threshold: f32,
+};
+
+@group(0) @binding(auto) var<uniform> triangle: triangleUniforms;
+@group(0) @binding(auto) var colorTexture: texture_2d<f32>;
+@group(0) @binding(auto) var colorTextureSampler: sampler;
+@group(0) @binding(auto) var maxTexture: texture_2d<f32>;
+@group(0) @binding(auto) var weightsTexture: texture_2d<f32>;
+@group(0) @binding(auto) var weightsTextureSampler: sampler;
+`;
+
 const uniformBlock = `\
 layout(std140) uniform triangleUniforms {
   float aggregationMode;
@@ -26,6 +42,7 @@ export type TriangleProps = {
 
 export const triangleUniforms = {
   name: 'triangle',
+  source: uniformBlockWGSL,
   vs: uniformBlock,
   fs: uniformBlock,
   uniformTypes: {

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

@@ -4,7 +4,8 @@
 
 import type {Buffer, Device, Texture} from '@luma.gl/core';
 import {Model} from '@luma.gl/engine';
-import {Layer, LayerContext, project32} from '@deck.gl/core';
+import {Layer, LayerContext, color, project32} from '@deck.gl/core';
+import source from './triangle-layer.wgsl';
 import vs from './triangle-layer-vertex.glsl';
 import fs from './triangle-layer-fragment.glsl';
 import {TriangleProps, triangleUniforms} from './triangle-layer-uniforms';
@@ -31,7 +32,7 @@ export default class TriangleLayer extends Layer<_TriangleLayerProps> {
   };
 
   getShaders() {
-    return super.getShaders({vs, fs, modules: [project32, triangleUniforms]});
+    return super.getShaders({source, vs, fs, modules: [project32, color, triangleUniforms]});
   }
 
   initializeState({device}: LayerContext): void {

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

@@ -0,0 +1,65 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export default /* wgsl */ `\
+struct TriangleAttributes {
+  @location(0) positions: vec3<f32>,
+  @location(1) texCoords: vec2<f32>,
+};
+
+struct TriangleVaryings {
+  @builtin(position) position: vec4<f32>,
+  @location(0) textureCoordinates: vec2<f32>,
+  @location(1) intensityMinimum: f32,
+  @location(2) intensityMaximum: f32,
+};
+
+@vertex
+fn vertexMain(attributes: TriangleAttributes) -> TriangleVaryings {
+  var output: TriangleVaryings;
+  output.position = project_position_to_clipspace(
+    attributes.positions,
+    vec3<f32>(0.0),
+    vec3<f32>(0.0)
+  );
+  // WebGPU render-target textures use a top-left origin.
+  output.textureCoordinates = vec2<f32>(attributes.texCoords.x, 1.0 - attributes.texCoords.y);
+
+  let maxWeights = textureLoad(maxTexture, vec2<i32>(0), 0);
+  var maximumValue = select(maxWeights.r, maxWeights.g, triangle.aggregationMode > 0.5);
+  var minimumValue = maximumValue * triangle.threshold;
+
+  if (triangle.colorDomain.y > 0.0) {
+    maximumValue = triangle.colorDomain.y;
+    minimumValue = triangle.colorDomain.x;
+  }
+
+  output.intensityMaximum = triangle.intensity / maximumValue;
+  output.intensityMinimum = triangle.intensity / minimumValue;
+  return output;
+}
+
+@fragment
+fn fragmentMain(varyings: TriangleVaryings) -> @location(0) vec4<f32> {
+  let weights = textureSample(weightsTexture, weightsTextureSampler, varyings.textureCoordinates);
+  var weight = weights.r;
+
+  if (triangle.aggregationMode > 0.5) {
+    weight /= max(1.0, weights.a);
+  }
+
+  let colorCoordinates = vec2<f32>(
+    clamp(weight * varyings.intensityMaximum, 0.0, 1.0),
+    0.5
+  );
+  var color = textureSample(colorTexture, colorTextureSampler, colorCoordinates);
+
+  if (weight <= 0.0) {
+    discard;
+  }
+
+  color.a *= min(weight * varyings.intensityMinimum, 1.0) * layer.opacity;
+  return deckgl_premultiplied_alpha(color);
+}
+`;

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

@@ -0,0 +1,64 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export default /* wgsl */ `\
+struct WeightAttributes {
+  @builtin(vertex_index) vertexIndex: u32,
+  @location(0) instancePositions: vec3<f32>,
+  @location(1) instancePositions64Low: vec3<f32>,
+  @location(2) instanceWeights: f32,
+};
+
+struct WeightVaryings {
+  @builtin(position) position: vec4<f32>,
+  @location(0) pointCoordinates: vec2<f32>,
+  @location(1) weights: vec4<f32>,
+};
+
+const WEIGHT_QUAD_POSITIONS = array<vec2<f32>, 6>(
+  vec2<f32>(-1.0, -1.0),
+  vec2<f32>(1.0, -1.0),
+  vec2<f32>(-1.0, 1.0),
+  vec2<f32>(-1.0, 1.0),
+  vec2<f32>(1.0, -1.0),
+  vec2<f32>(1.0, 1.0)
+);
+
+@vertex
+fn vertexMain(attributes: WeightAttributes) -> WeightVaryings {
+  var output: WeightVaryings;
+  let commonPosition = project_position_vec3_f64(
+    attributes.instancePositions,
+    attributes.instancePositions64Low
+  );
+  let clipPosition =
+    (commonPosition.xy - weight.commonBounds.xy) /
+    (weight.commonBounds.zw - weight.commonBounds.xy) * 2.0 - vec2<f32>(1.0);
+  let radiusTexels =
+    project_pixel_size_float(weight.radiusPixels) * weight.textureWidth /
+    (weight.commonBounds.z - weight.commonBounds.x);
+  let offset = WEIGHT_QUAD_POSITIONS[attributes.vertexIndex];
+
+  output.position = vec4<f32>(
+    clipPosition + offset * radiusTexels * 2.0 / weight.textureWidth,
+    0.0,
+    1.0
+  );
+  output.pointCoordinates = (offset + vec2<f32>(1.0)) * 0.5;
+  output.weights = vec4<f32>(attributes.instanceWeights * weight.weightsScale, 0.0, 0.0, 1.0);
+  return output;
+}
+
+@fragment
+fn fragmentMain(varyings: WeightVaryings) -> @location(0) vec4<f32> {
+  let distanceFromCenter = length(varyings.pointCoordinates - vec2<f32>(0.5));
+  if (distanceFromCenter > 0.5) {
+    discard;
+  }
+
+  let gaussian = exp(-pow(2.0 * distanceFromCenter, 2.0) / 0.05555) /
+    (1.77245385 * 0.166666);
+  return varyings.weights * gaussian;
+}
+`;

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

@@ -6,6 +6,7 @@ import {Texture} from '@luma.gl/core';
 import {UpdateParameters, Color} from '@deck.gl/core';
 import {ColumnLayer} from '@deck.gl/layers';
 import {createColorRangeTexture, updateColorRangeTexture} from '../common/utils/color-utils';
+import source from './hexagon-cell-layer.wgsl';
 import vs from './hexagon-cell-layer-vertex.glsl';
 import {HexagonProps, hexagonUniforms} from './hexagon-layer-uniforms';
 import type {ScaleType} from '../common/types';
@@ -35,7 +36,7 @@ export default class HexagonCellLayer<ExtraPropsT extends {} = {}> extends Colum
   getShaders() {
     const shaders = super.getShaders();
     shaders.modules.push(hexagonUniforms);
-    return {...shaders, vs};
+    return {...shaders, source, vs};
   }
 
   initializeState() {
@@ -108,8 +109,6 @@ export default class HexagonCellLayer<ExtraPropsT extends {} = {}> extends Colum
     const elevationCutoff = this.props.elevationCutoff || [-Infinity, Infinity];
     const fillModel = this.state.fillModel!;
 
-    fillModel.setVertexCount(this.state.fillVertexCount);
-
     const hexagonProps: Omit<HexagonProps, 'colorRange'> = {
       colorDomain: [
         Math.max(colorDomain[0], colorCutoff[0]), // instanceColorValue that maps to colorRange[0]

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

@@ -0,0 +1,120 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export default /* wgsl */ `\
+const HEXBIN_DISTANCE: vec2<f32> = vec2<f32>(1.7320508, 1.5);
+
+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 hexbinCentroid(binId: vec2<f32>, radius: f32) -> vec2<f32> {
+  var adjustedBinId = binId;
+  adjustedBinId.x += fract(adjustedBinId.y * 0.5);
+  return adjustedBinId * HEXBIN_DISTANCE * radius;
+}
+
+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 < hexagon.colorDomain.z ||
+    attributes.instanceColorValues > hexagon.colorDomain.w ||
+    attributes.instanceElevationValues < hexagon.elevationDomain.z ||
+    attributes.instanceElevationValues > hexagon.elevationDomain.w
+  ) {
+    output.position = vec4<f32>(0.0);
+    output.color = vec4<f32>(0.0);
+    return output;
+  }
+
+  var commonPosition =
+    hexbinCentroid(attributes.instancePositions, column.radius) +
+    (hexagon.originCommon - project.commonOrigin.xy);
+  commonPosition += attributes.positions.xy * column.radius * column.coverage;
+  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,
+      hexagon.elevationDomain.xy,
+      hexagon.elevationRange
+    );
+    elevation = project_size_float(elevation);
+    geometry.position.z = (attributes.positions.z + 1.0) / 2.0 * elevation;
+  }
+
+  output.position = project_common_position_to_clipspace(geometry.position);
+  var colorValue = sampleColorRange(attributes.instanceColorValues, hexagon.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);
+}
+`;

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

@@ -5,6 +5,19 @@
 import {Texture} from '@luma.gl/core';
 import type {ShaderModule} from '@luma.gl/shadertools';
 
+const uniformBlockWGSL = /* wgsl */ `\
+struct HexagonUniforms {
+  colorDomain: vec4<f32>,
+  elevationDomain: vec4<f32>,
+  elevationRange: vec2<f32>,
+  originCommon: vec2<f32>,
+};
+
+@group(0) @binding(auto) var<uniform> hexagon: HexagonUniforms;
+@group(0) @binding(auto) var colorRange: texture_2d<f32>;
+@group(0) @binding(auto) var colorRangeSampler: sampler;
+`;
+
 const uniformBlock = /* glsl */ `\
 layout(std140) uniform hexagonUniforms {
   vec4 colorDomain;
@@ -24,6 +37,7 @@ export type HexagonProps = {
 
 export const hexagonUniforms = {
   name: 'hexagon',
+  source: uniformBlockWGSL,
   vs: uniformBlock,
   uniformTypes: {
     colorDomain: 'vec4<f32>',

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

@@ -4,12 +4,12 @@
 
 import {Texture} from '@luma.gl/core';
 import {Model, Geometry} from '@luma.gl/engine';
-import {Layer, picking, UpdateParameters, Color} from '@deck.gl/core';
+import {Layer, color, picking, UpdateParameters, Color} from '@deck.gl/core';
 import {createColorRangeTexture, updateColorRangeTexture} from '../common/utils/color-utils';
+import source from './screen-grid-cell-layer.wgsl';
 import vs from './screen-grid-layer-vertex.glsl';
 import fs from './screen-grid-layer-fragment.glsl';
 import {ScreenGridProps, screenGridUniforms} from './screen-grid-layer-uniforms';
-import {ShaderModule} from '@luma.gl/shadertools';
 import type {ScaleType} from '../common/types';
 
 /** Proprties added by ScreenGridCellLayer. */
@@ -31,8 +31,8 @@ export default class ScreenGridCellLayer<ExtraPropsT extends {} = {}> extends La
     colorTexture: Texture;
   };
 
-  getShaders(): {vs: string; fs: string; modules: ShaderModule[]} {
-    return super.getShaders({vs, fs, modules: [picking, screenGridUniforms]});
+  getShaders() {
+    return super.getShaders({source, vs, fs, modules: [color, picking, screenGridUniforms]});
   }
 
   initializeState() {