@luma.gl/webgpu 9.1.9 → 9.2.0-alpha.2

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

@@ -2,11 +2,11 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+// prettier-ignore
 // / <reference types="@webgpu/types" />
 
-import type {Texture, TextureFormat, CanvasContextProps} from '@luma.gl/core';
-import {CanvasContext, log} from '@luma.gl/core';
-import {getWebGPUTextureFormat} from './helpers/convert-texture-format';
+import type {TextureFormatDepthStencil, CanvasContextProps} from '@luma.gl/core';
+import {CanvasContext, Texture, log} from '@luma.gl/core';
 import {WebGPUDevice} from './webgpu-device';
 import {WebGPUFramebuffer} from './resources/webgpu-framebuffer';
 import {WebGPUTexture} from './resources/webgpu-texture';
@@ -18,13 +18,9 @@ import {WebGPUTexture} from './resources/webgpu-texture';
  */
 export class WebGPUCanvasContext extends CanvasContext {
   readonly device: WebGPUDevice;
-  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';
+  readonly handle: GPUCanvasContext;
 
-  private depthStencilAttachment: Texture | null = null;
+  private depthStencilAttachment: WebGPUTexture | null = null;
 
   get [Symbol.toStringTag](): string {
     return 'WebGPUCanvasContext';
@@ -32,45 +28,51 @@ export class WebGPUCanvasContext extends CanvasContext {
 
   constructor(device: WebGPUDevice, adapter: GPUAdapter, props: CanvasContextProps) {
     super(props);
+
+    const context = this.canvas.getContext('webgpu');
+    if (!context) {
+      throw new Error(`${this}: Failed to create WebGPU canvas context`);
+    }
     this.device = device;
-    // TODO - ugly hack to trigger first resize
-    this.width = -1;
-    this.height = -1;
+    this.handle = context;
 
+    // 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`);
-    // @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';
+    this._updateDevice();
   }
 
   /** Destroy any textures produced while configured and remove the context configuration. */
-  destroy(): void {
-    this.gpuCanvasContext.unconfigure();
+  override destroy(): void {
+    this.handle.unconfigure();
+    super.destroy();
   }
 
   /** Update framebuffer with properly resized "swap chain" texture views */
-  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
-    // });
-
+  getCurrentFramebuffer(
+    options: {depthStencilFormat?: TextureFormatDepthStencil | false} = {
+      depthStencilFormat: 'depth24plus'
+    }
+  ): WebGPUFramebuffer {
     // Wrap the current canvas context texture in a luma.gl texture
     const currentColorAttachment = this.getCurrentTexture();
-    this.width = currentColorAttachment.width;
-    this.height = currentColorAttachment.height;
+    // 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`
+      )();
+    }
 
     // Resize the depth stencil attachment
-    this._createDepthStencilAttachment();
+    if (options?.depthStencilFormat) {
+      this._createDepthStencilAttachment(options?.depthStencilFormat);
+    }
 
     return new WebGPUFramebuffer(this.device, {
       colorAttachments: [currentColorAttachment],
@@ -78,69 +80,47 @@ export class WebGPUCanvasContext extends CanvasContext {
     });
   }
 
-  /** Resizes and updates render targets if necessary */
-  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
-      });
+  // IMPLEMENTATION OF ABSTRACT METHODS
 
-      log.log(1, `${this} Resized ${oldWidth}x${oldHeight} => ${newWidth}x${newHeight}px`)();
+  _updateDevice(): void {
+    if (this.depthStencilAttachment) {
+      this.depthStencilAttachment.destroy();
+      this.depthStencilAttachment = null;
     }
-  }
-
-  resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {
-    this.update();
 
-    if (!this.device.handle) return;
-
-    // Resize browser context .
-    if (this.canvas) {
-      const devicePixelRatio = this.getDevicePixelRatio(options?.useDevicePixels);
-      this.setDevicePixelRatio(devicePixelRatio, options);
-      return;
-    }
+    // 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
+    });
   }
 
   /** Wrap the current canvas context texture in a luma.gl texture */
   getCurrentTexture(): WebGPUTexture {
+    const handle = this.handle.getCurrentTexture();
     return this.device.createTexture({
       id: `${this.id}#color-texture`,
-      handle: this.gpuCanvasContext.getCurrentTexture(),
-      format: this.format
+      handle,
+      format: this.device.preferredColorFormat,
+      width: handle.width,
+      height: handle.height
     });
   }
 
   /** We build render targets on demand (i.e. not when size changes but when about to render) */
-  _createDepthStencilAttachment() {
+  _createDepthStencilAttachment(depthStencilFormat: TextureFormatDepthStencil): WebGPUTexture {
     if (!this.depthStencilAttachment) {
       this.depthStencilAttachment = this.device.createTexture({
         id: `${this.id}#depth-stencil-texture`,
-        format: this.depthStencilFormat,
-        width: this.width,
-        height: this.height,
-        usage: GPUTextureUsage.RENDER_ATTACHMENT
+        usage: Texture.RENDER_ATTACHMENT,
+        format: depthStencilFormat,
+        width: this.drawingBufferWidth,
+        height: this.drawingBufferHeight
       });
     }
     return this.depthStencilAttachment;

package/src/adapter/webgpu-device.ts

@@ -10,25 +10,23 @@ import type {
   DeviceLimits,
   DeviceFeature,
   DeviceTextureFormatCapabilities,
+  VertexFormat,
   CanvasContextProps,
   BufferProps,
   SamplerProps,
   ShaderProps,
-  Texture,
   TextureProps,
   ExternalTextureProps,
   FramebufferProps,
   RenderPipelineProps,
   ComputePipelineProps,
-  RenderPassProps,
-  ComputePassProps,
-  // CommandEncoderProps,
   VertexArrayProps,
   TransformFeedback,
   TransformFeedbackProps,
   QuerySet,
   QuerySetProps,
   DeviceProps,
+  CommandEncoderProps,
   PipelineLayoutProps,
 } from '@luma.gl/core';
 import {Device, DeviceFeatures} from '@luma.gl/core';
@@ -40,20 +38,16 @@ import {WebGPUShader} from './resources/webgpu-shader';
 import {WebGPURenderPipeline} from './resources/webgpu-render-pipeline';
 import {WebGPUFramebuffer} from './resources/webgpu-framebuffer';
 import {WebGPUComputePipeline} from './resources/webgpu-compute-pipeline';
-import {WebGPURenderPass} from './resources/webgpu-render-pass';
-import {WebGPUComputePass} from './resources/webgpu-compute-pass';
-// import {WebGPUCommandEncoder} from './resources/webgpu-command-encoder';
 import {WebGPUVertexArray} from './resources/webgpu-vertex-array';
 
 import {WebGPUCanvasContext} from './webgpu-canvas-context';
+import {WebGPUCommandEncoder} from './resources/webgpu-command-encoder';
+import {WebGPUCommandBuffer} from './resources/webgpu-command-buffer';
 import {WebGPUQuerySet} from './resources/webgpu-query-set';
 import {WebGPUPipelineLayout} from './resources/webgpu-pipeline-layout';
 
 /** WebGPU Device implementation */
 export class WebGPUDevice extends Device {
-  /** type of this device */
-  readonly type = 'webgpu';
-
   /** The underlying WebGPU device */
   readonly handle: GPUDevice;
   /* The underlying WebGPU adapter */
@@ -61,16 +55,32 @@ export class WebGPUDevice extends Device {
   /* The underlying WebGPU adapter's info */
   readonly adapterInfo: GPUAdapterInfo;
 
+  /** type of this device */
+  readonly type = 'webgpu';
+
+  readonly preferredColorFormat = navigator.gpu.getPreferredCanvasFormat() as
+    | 'rgba8unorm'
+    | 'bgra8unorm';
+  readonly preferredDepthFormat = 'depth24plus';
+
   readonly features: DeviceFeatures;
   readonly info: DeviceInfo;
   readonly limits: DeviceLimits;
 
   readonly lost: Promise<{reason: 'destroyed'; message: string}>;
-  canvasContext: WebGPUCanvasContext | null = null;
+
+  override canvasContext: WebGPUCanvasContext | null = null;
 
   private _isLost: boolean = false;
-  commandEncoder: GPUCommandEncoder | null = null;
-  renderPass: WebGPURenderPass | null = null;
+  commandEncoder: WebGPUCommandEncoder;
+
+  override get [Symbol.toStringTag](): string {
+    return 'WebGPUDevice';
+  }
+
+  override toString(): string {
+    return `WebGPUDevice(${this.id})`;
+  }
 
   constructor(
     props: DeviceProps,
@@ -89,15 +99,12 @@ export class WebGPUDevice extends Device {
 
     // Listen for uncaptured WebGPU errors
     device.addEventListener('uncapturederror', (event: Event) => {
+      event.preventDefault();
       // TODO is this the right way to make sure the error is an Error instance?
       const errorMessage =
         event instanceof GPUUncapturedErrorEvent ? event.error.message : 'Unknown WebGPU error';
-      this.reportError(new Error(errorMessage));
-      if (this.props.debug) {
-        // eslint-disable-next-line no-debugger
-        debugger;
-      }
-      event.preventDefault();
+      this.reportError(new Error(errorMessage), this)();
+      this.debug();
     });
 
     // "Context" loss handling
@@ -112,6 +119,8 @@ export class WebGPUDevice extends Device {
     if (canvasContextProps) {
       this.canvasContext = new WebGPUCanvasContext(this, this.adapter, canvasContextProps);
     }
+
+    this.commandEncoder = this.createCommandEncoder({});
   }
 
   // TODO
@@ -127,6 +136,15 @@ export class WebGPUDevice extends Device {
     return this._isLost;
   }
 
+  override isVertexFormatSupported(format: VertexFormat): boolean {
+    const info = this.getVertexFormatInfo(format);
+    return !info.webglOnly;
+  }
+
+  getTextureByteAlignment(): number {
+    return 1;
+  }
+
   createBuffer(props: BufferProps | ArrayBuffer | ArrayBufferView): WebGPUBuffer {
     const newProps = this._normalizeBufferProps(props);
     return new WebGPUBuffer(this, newProps);
@@ -164,25 +182,11 @@ export class WebGPUDevice extends Device {
     return new WebGPUVertexArray(this, props);
   }
 
-  // WebGPU specifics
-
-  /**
-   * Allows a render pass to begin against a canvas context
-   * @todo need to support a "Framebuffer" equivalent (aka preconfigured RenderPassDescriptors?).
-   */
-  beginRenderPass(props: RenderPassProps): WebGPURenderPass {
-    this.commandEncoder = this.commandEncoder || this.handle.createCommandEncoder();
-    return new WebGPURenderPass(this, props);
+  override createCommandEncoder(props?: CommandEncoderProps): WebGPUCommandEncoder {
+    return new WebGPUCommandEncoder(this, props);
   }
 
-  beginComputePass(props: ComputePassProps): WebGPUComputePass {
-    this.commandEncoder = this.commandEncoder || this.handle.createCommandEncoder();
-    return new WebGPUComputePass(this, props);
-  }
-
-  // createCommandEncoder(props: CommandEncoderProps): WebGPUCommandEncoder {
-  //   return new WebGPUCommandEncoder(this, props);
-  // }
+  // WebGPU specifics
 
   createTransformFeedback(props: TransformFeedbackProps): TransformFeedback {
     throw new Error('Transform feedback not supported in WebGPU');
@@ -200,17 +204,33 @@ export class WebGPUDevice extends Device {
     return new WebGPUPipelineLayout(this, props);
   }
 
-  submit(): void {
-    const commandBuffer = this.commandEncoder?.finish();
-    if (commandBuffer) {
-      this.handle.pushErrorScope('validation');
-      this.handle.queue.submit([commandBuffer]);
-      this.handle.popErrorScope().then((error: GPUError | null) => {
-        if (error) {
-          this.reportError(new Error(`WebGPU command submission failed: ${error.message}`));
-        }
-      });
+  submit(commandBuffer?: WebGPUCommandBuffer): void {
+    if (!commandBuffer) {
+      commandBuffer = this.commandEncoder.finish();
+      this.commandEncoder.destroy();
+      this.commandEncoder = this.createCommandEncoder({id: `${this.id}-default-encoder`});
     }
+
+    this.pushErrorScope('validation');
+    this.handle.queue.submit([commandBuffer.handle]);
+    this.popErrorScope((error: GPUError) => {
+      this.reportError(new Error(`${this} command submission: ${error.message}`), this)();
+      this.debug();
+    });
+  }
+
+  // WebGPU specific
+
+  pushErrorScope(scope: 'validation' | 'out-of-memory'): void {
+    this.handle.pushErrorScope(scope);
+  }
+
+  popErrorScope(handler: (error: GPUError) => void): void {
+    this.handle.popErrorScope().then((error: GPUError | null) => {
+      if (error) {
+        handler(error);
+      }
+    });
   }
 
   // PRIVATE METHODS
@@ -284,63 +304,4 @@ export class WebGPUDevice extends Device {
     }
     return capabilities;
   }
-
-  // DEPRECATED METHODS
-
-  // @deprecated
-  copyExternalImageToTexture(options: {
-    texture: Texture;
-    mipLevel?: number;
-    aspect?: 'all' | 'stencil-only' | 'depth-only';
-    colorSpace?: 'display-p3' | 'srgb';
-    premultipliedAlpha?: boolean;
-
-    source: ImageBitmap | HTMLVideoElement | HTMLCanvasElement | OffscreenCanvas;
-    sourceX?: number;
-    sourceY?: number;
-
-    width?: number;
-    height?: number;
-    depth?: number;
-  }): void {
-    const {
-      source,
-      sourceX = 0,
-      sourceY = 0,
-
-      texture,
-      mipLevel = 0,
-      aspect = 'all',
-      colorSpace = 'display-p3',
-      premultipliedAlpha = false,
-      // destinationX,
-      // destinationY,
-      // desitnationZ,
-
-      width = texture.width,
-      height = texture.height,
-      depth = 1
-    } = options;
-
-    const webGpuTexture = texture as WebGPUTexture;
-
-    this.handle?.queue.copyExternalImageToTexture(
-      // source: GPUImageCopyExternalImage
-      {
-        source,
-        origin: [sourceX, sourceY]
-      },
-      // destination: GPUImageCopyTextureTagged
-      {
-        texture: webGpuTexture.handle,
-        origin: [0, 0, 0], // [x, y, z],
-        mipLevel,
-        aspect,
-        colorSpace,
-        premultipliedAlpha
-      },
-      // copySize: GPUExtent3D
-      [width, height, depth]
-    );
-  }
 }