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

package/src/adapter/resources/webgpu-query-set.ts

@@ -2,13 +2,13 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {QuerySet, QuerySetProps} from '@luma.gl/core';
+import {Buffer, QuerySet, QuerySetProps} from '@luma.gl/core';
 import {WebGPUDevice} from '../webgpu-device';
-
-export type QuerySetProps2 = {
-  type: 'occlusion' | 'timestamp';
-  count: number;
-};
+import {WebGPUBuffer} from './webgpu-buffer';
+import {
+  getCpuHotspotSubmitReason,
+  setCpuHotspotSubmitReason
+} from '../helpers/cpu-hotspot-profiler';
 
 /**
  * Immutable
@@ -17,6 +17,12 @@ export class WebGPUQuerySet extends QuerySet {
   readonly device: WebGPUDevice;
   readonly handle: GPUQuerySet;
 
+  protected _resolveBuffer: WebGPUBuffer | null = null;
+  protected _readBuffer: WebGPUBuffer | null = null;
+  protected _cachedResults: bigint[] | null = null;
+  protected _readResultsPromise: Promise<bigint[]> | null = null;
+  protected _resultsPendingResolution: boolean = false;
+
   constructor(device: WebGPUDevice, props: QuerySetProps) {
     super(device, props);
     this.device = device;
@@ -30,8 +36,178 @@ export class WebGPUQuerySet extends QuerySet {
   }
 
   override destroy(): void {
-    this.handle?.destroy();
-    // @ts-expect-error readonly
-    this.handle = null;
+    if (!this.destroyed) {
+      this.handle?.destroy();
+      this.destroyResource();
+      // @ts-expect-error readonly
+      this.handle = null;
+    }
+  }
+
+  isResultAvailable(queryIndex?: number): boolean {
+    if (!this._cachedResults) {
+      return false;
+    }
+
+    return queryIndex === undefined
+      ? true
+      : queryIndex >= 0 && queryIndex < this._cachedResults.length;
+  }
+
+  async readResults(options?: {firstQuery?: number; queryCount?: number}): Promise<bigint[]> {
+    const firstQuery = options?.firstQuery || 0;
+    const queryCount = options?.queryCount || this.props.count - firstQuery;
+
+    if (firstQuery < 0 || queryCount < 0 || firstQuery + queryCount > this.props.count) {
+      throw new Error('Query read range is out of bounds');
+    }
+
+    let needsFreshResults = true;
+    while (needsFreshResults) {
+      if (!this._readResultsPromise) {
+        this._readResultsPromise = this._readAllResults();
+      }
+
+      const readResultsPromise = this._readResultsPromise;
+      const results = await readResultsPromise;
+
+      // A later submit may have invalidated the query set while this read was in flight.
+      // Retry so each caller observes the freshest resolved results instead of stale data.
+      needsFreshResults = this._resultsPendingResolution;
+      if (!needsFreshResults) {
+        return results.slice(firstQuery, firstQuery + queryCount);
+      }
+    }
+
+    throw new Error('Query read unexpectedly failed to resolve');
+  }
+
+  async readTimestampDuration(beginIndex: number, endIndex: number): Promise<number> {
+    if (this.props.type !== 'timestamp') {
+      throw new Error('Timestamp durations require a timestamp QuerySet');
+    }
+    if (beginIndex < 0 || endIndex <= beginIndex || endIndex >= this.props.count) {
+      throw new Error('Timestamp duration range is out of bounds');
+    }
+
+    const results = await this.readResults({
+      firstQuery: beginIndex,
+      queryCount: endIndex - beginIndex + 1
+    });
+    return Number(results[results.length - 1] - results[0]) / 1e6;
+  }
+
+  /** Marks any cached query results as stale after new writes have been encoded. */
+  _invalidateResults(): void {
+    this._cachedResults = null;
+    this._resultsPendingResolution = true;
+  }
+
+  protected async _readAllResults(): Promise<bigint[]> {
+    this._ensureBuffers();
+
+    try {
+      // Use a dedicated encoder so async profiling reads cannot flush or replace the
+      // device's active frame encoder while application rendering is in flight.
+      if (this._resultsPendingResolution) {
+        const commandEncoder = this.device.createCommandEncoder({
+          id: `${this.id}-read-results`
+        });
+        commandEncoder.resolveQuerySet(this, this._resolveBuffer!);
+        commandEncoder.copyBufferToBuffer({
+          sourceBuffer: this._resolveBuffer!,
+          destinationBuffer: this._readBuffer!,
+          size: this._resolveBuffer!.byteLength
+        });
+        const commandBuffer = commandEncoder.finish({
+          id: `${this.id}-read-results-command-buffer`
+        });
+        const previousSubmitReason = getCpuHotspotSubmitReason(this.device) || undefined;
+        setCpuHotspotSubmitReason(this.device, 'query-readback');
+        try {
+          this.device.submit(commandBuffer);
+        } finally {
+          setCpuHotspotSubmitReason(this.device, previousSubmitReason);
+        }
+      }
+
+      const data = await this._readBuffer!.readAsync(0, this._readBuffer!.byteLength);
+      const resultView = new BigUint64Array(data.buffer, data.byteOffset, this.props.count);
+      this._cachedResults = Array.from(resultView, value => value);
+      this._resultsPendingResolution = false;
+      return this._cachedResults;
+    } finally {
+      this._readResultsPromise = null;
+    }
+  }
+
+  protected _ensureBuffers(): void {
+    if (this._resolveBuffer && this._readBuffer) {
+      return;
+    }
+
+    const byteLength = this.props.count * 8;
+    this._resolveBuffer = this.device.createBuffer({
+      id: `${this.id}-resolve-buffer`,
+      usage: Buffer.QUERY_RESOLVE | Buffer.COPY_SRC,
+      byteLength
+    });
+    this.attachResource(this._resolveBuffer);
+
+    this._readBuffer = this.device.createBuffer({
+      id: `${this.id}-read-buffer`,
+      usage: Buffer.COPY_DST | Buffer.MAP_READ,
+      byteLength
+    });
+    this.attachResource(this._readBuffer);
+  }
+
+  _encodeResolveToReadBuffer(
+    commandEncoder: {
+      resolveQuerySet: (
+        querySet: WebGPUQuerySet,
+        destination: WebGPUBuffer,
+        options?: {firstQuery?: number; queryCount?: number; destinationOffset?: number}
+      ) => void;
+      copyBufferToBuffer: (options: {
+        sourceBuffer: WebGPUBuffer;
+        destinationBuffer: WebGPUBuffer;
+        sourceOffset?: number;
+        destinationOffset?: number;
+        size?: number;
+      }) => void;
+    },
+    options?: {firstQuery?: number; queryCount?: number}
+  ): boolean {
+    if (!this._resultsPendingResolution) {
+      return false;
+    }
+
+    // If a readback is already mapping the shared read buffer, defer to the fallback read path.
+    // That path will submit resolve/copy commands once the current read has completed.
+    if (this._readResultsPromise) {
+      return false;
+    }
+
+    this._ensureBuffers();
+    const firstQuery = options?.firstQuery || 0;
+    const queryCount = options?.queryCount || this.props.count - firstQuery;
+    const byteLength = queryCount * BigUint64Array.BYTES_PER_ELEMENT;
+    const byteOffset = firstQuery * BigUint64Array.BYTES_PER_ELEMENT;
+
+    commandEncoder.resolveQuerySet(this, this._resolveBuffer!, {
+      firstQuery,
+      queryCount,
+      destinationOffset: byteOffset
+    });
+    commandEncoder.copyBufferToBuffer({
+      sourceBuffer: this._resolveBuffer!,
+      sourceOffset: byteOffset,
+      destinationBuffer: this._readBuffer!,
+      destinationOffset: byteOffset,
+      size: byteLength
+    });
+    this._resultsPendingResolution = false;
+    return true;
   }
 }

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

@@ -3,67 +3,114 @@
 // 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';
 import {WebGPURenderPipeline} from './webgpu-render-pipeline';
 import {WebGPUQuerySet} from './webgpu-query-set';
 import {WebGPUFramebuffer} from './webgpu-framebuffer';
+import {getCpuHotspotProfiler, getTimestamp} from '../helpers/cpu-hotspot-profiler';
 
 export class WebGPURenderPass extends RenderPass {
   readonly device: WebGPUDevice;
   readonly handle: GPURenderPassEncoder;
+  readonly framebuffer: WebGPUFramebuffer;
 
   /** Active pipeline */
   pipeline: WebGPURenderPipeline | null = null;
 
-  constructor(device: WebGPUDevice, props: RenderPassProps = {}) {
+  /** Latest bindings applied to this pass */
+  bindings: Bindings | BindingsByGroup = {};
+
+  constructor(
+    device: WebGPUDevice,
+    props: RenderPassProps = {},
+    commandEncoder: GPUCommandEncoder = device.commandEncoder.handle
+  ) {
     super(device, props);
     this.device = device;
-    const framebuffer =
-      (props.framebuffer as WebGPUFramebuffer) || device.getCanvasContext().getCurrentFramebuffer();
-
-    const renderPassDescriptor = this.getRenderPassDescriptor(framebuffer);
+    const {props: renderPassProps} = this;
+    this.framebuffer =
+      (renderPassProps.framebuffer as WebGPUFramebuffer) ||
+      device.getCanvasContext().getCurrentFramebuffer();
 
-    const webgpuQuerySet = props.timestampQuerySet as WebGPUQuerySet;
-    if (webgpuQuerySet) {
-      renderPassDescriptor.occlusionQuerySet = webgpuQuerySet.handle;
+    const profiler = getCpuHotspotProfiler(this.device);
+    if (profiler) {
+      const counterName:
+        | 'explicitFramebufferRenderPassCount'
+        | 'defaultFramebufferRenderPassCount' = renderPassProps.framebuffer
+        ? 'explicitFramebufferRenderPassCount'
+        : 'defaultFramebufferRenderPassCount';
+      profiler[counterName] = (profiler[counterName] || 0) + 1;
     }
 
-    if (device.features.has('timestamp-query')) {
-      const webgpuTSQuerySet = props.timestampQuerySet as WebGPUQuerySet;
-      renderPassDescriptor.timestampWrites = webgpuTSQuerySet
-        ? ({
-            querySet: webgpuTSQuerySet.handle,
-            beginningOfPassWriteIndex: props.beginTimestampIndex,
-            endOfPassWriteIndex: props.endTimestampIndex
-          } as GPUComputePassTimestampWrites)
-        : undefined;
-    }
+    const startTime = profiler ? getTimestamp() : 0;
+    try {
+      const descriptorAssemblyStartTime = profiler ? getTimestamp() : 0;
+      const renderPassDescriptor = this.getRenderPassDescriptor(this.framebuffer);
 
-    if (!device.commandEncoder) {
-      throw new Error('commandEncoder not available');
-    }
+      if (renderPassProps.occlusionQuerySet) {
+        renderPassDescriptor.occlusionQuerySet = (
+          renderPassProps.occlusionQuerySet as WebGPUQuerySet
+        ).handle;
+      }
 
-    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})`)();
-    log.probe(3, JSON.stringify(renderPassDescriptor, null, 2))();
-    log.groupEnd(3)();
+      if (renderPassProps.timestampQuerySet) {
+        const webgpuTSQuerySet = renderPassProps.timestampQuerySet as WebGPUQuerySet;
+        webgpuTSQuerySet?._invalidateResults();
+        renderPassDescriptor.timestampWrites = webgpuTSQuerySet
+          ? ({
+              querySet: webgpuTSQuerySet.handle,
+              beginningOfPassWriteIndex: renderPassProps.beginTimestampIndex,
+              endOfPassWriteIndex: renderPassProps.endTimestampIndex
+            } as GPURenderPassTimestampWrites)
+          : undefined;
+      }
+      if (profiler) {
+        profiler.renderPassDescriptorAssemblyCount =
+          (profiler.renderPassDescriptorAssemblyCount || 0) + 1;
+        profiler.renderPassDescriptorAssemblyTimeMs =
+          (profiler.renderPassDescriptorAssemblyTimeMs || 0) +
+          (getTimestamp() - descriptorAssemblyStartTime);
+      }
+
+      this.device.pushErrorScope('validation');
+      const beginRenderPassStartTime = profiler ? getTimestamp() : 0;
+      this.handle = this.props.handle || commandEncoder.beginRenderPass(renderPassDescriptor);
+      if (profiler) {
+        profiler.renderPassBeginCount = (profiler.renderPassBeginCount || 0) + 1;
+        profiler.renderPassBeginTimeMs =
+          (profiler.renderPassBeginTimeMs || 0) + (getTimestamp() - beginRenderPassStartTime);
+      }
+      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})`)();
+      log.probe(3, JSON.stringify(renderPassDescriptor, null, 2))();
+      log.groupEnd(3)();
+    } finally {
+      if (profiler) {
+        profiler.renderPassSetupCount = (profiler.renderPassSetupCount || 0) + 1;
+        profiler.renderPassSetupTimeMs =
+          (profiler.renderPassSetupTimeMs || 0) + (getTimestamp() - startTime);
+      }
+    }
   }
 
-  override destroy(): void {}
+  override destroy(): void {
+    this.destroyResource();
+  }
 
   end(): void {
+    if (this.destroyed) {
+      return;
+    }
     this.handle.end();
+    this.destroy();
   }
 
   setPipeline(pipeline: RenderPipeline): void {
@@ -77,11 +124,16 @@ export class WebGPURenderPass extends RenderPass {
   }
 
   /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */
-  setBindings(bindings: Record<string, Binding>): void {
-    this.pipeline?.setBindings(bindings);
-    const bindGroup = this.pipeline?._getBindGroup();
-    if (bindGroup) {
-      this.handle.setBindGroup(0, bindGroup);
+  setBindings(bindings: Bindings | BindingsByGroup): void {
+    this.bindings = bindings;
+    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';
@@ -21,14 +25,14 @@ import type {WebGPURenderPass} from './webgpu-render-pass';
 export class WebGPURenderPipeline extends RenderPipeline {
   readonly device: WebGPUDevice;
   readonly handle: GPURenderPipeline;
+  readonly descriptor: GPURenderPipelineDescriptor | 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;
+  /** Compatibility path for direct pipeline.setBindings() usage */
+  private _bindingsByGroup: BindingsByGroup;
+  private _bindGroupCacheKeysByGroup: Partial<Record<number, object>> = {};
 
   override get [Symbol.toStringTag]() {
     return 'WebGPURenderPipeline';
@@ -37,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)();
@@ -51,13 +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 = {...this.props.bindings};
+    this._bindingsByGroup =
+      props.bindGroups || normalizeBindingsByGroup(this.shaderLayout, props.bindings);
+    this._bindGroupCacheKeysByGroup = createBindGroupCacheKeys(this._bindingsByGroup);
   }
 
   override destroy(): void {
@@ -67,17 +78,27 @@ export class WebGPURenderPipeline extends RenderPipeline {
   }
 
   /**
-   * @todo Use renderpass.setBindings() ?
-   * @todo Do we want to expose BindGroups in the API and remove this?
+   * 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 {
-    // 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;
+  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] = {};
+        }
       }
     }
-    Object.assign(this._bindings, bindings);
   }
 
   /** @todo - should this be moved to renderpass? */
@@ -91,8 +112,14 @@ export class WebGPURenderPipeline extends RenderPipeline {
     firstIndex?: number;
     firstInstance?: number;
     baseVertex?: number;
+    bindings?: Bindings;
+    bindGroups?: BindingsByGroup;
+    _bindGroupCacheKeys?: Partial<Record<number, object>>;
+    uniforms?: Record<string, unknown>;
   }): boolean {
     const webgpuRenderPass = options.renderPass as WebGPURenderPass;
+    const instanceCount =
+      options.instanceCount && options.instanceCount > 0 ? options.instanceCount : 1;
 
     // Set pipeline
     this.device.pushErrorScope('validation');
@@ -103,9 +130,16 @@ export class WebGPURenderPipeline extends RenderPipeline {
     });
 
     // Set bindings (uniform buffers, textures etc)
-    const bindGroup = this._getBindGroup();
-    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
@@ -116,16 +150,17 @@ export class WebGPURenderPipeline extends RenderPipeline {
     if (options.indexCount) {
       webgpuRenderPass.handle.drawIndexed(
         options.indexCount,
-        options.instanceCount,
-        options.firstIndex,
-        options.baseVertex,
-        options.firstInstance
+        instanceCount,
+        options.firstIndex || 0,
+        options.baseVertex || 0,
+        options.firstInstance || 0
       );
     } else {
       webgpuRenderPass.handle.draw(
         options.vertexCount || 0,
-        options.instanceCount || 1, // If 0, nothing will be drawn
-        options.firstInstance
+        instanceCount,
+        options.firstVertex || 0,
+        options.firstInstance || 0
       );
     }
 
@@ -135,22 +170,12 @@ export class WebGPURenderPipeline extends RenderPipeline {
     return true;
   }
 
-  /** Return a bind group created by setBindings */
-  _getBindGroup() {
-    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);
-
-    // Set up the bindings
-    // TODO what if bindings change? We need to rebuild the bind group!
-    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;
   }
 
   /**
@@ -161,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
@@ -211,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-sampler.ts

@@ -40,6 +40,11 @@ export class WebGPUSampler extends Sampler {
   }
 
   override destroy(): void {
+    if (this.destroyed) {
+      return;
+    }
+
+    this.destroyResource();
     // GPUSampler does not have a destroy method
     // this.handle.destroy();
     // @ts-expect-error readonly

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;
   }
 }