feat(layers): extend WebGPU layer support

docs/api-reference/mesh-layers/scenegraph-layer.md

@@ -1,4 +1,5 @@
 # ScenegraphLayer
+![webgpu](https://img.shields.io/badge/webgpu-supported-blue.svg?style=flat-square)
 
 import {ScenegraphLayerDemo} from '@site/src/doc-demos/mesh-layers';
 

docs/developer-guide/webgpu.md

@@ -44,17 +44,17 @@ The table below covers the public layer exports from the layer packages. It is d
 | `@deck.gl/layers` | `ColumnLayer` | ✅ | ✅ |
 | `@deck.gl/layers` | `GridCellLayer` | ✅ | ✅ |
 | `@deck.gl/layers` | `PathLayer` | ✅ | ✅ |
-| `@deck.gl/layers` | `PolygonLayer` | ✅ | ❌ |
-| `@deck.gl/layers` | `GeoJsonLayer` | ✅ | ❌ |
-| `@deck.gl/layers` | `TextLayer` | ✅ | ❌ |
-| `@deck.gl/layers` | `SolidPolygonLayer` | ✅ | ❌ |
+| `@deck.gl/layers` | `PolygonLayer` | ✅ | ✅ |
+| `@deck.gl/layers` | `GeoJsonLayer` | ✅ | ✅ |
+| `@deck.gl/layers` | `TextLayer` | ✅ | ✅ |
+| `@deck.gl/layers` | `SolidPolygonLayer` | ✅ | ✅ |
 | `@deck.gl/aggregation-layers` | `ScreenGridLayer` | ✅ | ✅ |
-| `@deck.gl/aggregation-layers` | `HexagonLayer` | ✅ | ❌ |
+| `@deck.gl/aggregation-layers` | `HexagonLayer` | ✅ | ✅ |
 | `@deck.gl/aggregation-layers` | `ContourLayer` | ✅ | ❌ |
 | `@deck.gl/aggregation-layers` | `GridLayer` | ✅ | ❌ |
 | `@deck.gl/aggregation-layers` | `HeatmapLayer` | ✅ | ❌ |
 | `@deck.gl/mesh-layers` | `SimpleMeshLayer` | ✅ | ❌ |
-| `@deck.gl/mesh-layers` | `ScenegraphLayer` | ✅ | ❌ |
+| `@deck.gl/mesh-layers` | `ScenegraphLayer` | ✅ | ✅ |
 | `@deck.gl/geo-layers` | `A5Layer` | ✅ | ❌ |
 | `@deck.gl/geo-layers` | `GreatCircleLayer` | ✅ | ❌ |
 | `@deck.gl/geo-layers` | `S2Layer` | ✅ | ❌ |
@@ -75,6 +75,8 @@ The table below covers the public layer exports from the layer packages. It is d
 | `@deck.gl/carto` | `RasterTileLayer` | ✅ | ❌ |
 | `@deck.gl/carto` | `VectorTileLayer` | ✅ | ❌ |
 
+On WebGPU, the supported aggregation layers currently use their CPU aggregation fallback before rendering their WGSL-backed sublayers. Their WebGL GPU aggregation paths are unchanged.
+
 ## Extensions
 
 The table below covers the public extensions in `@deck.gl/extensions`. They all remain WebGL-only today because they rely on GLSL shader injections, GLSL-only shader modules, or extra render/picking passes that have not been ported to WebGPU.

examples/website/text/app.tsx

@@ -100,7 +100,8 @@ export default function App({
       sizeMaxPixels: sizeMaxPixels * 2,
       sizeMinPixels: sizeMinPixels * 2
     },
-    extensions: [new CollisionFilterExtension()]
+    // CollisionFilterExtension has not been ported to WebGPU yet.
+    extensions: device?.type === 'webgpu' ? [] : [new CollisionFilterExtension()]
   });
 
   return (

modules/layers/src/path-layer/path-layer-uniforms.ts

@@ -4,7 +4,23 @@
 
 import type {ShaderModule} from '@luma.gl/shadertools';
 
-const uniformBlock = `\
+const uniformBlockWGSL = /* wgsl */ `\
+struct PathUniforms {
+  widthScale: f32,
+  widthMinPixels: f32,
+  widthMaxPixels: f32,
+  jointType: f32,
+  capType: f32,
+  miterLimit: f32,
+  billboard: f32,
+  widthUnits: i32,
+};
+
+@group(0) @binding(auto)
+var<uniform> path: PathUniforms;
+`;
+
+const uniformBlockGLSL = `\
 layout(std140) uniform pathUniforms {
   float widthScale;
   float widthMinPixels;
@@ -30,8 +46,9 @@ export type PathProps = {
 
 export const pathUniforms = {
   name: 'path',
-  vs: uniformBlock,
-  fs: uniformBlock,
+  source: uniformBlockWGSL,
+  vs: uniformBlockGLSL,
+  fs: uniformBlockGLSL,
   uniformTypes: {
     widthScale: 'f32',
     widthMinPixels: 'f32',

modules/layers/src/path-layer/path-layer.ts

@@ -2,12 +2,13 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Layer, project32, picking, UNIT} from '@deck.gl/core';
+import {Layer, project32, color, picking, UNIT} from '@deck.gl/core';
 import {Geometry} from '@luma.gl/engine';
 import {Model} from '@luma.gl/engine';
 import PathTesselator from './path-tesselator';
 
 import {pathUniforms, PathProps} from './path-layer-uniforms';
+import source from './path-layer.wgsl';
 import vs from './path-layer-vertex.glsl';
 import fs from './path-layer-fragment.glsl';
 
@@ -135,80 +136,120 @@ export default class PathLayer<DataT = any, ExtraPropsT extends {} = {}> extends
   };
 
   getShaders() {
-    return super.getShaders({vs, fs, modules: [project32, picking, pathUniforms]}); // 'project' module added by default.
+    return super.getShaders({
+      vs,
+      fs,
+      source,
+      modules: [project32, color, picking, pathUniforms]
+    }); // 'project' module added by default.
   }
 
   get wrapLongitude(): boolean {
     return false;
   }
 
   getBounds(): [number[], number[]] | null {
+    if (this.context.device.type === 'webgpu') {
+      return null;
+    }
     return this.getAttributeManager()?.getBounds(['vertexPositions']);
   }
 
   initializeState() {
     const noAlloc = true;
+    const isWebGPU = this.context.device.type === 'webgpu';
     const attributeManager = this.getAttributeManager();
     /* eslint-disable max-len */
     attributeManager!.addInstanced({
-      vertexPositions: {
-        size: 3,
-        // Start filling buffer from 1 vertex in
-        vertexOffset: 1,
-        type: 'float64',
-        fp64: this.use64bitPositions(),
-        transition: ATTRIBUTE_TRANSITION,
-        accessor: 'getPath',
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        update: this.calculatePositions,
-        noAlloc,
-        shaderAttributes: {
-          instanceLeftPositions: {
-            vertexOffset: 0
-          },
-          instanceStartPositions: {
-            vertexOffset: 1
-          },
-          instanceEndPositions: {
-            vertexOffset: 2
-          },
-          instanceRightPositions: {
-            vertexOffset: 3
+      ...(isWebGPU
+        ? {
+            // WebGPU cannot express WebGL's vertexOffset window in one vertex buffer layout.
+            // Pack each segment's [left, start, end, right] high and low position parts instead.
+            instancePositions: {
+              size: 24,
+              type: 'float32',
+              transition: false,
+              accessor: 'getPath',
+              // eslint-disable-next-line @typescript-eslint/unbound-method
+              update: this.calculateWebGPUPositions,
+              shaderAttributes: {
+                instanceLeftPositions: {size: 3, elementOffset: 0},
+                instanceStartPositions: {size: 3, elementOffset: 3},
+                instanceEndPositions: {size: 3, elementOffset: 6},
+                instanceRightPositions: {size: 3, elementOffset: 9},
+                instanceLeftPositions64Low: {size: 3, elementOffset: 12},
+                instanceStartPositions64Low: {size: 3, elementOffset: 15},
+                instanceEndPositions64Low: {size: 3, elementOffset: 18},
+                instanceRightPositions64Low: {size: 3, elementOffset: 21}
+              },
+              noAlloc
+            }
           }
-        }
-      },
+        : {
+            vertexPositions: {
+              size: 3,
+              // Start filling buffer from 1 vertex in
+              vertexOffset: 1,
+              type: 'float64',
+              fp64: this.use64bitPositions(),
+              transition: ATTRIBUTE_TRANSITION,
+              accessor: 'getPath',
+              // eslint-disable-next-line @typescript-eslint/unbound-method
+              update: this.calculatePositions,
+              noAlloc,
+              shaderAttributes: {
+                instanceLeftPositions: {
+                  vertexOffset: 0
+                },
+                instanceStartPositions: {
+                  vertexOffset: 1
+                },
+                instanceEndPositions: {
+                  vertexOffset: 2
+                },
+                instanceRightPositions: {
+                  vertexOffset: 3
+                }
+              }
+            }
+          }),
       instanceTypes: {
         size: 1,
-        type: 'uint8',
+        type: isWebGPU ? 'float32' : 'uint8',
         // eslint-disable-next-line @typescript-eslint/unbound-method
         update: this.calculateSegmentTypes,
         noAlloc
       },
       instanceStrokeWidths: {
         size: 1,
         accessor: 'getWidth',
-        transition: ATTRIBUTE_TRANSITION,
-        defaultValue: 1
+        transition: isWebGPU ? false : ATTRIBUTE_TRANSITION,
+        defaultValue: 1,
+        bufferGroup: 'path-instance-data'
       },
       instanceColors: {
         size: this.props.colorFormat.length,
         type: 'unorm8',
         accessor: 'getColor',
-        transition: ATTRIBUTE_TRANSITION,
-        defaultValue: DEFAULT_COLOR
+        transition: isWebGPU ? false : ATTRIBUTE_TRANSITION,
+        defaultValue: DEFAULT_COLOR,
+        bufferGroup: 'path-instance-data'
       },
       /** Source path row for each generated segment/joint instance. */
       rowIndexes: {
         size: 1,
         type: 'uint32',
-        accessor: (object, {index}) => (object && object.__source ? object.__source.index : index)
+        accessor: (object, {index}) => (object && object.__source ? object.__source.index : index),
+        // AttributeManager only materializes buffer groups on WebGPU, so WebGL keeps its layout.
+        bufferGroup: 'path-instance-data'
       }
     });
     /* eslint-enable max-len */
 
     this.setState({
       pathTesselator: new PathTesselator({
-        fp64: this.use64bitPositions()
+        fp64: this.use64bitPositions(),
+        isWebGPU
       })
     });
   }
@@ -389,4 +430,38 @@ export default class PathLayer<DataT = any, ExtraPropsT extends {} = {}> extends
     attribute.startIndices = pathTesselator.vertexStarts;
     attribute.value = pathTesselator.get('segmentTypes');
   }
+
+  protected calculateWebGPUPositions(attribute) {
+    const {pathTesselator} = this.state;
+    const value = pathTesselator.get('positions');
+
+    if (!value) {
+      attribute.value = null;
+      return;
+    }
+
+    const numInstances = pathTesselator.instanceCount;
+    const result = new Float32Array(numInstances * 24);
+    // WebGL reads a padded neighbor window using `vertexOffset: 1`; this materializes
+    // the same [-1, 0, 1, 2] access pattern explicitly for the WebGPU layout.
+    const neighborOffsets = [-1, 0, 1, 2];
+
+    for (let i = 0; i < numInstances; i++) {
+      const targetIndex = i * 24;
+      for (let vertexOffset = 0; vertexOffset < 4; vertexOffset++) {
+        const sourceVertex = i + neighborOffsets[vertexOffset];
+        const targetOffset = targetIndex + vertexOffset * 3;
+        for (let j = 0; j < 3; j++) {
+          const position =
+            sourceVertex >= 0 && sourceVertex < numInstances ? value[sourceVertex * 3 + j] : 0;
+          const highPart = Math.fround(position);
+          result[targetOffset + j] = highPart;
+          result[targetOffset + j + 12] = position - highPart;
+        }
+      }
+    }
+
+    attribute.startIndices = pathTesselator.vertexStarts;
+    attribute.value = result;
+  }
 }