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

package/dist/index.cjs

@@ -554,7 +554,6 @@ void main() {
   const model = new import_engine.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,
@@ -665,6 +664,7 @@ var WebGLAggregationTransform = class {
     transform.run({
       id: "gpu-aggregation-domain",
       framebuffer: target,
+      discard: false,
       parameters: {
         viewport: [0, 0, 2, 1]
       },
@@ -792,11 +792,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"],
@@ -1068,11 +1065,11 @@ function colorRangeToFlatArray(colorRange, normalize = false, ArrayType = Float3
     flatArray = new ArrayType(colorRange.length * 4);
     let index = 0;
     for (let i = 0; i < colorRange.length; i++) {
-      const color = colorRange[i];
-      flatArray[index++] = color[0];
-      flatArray[index++] = color[1];
-      flatArray[index++] = color[2];
-      flatArray[index++] = Number.isFinite(color[3]) ? color[3] : 255;
+      const color3 = colorRange[i];
+      flatArray[index++] = color3[0];
+      flatArray[index++] = color3[1];
+      flatArray[index++] = color3[2];
+      flatArray[index++] = Number.isFinite(color3[3]) ? color3[3] : 255;
     }
   }
   if (normalize) {
@@ -1110,6 +1107,83 @@ function createColorRangeTexture(device, colorRange, type = "linear") {
   });
 }
 
+// dist/screen-grid-layer/screen-grid-cell-layer.wgsl.js
+var screen_grid_cell_layer_wgsl_default = (
+  /* wgsl */
+  `
+struct Attributes {
+  @builtin(instance_index) instanceIndex: u32,
+  @location(0) positions: vec2<f32>,
+  @location(1) instancePositions: vec2<f32>,
+  @location(2) instanceWeights: f32,
+};
+
+struct Varyings {
+  @builtin(position) position: vec4<f32>,
+  @location(0) color: vec4<f32>,
+  @location(1) pickingColor: vec3<f32>,
+};
+
+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;
+  output.pickingColor = picking_getPickingColorFromIndex(attributes.instanceIndex);
+
+  if (attributes.instanceWeights != attributes.instanceWeights) {
+    output.position = vec4<f32>(0.0);
+    output.color = vec4<f32>(0.0);
+    return output;
+  }
+
+  var position =
+    attributes.instancePositions * screenGrid.gridSizeClipspace +
+    attributes.positions * screenGrid.cellSizeClipspace;
+  position.x -= 1.0;
+  position.y = 1.0 - position.y;
+
+  output.position = vec4<f32>(position, 0.0, 1.0);
+  let colorValue = sampleColorRange(attributes.instanceWeights, screenGrid.colorDomain);
+  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);
+}
+`
+);
+
 // dist/screen-grid-layer/screen-grid-layer-vertex.glsl.js
 var screen_grid_layer_vertex_glsl_default = (
   /* glsl */
@@ -1157,6 +1231,20 @@ DECKGL_FILTER_COLOR(fragColor, geometry);
 );
 
 // dist/screen-grid-layer/screen-grid-layer-uniforms.js
+var uniformBlockWGSL = (
+  /* wgsl */
+  `
+struct ScreenGridUniforms {
+  cellSizeClipspace: vec2<f32>,
+  gridSizeClipspace: vec2<f32>,
+  colorDomain: vec2<f32>,
+};
+
+@group(0) @binding(auto) var<uniform> screenGrid: ScreenGridUniforms;
+@group(0) @binding(auto) var colorRange: texture_2d<f32>;
+@group(0) @binding(auto) var colorRangeSampler: sampler;
+`
+);
 var uniformBlock3 = (
   /* glsl */
   `layout(std140) uniform screenGridUniforms {
@@ -1168,6 +1256,7 @@ var uniformBlock3 = (
 );
 var screenGridUniforms = {
   name: "screenGrid",
+  source: uniformBlockWGSL,
   vs: uniformBlock3,
   uniformTypes: {
     cellSizeClipspace: "vec2<f32>",
@@ -1179,7 +1268,7 @@ var screenGridUniforms = {
 // dist/screen-grid-layer/screen-grid-cell-layer.js
 var ScreenGridCellLayer = class extends import_core4.Layer {
   getShaders() {
-    return super.getShaders({ vs: screen_grid_layer_vertex_glsl_default, fs: screen_grid_layer_fragment_glsl_default, modules: [import_core4.picking, screenGridUniforms] });
+    return super.getShaders({ source: screen_grid_cell_layer_wgsl_default, vs: screen_grid_layer_vertex_glsl_default, fs: screen_grid_layer_fragment_glsl_default, modules: [import_core4.color, import_core4.picking, screenGridUniforms] });
   }
   initializeState() {
     this.getAttributeManager().addInstanced({
@@ -1634,6 +1723,126 @@ function getBinIdRange({ dataBounds, getBinId, padding = 0 }) {
 // dist/hexagon-layer/hexagon-cell-layer.js
 var import_layers = require("@deck.gl/layers");
 
+// dist/hexagon-layer/hexagon-cell-layer.wgsl.js
+var hexagon_cell_layer_wgsl_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);
+}
+`
+);
+
 // dist/hexagon-layer/hexbin.js
 var THIRD_PI = Math.PI / 3;
 var DIST_X = 2 * Math.sin(THIRD_PI);
@@ -1752,6 +1961,20 @@ DECKGL_FILTER_COLOR(vColor, geometry);
 );
 
 // dist/hexagon-layer/hexagon-layer-uniforms.js
+var uniformBlockWGSL2 = (
+  /* 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;
+`
+);
 var uniformBlock5 = (
   /* glsl */
   `layout(std140) uniform hexagonUniforms {
@@ -1764,6 +1987,7 @@ var uniformBlock5 = (
 );
 var hexagonUniforms = {
   name: "hexagon",
+  source: uniformBlockWGSL2,
   vs: uniformBlock5,
   uniformTypes: {
     colorDomain: "vec4<f32>",
@@ -1778,7 +2002,7 @@ var HexagonCellLayer = class extends import_layers.ColumnLayer {
   getShaders() {
     const shaders = super.getShaders();
     shaders.modules.push(hexagonUniforms);
-    return { ...shaders, vs: hexagon_cell_layer_vertex_glsl_default };
+    return { ...shaders, source: hexagon_cell_layer_wgsl_default, vs: hexagon_cell_layer_vertex_glsl_default };
   }
   initializeState() {
     super.initializeState();
@@ -3153,7 +3377,8 @@ var GridCellLayer = class extends import_layers3.ColumnLayer {
   }
   _updateGeometry() {
     const geometry = new import_engine4.CubeGeometry();
-    this.state.fillModel.setGeometry(geometry);
+    this._setFillGeometry(geometry);
+    this._setWireframeGeometry(geometry);
   }
   draw({ uniforms }) {
     const { cellOriginCommon, cellSizeCommon, elevationRange, elevationScale, extruded, coverage, colorDomain, elevationDomain } = this.props;
@@ -3607,6 +3832,71 @@ var import_core12 = require("@deck.gl/core");
 var import_engine5 = require("@luma.gl/engine");
 var import_core10 = require("@deck.gl/core");
 
+// dist/heatmap-layer/triangle-layer.wgsl.js
+var triangle_layer_wgsl_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);
+}
+`
+);
+
 // dist/heatmap-layer/triangle-layer-vertex.glsl.js
 var triangle_layer_vertex_glsl_default = `#version 300 es
 #define SHADER_NAME heatp-map-layer-vertex-shader
@@ -3663,6 +3953,23 @@ fragColor = linearColor;
 `;
 
 // dist/heatmap-layer/triangle-layer-uniforms.js
+var uniformBlockWGSL3 = (
+  /* 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;
+`
+);
 var uniformBlock10 = `layout(std140) uniform triangleUniforms {
   float aggregationMode;
   vec2 colorDomain;
@@ -3672,6 +3979,7 @@ var uniformBlock10 = `layout(std140) uniform triangleUniforms {
 `;
 var triangleUniforms = {
   name: "triangle",
+  source: uniformBlockWGSL3,
   vs: uniformBlock10,
   fs: uniformBlock10,
   uniformTypes: {
@@ -3685,7 +3993,7 @@ var triangleUniforms = {
 // dist/heatmap-layer/triangle-layer.js
 var TriangleLayer = class extends import_core10.Layer {
   getShaders() {
-    return super.getShaders({ vs: triangle_layer_vertex_glsl_default, fs: triangle_layer_fragment_glsl_default, modules: [import_core10.project32, triangleUniforms] });
+    return super.getShaders({ source: triangle_layer_wgsl_default, vs: triangle_layer_vertex_glsl_default, fs: triangle_layer_fragment_glsl_default, modules: [import_core10.project32, import_core10.color, triangleUniforms] });
   }
   initializeState({ device }) {
     this.setState({ model: this._getModel(device) });
@@ -3919,7 +4227,131 @@ fragColor.g = outTexture.r / max(1.0, outTexture.a);
 }
 `;
 
+// dist/heatmap-layer/max.wgsl.js
+var max_wgsl_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;
+}
+`
+);
+
+// dist/heatmap-layer/weights.wgsl.js
+var weights_wgsl_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;
+}
+`
+);
+
 // dist/heatmap-layer/heatmap-layer-uniforms.js
+var uniformBlockWGSL4 = (
+  /* wgsl */
+  `struct weightUniforms {
+  commonBounds: vec4<f32>,
+  radiusPixels: f32,
+  textureWidth: f32,
+  weightsScale: f32,
+};
+
+@group(0) @binding(auto) var<uniform> weight: weightUniforms;
+`
+);
 var uniformBlock11 = `layout(std140) uniform weightUniforms {
   vec4 commonBounds;
   float radiusPixels;
@@ -3929,6 +4361,7 @@ var uniformBlock11 = `layout(std140) uniform weightUniforms {
 `;
 var weightUniforms = {
   name: "weight",
+  source: uniformBlockWGSL4,
   vs: uniformBlock11,
   uniformTypes: {
     commonBounds: "vec4<f32>",
@@ -3939,6 +4372,16 @@ var weightUniforms = {
 };
 var 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;
 } maxWeight;
@@ -3950,6 +4393,7 @@ var maxWeightUniforms = {
 
 // dist/heatmap-layer/heatmap-layer.js
 var RESOLUTION = 2;
+var MAX_WEIGHT_REDUCTION_SIZE = 16;
 var TEXTURE_PROPS = {
   format: "rgba8unorm",
   dimension: "2d",
@@ -4122,18 +4566,33 @@ var HeatmapLayer = class extends aggregation_layer_default2 {
   }
   _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[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() {
     const { device } = this.context;
     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 = 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 = floatTargetSupport ? isWebGPU ? "rgba16float" : "rgba32float" : "rgba8unorm";
     const weightsScale = floatTargetSupport ? 1 : 1 / 255;
     this.setState({ textureSize, format, weightsScale });
     if (!floatTargetSupport) {
@@ -4143,13 +4602,20 @@ var HeatmapLayer = class extends aggregation_layer_default2 {
   _createWeightsTransform(shaders) {
     let { weightsTransform } = this.state;
     const { weightsTexture } = this.state;
+    const isWebGPU = this.context.device.type === "webgpu";
     const attributeManager = this.getAttributeManager();
     weightsTransform == null ? void 0 : weightsTransform.destroy();
     weightsTransform = new import_engine6.TextureTransform(this.context.device, {
       id: `${this.id}-weights-transform`,
       ...shaders,
-      bufferLayout: attributeManager.getBufferLayouts(),
-      vertexCount: 1,
+      source: weights_wgsl_default,
+      bufferLayout: attributeManager.getBufferLayouts({ isInstanced: isWebGPU }),
+      vertexCount: isWebGPU ? 6 : 1,
+      ...isWebGPU ? {
+        colorAttachmentFormats: [weightsTexture.format],
+        isInstanced: true,
+        instanceCount: this.getNumInstances()
+      } : {},
       targetTexture: weightsTexture,
       parameters: {
         depthWriteEnabled: false,
@@ -4160,7 +4626,7 @@ var HeatmapLayer = class extends aggregation_layer_default2 {
         blendAlphaSrcFactor: "one",
         blendAlphaDstFactor: "one"
       },
-      topology: "point-list",
+      topology: isWebGPU ? "triangle-list" : "point-list",
       modules: [...shaders.modules, weightUniforms]
     });
     this.setState({ weightsTransform });
@@ -4175,6 +4641,7 @@ var HeatmapLayer = class extends aggregation_layer_default2 {
     });
     this._createWeightsTransform(weightsTransformShaders);
     const maxWeightsTransformShaders = this.getShaders({
+      source: max_wgsl_default,
       vs: max_vs_glsl_default,
       fs: max_fs_glsl_default,
       modules: [maxWeightUniforms]
@@ -4183,7 +4650,8 @@ var HeatmapLayer = class extends aggregation_layer_default2 {
       id: `${this.id}-max-weights-transform`,
       targetTexture: maxWeightsTexture,
       ...maxWeightsTransformShaders,
-      vertexCount: textureSize * textureSize,
+      ...device.type === "webgpu" ? { colorAttachmentFormats: [maxWeightsTexture.format] } : {},
+      vertexCount: device.type === "webgpu" ? Math.ceil(textureSize / MAX_WEIGHT_REDUCTION_SIZE) ** 2 : textureSize * textureSize,
       topology: "point-list",
       parameters: {
         depthWriteEnabled: false,
@@ -4295,7 +4763,13 @@ var HeatmapLayer = class extends aggregation_layer_default2 {
     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 = {
       radiusPixels,
       commonBounds,