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

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,13 +472,16 @@ 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 { x, y, z, width, height, depthOrArrayLayers, mipLevel, aspect } = this._getSupportedColorReadOptions(options);
+        const layout = this.computeMemoryLayout({ x, y, z, width, height, depthOrArrayLayers, mipLevel });
         const { bytesPerRow, rowsPerImage, byteLength } = layout;
         const readBuffer = buffer || this.device.createBuffer({
           byteLength,
           usage: import_core4.Buffer.COPY_DST | import_core4.Buffer.MAP_READ
         });
+        if (readBuffer.byteLength < byteLength) {
+          throw new Error(`${this} readBuffer target is too small (${readBuffer.byteLength} < ${byteLength})`);
+        }
         const gpuReadBuffer = readBuffer.handle;
         const gpuDevice = this.device.handle;
         this.device.pushErrorScope("validation");
@@ -454,16 +525,15 @@ var init_webgpu_texture = __esm({
         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;
+      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 +549,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);
+      }
     };
   }
 });
@@ -819,14 +944,12 @@ var init_webgpu_parameters = __esm({
 function getBindGroup(device, bindGroupLayout, shaderLayout, bindings) {
   const entries = getBindGroupEntries(bindings, shaderLayout);
   device.pushErrorScope("validation");
-  const bindGroup = device.createBindGroup({
+  const bindGroup = device.handle.createBindGroup({
     layout: bindGroupLayout,
     entries
   });
-  device.popErrorScope().then((error) => {
-    if (error) {
-      import_core8.log.error(`bindGroup creation: ${error.message}`, bindGroup)();
-    }
+  device.popErrorScope((error) => {
+    import_core8.log.error(`bindGroup creation: ${error.message}`, bindGroup)();
   });
   return bindGroup;
 }
@@ -840,21 +963,21 @@ function getShaderLayoutBinding(shaderLayout, bindingName, options) {
 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);
+    const exactBindingLayout = shaderLayout.bindings.find((binding) => binding.name === bindingName);
+    const bindingLayout = exactBindingLayout || getShaderLayoutBinding(shaderLayout, bindingName);
+    const isShadowedAlias = !exactBindingLayout && bindingLayout ? bindingLayout.name in bindings : false;
+    if (!isShadowedAlias) {
+      const entry = bindingLayout ? getBindGroupEntry(value, bindingLayout.location, void 0, bindingName) : null;
       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);
+      if (value instanceof import_core8.Texture) {
+        const samplerBindingLayout = getShaderLayoutBinding(shaderLayout, `${bindingName}Sampler`, {
+          ignoreWarnings: true
+        });
+        const samplerEntry = samplerBindingLayout ? getBindGroupEntry(value, samplerBindingLayout.location, { sampler: true }, bindingName) : null;
+        if (samplerEntry) {
+          entries.push(samplerEntry);
         }
       }
     }
@@ -999,7 +1122,7 @@ var init_get_vertex_buffer_layout = __esm({
 });
 
 // dist/adapter/resources/webgpu-render-pipeline.js
-var import_core10, WebGPURenderPipeline;
+var import_core10, EMPTY_BINDINGS, WebGPURenderPipeline;
 var init_webgpu_render_pipeline = __esm({
   "dist/adapter/resources/webgpu-render-pipeline.js"() {
     "use strict";
@@ -1008,13 +1131,15 @@ var init_webgpu_render_pipeline = __esm({
     init_convert_texture_format();
     init_get_bind_group();
     init_get_vertex_buffer_layout();
+    EMPTY_BINDINGS = {};
     WebGPURenderPipeline = class extends import_core10.RenderPipeline {
       device;
       handle;
       vs;
       fs = null;
-      /** For internal use to create BindGroups */
+      /** Compatibility path for direct pipeline.setBindings() usage */
       _bindings;
+      /** For internal use to create BindGroups */
       _bindGroupLayout = null;
       _bindGroup = null;
       get [Symbol.toStringTag]() {
@@ -1040,26 +1165,36 @@ var init_webgpu_render_pipeline = __esm({
         this.handle.label = this.props.id;
         this.vs = props.vs;
         this.fs = props.fs;
-        this._bindings = { ...this.props.bindings };
+        this._bindings = props.bindings || EMPTY_BINDINGS;
       }
       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) {
+        let bindingsChanged = false;
         for (const [name, binding] of Object.entries(bindings)) {
           if (this._bindings[name] !== binding) {
-            this._bindGroup = null;
+            if (!bindingsChanged) {
+              if (this._bindings === this.props.bindings || this._bindings === EMPTY_BINDINGS) {
+                this._bindings = { ...this._bindings };
+              }
+              bindingsChanged = true;
+            }
+            this._bindings[name] = binding;
           }
         }
-        Object.assign(this._bindings, bindings);
+        if (bindingsChanged) {
+          this._bindGroup = null;
+        }
       }
       /** @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,31 +1202,29 @@ var init_webgpu_render_pipeline = __esm({
 "${error.message}"`), this)();
           this.device.debug();
         });
-        const bindGroup = this._getBindGroup();
+        const bindGroup = this._getBindGroup(options.bindings);
         if (bindGroup) {
           webgpuRenderPass.handle.setBindGroup(0, 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() {
+      _getBindGroup(bindings) {
         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);
+        if (bindings) {
+          return getBindGroup(this.device, this._bindGroupLayout, this.shaderLayout, bindings);
+        }
+        this._bindGroup = this._bindGroup || getBindGroup(this.device, this._bindGroupLayout, this.shaderLayout, this._bindings);
         return this._bindGroup;
       }
       /**
@@ -1158,17 +1291,33 @@ 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_core12, EMPTY_BINDINGS2, 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();
+    EMPTY_BINDINGS2 = {};
     WebGPUComputePipeline = class extends import_core12.ComputePipeline {
       device;
       handle;
@@ -1176,7 +1325,7 @@ var init_webgpu_compute_pipeline = __esm({
       _bindGroupLayout = null;
       _bindGroup = null;
       /** For internal use to create BindGroups */
-      _bindings = {};
+      _bindings;
       constructor(device, props) {
         super(device, props);
         this.device = device;
@@ -1190,18 +1339,33 @@ var init_webgpu_compute_pipeline = __esm({
           },
           layout: "auto"
         });
+        this._bindings = EMPTY_BINDINGS2;
       }
       /**
        * @todo Use renderpass.setBindings() ?
        * @todo Do we want to expose BindGroups in the API and remove this?
        */
       setBindings(bindings) {
-        Object.assign(this._bindings, bindings);
+        let bindingsChanged = false;
+        for (const [name, binding] of Object.entries(bindings)) {
+          if (this._bindings[name] !== binding) {
+            if (!bindingsChanged) {
+              if (this._bindings === EMPTY_BINDINGS2) {
+                this._bindings = {};
+              }
+              bindingsChanged = true;
+            }
+            this._bindings[name] = binding;
+          }
+        }
+        if (bindingsChanged) {
+          this._bindGroup = null;
+        }
       }
       /** 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);
+        this._bindGroup = this._bindGroup || getBindGroup(this.device, this._bindGroupLayout, this.shaderLayout, this._bindings);
         return this._bindGroup;
       }
     };
@@ -1217,7 +1381,7 @@ var init_webgpu_vertex_array = __esm({
     import_env = require("@probe.gl/env");
     WebGPUVertexArray = class extends import_core13.VertexArray {
       get [Symbol.toStringTag]() {
-        return "WebGPUVertexArray";
+        return "VertexArray";
       }
       device;
       /** Vertex Array is just a helper class under WebGPU */
@@ -1280,10 +1444,13 @@ var init_webgpu_canvas_context = __esm({
     "use strict";
     import_core14 = require("@luma.gl/core");
     init_webgpu_framebuffer();
+    init_cpu_hotspot_profiler();
     WebGPUCanvasContext = class extends import_core14.CanvasContext {
       device;
       handle;
+      colorAttachment = null;
       depthStencilAttachment = null;
+      framebuffer = null;
       get [Symbol.toStringTag]() {
         return "WebGPUCanvasContext";
       }
@@ -1297,9 +1464,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,41 +1498,78 @@ 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_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);
+          }
+          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,
@@ -1367,17 +1584,157 @@ var init_webgpu_canvas_context = __esm({
   }
 });
 
+// dist/adapter/webgpu-presentation-context.js
+var import_core15, WebGPUPresentationContext;
+var init_webgpu_presentation_context = __esm({
+  "dist/adapter/webgpu-presentation-context.js"() {
+    "use strict";
+    import_core15 = require("@luma.gl/core");
+    init_webgpu_framebuffer();
+    init_cpu_hotspot_profiler();
+    WebGPUPresentationContext = class extends import_core15.PresentationContext {
+      device;
+      handle;
+      colorAttachment = null;
+      depthStencilAttachment = null;
+      framebuffer = null;
+      get [Symbol.toStringTag]() {
+        return "WebGPUPresentationContext";
+      }
+      constructor(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;
+        this.handle = context;
+        this._setAutoCreatedCanvasId(`${this.device.id}-presentation-canvas`);
+        this._configureDevice();
+        this._startObservers();
+      }
+      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();
+      }
+      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_core15.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_core15.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 import_core16, 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 {
+    import_core16 = require("@luma.gl/core");
+    WebGPUCommandBuffer = class extends import_core16.CommandBuffer {
       device;
       handle;
       constructor(commandEncoder, props) {
-        super(commandEncoder.device, {});
+        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"
@@ -1391,52 +1748,85 @@ var init_webgpu_command_buffer = __esm({
 function convertColor(color) {
   return { r: color[0], g: color[1], b: color[2], a: color[3] };
 }
-var import_core16, WebGPURenderPass;
+var import_core17, 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 {
+    import_core17 = require("@luma.gl/core");
+    init_cpu_hotspot_profiler();
+    WebGPURenderPass = class extends import_core17.RenderPass {
       device;
       handle;
+      framebuffer;
       /** Active pipeline */
       pipeline = null;
+      /** Latest bindings applied to this pass */
+      bindings = {};
       constructor(device, props = {}) {
         super(device, props);
         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");
+        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;
         }
-        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:
+        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);
+          }
+          if (!device.commandEncoder) {
+            throw new Error("commandEncoder not available");
+          }
+          this.device.pushErrorScope("validation");
+          const beginRenderPassStartTime = profiler ? getTimestamp() : 0;
+          this.handle = this.props.handle || device.commandEncoder.handle.beginRenderPass(renderPassDescriptor);
+          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)();
+            this.device.debug();
+          });
+          this.handle.label = this.props.id;
+          import_core17.log.groupCollapsed(3, `new WebGPURenderPass(${this.id})`)();
+          import_core17.log.probe(3, JSON.stringify(renderPassDescriptor, null, 2))();
+          import_core17.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,9 +1840,9 @@ 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();
+        var _a;
+        this.bindings = bindings;
+        const bindGroup = (_a = this.pipeline) == null ? void 0 : _a._getBindGroup(bindings);
         if (bindGroup) {
           this.handle.setBindGroup(0, bindGroup);
         }
@@ -1517,7 +1907,7 @@ var init_webgpu_render_pass = __esm({
           return {
             // clear values
             loadOp: this.props.clearColor !== false ? "clear" : "load",
-            clearValue: convertColor(((_a = this.props.clearColors) == null ? void 0 : _a[index]) || this.props.clearColor || import_core16.RenderPass.defaultClearColor),
+            clearValue: convertColor(((_a = this.props.clearColors) == null ? void 0 : _a[index]) || this.props.clearColor || import_core17.RenderPass.defaultClearColor),
             storeOp: this.props.discard ? "discard" : "store",
             // ...colorAttachment,
             view: colorAttachment.handle
@@ -1552,26 +1942,28 @@ var init_webgpu_render_pass = __esm({
 });
 
 // dist/adapter/resources/webgpu-compute-pass.js
-var import_core17, WebGPUComputePass;
+var import_core18, WebGPUComputePass;
 var init_webgpu_compute_pass = __esm({
   "dist/adapter/resources/webgpu-compute-pass.js"() {
     "use strict";
-    import_core17 = require("@luma.gl/core");
-    WebGPUComputePass = class extends import_core17.ComputePass {
+    import_core18 = require("@luma.gl/core");
+    WebGPUComputePass = class extends import_core18.ComputePass {
       device;
       handle;
       _webgpuPipeline = null;
-      constructor(device, props) {
+      constructor(device, props = {}) {
         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
             };
           }
         }
@@ -1582,9 +1974,14 @@ var init_webgpu_compute_pass = __esm({
       }
       /** @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;
@@ -1634,15 +2031,15 @@ var init_webgpu_compute_pass = __esm({
 });
 
 // dist/adapter/resources/webgpu-command-encoder.js
-var import_core18, WebGPUCommandEncoder;
+var import_core19, WebGPUCommandEncoder;
 var init_webgpu_command_encoder = __esm({
   "dist/adapter/resources/webgpu-command-encoder.js"() {
     "use strict";
-    import_core18 = require("@luma.gl/core");
+    import_core19 = require("@luma.gl/core");
     init_webgpu_command_buffer();
     init_webgpu_render_pass();
     init_webgpu_compute_pass();
-    WebGPUCommandEncoder = class extends import_core18.CommandEncoder {
+    WebGPUCommandEncoder = class extends import_core19.CommandEncoder {
       device;
       handle;
       constructor(device, props = {}) {
@@ -1656,6 +2053,7 @@ var init_webgpu_command_encoder = __esm({
         this.handle.label = this.props.id;
       }
       destroy() {
+        this.destroyResource();
       }
       finish(props) {
         this.device.pushErrorScope("validation");
@@ -1667,17 +2065,18 @@ 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));
       }
-      beginComputePass(props) {
-        return new WebGPUComputePass(this.device, props);
+      beginComputePass(props = {}) {
+        return new WebGPUComputePass(this.device, this._applyTimeProfilingToPassProps(props));
       }
       // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
       // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
@@ -1725,19 +2124,40 @@ 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();
+      }
     };
   }
 });
 
 // dist/adapter/resources/webgpu-query-set.js
-var import_core19, WebGPUQuerySet;
+var import_core20, WebGPUQuerySet;
 var init_webgpu_query_set = __esm({
   "dist/adapter/resources/webgpu-query-set.js"() {
     "use strict";
-    import_core19 = require("@luma.gl/core");
-    WebGPUQuerySet = class extends import_core19.QuerySet {
+    import_core20 = require("@luma.gl/core");
+    init_cpu_hotspot_profiler();
+    WebGPUQuerySet = class extends import_core20.QuerySet {
       device;
       handle;
+      _resolveBuffer = null;
+      _readBuffer = null;
+      _cachedResults = null;
+      _readResultsPromise = null;
+      _resultsPendingResolution = false;
       constructor(device, props) {
         super(device, props);
         this.device = device;
@@ -1749,20 +2169,145 @@ 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_core20.Buffer.QUERY_RESOLVE | import_core20.Buffer.COPY_SRC,
+          byteLength
+        });
+        this.attachResource(this._resolveBuffer);
+        this._readBuffer = this.device.createBuffer({
+          id: `${this.id}-read-buffer`,
+          usage: import_core20.Buffer.COPY_DST | import_core20.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;
       }
     };
   }
 });
 
 // dist/adapter/resources/webgpu-pipeline-layout.js
-var import_core20, WebGPUPipelineLayout, isStorageTextureBindingLayout;
+var import_core21, WebGPUPipelineLayout, isStorageTextureBindingLayout;
 var init_webgpu_pipeline_layout = __esm({
   "dist/adapter/resources/webgpu-pipeline-layout.js"() {
     "use strict";
-    import_core20 = require("@luma.gl/core");
-    WebGPUPipelineLayout = class extends import_core20.PipelineLayout {
+    import_core21 = require("@luma.gl/core");
+    WebGPUPipelineLayout = class extends import_core21.PipelineLayout {
       device;
       handle;
       constructor(device, props) {
@@ -1839,7 +2384,7 @@ var init_webgpu_pipeline_layout = __esm({
               break;
             }
             default: {
-              import_core20.log.warn("unhandled binding type when creating pipeline descriptor")();
+              import_core21.log.warn("unhandled binding type when creating pipeline descriptor")();
             }
           }
           const VISIBILITY_ALL = GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE;
@@ -1859,12 +2404,12 @@ var init_webgpu_pipeline_layout = __esm({
 });
 
 // dist/adapter/resources/webgpu-fence.js
-var import_core21, WebGPUFence;
+var import_core22, WebGPUFence;
 var init_webgpu_fence = __esm({
   "dist/adapter/resources/webgpu-fence.js"() {
     "use strict";
-    import_core21 = require("@luma.gl/core");
-    WebGPUFence = class extends import_core21.Fence {
+    import_core22 = require("@luma.gl/core");
+    WebGPUFence = class extends import_core22.Fence {
       device;
       handle = null;
       signaled;
@@ -1893,7 +2438,7 @@ function getShaderLayoutFromWGSL(source) {
   try {
     parsedWGSL = parseWGSL(source);
   } catch (error) {
-    import_core22.log.error(error.message)();
+    import_core23.log.error(error.message)();
     return shaderLayout;
   }
   for (const uniform of parsedWGSL.uniforms) {
@@ -1987,25 +2532,508 @@ function getTextureBindingFromReflect(v, opts) {
   }
   return { viewDimension, sampleType, multisampled };
 }
-var import_core22, import_wgsl_reflect;
+var import_core23, import_wgsl_reflect;
 var init_get_shader_layout_wgsl = __esm({
   "dist/wgsl/get-shader-layout-wgsl.js"() {
     "use strict";
-    import_core22 = require("@luma.gl/core");
+    import_core23 = require("@luma.gl/core");
     import_wgsl_reflect = require("wgsl_reflect");
   }
 });
 
+// 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_core24.Buffer.UNIFORM | import_core24.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_core24.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_core24.Buffer.UNIFORM | import_core24.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_core24, 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_core24 = 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/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 +3044,15 @@ 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_cpu_hotspot_profiler();
+    WebGPUDevice = class extends import_core25.Device {
       /** The underlying WebGPU device */
       handle;
       /* The underlying WebGPU adapter */
@@ -2038,6 +3069,7 @@ var init_webgpu_device = __esm({
       lost;
       canvasContext = null;
       _isLost = false;
+      _defaultSampler = null;
       commandEncoder;
       get [Symbol.toStringTag]() {
         return "WebGPUDevice";
@@ -2064,7 +3096,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 +3107,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 +3139,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 +3173,106 @@ 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);
+      }
       submit(commandBuffer) {
+        let submittedCommandEncoder = null;
         if (!commandBuffer) {
-          commandBuffer = this.commandEncoder.finish();
+          submittedCommandEncoder = this.commandEncoder;
+          if (submittedCommandEncoder.getTimeProfilingSlotCount() > 0 && submittedCommandEncoder.getTimeProfilingQuerySet() instanceof WebGPUQuerySet) {
+            const querySet = submittedCommandEncoder.getTimeProfilingQuerySet();
+            querySet._encodeResolveToReadBuffer(submittedCommandEncoder, {
+              firstQuery: 0,
+              queryCount: submittedCommandEncoder.getTimeProfilingSlotCount()
+            });
+          }
+          commandBuffer = submittedCommandEncoder.finish();
           this.commandEncoder.destroy();
-          this.commandEncoder = this.createCommandEncoder({ id: `${this.id}-default-encoder` });
+          this.commandEncoder = this.createCommandEncoder({
+            id: submittedCommandEncoder.props.id,
+            timeProfilingQuerySet: submittedCommandEncoder.getTimeProfilingQuerySet()
+          });
+        }
+        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);
+          }
         }
-        this.pushErrorScope("validation");
-        this.handle.queue.submit([commandBuffer.handle]);
-        this.popErrorScope((error) => {
-          this.reportError(new Error(`${this} command submission: ${error.message}`), this)();
-          this.debug();
-        });
       }
       // 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);
           }
         });
+        if (profiler) {
+          profiler.errorScopePopCount = (profiler.errorScopePopCount || 0) + 1;
+          profiler.errorScopeTimeMs = (profiler.errorScopeTimeMs || 0) + (getTimestamp() - startTime);
+        }
       }
       // PRIVATE METHODS
       _getInfo() {
@@ -2197,7 +3313,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 +3323,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 +3351,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 +3399,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) {