@luma.gl/webgpu 9.2.6 → 9.3.0-alpha.10

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

@@ -3,12 +3,14 @@
 // Copyright (c) vis.gl contributors
 
 import type {
+  CommandBufferProps,
   RenderPassProps,
   ComputePassProps,
+  CopyBufferToTextureOptions,
   CopyTextureToTextureOptions,
   CopyTextureToBufferOptions
 } from '@luma.gl/core';
-import {CommandEncoder, CommandEncoderProps, Buffer, Texture} from '@luma.gl/core';
+import {CommandEncoder, CommandEncoderProps, Buffer} from '@luma.gl/core';
 import {WebGPUDevice} from '../webgpu-device';
 import {WebGPUCommandBuffer} from './webgpu-command-buffer';
 import {WebGPUBuffer} from './webgpu-buffer';
@@ -34,9 +36,11 @@ export class WebGPUCommandEncoder extends CommandEncoder {
     this.handle.label = this.props.id;
   }
 
-  override destroy(): void {}
+  override destroy(): void {
+    this.destroyResource();
+  }
 
-  finish(props?: CommandEncoderProps): WebGPUCommandBuffer {
+  finish(props?: CommandBufferProps): WebGPUCommandBuffer {
     this.device.pushErrorScope('validation');
     const commandBuffer = new WebGPUCommandBuffer(this, {
       id: props?.id || 'unnamed-command-buffer'
@@ -46,6 +50,7 @@ export class WebGPUCommandEncoder extends CommandEncoder {
       this.device.reportError(new Error(message), this)();
       this.device.debug();
     });
+    this.destroy();
     return commandBuffer;
   }
 
@@ -53,19 +58,26 @@ export class WebGPUCommandEncoder extends CommandEncoder {
    * 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);
+  beginRenderPass(props: RenderPassProps = {}): WebGPURenderPass {
+    return new WebGPURenderPass(
+      this.device,
+      this._applyTimeProfilingToPassProps(props),
+      this.handle
+    );
   }
 
-  beginComputePass(props: ComputePassProps): WebGPUComputePass {
-    return new WebGPUComputePass(this.device, props);
+  beginComputePass(props: ComputePassProps = {}): WebGPUComputePass {
+    return new WebGPUComputePass(
+      this.device,
+      this._applyTimeProfilingToPassProps(props),
+      this.handle
+    );
   }
 
   // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
   // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
 
-  copyBufferToBuffer(options: // CopyBufferToBufferOptions
-  {
+  copyBufferToBuffer(options: {
     sourceBuffer: Buffer;
     sourceOffset?: number;
     destinationBuffer: Buffer;
@@ -73,74 +85,119 @@ export class WebGPUCommandEncoder extends CommandEncoder {
     size?: number;
   }): void {
     const webgpuSourceBuffer = options.sourceBuffer as WebGPUBuffer;
-    const WebGPUDestinationBuffer = options.destinationBuffer as WebGPUBuffer;
+    const webgpuDestinationBuffer = options.destinationBuffer as WebGPUBuffer;
     this.handle.copyBufferToBuffer(
       webgpuSourceBuffer.handle,
       options.sourceOffset ?? 0,
-      WebGPUDestinationBuffer.handle,
+      webgpuDestinationBuffer.handle,
       options.destinationOffset ?? 0,
       options.size ?? 0
     );
   }
 
-  copyBufferToTexture(options: // CopyBufferToTextureOptions
-  {
-    sourceBuffer: Buffer;
-    offset?: number;
-    bytesPerRow: number;
-    rowsPerImage: number;
-
-    destinationTexture: Texture;
-    mipLevel?: number;
-    aspect?: 'all' | 'stencil-only' | 'depth-only';
-
-    origin?: number[] | [number, number, number];
-    extent?: number[] | [number, number, number];
-  }): void {
+  copyBufferToTexture(options: CopyBufferToTextureOptions): void {
     const webgpuSourceBuffer = options.sourceBuffer as WebGPUBuffer;
-    const WebGPUDestinationTexture = options.destinationTexture as WebGPUTexture;
+    const webgpuDestinationTexture = options.destinationTexture as WebGPUTexture;
+    const copyOrigin = options.origin ?? [0, 0, 0];
+    const copySize = options.size;
     this.handle.copyBufferToTexture(
       {
         buffer: webgpuSourceBuffer.handle,
-        offset: options.offset ?? 0,
+        offset: options.byteOffset ?? 0,
         bytesPerRow: options.bytesPerRow,
         rowsPerImage: options.rowsPerImage
       },
       {
-        texture: WebGPUDestinationTexture.handle,
+        texture: webgpuDestinationTexture.handle,
         mipLevel: options.mipLevel ?? 0,
-        origin: options.origin ?? {}
-        // aspect: options.aspect
+        origin: {
+          x: copyOrigin[0] ?? 0,
+          y: copyOrigin[1] ?? 0,
+          z: copyOrigin[2] ?? 0
+        },
+        aspect: options.aspect
       },
       {
-        // @ts-ignore
-        width: options.extent?.[0],
-        height: options.extent?.[1],
-        depthOrArrayLayers: options.extent?.[2]
+        width: copySize[0],
+        height: copySize[1],
+        depthOrArrayLayers: copySize[2]
       }
     );
   }
 
   copyTextureToBuffer(options: CopyTextureToBufferOptions): void {
-    // this.handle.copyTextureToBuffer(
-    //   // source
-    //   {},
-    //   // destination
-    //   {},
-    //   // copySize
-    //   {}
-    // );
+    const {
+      sourceTexture,
+      destinationBuffer,
+      origin = [0, 0, 0],
+      byteOffset = 0,
+      width,
+      height,
+      depthOrArrayLayers,
+      mipLevel,
+      aspect
+    } = options;
+    const webgpuSourceTexture = sourceTexture as WebGPUTexture;
+    webgpuSourceTexture.copyToBuffer(
+      this.handle,
+      {
+        x: origin[0] ?? 0,
+        y: origin[1] ?? 0,
+        z: origin[2] ?? 0,
+        width,
+        height,
+        depthOrArrayLayers,
+        mipLevel,
+        aspect,
+        byteOffset,
+        bytesPerRow: options.bytesPerRow,
+        rowsPerImage: options.rowsPerImage
+      },
+      destinationBuffer
+    );
   }
 
   copyTextureToTexture(options: CopyTextureToTextureOptions): void {
-    // this.handle.copyTextureToTexture(
-    //   // source
-    //   {},
-    //   // destination
-    //   {},
-    //   // copySize
-    //   {}
-    // );
+    const webgpuSourceTexture = options.sourceTexture as WebGPUTexture;
+    const webgpuDestinationTexture = options.destinationTexture as WebGPUTexture;
+    const sourceRegion = webgpuSourceTexture._normalizeTextureReadOptions({
+      x: options.origin?.[0] ?? 0,
+      y: options.origin?.[1] ?? 0,
+      z: options.origin?.[2] ?? 0,
+      width: options.width,
+      height: options.height,
+      depthOrArrayLayers: options.depthOrArrayLayers,
+      mipLevel: options.mipLevel ?? 0,
+      aspect: options.aspect ?? 'all'
+    });
+
+    this.handle.copyTextureToTexture(
+      {
+        texture: webgpuSourceTexture.handle,
+        mipLevel: sourceRegion.mipLevel,
+        origin: {
+          x: sourceRegion.x,
+          y: sourceRegion.y,
+          z: sourceRegion.z
+        },
+        aspect: sourceRegion.aspect
+      },
+      {
+        texture: webgpuDestinationTexture.handle,
+        mipLevel: options.destinationMipLevel ?? 0,
+        origin: {
+          x: options.destinationOrigin?.[0] ?? 0,
+          y: options.destinationOrigin?.[1] ?? 0,
+          z: options.destinationOrigin?.[2] ?? 0
+        },
+        aspect: options.destinationAspect ?? sourceRegion.aspect
+      },
+      {
+        width: sourceRegion.width,
+        height: sourceRegion.height,
+        depthOrArrayLayers: sourceRegion.depthOrArrayLayers
+      }
+    );
   }
 
   override pushDebugGroup(groupLabel: string): void {
@@ -174,6 +231,28 @@ export class WebGPUCommandEncoder extends CommandEncoder {
       options?.destinationOffset || 0
     );
   }
+
+  writeTimestamp(querySet: WebGPUQuerySet, queryIndex: number): void {
+    querySet._invalidateResults();
+    const writeTimestamp = (
+      this.handle as GPUCommandEncoder & {
+        writeTimestamp?: (querySet: GPUQuerySet, queryIndex: number) => void;
+      }
+    ).writeTimestamp;
+
+    if (writeTimestamp) {
+      writeTimestamp.call(this.handle, querySet.handle, queryIndex);
+      return;
+    }
+
+    const computePass = this.handle.beginComputePass({
+      timestampWrites: {
+        querySet: querySet.handle,
+        beginningOfPassWriteIndex: queryIndex
+      }
+    });
+    computePass.end();
+  }
 }
 
 /*

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

@@ -2,7 +2,15 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {ComputePass, ComputePassProps, ComputePipeline, Buffer, Binding} from '@luma.gl/core';
+import {
+  ComputePass,
+  ComputePassProps,
+  ComputePipeline,
+  Buffer,
+  Bindings,
+  BindingsByGroup,
+  _getDefaultBindGroupFactory
+} from '@luma.gl/core';
 import {WebGPUDevice} from '../webgpu-device';
 import {WebGPUBuffer} from './webgpu-buffer';
 import {WebGPUComputePipeline} from './webgpu-compute-pipeline';
@@ -14,53 +22,80 @@ export class WebGPUComputePass extends ComputePass {
 
   _webgpuPipeline: WebGPUComputePipeline | null = null;
 
-  constructor(device: WebGPUDevice, props: ComputePassProps) {
+  constructor(
+    device: WebGPUDevice,
+    props: ComputePassProps = {},
+    commandEncoder: GPUCommandEncoder = device.commandEncoder.handle
+  ) {
     super(device, props);
     this.device = device;
+    const {props: computePassProps} = this;
 
     // Set up queries
     let timestampWrites: GPUComputePassTimestampWrites | undefined;
-    if (device.features.has('timestamp-query')) {
-      const webgpuQuerySet = props.timestampQuerySet as WebGPUQuerySet;
+    if (computePassProps.timestampQuerySet) {
+      const webgpuQuerySet = computePassProps.timestampQuerySet as WebGPUQuerySet;
       if (webgpuQuerySet) {
+        webgpuQuerySet._invalidateResults();
         timestampWrites = {
           querySet: webgpuQuerySet.handle,
-          beginningOfPassWriteIndex: props.beginTimestampIndex,
-          endOfPassWriteIndex: props.endTimestampIndex
+          beginningOfPassWriteIndex: computePassProps.beginTimestampIndex,
+          endOfPassWriteIndex: computePassProps.endTimestampIndex
         };
       }
     }
 
     this.handle =
       this.props.handle ||
-      device.commandEncoder.handle.beginComputePass({
+      commandEncoder.beginComputePass({
         label: this.props.id,
         timestampWrites
       });
   }
 
   /** @note no WebGPU destroy method, just gc */
-  override destroy(): void {}
+  override destroy(): void {
+    this.destroyResource();
+  }
 
   end(): void {
+    if (this.destroyed) {
+      return;
+    }
     this.handle.end();
+    this.destroy();
   }
 
   setPipeline(pipeline: ComputePipeline): void {
     const wgpuPipeline = pipeline as WebGPUComputePipeline;
     this.handle.setPipeline(wgpuPipeline.handle);
     this._webgpuPipeline = wgpuPipeline;
-    this.setBindings([]);
+    const bindGroups = _getDefaultBindGroupFactory(this.device).getBindGroups(
+      this._webgpuPipeline,
+      this._webgpuPipeline._getBindingsByGroupWebGPU(),
+      this._webgpuPipeline._getBindGroupCacheKeysWebGPU()
+    );
+    for (const [group, bindGroup] of Object.entries(bindGroups)) {
+      if (bindGroup) {
+        this.handle.setBindGroup(Number(group), bindGroup as GPUBindGroup);
+      }
+    }
   }
 
   /**
    * Sets an array of bindings (uniform buffers, samplers, textures, ...)
    * TODO - still some API confusion - does this method go here or on the pipeline?
    */
-  setBindings(bindings: Binding[]): void {
-    // @ts-expect-error
-    const bindGroup = this._webgpuPipeline._getBindGroup();
-    this.handle.setBindGroup(0, bindGroup);
+  setBindings(bindings: Bindings | BindingsByGroup): void {
+    const bindGroups =
+      (this._webgpuPipeline &&
+        _getDefaultBindGroupFactory(this.device).getBindGroups(this._webgpuPipeline, bindings)) ||
+      {};
+    for (const [group, bindGroup] of Object.entries(bindGroups)) {
+      if (bindGroup) {
+        this.handle.setBindGroup(Number(group), bindGroup as GPUBindGroup);
+      }
+    }
   }
 
   /**

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

@@ -2,11 +2,19 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {ComputePipeline, ComputePipelineProps, Binding} from '@luma.gl/core';
-import {getBindGroup} from '../helpers/get-bind-group';
+import {
+  ComputePipeline,
+  ComputePipelineProps,
+  Bindings,
+  BindingsByGroup,
+  _getDefaultBindGroupFactory,
+  normalizeBindingsByGroup
+} from '@luma.gl/core';
 import {WebGPUDevice} from '../webgpu-device';
 import {WebGPUShader} from './webgpu-shader';
 
+const EMPTY_BIND_GROUPS: BindingsByGroup = {};
+
 // COMPUTE PIPELINE
 
 /** Creates a new compute pipeline when parameters change */
@@ -14,11 +22,8 @@ export class WebGPUComputePipeline extends ComputePipeline {
   readonly device: WebGPUDevice;
   readonly handle: GPUComputePipeline;
 
-  /** For internal use to create BindGroups */
-  private _bindGroupLayout: GPUBindGroupLayout | null = null;
-  private _bindGroup: GPUBindGroup | null = null;
-  /** For internal use to create BindGroups */
-  private _bindings: Record<string, Binding> = {};
+  private _bindingsByGroup: BindingsByGroup;
+  private _bindGroupCacheKeysByGroup: Partial<Record<number, object>>;
 
   constructor(device: WebGPUDevice, props: ComputePipelineProps) {
     super(device, props);
@@ -37,26 +42,52 @@ export class WebGPUComputePipeline extends ComputePipeline {
         },
         layout: 'auto'
       });
+
+    this._bindingsByGroup = EMPTY_BIND_GROUPS;
+    this._bindGroupCacheKeysByGroup = {};
   }
 
   /**
    * @todo Use renderpass.setBindings() ?
    * @todo Do we want to expose BindGroups in the API and remove this?
    */
-  setBindings(bindings: Record<string, Binding>): void {
-    Object.assign(this._bindings, bindings);
+  setBindings(bindings: Bindings | BindingsByGroup): void {
+    const nextBindingsByGroup = normalizeBindingsByGroup(this.shaderLayout, bindings);
+    for (const [groupKey, groupBindings] of Object.entries(nextBindingsByGroup)) {
+      const group = Number(groupKey);
+      for (const [name, binding] of Object.entries(groupBindings || {})) {
+        const currentGroupBindings = this._bindingsByGroup[group] || {};
+        if (currentGroupBindings[name] !== binding) {
+          if (
+            !this._bindingsByGroup[group] ||
+            this._bindingsByGroup[group] === currentGroupBindings
+          ) {
+            this._bindingsByGroup[group] = {...currentGroupBindings};
+          }
+          this._bindingsByGroup[group][name] = binding;
+          this._bindGroupCacheKeysByGroup[group] = {};
+        }
+      }
+    }
   }
 
-  /** Return a bind group created by setBindings */
-  _getBindGroup() {
-    // Get hold of the bind group layout. We don't want to do this unless we know there is at least one bind group
-    this._bindGroupLayout = this._bindGroupLayout || this.handle.getBindGroupLayout(0);
+  _getBindGroups(
+    bindings?: Bindings | BindingsByGroup,
+    bindGroupCacheKeys?: Partial<Record<number, object>>
+  ): Partial<Record<number, unknown>> {
+    const hasExplicitBindings = Boolean(bindings);
+    return _getDefaultBindGroupFactory(this.device).getBindGroups(
+      this,
+      hasExplicitBindings ? bindings : this._bindingsByGroup,
+      hasExplicitBindings ? bindGroupCacheKeys : this._bindGroupCacheKeysByGroup
+    );
+  }
 
-    // Set up the bindings
-    this._bindGroup =
-      this._bindGroup ||
-      getBindGroup(this.device.handle, this._bindGroupLayout, this.shaderLayout, this._bindings);
+  _getBindingsByGroupWebGPU(): BindingsByGroup {
+    return this._bindingsByGroup;
+  }
 
-    return this._bindGroup;
+  _getBindGroupCacheKeysWebGPU(): Partial<Record<number, object>> {
+    return this._bindGroupCacheKeysByGroup;
   }
 }

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

@@ -0,0 +1,38 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Fence, type FenceProps} from '@luma.gl/core';
+import {WebGPUDevice} from '../webgpu-device';
+
+/** WebGPU fence implemented by waiting for submitted work */
+export class WebGPUFence extends Fence {
+  readonly device: WebGPUDevice;
+  readonly handle: null = null;
+  readonly signaled: Promise<void>;
+  private _signaled = false;
+
+  constructor(device: WebGPUDevice, props: FenceProps = {}) {
+    super(device, {});
+    this.device = device;
+    this.signaled = device.handle.queue
+      .onSubmittedWorkDone()
+      .then(() => {
+        this._signaled = true;
+      })
+      .catch(error => {
+        if (this.device.shouldIgnoreDroppedInstanceError(error)) {
+          return;
+        }
+        throw error;
+      });
+  }
+
+  isSignaled(): boolean {
+    return this._signaled;
+  }
+
+  override destroy(): void {
+    // Nothing to release for WebGPU fence
+  }
+}

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

@@ -29,4 +29,25 @@ export class WebGPUFramebuffer extends Framebuffer {
   protected updateAttachments(): void {
     // WebGPU framebuffers are JS only objects, nothing to update
   }
+
+  /**
+   * Internal-only hook for the cached CanvasContext/PresentationContext swapchain path.
+   * Rebinds the long-lived default framebuffer wrapper to the current per-frame color view
+   * and optional depth attachment without allocating a new luma.gl Framebuffer object.
+   */
+  _reinitialize(
+    colorAttachment: WebGPUTextureView,
+    depthStencilAttachment: WebGPUTextureView | null
+  ): void {
+    this.colorAttachments[0] = colorAttachment;
+    // @ts-expect-error Internal-only canvas wrapper reuse mutates this otherwise-readonly attachment.
+    this.depthStencilAttachment = depthStencilAttachment;
+    this.width = colorAttachment.texture.width;
+    this.height = colorAttachment.texture.height;
+
+    this.props.width = this.width;
+    this.props.height = this.height;
+    this.props.colorAttachments = [colorAttachment.texture];
+    this.props.depthStencilAttachment = depthStencilAttachment?.texture || null;
+  }
 }

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

@@ -20,19 +20,16 @@ export class WebGPUPipelineLayout extends PipelineLayout {
 
     this.device = device;
 
-    const bindGroupEntries = this.mapShaderLayoutToBindGroupEntries();
+    const bindGroupEntriesByGroup = this.mapShaderLayoutToBindGroupEntriesByGroup();
 
     this.handle = this.device.handle.createPipelineLayout({
       label: props?.id ?? 'unnamed-pipeline-layout',
-      bindGroupLayouts: [
-        // TODO (kaapp): We can cache these to re-use them across
-        // layers, particularly if using a separate group for injected
-        // bindings (e.g. project/lighting)
+      bindGroupLayouts: bindGroupEntriesByGroup.map((entries, group) =>
         this.device.handle.createBindGroupLayout({
-          label: 'bind-group-layout',
-          entries: bindGroupEntries
+          label: `bind-group-layout-${group}`,
+          entries
         })
-      ]
+      )
     });
   }
 
@@ -42,13 +39,17 @@ export class WebGPUPipelineLayout extends PipelineLayout {
     this.handle = null;
   }
 
-  protected mapShaderLayoutToBindGroupEntries(): GPUBindGroupLayoutEntry[] {
-    // Set up the pipeline layout
-    // TODO (kaapp): This only supports the first group, but so does the rest of the code
-    const bindGroupEntries: GPUBindGroupLayoutEntry[] = [];
-
-    for (let i = 0; i < this.props.shaderLayout.bindings.length; i++) {
-      const binding = this.props.shaderLayout.bindings[i];
+  protected mapShaderLayoutToBindGroupEntriesByGroup(): GPUBindGroupLayoutEntry[][] {
+    const maxGroup = this.props.shaderLayout.bindings.reduce(
+      (highestGroup, binding) => Math.max(highestGroup, binding.group),
+      -1
+    );
+    const bindGroupEntriesByGroup: GPUBindGroupLayoutEntry[][] = Array.from(
+      {length: maxGroup + 1},
+      () => []
+    );
+
+    for (const binding of this.props.shaderLayout.bindings) {
       const bindingTypeInfo: Omit<GPUBindGroupLayoutEntry, 'binding' | 'visibility'> = {};
 
       switch (binding.type) {
@@ -113,14 +114,14 @@ export class WebGPUPipelineLayout extends PipelineLayout {
       const VISIBILITY_ALL =
         GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE;
 
-      bindGroupEntries.push({
+      bindGroupEntriesByGroup[binding.group].push({
         binding: binding.location,
         visibility: binding.visibility || VISIBILITY_ALL,
         ...bindingTypeInfo
       });
     }
 
-    return bindGroupEntries;
+    return bindGroupEntriesByGroup;
   }
 }