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

package/dist/index.cjs

@@ -74,11 +74,24 @@ var init_webgpu_buffer = __esm({
           this.device.reportError(new Error(`${this} creation failed ${error.message}`), this)();
           this.device.debug();
         });
+        if (!this.props.handle) {
+          this.trackAllocatedMemory(size);
+        } else {
+          this.trackReferencedMemory(size, "Buffer");
+        }
       }
       destroy() {
-        var _a;
-        (_a = this.handle) == null ? void 0 : _a.destroy();
-        this.handle = null;
+        if (!this.destroyed && this.handle) {
+          this.removeStats();
+          if (!this.props.handle) {
+            this.trackDeallocatedMemory();
+            this.handle.destroy();
+          } else {
+            this.trackDeallocatedReferencedMemory("Buffer");
+          }
+          this.destroyed = true;
+          this.handle = null;
+        }
       }
       write(data, byteOffset = 0) {
         const arrayBuffer = ArrayBuffer.isView(data) ? data.buffer : data;
@@ -226,18 +239,47 @@ var init_webgpu_sampler = __esm({
         this.handle.label = this.props.id;
       }
       destroy() {
+        if (this.destroyed) {
+          return;
+        }
+        this.destroyResource();
         this.handle = null;
       }
     };
   }
 });
 
+// dist/adapter/helpers/cpu-hotspot-profiler.js
+function getCpuHotspotProfiler(owner) {
+  const profiler = owner.userData[CPU_HOTSPOT_PROFILER_MODULE];
+  return (profiler == null ? void 0 : profiler.enabled) ? profiler : null;
+}
+function getCpuHotspotSubmitReason(owner) {
+  return owner.userData[CPU_HOTSPOT_SUBMIT_REASON] || null;
+}
+function setCpuHotspotSubmitReason(owner, submitReason) {
+  owner.userData[CPU_HOTSPOT_SUBMIT_REASON] = submitReason;
+}
+function getTimestamp() {
+  var _a, _b;
+  return ((_b = (_a = globalThis.performance) == null ? void 0 : _a.now) == null ? void 0 : _b.call(_a)) ?? Date.now();
+}
+var CPU_HOTSPOT_PROFILER_MODULE, CPU_HOTSPOT_SUBMIT_REASON;
+var init_cpu_hotspot_profiler = __esm({
+  "dist/adapter/helpers/cpu-hotspot-profiler.js"() {
+    "use strict";
+    CPU_HOTSPOT_PROFILER_MODULE = "cpu-hotspot-profiler";
+    CPU_HOTSPOT_SUBMIT_REASON = "cpu-hotspot-submit-reason";
+  }
+});
+
 // dist/adapter/resources/webgpu-texture-view.js
 var import_core3, WebGPUTextureView;
 var init_webgpu_texture_view = __esm({
   "dist/adapter/resources/webgpu-texture-view.js"() {
     "use strict";
     import_core3 = require("@luma.gl/core");
+    init_cpu_hotspot_profiler();
     WebGPUTextureView = class extends import_core3.TextureView {
       device;
       handle;
@@ -247,8 +289,7 @@ var init_webgpu_texture_view = __esm({
         this.device = device;
         this.texture = props.texture;
         this.device.pushErrorScope("validation");
-        this.handle = // props.handle ||
-        this.texture.handle.createView({
+        this.handle = this.texture.handle.createView({
           format: this.props.format || this.texture.format,
           dimension: this.props.dimension || this.texture.dimension,
           aspect: this.props.aspect,
@@ -264,8 +305,42 @@ var init_webgpu_texture_view = __esm({
         this.handle.label = this.props.id;
       }
       destroy() {
+        if (this.destroyed) {
+          return;
+        }
+        this.destroyResource();
         this.handle = null;
       }
+      /**
+       * Internal-only hook for the cached CanvasContext/PresentationContext swapchain path.
+       * Rebuilds the default view when the per-frame canvas texture handle changes, without
+       * replacing the long-lived luma.gl wrapper object.
+       */
+      _reinitialize(texture) {
+        this.texture = texture;
+        const profiler = getCpuHotspotProfiler(this.device);
+        this.device.pushErrorScope("validation");
+        const createViewStartTime = profiler ? getTimestamp() : 0;
+        const handle = this.texture.handle.createView({
+          format: this.props.format || this.texture.format,
+          dimension: this.props.dimension || this.texture.dimension,
+          aspect: this.props.aspect,
+          baseMipLevel: this.props.baseMipLevel,
+          mipLevelCount: this.props.mipLevelCount,
+          baseArrayLayer: this.props.baseArrayLayer,
+          arrayLayerCount: this.props.arrayLayerCount
+        });
+        if (profiler) {
+          profiler.textureViewReinitializeCount = (profiler.textureViewReinitializeCount || 0) + 1;
+          profiler.textureViewReinitializeTimeMs = (profiler.textureViewReinitializeTimeMs || 0) + (getTimestamp() - createViewStartTime);
+        }
+        this.device.popErrorScope((error) => {
+          this.device.reportError(new Error(`TextureView constructor: ${error.message}`), this)();
+          this.device.debug();
+        });
+        handle.label = this.props.id;
+        this.handle = handle;
+      }
     };
   }
 });
@@ -284,9 +359,18 @@ var init_webgpu_texture = __esm({
       handle;
       sampler;
       view;
+      _allocatedByteLength = 0;
       constructor(device, props) {
         super(device, props, { byteAlignment: 256 });
         this.device = device;
+        if (props.sampler instanceof WebGPUSampler) {
+          this.sampler = props.sampler;
+        } else if (props.sampler === void 0) {
+          this.sampler = this.device.getDefaultSampler();
+        } else {
+          this.sampler = new WebGPUSampler(this.device, props.sampler || {});
+          this.attachResource(this.sampler);
+        }
         this.device.pushErrorScope("out-of-memory");
         this.device.pushErrorScope("validation");
         this.handle = this.props.handle || this.device.handle.createTexture({
@@ -315,7 +399,6 @@ var init_webgpu_texture = __esm({
           this.width = this.handle.width;
           this.height = this.handle.height;
         }
-        this.sampler = props.sampler instanceof WebGPUSampler ? props.sampler : new WebGPUSampler(this.device, props.sampler || {});
         this.view = new WebGPUTextureView(this.device, {
           ...this.props,
           texture: this,
@@ -323,11 +406,26 @@ var init_webgpu_texture = __esm({
           // Note: arrayLayerCount controls the view of array textures, but does not apply to 3d texture depths
           arrayLayerCount: this.dimension !== "3d" ? this.depth : 1
         });
+        this.attachResource(this.view);
         this._initializeData(props.data);
+        this._allocatedByteLength = this.getAllocatedByteLength();
+        if (!this.props.handle) {
+          this.trackAllocatedMemory(this._allocatedByteLength, "Texture");
+        } else {
+          this.trackReferencedMemory(this._allocatedByteLength, "Texture");
+        }
       }
       destroy() {
-        var _a;
-        (_a = this.handle) == null ? void 0 : _a.destroy();
+        if (this.destroyed) {
+          return;
+        }
+        if (!this.props.handle && this.handle) {
+          this.trackDeallocatedMemory("Texture");
+          this.handle.destroy();
+        } else if (this.handle) {
+          this.trackDeallocatedReferencedMemory("Texture");
+        }
+        this.destroyResource();
         this.handle = null;
       }
       createView(props) {
@@ -363,36 +461,6 @@ var init_webgpu_texture = __esm({
         });
         return { width: options.width, height: options.height };
       }
-      copyImageData(options_) {
-        const { width, height, depth } = this;
-        const options = this._normalizeCopyImageDataOptions(options_);
-        this.device.pushErrorScope("validation");
-        this.device.handle.queue.writeTexture(
-          // destination: GPUImageCopyTexture
-          {
-            // texture subresource
-            texture: this.handle,
-            mipLevel: options.mipLevel,
-            aspect: options.aspect,
-            // origin to write to
-            origin: [options.x, options.y, options.z]
-          },
-          // data
-          options.data,
-          // dataLayout: GPUImageDataLayout
-          {
-            offset: options.byteOffset,
-            bytesPerRow: options.bytesPerRow,
-            rowsPerImage: options.rowsPerImage
-          },
-          // size: GPUExtent3D - extents of the content to write
-          [width, height, depth]
-        );
-        this.device.popErrorScope((error) => {
-          this.device.reportError(new Error(`copyImageData: ${error.message}`), this)();
-          this.device.debug();
-        });
-      }
       generateMipmapsWebGL() {
         import_core4.log.warn(`${this}: generateMipmaps not supported in WebGPU`)();
       }
@@ -404,66 +472,63 @@ var init_webgpu_texture = __esm({
         };
       }
       readBuffer(options = {}, buffer) {
-        const { x = 0, y = 0, z = 0, width = this.width, height = this.height, depthOrArrayLayers = this.depth, mipLevel = 0, aspect = "all" } = options;
-        const layout = this.computeMemoryLayout(options);
-        const { bytesPerRow, rowsPerImage, byteLength } = layout;
-        const readBuffer = buffer || this.device.createBuffer({
-          byteLength,
-          usage: import_core4.Buffer.COPY_DST | import_core4.Buffer.MAP_READ
-        });
-        const gpuReadBuffer = readBuffer.handle;
+        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({ width, height, depthOrArrayLayers, mipLevel });
+        const { byteLength } = layout;
+        if (buffer.byteLength < byteOffset + byteLength) {
+          throw new Error(`${this} readBuffer target is too small (${buffer.byteLength} < ${byteOffset + byteLength})`);
+        }
         const gpuDevice = this.device.handle;
         this.device.pushErrorScope("validation");
         const commandEncoder = gpuDevice.createCommandEncoder();
-        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
-          },
-          // copy size
-          {
-            width,
-            height,
-            depthOrArrayLayers
-          }
-        );
+        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) => {
           this.device.reportError(new Error(`${this} readBuffer: ${error.message}`), this)();
           this.device.debug();
         });
-        return readBuffer;
+        return buffer;
       }
       async readDataAsync(options = {}) {
-        const buffer = this.readBuffer(options);
-        const data = await buffer.readAsync();
-        buffer.destroy();
-        return data.buffer;
-      }
-      writeBuffer(buffer, options = {}) {
-        const { x = 0, y = 0, z = 0, width = this.width, height = this.height, depthOrArrayLayers = this.depth, mipLevel = 0, aspect = "all" } = options;
-        const layout = this.computeMemoryLayout(options);
-        const { bytesPerRow, rowsPerImage } = layout;
+        throw new Error(`${this} readDataAsync is deprecated; use readBuffer() with an explicit destination buffer or DynamicTexture.readAsync()`);
+      }
+      copyToBuffer(commandEncoder, options = {}, buffer) {
+        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;
+        commandEncoder.copyTextureToBuffer({
+          texture: this.handle,
+          origin: { x, y, z },
+          mipLevel,
+          aspect
+        }, {
+          buffer: webgpuBuffer.handle,
+          offset: byteOffset,
+          bytesPerRow: effectiveBytesPerRow,
+          rowsPerImage: effectiveRowsPerImage
+        }, {
+          width,
+          height,
+          depthOrArrayLayers
+        });
+      }
+      writeBuffer(buffer, options_ = {}) {
+        const options = this._normalizeTextureWriteOptions(options_);
+        const { x, y, z, width, height, depthOrArrayLayers, mipLevel, aspect, byteOffset, bytesPerRow, rowsPerImage } = options;
         const gpuDevice = this.device.handle;
         this.device.pushErrorScope("validation");
         const commandEncoder = gpuDevice.createCommandEncoder();
         commandEncoder.copyBufferToTexture({
           buffer: buffer.handle,
-          offset: 0,
+          offset: byteOffset,
           bytesPerRow,
           rowsPerImage
         }, {
@@ -479,33 +544,88 @@ var init_webgpu_texture = __esm({
           this.device.debug();
         });
       }
-      writeData(data, options = {}) {
+      writeData(data, options_ = {}) {
         const device = this.device;
-        const { x = 0, y = 0, z = 0, width = this.width, height = this.height, depthOrArrayLayers = this.depth, mipLevel = 0, aspect = "all" } = options;
-        const layout = import_core4.textureFormatDecoder.computeMemoryLayout({
+        const options = this._normalizeTextureWriteOptions(options_);
+        const { x, y, z, width, height, depthOrArrayLayers, mipLevel, aspect, byteOffset } = options;
+        const source = data;
+        const formatInfo = this.device.getTextureFormatInfo(this.format);
+        const packedSourceLayout = import_core4.textureFormatDecoder.computeMemoryLayout({
           format: this.format,
-          width: this.width,
-          height: this.height,
-          depth: this.depth,
-          byteAlignment: this.byteAlignment
+          width,
+          height,
+          depth: depthOrArrayLayers,
+          byteAlignment: 1
         });
-        const { bytesPerRow, rowsPerImage } = layout;
+        const bytesPerRow = options_.bytesPerRow ?? packedSourceLayout.bytesPerRow;
+        const rowsPerImage = options_.rowsPerImage ?? packedSourceLayout.rowsPerImage;
+        let copyWidth = width;
+        let copyHeight = height;
+        if (formatInfo.compressed) {
+          const blockWidth = formatInfo.blockWidth || 1;
+          const blockHeight = formatInfo.blockHeight || 1;
+          copyWidth = Math.ceil(width / blockWidth) * blockWidth;
+          copyHeight = Math.ceil(height / blockHeight) * blockHeight;
+        }
         this.device.pushErrorScope("validation");
         device.handle.queue.writeTexture({
           texture: this.handle,
           mipLevel,
           aspect,
           origin: { x, y, z }
-        }, data, {
-          offset: 0,
+        }, source, {
+          offset: byteOffset,
           bytesPerRow,
           rowsPerImage
-        }, { width, height, depthOrArrayLayers });
+        }, { width: copyWidth, height: copyHeight, depthOrArrayLayers });
         this.device.popErrorScope((error) => {
           this.device.reportError(new Error(`${this} writeData: ${error.message}`), this)();
           this.device.debug();
         });
       }
+      /**
+       * Internal-only hook for the cached CanvasContext/PresentationContext swapchain path.
+       * Rebinds this handle-backed texture wrapper to the current per-frame canvas texture
+       * without allocating a new luma.gl Texture or TextureView wrapper.
+       */
+      _reinitialize(handle, props) {
+        const nextWidth = (props == null ? void 0 : props.width) ?? handle.width ?? this.width;
+        const nextHeight = (props == null ? void 0 : props.height) ?? handle.height ?? this.height;
+        const nextDepth = (props == null ? void 0 : props.depth) ?? this.depth;
+        const nextFormat = (props == null ? void 0 : props.format) ?? this.format;
+        const allocationMayHaveChanged = nextWidth !== this.width || nextHeight !== this.height || nextDepth !== this.depth || nextFormat !== this.format;
+        handle.label ||= this.id;
+        this.handle = handle;
+        this.width = nextWidth;
+        this.height = nextHeight;
+        if ((props == null ? void 0 : props.depth) !== void 0) {
+          this.depth = nextDepth;
+        }
+        if ((props == null ? void 0 : props.format) !== void 0) {
+          this.format = nextFormat;
+        }
+        this.props.handle = handle;
+        if ((props == null ? void 0 : props.width) !== void 0) {
+          this.props.width = props.width;
+        }
+        if ((props == null ? void 0 : props.height) !== void 0) {
+          this.props.height = props.height;
+        }
+        if ((props == null ? void 0 : props.depth) !== void 0) {
+          this.props.depth = props.depth;
+        }
+        if ((props == null ? void 0 : props.format) !== void 0) {
+          this.props.format = props.format;
+        }
+        if (allocationMayHaveChanged) {
+          const nextAllocation = this.getAllocatedByteLength();
+          if (nextAllocation !== this._allocatedByteLength) {
+            this._allocatedByteLength = nextAllocation;
+            this.trackReferencedMemory(nextAllocation, "Texture");
+          }
+        }
+        this.view._reinitialize(this);
+      }
     };
   }
 });
@@ -586,7 +706,19 @@ var init_webgpu_shader = __esm({
       }
       /** Returns compilation info for this shader */
       async getCompilationInfo() {
-        const compilationInfo = await this.handle.getCompilationInfo();
+        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;
       }
     };
@@ -677,6 +809,7 @@ var init_webgpu_parameters = __esm({
         const depthStencil = addDepthStencil(descriptor);
         depthStencil.format = value;
       },
+      clearDepth: notSupported,
       depthBias: (_, value, descriptor) => {
         const depthStencil = addDepthStencil(descriptor);
         depthStencil.depthBias = value;
@@ -815,96 +948,6 @@ var init_webgpu_parameters = __esm({
   }
 });
 
-// dist/adapter/helpers/get-bind-group.js
-function getBindGroup(device, bindGroupLayout, shaderLayout, bindings) {
-  const entries = getBindGroupEntries(bindings, shaderLayout);
-  device.pushErrorScope("validation");
-  const bindGroup = device.createBindGroup({
-    layout: bindGroupLayout,
-    entries
-  });
-  device.popErrorScope().then((error) => {
-    if (error) {
-      import_core8.log.error(`bindGroup creation: ${error.message}`, bindGroup)();
-    }
-  });
-  return bindGroup;
-}
-function getShaderLayoutBinding(shaderLayout, bindingName, options) {
-  const bindingLayout = shaderLayout.bindings.find((binding) => binding.name === bindingName || `${binding.name.toLocaleLowerCase()}uniforms` === bindingName.toLocaleLowerCase());
-  if (!bindingLayout && !(options == null ? void 0 : options.ignoreWarnings)) {
-    import_core8.log.warn(`Binding ${bindingName} not set: Not found in shader layout.`)();
-  }
-  return bindingLayout || null;
-}
-function getBindGroupEntries(bindings, shaderLayout) {
-  const entries = [];
-  for (const [bindingName, value] of Object.entries(bindings)) {
-    let bindingLayout = getShaderLayoutBinding(shaderLayout, bindingName);
-    if (bindingLayout) {
-      const entry = getBindGroupEntry(value, bindingLayout.location, void 0, bindingName);
-      if (entry) {
-        entries.push(entry);
-      }
-    }
-    if (value instanceof import_core8.Texture) {
-      bindingLayout = getShaderLayoutBinding(shaderLayout, `${bindingName}Sampler`, {
-        ignoreWarnings: true
-      });
-      if (bindingLayout) {
-        const entry = getBindGroupEntry(value, bindingLayout.location, { sampler: true }, bindingName);
-        if (entry) {
-          entries.push(entry);
-        }
-      }
-    }
-  }
-  return entries;
-}
-function getBindGroupEntry(binding, index, options, bindingName = "unknown") {
-  if (binding instanceof import_core8.Buffer) {
-    return {
-      binding: index,
-      resource: {
-        buffer: binding.handle
-      }
-    };
-  }
-  if (binding instanceof import_core8.Sampler) {
-    return {
-      binding: index,
-      resource: binding.handle
-    };
-  }
-  if (binding instanceof import_core8.TextureView) {
-    return {
-      binding: index,
-      resource: binding.handle
-    };
-  }
-  if (binding instanceof import_core8.Texture) {
-    if (options == null ? void 0 : options.sampler) {
-      return {
-        binding: index,
-        resource: binding.sampler.handle
-      };
-    }
-    return {
-      binding: index,
-      resource: binding.view.handle
-    };
-  }
-  import_core8.log.warn(`invalid binding ${bindingName}`, binding);
-  return null;
-}
-var import_core8;
-var init_get_bind_group = __esm({
-  "dist/adapter/helpers/get-bind-group.js"() {
-    "use strict";
-    import_core8 = require("@luma.gl/core");
-  }
-});
-
 // dist/adapter/helpers/get-vertex-buffer-layout.js
 function getWebGPUVertexFormat(format) {
   if (format.endsWith("-webgl")) {
@@ -912,9 +955,10 @@ function getWebGPUVertexFormat(format) {
   }
   return format;
 }
-function getVertexBufferLayout(shaderLayout, bufferLayout) {
+function getVertexBufferLayout(shaderLayout, bufferLayout, options) {
   const vertexBufferLayouts = [];
   const usedAttributes = /* @__PURE__ */ new Set();
+  const shaderAttributes = shaderLayout.attributes || [];
   for (const mapping of bufferLayout) {
     const vertexAttributes = [];
     let stepMode = "vertex";
@@ -923,7 +967,7 @@ function getVertexBufferLayout(shaderLayout, bufferLayout) {
     if (mapping.attributes) {
       for (const attributeMapping of mapping.attributes) {
         const attributeName = attributeMapping.attribute;
-        const attributeLayout = findAttributeLayout(shaderLayout, attributeName, usedAttributes);
+        const attributeLayout = findAttributeLayout(shaderLayout, attributeName, usedAttributes, options);
         const location = attributeLayout == null ? void 0 : attributeLayout.location;
         format = attributeMapping.format || mapping.format;
         stepMode = (attributeLayout == null ? void 0 : attributeLayout.stepMode) || ((attributeLayout == null ? void 0 : attributeLayout.name.startsWith("instance")) ? "instance" : "vertex");
@@ -932,14 +976,14 @@ function getVertexBufferLayout(shaderLayout, bufferLayout) {
           offset: attributeMapping.byteOffset,
           shaderLocation: location
         });
-        byteStride += (0, import_core9.getVertexFormatInfo)(format).byteLength;
+        byteStride += import_core8.vertexFormatDecoder.getVertexFormatInfo(format).byteLength;
       }
     } else {
-      const attributeLayout = findAttributeLayout(shaderLayout, mapping.name, usedAttributes);
+      const attributeLayout = findAttributeLayout(shaderLayout, mapping.name, usedAttributes, options);
       if (!attributeLayout) {
         continue;
       }
-      byteStride = (0, import_core9.getVertexFormatInfo)(format).byteLength;
+      byteStride = import_core8.vertexFormatDecoder.getVertexFormatInfo(format).byteLength;
       stepMode = attributeLayout.stepMode || (attributeLayout.name.startsWith("instance") ? "instance" : "vertex");
       vertexAttributes.push({
         format: getWebGPUVertexFormat(format),
@@ -954,10 +998,10 @@ function getVertexBufferLayout(shaderLayout, bufferLayout) {
       attributes: vertexAttributes
     });
   }
-  for (const attribute of shaderLayout.attributes) {
+  for (const attribute of shaderAttributes) {
     if (!usedAttributes.has(attribute.name)) {
       vertexBufferLayouts.push({
-        arrayStride: (0, import_core9.getVertexFormatInfo)("float32x3").byteLength,
+        arrayStride: import_core8.vertexFormatDecoder.getVertexFormatInfo("float32x3").byteLength,
         stepMode: attribute.stepMode || (attribute.name.startsWith("instance") ? "instance" : "vertex"),
         attributes: [
           {
@@ -976,10 +1020,12 @@ function getVertexBufferLayout(shaderLayout, bufferLayout) {
   });
   return vertexBufferLayouts;
 }
-function findAttributeLayout(shaderLayout, name, attributeNames) {
-  const attribute = shaderLayout.attributes.find((attribute_) => attribute_.name === name);
+function findAttributeLayout(shaderLayout, name, attributeNames, options) {
+  var _a;
+  const attribute = (_a = shaderLayout.attributes) == null ? void 0 : _a.find((attribute_) => attribute_.name === name);
   if (!attribute) {
-    import_core9.log.warn(`Supplied attribute not present in shader layout: ${name}`)();
+    const pipelineContext = (options == null ? void 0 : options.pipelineId) ? `RenderPipeline(${options.pipelineId})` : "RenderPipeline";
+    import_core8.log.warn(`${pipelineContext}: Ignoring "${name}" attribute, since it is not present in shader layout.`)();
     return null;
   }
   if (attributeNames) {
@@ -990,45 +1036,58 @@ function findAttributeLayout(shaderLayout, name, attributeNames) {
   }
   return attribute;
 }
-var import_core9;
+var import_core8;
 var init_get_vertex_buffer_layout = __esm({
   "dist/adapter/helpers/get-vertex-buffer-layout.js"() {
     "use strict";
-    import_core9 = require("@luma.gl/core");
+    import_core8 = require("@luma.gl/core");
   }
 });
 
 // dist/adapter/resources/webgpu-render-pipeline.js
-var import_core10, WebGPURenderPipeline;
+function createBindGroupCacheKeys(bindingsByGroup) {
+  const bindGroupCacheKeys = {};
+  for (const [groupKey, groupBindings] of Object.entries(bindingsByGroup)) {
+    if (groupBindings && Object.keys(groupBindings).length > 0) {
+      bindGroupCacheKeys[Number(groupKey)] = {};
+    }
+  }
+  return bindGroupCacheKeys;
+}
+var import_core9, WebGPURenderPipeline;
 var init_webgpu_render_pipeline = __esm({
   "dist/adapter/resources/webgpu-render-pipeline.js"() {
     "use strict";
-    import_core10 = require("@luma.gl/core");
+    import_core9 = require("@luma.gl/core");
     init_webgpu_parameters();
     init_convert_texture_format();
-    init_get_bind_group();
     init_get_vertex_buffer_layout();
-    WebGPURenderPipeline = class extends import_core10.RenderPipeline {
+    WebGPURenderPipeline = class extends import_core9.RenderPipeline {
       device;
       handle;
+      descriptor;
       vs;
       fs = null;
-      /** For internal use to create BindGroups */
-      _bindings;
-      _bindGroupLayout = null;
-      _bindGroup = null;
+      /** Compatibility path for direct pipeline.setBindings() usage */
+      _bindingsByGroup;
+      _bindGroupCacheKeysByGroup = {};
       get [Symbol.toStringTag]() {
         return "WebGPURenderPipeline";
       }
       constructor(device, props) {
         super(device, props);
         this.device = device;
+        this.shaderLayout ||= this.device.getShaderLayout(props.vs.source) || {
+          attributes: [],
+          bindings: []
+        };
         this.handle = this.props.handle;
+        let descriptor = null;
         if (!this.handle) {
-          const descriptor = this._getRenderPipelineDescriptor();
-          import_core10.log.groupCollapsed(1, `new WebGPURenderPipeline(${this.id})`)();
-          import_core10.log.probe(1, JSON.stringify(descriptor, null, 2))();
-          import_core10.log.groupEnd(1)();
+          descriptor = this._getRenderPipelineDescriptor();
+          import_core9.log.groupCollapsed(1, `new WebGPURenderPipeline(${this.id})`)();
+          import_core9.log.probe(1, JSON.stringify(descriptor, null, 2))();
+          import_core9.log.groupEnd(1)();
           this.device.pushErrorScope("validation");
           this.handle = this.device.handle.createRenderPipeline(descriptor);
           this.device.popErrorScope((error) => {
@@ -1037,29 +1096,40 @@ var init_webgpu_render_pipeline = __esm({
             this.device.debug();
           });
         }
+        this.descriptor = descriptor;
         this.handle.label = this.props.id;
         this.vs = props.vs;
         this.fs = props.fs;
-        this._bindings = { ...this.props.bindings };
+        this._bindingsByGroup = props.bindGroups || (0, import_core9.normalizeBindingsByGroup)(this.shaderLayout, props.bindings);
+        this._bindGroupCacheKeysByGroup = createBindGroupCacheKeys(this._bindingsByGroup);
       }
       destroy() {
         this.handle = null;
       }
       /**
-       * @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) {
-        for (const [name, binding] of Object.entries(bindings)) {
-          if (this._bindings[name] !== binding) {
-            this._bindGroup = null;
+        const nextBindingsByGroup = (0, import_core9.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? */
       draw(options) {
         const webgpuRenderPass = options.renderPass;
+        const instanceCount = options.instanceCount && options.instanceCount > 0 ? options.instanceCount : 1;
         this.device.pushErrorScope("validation");
         webgpuRenderPass.handle.setPipeline(this.handle);
         this.device.popErrorScope((error) => {
@@ -1067,32 +1137,27 @@ var init_webgpu_render_pipeline = __esm({
 "${error.message}"`), this)();
           this.device.debug();
         });
-        const bindGroup = this._getBindGroup();
-        if (bindGroup) {
-          webgpuRenderPass.handle.setBindGroup(0, bindGroup);
+        const hasExplicitBindings = Boolean(options.bindGroups || options.bindings);
+        const bindGroups = (0, import_core9._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);
+          }
         }
         options.vertexArray.bindBeforeRender(options.renderPass);
         if (options.indexCount) {
-          webgpuRenderPass.handle.drawIndexed(options.indexCount, options.instanceCount, options.firstIndex, options.baseVertex, options.firstInstance);
+          webgpuRenderPass.handle.drawIndexed(options.indexCount, 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
-          );
+          webgpuRenderPass.handle.draw(options.vertexCount || 0, instanceCount, options.firstVertex || 0, options.firstInstance || 0);
         }
         options.vertexArray.unbindAfterRender(options.renderPass);
         return true;
       }
-      /** Return a bind group created by setBindings */
-      _getBindGroup() {
-        if (this.shaderLayout.bindings.length === 0) {
-          return null;
-        }
-        this._bindGroupLayout = this._bindGroupLayout || this.handle.getBindGroupLayout(0);
-        this._bindGroup = this._bindGroup || getBindGroup(this.device.handle, this._bindGroupLayout, this.shaderLayout, this._bindings);
-        return this._bindGroup;
+      _getBindingsByGroupWebGPU() {
+        return this._bindingsByGroup;
+      }
+      _getBindGroupCacheKeysWebGPU() {
+        return this._bindGroupCacheKeysByGroup;
       }
       /**
        * Populate the complex WebGPU GPURenderPipelineDescriptor
@@ -1101,7 +1166,9 @@ var init_webgpu_render_pipeline = __esm({
         const vertex = {
           module: this.props.vs.handle,
           entryPoint: this.props.vertexEntryPoint || "main",
-          buffers: getVertexBufferLayout(this.shaderLayout, this.props.bufferLayout)
+          buffers: getVertexBufferLayout(this.shaderLayout, this.props.bufferLayout, {
+            pipelineId: this.id
+          })
         };
         const targets = [];
         if (this.props.colorAttachmentFormats) {
@@ -1141,12 +1208,12 @@ var init_webgpu_render_pipeline = __esm({
 });
 
 // dist/adapter/resources/webgpu-framebuffer.js
-var import_core11, WebGPUFramebuffer;
+var import_core10, WebGPUFramebuffer;
 var init_webgpu_framebuffer = __esm({
   "dist/adapter/resources/webgpu-framebuffer.js"() {
     "use strict";
-    import_core11 = require("@luma.gl/core");
-    WebGPUFramebuffer = class extends import_core11.Framebuffer {
+    import_core10 = require("@luma.gl/core");
+    WebGPUFramebuffer = class extends import_core10.Framebuffer {
       device;
       handle = null;
       colorAttachments = [];
@@ -1158,25 +1225,37 @@ var init_webgpu_framebuffer = __esm({
       }
       updateAttachments() {
       }
+      /**
+       * 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, depthStencilAttachment) {
+        this.colorAttachments[0] = colorAttachment;
+        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 == null ? void 0 : depthStencilAttachment.texture) || null;
+      }
     };
   }
 });
 
 // dist/adapter/resources/webgpu-compute-pipeline.js
-var import_core12, WebGPUComputePipeline;
+var import_core11, EMPTY_BIND_GROUPS, WebGPUComputePipeline;
 var init_webgpu_compute_pipeline = __esm({
   "dist/adapter/resources/webgpu-compute-pipeline.js"() {
     "use strict";
-    import_core12 = require("@luma.gl/core");
-    init_get_bind_group();
-    WebGPUComputePipeline = class extends import_core12.ComputePipeline {
+    import_core11 = require("@luma.gl/core");
+    EMPTY_BIND_GROUPS = {};
+    WebGPUComputePipeline = class extends import_core11.ComputePipeline {
       device;
       handle;
-      /** For internal use to create BindGroups */
-      _bindGroupLayout = null;
-      _bindGroup = null;
-      /** For internal use to create BindGroups */
-      _bindings = {};
+      _bindingsByGroup;
+      _bindGroupCacheKeysByGroup;
       constructor(device, props) {
         super(device, props);
         this.device = device;
@@ -1190,34 +1269,53 @@ var init_webgpu_compute_pipeline = __esm({
           },
           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) {
-        Object.assign(this._bindings, bindings);
+        const nextBindingsByGroup = (0, import_core11.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() {
-        this._bindGroupLayout = this._bindGroupLayout || this.handle.getBindGroupLayout(0);
-        this._bindGroup = this._bindGroup || getBindGroup(this.device.handle, this._bindGroupLayout, this.shaderLayout, this._bindings);
-        return this._bindGroup;
+      _getBindGroups(bindings, bindGroupCacheKeys) {
+        const hasExplicitBindings = Boolean(bindings);
+        return (0, import_core11._getDefaultBindGroupFactory)(this.device).getBindGroups(this, hasExplicitBindings ? bindings : this._bindingsByGroup, hasExplicitBindings ? bindGroupCacheKeys : this._bindGroupCacheKeysByGroup);
+      }
+      _getBindingsByGroupWebGPU() {
+        return this._bindingsByGroup;
+      }
+      _getBindGroupCacheKeysWebGPU() {
+        return this._bindGroupCacheKeysByGroup;
       }
     };
   }
 });
 
 // dist/adapter/resources/webgpu-vertex-array.js
-var import_core13, import_env, WebGPUVertexArray;
+var import_core12, import_env, WebGPUVertexArray;
 var init_webgpu_vertex_array = __esm({
   "dist/adapter/resources/webgpu-vertex-array.js"() {
     "use strict";
-    import_core13 = require("@luma.gl/core");
+    import_core12 = require("@luma.gl/core");
     import_env = require("@probe.gl/env");
-    WebGPUVertexArray = class extends import_core13.VertexArray {
+    WebGPUVertexArray = class extends import_core12.VertexArray {
       get [Symbol.toStringTag]() {
-        return "WebGPUVertexArray";
+        return "VertexArray";
       }
       device;
       /** Vertex Array is just a helper class under WebGPU */
@@ -1244,7 +1342,7 @@ var init_webgpu_vertex_array = __esm({
         const webgpuRenderPass = renderPass;
         const webgpuIndexBuffer = this.indexBuffer;
         if (webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.handle) {
-          import_core13.log.info(3, "setting index buffer", webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.handle, webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.indexType)();
+          import_core12.log.info(3, "setting index buffer", webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.handle, webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.indexType)();
           webgpuRenderPass.handle.setIndexBuffer(
             webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.handle,
             // @ts-expect-error TODO - we must enforce type
@@ -1254,7 +1352,7 @@ var init_webgpu_vertex_array = __esm({
         for (let location = 0; location < this.maxVertexAttributes; location++) {
           const webgpuBuffer = this.attributes[location];
           if (webgpuBuffer == null ? void 0 : webgpuBuffer.handle) {
-            import_core13.log.info(3, `setting vertex buffer ${location}`, webgpuBuffer == null ? void 0 : webgpuBuffer.handle)();
+            import_core12.log.info(3, `setting vertex buffer ${location}`, webgpuBuffer == null ? void 0 : webgpuBuffer.handle)();
             webgpuRenderPass.handle.setVertexBuffer(location, webgpuBuffer == null ? void 0 : webgpuBuffer.handle);
           }
         }
@@ -1274,16 +1372,19 @@ var init_webgpu_vertex_array = __esm({
 });
 
 // dist/adapter/webgpu-canvas-context.js
-var import_core14, WebGPUCanvasContext;
+var import_core13, WebGPUCanvasContext;
 var init_webgpu_canvas_context = __esm({
   "dist/adapter/webgpu-canvas-context.js"() {
     "use strict";
-    import_core14 = require("@luma.gl/core");
+    import_core13 = require("@luma.gl/core");
     init_webgpu_framebuffer();
-    WebGPUCanvasContext = class extends import_core14.CanvasContext {
+    init_cpu_hotspot_profiler();
+    WebGPUCanvasContext = class extends import_core13.CanvasContext {
       device;
       handle;
+      colorAttachment = null;
       depthStencilAttachment = null;
+      framebuffer = null;
       get [Symbol.toStringTag]() {
         return "WebGPUCanvasContext";
       }
@@ -1297,9 +1398,22 @@ var init_webgpu_canvas_context = __esm({
         this.handle = context;
         this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
         this._configureDevice();
+        this._startObservers();
       }
       /** Destroy any textures produced while configured and remove the context configuration. */
       destroy() {
+        if (this.framebuffer) {
+          this.framebuffer.destroy();
+          this.framebuffer = null;
+        }
+        if (this.colorAttachment) {
+          this.colorAttachment.destroy();
+          this.colorAttachment = null;
+        }
+        if (this.depthStencilAttachment) {
+          this.depthStencilAttachment.destroy();
+          this.depthStencilAttachment = null;
+        }
         this.handle.unconfigure();
         super.destroy();
       }
@@ -1318,44 +1432,81 @@ var init_webgpu_canvas_context = __esm({
           colorSpace: this.props.colorSpace,
           alphaMode: this.props.alphaMode
         });
+        this._createDepthStencilAttachment(this.device.preferredDepthFormat);
       }
       /** Update framebuffer with properly resized "swap chain" texture views */
       _getCurrentFramebuffer(options = {
         depthStencilFormat: "depth24plus"
       }) {
-        const currentColorAttachment = this._getCurrentTexture();
-        if (currentColorAttachment.width !== this.drawingBufferWidth || currentColorAttachment.height !== this.drawingBufferHeight) {
-          const [oldWidth, oldHeight] = this.getDrawingBufferSize();
-          this.drawingBufferWidth = currentColorAttachment.width;
-          this.drawingBufferHeight = currentColorAttachment.height;
-          import_core14.log.log(1, `${this}: Resized to compensate for initial canvas size mismatch ${oldWidth}x${oldHeight} => ${this.drawingBufferWidth}x${this.drawingBufferHeight}px`)();
-        }
-        if (options == null ? void 0 : options.depthStencilFormat) {
-          this._createDepthStencilAttachment(options == null ? void 0 : options.depthStencilFormat);
-        }
-        return new WebGPUFramebuffer(this.device, {
-          colorAttachments: [currentColorAttachment],
-          depthStencilAttachment: this.depthStencilAttachment
-        });
+        var _a;
+        const profiler = getCpuHotspotProfiler(this.device);
+        const startTime = profiler ? getTimestamp() : 0;
+        if (profiler) {
+          profiler.framebufferAcquireCount = (profiler.framebufferAcquireCount || 0) + 1;
+          profiler.activeDefaultFramebufferAcquireDepth = (profiler.activeDefaultFramebufferAcquireDepth || 0) + 1;
+        }
+        try {
+          const currentColorAttachment = this._getCurrentTexture();
+          if (currentColorAttachment.width !== this.drawingBufferWidth || currentColorAttachment.height !== this.drawingBufferHeight) {
+            const [oldWidth, oldHeight] = this.getDrawingBufferSize();
+            this.drawingBufferWidth = currentColorAttachment.width;
+            this.drawingBufferHeight = currentColorAttachment.height;
+            import_core13.log.log(1, `${this}: Resized to compensate for initial canvas size mismatch ${oldWidth}x${oldHeight} => ${this.drawingBufferWidth}x${this.drawingBufferHeight}px`)();
+          }
+          if (options == null ? void 0 : options.depthStencilFormat) {
+            this._createDepthStencilAttachment(options == null ? void 0 : options.depthStencilFormat);
+          }
+          this.framebuffer ||= new WebGPUFramebuffer(this.device, {
+            id: `${this.id}#framebuffer`,
+            colorAttachments: [currentColorAttachment],
+            depthStencilAttachment: null
+          });
+          this.framebuffer._reinitialize(currentColorAttachment.view, (options == null ? void 0 : options.depthStencilFormat) ? ((_a = this.depthStencilAttachment) == null ? void 0 : _a.view) || null : null);
+          return this.framebuffer;
+        } finally {
+          if (profiler) {
+            profiler.activeDefaultFramebufferAcquireDepth = (profiler.activeDefaultFramebufferAcquireDepth || 1) - 1;
+            profiler.framebufferAcquireTimeMs = (profiler.framebufferAcquireTimeMs || 0) + (getTimestamp() - startTime);
+          }
+        }
       }
       // PRIMARY METHODS
       /** Wrap the current canvas context texture in a luma.gl texture */
       _getCurrentTexture() {
+        const profiler = getCpuHotspotProfiler(this.device);
+        const currentTextureStartTime = profiler ? getTimestamp() : 0;
         const handle = this.handle.getCurrentTexture();
-        return this.device.createTexture({
-          id: `${this.id}#color-texture`,
+        if (profiler) {
+          profiler.currentTextureAcquireCount = (profiler.currentTextureAcquireCount || 0) + 1;
+          profiler.currentTextureAcquireTimeMs = (profiler.currentTextureAcquireTimeMs || 0) + (getTimestamp() - currentTextureStartTime);
+        }
+        if (!this.colorAttachment) {
+          this.colorAttachment = this.device.createTexture({
+            id: `${this.id}#color-texture`,
+            handle,
+            format: this.device.preferredColorFormat,
+            width: handle.width,
+            height: handle.height
+          });
+          return this.colorAttachment;
+        }
+        this.colorAttachment._reinitialize(handle, {
           handle,
           format: this.device.preferredColorFormat,
           width: handle.width,
           height: handle.height
         });
+        return this.colorAttachment;
       }
       /** We build render targets on demand (i.e. not when size changes but when about to render) */
       _createDepthStencilAttachment(depthStencilFormat) {
-        if (!this.depthStencilAttachment) {
+        var _a;
+        const needsNewDepthStencilAttachment = !this.depthStencilAttachment || this.depthStencilAttachment.width !== this.drawingBufferWidth || this.depthStencilAttachment.height !== this.drawingBufferHeight || this.depthStencilAttachment.format !== depthStencilFormat;
+        if (needsNewDepthStencilAttachment) {
+          (_a = this.depthStencilAttachment) == null ? void 0 : _a.destroy();
           this.depthStencilAttachment = this.device.createTexture({
             id: `${this.id}#depth-stencil-texture`,
-            usage: import_core14.Texture.RENDER_ATTACHMENT,
+            usage: import_core13.Texture.RENDER_ATTACHMENT,
             format: depthStencilFormat,
             width: this.drawingBufferWidth,
             height: this.drawingBufferHeight
@@ -1367,76 +1518,246 @@ var init_webgpu_canvas_context = __esm({
   }
 });
 
-// dist/adapter/resources/webgpu-command-buffer.js
-var import_core15, WebGPUCommandBuffer;
-var init_webgpu_command_buffer = __esm({
-  "dist/adapter/resources/webgpu-command-buffer.js"() {
+// dist/adapter/webgpu-presentation-context.js
+var import_core14, WebGPUPresentationContext;
+var init_webgpu_presentation_context = __esm({
+  "dist/adapter/webgpu-presentation-context.js"() {
     "use strict";
-    import_core15 = require("@luma.gl/core");
-    WebGPUCommandBuffer = class extends import_core15.CommandBuffer {
+    import_core14 = require("@luma.gl/core");
+    init_webgpu_framebuffer();
+    init_cpu_hotspot_profiler();
+    WebGPUPresentationContext = class extends import_core14.PresentationContext {
       device;
       handle;
-      constructor(commandEncoder, props) {
-        super(commandEncoder.device, {});
-        this.device = commandEncoder.device;
-        this.handle = this.props.handle || commandEncoder.handle.finish({
-          label: (props == null ? void 0 : props.id) || "unnamed-command-buffer"
-        });
+      colorAttachment = null;
+      depthStencilAttachment = null;
+      framebuffer = null;
+      get [Symbol.toStringTag]() {
+        return "WebGPUPresentationContext";
       }
-    };
-  }
-});
-
-// dist/adapter/resources/webgpu-render-pass.js
-function convertColor(color) {
-  return { r: color[0], g: color[1], b: color[2], a: color[3] };
-}
-var import_core16, WebGPURenderPass;
-var init_webgpu_render_pass = __esm({
-  "dist/adapter/resources/webgpu-render-pass.js"() {
-    "use strict";
-    import_core16 = require("@luma.gl/core");
-    WebGPURenderPass = class extends import_core16.RenderPass {
-      device;
-      handle;
-      /** Active pipeline */
-      pipeline = null;
       constructor(device, props = {}) {
-        super(device, props);
+        super(props);
+        const contextLabel = `${this[Symbol.toStringTag]}(${this.id})`;
+        const context = this.canvas.getContext("webgpu");
+        if (!context) {
+          throw new Error(`${contextLabel}: Failed to create WebGPU presentation context`);
+        }
         this.device = device;
-        const framebuffer = props.framebuffer || device.getCanvasContext().getCurrentFramebuffer();
-        const renderPassDescriptor = this.getRenderPassDescriptor(framebuffer);
-        const webgpuQuerySet = props.timestampQuerySet;
-        if (webgpuQuerySet) {
-          renderPassDescriptor.occlusionQuerySet = webgpuQuerySet.handle;
-        }
-        if (device.features.has("timestamp-query")) {
-          const webgpuTSQuerySet = props.timestampQuerySet;
-          renderPassDescriptor.timestampWrites = webgpuTSQuerySet ? {
-            querySet: webgpuTSQuerySet.handle,
-            beginningOfPassWriteIndex: props.beginTimestampIndex,
-            endOfPassWriteIndex: props.endTimestampIndex
-          } : void 0;
-        }
-        if (!device.commandEncoder) {
-          throw new Error("commandEncoder not available");
+        this.handle = context;
+        this._setAutoCreatedCanvasId(`${this.device.id}-presentation-canvas`);
+        this._configureDevice();
+        this._startObservers();
+      }
+      destroy() {
+        if (this.framebuffer) {
+          this.framebuffer.destroy();
+          this.framebuffer = null;
         }
-        this.device.pushErrorScope("validation");
-        this.handle = this.props.handle || device.commandEncoder.handle.beginRenderPass(renderPassDescriptor);
-        this.device.popErrorScope((error) => {
-          this.device.reportError(new Error(`${this} creation failed:
-"${error.message}"`), this)();
-          this.device.debug();
+        if (this.colorAttachment) {
+          this.colorAttachment.destroy();
+          this.colorAttachment = null;
+        }
+        if (this.depthStencilAttachment) {
+          this.depthStencilAttachment.destroy();
+          this.depthStencilAttachment = null;
+        }
+        this.handle.unconfigure();
+        super.destroy();
+      }
+      present() {
+        this.device.submit();
+      }
+      _configureDevice() {
+        if (this.depthStencilAttachment) {
+          this.depthStencilAttachment.destroy();
+          this.depthStencilAttachment = null;
+        }
+        this.handle.configure({
+          device: this.device.handle,
+          format: this.device.preferredColorFormat,
+          colorSpace: this.props.colorSpace,
+          alphaMode: this.props.alphaMode
+        });
+        this._createDepthStencilAttachment(this.device.preferredDepthFormat);
+      }
+      _getCurrentFramebuffer(options = {
+        depthStencilFormat: "depth24plus"
+      }) {
+        var _a;
+        const profiler = getCpuHotspotProfiler(this.device);
+        const startTime = profiler ? getTimestamp() : 0;
+        if (profiler) {
+          profiler.framebufferAcquireCount = (profiler.framebufferAcquireCount || 0) + 1;
+        }
+        try {
+          const currentColorAttachment = this._getCurrentTexture();
+          if (currentColorAttachment.width !== this.drawingBufferWidth || currentColorAttachment.height !== this.drawingBufferHeight) {
+            const [oldWidth, oldHeight] = this.getDrawingBufferSize();
+            this.drawingBufferWidth = currentColorAttachment.width;
+            this.drawingBufferHeight = currentColorAttachment.height;
+            import_core14.log.log(1, `${this[Symbol.toStringTag]}(${this.id}): Resized to compensate for initial canvas size mismatch ${oldWidth}x${oldHeight} => ${this.drawingBufferWidth}x${this.drawingBufferHeight}px`)();
+          }
+          if (options == null ? void 0 : options.depthStencilFormat) {
+            this._createDepthStencilAttachment(options.depthStencilFormat);
+          }
+          this.framebuffer ||= new WebGPUFramebuffer(this.device, {
+            id: `${this.id}#framebuffer`,
+            colorAttachments: [currentColorAttachment],
+            depthStencilAttachment: null
+          });
+          this.framebuffer._reinitialize(currentColorAttachment.view, (options == null ? void 0 : options.depthStencilFormat) ? ((_a = this.depthStencilAttachment) == null ? void 0 : _a.view) || null : null);
+          return this.framebuffer;
+        } finally {
+          if (profiler) {
+            profiler.framebufferAcquireTimeMs = (profiler.framebufferAcquireTimeMs || 0) + (getTimestamp() - startTime);
+          }
+        }
+      }
+      _getCurrentTexture() {
+        const profiler = getCpuHotspotProfiler(this.device);
+        const currentTextureStartTime = profiler ? getTimestamp() : 0;
+        const handle = this.handle.getCurrentTexture();
+        if (profiler) {
+          profiler.currentTextureAcquireCount = (profiler.currentTextureAcquireCount || 0) + 1;
+          profiler.currentTextureAcquireTimeMs = (profiler.currentTextureAcquireTimeMs || 0) + (getTimestamp() - currentTextureStartTime);
+        }
+        if (!this.colorAttachment) {
+          this.colorAttachment = this.device.createTexture({
+            id: `${this.id}#color-texture`,
+            handle,
+            format: this.device.preferredColorFormat,
+            width: handle.width,
+            height: handle.height
+          });
+          return this.colorAttachment;
+        }
+        this.colorAttachment._reinitialize(handle, {
+          handle,
+          format: this.device.preferredColorFormat,
+          width: handle.width,
+          height: handle.height
+        });
+        return this.colorAttachment;
+      }
+      _createDepthStencilAttachment(depthStencilFormat) {
+        var _a;
+        const needsNewDepthStencilAttachment = !this.depthStencilAttachment || this.depthStencilAttachment.width !== this.drawingBufferWidth || this.depthStencilAttachment.height !== this.drawingBufferHeight || this.depthStencilAttachment.format !== depthStencilFormat;
+        if (needsNewDepthStencilAttachment) {
+          (_a = this.depthStencilAttachment) == null ? void 0 : _a.destroy();
+          this.depthStencilAttachment = this.device.createTexture({
+            id: `${this.id}#depth-stencil-texture`,
+            usage: import_core14.Texture.RENDER_ATTACHMENT,
+            format: depthStencilFormat,
+            width: this.drawingBufferWidth,
+            height: this.drawingBufferHeight
+          });
+        }
+        return this.depthStencilAttachment;
+      }
+    };
+  }
+});
+
+// dist/adapter/resources/webgpu-command-buffer.js
+var import_core15, WebGPUCommandBuffer;
+var init_webgpu_command_buffer = __esm({
+  "dist/adapter/resources/webgpu-command-buffer.js"() {
+    "use strict";
+    import_core15 = require("@luma.gl/core");
+    WebGPUCommandBuffer = class extends import_core15.CommandBuffer {
+      device;
+      handle;
+      constructor(commandEncoder, props) {
+        super(commandEncoder.device, props);
+        this.device = commandEncoder.device;
+        this.handle = this.props.handle || commandEncoder.handle.finish({
+          label: (props == null ? void 0 : props.id) || "unnamed-command-buffer"
         });
-        this.handle.label = this.props.id;
-        import_core16.log.groupCollapsed(3, `new WebGPURenderPass(${this.id})`)();
-        import_core16.log.probe(3, JSON.stringify(renderPassDescriptor, null, 2))();
-        import_core16.log.groupEnd(3)();
+      }
+    };
+  }
+});
+
+// dist/adapter/resources/webgpu-render-pass.js
+function convertColor(color) {
+  return { r: color[0], g: color[1], b: color[2], a: color[3] };
+}
+var import_core16, WebGPURenderPass;
+var init_webgpu_render_pass = __esm({
+  "dist/adapter/resources/webgpu-render-pass.js"() {
+    "use strict";
+    import_core16 = require("@luma.gl/core");
+    init_cpu_hotspot_profiler();
+    WebGPURenderPass = class extends import_core16.RenderPass {
+      device;
+      handle;
+      framebuffer;
+      /** Active pipeline */
+      pipeline = null;
+      /** Latest bindings applied to this pass */
+      bindings = {};
+      constructor(device, props = {}, commandEncoder = device.commandEncoder.handle) {
+        super(device, props);
+        this.device = device;
+        const { props: renderPassProps } = this;
+        this.framebuffer = renderPassProps.framebuffer || device.getCanvasContext().getCurrentFramebuffer();
+        const profiler = getCpuHotspotProfiler(this.device);
+        if (profiler) {
+          const counterName = renderPassProps.framebuffer ? "explicitFramebufferRenderPassCount" : "defaultFramebufferRenderPassCount";
+          profiler[counterName] = (profiler[counterName] || 0) + 1;
+        }
+        const startTime = profiler ? getTimestamp() : 0;
+        try {
+          const descriptorAssemblyStartTime = profiler ? getTimestamp() : 0;
+          const renderPassDescriptor = this.getRenderPassDescriptor(this.framebuffer);
+          if (renderPassProps.occlusionQuerySet) {
+            renderPassDescriptor.occlusionQuerySet = renderPassProps.occlusionQuerySet.handle;
+          }
+          if (renderPassProps.timestampQuerySet) {
+            const webgpuTSQuerySet = renderPassProps.timestampQuerySet;
+            webgpuTSQuerySet == null ? void 0 : webgpuTSQuerySet._invalidateResults();
+            renderPassDescriptor.timestampWrites = webgpuTSQuerySet ? {
+              querySet: webgpuTSQuerySet.handle,
+              beginningOfPassWriteIndex: renderPassProps.beginTimestampIndex,
+              endOfPassWriteIndex: renderPassProps.endTimestampIndex
+            } : void 0;
+          }
+          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) => {
+            this.device.reportError(new Error(`${this} creation failed:
+"${error.message}"`), this)();
+            this.device.debug();
+          });
+          this.handle.label = this.props.id;
+          import_core16.log.groupCollapsed(3, `new WebGPURenderPass(${this.id})`)();
+          import_core16.log.probe(3, JSON.stringify(renderPassDescriptor, null, 2))();
+          import_core16.log.groupEnd(3)();
+        } finally {
+          if (profiler) {
+            profiler.renderPassSetupCount = (profiler.renderPassSetupCount || 0) + 1;
+            profiler.renderPassSetupTimeMs = (profiler.renderPassSetupTimeMs || 0) + (getTimestamp() - startTime);
+          }
+        }
       }
       destroy() {
+        this.destroyResource();
       }
       end() {
+        if (this.destroyed) {
+          return;
+        }
         this.handle.end();
+        this.destroy();
       }
       setPipeline(pipeline) {
         this.pipeline = pipeline;
@@ -1450,11 +1771,12 @@ var init_webgpu_render_pass = __esm({
       }
       /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */
       setBindings(bindings) {
-        var _a, _b;
-        (_a = this.pipeline) == null ? void 0 : _a.setBindings(bindings);
-        const bindGroup = (_b = this.pipeline) == null ? void 0 : _b._getBindGroup();
-        if (bindGroup) {
-          this.handle.setBindGroup(0, bindGroup);
+        this.bindings = bindings;
+        const bindGroups = this.pipeline && (0, import_core16._getDefaultBindGroupFactory)(this.device).getBindGroups(this.pipeline, bindings) || {};
+        for (const [group, bindGroup] of Object.entries(bindGroups)) {
+          if (bindGroup) {
+            this.handle.setBindGroup(Number(group), bindGroup);
+          }
         }
       }
       setIndexBuffer(buffer, indexFormat, offset = 0, size) {
@@ -1561,44 +1883,60 @@ var init_webgpu_compute_pass = __esm({
       device;
       handle;
       _webgpuPipeline = null;
-      constructor(device, props) {
+      constructor(device, props = {}, commandEncoder = device.commandEncoder.handle) {
         super(device, props);
         this.device = device;
+        const { props: computePassProps } = this;
         let timestampWrites;
-        if (device.features.has("timestamp-query")) {
-          const webgpuQuerySet = props.timestampQuerySet;
+        if (computePassProps.timestampQuerySet) {
+          const webgpuQuerySet = computePassProps.timestampQuerySet;
           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({
+        this.handle = this.props.handle || commandEncoder.beginComputePass({
           label: this.props.id,
           timestampWrites
         });
       }
       /** @note no WebGPU destroy method, just gc */
       destroy() {
+        this.destroyResource();
       }
       end() {
+        if (this.destroyed) {
+          return;
+        }
         this.handle.end();
+        this.destroy();
       }
       setPipeline(pipeline) {
         const wgpuPipeline = pipeline;
         this.handle.setPipeline(wgpuPipeline.handle);
         this._webgpuPipeline = wgpuPipeline;
-        this.setBindings([]);
+        const bindGroups = (0, import_core17._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);
+          }
+        }
       }
       /**
        * 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) {
-        const bindGroup = this._webgpuPipeline._getBindGroup();
-        this.handle.setBindGroup(0, bindGroup);
+        const bindGroups = this._webgpuPipeline && (0, import_core17._getDefaultBindGroupFactory)(this.device).getBindGroups(this._webgpuPipeline, bindings) || {};
+        for (const [group, bindGroup] of Object.entries(bindGroups)) {
+          if (bindGroup) {
+            this.handle.setBindGroup(Number(group), bindGroup);
+          }
+        }
       }
       /**
        * Dispatch work to be performed with the current ComputePipeline.
@@ -1656,6 +1994,7 @@ var init_webgpu_command_encoder = __esm({
         this.handle.label = this.props.id;
       }
       destroy() {
+        this.destroyResource();
       }
       finish(props) {
         this.device.pushErrorScope("validation");
@@ -1667,49 +2006,105 @@ var init_webgpu_command_encoder = __esm({
           this.device.reportError(new Error(message), this)();
           this.device.debug();
         });
+        this.destroy();
         return commandBuffer;
       }
       /**
        * Allows a render pass to begin against a canvas context
        * @todo need to support a "Framebuffer" equivalent (aka preconfigured RenderPassDescriptors?).
        */
-      beginRenderPass(props) {
-        return new WebGPURenderPass(this.device, props);
+      beginRenderPass(props = {}) {
+        return new WebGPURenderPass(this.device, this._applyTimeProfilingToPassProps(props), this.handle);
       }
-      beginComputePass(props) {
-        return new WebGPUComputePass(this.device, props);
+      beginComputePass(props = {}) {
+        return new WebGPUComputePass(this.device, this._applyTimeProfilingToPassProps(props), this.handle);
       }
       // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
       // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
       copyBufferToBuffer(options) {
         const webgpuSourceBuffer = options.sourceBuffer;
-        const WebGPUDestinationBuffer = options.destinationBuffer;
-        this.handle.copyBufferToBuffer(webgpuSourceBuffer.handle, options.sourceOffset ?? 0, WebGPUDestinationBuffer.handle, options.destinationOffset ?? 0, options.size ?? 0);
+        const webgpuDestinationBuffer = options.destinationBuffer;
+        this.handle.copyBufferToBuffer(webgpuSourceBuffer.handle, options.sourceOffset ?? 0, webgpuDestinationBuffer.handle, options.destinationOffset ?? 0, options.size ?? 0);
       }
       copyBufferToTexture(options) {
-        var _a, _b, _c;
         const webgpuSourceBuffer = options.sourceBuffer;
-        const WebGPUDestinationTexture = options.destinationTexture;
+        const webgpuDestinationTexture = options.destinationTexture;
+        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: (_a = options.extent) == null ? void 0 : _a[0],
-          height: (_b = options.extent) == null ? void 0 : _b[1],
-          depthOrArrayLayers: (_c = options.extent) == null ? void 0 : _c[2]
+          width: copySize[0],
+          height: copySize[1],
+          depthOrArrayLayers: copySize[2]
         });
       }
       copyTextureToBuffer(options) {
+        const { sourceTexture, destinationBuffer, origin = [0, 0, 0], byteOffset = 0, width, height, depthOrArrayLayers, mipLevel, aspect } = options;
+        const webgpuSourceTexture = sourceTexture;
+        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) {
+        var _a, _b, _c, _d, _e, _f;
+        const webgpuSourceTexture = options.sourceTexture;
+        const webgpuDestinationTexture = options.destinationTexture;
+        const sourceRegion = webgpuSourceTexture._normalizeTextureReadOptions({
+          x: ((_a = options.origin) == null ? void 0 : _a[0]) ?? 0,
+          y: ((_b = options.origin) == null ? void 0 : _b[1]) ?? 0,
+          z: ((_c = options.origin) == null ? void 0 : _c[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: ((_d = options.destinationOrigin) == null ? void 0 : _d[0]) ?? 0,
+            y: ((_e = options.destinationOrigin) == null ? void 0 : _e[1]) ?? 0,
+            z: ((_f = options.destinationOrigin) == null ? void 0 : _f[2]) ?? 0
+          },
+          aspect: options.destinationAspect ?? sourceRegion.aspect
+        }, {
+          width: sourceRegion.width,
+          height: sourceRegion.height,
+          depthOrArrayLayers: sourceRegion.depthOrArrayLayers
+        });
       }
       pushDebugGroup(groupLabel) {
         this.handle.pushDebugGroup(groupLabel);
@@ -1725,6 +2120,21 @@ var init_webgpu_command_encoder = __esm({
         const webgpuBuffer = destination;
         this.handle.resolveQuerySet(webgpuQuerySet.handle, (options == null ? void 0 : options.firstQuery) || 0, (options == null ? void 0 : options.queryCount) || querySet.props.count - ((options == null ? void 0 : options.firstQuery) || 0), webgpuBuffer.handle, (options == null ? void 0 : options.destinationOffset) || 0);
       }
+      writeTimestamp(querySet, queryIndex) {
+        querySet._invalidateResults();
+        const writeTimestamp = this.handle.writeTimestamp;
+        if (writeTimestamp) {
+          writeTimestamp.call(this.handle, querySet.handle, queryIndex);
+          return;
+        }
+        const computePass = this.handle.beginComputePass({
+          timestampWrites: {
+            querySet: querySet.handle,
+            beginningOfPassWriteIndex: queryIndex
+          }
+        });
+        computePass.end();
+      }
     };
   }
 });
@@ -1735,9 +2145,15 @@ var init_webgpu_query_set = __esm({
   "dist/adapter/resources/webgpu-query-set.js"() {
     "use strict";
     import_core19 = require("@luma.gl/core");
+    init_cpu_hotspot_profiler();
     WebGPUQuerySet = class extends import_core19.QuerySet {
       device;
       handle;
+      _resolveBuffer = null;
+      _readBuffer = null;
+      _cachedResults = null;
+      _readResultsPromise = null;
+      _resultsPendingResolution = false;
       constructor(device, props) {
         super(device, props);
         this.device = device;
@@ -1749,8 +2165,133 @@ var init_webgpu_query_set = __esm({
       }
       destroy() {
         var _a;
-        (_a = this.handle) == null ? void 0 : _a.destroy();
-        this.handle = null;
+        if (!this.destroyed) {
+          (_a = this.handle) == null ? void 0 : _a.destroy();
+          this.destroyResource();
+          this.handle = null;
+        }
+      }
+      isResultAvailable(queryIndex) {
+        if (!this._cachedResults) {
+          return false;
+        }
+        return queryIndex === void 0 ? true : queryIndex >= 0 && queryIndex < this._cachedResults.length;
+      }
+      async readResults(options) {
+        const firstQuery = (options == null ? void 0 : options.firstQuery) || 0;
+        const queryCount = (options == null ? void 0 : 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;
+          needsFreshResults = this._resultsPendingResolution;
+          if (!needsFreshResults) {
+            return results.slice(firstQuery, firstQuery + queryCount);
+          }
+        }
+        throw new Error("Query read unexpectedly failed to resolve");
+      }
+      async readTimestampDuration(beginIndex, endIndex) {
+        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() {
+        this._cachedResults = null;
+        this._resultsPendingResolution = true;
+      }
+      async _readAllResults() {
+        this._ensureBuffers();
+        try {
+          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) || void 0;
+            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;
+        }
+      }
+      _ensureBuffers() {
+        if (this._resolveBuffer && this._readBuffer) {
+          return;
+        }
+        const byteLength = this.props.count * 8;
+        this._resolveBuffer = this.device.createBuffer({
+          id: `${this.id}-resolve-buffer`,
+          usage: import_core19.Buffer.QUERY_RESOLVE | import_core19.Buffer.COPY_SRC,
+          byteLength
+        });
+        this.attachResource(this._resolveBuffer);
+        this._readBuffer = this.device.createBuffer({
+          id: `${this.id}-read-buffer`,
+          usage: import_core19.Buffer.COPY_DST | import_core19.Buffer.MAP_READ,
+          byteLength
+        });
+        this.attachResource(this._readBuffer);
+      }
+      _encodeResolveToReadBuffer(commandEncoder, options) {
+        if (!this._resultsPendingResolution) {
+          return false;
+        }
+        if (this._readResultsPromise) {
+          return false;
+        }
+        this._ensureBuffers();
+        const firstQuery = (options == null ? void 0 : options.firstQuery) || 0;
+        const queryCount = (options == null ? void 0 : 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;
       }
     };
   }
@@ -1768,25 +2309,21 @@ var init_webgpu_pipeline_layout = __esm({
       constructor(device, props) {
         super(device, props);
         this.device = device;
-        const bindGroupEntries = this.mapShaderLayoutToBindGroupEntries();
+        const bindGroupEntriesByGroup = this.mapShaderLayoutToBindGroupEntriesByGroup();
         this.handle = this.device.handle.createPipelineLayout({
           label: (props == null ? void 0 : 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)
-            this.device.handle.createBindGroupLayout({
-              label: "bind-group-layout",
-              entries: bindGroupEntries
-            })
-          ]
+          bindGroupLayouts: bindGroupEntriesByGroup.map((entries, group) => this.device.handle.createBindGroupLayout({
+            label: `bind-group-layout-${group}`,
+            entries
+          }))
         });
       }
       destroy() {
         this.handle = null;
       }
-      mapShaderLayoutToBindGroupEntries() {
-        const bindGroupEntries = [];
+      mapShaderLayoutToBindGroupEntriesByGroup() {
+        const maxGroup = this.props.shaderLayout.bindings.reduce((highestGroup, binding) => Math.max(highestGroup, binding.group), -1);
+        const bindGroupEntriesByGroup = Array.from({ length: maxGroup + 1 }, () => []);
         for (const binding of this.props.shaderLayout.bindings) {
           const bindingTypeInfo = {};
           switch (binding.type) {
@@ -1843,13 +2380,13 @@ var init_webgpu_pipeline_layout = __esm({
             }
           }
           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;
       }
     };
     isStorageTextureBindingLayout = (maybe) => {
@@ -1874,6 +2411,11 @@ var init_webgpu_fence = __esm({
         this.device = device;
         this.signaled = device.handle.queue.onSubmittedWorkDone().then(() => {
           this._signaled = true;
+        }).catch((error) => {
+          if (this.device.shouldIgnoreDroppedInstanceError(error)) {
+            return;
+          }
+          throw error;
         });
       }
       isSignaled() {
@@ -1913,6 +2455,14 @@ function getShaderLayoutFromWGSL(source) {
       members
     });
   }
+  for (const storageBuffer of parsedWGSL.storage) {
+    shaderLayout.bindings.push({
+      type: storageBuffer.access === "read" ? "read-only-storage" : "storage",
+      name: storageBuffer.name,
+      group: storageBuffer.group,
+      location: storageBuffer.binding
+    });
+  }
   for (const texture of parsedWGSL.textures) {
     const bindingDeclaration = {
       type: "texture",
@@ -1996,16 +2546,583 @@ var init_get_shader_layout_wgsl = __esm({
   }
 });
 
+// dist/adapter/helpers/generate-mipmaps-webgpu.js
+function generateMipmapsWebGPU(device, texture) {
+  if (texture.mipLevels <= 1) {
+    return;
+  }
+  if (texture.dimension === "3d") {
+    generateMipmaps3D(device, texture);
+    return;
+  }
+  if (RENDER_DIMENSIONS.includes(texture.dimension)) {
+    generateMipmapsRender(device, texture);
+    return;
+  }
+  throw new Error(`Cannot generate mipmaps for texture dimension "${texture.dimension}" with WebGPU.`);
+}
+function generateMipmapsRender(device, texture) {
+  validateFormatCapabilities(device, texture, ["render", "filter"], "render");
+  const colorAttachmentFormat = getColorAttachmentFormat(texture.format, "render", texture.dimension);
+  const viewDimension = texture.dimension;
+  const shaderSource = getRenderMipmapWGSL(viewDimension);
+  const sampler = device.createSampler({ minFilter: "linear", magFilter: "linear" });
+  const uniformsBuffer = device.createBuffer({
+    byteLength: 16,
+    usage: import_core23.Buffer.UNIFORM | import_core23.Buffer.COPY_DST
+  });
+  const uniformValues = new Uint32Array(1);
+  const sourceTextureLayout = {
+    type: "texture",
+    name: "sourceTexture",
+    group: 0,
+    location: 1,
+    viewDimension,
+    sampleType: "float"
+  };
+  const uniformsLayout = {
+    type: "uniform",
+    name: "uniforms",
+    group: 0,
+    location: 2
+  };
+  const renderShaderLayout = {
+    attributes: [],
+    bindings: [RENDER_SOURCE_SAMPLER_LAYOUT, sourceTextureLayout, uniformsLayout]
+  };
+  const vertexShader = device.createShader({
+    id: "mipmap-generation-render-vs",
+    source: shaderSource,
+    language: "wgsl",
+    stage: "vertex"
+  });
+  const fragmentShader = device.createShader({
+    id: "mipmap-generation-render-fs",
+    source: shaderSource,
+    language: "wgsl",
+    stage: "fragment"
+  });
+  const renderPipeline = device.createRenderPipeline({
+    id: `mipmap-generation-render:${texture.dimension}:${texture.format}`,
+    vs: vertexShader,
+    fs: fragmentShader,
+    shaderLayout: renderShaderLayout,
+    colorAttachmentFormats: [colorAttachmentFormat],
+    topology: "triangle-list"
+  });
+  let sourceWidth = texture.width;
+  let sourceHeight = texture.height;
+  const layerCount = texture.dimension === "2d" ? 1 : texture.depth;
+  function renderMipmapLayer(sourceView, baseMipLevel, baseArrayLayer, destinationWidth, destinationHeight) {
+    uniformValues[0] = baseArrayLayer;
+    uniformsBuffer.write(uniformValues);
+    const destinationView = texture.createView({
+      dimension: "2d",
+      baseMipLevel,
+      mipLevelCount: 1,
+      baseArrayLayer,
+      arrayLayerCount: 1
+    });
+    const framebuffer = device.createFramebuffer({
+      colorAttachments: [destinationView]
+    });
+    const renderPass = device.beginRenderPass({
+      id: `mipmap-generation:${texture.format}:${baseMipLevel}:${baseArrayLayer}`,
+      framebuffer
+    });
+    try {
+      renderPass.setPipeline(renderPipeline);
+      renderPass.setBindings({
+        sourceSampler: sampler,
+        sourceTexture: sourceView,
+        uniforms: uniformsBuffer
+      });
+      renderPass.setParameters({
+        viewport: [0, 0, destinationWidth, destinationHeight, 0, 1],
+        scissorRect: [0, 0, destinationWidth, destinationHeight]
+      });
+      renderPass.draw({ vertexCount: 3 });
+      renderPass.end();
+      device.submit();
+    } finally {
+      destinationView.destroy();
+      framebuffer.destroy();
+    }
+  }
+  try {
+    for (let baseMipLevel = 1; baseMipLevel < texture.mipLevels; ++baseMipLevel) {
+      validateFormatCapabilities(device, texture, ["render", "filter"], "render");
+      const sourceMipLevel = baseMipLevel - 1;
+      const destinationWidth = Math.max(1, sourceWidth >> 1);
+      const destinationHeight = Math.max(1, sourceHeight >> 1);
+      const sourceView = texture.createView({
+        dimension: viewDimension,
+        baseMipLevel: sourceMipLevel,
+        mipLevelCount: 1,
+        baseArrayLayer: 0,
+        arrayLayerCount: texture.depth
+      });
+      try {
+        for (let baseArrayLayer = 0; baseArrayLayer < layerCount; ++baseArrayLayer) {
+          renderMipmapLayer(sourceView, baseMipLevel, baseArrayLayer, destinationWidth, destinationHeight);
+        }
+      } finally {
+        sourceView.destroy();
+      }
+      sourceWidth = destinationWidth;
+      sourceHeight = destinationHeight;
+    }
+  } finally {
+    renderPipeline.destroy();
+    vertexShader.destroy();
+    fragmentShader.destroy();
+    sampler.destroy();
+    uniformsBuffer.destroy();
+  }
+}
+function getColorAttachmentFormat(format, path, dimension) {
+  if (import_core23.textureFormatDecoder.isColor(format)) {
+    return format;
+  }
+  throw new Error(`Cannot run ${path} mipmap generation for ${dimension} texture with format "${format}". Only color textures can be used for this operation. Required capabilities: color. Actual capabilities: color=false.`);
+}
+function generateMipmaps3D(device, texture) {
+  validateFormatCapabilities(device, texture, ["filter", "store"], "compute");
+  const format = getColorAttachmentFormat(texture.format, "compute", texture.dimension);
+  const shaderSource = get3DComputeMipmapWGSL(format);
+  const destinationTextureLayout = {
+    type: "storage",
+    name: "destinationTexture",
+    group: 0,
+    location: 1,
+    format,
+    viewDimension: "3d",
+    access: "write-only"
+  };
+  const computeShaderLayout = {
+    bindings: [COMPUTE_SOURCE_TEXTURE_LAYOUT, destinationTextureLayout, COMPUTE_UNIFORMS_LAYOUT]
+  };
+  const computeShader = device.createShader({
+    id: "mipmap-generation-compute",
+    source: shaderSource,
+    language: "wgsl",
+    stage: "compute"
+  });
+  const computePipeline = device.createComputePipeline({
+    id: `mipmap-generation-compute:${texture.format}`,
+    shader: computeShader,
+    shaderLayout: computeShaderLayout
+  });
+  const uniformsBuffer = device.createBuffer({
+    byteLength: 32,
+    usage: import_core23.Buffer.UNIFORM | import_core23.Buffer.COPY_DST
+  });
+  const uniformValues = new Uint32Array(8);
+  let sourceWidth = texture.width;
+  let sourceHeight = texture.height;
+  let sourceDepth = texture.depth;
+  try {
+    for (let destinationMipLevel = 1; destinationMipLevel < texture.mipLevels; ++destinationMipLevel) {
+      validateFormatCapabilities(device, texture, ["filter", "store"], "compute");
+      const destinationWidth = Math.max(1, sourceWidth >> 1);
+      const destinationHeight = Math.max(1, sourceHeight >> 1);
+      const destinationDepth = Math.max(1, sourceDepth >> 1);
+      uniformValues[0] = sourceWidth;
+      uniformValues[1] = sourceHeight;
+      uniformValues[2] = sourceDepth;
+      uniformValues[3] = destinationWidth;
+      uniformValues[4] = destinationHeight;
+      uniformValues[5] = destinationDepth;
+      uniformValues[6] = 0;
+      uniformsBuffer.write(uniformValues);
+      const sourceView = texture.createView({
+        dimension: "3d",
+        baseMipLevel: destinationMipLevel - 1,
+        mipLevelCount: 1,
+        baseArrayLayer: 0,
+        arrayLayerCount: 1
+      });
+      const destinationView = texture.createView({
+        dimension: "3d",
+        baseMipLevel: destinationMipLevel,
+        mipLevelCount: 1,
+        baseArrayLayer: 0,
+        arrayLayerCount: 1
+      });
+      computePipeline.setBindings({
+        sourceTexture: sourceView,
+        destinationTexture: destinationView,
+        uniforms: uniformsBuffer
+      });
+      try {
+        const workgroupsX = Math.ceil(destinationWidth / WORKGROUP_SIZE.x);
+        const workgroupsY = Math.ceil(destinationHeight / WORKGROUP_SIZE.y);
+        const workgroupsZ = Math.ceil(destinationDepth / WORKGROUP_SIZE.z);
+        const computePass = device.beginComputePass({});
+        computePass.setPipeline(computePipeline);
+        computePass.dispatch(workgroupsX, workgroupsY, workgroupsZ);
+        computePass.end();
+        device.submit();
+      } finally {
+        sourceView.destroy();
+        destinationView.destroy();
+      }
+      sourceWidth = destinationWidth;
+      sourceHeight = destinationHeight;
+      sourceDepth = destinationDepth;
+    }
+  } finally {
+    computePipeline.destroy();
+    computeShader.destroy();
+    uniformsBuffer.destroy();
+  }
+}
+function validateFormatCapabilities(device, texture, requiredCapabilities, path) {
+  const { format, dimension } = texture;
+  const capabilities = device.getTextureFormatCapabilities(format);
+  const missingCapabilities = requiredCapabilities.filter((capability) => !capabilities[capability]);
+  if (missingCapabilities.length > 0) {
+    const required = requiredCapabilities.join(" + ");
+    const actual = requiredCapabilities.map((capability) => `${capability}=${capabilities[capability]}`).join(", ");
+    throw new Error(`Cannot run ${path} mipmap generation for ${dimension} texture with format "${format}". Required capabilities: ${required}. Actual capabilities: ${actual}.`);
+  }
+}
+function getSourceTextureType(dimension) {
+  switch (dimension) {
+    case "2d":
+      return "texture_2d<f32>";
+    case "2d-array":
+      return "texture_2d_array<f32>";
+    case "cube":
+      return "texture_cube<f32>";
+    case "cube-array":
+      return "texture_cube_array<f32>";
+    default:
+      throw new Error(`Unsupported render dimension "${dimension}" for mipmap generation.`);
+  }
+}
+function getRenderMipmapWGSL(dimension) {
+  const sourceSnippet = getRenderMipmapSampleSnippet(dimension);
+  return `
+struct MipmapUniforms {
+  sourceLayer: u32,
+};
+
+fn _touchUniform(uniforms: MipmapUniforms) {
+  let unusedSourceLayer = uniforms.sourceLayer;
+}
+
+const faceMat = array(
+  mat3x3f(
+    0.0,  0.0,  -2.0,
+    0.0, -2.0,   0.0,
+    1.0,  1.0,   1.0
+  ),  // pos-x
+  mat3x3f(
+    0.0,  0.0,   2.0,
+    0.0, -2.0,   0.0,
+    -1.0,  1.0,  -1.0
+  ),  // neg-x
+  mat3x3f(
+    2.0,  0.0,   0.0,
+    0.0,  0.0,   2.0,
+    -1.0,  1.0,  -1.0
+  ),  // pos-y
+  mat3x3f(
+    2.0,  0.0,   0.0,
+    0.0,  0.0,  -2.0,
+    -1.0, -1.0,   1.0
+  ),  // neg-y
+  mat3x3f(
+    2.0,  0.0,   0.0,
+    0.0, -2.0,   0.0,
+    -1.0,  1.0,   1.0
+  ),  // pos-z
+  mat3x3f(
+    -2.0, 0.0,   0.0,
+    0.0, -2.0,   0.0,
+    1.0,   1.0,  -1.0
+  )   // neg-z
+);
+
+struct FragmentInputs {
+  @builtin(position) position: vec4f,
+  @location(0) texcoord: vec2f
+};
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) texcoord: vec2f
+};
+
+@group(0) @binding(0) var sourceSampler: sampler;
+@group(0) @binding(1) var sourceTexture: ${getSourceTextureType(dimension)};
+@group(0) @binding(2) var<uniform> uniforms: MipmapUniforms;
+
+@vertex
+fn vertexMain(
+  @builtin(vertex_index) vertexIndex: u32
+) -> VertexOutput {
+  const positions = array(
+    vec2f(-1.0, -1.0),
+    vec2f(-1.0,  3.0),
+    vec2f( 3.0, -1.0)
+  );
+
+  let xy = positions[vertexIndex];
+  return VertexOutput(
+    vec4f(xy, 0.0, 1.0),
+    xy * vec2f(0.5, -0.5) + vec2f(0.5)
+  );
+}
+
+@fragment
+fn fragmentMain(fsInput: VertexOutput) -> @location(0) vec4f {
+  _touchUniform(uniforms);
+  return ${sourceSnippet};
+}
+`;
+}
+function getRenderMipmapSampleSnippet(dimension) {
+  const layer = "uniforms.sourceLayer";
+  switch (dimension) {
+    case "2d":
+      return "textureSampleLevel(sourceTexture, sourceSampler, fsInput.texcoord, 0.0)";
+    case "2d-array":
+      return `textureSampleLevel(sourceTexture, sourceSampler, fsInput.texcoord, i32(${layer}), 0.0)`;
+    case "cube":
+      return `textureSampleLevel(sourceTexture, sourceSampler, faceMat[i32(${layer})] * vec3f(fract(fsInput.texcoord), 1.0), 0.0)`;
+    case "cube-array":
+      return `textureSampleLevel(sourceTexture, sourceSampler, faceMat[i32(${layer} % 6u)] * vec3f(fract(fsInput.texcoord), 1.0), i32(${layer} / 6u), 0.0)`;
+    default:
+      throw new Error(`Unsupported render dimension "${dimension}" for mipmap generation.`);
+  }
+}
+function get3DComputeMipmapWGSL(format) {
+  return `
+struct MipmapUniforms {
+  sourceWidth: u32,
+  sourceHeight: u32,
+  sourceDepth: u32,
+  destinationWidth: u32,
+  destinationHeight: u32,
+  destinationDepth: u32,
+  padding: u32,
+};
+
+@group(0) @binding(0) var sourceTexture: texture_3d<f32>;
+@group(0) @binding(1) var destinationTexture: texture_storage_3d<${format}, write>;
+@group(0) @binding(2) var<uniform> uniforms: MipmapUniforms;
+
+@compute @workgroup_size(${WORKGROUP_SIZE.x}, ${WORKGROUP_SIZE.y}, ${WORKGROUP_SIZE.z})
+fn main(@builtin(global_invocation_id) id: vec3<u32>) {
+  if (
+    id.x >= uniforms.destinationWidth ||
+    id.y >= uniforms.destinationHeight ||
+    id.z >= uniforms.destinationDepth
+  ) {
+    return;
+  }
+
+  let sourceBase = id * 2u;
+  let sourceX0 = min(sourceBase.x, uniforms.sourceWidth - 1u);
+  let sourceY0 = min(sourceBase.y, uniforms.sourceHeight - 1u);
+  let sourceZ0 = min(sourceBase.z, uniforms.sourceDepth - 1u);
+
+  let sourceX1 = min(sourceBase.x + 1u, uniforms.sourceWidth - 1u);
+  let sourceY1 = min(sourceBase.y + 1u, uniforms.sourceHeight - 1u);
+  let sourceZ1 = min(sourceBase.z + 1u, uniforms.sourceDepth - 1u);
+
+  var sum = textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX0), i32(sourceY0), i32(sourceZ0)),
+    0
+  );
+  sum += textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX1), i32(sourceY0), i32(sourceZ0)),
+    0
+  );
+  sum += textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX0), i32(sourceY1), i32(sourceZ0)),
+    0
+  );
+  sum += textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX1), i32(sourceY1), i32(sourceZ0)),
+    0
+  );
+  sum += textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX0), i32(sourceY0), i32(sourceZ1)),
+    0
+  );
+  sum += textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX1), i32(sourceY0), i32(sourceZ1)),
+    0
+  );
+  sum += textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX0), i32(sourceY1), i32(sourceZ1)),
+    0
+  );
+  sum += textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX1), i32(sourceY1), i32(sourceZ1)),
+    0
+  );
+
+  textureStore(
+    destinationTexture,
+    vec3<i32>(i32(id.x), i32(id.y), i32(id.z)),
+    vec4<f32>(sum.xyz / 8.0, sum.w / 8.0)
+  );
+}
+`;
+}
+var import_core23, RENDER_DIMENSIONS, WORKGROUP_SIZE, RENDER_SOURCE_SAMPLER_LAYOUT, COMPUTE_SOURCE_TEXTURE_LAYOUT, COMPUTE_UNIFORMS_LAYOUT;
+var init_generate_mipmaps_webgpu = __esm({
+  "dist/adapter/helpers/generate-mipmaps-webgpu.js"() {
+    "use strict";
+    import_core23 = require("@luma.gl/core");
+    RENDER_DIMENSIONS = [
+      "2d",
+      "2d-array",
+      "cube",
+      "cube-array"
+    ];
+    WORKGROUP_SIZE = {
+      x: 4,
+      y: 4,
+      z: 4
+    };
+    RENDER_SOURCE_SAMPLER_LAYOUT = {
+      type: "sampler",
+      name: "sourceSampler",
+      group: 0,
+      location: 0
+    };
+    COMPUTE_SOURCE_TEXTURE_LAYOUT = {
+      type: "texture",
+      name: "sourceTexture",
+      group: 0,
+      location: 0,
+      viewDimension: "3d",
+      sampleType: "float"
+    };
+    COMPUTE_UNIFORMS_LAYOUT = {
+      type: "uniform",
+      name: "uniforms",
+      group: 0,
+      location: 2
+    };
+  }
+});
+
+// dist/adapter/helpers/get-bind-group.js
+function getBindGroup(device, bindGroupLayout, shaderLayout, bindings, group) {
+  const entries = getBindGroupEntries(bindings, shaderLayout, group);
+  if (entries.length === 0) {
+    return null;
+  }
+  device.pushErrorScope("validation");
+  const bindGroup = device.handle.createBindGroup({
+    layout: bindGroupLayout,
+    entries
+  });
+  device.popErrorScope((error) => {
+    import_core24.log.error(`bindGroup creation: ${error.message}`, bindGroup)();
+  });
+  return bindGroup;
+}
+function getBindGroupEntries(bindings, shaderLayout, group) {
+  const entries = [];
+  for (const [bindingName, value] of Object.entries(bindings)) {
+    const exactBindingLayout = shaderLayout.bindings.find((binding) => binding.name === bindingName);
+    const bindingLayout = exactBindingLayout || (0, import_core24.getShaderLayoutBinding)(shaderLayout, bindingName);
+    const isShadowedAlias = !exactBindingLayout && bindingLayout ? bindingLayout.name in bindings : false;
+    if (!isShadowedAlias && (bindingLayout == null ? void 0 : bindingLayout.group) === group) {
+      const entry = bindingLayout ? getBindGroupEntry(value, bindingLayout.location, void 0, bindingName) : null;
+      if (entry) {
+        entries.push(entry);
+      }
+      if (value instanceof import_core24.Texture) {
+        const samplerBindingLayout = (0, import_core24.getShaderLayoutBinding)(shaderLayout, `${bindingName}Sampler`, {
+          ignoreWarnings: true
+        });
+        const samplerEntry = samplerBindingLayout ? samplerBindingLayout.group === group ? getBindGroupEntry(value, samplerBindingLayout.location, { sampler: true }, bindingName) : null : null;
+        if (samplerEntry) {
+          entries.push(samplerEntry);
+        }
+      }
+    }
+  }
+  return entries;
+}
+function getBindGroupEntry(binding, index, options, bindingName = "unknown") {
+  if (binding instanceof import_core24.Buffer) {
+    return {
+      binding: index,
+      resource: {
+        buffer: binding.handle
+      }
+    };
+  }
+  if (binding instanceof import_core24.Sampler) {
+    return {
+      binding: index,
+      resource: binding.handle
+    };
+  }
+  if (binding instanceof import_core24.TextureView) {
+    return {
+      binding: index,
+      resource: binding.handle
+    };
+  }
+  if (binding instanceof import_core24.Texture) {
+    if (options == null ? void 0 : options.sampler) {
+      return {
+        binding: index,
+        resource: binding.sampler.handle
+      };
+    }
+    return {
+      binding: index,
+      resource: binding.view.handle
+    };
+  }
+  import_core24.log.warn(`invalid binding ${bindingName}`, binding);
+  return null;
+}
+var import_core24;
+var init_get_bind_group = __esm({
+  "dist/adapter/helpers/get-bind-group.js"() {
+    "use strict";
+    import_core24 = require("@luma.gl/core");
+  }
+});
+
 // dist/adapter/webgpu-device.js
 var webgpu_device_exports = {};
 __export(webgpu_device_exports, {
   WebGPUDevice: () => WebGPUDevice
 });
-var import_core23, WebGPUDevice;
+function scheduleMicrotask(callback) {
+  if (globalThis.queueMicrotask) {
+    globalThis.queueMicrotask(callback);
+    return;
+  }
+  Promise.resolve().then(callback).catch(() => {
+  });
+}
+var import_core25, WebGPUDevice;
 var init_webgpu_device = __esm({
   "dist/adapter/webgpu-device.js"() {
     "use strict";
-    import_core23 = require("@luma.gl/core");
+    import_core25 = require("@luma.gl/core");
     init_webgpu_buffer();
     init_webgpu_texture();
     init_webgpu_external_texture();
@@ -2016,12 +3133,16 @@ var init_webgpu_device = __esm({
     init_webgpu_compute_pipeline();
     init_webgpu_vertex_array();
     init_webgpu_canvas_context();
+    init_webgpu_presentation_context();
     init_webgpu_command_encoder();
     init_webgpu_query_set();
     init_webgpu_pipeline_layout();
     init_webgpu_fence();
     init_get_shader_layout_wgsl();
-    WebGPUDevice = class extends import_core23.Device {
+    init_generate_mipmaps_webgpu();
+    init_get_bind_group();
+    init_cpu_hotspot_profiler();
+    WebGPUDevice = class extends import_core25.Device {
       /** The underlying WebGPU device */
       handle;
       /* The underlying WebGPU adapter */
@@ -2038,6 +3159,7 @@ var init_webgpu_device = __esm({
       lost;
       canvasContext = null;
       _isLost = false;
+      _defaultSampler = null;
       commandEncoder;
       get [Symbol.toStringTag]() {
         return "WebGPUDevice";
@@ -2064,7 +3186,7 @@ var init_webgpu_device = __esm({
           this._isLost = true;
           resolve({ reason: "destroyed", message: lostInfo.message });
         });
-        const canvasContextProps = import_core23.Device._getCanvasContextProps(props);
+        const canvasContextProps = import_core25.Device._getCanvasContextProps(props);
         if (canvasContextProps) {
           this.canvasContext = new WebGPUCanvasContext(this, this.adapter, canvasContextProps);
         }
@@ -2075,6 +3197,10 @@ var init_webgpu_device = __esm({
       // const {glsl = true} = props;
       // this.glslang = glsl && await loadGlslangModule();
       destroy() {
+        var _a, _b;
+        (_a = this.commandEncoder) == null ? void 0 : _a.destroy();
+        (_b = this._defaultSampler) == null ? void 0 : _b.destroy();
+        this._defaultSampler = null;
         this.handle.destroy();
       }
       get isLost() {
@@ -2103,6 +3229,12 @@ var init_webgpu_device = __esm({
       createSampler(props) {
         return new WebGPUSampler(this, props);
       }
+      getDefaultSampler() {
+        this._defaultSampler ||= new WebGPUSampler(this, {
+          id: `${this.id}-default-sampler`
+        });
+        return this._defaultSampler;
+      }
       createRenderPipeline(props) {
         return new WebGPURenderPipeline(this, props);
       }
@@ -2131,32 +3263,129 @@ var init_webgpu_device = __esm({
       createCanvasContext(props) {
         return new WebGPUCanvasContext(this, this.adapter, props);
       }
+      createPresentationContext(props) {
+        return new WebGPUPresentationContext(this, props);
+      }
       createPipelineLayout(props) {
         return new WebGPUPipelineLayout(this, props);
       }
+      generateMipmapsWebGPU(texture) {
+        generateMipmapsWebGPU(this, texture);
+      }
+      _createBindGroupLayoutWebGPU(pipeline, group) {
+        return pipeline.handle.getBindGroupLayout(group);
+      }
+      _createBindGroupWebGPU(bindGroupLayout, shaderLayout, bindings, group) {
+        if (Object.keys(bindings).length === 0) {
+          return this.handle.createBindGroup({
+            layout: bindGroupLayout,
+            entries: []
+          });
+        }
+        return getBindGroup(this, bindGroupLayout, shaderLayout, bindings, group);
+      }
       submit(commandBuffer) {
+        let submittedCommandEncoder = null;
         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) => {
-          this.reportError(new Error(`${this} command submission: ${error.message}`), this)();
-          this.debug();
+          ({ submittedCommandEncoder, commandBuffer } = this._finalizeDefaultCommandEncoderForSubmit());
+        }
+        const profiler = getCpuHotspotProfiler(this);
+        const startTime = profiler ? getTimestamp() : 0;
+        const submitReason = getCpuHotspotSubmitReason(this);
+        try {
+          this.pushErrorScope("validation");
+          const queueSubmitStartTime = profiler ? getTimestamp() : 0;
+          this.handle.queue.submit([commandBuffer.handle]);
+          if (profiler) {
+            profiler.queueSubmitCount = (profiler.queueSubmitCount || 0) + 1;
+            profiler.queueSubmitTimeMs = (profiler.queueSubmitTimeMs || 0) + (getTimestamp() - queueSubmitStartTime);
+          }
+          this.popErrorScope((error) => {
+            this.reportError(new Error(`${this} command submission: ${error.message}`), this)();
+            this.debug();
+          });
+          if (submittedCommandEncoder) {
+            const submitResolveKickoffStartTime = profiler ? getTimestamp() : 0;
+            scheduleMicrotask(() => {
+              submittedCommandEncoder.resolveTimeProfilingQuerySet().then(() => {
+                this.commandEncoder._gpuTimeMs = submittedCommandEncoder._gpuTimeMs;
+              }).catch(() => {
+              });
+            });
+            if (profiler) {
+              profiler.submitResolveKickoffCount = (profiler.submitResolveKickoffCount || 0) + 1;
+              profiler.submitResolveKickoffTimeMs = (profiler.submitResolveKickoffTimeMs || 0) + (getTimestamp() - submitResolveKickoffStartTime);
+            }
+          }
+        } finally {
+          if (profiler) {
+            profiler.submitCount = (profiler.submitCount || 0) + 1;
+            profiler.submitTimeMs = (profiler.submitTimeMs || 0) + (getTimestamp() - startTime);
+            const reasonCountKey = submitReason === "query-readback" ? "queryReadbackSubmitCount" : "defaultSubmitCount";
+            const reasonTimeKey = submitReason === "query-readback" ? "queryReadbackSubmitTimeMs" : "defaultSubmitTimeMs";
+            profiler[reasonCountKey] = (profiler[reasonCountKey] || 0) + 1;
+            profiler[reasonTimeKey] = (profiler[reasonTimeKey] || 0) + (getTimestamp() - startTime);
+          }
+          const commandBufferDestroyStartTime = profiler ? getTimestamp() : 0;
+          commandBuffer.destroy();
+          if (profiler) {
+            profiler.commandBufferDestroyCount = (profiler.commandBufferDestroyCount || 0) + 1;
+            profiler.commandBufferDestroyTimeMs = (profiler.commandBufferDestroyTimeMs || 0) + (getTimestamp() - commandBufferDestroyStartTime);
+          }
+        }
+      }
+      _finalizeDefaultCommandEncoderForSubmit() {
+        const submittedCommandEncoder = this.commandEncoder;
+        if (submittedCommandEncoder.getTimeProfilingSlotCount() > 0 && submittedCommandEncoder.getTimeProfilingQuerySet() instanceof WebGPUQuerySet) {
+          const querySet = submittedCommandEncoder.getTimeProfilingQuerySet();
+          querySet._encodeResolveToReadBuffer(submittedCommandEncoder, {
+            firstQuery: 0,
+            queryCount: submittedCommandEncoder.getTimeProfilingSlotCount()
+          });
+        }
+        const commandBuffer = submittedCommandEncoder.finish();
+        this.commandEncoder.destroy();
+        this.commandEncoder = this.createCommandEncoder({
+          id: submittedCommandEncoder.props.id,
+          timeProfilingQuerySet: submittedCommandEncoder.getTimeProfilingQuerySet()
         });
+        return { submittedCommandEncoder, commandBuffer };
       }
       // WebGPU specific
       pushErrorScope(scope) {
+        if (!this.props.debug) {
+          return;
+        }
+        const profiler = getCpuHotspotProfiler(this);
+        const startTime = profiler ? getTimestamp() : 0;
         this.handle.pushErrorScope(scope);
+        if (profiler) {
+          profiler.errorScopePushCount = (profiler.errorScopePushCount || 0) + 1;
+          profiler.errorScopeTimeMs = (profiler.errorScopeTimeMs || 0) + (getTimestamp() - startTime);
+        }
       }
       popErrorScope(handler) {
+        if (!this.props.debug) {
+          return;
+        }
+        const profiler = getCpuHotspotProfiler(this);
+        const startTime = profiler ? getTimestamp() : 0;
         this.handle.popErrorScope().then((error) => {
           if (error) {
             handler(error);
           }
+        }).catch((error) => {
+          if (this.shouldIgnoreDroppedInstanceError(error, "popErrorScope")) {
+            return;
+          }
+          const errorMessage = error instanceof Error ? error.message : String(error);
+          this.reportError(new Error(`${this} popErrorScope failed: ${errorMessage}`), this)();
+          this.debug();
         });
+        if (profiler) {
+          profiler.errorScopePopCount = (profiler.errorScopePopCount || 0) + 1;
+          profiler.errorScopeTimeMs = (profiler.errorScopeTimeMs || 0) + (getTimestamp() - startTime);
+        }
       }
       // PRIVATE METHODS
       _getInfo() {
@@ -2164,10 +3393,12 @@ var init_webgpu_device = __esm({
         const vendor = this.adapterInfo.vendor || this.adapter.__brand || "unknown";
         const renderer = driver || "";
         const version = driverVersion || "";
-        const gpu = vendor === "apple" ? "apple" : "unknown";
+        const fallback = Boolean(this.adapterInfo.isFallbackAdapter ?? this.adapter.isFallbackAdapter ?? false);
+        const softwareRenderer = /SwiftShader/i.test(`${vendor} ${renderer} ${this.adapterInfo.architecture || ""}`);
+        const gpu = vendor === "apple" ? "apple" : softwareRenderer || fallback ? "software" : "unknown";
         const gpuArchitecture = this.adapterInfo.architecture || "unknown";
         const gpuBackend = this.adapterInfo.backend || "unknown";
-        const gpuType = (this.adapterInfo.type || "").split(" ")[0].toLowerCase() || "unknown";
+        const gpuType = (this.adapterInfo.type || "").split(" ")[0].toLowerCase() || (softwareRenderer || fallback ? "cpu" : "unknown");
         return {
           type: "webgpu",
           vendor,
@@ -2177,10 +3408,15 @@ var init_webgpu_device = __esm({
           gpuType,
           gpuBackend,
           gpuArchitecture,
+          fallback,
           shadingLanguage: "wgsl",
           shadingLanguageVersion: 100
         };
       }
+      shouldIgnoreDroppedInstanceError(error, operation) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        return errorMessage.includes("Instance dropped") && (!operation || errorMessage.includes(operation)) && (this._isLost || this.info.gpu === "software" || this.info.gpuType === "cpu" || Boolean(this.info.fallback));
+      }
       _getFeatures() {
         const features = new Set(this.handle.features);
         if (features.has("depth-clamping")) {
@@ -2197,7 +3433,6 @@ var init_webgpu_device = __esm({
           features.add("snorm16-renderable-webgl");
         }
         const WEBGPU_ALWAYS_FEATURES = [
-          "timer-query-webgl",
           "compilation-status-async-webgl",
           "float32-renderable-webgl",
           "float16-renderable-webgl",
@@ -2208,7 +3443,7 @@ var init_webgpu_device = __esm({
         for (const feature of WEBGPU_ALWAYS_FEATURES) {
           features.add(feature);
         }
-        return new import_core23.DeviceFeatures(Array.from(features), this.props._disabledFeatures);
+        return new import_core25.DeviceFeatures(Array.from(features), this.props._disabledFeatures);
       }
       _getDeviceSpecificTextureFormatCapabilities(capabilities) {
         const { format } = capabilities;
@@ -2236,8 +3471,8 @@ __export(dist_exports, {
 module.exports = __toCommonJS(dist_exports);
 
 // dist/adapter/webgpu-adapter.js
-var import_core24 = require("@luma.gl/core");
-var WebGPUAdapter = class extends import_core24.Adapter {
+var import_core26 = require("@luma.gl/core");
+var WebGPUAdapter = class extends import_core26.Adapter {
   /** type of device's created by this adapter */
   type = "webgpu";
   isSupported() {
@@ -2284,14 +3519,14 @@ var WebGPUAdapter = class extends import_core24.Adapter {
       requiredLimits
     });
     const { WebGPUDevice: WebGPUDevice2 } = await Promise.resolve().then(() => (init_webgpu_device(), webgpu_device_exports));
-    import_core24.log.groupCollapsed(1, "WebGPUDevice created")();
+    import_core26.log.groupCollapsed(1, "WebGPUDevice created")();
     try {
       const device = new WebGPUDevice2(props, gpuDevice, adapter, adapterInfo);
-      import_core24.log.probe(1, "Device created. For more info, set chrome://flags/#enable-webgpu-developer-features")();
-      import_core24.log.table(1, device.info)();
+      import_core26.log.probe(1, "Device created. For more info, set chrome://flags/#enable-webgpu-developer-features")();
+      import_core26.log.table(1, device.info)();
       return device;
     } finally {
-      import_core24.log.groupEnd(1)();
+      import_core26.log.groupEnd(1)();
     }
   }
   async attach(handle) {