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

package/package.json

@@ -3,7 +3,7 @@
   "description": "deck.gl layers that aggregate the input data into alternative representations",
   "license": "MIT",
   "type": "module",
-  "version": "9.3.7",
+  "version": "9.4.0-alpha.2",
   "publishConfig": {
     "access": "public"
   },
@@ -17,6 +17,10 @@
     "type": "git",
     "url": "https://github.com/visgl/deck.gl.git"
   },
+  "bugs": {
+    "url": "https://github.com/visgl/deck.gl/issues"
+  },
+  "homepage": "https://deck.gl",
   "types": "dist/index.d.ts",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -38,16 +42,16 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@luma.gl/shadertools": "^9.3.3",
+    "@luma.gl/shadertools": "^9.4.0-alpha.1",
     "@math.gl/core": "^4.1.0",
     "@math.gl/web-mercator": "^4.1.0",
     "d3-hexbin": "^0.2.1"
   },
   "peerDependencies": {
-    "@deck.gl/core": "~9.3.0",
-    "@deck.gl/layers": "~9.3.0",
-    "@luma.gl/core": "~9.3.3",
-    "@luma.gl/engine": "~9.3.3"
+    "@deck.gl/core": "~9.3.0-beta.2",
+    "@deck.gl/layers": "~9.3.0-beta.2",
+    "@luma.gl/core": "~9.4.0-alpha.1",
+    "@luma.gl/engine": "~9.4.0-alpha.1"
   },
-  "gitHead": "ac8cd3dd7a70b1f1471729425d63fcff38dc0a13"
+  "gitHead": "546e2e8284b00949ab26e744ffd05b9aa017c802"
 }

package/src/common/aggregation-layer.ts

@@ -39,9 +39,7 @@ export default abstract class AggregationLayer<
   /** Called when some attributes change, a chance to mark Aggregator as dirty */
   abstract onAttributeChange(id: string): void;
 
-  initializeState(): void {
-    this.getAttributeManager()!.remove(['instancePickingColors']);
-  }
+  initializeState(): void {}
 
   // Extend Layer.updateState to update the Aggregator instance
   // returns true if aggregator is changed

package/src/common/aggregator/gpu-aggregator/webgl-aggregation-transform.ts

@@ -112,6 +112,7 @@ export class WebGLAggregationTransform {
     transform.run({
       id: 'gpu-aggregation-domain',
       framebuffer: target,
+      discard: false,
       parameters: {
         viewport: [0, 0, 2, 1]
       },
@@ -243,11 +244,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'],

package/src/common/aggregator/gpu-aggregator/webgl-bin-sorter.ts

@@ -248,7 +248,6 @@ void main() {
   const model = new 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,

package/src/grid-layer/grid-cell-layer-vertex.glsl.ts

@@ -12,7 +12,6 @@ in vec3 normals;
 in vec2 instancePositions;
 in float instanceElevationValues;
 in float instanceColorValues;
-in vec3 instancePickingColors;
 
 uniform sampler2D colorRange;
 
@@ -30,7 +29,7 @@ vec4 interp(float value, vec2 domain, sampler2D range) {
 }
 
 void main(void) {
-  geometry.pickingColor = instancePickingColors;
+  geometry.pickingColor = picking_getPickingColorFromInstanceID();
 
   if (isnan(instanceColorValues) ||
     instanceColorValues < grid.colorDomain.z ||

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

@@ -97,7 +97,8 @@ export class GridCellLayer<ExtraPropsT extends {} = {}> extends ColumnLayer<
 
   protected _updateGeometry() {
     const geometry = new CubeGeometry();
-    this.state.fillModel!.setGeometry(geometry);
+    this._setFillGeometry(geometry);
+    this._setWireframeGeometry(geometry);
   }
 
   draw({uniforms}) {

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-vertex.glsl.ts

@@ -14,7 +14,6 @@ in vec3 normals;
 in vec2 instancePositions;
 in float instanceElevationValues;
 in float instanceColorValues;
-in vec3 instancePickingColors;
 
 uniform sampler2D colorRange;
 
@@ -34,7 +33,7 @@ vec4 interp(float value, vec2 domain, sampler2D range) {
 }
 
 void main(void) {
-  geometry.pickingColor = instancePickingColors;
+  geometry.pickingColor = picking_getPickingColorFromInstanceID();
 
   if (isnan(instanceColorValues) ||
     instanceColorValues < hexagon.colorDomain.z ||

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() {