feat(webgpu): Enable transparency for WebGPU and ported example layers (#9730)

Author: Kaapp

examples/website/point-cloud/app.tsx

@@ -67,16 +67,6 @@ export default function App({
       f64Pos[i] = pos.value[i];
     }
     (data as LASMesh).attributes.POSITION.value = f64Pos;
-    // TODO: (kaapp) lack of transparency support for webgpu requires us to recolour the points
-    // for now. We can remove this once we can create transparent webgpu canvas
-    const color = (data as LASMesh).attributes.COLOR_0;
-    for (let i = 0; i < color.value.length / 4; i++) {
-      const index = i * 4;
-      color.value[index] = 0xff; // r
-      color.value[index + 1] = 0x00; // g
-      color.value[index + 2] = 0x00; // b
-      color.value[index + 3] = 0xff; // a
-    }
     if (header.boundingBox) {
       const [mins, maxs] = header.boundingBox;
       // File contains bounding box info

modules/core/src/index.ts

@@ -46,6 +46,7 @@ export {default as FirstPersonViewport} from './viewports/first-person-viewport'
 
 // Shader modules
 export {
+  color,
   picking,
   project,
   project32,

modules/core/src/lib/deck.ts

@@ -21,7 +21,7 @@ import {webgl2Adapter} from '@luma.gl/webgl';
 import {Timeline} from '@luma.gl/engine';
 import {AnimationLoop} from '@luma.gl/engine';
 import {GL} from '@luma.gl/constants';
-import type {Device, DeviceProps, Framebuffer, Parameters} from '@luma.gl/core';
+import type {CanvasContextProps, Device, DeviceProps, Framebuffer, Parameters} from '@luma.gl/core';
 import type {ShaderModule} from '@luma.gl/shadertools';
 
 import {Stats} from '@probe.gl/stats';
@@ -374,34 +374,7 @@ 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({
-        // 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,
-        // 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
-        }
-      });
+      deviceOrPromise = this._createDevice(props);
     }
 
     this.animationLoop = this._createAnimationLoop(deviceOrPromise, props);
@@ -874,6 +847,44 @@ export default class Deck<ViewsT extends ViewOrViews = null> {
     });
   }
 
+  // Create a device from the deviceProps, assigning required defaults
+  private _createDevice(props: DeckProps<ViewsT>): Promise<Device> {
+    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);
+    }
+
+    const defaultCanvasProps: CanvasContextProps = {
+      // we must use 'premultiplied' canvas for webgpu to enable transparency and match shaders
+      alphaMode: this.props.deviceProps?.type === 'webgpu' ? 'premultiplied' : undefined
+    };
+
+    // Create the "best" device supported from the registered adapters
+    return luma.createDevice({
+      // 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,
+      // 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: {
+        ...defaultCanvasProps,
+        ...canvasContextProps,
+        canvas: this._createCanvas(props),
+        useDevicePixels: this.props.useDevicePixels,
+        autoResize: true
+      }
+    });
+  }
+
   // Get the most relevant view state: props.viewState, if supplied, shadows internal viewState
   // TODO: For backwards compatibility ensure numeric width and height is added to the viewState
   private _getViewState(): ViewStateObject<ViewsT> | null {

modules/core/src/shaderlib/color/color.ts

@@ -0,0 +1,51 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {ShaderModule} from '@luma.gl/shadertools';
+import {LayerProps} from '../../types/layer-props';
+
+const colorWGSL = /* WGSL */ `
+
+struct ColorUniforms {
+  opacity: f32,
+};
+
+var<private> color: ColorUniforms = ColorUniforms(1.0);
+// TODO (kaapp) avoiding binding index collisions to handle layer opacity 
+// requires some thought.
+// @group(0) @binding(0) var<uniform> color: ColorUniforms;
+
+@must_use
+fn deckgl_premultiplied_alpha(fragColor: vec4<f32>) -> vec4<f32> {
+    return vec4(fragColor.rgb * fragColor.a, fragColor.a); 
+};
+`;
+
+export type ColorProps = {
+  /**
+   * Opacity of the layer, between 0 and 1. Default 1.
+   */
+  opacity?: number;
+};
+
+export type ColorUniforms = {
+  opacity?: number;
+};
+
+export default {
+  name: 'color',
+  dependencies: [],
+  source: colorWGSL,
+  getUniforms: (_props: Partial<ColorProps>) => {
+    // TODO (kaapp) Handle layer opacity
+    // apply gamma to opacity to make it visually "linear"
+    // TODO - v10: use raw opacity?
+    // opacity: Math.pow(props.opacity!, 1 / 2.2)
+    return {};
+  },
+  uniformTypes: {
+    opacity: 'f32'
+  }
+  // @ts-ignore TODO v9.1
+} as const satisfies ShaderModule<LayerProps, ColorUniforms, {}>;

modules/core/src/shaderlib/index.ts

@@ -6,6 +6,7 @@ import {ShaderAssembler} from '@luma.gl/shadertools';
 
 import {gouraudMaterial, phongMaterial} from '@luma.gl/shadertools';
 import {layerUniforms} from './misc/layer-uniforms';
+import color from './color/color';
 import geometry from './misc/geometry';
 import project from './project/project';
 import project32 from './project32/project32';
@@ -47,7 +48,7 @@ export function getShaderAssembler(language: 'glsl' | 'wgsl'): ShaderAssembler {
   return shaderAssembler;
 }
 
-export {layerUniforms, picking, project, project32, gouraudMaterial, phongMaterial, shadow};
+export {layerUniforms, color, picking, project, project32, gouraudMaterial, phongMaterial, shadow};
 
 // Useful for custom shader modules
 export type {ProjectProps, ProjectUniforms} from './project/viewport-uniforms';

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

@@ -5,6 +5,7 @@
 import {
   Layer,
   project32,
+  color,
   picking,
   UNIT,
   LayerProps,
@@ -114,7 +115,7 @@ export default class LineLayer<DataT = any, ExtraProps extends {} = {}> extends
   }
 
   getShaders() {
-    return super.getShaders({vs, fs, source, modules: [project32, picking, lineUniforms]});
+    return super.getShaders({vs, fs, source, modules: [project32, color, picking, lineUniforms]});
   }
 
   // This layer has its own wrapLongitude logic

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

@@ -3,13 +3,6 @@
 // Copyright (c) vis.gl contributors
 
 export const shaderWGSL = /* wgsl */ `\
-// TODO(ibgreen): Hack for Layer uniforms (move to new "color" module?)
-struct LayerUniforms {
-  opacity: f32,
-};
-var<private> layer: LayerUniforms = LayerUniforms(1.0);
-// @group(0) @binding(1) var<uniform> layer: LayerUniforms;
-
 // ---------- Helper Structures & Functions ----------
 
 // Placeholder filter functions.
@@ -43,17 +36,17 @@ fn splitLine(a: vec3<f32>, b: vec3<f32>, x: f32) -> vec3<f32> {
 
 // ---------- Uniforms & Global Structures ----------
 
-// Uniforms for line, layer, and project are assumed to be defined elsewhere.
+// Uniforms for line, color, and project are assumed to be defined elsewhere.
 // For example:
 //
 // @group(0) @binding(0)
 // var<uniform> line: LineUniform;
 //
-// struct LayerUniform {
+// struct ColorUniform {
 //   opacity: f32,
 // };
 // @group(0) @binding(1)
-// var<uniform> layer: LayerUniform;
+// var<uniform> color: ColorUniform;
 //
 // struct ProjectUniform {
 //   viewportSize: vec2<f32>,
@@ -150,7 +143,7 @@ fn vertexMain(
   let finalPosition: vec4<f32> = filteredP + vec4<f32>(clipOffset, 0.0, 0.0);
 
   // Compute color.
-  var vColor: vec4<f32> = vec4<f32>(instanceColors.rgb, instanceColors.a * layer.opacity);
+  var vColor: vec4<f32> = vec4<f32>(instanceColors.rgb, instanceColors.a * color.opacity);
   // vColor = deckgl_filter_color(vColor, geometry);
 
   var output: Varyings;
@@ -175,6 +168,9 @@ fn fragmentMain(
   // Apply the deck.gl filter to the color.
   fragColor = deckgl_filter_color(fragColor, geometry);
 
+  // Apply premultiplied alpha as required by transparent canvas
+  fragColor = deckgl_premultiplied_alpha(fragColor);
+
   return fragColor;
 }
 `;

modules/layers/src/point-cloud-layer/point-cloud-layer.ts

@@ -4,6 +4,7 @@
 
 import {
   Layer,
+  color,
   project32,
   picking,
   UNIT,
@@ -131,7 +132,7 @@ export default class PointCloudLayer<DataT = any, ExtraPropsT extends {} = {}> e
       vs,
       fs,
       source,
-      modules: [project32, gouraudMaterial, picking, pointCloudUniforms]
+      modules: [project32, color, gouraudMaterial, picking, pointCloudUniforms]
     });
   }
 

modules/layers/src/point-cloud-layer/point-cloud-layer.wgsl.ts

@@ -3,16 +3,6 @@
 // Copyright (c) vis.gl contributors
 
 export default /* wgsl */ `\
-// TODO(ibgreen): Hack for Layer uniforms (move to new "color" module?)
-
-struct LayerUniforms {
-  opacity: f32,
-};
-
-var<private> layer: LayerUniforms = LayerUniforms(1.0);
-// @group(0) @binding(1) var<uniform> layer: LayerUniforms;
-
-// Main shaders
 struct ConstantAttributes {
   instanceNormals: vec3<f32>,
   instanceColors: vec4<f32>,
@@ -73,7 +63,7 @@ fn vertexMain(attributes: Attributes) -> Varyings {
   let lightColor = lighting_getLightColor2(attributes.instanceColors.rgb, project.cameraPosition, geometry.position.xyz, geometry.normal);
 
   // Apply opacity to instance color, or return instance picking color
-  varyings.vColor = vec4(lightColor, attributes.instanceColors.a * layer.opacity);
+  varyings.vColor = vec4(lightColor, attributes.instanceColors.a * color.opacity);
   // DECKGL_FILTER_COLOR(vColor, geometry);
 
   return varyings;
@@ -94,6 +84,9 @@ fn fragmentMain(varyings: Varyings) -> @location(0) vec4<f32> {
   fragColor = varyings.vColor;
   // DECKGL_FILTER_COLOR(fragColor, geometry);
 
+  // Apply premultiplied alpha as required by transparent canvas
+  fragColor = deckgl_premultiplied_alpha(fragColor);
+
   return fragColor;
 }
 `;

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Layer, project32, picking, UNIT} from '@deck.gl/core';
+import {Layer, color, project32, picking, UNIT} from '@deck.gl/core';
 import {Model, Geometry} from '@luma.gl/engine';
 
 import {scatterplotUniforms, ScatterplotProps} from './scatterplot-layer-uniforms';
@@ -175,7 +175,7 @@ export default class ScatterplotLayer<DataT = any, ExtraPropsT extends {} = {}>
       vs,
       fs,
       source,
-      modules: [project32, picking, scatterplotUniforms]
+      modules: [project32, color, picking, scatterplotUniforms]
     });
   }