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

package/dist/dist.dev.js

@@ -631,7 +631,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,
@@ -745,6 +744,7 @@ void main() {
       transform.run({
         id: "gpu-aggregation-domain",
         framebuffer: target,
+        discard: false,
         parameters: {
           viewport: [0, 0, 2, 1]
         },
@@ -872,11 +872,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"],
@@ -1146,11 +1143,11 @@ void main() {
       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) {
@@ -1188,6 +1185,83 @@ void main() {
     });
   }
 
+  // src/screen-grid-layer/screen-grid-cell-layer.wgsl.ts
+  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);
+}
+`
+  );
+
   // src/screen-grid-layer/screen-grid-layer-vertex.glsl.ts
   var screen_grid_layer_vertex_glsl_default = (
     /* glsl */
@@ -1250,6 +1324,20 @@ void main(void) {
   );
 
   // src/screen-grid-layer/screen-grid-layer-uniforms.ts
+  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 {
@@ -1261,6 +1349,7 @@ void main(void) {
   );
   var screenGridUniforms = {
     name: "screenGrid",
+    source: uniformBlockWGSL,
     vs: uniformBlock3,
     uniformTypes: {
       cellSizeClipspace: "vec2<f32>",
@@ -1272,7 +1361,7 @@ void main(void) {
   // src/screen-grid-layer/screen-grid-cell-layer.ts
   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({
@@ -1740,6 +1829,126 @@ void main(void) {
   // src/hexagon-layer/hexagon-cell-layer.ts
   var import_layers2 = __toESM(require_layers(), 1);
 
+  // src/hexagon-layer/hexagon-cell-layer.wgsl.ts
+  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);
+}
+`
+  );
+
   // src/hexagon-layer/hexbin.ts
   var THIRD_PI = Math.PI / 3;
   var DIST_X = 2 * Math.sin(THIRD_PI);
@@ -1874,6 +2083,20 @@ void main(void) {
   );
 
   // src/hexagon-layer/hexagon-layer-uniforms.ts
+  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 {
@@ -1886,6 +2109,7 @@ void main(void) {
   );
   var hexagonUniforms = {
     name: "hexagon",
+    source: uniformBlockWGSL2,
     vs: uniformBlock5,
     uniformTypes: {
       colorDomain: "vec4<f32>",
@@ -1900,7 +2124,7 @@ void main(void) {
     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();
@@ -5008,7 +5232,8 @@ void main(void) {
     }
     _updateGeometry() {
       const geometry = new import_engine4.CubeGeometry();
-      this.state.fillModel.setGeometry(geometry);
+      this._setFillGeometry(geometry);
+      this._setWireframeGeometry(geometry);
     }
     draw({ uniforms }) {
       const {
@@ -5494,6 +5719,71 @@ void main(void) {
   var import_engine5 = __toESM(require_engine(), 1);
   var import_core10 = __toESM(require_core(), 1);
 
+  // src/heatmap-layer/triangle-layer.wgsl.ts
+  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);
+}
+`
+  );
+
   // src/heatmap-layer/triangle-layer-vertex.glsl.ts
   var triangle_layer_vertex_glsl_default = `#version 300 es
 #define SHADER_NAME heatp-map-layer-vertex-shader
@@ -5565,6 +5855,23 @@ void main(void) {
 `;
 
   // src/heatmap-layer/triangle-layer-uniforms.ts
+  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;
@@ -5574,6 +5881,7 @@ void main(void) {
 `;
   var triangleUniforms = {
     name: "triangle",
+    source: uniformBlockWGSL3,
     vs: uniformBlock10,
     fs: uniformBlock10,
     uniformTypes: {
@@ -5587,7 +5895,7 @@ void main(void) {
   // src/heatmap-layer/triangle-layer.ts
   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) });
@@ -5840,7 +6148,131 @@ void main() {
 }
 `;
 
+  // src/heatmap-layer/max.wgsl.ts
+  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;
+}
+`
+  );
+
+  // src/heatmap-layer/weights.wgsl.ts
+  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;
+}
+`
+  );
+
   // src/heatmap-layer/heatmap-layer-uniforms.ts
+  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;
@@ -5850,6 +6282,7 @@ void main() {
 `;
   var weightUniforms = {
     name: "weight",
+    source: uniformBlockWGSL4,
     vs: uniformBlock11,
     uniformTypes: {
       commonBounds: "vec4<f32>",
@@ -5860,6 +6293,16 @@ void main() {
   };
   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;
@@ -5871,6 +6314,7 @@ void main() {
 
   // src/heatmap-layer/heatmap-layer.ts
   var RESOLUTION = 2;
+  var MAX_WEIGHT_REDUCTION_SIZE = 16;
   var TEXTURE_PROPS = {
     format: "rgba8unorm",
     dimension: "2d",
@@ -6062,18 +6506,33 @@ void main() {
     }
     _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) {
@@ -6085,13 +6544,20 @@ void main() {
     _createWeightsTransform(shaders) {
       let { weightsTransform } = this.state;
       const { weightsTexture } = this.state;
+      const isWebGPU = this.context.device.type === "webgpu";
       const attributeManager = this.getAttributeManager();
       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,
@@ -6102,7 +6568,7 @@ void main() {
           blendAlphaSrcFactor: "one",
           blendAlphaDstFactor: "one"
         },
-        topology: "point-list",
+        topology: isWebGPU ? "triangle-list" : "point-list",
         modules: [...shaders.modules, weightUniforms]
       });
       this.setState({ weightsTransform });
@@ -6117,6 +6583,7 @@ void main() {
       });
       this._createWeightsTransform(weightsTransformShaders);
       const maxWeightsTransformShaders = this.getShaders({
+        source: max_wgsl_default,
         vs: max_vs_glsl_default,
         fs: max_fs_glsl_default,
         modules: [maxWeightUniforms]
@@ -6125,7 +6592,8 @@ void main() {
         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,
@@ -6239,7 +6707,13 @@ void main() {
       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,