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

package/dist/dist.dev.js

@@ -514,60 +514,70 @@ var __exports__ = (() => {
           };
         }
         readBuffer(options = {}, buffer) {
+          if (!buffer) {
+            throw new Error(`${this} readBuffer requires a destination buffer`);
+          }
           const { x: x2, y: y2, z: z2, width, height, depthOrArrayLayers, mipLevel, aspect } = this._getSupportedColorReadOptions(options);
-          const layout = this.computeMemoryLayout({ x: x2, y: y2, z: z2, 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) {
+          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 (${readBuffer.byteLength} < ${byteLength})`
+              `${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();
+          this.copyToBuffer(
+            commandEncoder,
+            { x: x2, y: y2, z: z2, 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 buffer;
+        }
+        async readDataAsync(options = {}) {
+          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: x2, y: y2, z: z2, 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(
-            // source
             {
               texture: this.handle,
               origin: { x: x2, y: y2, z: z2 },
-              // origin: [options.x, options.y, 0], // options.depth],
               mipLevel,
               aspect
-              // colorSpace: options.colorSpace,
-              // premultipliedAlpha: options.premultipliedAlpha
             },
-            // destination
             {
-              buffer: gpuReadBuffer,
-              offset: 0,
-              bytesPerRow,
-              rowsPerImage
+              buffer: webgpuBuffer.handle,
+              offset: byteOffset,
+              bytesPerRow: effectiveBytesPerRow,
+              rowsPerImage: effectiveRowsPerImage
             },
-            // copy size
             {
               width,
               height,
               depthOrArrayLayers
             }
           );
-          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;
-        }
-        async readDataAsync(options = {}) {
-          const buffer = this.readBuffer(options);
-          const data = await buffer.readAsync();
-          buffer.destroy();
-          return data.buffer;
         }
         writeBuffer(buffer, options_ = {}) {
           const options = this._normalizeTextureWriteOptions(options_);
@@ -780,7 +790,19 @@ var __exports__ = (() => {
         }
         /** 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;
         }
       };
@@ -870,6 +892,7 @@ var __exports__ = (() => {
           const depthStencil = addDepthStencil(descriptor);
           depthStencil.format = value;
         },
+        clearDepth: notSupported,
         depthBias: (_2, value, descriptor) => {
           const depthStencil = addDepthStencil(descriptor);
           depthStencil.depthBias = value;
@@ -1008,96 +1031,6 @@ var __exports__ = (() => {
     }
   });
 
-  // src/adapter/helpers/get-bind-group.ts
-  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?.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?.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({
-    "src/adapter/helpers/get-bind-group.ts"() {
-      "use strict";
-      import_core8 = __toESM(require_core(), 1);
-    }
-  });
-
   // src/adapter/helpers/get-vertex-buffer-layout.ts
   function getWebGPUVertexFormat(format) {
     if (format.endsWith("-webgl")) {
@@ -1105,9 +1038,10 @@ var __exports__ = (() => {
     }
     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";
@@ -1116,7 +1050,12 @@ var __exports__ = (() => {
       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?.location;
           format = attributeMapping.format || mapping.format;
           stepMode = attributeLayout?.stepMode || (attributeLayout?.name.startsWith("instance") ? "instance" : "vertex");
@@ -1125,14 +1064,19 @@ var __exports__ = (() => {
             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),
@@ -1147,10 +1091,10 @@ var __exports__ = (() => {
         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: [
             {
@@ -1169,10 +1113,13 @@ var __exports__ = (() => {
     });
     return vertexBufferLayouts;
   }
-  function findAttributeLayout(shaderLayout, name, attributeNames) {
-    const attribute = shaderLayout.attributes.find((attribute_) => attribute_.name === name);
+  function findAttributeLayout(shaderLayout, name, attributeNames, options) {
+    const attribute = shaderLayout.attributes?.find((attribute_) => attribute_.name === name);
     if (!attribute) {
-      import_core9.log.warn(`Supplied attribute not present in shader layout: ${name}`)();
+      const pipelineContext = 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) {
@@ -1183,47 +1130,58 @@ var __exports__ = (() => {
     }
     return attribute;
   }
-  var import_core9;
+  var import_core8;
   var init_get_vertex_buffer_layout = __esm({
     "src/adapter/helpers/get-vertex-buffer-layout.ts"() {
       "use strict";
-      import_core9 = __toESM(require_core(), 1);
+      import_core8 = __toESM(require_core(), 1);
     }
   });
 
   // src/adapter/resources/webgpu-render-pipeline.ts
-  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({
     "src/adapter/resources/webgpu-render-pipeline.ts"() {
       "use strict";
-      import_core10 = __toESM(require_core(), 1);
+      import_core9 = __toESM(require_core(), 1);
       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) => {
@@ -1232,10 +1190,12 @@ var __exports__ = (() => {
               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;
@@ -1245,21 +1205,20 @@ var __exports__ = (() => {
          * 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) {
@@ -1272,9 +1231,16 @@ var __exports__ = (() => {
 "${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) {
@@ -1296,17 +1262,11 @@ var __exports__ = (() => {
           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
@@ -1315,7 +1275,9 @@ var __exports__ = (() => {
           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) {
@@ -1355,12 +1317,12 @@ var __exports__ = (() => {
   });
 
   // src/adapter/resources/webgpu-framebuffer.ts
-  var import_core11, WebGPUFramebuffer;
+  var import_core10, WebGPUFramebuffer;
   var init_webgpu_framebuffer = __esm({
     "src/adapter/resources/webgpu-framebuffer.ts"() {
       "use strict";
-      import_core11 = __toESM(require_core(), 1);
-      WebGPUFramebuffer = class extends import_core11.Framebuffer {
+      import_core10 = __toESM(require_core(), 1);
+      WebGPUFramebuffer = class extends import_core10.Framebuffer {
         device;
         handle = null;
         colorAttachments = [];
@@ -1392,21 +1354,17 @@ var __exports__ = (() => {
   });
 
   // src/adapter/resources/webgpu-compute-pipeline.ts
-  var import_core12, EMPTY_BINDINGS2, WebGPUComputePipeline;
+  var import_core11, EMPTY_BIND_GROUPS, WebGPUComputePipeline;
   var init_webgpu_compute_pipeline = __esm({
     "src/adapter/resources/webgpu-compute-pipeline.ts"() {
       "use strict";
-      import_core12 = __toESM(require_core(), 1);
-      init_get_bind_group();
-      EMPTY_BINDINGS2 = {};
-      WebGPUComputePipeline = class extends import_core12.ComputePipeline {
+      import_core11 = __toESM(require_core(), 1);
+      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;
@@ -1420,34 +1378,42 @@ var __exports__ = (() => {
             },
             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;
         }
       };
     }
@@ -1534,13 +1500,13 @@ var __exports__ = (() => {
   });
 
   // src/adapter/resources/webgpu-vertex-array.ts
-  var import_core13, WebGPUVertexArray;
+  var import_core12, WebGPUVertexArray;
   var init_webgpu_vertex_array = __esm({
     "src/adapter/resources/webgpu-vertex-array.ts"() {
       "use strict";
-      import_core13 = __toESM(require_core(), 1);
+      import_core12 = __toESM(require_core(), 1);
       init_dist();
-      WebGPUVertexArray = class extends import_core13.VertexArray {
+      WebGPUVertexArray = class extends import_core12.VertexArray {
         get [Symbol.toStringTag]() {
           return "VertexArray";
         }
@@ -1569,7 +1535,7 @@ var __exports__ = (() => {
           const webgpuRenderPass = renderPass;
           const webgpuIndexBuffer = this.indexBuffer;
           if (webgpuIndexBuffer?.handle) {
-            import_core13.log.info(
+            import_core12.log.info(
               3,
               "setting index buffer",
               webgpuIndexBuffer?.handle,
@@ -1584,7 +1550,7 @@ var __exports__ = (() => {
           for (let location = 0; location < this.maxVertexAttributes; location++) {
             const webgpuBuffer = this.attributes[location];
             if (webgpuBuffer?.handle) {
-              import_core13.log.info(3, `setting vertex buffer ${location}`, webgpuBuffer?.handle)();
+              import_core12.log.info(3, `setting vertex buffer ${location}`, webgpuBuffer?.handle)();
               webgpuRenderPass.handle.setVertexBuffer(location, webgpuBuffer?.handle);
             }
           }
@@ -1604,14 +1570,14 @@ var __exports__ = (() => {
   });
 
   // src/adapter/webgpu-canvas-context.ts
-  var import_core14, WebGPUCanvasContext;
+  var import_core13, WebGPUCanvasContext;
   var init_webgpu_canvas_context = __esm({
     "src/adapter/webgpu-canvas-context.ts"() {
       "use strict";
-      import_core14 = __toESM(require_core(), 1);
+      import_core13 = __toESM(require_core(), 1);
       init_webgpu_framebuffer();
       init_cpu_hotspot_profiler();
-      WebGPUCanvasContext = class extends import_core14.CanvasContext {
+      WebGPUCanvasContext = class extends import_core13.CanvasContext {
         device;
         handle;
         colorAttachment = null;
@@ -1682,7 +1648,7 @@ var __exports__ = (() => {
               const [oldWidth, oldHeight] = this.getDrawingBufferSize();
               this.drawingBufferWidth = currentColorAttachment.width;
               this.drawingBufferHeight = currentColorAttachment.height;
-              import_core14.log.log(
+              import_core13.log.log(
                 1,
                 `${this}: Resized to compensate for initial canvas size mismatch ${oldWidth}x${oldHeight} => ${this.drawingBufferWidth}x${this.drawingBufferHeight}px`
               )();
@@ -1742,7 +1708,7 @@ var __exports__ = (() => {
             this.depthStencilAttachment?.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
@@ -1755,14 +1721,14 @@ var __exports__ = (() => {
   });
 
   // src/adapter/webgpu-presentation-context.ts
-  var import_core15, WebGPUPresentationContext;
+  var import_core14, WebGPUPresentationContext;
   var init_webgpu_presentation_context = __esm({
     "src/adapter/webgpu-presentation-context.ts"() {
       "use strict";
-      import_core15 = __toESM(require_core(), 1);
+      import_core14 = __toESM(require_core(), 1);
       init_webgpu_framebuffer();
       init_cpu_hotspot_profiler();
-      WebGPUPresentationContext = class extends import_core15.PresentationContext {
+      WebGPUPresentationContext = class extends import_core14.PresentationContext {
         device;
         handle;
         colorAttachment = null;
@@ -1830,7 +1796,7 @@ var __exports__ = (() => {
               const [oldWidth, oldHeight] = this.getDrawingBufferSize();
               this.drawingBufferWidth = currentColorAttachment.width;
               this.drawingBufferHeight = currentColorAttachment.height;
-              import_core15.log.log(
+              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`
               )();
@@ -1886,7 +1852,7 @@ var __exports__ = (() => {
             this.depthStencilAttachment?.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
@@ -1899,12 +1865,12 @@ var __exports__ = (() => {
   });
 
   // src/adapter/resources/webgpu-command-buffer.ts
-  var import_core16, WebGPUCommandBuffer;
+  var import_core15, WebGPUCommandBuffer;
   var init_webgpu_command_buffer = __esm({
     "src/adapter/resources/webgpu-command-buffer.ts"() {
       "use strict";
-      import_core16 = __toESM(require_core(), 1);
-      WebGPUCommandBuffer = class extends import_core16.CommandBuffer {
+      import_core15 = __toESM(require_core(), 1);
+      WebGPUCommandBuffer = class extends import_core15.CommandBuffer {
         device;
         handle;
         constructor(commandEncoder, props) {
@@ -1922,13 +1888,13 @@ var __exports__ = (() => {
   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({
     "src/adapter/resources/webgpu-render-pass.ts"() {
       "use strict";
-      import_core17 = __toESM(require_core(), 1);
+      import_core16 = __toESM(require_core(), 1);
       init_cpu_hotspot_profiler();
-      WebGPURenderPass = class extends import_core17.RenderPass {
+      WebGPURenderPass = class extends import_core16.RenderPass {
         device;
         handle;
         framebuffer;
@@ -1936,7 +1902,7 @@ var __exports__ = (() => {
         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;
@@ -1966,12 +1932,9 @@ var __exports__ = (() => {
               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);
@@ -1982,9 +1945,9 @@ var __exports__ = (() => {
               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;
@@ -2015,9 +1978,11 @@ var __exports__ = (() => {
         /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */
         setBindings(bindings) {
           this.bindings = bindings;
-          const bindGroup = this.pipeline?._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) {
@@ -2098,7 +2063,7 @@ var __exports__ = (() => {
               // clear values
               loadOp: this.props.clearColor !== false ? "clear" : "load",
               clearValue: convertColor(
-                this.props.clearColors?.[index] || this.props.clearColor || import_core17.RenderPass.defaultClearColor
+                this.props.clearColors?.[index] || this.props.clearColor || import_core16.RenderPass.defaultClearColor
               ),
               storeOp: this.props.discard ? "discard" : "store",
               // ...colorAttachment,
@@ -2134,16 +2099,16 @@ var __exports__ = (() => {
   });
 
   // src/adapter/resources/webgpu-compute-pass.ts
-  var import_core18, WebGPUComputePass;
+  var import_core17, WebGPUComputePass;
   var init_webgpu_compute_pass = __esm({
     "src/adapter/resources/webgpu-compute-pass.ts"() {
       "use strict";
-      import_core18 = __toESM(require_core(), 1);
-      WebGPUComputePass = class extends import_core18.ComputePass {
+      import_core17 = __toESM(require_core(), 1);
+      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;
@@ -2159,7 +2124,7 @@ var __exports__ = (() => {
               };
             }
           }
-          this.handle = this.props.handle || device.commandEncoder.handle.beginComputePass({
+          this.handle = this.props.handle || commandEncoder.beginComputePass({
             label: this.props.id,
             timestampWrites
           });
@@ -2179,15 +2144,28 @@ var __exports__ = (() => {
           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.
@@ -2223,15 +2201,15 @@ var __exports__ = (() => {
   });
 
   // src/adapter/resources/webgpu-command-encoder.ts
-  var import_core19, WebGPUCommandEncoder;
+  var import_core18, WebGPUCommandEncoder;
   var init_webgpu_command_encoder = __esm({
     "src/adapter/resources/webgpu-command-encoder.ts"() {
       "use strict";
-      import_core19 = __toESM(require_core(), 1);
+      import_core18 = __toESM(require_core(), 1);
       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 = {}) {
@@ -2265,51 +2243,132 @@ var __exports__ = (() => {
          * @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;
+          const webgpuDestinationBuffer = options.destinationBuffer;
           this.handle.copyBufferToBuffer(
             webgpuSourceBuffer.handle,
             options.sourceOffset ?? 0,
-            WebGPUDestinationBuffer.handle,
+            webgpuDestinationBuffer.handle,
             options.destinationOffset ?? 0,
             options.size ?? 0
           );
         }
         copyBufferToTexture(options) {
           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: options.extent?.[0],
-              height: options.extent?.[1],
-              depthOrArrayLayers: options.extent?.[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) {
+          const webgpuSourceTexture = options.sourceTexture;
+          const webgpuDestinationTexture = options.destinationTexture;
+          const sourceRegion = webgpuSourceTexture._normalizeTextureReadOptions({
+            x: options.origin?.[0] ?? 0,
+            y: options.origin?.[1] ?? 0,
+            z: options.origin?.[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: options.destinationOrigin?.[0] ?? 0,
+                y: options.destinationOrigin?.[1] ?? 0,
+                z: options.destinationOrigin?.[2] ?? 0
+              },
+              aspect: options.destinationAspect ?? sourceRegion.aspect
+            },
+            {
+              width: sourceRegion.width,
+              height: sourceRegion.height,
+              depthOrArrayLayers: sourceRegion.depthOrArrayLayers
+            }
+          );
         }
         pushDebugGroup(groupLabel) {
           this.handle.pushDebugGroup(groupLabel);
@@ -2351,13 +2410,13 @@ var __exports__ = (() => {
   });
 
   // src/adapter/resources/webgpu-query-set.ts
-  var import_core20, WebGPUQuerySet;
+  var import_core19, WebGPUQuerySet;
   var init_webgpu_query_set = __esm({
     "src/adapter/resources/webgpu-query-set.ts"() {
       "use strict";
-      import_core20 = __toESM(require_core(), 1);
+      import_core19 = __toESM(require_core(), 1);
       init_cpu_hotspot_profiler();
-      WebGPUQuerySet = class extends import_core20.QuerySet {
+      WebGPUQuerySet = class extends import_core19.QuerySet {
         device;
         handle;
         _resolveBuffer = null;
@@ -2465,13 +2524,13 @@ var __exports__ = (() => {
           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);
@@ -2508,36 +2567,40 @@ var __exports__ = (() => {
   });
 
   // src/adapter/resources/webgpu-pipeline-layout.ts
-  var import_core21, WebGPUPipelineLayout, isStorageTextureBindingLayout;
+  var import_core20, WebGPUPipelineLayout, isStorageTextureBindingLayout;
   var init_webgpu_pipeline_layout = __esm({
     "src/adapter/resources/webgpu-pipeline-layout.ts"() {
       "use strict";
-      import_core21 = __toESM(require_core(), 1);
-      WebGPUPipelineLayout = class extends import_core21.PipelineLayout {
+      import_core20 = __toESM(require_core(), 1);
+      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?.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) {
@@ -2590,17 +2653,17 @@ var __exports__ = (() => {
                 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) => {
@@ -2610,12 +2673,12 @@ var __exports__ = (() => {
   });
 
   // src/adapter/resources/webgpu-fence.ts
-  var import_core22, WebGPUFence;
+  var import_core21, WebGPUFence;
   var init_webgpu_fence = __esm({
     "src/adapter/resources/webgpu-fence.ts"() {
       "use strict";
-      import_core22 = __toESM(require_core(), 1);
-      WebGPUFence = class extends import_core22.Fence {
+      import_core21 = __toESM(require_core(), 1);
+      WebGPUFence = class extends import_core21.Fence {
         device;
         handle = null;
         signaled;
@@ -2625,6 +2688,11 @@ var __exports__ = (() => {
           this.device = device;
           this.signaled = device.handle.queue.onSubmittedWorkDone().then(() => {
             this._signaled = true;
+          }).catch((error) => {
+            if (this.device.shouldIgnoreDroppedInstanceError(error)) {
+              return;
+            }
+            throw error;
           });
         }
         isSignaled() {
@@ -8590,7 +8658,7 @@ var __exports__ = (() => {
     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) {
@@ -8610,6 +8678,14 @@ var __exports__ = (() => {
         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",
@@ -8683,11 +8759,11 @@ var __exports__ = (() => {
     }
     return { viewDimension, sampleType, multisampled };
   }
-  var import_core23;
+  var import_core22;
   var init_get_shader_layout_wgsl = __esm({
     "src/wgsl/get-shader-layout-wgsl.ts"() {
       "use strict";
-      import_core23 = __toESM(require_core(), 1);
+      import_core22 = __toESM(require_core(), 1);
       init_wgsl_reflect_module();
     }
   });
@@ -8721,7 +8797,7 @@ var __exports__ = (() => {
     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 = {
@@ -8839,7 +8915,7 @@ var __exports__ = (() => {
     }
   }
   function getColorAttachmentFormat(format, path, dimension) {
-    if (import_core24.textureFormatDecoder.isColor(format)) {
+    if (import_core23.textureFormatDecoder.isColor(format)) {
       return format;
     }
     throw new Error(
@@ -8875,7 +8951,7 @@ var __exports__ = (() => {
     });
     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;
@@ -9144,11 +9220,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({
     "src/adapter/helpers/generate-mipmaps-webgpu.ts"() {
       "use strict";
-      import_core24 = __toESM(require_core(), 1);
+      import_core23 = __toESM(require_core(), 1);
       RENDER_DIMENSIONS = [
         "2d",
         "2d-array",
@@ -9183,6 +9259,90 @@ fn main(@builtin(global_invocation_id) id: vec3<u32>) {
     }
   });
 
+  // src/adapter/helpers/get-bind-group.ts
+  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?.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?.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({
+    "src/adapter/helpers/get-bind-group.ts"() {
+      "use strict";
+      import_core24 = __toESM(require_core(), 1);
+    }
+  });
+
   // src/adapter/webgpu-device.ts
   var webgpu_device_exports = {};
   __export(webgpu_device_exports, {
@@ -9218,6 +9378,7 @@ fn main(@builtin(global_invocation_id) id: vec3<u32>) {
       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 */
@@ -9348,23 +9509,24 @@ fn main(@builtin(global_invocation_id) id: vec3<u32>) {
         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;
@@ -9411,6 +9573,23 @@ fn main(@builtin(global_invocation_id) id: vec3<u32>) {
             }
           }
         }
+        _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) {
@@ -9434,6 +9613,13 @@ fn main(@builtin(global_invocation_id) id: vec3<u32>) {
             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;
@@ -9446,10 +9632,16 @@ fn main(@builtin(global_invocation_id) id: vec3<u32>) {
           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,
@@ -9459,10 +9651,15 @@ fn main(@builtin(global_invocation_id) id: vec3<u32>) {
             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")) {