feat: First WebGPU layer (WIP)

.gitignore

@@ -19,6 +19,15 @@ TODO
 mapbox-gl.js
 mapbox-gl-dev.js
 
+
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
 examples/**/yarn.lock
 showcases/**/yarn.lock
 test/**/yarn.lock

.yarnrc.yml

@@ -0,0 +1,12 @@
+nodeLinker: node-modules
+
+supportedArchitectures:
+  cpu:
+    - arm64
+    - x64
+    - darwin-x64
+  os:
+    - current
+    - darwin
+    - linux
+    - win32

examples/experimental/bezier/package.json

@@ -9,12 +9,12 @@
     "build": "vite build"
   },
   "dependencies": {
-    "deck.gl": "^9.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "deck.gl": "^9.1.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^4.6.0",
-    "vite": "^4.0.0"
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
   }
 }

examples/experimental/bezier/src/bezier-curve-layer/bezier-curve-layer-fragment.glsl.js

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-export default `\
+export default /* glsl */ `\
 #version 300 es
 #define SHADER_NAME bezier-curve-layer-fragment-shader
 

examples/experimental/bezier/src/bezier-curve-layer/bezier-curve-layer-vertex.glsl.js

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-export default `\
+export default /* glsl */ `\
 #version 300 es
 #define SHADER_NAME bezier-curve-layer-vertex-shader
 

examples/experimental/bezier/src/bezier-curve-layer/bezier-curve-layer.js

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import {Layer, fp64LowPart, picking} from '@deck.gl/core';
-import {Model, Geometry} from '@luma.gl/core';
+import {Model, Geometry} from '@luma.gl/engine';
 
 import vs from './bezier-curve-layer-vertex.glsl';
 import fs from './bezier-curve-layer-fragment.glsl';
@@ -20,12 +20,15 @@ const defaultProps = {
 };
 
 export default class BezierCurveLayer extends Layer {
+  static layerName = 'BezierCurveLayer';
+  static defaultProps = defaultProps;
+
   getShaders() {
     return {vs, fs, modules: [picking]};
   }
 
   initializeState() {
-    const attributeManager = this.getAttributeManager();
+    const attributeManager = this.getAttributeManager()!;
 
     /* eslint-disable max-len */
     attributeManager.addInstanced({
@@ -123,6 +126,3 @@ export default class BezierCurveLayer extends Layer {
     });
   }
 }
-
-BezierCurveLayer.layerName = 'BezierCurveLayer';
-BezierCurveLayer.defaultProps = defaultProps;

examples/experimental/bezier/src/bezier-curve-layer/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "module": "ES2022",
+    "target": "es2022",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true
+  }
+}

examples/experimental/webgpu/README.md

@@ -0,0 +1,26 @@
+This is a minimal standalone version of the ScatterplotLayer example
+on [deck.gl](http://deck.gl) website.
+
+### Usage
+
+Copy the content of this folder to your project. 
+
+```bash
+# install dependencies
+npm install
+# or
+yarn
+# bundle and serve the app with vite
+npm start
+```
+
+### Data format
+
+Sample data is stored in [deck.gl Example Data](https://github.com/visgl/deck.gl-data/tree/master/examples/scatterplot), showing the population distribution in Manhattan. [Source](http://www.census.gov)
+
+To use your own data, check out
+the [documentation of ScatterplotLayer](../../../docs/api-reference/layers/scatterplot-layer.md).
+
+### Basemap
+
+The basemap in this example is provided by [CARTO free basemap service](https://carto.com/basemaps). To use an alternative base map solution, visit [this guide](https://deck.gl/docs/get-started/using-with-map#using-other-basemap-services)

examples/experimental/webgpu/app.tsx

@@ -0,0 +1,88 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import React from 'react';
+import {createRoot} from 'react-dom/client';
+import DeckGL from '@deck.gl/react';
+// import {ScatterplotLayer} from '@deck.gl/layers';
+import {TriangleLayer} from './triangle-layer';
+import {webgpuAdapter} from '@luma.gl/webgpu';
+import {CanvasContext} from '@luma.gl/core';
+
+import type {Color, MapViewState} from '@deck.gl/core';
+
+CanvasContext.prototype.getDrawingBufferSize = function getDrawingBufferSize() {
+  return this.getPixelSize();
+}
+
+const MALE_COLOR: Color = [0, 128, 255];
+const FEMALE_COLOR: Color = [255, 0, 128];
+
+// Source data CSV
+const DATA_URL =
+  'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/scatterplot/manhattan.json'; // eslint-disable-line
+
+const INITIAL_VIEW_STATE: MapViewState = {
+  longitude: -74,
+  latitude: 40.7,
+  zoom: 11,
+  maxZoom: 16,
+  pitch: 0,
+  bearing: 0
+};
+
+type DataPoint = [longitude: number, latitude: number, gender: number];
+
+const points = await fetch(DATA_URL).then(response => response.json());
+
+export default function App({
+  data = points,
+  radius = 30,
+  maleColor = MALE_COLOR,
+  femaleColor = FEMALE_COLOR,
+  mapStyle = 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json'
+}: {
+  data?: DataPoint[];
+  radius?: number;
+  maleColor?: Color;
+  femaleColor?: Color;
+  mapStyle?: string;
+}) {
+  const layers = [
+    new TriangleLayer({}),
+    /*
+    new ScatterplotLayer<DataPoint>({
+      id: 'scatter-plot',
+      data,
+      radiusScale: radius,
+      radiusMinPixels: 0.25,
+      getPosition: d => [d[0], d[1], 0],
+      getFillColor: d => (d[2] === 1 ? maleColor : femaleColor),
+      // getRadius: 1,
+      getLineColor: d => [0, 0, 0, 0],
+      getLineWidth: d => 1,
+      getRadius: d => 1,
+      updateTriggers: {
+        getFillColor: [maleColor, femaleColor]
+      },
+      pickable: true
+    })
+      */
+  ];
+
+  return (
+    <DeckGL
+      deviceProps={{
+        adapters: [webgpuAdapter]
+      }}
+      layers={layers}
+      initialViewState={INITIAL_VIEW_STATE}
+      controller={true}
+    />
+  );
+}
+
+export function renderToDOM(container: HTMLDivElement) {
+  createRoot(container).render(<App />);
+}

examples/experimental/webgpu/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>deck.gl Example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' rel='stylesheet' />
+  <style>
+    body {margin: 0; font-family: sans-serif; width: 100vw; height: 100vh; overflow: auto;}
+  </style>
+</head>
+<body>
+<div id="app"></div>
+</body>
+<script type="module">
+  import {renderToDOM} from './app.tsx';
+  renderToDOM(document.getElementById('app'));
+</script>
+</html>

examples/experimental/webgpu/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "deckgl-examples-webgpu",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "start": "vite --open",
+    "start-local": "vite --config ../../vite.config.local.mjs",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@luma.gl/core": "^9.1.4",
+    "@luma.gl/webgpu": "^9.1.4",
+    "deck.gl": "^9.1.3",
+    "maplibre-gl": "^5.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-map-gl": "^8.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}