feat(mesh-layers): Port ScenegraphLayer to WebGPU

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

@@ -54,7 +54,7 @@ The table below covers the public layer exports from the layer packages. It is d
 | `@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` | ✅ | ❌ |

examples/website/scenegraph/README.md

@@ -20,7 +20,8 @@ The 3D model is created by `manilov.ap`, modified for this application.
 See [profile page on sketchfab](https://sketchfab.com/3d-models/boeing747-1a75633f5737462ebc1c7879869f6229),
 licensed under [Creative Commons](https://creativecommons.org/licenses/by/4.0/).
 
-The real-time flight information is from [Opensky Network](https://opensky-network.org).
+The example tries to load live flight data from [Opensky Network](https://opensky-network.org)
+and falls back to a bundled snapshot if the API is unavailable.
 
 To use your own data, check out
 the [documentation of ScenegraphLayer](../../../docs/api-reference/mesh-layers/scenegraph-layer.md).

examples/website/scenegraph/app.tsx

@@ -2,23 +2,25 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-/* global fetch, setInterval, clearInterval */
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+/* global fetch */
+import React, {useEffect, useRef, useState} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Map} from 'react-map-gl/maplibre';
 import {DeckGL} from '@deck.gl/react';
 import {ScenegraphLayer} from '@deck.gl/mesh-layers';
+import {log} from '@deck.gl/core';
+import sampleData from './all.json';
 
 import type {ScenegraphLayerProps} from '@deck.gl/mesh-layers';
 import type {PickingInfo, MapViewState} from '@deck.gl/core';
+import type {Device} from '@luma.gl/core';
 
-// Data provided by the OpenSky Network, https://opensky-network.org
+// Live data provided by the OpenSky Network, https://opensky-network.org.
+// The API may reject browser requests from other origins, so the bundled
+// snapshot below remains the default and fallback data.
 const DATA_URL = 'https://opensky-network.org/api/states/all';
-// For local debugging
-// const DATA_URL = './all.json';
 const MODEL_URL =
   'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/scenegraph-layer/airplane.glb';
-const REFRESH_TIME_SECONDS = 60;
 const DROP_IF_OLDER_THAN_SECONDS = 120;
 
 const ANIMATIONS: ScenegraphLayerProps['_animations'] = {
@@ -71,14 +73,26 @@ const DATA_INDEX = {
   CATEGORY: 17
 } as const;
 
-async function fetchData(signal: AbortSignal): Promise<Aircraft[]> {
-  const resp = await fetch(DATA_URL, {signal});
-  const {time, states} = (await resp.json()) as {time: number; states: Aircraft[]};
+function normalizeData({time, states}: {time: number; states: Aircraft[]}): Aircraft[] {
   // make lastContact timestamp relative to response time
-  for (const a of states) {
-    a[DATA_INDEX.LAST_CONTACT] -= time;
+  return states.map(state => {
+    const aircraft = [...state] as Aircraft;
+    aircraft[DATA_INDEX.LAST_CONTACT] -= time;
+    return aircraft;
+  });
+}
+
+// https://github.com/visgl/deck.gl/pull/10465 updated the live OpenSky URL,
+// but the endpoint still rejects cross-origin browser requests. Start with this
+// bundled snapshot so the demo can render immediately and keep it as fallback.
+const DATA = normalizeData(sampleData as {time: number; states: Aircraft[]});
+
+async function fetchData(signal: AbortSignal): Promise<Aircraft[]> {
+  const response = await fetch(DATA_URL, {signal});
+  if (!response.ok) {
+    throw new Error(`OpenSky request failed with status ${response.status}`);
   }
-  return states;
+  return normalizeData((await response.json()) as {time: number; states: Aircraft[]});
 }
 
 function getTooltip({object}: PickingInfo<Aircraft>) {
@@ -93,61 +107,43 @@ function getTooltip({object}: PickingInfo<Aircraft>) {
   );
 }
 
-export function useInterval(callback: () => unknown, delay: number) {
-  const savedCallback = useRef(callback);
-
-  // Update callback.
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  // Loop.
-  useEffect(() => {
-    savedCallback.current(); // Initial call.
-    const id = setInterval(() => savedCallback.current(), delay);
-    return () => clearInterval(id);
-  }, [delay]);
-}
-
 export default function App({
+  device,
   sizeScale = 25,
   onDataLoad,
   mapStyle = MAP_STYLE
 }: {
+  device?: Device;
   sizeScale?: number;
   onDataLoad?: (count: number) => void;
   mapStyle?: string;
 }) {
-  const [abortController] = useState<AbortController>(new AbortController());
-  const dataRef = useRef<Aircraft[]>([]); // Callback requires stable reference to data.
-  const [, setVersion] = useState(0); // Re-render on data change.
-
-  const sync = useCallback(async () => {
-    let newData = await fetchData(abortController.signal);
-
-    // In order to keep the animation smooth we need to always return the same
-    // object at a given index. This function will discard new objects
-    // and only update existing ones.
-    if (dataRef.current.length > 0) {
-      const dataById: Record<string, Aircraft> = {};
-      newData.forEach(entry => (dataById[entry[DATA_INDEX.UNIQUE_ID]] = entry));
-      newData = dataRef.current.map(entry => dataById[entry[DATA_INDEX.UNIQUE_ID]] || entry);
-    }
+  const [data, setData] = useState(DATA);
+  const onDataLoadRef = useRef(onDataLoad);
 
-    dataRef.current = newData;
-    setVersion(v => v + 1);
+  useEffect(() => {
+    onDataLoadRef.current = onDataLoad;
+  }, [onDataLoad]);
 
-    if (onDataLoad) {
-      onDataLoad(newData.length);
-    }
-  }, []);
+  useEffect(() => {
+    onDataLoadRef.current?.(data.length);
+  }, [data]);
 
-  useInterval(sync, REFRESH_TIME_SECONDS * 1000);
-  useEffect(() => () => abortController.abort(), []);
+  useEffect(() => {
+    const abortController = new AbortController();
+    fetchData(abortController.signal)
+      .then(setData)
+      .catch(error => {
+        if (!abortController.signal.aborted) {
+          log.warn('Scenegraph example is using its bundled flight snapshot', error)();
+        }
+      });
+    return () => abortController.abort();
+  }, []);
 
   const layer = new ScenegraphLayer<Aircraft>({
     id: 'scenegraph-layer',
-    data: dataRef.current,
+    data,
     pickable: true,
     sizeScale,
     scenegraph: MODEL_URL,
@@ -170,14 +166,12 @@ export default function App({
     getScale: d => {
       const lastContact = d[DATA_INDEX.LAST_CONTACT];
       return lastContact < -DROP_IF_OLDER_THAN_SECONDS ? [0, 0, 0] : [1, 1, 1];
-    },
-    transitions: {
-      getPosition: REFRESH_TIME_SECONDS * 1000
     }
   });
 
   return (
     <DeckGL
+      device={device}
       layers={[layer]}
       initialViewState={INITIAL_VIEW_STATE}
       controller={true}

modules/mesh-layers/src/scenegraph-layer/scenegraph-layer-uniforms.ts

@@ -5,13 +5,26 @@
 import type {Matrix4} from '@math.gl/core';
 import type {ShaderModule} from '@luma.gl/shadertools';
 
-const uniformBlock = `\
+const uniformBlockWGSL = /* wgsl */ `\
+struct ScenegraphUniforms {
+  sizeScale: f32,
+  sizeMinPixels: f32,
+  sizeMaxPixels: f32,
+  sceneModelMatrix: mat4x4<f32>,
+  composeModelMatrix: f32,
+};
+
+@group(0) @binding(auto)
+var<uniform> scenegraph: ScenegraphUniforms;
+`;
+
+const uniformBlockGLSL = /* glsl */ `\
 layout(std140) uniform scenegraphUniforms {
   float sizeScale;
   float sizeMinPixels;
   float sizeMaxPixels;
   mat4 sceneModelMatrix;
-  bool composeModelMatrix;
+  float composeModelMatrix;
 } scenegraph;
 `;
 
@@ -20,13 +33,14 @@ export type ScenegraphProps = {
   sizeMinPixels: number;
   sizeMaxPixels: number;
   sceneModelMatrix: Matrix4;
-  composeModelMatrix: boolean;
+  composeModelMatrix: number;
 };
 
 export const scenegraphUniforms = {
   name: 'scenegraph',
-  vs: uniformBlock,
-  fs: uniformBlock,
+  source: uniformBlockWGSL,
+  vs: uniformBlockGLSL,
+  fs: uniformBlockGLSL,
   uniformTypes: {
     sizeScale: 'f32',
     sizeMinPixels: 'f32',

modules/mesh-layers/src/scenegraph-layer/scenegraph-layer-vertex.glsl.ts

@@ -58,9 +58,10 @@ void main(void) {
 
   float originalSize = project_size_to_pixel(scenegraph.sizeScale);
   float clampedSize = clamp(originalSize, scenegraph.sizeMinPixels, scenegraph.sizeMaxPixels);
+  float sizeRatio = originalSize == 0.0 ? 0.0 : clampedSize / originalSize;
 
-  vec3 pos = (instanceModelMatrix * (scenegraph.sceneModelMatrix * vec4(positions, 1.0)).xyz) * scenegraph.sizeScale * (clampedSize / originalSize) + instanceTranslation;
-  if(scenegraph.composeModelMatrix) {
+  vec3 pos = (instanceModelMatrix * (scenegraph.sceneModelMatrix * vec4(positions, 1.0)).xyz) * scenegraph.sizeScale * sizeRatio + instanceTranslation;
+  if(scenegraph.composeModelMatrix > 0.5) {
     DECKGL_FILTER_SIZE(pos, geometry);
     // using instancePositions as world coordinates
     // when using globe mode, this branch does not re-orient the model to align with the surface of the earth

modules/mesh-layers/src/scenegraph-layer/scenegraph-layer.ts

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Layer, project32, picking, log} from '@deck.gl/core';
-import type {Device} from '@luma.gl/core';
+import {Layer, project32, color, picking, log} from '@deck.gl/core';
+import type {Device, RenderPipelineParameters} from '@luma.gl/core';
 import {pbrMaterial} from '@luma.gl/shadertools';
 import {ScenegraphNode, GroupNode, ModelNode, Model} from '@luma.gl/engine';
 import {GLTFAnimator, PBREnvironment, createScenegraphsFromGLTF} from '@luma.gl/gltf';
@@ -15,6 +15,8 @@ import {MATRIX_ATTRIBUTES, shouldComposeModelMatrix} from '../utils/matrix';
 import {scenegraphUniforms, ScenegraphProps} from './scenegraph-layer-uniforms';
 import vs from './scenegraph-layer-vertex.glsl';
 import fs from './scenegraph-layer-fragment.glsl';
+import source from './scenegraph-layer.wgsl';
+import {scenegraphPbrMaterial} from './scenegraph-pbr-material';
 
 import {
   UpdateParameters,
@@ -77,7 +79,12 @@ type _ScenegraphLayerProps<DataT> = {
    */
   _imageBasedLightingEnvironment?:
     | PBREnvironment
-    | ((context: {gl: WebGL2RenderingContext; layer: ScenegraphLayer<DataT>}) => PBREnvironment);
+    | ((context: {
+        device?: Device;
+        /** @deprecated Use `device.handle`. */
+        gl?: WebGL2RenderingContext;
+        layer: ScenegraphLayer<DataT>;
+      }) => PBREnvironment);
 
   /** Anchor position accessor. */
   getPosition?: Accessor<DataT, Position>;
@@ -183,37 +190,49 @@ export default class ScenegraphLayer<DataT = any, ExtraPropsT extends {} = {}> e
   getShaders() {
     const defines: {LIGHTING_PBR?: 1} = {};
     let pbr;
+    const isWebGPU = this.context.device?.type === 'webgpu';
 
     if (this.props._lighting === 'pbr') {
-      pbr = pbrMaterial;
+      // The stock pbrMaterial module supplies the existing GLSL PBR path.
+      // WebGPU uses a Scenegraph-specific wrapper because its WGSL source must
+      // adapt the PBR position/normal inputs and camera binding to deck.gl's
+      // project module.
+      pbr = isWebGPU ? scenegraphPbrMaterial : pbrMaterial;
       defines.LIGHTING_PBR = 1;
+    } else if (isWebGPU) {
+      // The flat WGSL path can still sample a glTF base-color texture, so it
+      // needs the Scenegraph PBR module's sampler bindings even though
+      // LIGHTING_PBR is not enabled.
+      pbr = scenegraphPbrMaterial;
     } else {
-      // Dummy shader module needed to handle
-      // pbrMaterial.pbr_baseColorSampler binding
+      // The flat GLSL shader declares pbr_baseColorSampler itself. Register a
+      // name-only module so the glTF material binding is still routed to that
+      // sampler without injecting the full PBR lighting module.
       pbr = {name: 'pbrMaterial'};
     }
 
-    const modules = [project32, picking, scenegraphUniforms, pbr];
-    return super.getShaders({defines, vs, fs, modules});
+    const modules = [project32, color, picking, scenegraphUniforms, pbr];
+    return super.getShaders({defines, vs, fs, source, modules});
   }
 
   initializeState() {
     const attributeManager = this.getAttributeManager();
+    const supportsTransitions = this.context.device.type !== 'webgpu';
     // attributeManager is always defined for primitive layers
     attributeManager!.addInstanced({
       instancePositions: {
         size: 3,
         type: 'float64',
         fp64: this.use64bitPositions(),
         accessor: 'getPosition',
-        transition: true
+        transition: supportsTransitions
       },
       instanceColors: {
         type: 'unorm8',
         size: this.props.colorFormat.length,
         accessor: 'getColor',
         defaultValue: DEFAULT_COLOR,
-        transition: true
+        transition: supportsTransitions
       },
       instanceModelMatrix: MATRIX_ATTRIBUTES
     });
@@ -346,18 +365,31 @@ export default class ScenegraphLayer<DataT = any, ExtraPropsT extends {} = {}> e
     let env: PBREnvironment | undefined;
     if (_imageBasedLightingEnvironment) {
       if (typeof _imageBasedLightingEnvironment === 'function') {
-        env = _imageBasedLightingEnvironment({gl: this.context.gl, layer: this});
+        env = _imageBasedLightingEnvironment({
+          device: this.context.device,
+          gl: this.context.gl,
+          layer: this
+        });
       } else {
         env = _imageBasedLightingEnvironment;
       }
     }
 
+    const parameters =
+      this.context.device.type === 'webgpu'
+        ? ({
+            depthWriteEnabled: true,
+            depthCompare: 'less-equal'
+          } satisfies RenderPipelineParameters)
+        : undefined;
+
     return {
       imageBasedLightingEnvironment: env,
       modelOptions: {
         id: this.props.id,
         isInstanced: true,
         bufferLayout: this.getAttributeManager()!.getBufferLayouts(),
+        parameters,
         ...this.getShaders()
       },
       // tangents are not supported
@@ -389,7 +421,7 @@ export default class ScenegraphLayer<DataT = any, ExtraPropsT extends {} = {}> e
           sizeScale,
           sizeMinPixels,
           sizeMaxPixels,
-          composeModelMatrix: shouldComposeModelMatrix(viewport, coordinateSystem),
+          composeModelMatrix: shouldComposeModelMatrix(viewport, coordinateSystem) ? 1 : 0,
           sceneModelMatrix: worldMatrix
         };