@deck.gl-community/infovis-layers 9.3.8 → 9.4.0-alpha.1

package/dist/layers/fast-text-layer/fast-text-layer.wgsl.js

@@ -0,0 +1,247 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+/** WebGPU shaders for packed glyphs, following luma.gl's text-rendering conventions. */
+export default /* wgsl */ `
+struct FastTextUniforms {
+  fontAtlasSize: vec2<f32>,
+  fontSize: f32,
+  size: f32,
+  sizeScale: f32,
+  sizeMinPixels: f32,
+  sizeMaxPixels: f32,
+  pixelOffset: vec2<f32>,
+  billboard: f32,
+  sizeUnits: i32,
+  alphaCutoff: f32,
+  sdfEnabled: f32,
+  sdfBuffer: f32,
+  sdfGamma: f32,
+  contentCutoffPixels: vec2<f32>,
+  contentAlign: vec2<i32>,
+  flipY: f32,
+};
+
+@group(0) @binding(auto) var<uniform> fastText: FastTextUniforms;
+@group(0) @binding(auto) var fontAtlasTexture: texture_2d<f32>;
+@group(0) @binding(auto) var fontAtlasTextureSampler: sampler;
+
+struct FastTextAttributes {
+  @location(0) positions: vec2<f32>,
+  @location(1) instancePositions: vec2<f32>,
+  @location(2) instanceGlyphOffsets: vec2<i32>,
+  @location(3) instanceGlyphFrames: vec4<u32>,
+  @location(4) instanceClipRects: vec4<i32>,
+  @location(5) instanceColors: vec4<f32>,
+};
+
+struct FastTextVaryings {
+  @builtin(position) position: vec4<f32>,
+  @location(0) color: vec4<f32>,
+  @location(1) textureCoords: vec2<f32>,
+  @location(2) uv: vec2<f32>,
+};
+
+struct FastTextClipResult {
+  position: vec4<f32>,
+  pixelOffset: vec2<f32>,
+};
+
+fn fast_text_alignment_pixel_offset(
+  anchor: f32,
+  extent: f32,
+  clipStart: f32,
+  clipEnd: f32,
+  mode: i32
+) -> f32 {
+  if (clipEnd < clipStart) {
+    return 0.0;
+  }
+  if (mode == 1) {
+    return max(-(anchor + clipStart), 0.0);
+  }
+  if (mode == 2) {
+    let visibleMin = max(0.0, anchor + clipStart);
+    let visibleMax = min(extent, anchor + clipEnd);
+    return select(0.0, (visibleMin + visibleMax) * 0.5 - anchor, visibleMin < visibleMax);
+  }
+  if (mode == 3) {
+    return min(extent - (anchor + clipEnd), 0.0);
+  }
+  return 0.0;
+}
+
+fn fast_text_clip_glyph_vertex(
+  initialPixelOffset: vec2<f32>,
+  anchorPositionScreen: vec2<f32>,
+  clipRect: vec4<i32>,
+  initialPosition: vec4<f32>
+) -> FastTextClipResult {
+  var result: FastTextClipResult;
+  result.position = initialPosition;
+  result.pixelOffset = initialPixelOffset;
+
+  let clipRectFloat = vec4<f32>(clipRect);
+  var clipXY = project_size_vec2(clipRectFloat.xy) * project.scale;
+  let clipWH = project_size_vec2(clipRectFloat.zw) * project.scale;
+
+  if (fastText.flipY > 0.5) {
+    clipXY.y = -clipXY.y - clipWH.y;
+  }
+
+  if (fastText.contentAlign.x > 0 || fastText.contentAlign.y > 0) {
+    let viewportPixels = project.viewportSize / project.devicePixelRatio;
+    let scrollPixels = vec2<f32>(
+      fast_text_alignment_pixel_offset(
+        anchorPositionScreen.x,
+        viewportPixels.x,
+        clipXY.x,
+        clipXY.x + clipWH.x,
+        fastText.contentAlign.x
+      ),
+      -fast_text_alignment_pixel_offset(
+        anchorPositionScreen.y,
+        viewportPixels.y,
+        -clipXY.y - clipWH.y,
+        -clipXY.y,
+        fastText.contentAlign.y
+      )
+    );
+    result.pixelOffset += scrollPixels;
+    result.position = vec4<f32>(
+      result.position.xy + project_pixel_size_to_clipspace(scrollPixels),
+      result.position.zw
+    );
+  }
+
+  if (clipRectFloat.z >= 0.0) {
+    if (result.pixelOffset.x < clipXY.x || result.pixelOffset.x > clipXY.x + clipWH.x) {
+      result.position = vec4<f32>(0.0);
+    } else if (fastText.contentCutoffPixels.x > 0.0) {
+      let viewportWidth = project.viewportSize.x / project.devicePixelRatio;
+      let left = max(anchorPositionScreen.x + clipXY.x, 0.0);
+      let right = min(anchorPositionScreen.x + clipXY.x + clipWH.x, viewportWidth);
+      if (right - left < fastText.contentCutoffPixels.x) {
+        result.position = vec4<f32>(0.0);
+      }
+    }
+  }
+
+  if (clipRectFloat.w >= 0.0) {
+    if (result.pixelOffset.y < clipXY.y || result.pixelOffset.y > clipXY.y + clipWH.y) {
+      result.position = vec4<f32>(0.0);
+    } else if (fastText.contentCutoffPixels.y > 0.0) {
+      let viewportHeight = project.viewportSize.y / project.devicePixelRatio;
+      let top = max(anchorPositionScreen.y - clipXY.y - clipWH.y, 0.0);
+      let bottom = min(anchorPositionScreen.y - clipXY.y, viewportHeight);
+      if (bottom - top < fastText.contentCutoffPixels.y) {
+        result.position = vec4<f32>(0.0);
+      }
+    }
+  }
+
+  return result;
+}
+
+@vertex
+fn vertexMain(attributes: FastTextAttributes) -> FastTextVaryings {
+  let worldPosition = vec3<f32>(attributes.instancePositions, 0.0);
+  geometry.worldPosition = worldPosition;
+  geometry.uv = attributes.positions;
+
+  let glyphFrame = vec4<f32>(attributes.instanceGlyphFrames);
+  let glyphSize = glyphFrame.zw;
+  let sizePixels = clamp(
+    project_unit_size_to_pixel(fastText.size * fastText.sizeScale, fastText.sizeUnits),
+    fastText.sizeMinPixels,
+    fastText.sizeMaxPixels
+  );
+  let instanceScale = select(sizePixels / fastText.fontSize, 0.0, fastText.fontSize == 0.0);
+  var pixelOffset = vec2<f32>(attributes.instanceGlyphOffsets) + attributes.positions * glyphSize;
+  pixelOffset = pixelOffset * instanceScale + fastText.pixelOffset;
+  pixelOffset.y = -pixelOffset.y;
+
+  var clipPosition: vec4<f32>;
+  var anchorPositionClip: vec4<f32>;
+
+  if (fastText.billboard > 0.5) {
+    let projected = project_position_to_clipspace_and_commonspace(
+      worldPosition,
+      vec3<f32>(0.0),
+      vec3<f32>(0.0)
+    );
+    geometry.position = projected.commonPosition;
+    anchorPositionClip = projected.clipPosition;
+    clipPosition = vec4<f32>(
+      projected.clipPosition.xy + project_pixel_size_to_clipspace(pixelOffset),
+      projected.clipPosition.zw
+    );
+  } else {
+    var offsetCommon = vec3<f32>(project_pixel_size_vec2(pixelOffset), 0.0);
+    if (fastText.flipY > 0.5) {
+      offsetCommon.y = -offsetCommon.y;
+    }
+    let projected = project_position_to_clipspace_and_commonspace(
+      worldPosition,
+      vec3<f32>(0.0),
+      offsetCommon
+    );
+    geometry.position = projected.commonPosition;
+    anchorPositionClip = project_position_to_clipspace(
+      worldPosition,
+      vec3<f32>(0.0),
+      vec3<f32>(0.0)
+    );
+    clipPosition = projected.clipPosition;
+  }
+
+  let anchorPositionNdc = anchorPositionClip.xy / anchorPositionClip.w;
+  let anchorPositionScreen = vec2<f32>(
+    anchorPositionNdc.x + 1.0,
+    1.0 - anchorPositionNdc.y
+  ) * 0.5 * project.viewportSize / project.devicePixelRatio;
+  let clipped = fast_text_clip_glyph_vertex(
+    pixelOffset,
+    anchorPositionScreen,
+    attributes.instanceClipRects,
+    clipPosition
+  );
+
+  var varyings: FastTextVaryings;
+  varyings.position = clipped.position;
+  varyings.color = attributes.instanceColors;
+  varyings.textureCoords =
+    (glyphFrame.xy + attributes.positions * glyphSize) / fastText.fontAtlasSize;
+  varyings.uv = attributes.positions;
+  return varyings;
+}
+
+@fragment
+fn fragmentMain(varyings: FastTextVaryings) -> @location(0) vec4<f32> {
+  geometry.uv = varyings.uv;
+
+  var alpha = textureSample(
+    fontAtlasTexture,
+    fontAtlasTextureSampler,
+    varyings.textureCoords
+  ).a;
+
+  if (fastText.sdfEnabled > 0.5) {
+    alpha = smoothstep(
+      fastText.sdfBuffer - fastText.sdfGamma,
+      fastText.sdfBuffer + fastText.sdfGamma,
+      alpha
+    );
+  }
+
+  let outputAlpha = alpha * varyings.color.a;
+  if (outputAlpha < fastText.alphaCutoff) {
+    discard;
+  }
+
+  return deckgl_premultiplied_alpha(
+    vec4<f32>(varyings.color.rgb, outputAlpha * layer.opacity)
+  );
+}
+`;
+//# sourceMappingURL=fast-text-layer.wgsl.js.map

package/dist/layers/fast-text-layer/fast-text-layer.wgsl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fast-text-layer.wgsl.js","sourceRoot":"","sources":["../../../src/layers/fast-text-layer/fast-text-layer.wgsl.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,+BAA+B;AAC/B,oCAAoC;AAEpC,wFAAwF;AACxF,eAAe,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiPzB,CAAC"}

package/dist/layers/time-delta-layer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-delta-layer.d.ts","sourceRoot":"","sources":["../../src/layers/time-delta-layer.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,KAAK,EAAE,KAAK,UAAU,EAAC,MAAM,eAAe,CAAC;AAC7F,OAAO,EAAuB,KAAK,cAAc,EAAC,MAAM,iBAAiB,CAAC;AAM1E,sDAAsD;AACtD,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAEpE,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC,GAAG;IAC/F,mFAAmF;IACnF,IAAI,EAAE,WAAW,GAAG,cAAc,CAAC;IACnC,8EAA8E;IAC9E,SAAS,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,SAAS,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,yGAAyG;IACzG,MAAM,EAAE,OAAO,CAAC;IAEhB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,0EAA0E;AAC1E,qBAAa,cAAe,SAAQ,cAAc,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IAChF,OAAgB,SAAS,SAAoB;IAC7C,OAAgB,YAAY,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAe9D;IAEO,YAAY,IAAI,KAAK,EAAE;CA6FjC"}
+{"version":3,"file":"time-delta-layer.d.ts","sourceRoot":"","sources":["../../src/layers/time-delta-layer.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,KAAK,EAAE,KAAK,UAAU,EAAC,MAAM,eAAe,CAAC;AAC7F,OAAO,EAAuB,KAAK,cAAc,EAAC,MAAM,iBAAiB,CAAC;AAO1E,sDAAsD;AACtD,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAEpE,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC,GAAG;IAC/F,mFAAmF;IACnF,IAAI,EAAE,WAAW,GAAG,cAAc,CAAC;IACnC,8EAA8E;IAC9E,SAAS,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,SAAS,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,yGAAyG;IACzG,MAAM,EAAE,OAAO,CAAC;IAEhB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,0EAA0E;AAC1E,qBAAa,cAAe,SAAQ,cAAc,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IAChF,OAAgB,SAAS,SAAoB;IAC7C,OAAgB,YAAY,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAe9D;IAEO,YAAY,IAAI,KAAK,EAAE;CA6GjC"}

package/dist/layers/time-delta-layer.js

@@ -5,6 +5,7 @@ import { CompositeLayer } from '@deck.gl/core';
 import { LineLayer, TextLayer } from '@deck.gl/layers';
 // import {PathStyleExtension} from '@deck.gl/extensions';
 import { formatTimeMs } from "../utils/format-utils.js";
+import { FastTextLayer } from "./fast-text-layer/fast-text-layer.js";
 /** Renders a selected time interval as header or viewport guide lines. */
 export class TimeDeltaLayer extends CompositeLayer {
     static layerName = 'TimeDeltaLayer';
@@ -54,6 +55,7 @@ export class TimeDeltaLayer extends CompositeLayer {
         const timeDeltaPosition = [(startTimeMs + endTimeMs) / 2, y - 10];
         const timeDeltaMs = Math.abs(endTimeMs - startTimeMs);
         const timeDeltaLabel = formatTimeMs(timeDeltaMs, { space: false });
+        const labelData = [{ position: timeDeltaPosition, text: timeDeltaLabel }];
         const timeLines = [
             {
                 sourcePosition: [startTimeMs, y],
@@ -91,23 +93,38 @@ export class TimeDeltaLayer extends CompositeLayer {
                 widthUnits: 'pixels'
             }),
             // Label
-            new TextLayer({
-                id: 'header-time-delta-label',
-                data: [{ position: timeDeltaPosition, text: timeDeltaLabel }],
-                getPosition: d => d.position,
-                getText: d => d.text,
-                characterSet: '-0123456789.dhmsµ',
-                getSize: fontSize,
-                fontFamily,
-                fontSettings,
-                fontWeight,
-                getColor: color,
-                getTextAnchor: 'middle',
-                getAlignmentBaseline: 'center',
-                background: true,
-                getBackgroundColor: [255 - color[0], 255 - color[1], 255 - color[2], 255],
-                backgroundPadding: [4, 2] // Horizontal and vertical padding
-            })
+            this.context?.device?.type === 'webgpu'
+                ? new FastTextLayer({
+                    id: 'header-time-delta-label',
+                    data: labelData,
+                    getPosition: d => d.position,
+                    getText: d => d.text,
+                    characterSet: '-0123456789.dhmsµ',
+                    size: fontSize,
+                    fontFamily,
+                    fontSettings,
+                    fontWeight,
+                    getColor: color,
+                    textAnchor: 'middle',
+                    alignmentBaseline: 'center'
+                })
+                : new TextLayer({
+                    id: 'header-time-delta-label',
+                    data: labelData,
+                    getPosition: d => d.position,
+                    getText: d => d.text,
+                    characterSet: '-0123456789.dhmsµ',
+                    getSize: fontSize,
+                    fontFamily,
+                    fontSettings,
+                    fontWeight,
+                    getColor: color,
+                    getTextAnchor: 'middle',
+                    getAlignmentBaseline: 'center',
+                    background: true,
+                    getBackgroundColor: [255 - color[0], 255 - color[1], 255 - color[2], 255],
+                    backgroundPadding: [4, 2]
+                })
         ];
     }
 }

package/dist/layers/time-delta-layer.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-delta-layer.js","sourceRoot":"","sources":["../../src/layers/time-delta-layer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"time-delta-layer.js","sourceRoot":"","sources":["../../src/layers/time-delta-layer.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deck.gl-community/infovis-layers",
-  "version": "9.3.8",
+  "version": "9.4.0-alpha.1",
   "description": "Infovis layers (non-geospatial) for deck.gl",
   "license": "MIT",
   "publishConfig": {
@@ -33,14 +33,14 @@
     "test-watch": "vitest"
   },
   "dependencies": {
-    "@luma.gl/shadertools": "~9.3.2",
+    "@luma.gl/shadertools": "~9.4.0-alpha.1",
     "@probe.gl/log": "^4.1.1"
   },
   "peerDependencies": {
-    "@deck.gl/core": "~9.3.0",
-    "@deck.gl/layers": "~9.3.0",
-    "@luma.gl/core": "~9.3.2",
-    "@luma.gl/engine": "~9.3.2",
+    "@deck.gl/core": "~9.4.0-alpha.2",
+    "@deck.gl/layers": "~9.4.0-alpha.2",
+    "@luma.gl/core": "~9.4.0-alpha.1",
+    "@luma.gl/engine": "~9.4.0-alpha.1",
     "apache-arrow": ">=17"
   },
   "peerDependenciesMeta": {
@@ -49,12 +49,12 @@
     }
   },
   "devDependencies": {
-    "@deck.gl/core": "~9.3.0",
-    "@deck.gl/test-utils": "~9.3.0",
-    "@luma.gl/core": "~9.3.2",
-    "@luma.gl/engine": "~9.3.2",
-    "@luma.gl/webgpu": "~9.3.2",
+    "@deck.gl/core": "~9.4.0-alpha.2",
+    "@deck.gl/test-utils": "~9.4.0-alpha.2",
+    "@luma.gl/core": "~9.4.0-alpha.1",
+    "@luma.gl/engine": "~9.4.0-alpha.1",
+    "@luma.gl/webgpu": "~9.4.0-alpha.1",
     "@probe.gl/test-utils": "^4.1.1"
   },
-  "gitHead": "60f91af126238d1e375dcc18f196d35a1fc5616f"
+  "gitHead": "410922945889b5202c7fd72e19c2aafaf10fea1b"
 }

package/src/layers/block-layer/block-layer-uniforms.ts

@@ -5,13 +5,13 @@
 import type {ShaderModule} from '@luma.gl/shadertools';
 
 const glslUniformBlock = `\
-uniform blockUniforms {
+uniform blockLayerUniforms {
   highp int sizeUnits;
   highp float widthMinPixels;
   highp float heightMinPixels;
   highp float sizeMaxPixels;
   highp int lineWidthUnits;
-} block;
+} blockLayer;
 `;
 
 /** Shader uniform values used by {@link BlockLayer}. */
@@ -30,7 +30,8 @@ export type BlockProps = {
 
 /** Shader module that defines uniforms consumed by {@link BlockLayer}. */
 export const blockUniforms = {
-  name: 'block',
+  name: 'blockLayer',
+  source: '',
   vs: glslUniformBlock,
   fs: glslUniformBlock,
   uniformTypes: {

package/src/layers/block-layer/block-layer-vertex.glsl.ts

@@ -43,12 +43,12 @@ void main(void) {
   geometry.pickingColor = instancePickingColors;
   geometry.uv = positions.xy;
 
-  vec2 pixelSize = project_size_to_pixel(instanceSizes, block.sizeUnits);
-  pixelSize.x = clamp_signed_size(pixelSize.x, block.widthMinPixels, block.sizeMaxPixels);
-  pixelSize.y = clamp_signed_size(pixelSize.y, block.heightMinPixels, block.sizeMaxPixels);
+  vec2 pixelSize = project_size_to_pixel(instanceSizes, blockLayer.sizeUnits);
+  pixelSize.x = clamp_signed_size(pixelSize.x, blockLayer.widthMinPixels, blockLayer.sizeMaxPixels);
+  pixelSize.y = clamp_signed_size(pixelSize.y, blockLayer.heightMinPixels, blockLayer.sizeMaxPixels);
   unitPosition = positions.xy;
   size = pixelSize;
-  lineWidth = project_size_to_pixel(vec2(instanceLineWidths, 0.0), block.lineWidthUnits).x;
+  lineWidth = project_size_to_pixel(vec2(instanceLineWidths, 0.0), blockLayer.lineWidthUnits).x;
 
   // Find the center of the point and add the current vertex
   vec3 offset = vec3(unitPosition * project_pixel_size(pixelSize), 0.0);

package/src/layers/block-layer/block-layer.ts

@@ -23,6 +23,7 @@ import {Geometry, Model} from '@luma.gl/engine';
 import fs from './block-layer-fragment.glsl';
 import {BlockProps, blockUniforms} from './block-layer-uniforms';
 import vs from './block-layer-vertex.glsl';
+import source from './block-layer.wgsl';
 
 const DEFAULT_COLOR: [number, number, number, number] = [0, 0, 0, 255];
 
@@ -114,12 +115,18 @@ export class BlockLayer<DataT = any, ExtraPropsT extends {} = {}> extends Layer<
 
   override getShaders() {
     return super.getShaders({
+      source,
       vs,
       fs,
       modules: [project32, color, picking, blockUniforms]
     });
   }
 
+  /** WebGPU consumes float32 positions directly, including external binary attributes. */
+  override use64bitPositions(): boolean {
+    return this.context?.device?.type !== 'webgpu' && super.use64bitPositions();
+  }
+
   initializeState() {
     this.getAttributeManager()!.addInstanced({
       instancePositions: {
@@ -176,17 +183,32 @@ export class BlockLayer<DataT = any, ExtraPropsT extends {} = {}> extends Layer<
       sizeMaxPixels,
       lineWidthUnits: UNIT[lineWidthUnits]
     };
-    model.shaderInputs.setProps({block: blockProps});
+    model.shaderInputs.setProps({blockLayer: blockProps});
     model.draw(this.context.renderPass);
   }
 
   protected _getModel(): Model {
     // a square
     const positions = [0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0];
+    const bufferLayout = this.getAttributeManager()!.getBufferLayouts();
+    const webgpuAttributes = new Set([
+      'instancePositions',
+      'instanceSizes',
+      'instanceLineWidths',
+      'instanceLineColors',
+      'instanceFillColors',
+      'instancePickingColors'
+    ]);
+    const webgpuBufferLayout = bufferLayout
+      .map(layout => ({
+        ...layout,
+        attributes: layout.attributes?.filter(({attribute}) => webgpuAttributes.has(attribute))
+      }))
+      .filter(layout => !layout.attributes || layout.attributes.length > 0);
     return new Model(this.context.device, {
       ...this.getShaders(),
       id: this.props.id,
-      bufferLayout: this.getAttributeManager()!.getBufferLayouts(),
+      bufferLayout: this.context.device.type === 'webgpu' ? webgpuBufferLayout : bufferLayout,
       geometry: new Geometry({
         topology: 'triangle-strip',
         attributes: {

package/src/layers/block-layer/block-layer.wgsl.ts

@@ -0,0 +1,134 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+/** WebGPU vertex and fragment shaders for {@link BlockLayer}. */
+export default /* wgsl */ `
+struct BlockUniforms {
+  sizeUnits: i32,
+  widthMinPixels: f32,
+  heightMinPixels: f32,
+  sizeMaxPixels: f32,
+  lineWidthUnits: i32,
+};
+
+@group(0) @binding(auto) var<uniform> blockLayer: BlockUniforms;
+
+struct BlockAttributes {
+  @location(0) positions: vec3<f32>,
+  @location(1) instancePositions: vec3<f32>,
+  @location(2) instanceSizes: vec2<f32>,
+  @location(3) instanceLineWidths: f32,
+  @location(4) instanceLineColors: vec4<f32>,
+  @location(5) instanceFillColors: vec4<f32>,
+  @location(6) instancePickingColors: vec3<f32>,
+};
+
+struct BlockVaryings {
+  @builtin(position) position: vec4<f32>,
+  @location(0) unitPosition: vec2<f32>,
+  @location(1) @interpolate(flat) fillColor: vec4<f32>,
+  @location(2) @interpolate(flat) lineColor: vec4<f32>,
+  @location(3) @interpolate(flat) lineWidth: f32,
+  @location(4) @interpolate(flat) size: vec2<f32>,
+  @location(5) @interpolate(flat) pickingColor: vec3<f32>,
+};
+
+fn block_size_to_pixels(size: vec2<f32>, unit: i32) -> vec2<f32> {
+  return vec2<f32>(
+    project_unit_size_to_pixel(size.x, unit),
+    project_unit_size_to_pixel(size.y, unit)
+  );
+}
+
+fn block_clamp_signed_size(size: f32, minimum: f32, maximum: f32) -> f32 {
+  return select(1.0, -1.0, size < 0.0) * clamp(abs(size), minimum, maximum);
+}
+
+@vertex
+fn vertexMain(attributes: BlockAttributes) -> BlockVaryings {
+  geometry.worldPosition = attributes.instancePositions;
+  geometry.pickingColor = attributes.instancePickingColors;
+  geometry.uv = attributes.positions.xy;
+
+  var pixelSize = block_size_to_pixels(attributes.instanceSizes, blockLayer.sizeUnits);
+  pixelSize.x = block_clamp_signed_size(
+    pixelSize.x,
+    blockLayer.widthMinPixels,
+    blockLayer.sizeMaxPixels
+  );
+  pixelSize.y = block_clamp_signed_size(
+    pixelSize.y,
+    blockLayer.heightMinPixels,
+    blockLayer.sizeMaxPixels
+  );
+
+  let offset = vec3<f32>(
+    attributes.positions.xy * project_pixel_size_vec2(pixelSize),
+    0.0
+  );
+  let projected = project_position_to_clipspace_and_commonspace(
+    attributes.instancePositions,
+    vec3<f32>(0.0),
+    offset
+  );
+  geometry.position = projected.commonPosition;
+
+  var varyings: BlockVaryings;
+  varyings.position = projected.clipPosition;
+  varyings.unitPosition = attributes.positions.xy;
+  varyings.fillColor = vec4<f32>(
+    attributes.instanceFillColors.rgb,
+    attributes.instanceFillColors.a * layer.opacity
+  );
+  varyings.lineColor = vec4<f32>(
+    attributes.instanceLineColors.rgb,
+    attributes.instanceLineColors.a * layer.opacity
+  );
+  varyings.lineWidth = project_unit_size_to_pixel(
+    attributes.instanceLineWidths,
+    blockLayer.lineWidthUnits
+  );
+  varyings.size = pixelSize;
+  varyings.pickingColor = attributes.instancePickingColors;
+  return varyings;
+}
+
+@fragment
+fn fragmentMain(varyings: BlockVaryings) -> @location(0) vec4<f32> {
+  let relativePosition = varyings.unitPosition * varyings.size;
+  let distanceToBorder = min(
+    min(relativePosition.x, relativePosition.y),
+    min(varyings.size.x - relativePosition.x, varyings.size.y - relativePosition.y)
+  );
+  var fragColor = select(
+    varyings.fillColor,
+    varyings.lineColor,
+    varyings.lineWidth > 0.0 && distanceToBorder <= varyings.lineWidth
+  );
+
+  if (picking.isActive > 0.5) {
+    if (!picking_isColorValid(varyings.pickingColor)) {
+      discard;
+    }
+    return vec4<f32>(picking_normalizeColor(varyings.pickingColor), 1.0);
+  }
+
+  if (picking.isHighlightActive > 0.5) {
+    let highlightedColor = picking_normalizeColor(picking.highlightedObjectColor);
+    let objectColor = picking_normalizeColor(varyings.pickingColor);
+    if (picking_isColorZero(abs(objectColor - highlightedColor))) {
+      let highlightAlpha = picking.highlightColor.a;
+      let blendedAlpha = highlightAlpha + fragColor.a * (1.0 - highlightAlpha);
+      if (blendedAlpha > 0.0) {
+        fragColor = vec4<f32>(
+          mix(fragColor.rgb, picking.highlightColor.rgb, highlightAlpha / blendedAlpha),
+          blendedAlpha
+        );
+      }
+    }
+  }
+
+  return deckgl_premultiplied_alpha(fragColor);
+}
+`;

package/src/layers/fast-text-layer/fast-text-layer.ts

@@ -14,6 +14,7 @@ import {
   updateFastTextDynamicGlyphAttributes
 } from './fast-text-layout';
 import {DEFAULT_FAST_TEXT_FONT_SETTINGS, FastTextFontAtlasManager} from './font-atlas';
+import FAST_TEXT_WGSL from './fast-text-layer.wgsl';
 
 import type {
   FastTextAlignmentBaseline,
@@ -158,6 +159,7 @@ export class FastTextLayer<DataT = any, ExtraPropsT extends {} = {}> extends Lay
   /** Return the shader set used by the direct glyph instance model. */
   override getShaders() {
     return super.getShaders({
+      source: FAST_TEXT_WGSL,
       vs: FAST_TEXT_VS,
       fs: FAST_TEXT_FS,
       modules: [project32, color, fastTextUniforms]
@@ -535,8 +537,10 @@ const fastTextLog = new Log({id: 'trace-layers'});
 const FAST_TEXT_PROBE_LABEL_STYLE =
   'background:#f59e0b;color:#111827;font-weight:700;padding:2px 8px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;';
 
-const fastTextUniforms = {
+/** Shader module shared by the GLSL and WGSL packed-glyph renderers. */
+export const fastTextUniforms = {
   name: 'fastText',
+  source: '',
   vs: `\
 layout(std140) uniform fastTextUniforms {
   vec2 fontAtlasSize;