Expand WebGPU layer coverage and documentation

docs/modules/geo-layers/developer-guide/wind-showcase.md

@@ -196,7 +196,7 @@ buffers on every slider event.
 | `WindLayer` | Supported | Supported | Native GLSL/WGSL filled arrows and portable line shafts. |
 | `ElevationLayer` | Supported | Blocked | Image-derived mountain terrain depends on upstream `TerrainLayer`. |
 | `DelaunayCoverLayer` | Supported | Supported | Native GLSL/WGSL station-triangulated surface. |
-| Complete original showcase | Supported | In progress | WebGPU uses station terrain while image-derived mountains remain blocked. |
+| Complete original showcase | Supported | In progress | WebGPU renders state boundaries and uses station terrain while image-derived mountains remain blocked. |
 
 See the full [WebGPU compatibility matrix](/docs/webgpu).
 

docs/webgpu.md

@@ -27,7 +27,7 @@ deck.gl-community is adding WebGPU support incrementally while continuing to sup
 | `@deck.gl-community/trace-layers` | `TraceGraphLayer` and `TracePreparedStateLayer` | ✅ | ✅ | Browser-verified span blocks, backgrounds, outlines, row separators, fast labels, and straight dependency markers. |
 | `@deck.gl-community/trace-layers` | `TraceProcessLayer` | ✅ | ✅ | Automatically selects WebGPU-compatible binary blocks, fast span and overflow labels, and straight dependency rendering. |
 | `@deck.gl-community/trace-layers` | Counter sparklines | ✅ | ✅ | Preserves every sparkline vertex as a dual-backend `LineLayer` segment. |
-| `@deck.gl-community/trace-layers` | Curved dependencies and dashed separators | ✅ | 🚧 | Curves depend on upstream `ArcLayer`; portable separators use solid horizontal lines. |
+| `@deck.gl-community/trace-layers` | Curved dependencies and row separators | ✅ | ✅ | Browser-verified upstream `ArcLayer` curves and portable solid `LineLayer` separators. |
 | `@deck.gl-community/trace-layers` | `DeckTraceGraph` and Tracevis overview | ✅ | 🚧 | Managed devices and backend-neutral timing are available; complete legend, minimap, picking, and application validation remains in progress. |
 | `@deck.gl-community/graph-layers` | `GraphLayer`, `EdgeLayer`, and node layers | ✅ | 🚧 | Static path edges, arrow decorators, and rounded nodes are portable; complete graph styling, images, labels, layouts, and picking still require end-to-end validation. |
 | `@deck.gl-community/graph-layers` | `RoundedRectangleLayer` | ✅ | ✅ | Rounded corners are CPU-tessellated and rendered with upstream dual-backend `PolygonLayer`. |
@@ -38,14 +38,15 @@ deck.gl-community is adding WebGPU support incrementally while continuing to sup
 | `@deck.gl-community/geo-layers` | `WindLayer` | ✅ | ✅ | Native WGSL/GLSL filled-arrow triangles and portable line shafts and arrowheads. |
 | `@deck.gl-community/geo-layers` | `ElevationLayer` | ✅ | ❌ | Image-derived mountain terrain depends on upstream `TerrainLayer`; skipped safely on WebGPU. |
 | `@deck.gl-community/geo-layers` | `DelaunayCoverLayer` | ✅ | ✅ | Native WGSL/GLSL station triangles, elevation scaling, and height-based coloring. |
-| `@deck.gl-community/geo-layers` | Complete Wind Map showcase | ✅ | 🚧 | GPU particles, arrows, labels, and station terrain are portable; image terrain and map boundaries remain upstream-dependent. |
-| `@deck.gl-community/geo-layers` | Tile and global-grid layers | ✅ | 🚧 | Validate upstream sublayers, tile formats, and picking. |
-| `@deck.gl-community/arrow-layers` | `GeoArrowPathLayer` and `GeoArrowSolidPolygonLayer` | ✅ | ✅ | Browser-verified zero-copy binary path and polygon attributes. |
-| `@deck.gl-community/arrow-layers` | Remaining GeoArrow layers | ✅ | 🚧 | Validate each upstream renderer; `GeoArrowTripsLayer` still has custom shader work. |
+| `@deck.gl-community/geo-layers` | Complete Wind Map showcase | ✅ | 🚧 | GPU particles, arrows, labels, state boundaries, and station terrain are portable; image terrain remains upstream-dependent. |
+| `@deck.gl-community/geo-layers` | `GlobalGridLayer` and `TileGridLayer` borders | ✅ | ✅ | Browser-verified upstream polygon and path renderers using local grid and tile data. |
+| `@deck.gl-community/geo-layers` | `SharedTile2DLayer` and `TileSourceLayer` | ✅ | 🚧 | Validate tile formats, texture upload, labels, and picking. |
+| `@deck.gl-community/arrow-layers` | Column, heatmap, path, point-cloud, polygon, scatterplot, and solid-polygon layers | ✅ | ✅ | Browser-verified Arrow binary attributes through the corresponding upstream renderers. |
+| `@deck.gl-community/arrow-layers` | Arc, H3, text, and trips layers | ✅ | 🚧 | Arc binary attributes exceed the baseline eight-vertex-buffer limit; the others require upstream renderer validation or remaining custom shader work. |
 | `@deck.gl-community/editable-layers` | GeoJSON paths, polygons, and edit handles | ✅ | ✅ | Browser-verified `EditableGeoJsonLayer` rendering in `ModifyMode`, including the WebGPU picking-width shader path. |
 | `@deck.gl-community/editable-layers` | Editing and selection interactions | ✅ | 🚧 | Pointer, drag, snapping, and selection behavior still require browser interaction coverage on WebGPU. |
 | `@deck.gl-community/basemap-layers` | `BasemapLayer` | ✅ | 🚧 | Support depends on the selected style's polygon, path, and label sublayers. |
-| `@deck.gl-community/three` | `TreeLayer` | ✅ | ❌ | Depends on the external Three.js renderer and canvas integration. |
+| `@deck.gl-community/three` | `TreeLayer` | ✅ | 🚧 | Three.js builds the geometry, but deck.gl renders it through upstream `SimpleMeshLayer`, whose WebGPU port is still pending. |
 | `@deck.gl-community/leaflet` | Leaflet map overlay | ✅ | ❌ | A host-owned WebGL context cannot be switched to WebGPU. |
 | `@deck.gl-community/bing-maps` | Bing Maps overlay | ✅ | ❌ | A host-owned WebGL context cannot be switched to WebGPU. |
 | `@deck.gl-community/widgets` | `DeviceManagerController` and `DeviceTabsWidget` | ✅ | ✅ | Selects and attaches an independently managed real rendering device. |
@@ -124,14 +125,14 @@ routes now render through the selected backend.
 | Existing reference | `SkyboxLayer` | Provides native WGSL and GLSL sources, portable cubemap bindings, and a switchable skybox example. |
 | First wave | `BlockLayer`, `DependencyArrowLayer` marker geometry, `HorizonGraphLayer`, and `MultiHorizonGraphLayer` | Native WGSL and existing GLSL are maintained together. Stacked horizon dividers use the upstream dual-backend `LineLayer`; the website injects real WebGPU/WebGL2 device selection into the skybox, path, block, and horizon examples. |
 | Wind showcase | `ParticleLayer`, wind-field utilities, `WindLayer`, and `DelaunayCoverLayer` | WebGL2 transform-feedback, WebGPU compute, native arrow triangles, and station-surface rendering are browser-verified. Image-based mountain terrain still depends on upstream `TerrainLayer`. |
-| Path and polygon unblock | `PathOutlineLayer`, `PathMarkerLayer`, `DependencyArrowLayer`, `TimelineLayer` geometry, GeoArrow paths and polygons, editable GeoJSON, and static graph geometry | deck.gl 9.4 alpha.2 supplies dual-backend path and polygon shaders. Community layers use them directly, with a local WGSL dash plugin until `PathStyleExtension` gains native WGSL. |
-| Second wave | `FastTextLayer` | Add a small WGSL compatibility shader to the existing glyph layer, following luma.gl `master`'s `TextRenderer` and Arrow text patterns while retaining the published luma.gl 9.3 dependency line. |
-| Trace rendering | `TraceGraphLayer`, `TracePreparedStateLayer`, `TraceProcessLayer`, and counter sparklines | Reuse shared dual-backend blocks, fast text, and lines; preserve external float32 trace attributes; automatically select portable text and straight dependency routes on WebGPU. |
-| Upstream v10 | `TextRenderer` and Arrow text | Replace the compatibility path with luma.gl's optimized text and Arrow renderers after their currently private v10 modules are published. |
+| Path and polygon unblock | `PathOutlineLayer`, `PathMarkerLayer`, `DependencyArrowLayer`, `TimelineLayer` geometry, GeoArrow renderers, editable GeoJSON, global-grid and tile-border layers, and static graph geometry | deck.gl 9.4 alpha.2 supplies dual-backend path and polygon shaders. Community layers use them directly, with a local WGSL dash plugin until `PathStyleExtension` gains native WGSL. |
+| Fast text | `FastTextLayer` | The existing bitmap/SDF glyph layer now has native WGSL and remains available while upstream `TextLayer` WebGPU support stabilizes. |
+| Trace rendering | `TraceGraphLayer`, `TracePreparedStateLayer`, `TraceProcessLayer`, and counter sparklines | Reuse shared dual-backend blocks, fast text, arcs, and lines; preserve external float32 trace attributes; validate straight and curved dependency routes on WebGPU. |
+| Upstream follow-ups | `TextLayer`, `TripsLayer`, `SimpleMeshLayer`, and specialized geo-cell layers | Adopt and validate upstream WebGPU implementations as they become available; keep local fallbacks narrowly scoped. |
 | Graph geometry | `RoundedRectangleLayer`, `PathEdgeLayer`, and `EdgeArrowLayer` | Replace the fragment-only rounded rectangle and mesh arrowhead with CPU-tessellated polygons, then validate static path and polygon geometry on both backends. Full `GraphLayer` integration remains in progress. |
 | Dedicated redesign | `FlowPathLayer` and animated graph flows | The current transform-feedback implementation is incomplete and WebGL-specific. Replace it with a backend-neutral animation or compute design; do not treat shader translation alone as a port. |
-| Subsequent validation | Remaining Arrow, editable interactions, geospatial tiles, and basemap layers | Validate remaining upstream sublayers, picking interactions, tile and texture formats, and each demonstrated example independently. |
-| Host-dependent integrations | Three.js, Leaflet, Bing Maps, and external map renderers | Support depends on the host renderer and canvas ownership. A host-owned WebGL context cannot be switched to WebGPU by adding device tabs. |
+| Subsequent validation | Arrow arc/H3/text/trips, editable interactions, geospatial tile sources, and basemap layers | Reduce Arrow arc vertex-buffer usage; validate remaining upstream sublayers, picking interactions, tile and texture formats, and each demonstrated example independently. |
+| Host-dependent integrations | Leaflet, Bing Maps, and external map renderers | Support depends on the host renderer and canvas ownership. A host-owned WebGL context cannot be switched to WebGPU by adding device tabs. |
 
 The skybox map example also composes a basemap. `SkyboxLayer` itself has native WebGPU shaders, while complete basemap compatibility remains subject to the downstream GeoJSON, polygon, path, and label sublayers used by the selected style.
 

docs/whats-new.md

@@ -30,18 +30,22 @@ Scope tracked in the [v9.4 milestone](https://github.com/visgl/deck.gl-community
   `float32-filterable`.
 - `RoundedRectangleLayer`, `PathEdgeLayer`, and `EdgeArrowLayer`: replaced WebGL-only graph
   primitives with CPU-tessellated polygons and browser-verified upstream path rendering.
-- GeoArrow path and solid-polygon layers now have browser coverage for zero-copy binary attributes
-  on WebGL2 and WebGPU.
+- GeoArrow column, heatmap, path, point-cloud, polygon, scatterplot, and solid-polygon layers now
+  have browser coverage for Arrow binary attributes on WebGL2 and WebGPU. The compatibility matrix
+  records the remaining baseline vertex-buffer limit in `GeoArrowArcLayer`.
 - `EditableGeoJsonLayer`: browser-verified polygon, path, and edit-handle rendering on WebGPU,
   including its picking-width shader customization.
-- `TraceGraphLayer`, `TracePreparedStateLayer`, and `TraceProcessLayer`: ported trace backgrounds, binary span blocks, outlines, labels, overflow labels, separators, and straight dependencies by reusing dual-backend community layers.
+- `TraceGraphLayer`, `TracePreparedStateLayer`, and `TraceProcessLayer`: ported trace backgrounds, binary span blocks, outlines, labels, overflow labels, separators, and straight and curved dependencies by reusing dual-backend community layers.
 - Trace counter sparklines now preserve their full geometry using portable `LineLayer` segments.
+- `GlobalGridLayer`, `TileGridLayer` borders, and the wind showcase's state boundaries now have
+  local-data browser coverage on WebGL2 and WebGPU.
 - Every website gallery example and live layer-reference example now receives a standalone
   `DeviceTabsWidget` from the shared imperative host, with an independent device manager, WebGPU
   preference, WebGL2 fallback, renderer remounting, and preserved view state.
 - Every documentation page now displays a generated WebGPU compatibility badge linked to the
   support matrix. Verified and blocked layer pages override their package-level status, and
-  backend-neutral APIs are marked not applicable.
+  backend-neutral data, grid-adapter, layout, loader, mode, and trace-model APIs are marked not
+  applicable.
 
 ### `@deck.gl-community/geo-layers`
 
@@ -87,7 +91,9 @@ Scope tracked in the [v9.4 milestone](https://github.com/visgl/deck.gl-community
 - `TraceEngine` now owns mounted trace selection, collapse, layout, prepared scene, and diagnostics state below React; `DeckTraceGraph` renders an engine instead of receiving the full controlled trace-view state directly.
 - `TraceChunkStore` now exposes source-owned graph-data materialization and retained-state diagnostics for incremental windows, while `TraceStoreLayer` composes that flow as a low-level deck layer.
 - `DeckTraceGraph`, deck controllers/layers, trace loaders, and the Tracevis React surface now consume shared `@deck.gl-community/panels`, `@deck.gl-community/widgets`, and `@deck.gl-community/infovis-layers` APIs instead of vendored upstream copies.
-- Main trace rendering, binary span geometry, straight dependency arrows, row separators, span borders, overflow labels, and counter sparklines now work on WebGPU and WebGL2 using shared portable layers.
+- Main trace rendering, binary span geometry, straight and curved dependency arrows, row
+  separators, span borders, overflow labels, and counter sparklines now work on WebGPU and WebGL2
+  using shared portable layers.
 - Managed trace viewers accept caller-owned rendering devices and backend-neutral GPU-timing callbacks.
 - Added the website Tracevis example for exercising trace loading, selection, catalog, and Studio visualization settings workflows.
 

examples/geo-layers/wind/app.ts

@@ -451,20 +451,18 @@ export function mountWindExample(
           elevationScale: ELEVATION_SCALE,
           opacity: 0.32
         }),
-      boundaries:
-        !isWebgpu &&
-        new GeoJsonLayer({
-          id: 'wind-state-boundaries',
-          data: US_STATE_BOUNDARIES,
-          filled: false,
-          stroked: true,
-          getLineColor: [177, 188, 205, 95],
-          getLineWidth: 1,
-          lineWidthUnits: 'pixels',
-          lineWidthMinPixels: 0.65,
-          parameters: {depthCompare: 'always', depthWriteEnabled: false},
-          pickable: false
-        }),
+      boundaries: new GeoJsonLayer({
+        id: 'wind-state-boundaries',
+        data: US_STATE_BOUNDARIES,
+        filled: false,
+        stroked: true,
+        getLineColor: [177, 188, 205, 95],
+        getLineWidth: 1,
+        lineWidthUnits: 'pixels',
+        lineWidthMinPixels: 0.65,
+        parameters: {depthCompare: 'always', depthWriteEnabled: false},
+        pickable: false
+      }),
       wind: createWindLayer(field),
       particles: createParticleLayer(field),
       labels: isWebgpu

modules/arrow-layers/test/webgpu-layers.browser.spec.ts

@@ -16,7 +16,15 @@ import {
 } from 'apache-arrow';
 import {describe, expect, it} from 'vitest';
 
-import {GeoArrowPathLayer, GeoArrowSolidPolygonLayer} from '../src';
+import {
+  GeoArrowColumnLayer,
+  GeoArrowHeatmapLayer,
+  GeoArrowPathLayer,
+  GeoArrowPointCloudLayer,
+  GeoArrowPolygonLayer,
+  GeoArrowScatterplotLayer,
+  GeoArrowSolidPolygonLayer
+} from '../src';
 
 type BrowserGpu = {requestAdapter: () => Promise<unknown>};
 type NativeGpuError = {error?: {message?: string}};
@@ -27,9 +35,12 @@ type NativeGpuDevice = {
 };
 
 const pointType = new FixedSizeList(2, new Field('xy', new Float32()));
+const point3DType = new FixedSizeList(3, new Field('xyz', new Float32()));
 const lineStringType = new List(new Field('vertices', pointType));
 const polygonType = new List(new Field('rings', lineStringType));
 const table = tableFromArrays({id: [0]});
+const points = vectorFromArray([[0, 0]], pointType);
+const pointCloudPoints = vectorFromArray([[0, 0, 8]], point3DType);
 const lineStrings = vectorFromArray(
   [
     [
@@ -82,6 +93,66 @@ async function renderGeoArrowLayers(type: 'webgl' | 'webgpu'): Promise<void> {
     material: false,
     pickable: true
   });
+  const layers = [
+    new GeoArrowColumnLayer({
+      id: `geoarrow-column-${type}`,
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      data: table,
+      getPosition: points,
+      getFillColor: [16, 185, 129, 180],
+      getElevation: 10,
+      radius: 5,
+      diskResolution: 8,
+      material: false,
+      pickable: true
+    }),
+    new GeoArrowHeatmapLayer({
+      id: `geoarrow-heatmap-${type}`,
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      data: table,
+      getPosition: points,
+      getWeight: 1,
+      radiusPixels: 24,
+      pickable: false
+    }),
+    new GeoArrowPointCloudLayer({
+      id: `geoarrow-point-cloud-${type}`,
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      data: table,
+      getPosition: pointCloudPoints,
+      getColor: [244, 63, 94, 255],
+      pointSize: 6,
+      material: false,
+      pickable: true
+    }),
+    new GeoArrowPolygonLayer({
+      id: `geoarrow-composite-polygon-${type}`,
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      data: table,
+      getPolygon: polygons,
+      getFillColor: [168, 85, 247, 90],
+      getLineColor: [88, 28, 135, 255],
+      getLineWidth: 2,
+      lineWidthUnits: 'pixels',
+      earcutWorkerUrl: null,
+      material: false,
+      pickable: true
+    }),
+    new GeoArrowScatterplotLayer({
+      id: `geoarrow-scatterplot-${type}`,
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      data: table,
+      getPosition: points,
+      getRadius: 7,
+      radiusUnits: 'common',
+      getFillColor: [6, 182, 212, 200],
+      getLineColor: [8, 47, 73, 255],
+      stroked: true,
+      pickable: true
+    }),
+    polygonLayer,
+    pathLayer
+  ];
 
   let device: Device | undefined;
   let deck: Deck<OrthographicView> | undefined;
@@ -114,7 +185,7 @@ async function renderGeoArrowLayers(type: 'webgl' | 'webgpu'): Promise<void> {
         height: 128,
         views: new OrthographicView({id: 'geoarrow-webgpu-test', flipY: false}),
         initialViewState: {target: [0, 0, 0], zoom: 0},
-        layers: [polygonLayer, pathLayer],
+        layers,
         onAfterRender: () => {
           if (!polygonLayer.state.table || !polygonLayer.state.triangles) {
             return;
@@ -142,11 +213,11 @@ async function renderGeoArrowLayers(type: 'webgl' | 'webgpu'): Promise<void> {
 }
 
 describe('GeoArrow graphics backend compatibility', () => {
-  it('renders binary path and polygon attributes on WebGL2', async () => {
+  it('renders binary attributes through portable upstream renderers on WebGL2', async () => {
     await renderGeoArrowLayers('webgl');
   }, 20_000);
 
-  it('renders binary path and polygon attributes on WebGPU', async ({skip}) => {
+  it('renders binary attributes through portable upstream renderers on WebGPU', async ({skip}) => {
     const gpu = (navigator as Navigator & {gpu?: BrowserGpu}).gpu;
     if (!gpu || !(await gpu.requestAdapter())) {
       skip('This browser does not expose an available WebGPU adapter.');