@luma.gl/webgpu 9.1.0-beta.8 → 9.1.0

package/src/adapter/helpers/get-bind-group.ts

@@ -42,14 +42,13 @@ export function getBindGroup(
 
 export function getShaderLayoutBinding(
   shaderLayout: ComputeShaderLayout,
-  bindingName: string,
-  options?: {ignoreWarnings?: boolean}
+  bindingName: string
 ): BindingDeclaration | null {
   const bindingLayout = shaderLayout.bindings.find(
     binding =>
       binding.name === bindingName || `${binding.name}uniforms` === bindingName.toLocaleLowerCase()
   );
-  if (!bindingLayout && !options?.ignoreWarnings) {
+  if (!bindingLayout) {
     log.warn(`Binding ${bindingName} not set: Not found in shader layout.`)();
   }
   return bindingLayout || null;
@@ -72,9 +71,7 @@ function getBindGroupEntries(
     }
 
     // TODO - hack to automatically bind samplers to supplied texture default samplers
-    bindingLayout = getShaderLayoutBinding(shaderLayout, `${bindingName}Sampler`, {
-      ignoreWarnings: true
-    });
+    bindingLayout = getShaderLayoutBinding(shaderLayout, `${bindingName}Sampler`);
     if (bindingLayout) {
       entries.push(getBindGroupEntry(value, bindingLayout.location, {sampler: true}));
     }

package/src/adapter/helpers/get-vertex-buffer-layout.ts

@@ -152,11 +152,11 @@ function findAttributeLayout(
 ): AttributeDeclaration | null {
   const attribute = shaderLayout.attributes.find(attribute_ => attribute_.name === name);
   if (!attribute) {
-    log.warn(`Supplied attribute not present in shader layout: ${name}`)();
+    log.warn(`Unknown attribute ${name}`)();
     return null;
   }
   if (attributeNames.has(name)) {
-    throw new Error(`Found multiple entries for attribute: ${name}`);
+    throw new Error(`Duplicate attribute ${name}`);
   }
   attributeNames.add(name);
   return attribute;

package/src/adapter/resources/webgpu-render-pipeline.ts

@@ -30,10 +30,6 @@ export class WebGPURenderPipeline extends RenderPipeline {
   private _bindGroupLayout: GPUBindGroupLayout | null = null;
   private _bindGroup: GPUBindGroup | null = null;
 
-  override get [Symbol.toStringTag]() {
-    return 'WebGPURenderPipeline';
-  }
-
   constructor(device: WebGPUDevice, props: RenderPipelineProps) {
     super(device, props);
     this.device = device;
@@ -72,12 +68,6 @@ export class WebGPURenderPipeline extends RenderPipeline {
    * @todo Do we want to expose BindGroups in the API and remove this?
    */
   setBindings(bindings: Record<string, Binding>): void {
-    // Invalidate the cached bind group if any value has changed
-    for (const [name, binding] of Object.entries(bindings)) {
-      if (this._bindings[name] !== binding) {
-        this._bindGroup = null;
-      }
-    }
     Object.assign(this._bindings, bindings);
   }
 
@@ -166,22 +156,16 @@ export class WebGPURenderPipeline extends RenderPipeline {
       buffers: getVertexBufferLayout(this.shaderLayout, this.props.bufferLayout)
     };
 
-    // Populate color targets
-    // TODO - at the moment blend and write mask are only set on the first target
-    const targets: (GPUColorTargetState | null)[] = [];
-    if (this.props.colorAttachmentFormats) {
-      for (const format of this.props.colorAttachmentFormats) {
-        targets.push(format ? {format: getWebGPUTextureFormat(format)} : null);
-      }
-    } else {
-      targets.push({format: getWebGPUTextureFormat(this.device.preferredColorFormat)});
-    }
-
     // Set up the fragment stage
     const fragment: GPUFragmentState = {
       module: (this.props.fs as WebGPUShader).handle,
       entryPoint: this.props.fragmentEntryPoint || 'main',
-      targets
+      targets: [
+        {
+          // TODO exclamation mark hack!
+          format: getWebGPUTextureFormat(this.device.getCanvasContext().format)
+        }
+      ]
     };
 
     // Create a partially populated descriptor
@@ -194,15 +178,6 @@ export class WebGPURenderPipeline extends RenderPipeline {
       layout: 'auto'
     };
 
-    // Set depth format if required, defaulting to the preferred depth format
-    const depthFormat = this.props.depthStencilAttachmentFormat || this.device.preferredDepthFormat;
-
-    if (this.props.parameters.depthWriteEnabled) {
-      descriptor.depthStencil = {
-        format: getWebGPUTextureFormat(depthFormat)
-      };
-    }
-
     // Set parameters on the descriptor
     applyParametersToRenderPipelineDescriptor(descriptor, this.props.parameters);
 

package/src/adapter/webgpu-adapter.ts

@@ -38,7 +38,10 @@ export class WebGPUAdapter extends Adapter {
       throw new Error('Failed to request WebGPU adapter');
     }
 
-    const adapterInfo = await adapter.requestAdapterInfo();
+    const adapterInfo =
+      adapter.info ||
+      // @ts-ignore Chrome has removed this function
+      (await adapter.requestAdapterInfo?.());
     log.probe(2, 'Adapter available', adapterInfo)();
 
     const requiredFeatures: GPUFeatureName[] = [];

package/src/adapter/webgpu-canvas-context.ts

@@ -4,8 +4,9 @@
 
 // / <reference types="@webgpu/types" />
 
-import type {DepthStencilTextureFormat, CanvasContextProps} from '@luma.gl/core';
-import {CanvasContext, Texture, log} from '@luma.gl/core';
+import type {Texture, TextureFormat, CanvasContextProps} from '@luma.gl/core';
+import {CanvasContext, log} from '@luma.gl/core';
+import {getWebGPUTextureFormat} from './helpers/convert-texture-format';
 import {WebGPUDevice} from './webgpu-device';
 import {WebGPUFramebuffer} from './resources/webgpu-framebuffer';
 import {WebGPUTexture} from './resources/webgpu-texture';
@@ -17,9 +18,13 @@ import {WebGPUTexture} from './resources/webgpu-texture';
  */
 export class WebGPUCanvasContext extends CanvasContext {
   readonly device: WebGPUDevice;
-  readonly handle: GPUCanvasContext;
+  readonly gpuCanvasContext: GPUCanvasContext;
+  /** Format of returned textures: "bgra8unorm", "rgba8unorm", "rgba16float". */
+  readonly format: TextureFormat = navigator.gpu.getPreferredCanvasFormat() as TextureFormat;
+  /** Default stencil format for depth textures */
+  readonly depthStencilFormat: TextureFormat = 'depth24plus';
 
-  private depthStencilAttachment: WebGPUTexture | null = null;
+  private depthStencilAttachment: Texture | null = null;
 
   get [Symbol.toStringTag](): string {
     return 'WebGPUCanvasContext';
@@ -28,43 +33,44 @@ export class WebGPUCanvasContext extends CanvasContext {
   constructor(device: WebGPUDevice, adapter: GPUAdapter, props: CanvasContextProps) {
     super(props);
     this.device = device;
+    // TODO - ugly hack to trigger first resize
+    this.width = -1;
+    this.height = -1;
 
-    // Base class constructor cannot access derived methods/fields, so we need to call these functions in the subclass constructor
     this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
-    this.updateSize([this.drawingBufferWidth, this.drawingBufferHeight]);
+    // @ts-ignore TODO - we don't handle OffscreenRenderingContext.
+    this.gpuCanvasContext = this.canvas.getContext('webgpu');
+    // TODO this has been replaced
+    // this.format = this.gpuCanvasContext.getPreferredFormat(adapter);
+    this.format = 'bgra8unorm';
   }
 
   /** Destroy any textures produced while configured and remove the context configuration. */
   destroy(): void {
-    this.handle.unconfigure();
+    this.gpuCanvasContext.unconfigure();
   }
 
   /** Update framebuffer with properly resized "swap chain" texture views */
-  getCurrentFramebuffer(
-    options: {depthStencilFormat?: DepthStencilTextureFormat | false} = {
-      depthStencilFormat: 'depth24plus'
-    }
-  ): WebGPUFramebuffer {
+  getCurrentFramebuffer(): WebGPUFramebuffer {
+    // Ensure the canvas context size is updated
+    this.update();
+
+    // Wrap the current canvas context texture in a luma.gl texture
+    // const currentColorAttachment = this.device.createTexture({
+    //   id: 'default-render-target',
+    //   handle: this.gpuCanvasContext.getCurrentTexture(),
+    //   format: this.format,
+    //   width: this.width,
+    //   height: this.height
+    // });
+
     // Wrap the current canvas context texture in a luma.gl texture
     const currentColorAttachment = this.getCurrentTexture();
-    // TODO - temporary debug code
-    if (
-      currentColorAttachment.width !== this.drawingBufferWidth ||
-      currentColorAttachment.height !== this.drawingBufferHeight
-    ) {
-      const [oldWidth, oldHeight] = this.getDrawingBufferSize();
-      this.drawingBufferWidth = currentColorAttachment.width;
-      this.drawingBufferHeight = currentColorAttachment.height;
-      log.log(
-        1,
-        `${this}: Resized to compensate for initial canvas size mismatch ${oldWidth}x${oldHeight} => ${this.drawingBufferWidth}x${this.drawingBufferHeight}px`
-      )();
-    }
+    this.width = currentColorAttachment.width;
+    this.height = currentColorAttachment.height;
 
     // Resize the depth stencil attachment
-    if (options?.depthStencilFormat) {
-      this._createDepthStencilAttachment(options?.depthStencilFormat);
-    }
+    this._createDepthStencilAttachment();
 
     return new WebGPUFramebuffer(this.device, {
       colorAttachments: [currentColorAttachment],
@@ -73,35 +79,46 @@ export class WebGPUCanvasContext extends CanvasContext {
   }
 
   /** Resizes and updates render targets if necessary */
-  updateSize(size: [newWidth: number, newHeight: number]): void {
-    if (this.depthStencilAttachment) {
-      this.depthStencilAttachment.destroy();
-      this.depthStencilAttachment = null;
-    }
+  update() {
+    const oldWidth = this.width;
+    const oldHeight = this.height;
+    const [newWidth, newHeight] = this.getPixelSize();
+
+    const sizeChanged = newWidth !== oldWidth || newHeight !== oldHeight;
+
+    if (sizeChanged) {
+      this.width = newWidth;
+      this.height = newHeight;
+
+      if (this.depthStencilAttachment) {
+        this.depthStencilAttachment.destroy();
+        this.depthStencilAttachment = null;
+      }
+
+      // Reconfigure the canvas size.
+      // https://www.w3.org/TR/webgpu/#canvas-configuration
+      this.gpuCanvasContext.configure({
+        device: this.device.handle,
+        format: getWebGPUTextureFormat(this.format),
+        // Can be used to define e.g. -srgb views
+        // viewFormats: [...]
+        colorSpace: this.props.colorSpace,
+        alphaMode: this.props.alphaMode
+      });
 
-    // Reconfigure the canvas size.
-    // https://www.w3.org/TR/webgpu/#canvas-configuration
-    this.handle.configure({
-      device: this.device.handle,
-      format: this.device.preferredColorFormat,
-      // Can be used to define e.g. -srgb views
-      // viewFormats: [...]
-      colorSpace: this.props.colorSpace,
-      alphaMode: this.props.alphaMode
-    });
+      log.log(1, `${this} Resized ${oldWidth}x${oldHeight} => ${newWidth}x${newHeight}px`)();
+    }
   }
 
   resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {
-    if (!this.device.handle) return;
+    this.update();
 
-    if (this.props.autoResize) {
-      return;
-    }
+    if (!this.device.handle) return;
 
     // Resize browser context .
     if (this.canvas) {
       const devicePixelRatio = this.getDevicePixelRatio(options?.useDevicePixels);
-      this._setDevicePixelRatio(devicePixelRatio, options);
+      this.setDevicePixelRatio(devicePixelRatio, options);
       return;
     }
   }
@@ -110,20 +127,20 @@ export class WebGPUCanvasContext extends CanvasContext {
   getCurrentTexture(): WebGPUTexture {
     return this.device.createTexture({
       id: `${this.id}#color-texture`,
-      handle: this.handle.getCurrentTexture(),
-      format: this.device.preferredColorFormat
+      handle: this.gpuCanvasContext.getCurrentTexture(),
+      format: this.format
     });
   }
 
   /** We build render targets on demand (i.e. not when size changes but when about to render) */
-  _createDepthStencilAttachment(depthStencilFormat: DepthStencilTextureFormat): WebGPUTexture {
+  _createDepthStencilAttachment() {
     if (!this.depthStencilAttachment) {
       this.depthStencilAttachment = this.device.createTexture({
         id: `${this.id}#depth-stencil-texture`,
-        usage: Texture.RENDER_ATTACHMENT,
-        format: depthStencilFormat,
-        width: this.drawingBufferWidth,
-        height: this.drawingBufferHeight
+        format: this.depthStencilFormat,
+        width: this.width,
+        height: this.height,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT
       });
     }
     return this.depthStencilAttachment;

package/src/adapter/webgpu-device.ts

@@ -28,7 +28,7 @@ import type {
   TransformFeedbackProps,
   QuerySet,
   QuerySetProps,
-  DeviceProps,
+  DeviceProps
 } from '@luma.gl/core';
 import {Device, DeviceFeatures} from '@luma.gl/core';
 import {WebGPUBuffer} from './resources/webgpu-buffer';
@@ -49,32 +49,26 @@ import {WebGPUQuerySet} from './resources/webgpu-query-set';
 
 /** WebGPU Device implementation */
 export class WebGPUDevice extends Device {
-  /** The underlying WebGPU device */
-  readonly handle: GPUDevice;
   /** type of this device */
   readonly type = 'webgpu';
 
-  readonly preferredColorFormat = navigator.gpu.getPreferredCanvasFormat() as
-    | 'rgba8unorm'
-    | 'bgra8unorm';
-  readonly preferredDepthFormat = 'depth24plus';
+  /** The underlying WebGPU device */
+  readonly handle: GPUDevice;
+  /* The underlying WebGPU adapter */
+  readonly adapter: GPUAdapter;
+  /* The underlying WebGPU adapter's info */
+  readonly adapterInfo: GPUAdapterInfo;
 
   readonly features: DeviceFeatures;
   readonly info: DeviceInfo;
   readonly limits: DeviceLimits;
 
   readonly lost: Promise<{reason: 'destroyed'; message: string}>;
-
-  renderPass: WebGPURenderPass | null = null;
-  override canvasContext: WebGPUCanvasContext | null;
+  canvasContext: WebGPUCanvasContext | null = null;
 
   private _isLost: boolean = false;
-  // canvasContext: WebGPUCanvasContext | null = null;
   commandEncoder: GPUCommandEncoder | null = null;
-  /* The underlying WebGPU adapter */
-  readonly adapter: GPUAdapter;
-  /* The underlying WebGPU adapter's info */
-  readonly adapterInfo: GPUAdapterInfo;
+  renderPass: WebGPURenderPass | null = null;
 
   constructor(
     props: DeviceProps,