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

package/src/adapter/resources/webgpu-buffer.ts

@@ -2,12 +2,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Buffer, BufferProps} from '@luma.gl/core';
-import type {WebGPUDevice} from '../webgpu-device';
-
-function getByteLength(props: BufferProps): number {
-  return props.byteLength || props.data?.byteLength || 0;
-}
+import {log, Buffer, type BufferProps, type BufferMapCallback} from '@luma.gl/core';
+import {type WebGPUDevice} from '../webgpu-device';
 
 export class WebGPUBuffer extends Buffer {
   readonly device: WebGPUDevice;
@@ -18,30 +14,51 @@ export class WebGPUBuffer extends Buffer {
     super(device, props);
     this.device = device;
 
-    this.byteLength = getByteLength(props);
-    const mapBuffer = Boolean(props.data);
+    this.byteLength = props.byteLength || props.data?.byteLength || 0;
+    const mappedAtCreation = Boolean(this.props.onMapped || props.data);
 
     // WebGPU buffers must be aligned to 4 bytes
     const size = Math.ceil(this.byteLength / 4) * 4;
 
+    this.device.pushErrorScope('out-of-memory');
+    this.device.pushErrorScope('validation');
     this.handle =
       this.props.handle ||
       this.device.handle.createBuffer({
-        size,
+        label: this.props.id,
         // usage defaults to vertex
         usage: this.props.usage || GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-        mappedAtCreation: this.props.mappedAtCreation || mapBuffer,
-        label: this.props.id
+        mappedAtCreation,
+        size
       });
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`${this} creation failed ${error.message}`), this)();
+      this.device.debug();
+    });
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`${this} out of memory: ${error.message}`), this)();
+      this.device.debug();
+    });
 
-    if (props.data) {
-      this._writeMapped(props.data);
-      // this.handle.writeAsync({data: props.data, map: false, unmap: false});
-    }
-
-    if (mapBuffer && !props.mappedAtCreation) {
-      this.handle.unmap();
+    this.device.pushErrorScope('validation');
+    if (props.data || props.onMapped) {
+      try {
+        const arrayBuffer = this.handle.getMappedRange();
+        if (props.data) {
+          const typedArray = props.data;
+          // @ts-expect-error
+          new typedArray.constructor(arrayBuffer).set(typedArray);
+        } else {
+          props.onMapped?.(arrayBuffer, 'mapped');
+        }
+      } finally {
+        this.handle.unmap();
+      }
     }
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`${this} creation failed ${error.message}`), this)();
+      this.device.debug();
+    });
   }
 
   override destroy(): void {
@@ -50,111 +67,155 @@ export class WebGPUBuffer extends Buffer {
     this.handle = null;
   }
 
-  // WebGPU provides multiple ways to write a buffer...
-  override write(data: ArrayBufferView, byteOffset = 0) {
+  write(data: ArrayBufferLike | ArrayBufferView | SharedArrayBuffer, byteOffset = 0) {
+    const arrayBuffer = ArrayBuffer.isView(data) ? data.buffer : data;
+    const dataByteOffset = ArrayBuffer.isView(data) ? data.byteOffset : 0;
+
+    this.device.pushErrorScope('validation');
+
+    // WebGPU provides multiple ways to write a buffer, this is the simplest API
     this.device.handle.queue.writeBuffer(
       this.handle,
       byteOffset,
-      data.buffer,
-      data.byteOffset,
+      arrayBuffer,
+      dataByteOffset,
       data.byteLength
     );
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`${this}.write() ${error.message}`), this)();
+      this.device.debug();
+    });
   }
 
-  override async readAsync(
+  async mapAndWriteAsync(
+    callback: BufferMapCallback<void>,
     byteOffset: number = 0,
-    byteLength: number = this.byteLength
-  ): Promise<Uint8Array> {
-    // We need MAP_READ flag, but only COPY_DST buffers can have MAP_READ flag, so we need to create a temp buffer
-    const tempBuffer = new WebGPUBuffer(this.device, {
-      usage: Buffer.MAP_READ | Buffer.COPY_DST,
-      byteLength
-    });
+    byteLength: number = this.byteLength - byteOffset
+  ): Promise<void> {
+    // Unless the application created and supplied a mappable buffer, a staging buffer is needed
+    const isMappable = (this.usage & Buffer.MAP_WRITE) !== 0;
+    const mappableBuffer: WebGPUBuffer | null = !isMappable
+      ? this._getMappableBuffer(Buffer.MAP_WRITE | Buffer.COPY_SRC, 0, this.byteLength)
+      : null;
 
-    // Now do a GPU-side copy into the temp buffer we can actually read.
-    // TODO - we are spinning up an independent command queue here, what does this mean
-    const commandEncoder = this.device.handle.createCommandEncoder();
-    commandEncoder.copyBufferToBuffer(this.handle, byteOffset, tempBuffer.handle, 0, byteLength);
-    this.device.handle.queue.submit([commandEncoder.finish()]);
+    const writeBuffer = mappableBuffer || this;
 
+    // const isWritable = this.usage & Buffer.MAP_WRITE;
     // Map the temp buffer and read the data.
-    await tempBuffer.handle.mapAsync(GPUMapMode.READ, byteOffset, byteLength);
-    const arrayBuffer = tempBuffer.handle.getMappedRange().slice(0);
-    tempBuffer.handle.unmap();
-    tempBuffer.destroy();
-
-    return new Uint8Array(arrayBuffer);
+    this.device.pushErrorScope('validation');
+    try {
+      await this.device.handle.queue.onSubmittedWorkDone();
+      await writeBuffer.handle.mapAsync(GPUMapMode.WRITE, byteOffset, byteLength);
+      const arrayBuffer = writeBuffer.handle.getMappedRange(byteOffset, byteLength);
+      // eslint-disable-next-line @typescript-eslint/await-thenable
+      await callback(arrayBuffer, 'mapped');
+      writeBuffer.handle.unmap();
+      if (mappableBuffer) {
+        this._copyBuffer(mappableBuffer, byteOffset, byteLength);
+      }
+    } finally {
+      this.device.popErrorScope((error: GPUError) => {
+        this.device.reportError(new Error(`${this}.mapAndWriteAsync() ${error.message}`), this)();
+        this.device.debug();
+      });
+      mappableBuffer?.destroy();
+    }
   }
 
-  _writeMapped<TypedArray>(typedArray: TypedArray): void {
-    const arrayBuffer = this.handle.getMappedRange();
-    // @ts-expect-error
-    new typedArray.constructor(arrayBuffer).set(typedArray);
+  async readAsync(
+    byteOffset: number = 0,
+    byteLength = this.byteLength - byteOffset
+  ): Promise<Uint8Array> {
+    return this.mapAndReadAsync(
+      arrayBuffer => new Uint8Array(arrayBuffer.slice(0)),
+      byteOffset,
+      byteLength
+    );
   }
 
-  // WEBGPU API
-
-  mapAsync(mode: number, offset: number = 0, size?: number): Promise<void> {
-    return this.handle.mapAsync(mode, offset, size);
-  }
+  async mapAndReadAsync<T>(
+    callback: BufferMapCallback<T>,
+    byteOffset = 0,
+    byteLength = this.byteLength - byteOffset
+  ): Promise<T> {
+    if (byteOffset % 8 !== 0 || byteLength % 4 !== 0) {
+      throw new Error('byteOffset must be multiple of 8 and byteLength multiple of 4');
+    }
+    if (byteOffset + byteLength > this.handle.size) {
+      throw new Error('Mapping range exceeds buffer size');
+    }
 
-  getMappedRange(offset: number = 0, size?: number): ArrayBuffer {
-    return this.handle.getMappedRange(offset, size);
-  }
+    // Unless the application created and supplied a mappable buffer, a staging buffer is needed
+    const isMappable = (this.usage & Buffer.MAP_READ) !== 0;
+    const mappableBuffer: WebGPUBuffer | null = !isMappable
+      ? this._getMappableBuffer(Buffer.MAP_READ | Buffer.COPY_DST, 0, this.byteLength)
+      : null;
 
-  unmap(): void {
-    this.handle.unmap();
-  }
-}
+    const readBuffer = mappableBuffer || this;
 
-/*
-// Convenience API
-  /** Read data from the buffer *
-  async readAsync(options: {
-    byteOffset?: number,
-    byteLength?: number,
-    map?: boolean,
-    unmap?: boolean
-  }): Promise<ArrayBuffer> {
-    if (options.map ?? true) {
-      await this.mapAsync(Buffer.MAP_READ, options.byteOffset, options.byteLength);
-    }
-    const arrayBuffer = this.getMappedRange(options.byteOffset, options.byteLength);
-    if (options.unmap ?? true) {
-      this.unmap();
+    // Map the temp buffer and read the data.
+    this.device.pushErrorScope('validation');
+    try {
+      await this.device.handle.queue.onSubmittedWorkDone();
+      if (mappableBuffer) {
+        mappableBuffer._copyBuffer(this);
+      }
+      await readBuffer.handle.mapAsync(GPUMapMode.READ, byteOffset, byteLength);
+      const arrayBuffer = readBuffer.handle.getMappedRange(byteOffset, byteLength);
+      // eslint-disable-next-line @typescript-eslint/await-thenable
+      const result = await callback(arrayBuffer, 'mapped');
+      readBuffer.handle.unmap();
+      return result;
+    } finally {
+      this.device.popErrorScope((error: GPUError) => {
+        this.device.reportError(new Error(`${this}.mapAndReadAsync() ${error.message}`), this)();
+        this.device.debug();
+      });
+      mappableBuffer?.destroy();
     }
-    return arrayBuffer;
   }
 
-  /** Write data to the buffer *
-  async writeAsync(options: {
-    data: ArrayBuffer,
-    byteOffset?: number,
-    byteLength?: number,
-    map?: boolean,
-    unmap?: boolean
-  }): Promise<void> {
-    if (options.map ?? true) {
-      await this.mapAsync(Buffer.MAP_WRITE, options.byteOffset, options.byteLength);
-    }
-    const arrayBuffer = this.getMappedRange(options.byteOffset, options.byteLength);
-    const destArray = new Uint8Array(arrayBuffer);
-    const srcArray = new Uint8Array(options.data);
-    destArray.set(srcArray);
-    if (options.unmap ?? true) {
-      this.unmap();
-    }
+  readSyncWebGL(byteOffset?: number, byteLength?: number): Uint8Array<ArrayBuffer> {
+    throw new Error('Not implemented');
   }
-  */
-
-// Mapped API (WebGPU)
 
-/** Maps the memory so that it can be read *
-  // abstract mapAsync(mode, byteOffset, byteLength): Promise<void>
-
-  /** Get the mapped range of data for reading or writing *
-  // abstract getMappedRange(byteOffset, byteLength): ArrayBuffer;
+  // INTERNAL METHODS
+
+  /**
+   * @todo - A small set of mappable buffers could be cached on the device,
+   * however this goes against the goal of keeping core as a thin GPU API layer.
+   */
+  protected _getMappableBuffer(
+    usage: number, // Buffer.MAP_READ | Buffer.MAP_WRITE,
+    byteOffset: number,
+    byteLength: number
+  ): WebGPUBuffer {
+    log.warn(`${this} is not readable, creating a temporary Buffer`);
+    const readableBuffer = new WebGPUBuffer(this.device, {usage, byteLength});
+
+    return readableBuffer;
+  }
 
-  /** unmap makes the contents of the buffer available to the GPU again *
-  // abstract unmap(): void;
-*/
+  protected _copyBuffer(
+    sourceBuffer: WebGPUBuffer,
+    byteOffset: number = 0,
+    byteLength: number = this.byteLength
+  ) {
+    // Now do a GPU-side copy into the temp buffer we can actually read.
+    // TODO - we are spinning up an independent command queue here, what does this mean
+    this.device.pushErrorScope('validation');
+    const commandEncoder = this.device.handle.createCommandEncoder();
+    commandEncoder.copyBufferToBuffer(
+      sourceBuffer.handle,
+      byteOffset,
+      this.handle,
+      byteOffset,
+      byteLength
+    );
+    this.device.handle.queue.submit([commandEncoder.finish()]);
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`${this}._getReadableBuffer() ${error.message}`), this)();
+      this.device.debug();
+    });
+  }
+}

package/src/adapter/resources/webgpu-command-buffer.ts

@@ -0,0 +1,24 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {CommandBufferProps} from '@luma.gl/core';
+import {CommandBuffer} from '@luma.gl/core';
+
+import {WebGPUDevice} from '../webgpu-device';
+import type {WebGPUCommandEncoder} from './webgpu-command-encoder';
+
+export class WebGPUCommandBuffer extends CommandBuffer {
+  readonly device: WebGPUDevice;
+  readonly handle: GPUCommandBuffer;
+
+  constructor(commandEncoder: WebGPUCommandEncoder, props: CommandBufferProps) {
+    super(commandEncoder.device, {});
+    this.device = commandEncoder.device;
+    this.handle =
+      this.props.handle ||
+      commandEncoder.handle.finish({
+        label: props?.id || 'unnamed-command-buffer'
+      });
+  }
+}

package/src/adapter/resources/webgpu-command-encoder.ts

@@ -2,10 +2,18 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import type {
+  RenderPassProps,
+  ComputePassProps,
+  CopyTextureToTextureOptions,
+  CopyTextureToBufferOptions
+} from '@luma.gl/core';
 import {CommandEncoder, CommandEncoderProps, Buffer, Texture} from '@luma.gl/core';
-import type {CopyTextureToTextureOptions, CopyTextureToBufferOptions} from '@luma.gl/core';
 import {WebGPUDevice} from '../webgpu-device';
+import {WebGPUCommandBuffer} from './webgpu-command-buffer';
 import {WebGPUBuffer} from './webgpu-buffer';
+import {WebGPURenderPass} from './webgpu-render-pass';
+import {WebGPUComputePass} from './webgpu-compute-pass';
 import {WebGPUTexture} from './webgpu-texture';
 import {WebGPUQuerySet} from './webgpu-query-set';
 
@@ -13,12 +21,13 @@ export class WebGPUCommandEncoder extends CommandEncoder {
   readonly device: WebGPUDevice;
   readonly handle: GPUCommandEncoder;
 
-  constructor(device: WebGPUDevice, props: CommandEncoderProps) {
+  constructor(device: WebGPUDevice, props: CommandEncoderProps = {}) {
     super(device, props);
     this.device = device;
     this.handle =
       props.handle ||
       this.device.handle.createCommandEncoder({
+        label: this.props.id
         // TODO was this removed in standard?
         // measureExecutionTime: this.props.measureExecutionTime
       });
@@ -27,8 +36,29 @@ export class WebGPUCommandEncoder extends CommandEncoder {
 
   override destroy(): void {}
 
-  finish(options?: {id?: string}): GPUCommandBuffer {
-    return this.finish(options);
+  finish(props?: CommandEncoderProps): WebGPUCommandBuffer {
+    this.device.pushErrorScope('validation');
+    const commandBuffer = new WebGPUCommandBuffer(this, {
+      id: props?.id || 'unnamed-command-buffer'
+    });
+    this.device.popErrorScope((error: GPUError) => {
+      const message = `${this} command encoding: ${error.message}. Maybe add depthWriteEnabled to your Model?`;
+      this.device.reportError(new Error(message), this)();
+      this.device.debug();
+    });
+    return commandBuffer;
+  }
+
+  /**
+   * Allows a render pass to begin against a canvas context
+   * @todo need to support a "Framebuffer" equivalent (aka preconfigured RenderPassDescriptors?).
+   */
+  beginRenderPass(props: RenderPassProps): WebGPURenderPass {
+    return new WebGPURenderPass(this.device, props);
+  }
+
+  beginComputePass(props: ComputePassProps): WebGPUComputePass {
+    return new WebGPUComputePass(this.device, props);
   }
 
   // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;

package/src/adapter/resources/webgpu-compute-pass.ts

@@ -33,7 +33,7 @@ export class WebGPUComputePass extends ComputePass {
 
     this.handle =
       this.props.handle ||
-      device.commandEncoder?.beginComputePass({
+      device.commandEncoder.handle.beginComputePass({
         label: this.props.id,
         timestampWrites
       });

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

@@ -11,8 +11,8 @@ import {WebGPUShader} from './webgpu-shader';
 
 /** Creates a new compute pipeline when parameters change */
 export class WebGPUComputePipeline extends ComputePipeline {
-  device: WebGPUDevice;
-  handle: GPUComputePipeline;
+  readonly device: WebGPUDevice;
+  readonly handle: GPUComputePipeline;
 
   /** For internal use to create BindGroups */
   private _bindGroupLayout: GPUBindGroupLayout | null = null;

package/src/adapter/resources/webgpu-external-texture.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {ExternalTexture, ExternalTextureProps, Sampler, SamplerProps} from '@luma.gl/core';
+import {ExternalTexture, ExternalTextureProps, SamplerProps} from '@luma.gl/core';
 import type {WebGPUDevice} from '../webgpu-device';
 import {WebGPUSampler} from './webgpu-sampler';
 
@@ -37,7 +37,7 @@ export class WebGPUExternalTexture extends ExternalTexture {
   }
 
   /** Set default sampler */
-  setSampler(sampler: Sampler | SamplerProps): this {
+  setSampler(sampler: WebGPUSampler | SamplerProps): this {
     // We can accept a sampler instance or set of props;
     this.sampler =
       sampler instanceof WebGPUSampler ? sampler : new WebGPUSampler(this.device, sampler);

package/src/adapter/resources/webgpu-framebuffer.ts

@@ -13,9 +13,10 @@ import {WebGPUTextureView} from '../resources/webgpu-texture-view';
  */
 export class WebGPUFramebuffer extends Framebuffer {
   readonly device: WebGPUDevice;
+  readonly handle = null;
 
-  colorAttachments: WebGPUTextureView[] = [];
-  depthStencilAttachment: WebGPUTextureView | null = null;
+  readonly colorAttachments: WebGPUTextureView[] = [];
+  readonly depthStencilAttachment: WebGPUTextureView | null = null;
 
   constructor(device: WebGPUDevice, props: FramebufferProps) {
     super(device, props);

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

@@ -1,4 +1,9 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {
+  log,
   PipelineLayout,
   PipelineLayoutProps,
   StorageBufferBindingLayout,
@@ -7,8 +12,8 @@ import {
 import {WebGPUDevice} from '../webgpu-device';
 
 export class WebGPUPipelineLayout extends PipelineLayout {
-  device: WebGPUDevice;
-  handle: GPUPipelineLayout;
+  readonly device: WebGPUDevice;
+  readonly handle: GPUPipelineLayout;
 
   constructor(device: WebGPUDevice, props: PipelineLayoutProps) {
     super(device, props);
@@ -101,7 +106,7 @@ export class WebGPUPipelineLayout extends PipelineLayout {
         }
 
         default: {
-          console.warn('unhandled binding type when creating pipeline descriptor');
+          log.warn('unhandled binding type when creating pipeline descriptor')();
         }
       }
 

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

@@ -47,12 +47,12 @@ export class WebGPURenderPass extends RenderPass {
       throw new Error('commandEncoder not available');
     }
 
-    this.device.handle.pushErrorScope('validation');
-    this.handle = this.props.handle || device.commandEncoder.beginRenderPass(renderPassDescriptor);
-    this.device.handle.popErrorScope().then((error: GPUError | null) => {
-      if (error) {
-        log.error(`${this} creation failed:\n"${error.message}"`, this)();
-      }
+    this.device.pushErrorScope('validation');
+    this.handle =
+      this.props.handle || device.commandEncoder.handle.beginRenderPass(renderPassDescriptor);
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`${this} creation failed:\n"${error.message}"`), this)();
+      this.device.debug();
     });
     this.handle.label = this.props.id;
     log.groupCollapsed(3, `new WebGPURenderPass(${this.id})`)();
@@ -68,7 +68,12 @@ export class WebGPURenderPass extends RenderPass {
 
   setPipeline(pipeline: RenderPipeline): void {
     this.pipeline = pipeline as WebGPURenderPipeline;
+    this.device.pushErrorScope('validation');
     this.handle.setPipeline(this.pipeline.handle);
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`${this} setPipeline failed:\n"${error.message}"`), this)();
+      this.device.debug();
+    });
   }
 
   /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */

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

@@ -19,17 +19,21 @@ import type {WebGPURenderPass} from './webgpu-render-pass';
 
 /** Creates a new render pipeline when parameters change */
 export class WebGPURenderPipeline extends RenderPipeline {
-  device: WebGPUDevice;
-  handle: GPURenderPipeline;
+  readonly device: WebGPUDevice;
+  readonly handle: GPURenderPipeline;
 
-  vs: WebGPUShader;
-  fs: WebGPUShader | null = null;
+  readonly vs: WebGPUShader;
+  readonly fs: WebGPUShader | null = null;
 
   /** For internal use to create BindGroups */
   private _bindings: Record<string, Binding>;
   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;
@@ -40,12 +44,11 @@ export class WebGPURenderPipeline extends RenderPipeline {
       log.probe(1, JSON.stringify(descriptor, null, 2))();
       log.groupEnd(1)();
 
-      this.device.handle.pushErrorScope('validation');
+      this.device.pushErrorScope('validation');
       this.handle = this.device.handle.createRenderPipeline(descriptor);
-      this.device.handle.popErrorScope().then((error: GPUError | null) => {
-        if (error) {
-          log.error(`${this} creation failed:\n"${error.message}"`, this, this.props.vs?.source)();
-        }
+      this.device.popErrorScope((error: GPUError) => {
+        this.device.reportError(new Error(`${this} creation failed:\n"${error.message}"`), this)();
+        this.device.debug();
       });
     }
     this.handle.label = this.props.id;
@@ -68,6 +71,12 @@ 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);
   }
 
@@ -86,12 +95,11 @@ export class WebGPURenderPipeline extends RenderPipeline {
     const webgpuRenderPass = options.renderPass as WebGPURenderPass;
 
     // Set pipeline
-    this.device.handle.pushErrorScope('validation');
+    this.device.pushErrorScope('validation');
     webgpuRenderPass.handle.setPipeline(this.handle);
-    this.device.handle.popErrorScope().then((error: GPUError | null) => {
-      if (error) {
-        log.error(`${this} setPipeline failed:\n"${error.message}"`, this)();
-      }
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`${this} setPipeline failed:\n"${error.message}"`), this)();
+      this.device.debug();
     });
 
     // Set bindings (uniform buffers, textures etc)
@@ -156,16 +164,22 @@ 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: [
-        {
-          // TODO exclamation mark hack!
-          format: getWebGPUTextureFormat(this.device.getCanvasContext().format)
-        }
-      ]
+      targets
     };
 
     const layout = this.device.createPipelineLayout({
@@ -182,11 +196,12 @@ export class WebGPURenderPipeline extends RenderPipeline {
       layout: layout.handle
     };
 
-    if (this.props.parameters.depthWriteEnabled && this.props.parameters.depthCompare) {
+    // 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: 'depth24plus',
-        depthWriteEnabled: this.props.parameters.depthWriteEnabled,
-        depthCompare: this.props.parameters.depthCompare
+        format: getWebGPUTextureFormat(depthFormat)
       };
     }
 

package/src/adapter/resources/webgpu-sampler.ts

@@ -35,7 +35,7 @@ export class WebGPUSampler extends Sampler {
       samplerDescriptor.mipmapFilter = props.mipmapFilter;
     }
 
-    this.handle = this.handle || this.device.handle.createSampler(samplerDescriptor);
+    this.handle = props.handle || this.device.handle.createSampler(samplerDescriptor);
     this.handle.label = this.props.id;
   }