feat(layers): Port ScatterplotLayer to WebGPU / WGSL (#9432)

Author: ibgreen

examples/website/point-cloud/app.tsx

@@ -11,7 +11,7 @@ import {PointCloudLayer} from '@deck.gl/layers';
 
 import {LASWorkerLoader} from '@loaders.gl/las';
 import type {OrbitViewState} from '@deck.gl/core';
-import {Device, log} from '@luma.gl/core';
+import {Device} from '@luma.gl/core';
 
 // TODO - export from loaders?
 type LASMesh = (typeof LASWorkerLoader)['dataType'];

examples/website/scatterplot/app.tsx

@@ -9,9 +9,10 @@ import {DeckGL} from '@deck.gl/react';
 import {ScatterplotLayer} from '@deck.gl/layers';
 
 import type {Color, MapViewState} from '@deck.gl/core';
+import type {Device, DeviceProps} from '@luma.gl/core';
 
-const MALE_COLOR: Color = [0, 128, 255];
-const FEMALE_COLOR: Color = [255, 0, 128];
+const MALE_COLOR: Color = [0, 128, 255, 255];
+const FEMALE_COLOR: Color = [255, 0, 128, 255];
 
 // Source data CSV
 const DATA_URL =
@@ -29,12 +30,16 @@ const INITIAL_VIEW_STATE: MapViewState = {
 type DataPoint = [longitude: number, latitude: number, gender: number];
 
 export default function App({
+  device,
+  deviceProps,
   data = DATA_URL,
   radius = 30,
   maleColor = MALE_COLOR,
   femaleColor = FEMALE_COLOR,
   mapStyle = 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json'
 }: {
+  device?: Device;
+  deviceProps?: DeviceProps;
   data?: string | DataPoint[];
   radius?: number;
   maleColor?: Color;
@@ -52,17 +57,24 @@ export default function App({
       getRadius: 1,
       updateTriggers: {
         getFillColor: [maleColor, femaleColor]
-      }
+      },
+      pickable: true
     })
   ];
 
   return (
-    <DeckGL layers={layers} initialViewState={INITIAL_VIEW_STATE} controller={true}>
+    <DeckGL
+      device={device}
+      deviceProps={deviceProps}
+      layers={layers}
+      initialViewState={INITIAL_VIEW_STATE}
+      controller={true}
+    >
       <Map reuseMaps mapStyle={mapStyle} />
     </DeckGL>
   );
 }
 
-export function renderToDOM(container: HTMLDivElement) {
-  createRoot(container).render(<App />);
+export function renderToDOM(container: HTMLDivElement, device?: Device, deviceProps?: DeviceProps) {
+  createRoot(container).render(<App deviceProps={deviceProps} />);
 }

examples/website/scatterplot/index.html

@@ -14,6 +14,7 @@
 </body>
 <script type="module">
   import {renderToDOM} from './app.tsx';
-  renderToDOM(document.getElementById('app'));
+  import {webgpuAdapter} from '@luma.gl/webgpu';
+  renderToDOM(document.getElementById('app'), undefined, {adapters: [webgpuAdapter], type: 'webgl'});
 </script>
 </html>

examples/website/scatterplot/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "deck.gl": "^9.0.0",
+    "deck.gl": "^9.2.0-alpha.2",
     "maplibre-gl": "^5.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

modules/core/src/lib/deck.ts

@@ -374,16 +374,29 @@ export default class Deck<ViewsT extends ViewOrViews = null> {
 
     // Create a new device
     if (!deviceOrPromise) {
+      const canvasContextUserProps = this.props.deviceProps?.createCanvasContext;
+      const canvasContextProps =
+        typeof canvasContextUserProps === 'object' ? canvasContextUserProps : undefined;
+
+      // In deck.gl v9, Deck always bundles and adds a webgl2Adapter.
+      // This behavior is expected to change in deck.gl v10 to support WebGPU only builds.
+      const deviceProps = {adapters: [], ...props.deviceProps};
+      if (!deviceProps.adapters.includes(webgl2Adapter)) {
+        deviceProps.adapters.push(webgl2Adapter);
+      }
+
       // Create the "best" device supported from the registered adapters
       deviceOrPromise = luma.createDevice({
-        type: 'webgl',
         // luma by default throws if a device is already attached
         // asynchronous device creation could happen after finalize() is called
         // TODO - createDevice should support AbortController?
         _reuseDevices: true,
-        adapters: [webgl2Adapter],
-        ...props.deviceProps,
+        // tests can't handle WebGPU devices yet so we force WebGL2 unless overridden
+        type: 'webgl',
+        ...deviceProps,
+        // In deck.gl v10 we may emphasize multi canvas support and unwind this prop wrapping
         createCanvasContext: {
+          ...canvasContextProps,
           canvas: this._createCanvas(props),
           useDevicePixels: this.props.useDevicePixels,
           autoResize: true

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

@@ -16,6 +16,7 @@ import {
   UpdateParameters,
   DefaultProps
 } from '@deck.gl/core';
+import {Parameters} from '@luma.gl/core';
 import {Model, Geometry} from '@luma.gl/engine';
 
 import {lineUniforms, LineProps} from './line-layer-uniforms';
@@ -188,6 +189,15 @@ export default class LineLayer<DataT = any, ExtraProps extends {} = {}> extends
   }
 
   protected _getModel(): Model {
+    // TODO(ibgreen): WebGPU complication: Matching attachment state of the renderpass requires including a depth buffer
+    const parameters =
+      this.context.device.type === 'webgpu'
+        ? ({
+            depthWriteEnabled: true,
+            depthCompare: 'less-equal'
+          } satisfies Parameters)
+        : undefined;
+
     /*
      *  (0, -1)-------------_(1, -1)
      *       |          _,-"  |
@@ -207,6 +217,7 @@ export default class LineLayer<DataT = any, ExtraProps extends {} = {}> extends
           positions: {size: 3, value: new Float32Array(positions)}
         }
       }),
+      parameters,
       isInstanced: true
     });
   }

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

@@ -20,6 +20,7 @@ import type {
   Color,
   DefaultProps
 } from '@deck.gl/core';
+import {Parameters} from '@luma.gl/core';
 
 const DEFAULT_COLOR: [number, number, number, number] = [0, 0, 0, 255];
 
@@ -257,10 +258,23 @@ export default class ScatterplotLayer<DataT = any, ExtraPropsT extends {} = {}>
     };
     const model = this.state.model!;
     model.shaderInputs.setProps({scatterplot: scatterplotProps});
+    if (this.context.device.type === 'webgpu') {
+      // @ts-expect-error TODO - this line was needed during WebGPU port
+      model.instanceCount = this.props.data.length;
+    }
     model.draw(this.context.renderPass);
   }
 
   protected _getModel() {
+    // TODO(ibgreen): WebGPU complication: Matching attachment state of the renderpass requires including a depth buffer
+    const parameters =
+      this.context.device.type === 'webgpu'
+        ? ({
+            depthWriteEnabled: true,
+            depthCompare: 'less-equal'
+          } satisfies Parameters)
+        : undefined;
+
     // a square that minimally cover the unit circle
     const positions = [-1, -1, 0, 1, -1, 0, -1, 1, 0, 1, 1, 0];
     return new Model(this.context.device, {
@@ -273,7 +287,8 @@ export default class ScatterplotLayer<DataT = any, ExtraPropsT extends {} = {}>
           positions: {size: 3, value: new Float32Array(positions)}
         }
       }),
-      isInstanced: true
+      isInstanced: true,
+      parameters
     });
   }
 }

test/apps/webgpu-line/app.tsx

@@ -103,7 +103,7 @@ export default function App({
   return (
     <DeckGL
       deviceProps={{
-        adapters: [webgpuAdapter]
+        adapters: []
         // onError: (error) => {
         //   debugger
         // }

test/apps/webgpu-scatterplot/app.tsx

@@ -92,7 +92,7 @@ export default function App({
     <DeckGL
       deviceProps={{
         createCanvasContext: {alphaMode: 'premultiplied'},
-        adapters: [webgpuAdapter]
+        adapters: []
       }}
       layers={layers}
       initialViewState={INITIAL_VIEW_STATE}