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/app.tsx

@@ -13,6 +13,7 @@ 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';
 
 // Live data provided by the OpenSky Network, https://opensky-network.org.
 // The API may reject browser requests from other origins, so the bundled
@@ -107,10 +108,12 @@ function getTooltip({object}: PickingInfo<Aircraft>) {
 }
 
 export default function App({
+  device,
   sizeScale = 25,
   onDataLoad,
   mapStyle = MAP_STYLE
 }: {
+  device?: Device;
   sizeScale?: number;
   onDataLoad?: (count: number) => void;
   mapStyle?: string;
@@ -168,6 +171,7 @@ export default function App({
 
   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
         };
 

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

@@ -0,0 +1,125 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export default /* wgsl */ `\
+struct VertexInputs {
+  @location(0) positions: vec3<f32>,
+#ifdef HAS_NORMALS
+  @location(1) normals: vec3<f32>,
+#endif
+#ifdef HAS_UV
+  @location(3) texCoords: vec2<f32>,
+#endif
+  @location(6) instancePositions: vec3<f32>,
+  @location(7) instancePositions64Low: vec3<f32>,
+  @location(8) instanceColors: vec4<f32>,
+  @location(10) instanceModelMatrixCol0: vec3<f32>,
+  @location(11) instanceModelMatrixCol1: vec3<f32>,
+  @location(12) instanceModelMatrixCol2: vec3<f32>,
+  @location(13) instanceTranslation: vec3<f32>,
+};
+
+struct FragmentInputs {
+  @builtin(position) position: vec4<f32>,
+  @location(0) vColor: vec4<f32>,
+  @location(1) vTexCoord: vec2<f32>,
+  @location(2) pbrPosition: vec3<f32>,
+  @location(3) pbrUV: vec2<f32>,
+  @location(4) pbrNormal: vec3<f32>,
+};
+
+@vertex
+fn vertexMain(
+  inputs: VertexInputs,
+  @builtin(instance_index) instanceIndex: u32
+) -> FragmentInputs {
+  var outputs: FragmentInputs;
+
+  geometry.worldPosition = inputs.instancePositions;
+  geometry.pickingColor = picking_getPickingColorFromIndex(instanceIndex);
+
+  var vertexPosition = inputs.positions;
+  var texCoord = vec2<f32>(0.0, 0.0);
+  var normal = vec3<f32>(0.0, 0.0, 1.0);
+
+#ifdef HAS_UV
+  texCoord = inputs.texCoords;
+#endif
+#ifdef HAS_NORMALS
+  normal = inputs.normals;
+#endif
+
+  geometry.uv = texCoord;
+
+  let instanceModelMatrix = mat3x3<f32>(
+    inputs.instanceModelMatrixCol0,
+    inputs.instanceModelMatrixCol1,
+    inputs.instanceModelMatrixCol2
+  );
+
+  let scenePosition = (scenegraph.sceneModelMatrix * vec4<f32>(vertexPosition, 1.0)).xyz;
+  let worldNormal = instanceModelMatrix * (scenegraph.sceneModelMatrix * vec4<f32>(normal, 0.0)).xyz;
+
+  let originalSize = project_meter_size_to_pixel(scenegraph.sizeScale);
+  let clampedSize = clamp(originalSize, scenegraph.sizeMinPixels, scenegraph.sizeMaxPixels);
+  let sizeRatio = select(0.0, clampedSize / originalSize, originalSize > 0.0);
+
+  let pos =
+    (instanceModelMatrix * scenePosition) * scenegraph.sizeScale * sizeRatio +
+    inputs.instanceTranslation;
+
+  if (scenegraph.composeModelMatrix > 0.5) {
+    geometry.normal = project_normal(worldNormal);
+    geometry.worldPosition = inputs.instancePositions + pos;
+    geometry.position = vec4<f32>(
+      project_position_vec3_f64(inputs.instancePositions + pos, inputs.instancePositions64Low),
+      1.0
+    );
+  } else {
+    let sizeAdjustedPos = project_size_vec3(pos);
+    // Scenegraph offsets are east/north/up in globe mode. Use project32's helper so it can
+    // rotate the offset onto the local tangent plane before producing the common position.
+    let projectResult = project_position_to_clipspace_and_commonspace(
+      inputs.instancePositions,
+      inputs.instancePositions64Low,
+      sizeAdjustedPos
+    );
+    geometry.position = projectResult.commonPosition;
+    geometry.normal = project_normal(worldNormal);
+  }
+
+  outputs.position = project_common_position_to_clipspace(geometry.position);
+  outputs.vColor = inputs.instanceColors;
+  outputs.vTexCoord = texCoord;
+  outputs.pbrPosition = geometry.position.xyz;
+  outputs.pbrUV = texCoord;
+  outputs.pbrNormal = geometry.normal;
+  return outputs;
+}
+
+@fragment
+fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
+  fragmentGeometry.uv = inputs.vTexCoord;
+
+  var fragColor = inputs.vColor;
+
+#ifdef LIGHTING_PBR
+  fragmentInputs.pbr_vPosition = inputs.pbrPosition;
+  // scenegraphPbrMaterial uses the indexed UV fields from the current PBR module.
+  fragmentInputs.pbr_vUV0 = inputs.pbrUV;
+  fragmentInputs.pbr_vUV1 = vec2<f32>(0.0);
+  fragmentInputs.pbr_vNormal = inputs.pbrNormal;
+  fragColor = fragColor * pbr_filterColor(vec4<f32>(0.0));
+#else
+#ifdef HAS_BASECOLORMAP
+  fragColor =
+    fragColor *
+    textureSample(pbr_baseColorSampler, pbr_baseColorSamplerSampler, inputs.vTexCoord);
+#endif
+#endif
+
+  fragColor.a *= layer.opacity;
+  return deckgl_premultiplied_alpha(fragColor);
+}
+`;