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

package/dist/index.cjs

@@ -472,58 +472,53 @@ var init_webgpu_texture = __esm({
         };
       }
       readBuffer(options = {}, buffer) {
+        if (!buffer) {
+          throw new Error(`${this} readBuffer requires a destination buffer`);
+        }
         const { x, y, z, width, height, depthOrArrayLayers, mipLevel, aspect } = this._getSupportedColorReadOptions(options);
-        const 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 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 gpuReadBuffer = readBuffer.handle;
         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;
+        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_);
@@ -711,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;
       }
     };
@@ -802,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;
@@ -940,94 +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.handle.createBindGroup({
-    layout: bindGroupLayout,
-    entries
-  });
-  device.popErrorScope((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)) {
-    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) {
-        const samplerBindingLayout = getShaderLayoutBinding(shaderLayout, `${bindingName}Sampler`, {
-          ignoreWarnings: true
-        });
-        const samplerEntry = samplerBindingLayout ? getBindGroupEntry(value, samplerBindingLayout.location, { sampler: true }, bindingName) : null;
-        if (samplerEntry) {
-          entries.push(samplerEntry);
-        }
-      }
-    }
-  }
-  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")) {
@@ -1035,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";
@@ -1046,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");
@@ -1055,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),
@@ -1077,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: [
           {
@@ -1099,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) {
@@ -1113,47 +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, EMPTY_BINDINGS, 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();
-    EMPTY_BINDINGS = {};
-    WebGPURenderPipeline = class extends import_core10.RenderPipeline {
+    WebGPURenderPipeline = class extends import_core9.RenderPipeline {
       device;
       handle;
+      descriptor;
       vs;
       fs = null;
       /** Compatibility path for direct pipeline.setBindings() usage */
-      _bindings;
-      /** For internal use to create BindGroups */
-      _bindGroupLayout = null;
-      _bindGroup = null;
+      _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) => {
@@ -1162,10 +1096,12 @@ 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 = props.bindings || EMPTY_BINDINGS;
+        this._bindingsByGroup = props.bindGroups || (0, import_core9.normalizeBindingsByGroup)(this.shaderLayout, props.bindings);
+        this._bindGroupCacheKeysByGroup = createBindGroupCacheKeys(this._bindingsByGroup);
       }
       destroy() {
         this.handle = null;
@@ -1175,21 +1111,20 @@ var init_webgpu_render_pipeline = __esm({
        * 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) {
-            if (!bindingsChanged) {
-              if (this._bindings === this.props.bindings || this._bindings === EMPTY_BINDINGS) {
-                this._bindings = { ...this._bindings };
+        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 };
               }
-              bindingsChanged = true;
+              this._bindingsByGroup[group][name] = binding;
+              this._bindGroupCacheKeysByGroup[group] = {};
             }
-            this._bindings[name] = binding;
           }
         }
-        if (bindingsChanged) {
-          this._bindGroup = null;
-        }
       }
       /** @todo - should this be moved to renderpass? */
       draw(options) {
@@ -1202,9 +1137,12 @@ var init_webgpu_render_pipeline = __esm({
 "${error.message}"`), this)();
           this.device.debug();
         });
-        const bindGroup = this._getBindGroup(options.bindings);
-        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) {
@@ -1215,17 +1153,11 @@ var init_webgpu_render_pipeline = __esm({
         options.vertexArray.unbindAfterRender(options.renderPass);
         return true;
       }
-      /** Return a bind group created by setBindings */
-      _getBindGroup(bindings) {
-        if (this.shaderLayout.bindings.length === 0) {
-          return null;
-        }
-        this._bindGroupLayout = this._bindGroupLayout || this.handle.getBindGroupLayout(0);
-        if (bindings) {
-          return getBindGroup(this.device, this._bindGroupLayout, this.shaderLayout, bindings);
-        }
-        this._bindGroup = this._bindGroup || getBindGroup(this.device, this._bindGroupLayout, this.shaderLayout, this._bindings);
-        return this._bindGroup;
+      _getBindingsByGroupWebGPU() {
+        return this._bindingsByGroup;
+      }
+      _getBindGroupCacheKeysWebGPU() {
+        return this._bindGroupCacheKeysByGroup;
       }
       /**
        * Populate the complex WebGPU GPURenderPipelineDescriptor
@@ -1234,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) {
@@ -1274,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 = [];
@@ -1311,21 +1245,17 @@ var init_webgpu_framebuffer = __esm({
 });
 
 // dist/adapter/resources/webgpu-compute-pipeline.js
-var import_core12, EMPTY_BINDINGS2, 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();
-    EMPTY_BINDINGS2 = {};
-    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;
@@ -1339,47 +1269,51 @@ var init_webgpu_compute_pipeline = __esm({
           },
           layout: "auto"
         });
-        this._bindings = EMPTY_BINDINGS2;
+        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) {
-        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 = {};
+        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 };
               }
-              bindingsChanged = true;
+              this._bindingsByGroup[group][name] = binding;
+              this._bindGroupCacheKeysByGroup[group] = {};
             }
-            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, 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 "VertexArray";
       }
@@ -1408,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
@@ -1418,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);
           }
         }
@@ -1438,14 +1372,14 @@ 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();
     init_cpu_hotspot_profiler();
-    WebGPUCanvasContext = class extends import_core14.CanvasContext {
+    WebGPUCanvasContext = class extends import_core13.CanvasContext {
       device;
       handle;
       colorAttachment = null;
@@ -1517,7 +1451,7 @@ var init_webgpu_canvas_context = __esm({
             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`)();
+            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);
@@ -1572,7 +1506,7 @@ var init_webgpu_canvas_context = __esm({
           (_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
@@ -1585,14 +1519,14 @@ var init_webgpu_canvas_context = __esm({
 });
 
 // dist/adapter/webgpu-presentation-context.js
-var import_core15, WebGPUPresentationContext;
+var import_core14, WebGPUPresentationContext;
 var init_webgpu_presentation_context = __esm({
   "dist/adapter/webgpu-presentation-context.js"() {
     "use strict";
-    import_core15 = require("@luma.gl/core");
+    import_core14 = require("@luma.gl/core");
     init_webgpu_framebuffer();
     init_cpu_hotspot_profiler();
-    WebGPUPresentationContext = class extends import_core15.PresentationContext {
+    WebGPUPresentationContext = class extends import_core14.PresentationContext {
       device;
       handle;
       colorAttachment = null;
@@ -1661,7 +1595,7 @@ var init_webgpu_presentation_context = __esm({
             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`)();
+            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);
@@ -1712,7 +1646,7 @@ var init_webgpu_presentation_context = __esm({
           (_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,
+            usage: import_core14.Texture.RENDER_ATTACHMENT,
             format: depthStencilFormat,
             width: this.drawingBufferWidth,
             height: this.drawingBufferHeight
@@ -1725,12 +1659,12 @@ var init_webgpu_presentation_context = __esm({
 });
 
 // dist/adapter/resources/webgpu-command-buffer.js
-var import_core16, WebGPUCommandBuffer;
+var import_core15, WebGPUCommandBuffer;
 var init_webgpu_command_buffer = __esm({
   "dist/adapter/resources/webgpu-command-buffer.js"() {
     "use strict";
-    import_core16 = require("@luma.gl/core");
-    WebGPUCommandBuffer = class extends import_core16.CommandBuffer {
+    import_core15 = require("@luma.gl/core");
+    WebGPUCommandBuffer = class extends import_core15.CommandBuffer {
       device;
       handle;
       constructor(commandEncoder, props) {
@@ -1748,13 +1682,13 @@ var init_webgpu_command_buffer = __esm({
 function convertColor(color) {
   return { r: color[0], g: color[1], b: color[2], a: color[3] };
 }
-var import_core17, WebGPURenderPass;
+var import_core16, WebGPURenderPass;
 var init_webgpu_render_pass = __esm({
   "dist/adapter/resources/webgpu-render-pass.js"() {
     "use strict";
-    import_core17 = require("@luma.gl/core");
+    import_core16 = require("@luma.gl/core");
     init_cpu_hotspot_profiler();
-    WebGPURenderPass = class extends import_core17.RenderPass {
+    WebGPURenderPass = class extends import_core16.RenderPass {
       device;
       handle;
       framebuffer;
@@ -1762,7 +1696,7 @@ var init_webgpu_render_pass = __esm({
       pipeline = null;
       /** Latest bindings applied to this pass */
       bindings = {};
-      constructor(device, props = {}) {
+      constructor(device, props = {}, commandEncoder = device.commandEncoder.handle) {
         super(device, props);
         this.device = device;
         const { props: renderPassProps } = this;
@@ -1792,12 +1726,9 @@ var init_webgpu_render_pass = __esm({
             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);
+          this.handle = this.props.handle || commandEncoder.beginRenderPass(renderPassDescriptor);
           if (profiler) {
             profiler.renderPassBeginCount = (profiler.renderPassBeginCount || 0) + 1;
             profiler.renderPassBeginTimeMs = (profiler.renderPassBeginTimeMs || 0) + (getTimestamp() - beginRenderPassStartTime);
@@ -1808,9 +1739,9 @@ var init_webgpu_render_pass = __esm({
             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)();
+          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;
@@ -1840,11 +1771,12 @@ var init_webgpu_render_pass = __esm({
       }
       /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */
       setBindings(bindings) {
-        var _a;
         this.bindings = bindings;
-        const bindGroup = (_a = this.pipeline) == null ? void 0 : _a._getBindGroup(bindings);
-        if (bindGroup) {
-          this.handle.setBindGroup(0, bindGroup);
+        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) {
@@ -1907,7 +1839,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_core17.RenderPass.defaultClearColor),
+            clearValue: convertColor(((_a = this.props.clearColors) == null ? void 0 : _a[index]) || this.props.clearColor || import_core16.RenderPass.defaultClearColor),
             storeOp: this.props.discard ? "discard" : "store",
             // ...colorAttachment,
             view: colorAttachment.handle
@@ -1942,16 +1874,16 @@ var init_webgpu_render_pass = __esm({
 });
 
 // dist/adapter/resources/webgpu-compute-pass.js
-var import_core18, WebGPUComputePass;
+var import_core17, WebGPUComputePass;
 var init_webgpu_compute_pass = __esm({
   "dist/adapter/resources/webgpu-compute-pass.js"() {
     "use strict";
-    import_core18 = require("@luma.gl/core");
-    WebGPUComputePass = class extends import_core18.ComputePass {
+    import_core17 = require("@luma.gl/core");
+    WebGPUComputePass = class extends import_core17.ComputePass {
       device;
       handle;
       _webgpuPipeline = null;
-      constructor(device, props = {}) {
+      constructor(device, props = {}, commandEncoder = device.commandEncoder.handle) {
         super(device, props);
         this.device = device;
         const { props: computePassProps } = this;
@@ -1967,7 +1899,7 @@ var init_webgpu_compute_pass = __esm({
             };
           }
         }
-        this.handle = this.props.handle || device.commandEncoder.handle.beginComputePass({
+        this.handle = this.props.handle || commandEncoder.beginComputePass({
           label: this.props.id,
           timestampWrites
         });
@@ -1987,15 +1919,24 @@ var init_webgpu_compute_pass = __esm({
         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.
@@ -2031,15 +1972,15 @@ var init_webgpu_compute_pass = __esm({
 });
 
 // dist/adapter/resources/webgpu-command-encoder.js
-var import_core19, WebGPUCommandEncoder;
+var import_core18, WebGPUCommandEncoder;
 var init_webgpu_command_encoder = __esm({
   "dist/adapter/resources/webgpu-command-encoder.js"() {
     "use strict";
-    import_core19 = require("@luma.gl/core");
+    import_core18 = require("@luma.gl/core");
     init_webgpu_command_buffer();
     init_webgpu_render_pass();
     init_webgpu_compute_pass();
-    WebGPUCommandEncoder = class extends import_core19.CommandEncoder {
+    WebGPUCommandEncoder = class extends import_core18.CommandEncoder {
       device;
       handle;
       constructor(device, props = {}) {
@@ -2073,42 +2014,97 @@ var init_webgpu_command_encoder = __esm({
        * @todo need to support a "Framebuffer" equivalent (aka preconfigured RenderPassDescriptors?).
        */
       beginRenderPass(props = {}) {
-        return new WebGPURenderPass(this.device, this._applyTimeProfilingToPassProps(props));
+        return new WebGPURenderPass(this.device, this._applyTimeProfilingToPassProps(props), this.handle);
       }
       beginComputePass(props = {}) {
-        return new WebGPUComputePass(this.device, this._applyTimeProfilingToPassProps(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);
@@ -2144,13 +2140,13 @@ var init_webgpu_command_encoder = __esm({
 });
 
 // dist/adapter/resources/webgpu-query-set.js
-var import_core20, WebGPUQuerySet;
+var import_core19, WebGPUQuerySet;
 var init_webgpu_query_set = __esm({
   "dist/adapter/resources/webgpu-query-set.js"() {
     "use strict";
-    import_core20 = require("@luma.gl/core");
+    import_core19 = require("@luma.gl/core");
     init_cpu_hotspot_profiler();
-    WebGPUQuerySet = class extends import_core20.QuerySet {
+    WebGPUQuerySet = class extends import_core19.QuerySet {
       device;
       handle;
       _resolveBuffer = null;
@@ -2259,13 +2255,13 @@ var init_webgpu_query_set = __esm({
         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,
+          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_core20.Buffer.COPY_DST | import_core20.Buffer.MAP_READ,
+          usage: import_core19.Buffer.COPY_DST | import_core19.Buffer.MAP_READ,
           byteLength
         });
         this.attachResource(this._readBuffer);
@@ -2302,36 +2298,32 @@ var init_webgpu_query_set = __esm({
 });
 
 // dist/adapter/resources/webgpu-pipeline-layout.js
-var import_core21, WebGPUPipelineLayout, isStorageTextureBindingLayout;
+var import_core20, WebGPUPipelineLayout, isStorageTextureBindingLayout;
 var init_webgpu_pipeline_layout = __esm({
   "dist/adapter/resources/webgpu-pipeline-layout.js"() {
     "use strict";
-    import_core21 = require("@luma.gl/core");
-    WebGPUPipelineLayout = class extends import_core21.PipelineLayout {
+    import_core20 = require("@luma.gl/core");
+    WebGPUPipelineLayout = class extends import_core20.PipelineLayout {
       device;
       handle;
       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) {
@@ -2384,17 +2376,17 @@ var init_webgpu_pipeline_layout = __esm({
               break;
             }
             default: {
-              import_core21.log.warn("unhandled binding type when creating pipeline descriptor")();
+              import_core20.log.warn("unhandled binding type when creating pipeline descriptor")();
             }
           }
           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) => {
@@ -2404,12 +2396,12 @@ var init_webgpu_pipeline_layout = __esm({
 });
 
 // dist/adapter/resources/webgpu-fence.js
-var import_core22, WebGPUFence;
+var import_core21, WebGPUFence;
 var init_webgpu_fence = __esm({
   "dist/adapter/resources/webgpu-fence.js"() {
     "use strict";
-    import_core22 = require("@luma.gl/core");
-    WebGPUFence = class extends import_core22.Fence {
+    import_core21 = require("@luma.gl/core");
+    WebGPUFence = class extends import_core21.Fence {
       device;
       handle = null;
       signaled;
@@ -2419,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() {
@@ -2438,7 +2435,7 @@ function getShaderLayoutFromWGSL(source) {
   try {
     parsedWGSL = parseWGSL(source);
   } catch (error) {
-    import_core23.log.error(error.message)();
+    import_core22.log.error(error.message)();
     return shaderLayout;
   }
   for (const uniform of parsedWGSL.uniforms) {
@@ -2458,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",
@@ -2532,11 +2537,11 @@ function getTextureBindingFromReflect(v, opts) {
   }
   return { viewDimension, sampleType, multisampled };
 }
-var import_core23, import_wgsl_reflect;
+var import_core22, import_wgsl_reflect;
 var init_get_shader_layout_wgsl = __esm({
   "dist/wgsl/get-shader-layout-wgsl.js"() {
     "use strict";
-    import_core23 = require("@luma.gl/core");
+    import_core22 = require("@luma.gl/core");
     import_wgsl_reflect = require("wgsl_reflect");
   }
 });
@@ -2564,7 +2569,7 @@ function generateMipmapsRender(device, texture) {
   const sampler = device.createSampler({ minFilter: "linear", magFilter: "linear" });
   const uniformsBuffer = device.createBuffer({
     byteLength: 16,
-    usage: import_core24.Buffer.UNIFORM | import_core24.Buffer.COPY_DST
+    usage: import_core23.Buffer.UNIFORM | import_core23.Buffer.COPY_DST
   });
   const uniformValues = new Uint32Array(1);
   const sourceTextureLayout = {
@@ -2676,7 +2681,7 @@ function generateMipmapsRender(device, texture) {
   }
 }
 function getColorAttachmentFormat(format, path, dimension) {
-  if (import_core24.textureFormatDecoder.isColor(format)) {
+  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.`);
@@ -2710,7 +2715,7 @@ function generateMipmaps3D(device, texture) {
   });
   const uniformsBuffer = device.createBuffer({
     byteLength: 32,
-    usage: import_core24.Buffer.UNIFORM | import_core24.Buffer.COPY_DST
+    usage: import_core23.Buffer.UNIFORM | import_core23.Buffer.COPY_DST
   });
   const uniformValues = new Uint32Array(8);
   let sourceWidth = texture.width;
@@ -2977,11 +2982,11 @@ fn main(@builtin(global_invocation_id) id: vec3<u32>) {
 }
 `;
 }
-var import_core24, RENDER_DIMENSIONS, WORKGROUP_SIZE, RENDER_SOURCE_SAMPLER_LAYOUT, COMPUTE_SOURCE_TEXTURE_LAYOUT, COMPUTE_UNIFORMS_LAYOUT;
+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_core24 = require("@luma.gl/core");
+    import_core23 = require("@luma.gl/core");
     RENDER_DIMENSIONS = [
       "2d",
       "2d-array",
@@ -3016,6 +3021,90 @@ var init_generate_mipmaps_webgpu = __esm({
   }
 });
 
+// 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, {
@@ -3051,6 +3140,7 @@ var init_webgpu_device = __esm({
     init_webgpu_fence();
     init_get_shader_layout_wgsl();
     init_generate_mipmaps_webgpu();
+    init_get_bind_group();
     init_cpu_hotspot_profiler();
     WebGPUDevice = class extends import_core25.Device {
       /** The underlying WebGPU device */
@@ -3182,23 +3272,22 @@ var init_webgpu_device = __esm({
       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) {
-          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: submittedCommandEncoder.props.id,
-            timeProfilingQuerySet: submittedCommandEncoder.getTimeProfilingQuerySet()
-          });
+          ({ submittedCommandEncoder, commandBuffer } = this._finalizeDefaultCommandEncoderForSubmit());
         }
         const profiler = getCpuHotspotProfiler(this);
         const startTime = profiler ? getTimestamp() : 0;
@@ -3245,6 +3334,23 @@ var init_webgpu_device = __esm({
           }
         }
       }
+      _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) {
@@ -3268,6 +3374,13 @@ var init_webgpu_device = __esm({
           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;
@@ -3280,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,
@@ -3293,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")) {