feat(layers) Port PathLayer to WebGPU

examples/website/highway/app.tsx

@@ -10,9 +10,10 @@ import {GeoJsonLayer} from '@deck.gl/layers';
 import {scaleLinear, scaleThreshold} from 'd3-scale';
 import {CSVLoader} from '@loaders.gl/csv';
 import {load} from '@loaders.gl/core';
+import {Device} from '@luma.gl/core';
 
 import {Feature, LineString, MultiLineString} from 'geojson';
-import type {Color, PickingInfo, MapViewState} from '@deck.gl/core';
+import type {Color, PickingInfo, MapViewState, Widget} from '@deck.gl/core';
 
 // Source data GeoJSON
 const DATA_URL = {
@@ -130,18 +131,23 @@ function renderTooltip({
 }
 
 export default function App({
+  device,
   roads = DATA_URL.ROADS,
   year,
   accidents,
-  mapStyle = MAP_STYLE
+  mapStyle = MAP_STYLE,
+  widgets
 }: {
+  device?: Device;
   roads?: string | Road[];
   accidents?: Accident[];
   year?: number;
   mapStyle?: string;
+  widgets?: Widget[];
 }) {
   const [hoverInfo, setHoverInfo] = useState<PickingInfo<Road>>();
   const {incidents, fatalities} = useMemo(() => aggregateAccidents(accidents), [accidents]);
+  const isWebGPU = device?.type === 'webgpu';
 
   const layers = [
     new GeoJsonLayer<RoadProperties>({
@@ -183,10 +189,22 @@ export default function App({
 
   return (
     <DeckGL
+      device={device}
       layers={layers}
+      widgets={widgets}
       pickingRadius={5}
       initialViewState={INITIAL_VIEW_STATE}
       controller={true}
+      parameters={{
+        blendColorOperation: 'add',
+        // WebGPU shaders output premultiplied color, so use `one` here to match
+        // the legacy WebGL visual intensity instead of multiplying alpha twice.
+        blendColorSrcFactor: isWebGPU ? 'one' : 'src-alpha',
+        blendColorDstFactor: 'one',
+        blendAlphaOperation: 'add',
+        blendAlphaSrcFactor: 'one-minus-dst-alpha',
+        blendAlphaDstFactor: 'one'
+      }}
     >
       <Map reuseMaps mapStyle={mapStyle} />
 

modules/core/src/shaderlib/project/project.wgsl.ts

@@ -129,8 +129,8 @@ fn project_size_vec4(meters: vec4<f32>) -> vec4<f32> {
 fn project_get_orientation_matrix(up: vec3<f32>) -> mat3x3<f32> {
   let uz = normalize(up);
   let ux = select(
-    vec3<f32>(1.0, 0.0, 0.0),
     normalize(vec3<f32>(uz.y, -uz.x, 0.0)),
+    vec3<f32>(1.0, 0.0, 0.0),
     abs(uz.z) == 1.0
   );
   let uy = cross(uz, ux);

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',