@luma.gl/webgpu 9.3.0-alpha.6 → 9.3.0-alpha.8

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

@@ -15,9 +15,17 @@ export class WebGPUFence extends Fence {
   constructor(device: WebGPUDevice, props: FenceProps = {}) {
     super(device, {});
     this.device = device;
-    this.signaled = device.handle.queue.onSubmittedWorkDone().then(() => {
-      this._signaled = true;
-    });
+    this.signaled = device.handle.queue
+      .onSubmittedWorkDone()
+      .then(() => {
+        this._signaled = true;
+      })
+      .catch(error => {
+        if (this.device.shouldIgnoreDroppedInstanceError(error)) {
+          return;
+        }
+        throw error;
+      });
   }
 
   isSignaled(): boolean {

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,10 +39,15 @@ 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[] = [];
+  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'> = {};
@@ -112,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;
   }
 }
 

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

@@ -3,8 +3,8 @@
 // Copyright (c) vis.gl contributors
 
 import type {TypedArray, NumberArray4} from '@math.gl/types';
-import type {RenderPassProps, RenderPassParameters, Binding} from '@luma.gl/core';
-import {Buffer, RenderPass, RenderPipeline, log} from '@luma.gl/core';
+import type {RenderPassProps, RenderPassParameters, Bindings, BindingsByGroup} from '@luma.gl/core';
+import {Buffer, RenderPass, RenderPipeline, _getDefaultBindGroupFactory, log} from '@luma.gl/core';
 import {WebGPUDevice} from '../webgpu-device';
 import {WebGPUBuffer} from './webgpu-buffer';
 // import {WebGPUCommandEncoder} from './webgpu-command-encoder';
@@ -22,9 +22,13 @@ export class WebGPURenderPass extends RenderPass {
   pipeline: WebGPURenderPipeline | null = null;
 
   /** Latest bindings applied to this pass */
-  bindings: Record<string, Binding> = {};
+  bindings: Bindings | BindingsByGroup = {};
 
-  constructor(device: WebGPUDevice, props: RenderPassProps = {}) {
+  constructor(
+    device: WebGPUDevice,
+    props: RenderPassProps = {},
+    commandEncoder: GPUCommandEncoder = device.commandEncoder.handle
+  ) {
     super(device, props);
     this.device = device;
     const {props: renderPassProps} = this;
@@ -72,14 +76,9 @@ export class WebGPURenderPass extends RenderPass {
           (getTimestamp() - descriptorAssemblyStartTime);
       }
 
-      if (!device.commandEncoder) {
-        throw new Error('commandEncoder not available');
-      }
-
       this.device.pushErrorScope('validation');
       const beginRenderPassStartTime = profiler ? getTimestamp() : 0;
-      this.handle =
-        this.props.handle || device.commandEncoder.handle.beginRenderPass(renderPassDescriptor);
+      this.handle = this.props.handle || commandEncoder.beginRenderPass(renderPassDescriptor);
       if (profiler) {
         profiler.renderPassBeginCount = (profiler.renderPassBeginCount || 0) + 1;
         profiler.renderPassBeginTimeMs =
@@ -125,11 +124,16 @@ export class WebGPURenderPass extends RenderPass {
   }
 
   /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */
-  setBindings(bindings: Record<string, Binding>): void {
+  setBindings(bindings: Bindings | BindingsByGroup): void {
     this.bindings = bindings;
-    const bindGroup = this.pipeline?._getBindGroup(bindings);
-    if (bindGroup) {
-      this.handle.setBindGroup(0, bindGroup);
+    const bindGroups =
+      (this.pipeline &&
+        _getDefaultBindGroupFactory(this.device).getBindGroups(this.pipeline, bindings)) ||
+      {};
+    for (const [group, bindGroup] of Object.entries(bindGroups)) {
+      if (bindGroup) {
+        this.handle.setBindGroup(Number(group), bindGroup as GPUBindGroup);
+      }
     }
   }
 

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

@@ -1,13 +1,17 @@
 // luma.gl MIT license
 
-import type {Binding, RenderPass, VertexArray} from '@luma.gl/core';
-import {RenderPipeline, RenderPipelineProps, log} from '@luma.gl/core';
+import type {Bindings, BindingsByGroup, RenderPass, VertexArray} from '@luma.gl/core';
+import {
+  RenderPipeline,
+  RenderPipelineProps,
+  _getDefaultBindGroupFactory,
+  log,
+  normalizeBindingsByGroup
+} from '@luma.gl/core';
 import {applyParametersToRenderPipelineDescriptor} from '../helpers/webgpu-parameters';
 import {getWebGPUTextureFormat} from '../helpers/convert-texture-format';
-import {getBindGroup} from '../helpers/get-bind-group';
 import {getVertexBufferLayout} from '../helpers/get-vertex-buffer-layout';
 // import {convertAttributesVertexBufferToLayout} from '../helpers/get-vertex-buffer-layout';
-// import {mapAccessorToWebGPUFormat} from './helpers/accessor-to-format';
 // import type {BufferAccessors} from './webgpu-pipeline';
 
 import type {WebGPUDevice} from '../webgpu-device';
@@ -15,23 +19,20 @@ import type {WebGPUDevice} from '../webgpu-device';
 import type {WebGPUShader} from './webgpu-shader';
 import type {WebGPURenderPass} from './webgpu-render-pass';
 
-const EMPTY_BINDINGS: Record<string, Binding> = {};
-
 // RENDER PIPELINE
 
 /** Creates a new render pipeline when parameters change */
 export class WebGPURenderPipeline extends RenderPipeline {
   readonly device: WebGPUDevice;
   readonly handle: GPURenderPipeline;
+  readonly descriptor: GPURenderPipelineDescriptor | null;
 
   readonly vs: WebGPUShader;
   readonly fs: WebGPUShader | null = null;
 
   /** Compatibility path for direct pipeline.setBindings() usage */
-  private _bindings: Record<string, Binding>;
-  /** For internal use to create BindGroups */
-  private _bindGroupLayout: GPUBindGroupLayout | null = null;
-  private _bindGroup: GPUBindGroup | null = null;
+  private _bindingsByGroup: BindingsByGroup;
+  private _bindGroupCacheKeysByGroup: Partial<Record<number, object>> = {};
 
   override get [Symbol.toStringTag]() {
     return 'WebGPURenderPipeline';
@@ -40,9 +41,14 @@ export class WebGPURenderPipeline extends RenderPipeline {
   constructor(device: WebGPUDevice, props: RenderPipelineProps) {
     super(device, props);
     this.device = device;
+    this.shaderLayout ||= this.device.getShaderLayout((props.vs as WebGPUShader).source) || {
+      attributes: [],
+      bindings: []
+    };
     this.handle = this.props.handle as GPURenderPipeline;
+    let descriptor: GPURenderPipelineDescriptor | null = null;
     if (!this.handle) {
-      const descriptor = this._getRenderPipelineDescriptor();
+      descriptor = this._getRenderPipelineDescriptor();
       log.groupCollapsed(1, `new WebGPURenderPipeline(${this.id})`)();
       log.probe(1, JSON.stringify(descriptor, null, 2))();
       log.groupEnd(1)();
@@ -54,12 +60,15 @@ export class WebGPURenderPipeline extends RenderPipeline {
         this.device.debug();
       });
     }
+    this.descriptor = descriptor;
     this.handle.label = this.props.id;
 
     // Note: Often the same shader in WebGPU
     this.vs = props.vs as WebGPUShader;
     this.fs = props.fs as WebGPUShader;
-    this._bindings = props.bindings || EMPTY_BINDINGS;
+    this._bindingsByGroup =
+      props.bindGroups || normalizeBindingsByGroup(this.shaderLayout, props.bindings);
+    this._bindGroupCacheKeysByGroup = createBindGroupCacheKeys(this._bindingsByGroup);
   }
 
   override destroy(): void {
@@ -72,22 +81,24 @@ export class WebGPURenderPipeline extends RenderPipeline {
    * Compatibility shim for code paths that still set bindings on the pipeline.
    * The shared-model path passes bindings per draw and does not rely on this state.
    */
-  setBindings(bindings: Record<string, Binding>): void {
-    let bindingsChanged = false;
-    for (const [name, binding] of Object.entries(bindings)) {
-      if (this._bindings[name] !== binding) {
-        if (!bindingsChanged) {
-          if (this._bindings === this.props.bindings || this._bindings === EMPTY_BINDINGS) {
-            this._bindings = {...this._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};
           }
-          bindingsChanged = true;
+          this._bindingsByGroup[group][name] = binding;
+          this._bindGroupCacheKeysByGroup[group] = {};
         }
-        this._bindings[name] = binding;
       }
     }
-    if (bindingsChanged) {
-      this._bindGroup = null;
-    }
   }
 
   /** @todo - should this be moved to renderpass? */
@@ -101,7 +112,9 @@ export class WebGPURenderPipeline extends RenderPipeline {
     firstIndex?: number;
     firstInstance?: number;
     baseVertex?: number;
-    bindings?: Record<string, Binding>;
+    bindings?: Bindings;
+    bindGroups?: BindingsByGroup;
+    _bindGroupCacheKeys?: Partial<Record<number, object>>;
     uniforms?: Record<string, unknown>;
   }): boolean {
     const webgpuRenderPass = options.renderPass as WebGPURenderPass;
@@ -117,9 +130,16 @@ export class WebGPURenderPipeline extends RenderPipeline {
     });
 
     // Set bindings (uniform buffers, textures etc)
-    const bindGroup = this._getBindGroup(options.bindings);
-    if (bindGroup) {
-      webgpuRenderPass.handle.setBindGroup(0, bindGroup);
+    const hasExplicitBindings = Boolean(options.bindGroups || options.bindings);
+    const bindGroups = _getDefaultBindGroupFactory(this.device).getBindGroups(
+      this,
+      hasExplicitBindings ? options.bindGroups || options.bindings : this._bindingsByGroup,
+      hasExplicitBindings ? options._bindGroupCacheKeys : this._bindGroupCacheKeysByGroup
+    );
+    for (const [group, bindGroup] of Object.entries(bindGroups)) {
+      if (bindGroup) {
+        webgpuRenderPass.handle.setBindGroup(Number(group), bindGroup as GPUBindGroup);
+      }
     }
 
     // Set attributes
@@ -150,24 +170,12 @@ export class WebGPURenderPipeline extends RenderPipeline {
     return true;
   }
 
-  /** Return a bind group created by setBindings */
-  _getBindGroup(bindings?: Record<string, Binding>) {
-    if (this.shaderLayout.bindings.length === 0) {
-      return null;
-    }
-
-    // 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);
-
-    if (bindings) {
-      return getBindGroup(this.device, this._bindGroupLayout, this.shaderLayout, bindings);
-    }
-
-    this._bindGroup =
-      this._bindGroup ||
-      getBindGroup(this.device, this._bindGroupLayout, this.shaderLayout, this._bindings);
+  _getBindingsByGroupWebGPU(): BindingsByGroup {
+    return this._bindingsByGroup;
+  }
 
-    return this._bindGroup;
+  _getBindGroupCacheKeysWebGPU(): Partial<Record<number, object>> {
+    return this._bindGroupCacheKeysByGroup;
   }
 
   /**
@@ -178,7 +186,9 @@ export class WebGPURenderPipeline extends RenderPipeline {
     const vertex: GPUVertexState = {
       module: (this.props.vs as WebGPUShader).handle,
       entryPoint: this.props.vertexEntryPoint || 'main',
-      buffers: getVertexBufferLayout(this.shaderLayout, this.props.bufferLayout)
+      buffers: getVertexBufferLayout(this.shaderLayout, this.props.bufferLayout, {
+        pipelineId: this.id
+      })
     };
 
     // Populate color targets
@@ -228,6 +238,18 @@ export class WebGPURenderPipeline extends RenderPipeline {
     return descriptor;
   }
 }
+
+function createBindGroupCacheKeys(
+  bindingsByGroup: BindingsByGroup
+): Partial<Record<number, object>> {
+  const bindGroupCacheKeys: Partial<Record<number, object>> = {};
+  for (const [groupKey, groupBindings] of Object.entries(bindingsByGroup)) {
+    if (groupBindings && Object.keys(groupBindings).length > 0) {
+      bindGroupCacheKeys[Number(groupKey)] = {};
+    }
+  }
+  return bindGroupCacheKeys;
+}
 /**
 _setAttributeBuffers(webgpuRenderPass: WebGPURenderPass) {
   if (this._indexBuffer) {

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

@@ -64,7 +64,22 @@ export class WebGPUShader extends Shader {
 
   /** Returns compilation info for this shader */
   async getCompilationInfo(): Promise<readonly CompilerMessage[]> {
-    const compilationInfo = await this.handle.getCompilationInfo();
+    // `_checkCompilationError()` runs asynchronously after construction, so the shader can be
+    // destroyed before we await compilation info. Snapshot the handle and treat a destroyed shader
+    // as having no compiler messages instead of dereferencing `null`.
+    const handle = this.handle;
+    if (!handle) {
+      return [];
+    }
+    let compilationInfo;
+    try {
+      compilationInfo = await handle.getCompilationInfo();
+    } catch (error) {
+      if (this.device.shouldIgnoreDroppedInstanceError(error, 'getCompilationInfo')) {
+        return [];
+      }
+      throw error;
+    }
     return compilationInfo.messages;
   }
 }

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

@@ -16,6 +16,7 @@ import {getWebGPUTextureFormat} from '../helpers/convert-texture-format';
 import type {WebGPUDevice} from '../webgpu-device';
 import {WebGPUSampler} from './webgpu-sampler';
 import {WebGPUTextureView} from './webgpu-texture-view';
+import {WebGPUBuffer} from './webgpu-buffer';
 
 /** WebGPU implementation of the luma.gl core Texture resource */
 export class WebGPUTexture extends Texture {
@@ -165,77 +166,93 @@ export class WebGPUTexture extends Texture {
     };
   }
 
-  override readBuffer(options: TextureReadOptions = {}, buffer?: Buffer): Buffer {
+  override readBuffer(
+    options: TextureReadOptions & {byteOffset?: number} = {},
+    buffer?: Buffer
+  ): Buffer {
+    if (!buffer) {
+      throw new Error(`${this} readBuffer requires a destination buffer`);
+    }
     const {x, y, z, width, height, depthOrArrayLayers, mipLevel, aspect} =
       this._getSupportedColorReadOptions(options);
+    const byteOffset = options.byteOffset ?? 0;
 
-    const layout = this.computeMemoryLayout({x, y, z, width, height, depthOrArrayLayers, mipLevel});
-
-    const {bytesPerRow, rowsPerImage, byteLength} = layout;
+    const layout = this.computeMemoryLayout({width, height, depthOrArrayLayers, mipLevel});
 
-    // Create a GPUBuffer to hold the copied pixel data.
-    const readBuffer =
-      buffer ||
-      this.device.createBuffer({
-        byteLength,
-        usage: Buffer.COPY_DST | Buffer.MAP_READ
-      });
+    const {byteLength} = layout;
 
-    if (readBuffer.byteLength < byteLength) {
+    if (buffer.byteLength < byteOffset + byteLength) {
       throw new Error(
-        `${this} readBuffer target is too small (${readBuffer.byteLength} < ${byteLength})`
+        `${this} readBuffer target is too small (${buffer.byteLength} < ${byteOffset + byteLength})`
       );
     }
 
-    const gpuReadBuffer = readBuffer.handle as GPUBuffer;
-
-    // Record commands to copy from the texture to the buffer.
     const gpuDevice = this.device.handle;
-
     this.device.pushErrorScope('validation');
     const commandEncoder = gpuDevice.createCommandEncoder();
+    this.copyToBuffer(
+      commandEncoder,
+      {x, y, z, width, height, depthOrArrayLayers, mipLevel, aspect, byteOffset},
+      buffer
+    );
+
+    const commandBuffer = commandEncoder.finish();
+    this.device.handle.queue.submit([commandBuffer]);
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`${this} readBuffer: ${error.message}`), this)();
+      this.device.debug();
+    });
+
+    return buffer;
+  }
+
+  override async readDataAsync(options: TextureReadOptions = {}): Promise<ArrayBuffer> {
+    throw new Error(
+      `${this} readDataAsync is deprecated; use readBuffer() with an explicit destination buffer or DynamicTexture.readAsync()`
+    );
+  }
+
+  copyToBuffer(
+    commandEncoder: GPUCommandEncoder,
+    options: TextureReadOptions & {
+      byteOffset?: number;
+      bytesPerRow?: number;
+      rowsPerImage?: number;
+    } = {},
+    buffer: Buffer
+  ): void {
+    const {
+      byteOffset = 0,
+      bytesPerRow: requestedBytesPerRow,
+      rowsPerImage: requestedRowsPerImage,
+      ...textureReadOptions
+    } = options;
+    const {x, y, z, width, height, depthOrArrayLayers, mipLevel, aspect} =
+      this._getSupportedColorReadOptions(textureReadOptions);
+    const layout = this.computeMemoryLayout({width, height, depthOrArrayLayers, mipLevel});
+    const effectiveBytesPerRow = requestedBytesPerRow ?? layout.bytesPerRow;
+    const effectiveRowsPerImage = requestedRowsPerImage ?? layout.rowsPerImage;
+    const webgpuBuffer = buffer as WebGPUBuffer;
+
     commandEncoder.copyTextureToBuffer(
-      // source
       {
         texture: this.handle,
         origin: {x, y, z},
-        // origin: [options.x, options.y, 0], // options.depth],
         mipLevel,
         aspect
-        // colorSpace: options.colorSpace,
-        // premultipliedAlpha: options.premultipliedAlpha
       },
-      // destination
       {
-        buffer: gpuReadBuffer,
-        offset: 0,
-        bytesPerRow,
-        rowsPerImage
+        buffer: webgpuBuffer.handle,
+        offset: byteOffset,
+        bytesPerRow: effectiveBytesPerRow,
+        rowsPerImage: effectiveRowsPerImage
       },
-      // copy size
       {
         width,
         height,
         depthOrArrayLayers
       }
     );
-
-    // Submit the command.
-    const commandBuffer = commandEncoder.finish();
-    this.device.handle.queue.submit([commandBuffer]);
-    this.device.popErrorScope((error: GPUError) => {
-      this.device.reportError(new Error(`${this} readBuffer: ${error.message}`), this)();
-      this.device.debug();
-    });
-
-    return readBuffer;
-  }
-
-  override async readDataAsync(options: TextureReadOptions = {}): Promise<ArrayBuffer> {
-    const buffer = this.readBuffer(options);
-    const data = await buffer.readAsync();
-    buffer.destroy();
-    return data.buffer as ArrayBuffer;
   }
 
   override writeBuffer(buffer: Buffer, options_: TextureWriteOptions = {}) {