@luma.gl/webgpu 9.0.0-beta.5 → 9.0.0-beta.7

package/dist/index.cjs

@@ -33,7 +33,7 @@ __export(dist_exports, {
 module.exports = __toCommonJS(dist_exports);
 
 // dist/adapter/webgpu-device.js
-var import_core15 = require("@luma.gl/core");
+var import_core17 = require("@luma.gl/core");
 
 // dist/adapter/resources/webgpu-buffer.js
 var import_core = require("@luma.gl/core");
@@ -66,14 +66,19 @@ var WebGPUBuffer = class extends import_core.Buffer {
     }
   }
   destroy() {
-    this.handle.destroy();
+    var _a;
+    (_a = this.handle) == null ? void 0 : _a.destroy();
+    this.handle = null;
   }
   // WebGPU provides multiple ways to write a buffer...
   write(data, byteOffset = 0) {
     this.device.handle.queue.writeBuffer(this.handle, byteOffset, data.buffer, data.byteOffset, data.byteLength);
   }
   async readAsync(byteOffset = 0, byteLength = this.byteLength) {
-    const tempBuffer = new WebGPUBuffer(this.device, { usage: import_core.Buffer.MAP_READ | import_core.Buffer.COPY_DST, byteLength });
+    const tempBuffer = new WebGPUBuffer(this.device, {
+      usage: import_core.Buffer.MAP_READ | import_core.Buffer.COPY_DST,
+      byteLength
+    });
     const commandEncoder = this.device.handle.createCommandEncoder();
     commandEncoder.copyBufferToBuffer(this.handle, byteOffset, tempBuffer.handle, 0, byteLength);
     this.device.handle.queue.submit([commandEncoder.finish()]);
@@ -100,7 +105,7 @@ var WebGPUBuffer = class extends import_core.Buffer {
 };
 
 // dist/adapter/resources/webgpu-texture.js
-var import_core3 = require("@luma.gl/core");
+var import_core4 = require("@luma.gl/core");
 
 // dist/adapter/helpers/convert-texture-format.js
 function getWebGPUTextureFormat(format) {
@@ -126,6 +131,36 @@ var WebGPUSampler = class extends import_core2.Sampler {
     this.handle.label = this.props.id;
   }
   destroy() {
+    this.handle = null;
+  }
+};
+
+// dist/adapter/resources/webgpu-texture-view.js
+var import_core3 = require("@luma.gl/core");
+var WebGPUTextureView = class extends import_core3.TextureView {
+  device;
+  handle;
+  texture;
+  constructor(device, props) {
+    super(device, props);
+    this.device = device;
+    this.texture = props.texture;
+    this.handle = this.handle || this.texture.handle.createView({
+      format: props.format || this.texture.format,
+      dimension: props.dimension || this.texture.dimension,
+      aspect: props.aspect,
+      baseMipLevel: props.baseMipLevel,
+      mipLevelCount: props.mipLevelCount,
+      // GPUIntegerCoordinate;
+      baseArrayLayer: props.baseArrayLayer,
+      // GPUIntegerCoordinate;
+      arrayLayerCount: props.arrayLayerCount
+      // GPUIntegerCoordinate;
+    });
+    this.handle.label = this.props.id;
+  }
+  destroy() {
+    this.handle = null;
   }
 };
 
@@ -134,17 +169,17 @@ var BASE_DIMENSIONS = {
   "1d": "1d",
   "2d": "2d",
   "2d-array": "2d",
-  "cube": "2d",
+  cube: "2d",
   "cube-array": "2d",
   "3d": "3d"
 };
-var WebGPUTexture = class extends import_core3.Texture {
+var WebGPUTexture = class extends import_core4.Texture {
   device;
   handle;
-  view;
-  sampler;
   height = 1;
   width = 1;
+  sampler;
+  view;
   // static async createFromImageURL(src, usage = 0) {
   //   const img = document.createElement('img');
   //   img.src = src;
@@ -163,6 +198,14 @@ var WebGPUTexture = class extends import_core3.Texture {
     }
     this.initialize(props);
   }
+  destroy() {
+    var _a;
+    (_a = this.handle) == null ? void 0 : _a.destroy();
+    this.handle = null;
+  }
+  createView(props) {
+    return new WebGPUTextureView(this.device, { ...props, texture: this });
+  }
   initialize(props) {
     this.handle = this.props.handle || this.createHandle();
     this.handle.label ||= this.id;
@@ -172,7 +215,7 @@ var WebGPUTexture = class extends import_core3.Texture {
     this.width = this.handle.width;
     this.height = this.handle.height;
     this.sampler = props.sampler instanceof WebGPUSampler ? props.sampler : new WebGPUSampler(this.device, props.sampler);
-    this.view = this.createView();
+    this.view = new WebGPUTextureView(this.device, { ...this.props, texture: this });
   }
   createHandle() {
     var _a, _b;
@@ -192,9 +235,6 @@ var WebGPUTexture = class extends import_core3.Texture {
       sampleCount: this.props.samples
     });
   }
-  destroy() {
-    this.handle.destroy();
-  }
   /**
    * Set default sampler
    * Accept a sampler instance or set of props;
@@ -225,24 +265,15 @@ var WebGPUTexture = class extends import_core3.Texture {
         premultipliedAlpha
       },
       // copySize: GPUExtent3D
-      [
-        width,
-        height,
-        depth
-      ]
+      [width, height, depth]
     );
     return { width, height };
   }
-  // WebGPU specific 
-  /** TODO - intention is to expose TextureViews in the public API */
-  createView() {
-    return this.handle.createView({ label: this.id });
-  }
 };
 
 // dist/adapter/resources/webgpu-external-texture.js
-var import_core4 = require("@luma.gl/core");
-var WebGPUExternalTexture = class extends import_core4.ExternalTexture {
+var import_core5 = require("@luma.gl/core");
+var WebGPUExternalTexture = class extends import_core5.ExternalTexture {
   device;
   handle;
   sampler;
@@ -256,6 +287,7 @@ var WebGPUExternalTexture = class extends import_core4.ExternalTexture {
     this.sampler = null;
   }
   destroy() {
+    this.handle = null;
   }
   /** Set default sampler */
   setSampler(sampler) {
@@ -265,8 +297,8 @@ var WebGPUExternalTexture = class extends import_core4.ExternalTexture {
 };
 
 // dist/adapter/resources/webgpu-shader.js
-var import_core5 = require("@luma.gl/core");
-var WebGPUShader = class extends import_core5.Shader {
+var import_core6 = require("@luma.gl/core");
+var WebGPUShader = class extends import_core6.Shader {
   device;
   handle;
   constructor(device, props) {
@@ -282,11 +314,12 @@ var WebGPUShader = class extends import_core5.Shader {
     if (error) {
       this.debugShader();
       const shaderLog = await this.getCompilationInfo();
-      import_core5.log.error(`Shader compilation error: ${error.message}`, shaderLog)();
+      import_core6.log.error(`Shader compilation error: ${error.message}`, shaderLog)();
       throw new Error(`Shader compilation error: ${error.message}`);
     }
   }
   destroy() {
+    this.handle = null;
   }
   /** Returns compilation info for this shader */
   async getCompilationInfo() {
@@ -295,28 +328,17 @@ var WebGPUShader = class extends import_core5.Shader {
   }
   // PRIVATE METHODS
   createHandle() {
-    const { source, stage } = this.props;
-    let language = this.props.language;
-    if (language === "auto") {
-      language = source.includes("->") ? "wgsl" : "glsl";
-    }
-    switch (language) {
-      case "wgsl":
-        return this.device.handle.createShaderModule({ code: source });
-      case "glsl":
-        return this.device.handle.createShaderModule({
-          code: source,
-          // @ts-expect-error
-          transform: (glsl) => this.device.glslang.compileGLSL(glsl, stage)
-        });
-      default:
-        throw new Error(language);
+    const { source } = this.props;
+    const isGLSL = source.includes("#version");
+    if (this.props.language === "glsl" || isGLSL) {
+      throw new Error("GLSL shaders are not supported in WebGPU");
     }
+    return this.device.handle.createShaderModule({ code: source });
   }
 };
 
 // dist/adapter/resources/webgpu-render-pipeline.js
-var import_core8 = require("@luma.gl/core");
+var import_core9 = require("@luma.gl/core");
 
 // dist/adapter/helpers/webgpu-parameters.js
 function addDepthStencil(descriptor) {
@@ -504,7 +526,7 @@ function addColorState(descriptor) {
 }
 
 // dist/adapter/helpers/get-bind-group.js
-var import_core6 = require("@luma.gl/core");
+var import_core7 = require("@luma.gl/core");
 function getBindGroup(device, bindGroupLayout, shaderLayout, bindings) {
   const entries = getBindGroupEntries(bindings, shaderLayout);
   return device.createBindGroup({
@@ -515,7 +537,7 @@ function getBindGroup(device, bindGroupLayout, shaderLayout, bindings) {
 function getShaderLayoutBinding(shaderLayout, bindingName) {
   const bindingLayout = shaderLayout.bindings.find((binding) => binding.name === bindingName || `${binding.name}uniforms` === bindingName.toLocaleLowerCase());
   if (!bindingLayout) {
-    import_core6.log.warn(`Binding ${bindingName} not set: Not found in shader layout.`)();
+    import_core7.log.warn(`Binding ${bindingName} not set: Not found in shader layout.`)();
   }
   return bindingLayout;
 }
@@ -530,30 +552,30 @@ function getBindGroupEntries(bindings, shaderLayout) {
   return entries;
 }
 function getBindGroupEntry(binding, index) {
-  if (binding instanceof import_core6.Buffer) {
+  if (binding instanceof import_core7.Buffer) {
     return {
       binding: index,
       resource: {
-        buffer: (0, import_core6.cast)(binding).handle
+        buffer: (0, import_core7.cast)(binding).handle
       }
     };
   }
-  if (binding instanceof import_core6.Sampler) {
+  if (binding instanceof import_core7.Sampler) {
     return {
       binding: index,
-      resource: (0, import_core6.cast)(binding).handle
+      resource: (0, import_core7.cast)(binding).handle
     };
-  } else if (binding instanceof import_core6.Texture) {
+  } else if (binding instanceof import_core7.Texture) {
     return {
       binding: index,
-      resource: (0, import_core6.cast)(binding).handle.createView({ label: "bind-group-auto-created" })
+      resource: (0, import_core7.cast)(binding).handle.createView({ label: "bind-group-auto-created" })
     };
   }
   throw new Error("invalid binding");
 }
 
 // dist/adapter/helpers/get-vertex-buffer-layout.js
-var import_core7 = require("@luma.gl/core");
+var import_core8 = require("@luma.gl/core");
 function getWebGPUVertexFormat(format) {
   if (format.endsWith("-webgl")) {
     throw new Error(`WebGPU does not support vertex format ${format}`);
@@ -577,14 +599,14 @@ function getVertexBufferLayout(shaderLayout, bufferLayout) {
           offset: attributeMapping.byteOffset,
           shaderLocation: attributeLayout.location
         });
-        byteStride += (0, import_core7.decodeVertexFormat)(mapping.format).byteLength;
+        byteStride += (0, import_core8.decodeVertexFormat)(mapping.format).byteLength;
       }
     } else {
       const attributeLayout = findAttributeLayout(shaderLayout, mapping.name, usedAttributes);
       if (!attributeLayout) {
         continue;
       }
-      byteStride = (0, import_core7.decodeVertexFormat)(mapping.format).byteLength;
+      byteStride = (0, import_core8.decodeVertexFormat)(mapping.format).byteLength;
       stepMode = attributeLayout.stepMode || (attributeLayout.name.startsWith("instance") ? "instance" : "vertex");
       vertexAttributes.push({
         format: getWebGPUVertexFormat(mapping.format),
@@ -602,7 +624,7 @@ function getVertexBufferLayout(shaderLayout, bufferLayout) {
   for (const attribute of shaderLayout.attributes) {
     if (!usedAttributes.has(attribute.name)) {
       vertexBufferLayouts.push({
-        arrayStride: (0, import_core7.decodeVertexFormat)("float32x3").byteLength,
+        arrayStride: (0, import_core8.decodeVertexFormat)("float32x3").byteLength,
         stepMode: attribute.stepMode || (attribute.name.startsWith("instance") ? "instance" : "vertex"),
         attributes: [
           {
@@ -619,7 +641,7 @@ function getVertexBufferLayout(shaderLayout, bufferLayout) {
 function findAttributeLayout(shaderLayout, name, attributeNames) {
   const attribute = shaderLayout.attributes.find((attribute2) => attribute2.name === name);
   if (!attribute) {
-    import_core7.log.warn(`Unknown attribute ${name}`)();
+    import_core8.log.warn(`Unknown attribute ${name}`)();
     return null;
   }
   if (attributeNames.has(name)) {
@@ -630,16 +652,13 @@ function findAttributeLayout(shaderLayout, name, attributeNames) {
 }
 
 // dist/adapter/resources/webgpu-render-pipeline.js
-var WebGPURenderPipeline = class extends import_core8.RenderPipeline {
+var WebGPURenderPipeline = class extends import_core9.RenderPipeline {
   device;
   handle;
   vs;
   fs = null;
-  // private _bufferSlots: Record<string, number>;
-  // private _buffers: Buffer[];
-  // private _firstIndex: number;
-  // private _lastIndex: number;
   /** For internal use to create BindGroups */
+  _bindings;
   _bindGroupLayout = null;
   _bindGroup = null;
   constructor(device, props) {
@@ -648,53 +667,29 @@ var WebGPURenderPipeline = class extends import_core8.RenderPipeline {
     this.handle = this.props.handle;
     if (!this.handle) {
       const descriptor = this._getRenderPipelineDescriptor();
-      import_core8.log.groupCollapsed(1, `new WebGPURenderPipeline(${this.id})`)();
-      import_core8.log.probe(1, JSON.stringify(descriptor, null, 2))();
-      import_core8.log.groupEnd(1)();
+      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.handle = this.device.handle.createRenderPipeline(descriptor);
     }
     this.handle.label = this.props.id;
-    this.vs = (0, import_core8.cast)(props.vs);
-    this.fs = (0, import_core8.cast)(props.fs);
+    this.vs = (0, import_core9.cast)(props.vs);
+    this.fs = (0, import_core9.cast)(props.fs);
+    this._bindings = { ...this.props.bindings };
   }
   destroy() {
+    this.handle = null;
   }
-  // setIndexBuffer(indexBuffer: Buffer): void {
-  //   this._indexBuffer = cast<WebGPUBuffer>(indexBuffer);
-  // }
-  /*
-  setAttributes(attributes: Record<string, Buffer>): void {
-    for (const [name, buffer] of Object.entries(attributes)) {
-      const bufferIndex = this._bufferSlots[name];
-      if (bufferIndex >= 0) {
-        this._buffers[bufferIndex] = buffer;
-      } else {
-        throw new Error(
-          `Setting attribute '${name}' not listed in shader layout for program ${this.id}`
-        );
-      }
-    }
-    // for (let i = 0; i < this._bufferSlots.length; ++i) {
-    //   const bufferName = this._bufferSlots[i];
-    //   if (attributes[bufferName]) {
-    //     this.handle
-    //   }
-    // }
-  }
-  */
-  // setConstantAttributes(attributes: Record<string, TypedArray>): void {
-  //   throw new Error('not implemented');
-  // }
+  /**
+   * @todo Use renderpass.setBindings() ?
+   * @todo Do we want to expose BindGroups in the API and remove this?
+   */
   setBindings(bindings) {
-    Object.assign(this.props.bindings, bindings);
-  }
-  setUniforms(uniforms) {
-    if (!(0, import_core8.isObjectEmpty)(uniforms)) {
-      throw new Error("WebGPU does not support uniforms");
-    }
+    Object.assign(this._bindings, bindings);
   }
+  /** @todo - should this be moved to renderpass? */
   draw(options) {
-    const webgpuRenderPass = (0, import_core8.cast)(options.renderPass) || this.device.getDefaultRenderPass();
+    const webgpuRenderPass = options.renderPass;
     webgpuRenderPass.handle.setPipeline(this.handle);
     const bindGroup = this._getBindGroup();
     if (bindGroup) {
@@ -712,14 +707,15 @@ var WebGPURenderPipeline = class extends import_core8.RenderPipeline {
       );
     }
     options.vertexArray.unbindAfterRender(options.renderPass);
+    return true;
   }
-  // _getBuffers() {
-  //   return this._buffers;
-  // }
   /** Return a bind group created by setBindings */
   _getBindGroup() {
+    if (this.props.shaderLayout.bindings.length === 0) {
+      return null;
+    }
     this._bindGroupLayout = this._bindGroupLayout || this.handle.getBindGroupLayout(0);
-    this._bindGroup = this._bindGroup || getBindGroup(this.device.handle, this._bindGroupLayout, this.props.shaderLayout, this.props.bindings);
+    this._bindGroup = this._bindGroup || getBindGroup(this.device.handle, this._bindGroupLayout, this.props.shaderLayout, this._bindings);
     return this._bindGroup;
   }
   /**
@@ -728,23 +724,20 @@ var WebGPURenderPipeline = class extends import_core8.RenderPipeline {
   _getRenderPipelineDescriptor() {
     var _a, _b;
     const vertex = {
-      module: (0, import_core8.cast)(this.props.vs).handle,
-      entryPoint: this.props.vsEntryPoint || "main",
+      module: (0, import_core9.cast)(this.props.vs).handle,
+      entryPoint: this.props.vertexEntryPoint || "main",
       buffers: getVertexBufferLayout(this.props.shaderLayout, this.props.bufferLayout)
     };
-    let fragment;
-    if (this.props.fs) {
-      fragment = {
-        module: (0, import_core8.cast)(this.props.fs).handle,
-        entryPoint: this.props.fsEntryPoint || "main",
-        targets: [
-          {
-            // TODO exclamation mark hack!
-            format: getWebGPUTextureFormat((_b = (_a = this.device) == null ? void 0 : _a.canvasContext) == null ? void 0 : _b.format)
-          }
-        ]
-      };
-    }
+    const fragment = {
+      module: (0, import_core9.cast)(this.props.fs).handle,
+      entryPoint: this.props.fragmentEntryPoint || "main",
+      targets: [
+        {
+          // TODO exclamation mark hack!
+          format: getWebGPUTextureFormat((_b = (_a = this.device) == null ? void 0 : _a.canvasContext) == null ? void 0 : _b.format)
+        }
+      ]
+    };
     switch (this.props.topology) {
       case "triangle-fan-webgl":
       case "line-loop-webgl":
@@ -764,34 +757,59 @@ var WebGPURenderPipeline = class extends import_core8.RenderPipeline {
   }
 };
 
+// dist/adapter/resources/webgpu-framebuffer.js
+var import_core10 = require("@luma.gl/core");
+var WebGPUFramebuffer = class extends import_core10.Framebuffer {
+  device;
+  constructor(device, props) {
+    super(device, props);
+    this.device = device;
+    this.autoCreateAttachmentTextures();
+  }
+};
+
 // dist/adapter/resources/webgpu-compute-pipeline.js
-var import_core9 = require("@luma.gl/core");
-var WebGPUComputePipeline = class extends import_core9.ComputePipeline {
+var import_core11 = require("@luma.gl/core");
+var 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 = {};
   constructor(device, props) {
     super(device, props);
     this.device = device;
-    const webgpuShader = this.props.cs;
+    const webgpuShader = this.props.shader;
     this.handle = this.props.handle || this.device.handle.createComputePipeline({
       label: this.props.id,
       compute: {
         module: webgpuShader.handle,
-        entryPoint: this.props.csEntryPoint
-        // constants: this.props.csConstants
+        entryPoint: this.props.entryPoint,
+        constants: this.props.constants
       },
       layout: "auto"
     });
   }
-  /** For internal use in render passes */
-  _getBindGroupLayout() {
-    return this.handle.getBindGroupLayout(0);
+  /**
+   * @todo Use renderpass.setBindings() ?
+   * @todo Do we want to expose BindGroups in the API and remove this?
+   */
+  setBindings(bindings) {
+    Object.assign(this._bindings, bindings);
+  }
+  /** Return a bind group created by setBindings */
+  _getBindGroup() {
+    this._bindGroupLayout = this._bindGroupLayout || this.handle.getBindGroupLayout(0);
+    this._bindGroup = this._bindGroup || getBindGroup(this.device.handle, this._bindGroupLayout, this.props.shaderLayout, this._bindings);
+    return this._bindGroup;
   }
 };
 
 // dist/adapter/resources/webgpu-render-pass.js
-var import_core10 = require("@luma.gl/core");
-var WebGPURenderPass = class extends import_core10.RenderPass {
+var import_core12 = require("@luma.gl/core");
+var WebGPURenderPass = class extends import_core12.RenderPass {
   device;
   handle;
   /** Active pipeline */
@@ -801,11 +819,23 @@ var WebGPURenderPass = class extends import_core10.RenderPass {
     this.device = device;
     const framebuffer = props.framebuffer || device.canvasContext.getCurrentFramebuffer();
     const renderPassDescriptor = this.getRenderPassDescriptor(framebuffer);
-    import_core10.log.groupCollapsed(3, `new WebGPURenderPass(${this.id})`)();
-    import_core10.log.probe(3, JSON.stringify(renderPassDescriptor, null, 2))();
-    import_core10.log.groupEnd(3)();
+    const webgpuQuerySet = props.timestampQuerySet;
+    if (webgpuQuerySet) {
+      renderPassDescriptor.occlusionQuerySet = webgpuQuerySet.handle;
+    }
+    if (device.features.has("timestamp-query")) {
+      const webgpuQuerySet2 = props.timestampQuerySet;
+      renderPassDescriptor.timestampWrites = webgpuQuerySet2 ? {
+        querySet: webgpuQuerySet2.handle,
+        beginningOfPassWriteIndex: props.beginTimestampIndex,
+        endOfPassWriteIndex: props.endTimestampIndex
+      } : void 0;
+    }
     this.handle = this.props.handle || device.commandEncoder.beginRenderPass(renderPassDescriptor);
     this.handle.label = this.props.id;
+    import_core12.log.groupCollapsed(3, `new WebGPURenderPass(${this.id})`)();
+    import_core12.log.probe(3, JSON.stringify(renderPassDescriptor, null, 2))();
+    import_core12.log.groupEnd(3)();
   }
   destroy() {
   }
@@ -813,7 +843,7 @@ var WebGPURenderPass = class extends import_core10.RenderPass {
     this.handle.end();
   }
   setPipeline(pipeline) {
-    this.pipeline = (0, import_core10.cast)(pipeline);
+    this.pipeline = (0, import_core12.cast)(pipeline);
     this.handle.setPipeline(this.pipeline.handle);
   }
   /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */
@@ -826,10 +856,10 @@ var WebGPURenderPass = class extends import_core10.RenderPass {
     }
   }
   setIndexBuffer(buffer, indexFormat, offset = 0, size) {
-    this.handle.setIndexBuffer((0, import_core10.cast)(buffer).handle, indexFormat, offset, size);
+    this.handle.setIndexBuffer((0, import_core12.cast)(buffer).handle, indexFormat, offset, size);
   }
   setVertexBuffer(slot, buffer, offset = 0) {
-    this.handle.setVertexBuffer(slot, (0, import_core10.cast)(buffer).handle, offset);
+    this.handle.setVertexBuffer(slot, (0, import_core12.cast)(buffer).handle, offset);
   }
   draw(options) {
     if (options.indexCount) {
@@ -864,11 +894,12 @@ var WebGPURenderPass = class extends import_core10.RenderPass {
   insertDebugMarker(markerLabel) {
     this.handle.insertDebugMarker(markerLabel);
   }
-  // writeTimestamp(querySet: GPUQuerySet, queryIndex: number): void;
-  // beginOcclusionQuery(queryIndex: number): void;
-  // endOcclusionQuery(): void;
-  // beginPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
-  // endPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
+  beginOcclusionQuery(queryIndex) {
+    this.handle.beginOcclusionQuery(queryIndex);
+  }
+  endOcclusionQuery() {
+    this.handle.endOcclusionQuery();
+  }
   // executeBundles(bundles: Iterable<GPURenderBundle>): void;
   // INTERNAL
   /**
@@ -885,11 +916,11 @@ var WebGPURenderPass = class extends import_core10.RenderPass {
       colorClearValue: this.props.clearColor || [0, 0, 0, 0],
       storeOp: this.props.discard ? "discard" : "store",
       // ...colorAttachment,
-      view: colorAttachment.createView()
+      view: colorAttachment.handle
     }));
     if (framebuffer.depthStencilAttachment) {
       renderPassDescriptor.depthStencilAttachment = {
-        view: framebuffer.depthStencilAttachment.createView()
+        view: framebuffer.depthStencilAttachment.handle
       };
       const { depthStencilAttachment } = renderPassDescriptor;
       if (this.props.depthReadOnly) {
@@ -912,18 +943,29 @@ var WebGPURenderPass = class extends import_core10.RenderPass {
 };
 
 // dist/adapter/resources/webgpu-compute-pass.js
-var import_core11 = require("@luma.gl/core");
-var WebGPUComputePass = class extends import_core11.ComputePass {
+var import_core13 = require("@luma.gl/core");
+var WebGPUComputePass = class extends import_core13.ComputePass {
   device;
   handle;
-  _bindGroupLayout = null;
+  _webgpuPipeline = null;
   constructor(device, props) {
     var _a;
     super(device, props);
     this.device = device;
+    let timestampWrites;
+    if (device.features.has("timestamp-query")) {
+      const webgpuQuerySet = props.timestampQuerySet;
+      if (webgpuQuerySet) {
+        timestampWrites = {
+          querySet: webgpuQuerySet.handle,
+          beginningOfPassWriteIndex: props.beginTimestampIndex,
+          endOfPassWriteIndex: props.endTimestampIndex
+        };
+      }
+    }
     this.handle = this.props.handle || ((_a = device.commandEncoder) == null ? void 0 : _a.beginComputePass({
-      label: this.props.id
-      // timestampWrites?: GPUComputePassTimestampWrites;
+      label: this.props.id,
+      timestampWrites
     }));
   }
   /** @note no WebGPU destroy method, just gc */
@@ -935,29 +977,36 @@ var WebGPUComputePass = class extends import_core11.ComputePass {
   setPipeline(pipeline) {
     const wgpuPipeline = pipeline;
     this.handle.setPipeline(wgpuPipeline.handle);
-    this._bindGroupLayout = wgpuPipeline._getBindGroupLayout();
+    this._webgpuPipeline = wgpuPipeline;
+    this.setBindings([]);
   }
-  /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */
+  /**
+   * 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) {
-    throw new Error("fix me");
+    const bindGroup = this._webgpuPipeline._getBindGroup();
+    this.handle.setBindGroup(0, bindGroup);
   }
   /**
    * Dispatch work to be performed with the current ComputePipeline.
-   * @param x X dimension of the grid of workgroups to dispatch.
-   * @param y Y dimension of the grid of workgroups to dispatch.
-   * @param z Z dimension of the grid of workgroups to dispatch.
+   * @param x X dimension of the grid of work groups to dispatch.
+   * @param y Y dimension of the grid of work groups to dispatch.
+   * @param z Z dimension of the grid of work groups to dispatch.
    */
   dispatch(x, y, z) {
     this.handle.dispatchWorkgroups(x, y, z);
   }
   /**
    * Dispatch work to be performed with the current ComputePipeline.
-   * @param indirectBuffer buffer must be a tightly packed block of three 32-bit unsigned integer values (12 bytes total), given in the same order as the arguments for dispatch()
-   * @param indirectOffset
+   *
+   * Buffer must be a tightly packed block of three 32-bit unsigned integer values (12 bytes total), given in the same order as the arguments for dispatch()
+   * @param indirectBuffer
+   * @param indirectOffset offset in buffer to the beginning of the dispatch data.
    */
-  dispatchIndirect(indirectBuffer, indirectOffset = 0) {
+  dispatchIndirect(indirectBuffer, indirectByteOffset = 0) {
     const webgpuBuffer = indirectBuffer;
-    this.handle.dispatchWorkgroupsIndirect(webgpuBuffer.handle, indirectOffset);
+    this.handle.dispatchWorkgroupsIndirect(webgpuBuffer.handle, indirectByteOffset);
   }
   pushDebugGroup(groupLabel) {
     this.handle.pushDebugGroup(groupLabel);
@@ -971,22 +1020,15 @@ var WebGPUComputePass = class extends import_core11.ComputePass {
 };
 
 // dist/adapter/resources/webgpu-vertex-array.js
-var import_core12 = require("@luma.gl/core");
+var import_core14 = require("@luma.gl/core");
 var import_env = require("@probe.gl/env");
-var WebGPUVertexArray = class extends import_core12.VertexArray {
+var WebGPUVertexArray = class extends import_core14.VertexArray {
   get [Symbol.toStringTag]() {
     return "WebGPUVertexArray";
   }
   device;
   /** Vertex Array is a helper class under WebGPU */
   handle;
-  /**
-   * Attribute 0 can not be disable on most desktop OpenGL based browsers
-   * TODO is this even an issue for WebGPU?
-   */
-  static isConstantAttributeZeroSupported(device) {
-    return (0, import_env.getBrowser)() === "Chrome";
-  }
   // Create a VertexArray
   constructor(device, props) {
     super(device, props);
@@ -1005,49 +1047,39 @@ var WebGPUVertexArray = class extends import_core12.VertexArray {
   setBuffer(bufferSlot, buffer) {
     this.attributes[bufferSlot] = buffer;
   }
-  /** Set a location in vertex attributes array to a constant value, disables the location */
-  setConstant(location, value) {
-    import_core12.log.warn(`${this.id} constant attributes not supported on WebGPU`);
-  }
   bindBeforeRender(renderPass, firstIndex, indexCount) {
     const webgpuRenderPass = renderPass;
     const webgpuIndexBuffer = this.indexBuffer;
     if (webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.handle) {
-      import_core12.log.warn("setting index buffer", webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.handle, webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.indexType)();
+      import_core14.log.warn("setting index buffer", webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.handle, webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.indexType)();
       webgpuRenderPass.handle.setIndexBuffer(webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.handle, webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.indexType);
     }
     for (let location = 0; location < this.maxVertexAttributes; location++) {
       const webgpuBuffer = this.attributes[location];
       if (webgpuBuffer == null ? void 0 : webgpuBuffer.handle) {
-        import_core12.log.warn(`setting vertex buffer ${location}`, webgpuBuffer == null ? void 0 : webgpuBuffer.handle)();
+        import_core14.log.warn(`setting vertex buffer ${location}`, webgpuBuffer == null ? void 0 : webgpuBuffer.handle)();
         webgpuRenderPass.handle.setVertexBuffer(location, webgpuBuffer == null ? void 0 : webgpuBuffer.handle);
       }
     }
   }
   unbindAfterRender(renderPass) {
   }
-};
-
-// dist/adapter/webgpu-canvas-context.js
-var import_core14 = require("@luma.gl/core");
-
-// dist/adapter/resources/webgpu-framebuffer.js
-var import_core13 = require("@luma.gl/core");
-var WebGPUFramebuffer = class extends import_core13.Framebuffer {
-  device;
-  constructor(device, props) {
-    super(device, props);
-    this.device = device;
-    this.autoCreateAttachmentTextures();
+  // DEPRECATED METHODS
+  /**
+   * @deprecated is this even an issue for WebGPU?
+   * Attribute 0 can not be disable on most desktop OpenGL based browsers
+   */
+  static isConstantAttributeZeroSupported(device) {
+    return (0, import_env.getBrowser)() === "Chrome";
   }
 };
 
 // dist/adapter/webgpu-canvas-context.js
-var WebGPUCanvasContext = class extends import_core14.CanvasContext {
+var import_core15 = require("@luma.gl/core");
+var WebGPUCanvasContext = class extends import_core15.CanvasContext {
   device;
   gpuCanvasContext;
   /** Format of returned textures: "bgra8unorm", "rgba8unorm", "rgba16float". */
-  // @ts-ignore - TODO - fix this
   format = navigator.gpu.getPreferredCanvasFormat();
   /** Default stencil format for depth textures */
   depthStencilFormat = "depth24plus";
@@ -1096,7 +1128,7 @@ var WebGPUCanvasContext = class extends import_core14.CanvasContext {
         colorSpace: this.props.colorSpace,
         alphaMode: this.props.alphaMode
       });
-      import_core14.log.log(1, `Resized to ${this.width}x${this.height}px`)();
+      import_core15.log.log(1, `Resized to ${this.width}x${this.height}px`)();
     }
   }
   resize(options) {
@@ -1106,7 +1138,8 @@ var WebGPUCanvasContext = class extends import_core14.CanvasContext {
   getCurrentTexture() {
     return this.device._createTexture({
       id: `${this.id}#color-texture`,
-      handle: this.gpuCanvasContext.getCurrentTexture()
+      handle: this.gpuCanvasContext.getCurrentTexture(),
+      format: this.format
     });
   }
   /** We build render targets on demand (i.e. not when size changes but when about to render) */
@@ -1124,16 +1157,45 @@ var WebGPUCanvasContext = class extends import_core14.CanvasContext {
   }
 };
 
+// dist/adapter/resources/webgpu-query-set.js
+var import_core16 = require("@luma.gl/core");
+var WebGPUQuerySet = class extends import_core16.QuerySet {
+  device;
+  handle;
+  constructor(device, props) {
+    super(device, props);
+    this.device = device;
+    this.handle = this.props.handle || this.device.handle.createQuerySet({
+      type: this.props.type,
+      count: this.props.count
+    });
+    this.handle.label = this.props.id;
+  }
+  destroy() {
+    var _a;
+    (_a = this.handle) == null ? void 0 : _a.destroy();
+    this.handle = null;
+  }
+};
+
 // dist/adapter/webgpu-device.js
-var _WebGPUDevice = class extends import_core15.Device {
+var _WebGPUDevice = class extends import_core17.Device {
+  /** type of this device */
+  type = "webgpu";
+  /** The underlying WebGPU device */
   handle;
+  /* The underlying WebGPU adapter */
   adapter;
+  /* The underlying WebGPU adapter's info */
+  adapterInfo;
+  features;
+  info;
+  limits;
   lost;
   canvasContext = null;
+  _isLost = false;
   commandEncoder = null;
   renderPass = null;
-  _info;
-  _isLost = false;
   /** Check if WebGPU is available */
   static isSupported() {
     return Boolean(typeof navigator !== "undefined" && navigator.gpu);
@@ -1142,7 +1204,7 @@ var _WebGPUDevice = class extends import_core15.Device {
     if (!navigator.gpu) {
       throw new Error("WebGPU not available. Open in Chrome Canary and turn on chrome://flags/#enable-unsafe-webgpu");
     }
-    import_core15.log.groupCollapsed(1, "WebGPUDevice created")();
+    import_core17.log.groupCollapsed(1, "WebGPUDevice created")();
     const adapter = await navigator.gpu.requestAdapter({
       powerPreference: "high-performance"
       // forceSoftware: false
@@ -1151,47 +1213,40 @@ var _WebGPUDevice = class extends import_core15.Device {
       throw new Error("Failed to request WebGPU adapter");
     }
     const adapterInfo = await adapter.requestAdapterInfo();
-    import_core15.log.probe(2, "Adapter available", adapterInfo)();
+    import_core17.log.probe(2, "Adapter available", adapterInfo)();
+    const requiredFeatures = [];
+    const requiredLimits = {};
+    if (props.requestMaxLimits) {
+      requiredFeatures.push(...Array.from(adapter.features));
+      for (const key in adapter.limits) {
+        requiredLimits[key] = adapter.limits[key];
+      }
+      delete requiredLimits.minSubgroupSize;
+      delete requiredLimits.maxSubgroupSize;
+    }
     const gpuDevice = await adapter.requestDevice({
-      requiredFeatures: adapter.features
-      // TODO ensure we obtain best limits
-      // requiredLimits: adapter.limits
+      requiredFeatures,
+      requiredLimits
     });
-    import_core15.log.probe(1, "GPUDevice available")();
+    import_core17.log.probe(1, "GPUDevice available")();
     if (typeof props.canvas === "string") {
-      await import_core15.CanvasContext.pageLoaded;
-      import_core15.log.probe(1, "DOM is loaded")();
+      await import_core17.CanvasContext.pageLoaded;
+      import_core17.log.probe(1, "DOM is loaded")();
     }
     const device = new _WebGPUDevice(gpuDevice, adapter, adapterInfo, props);
-    import_core15.log.probe(1, "Device created. For more info, set chrome://flags/#enable-webgpu-developer-features")();
-    import_core15.log.table(1, device.info)();
-    import_core15.log.groupEnd(1)();
+    import_core17.log.probe(1, "Device created. For more info, set chrome://flags/#enable-webgpu-developer-features")();
+    import_core17.log.table(1, device.info)();
+    import_core17.log.groupEnd(1)();
     return device;
   }
   constructor(device, adapter, adapterInfo, props) {
-    super({ ...props, id: props.id || (0, import_core15.uid)("webgpu-device") });
+    super({ ...props, id: props.id || (0, import_core17.uid)("webgpu-device") });
     this.handle = device;
     this.adapter = adapter;
-    const [driver, driverVersion] = (adapterInfo.driver || "").split(" Version ");
-    const vendor = adapterInfo.vendor || this.adapter.__brand || "unknown";
-    const renderer = driver || "";
-    const version = driverVersion || "";
-    const gpu = vendor === "apple" ? "apple" : "unknown";
-    const gpuArchitecture = adapterInfo.architecture || "unknown";
-    const gpuBackend = adapterInfo.backend || "unknown";
-    const gpuType = (adapterInfo.type || "").split(" ")[0].toLowerCase() || "unknown";
-    this._info = {
-      type: "webgpu",
-      vendor,
-      renderer,
-      version,
-      gpu,
-      gpuType,
-      gpuBackend,
-      gpuArchitecture,
-      shadingLanguage: "wgsl",
-      shadingLanguageVersion: 100
-    };
+    this.adapterInfo = adapterInfo;
+    this.info = this._getInfo();
+    this.features = this._getFeatures();
+    this.limits = this.handle.limits;
     this.lost = new Promise(async (resolve) => {
       const lostInfo = await this.handle.lost;
       this._isLost = true;
@@ -1203,7 +1258,6 @@ var _WebGPUDevice = class extends import_core15.Device {
       width: props.width,
       container: props.container
     });
-    this.features = this._getFeatures();
   }
   // TODO
   // Load the glslang module now so that it is available synchronously when compiling shaders
@@ -1212,19 +1266,12 @@ var _WebGPUDevice = class extends import_core15.Device {
   destroy() {
     this.handle.destroy();
   }
-  get info() {
-    return this._info;
-  }
-  features;
-  get limits() {
-    return this.handle.limits;
-  }
   isTextureFormatSupported(format) {
     return !format.includes("webgl");
   }
   /** @todo implement proper check? */
   isTextureFormatFilterable(format) {
-    return this.isTextureFormatSupported(format);
+    return this.isTextureFormatSupported(format) && !format.startsWith("depth") && !format.startsWith("stencil");
   }
   /** @todo implement proper check? */
   isTextureFormatRenderable(format) {
@@ -1253,7 +1300,7 @@ var _WebGPUDevice = class extends import_core15.Device {
     return new WebGPURenderPipeline(this, props);
   }
   createFramebuffer(props) {
-    throw new Error("Not implemented");
+    return new WebGPUFramebuffer(this, props);
   }
   createComputePipeline(props) {
     return new WebGPUComputePipeline(this, props);
@@ -1280,18 +1327,12 @@ var _WebGPUDevice = class extends import_core15.Device {
   createTransformFeedback(props) {
     throw new Error("Transform feedback not supported in WebGPU");
   }
+  createQuerySet(props) {
+    return new WebGPUQuerySet(this, props);
+  }
   createCanvasContext(props) {
     return new WebGPUCanvasContext(this, this.adapter, props);
   }
-  /**
-   * Gets default renderpass encoder.
-   * Creates a new encoder against default canvasContext if not already created
-   * @note Called internally by Model.
-   * @deprecated Create explicit pass with device.beginRenderPass
-   */
-  getDefaultRenderPass() {
-    throw new Error("a");
-  }
   submit() {
     var _a;
     const commandBuffer = (_a = this.commandEncoder) == null ? void 0 : _a.finish();
@@ -1300,6 +1341,29 @@ var _WebGPUDevice = class extends import_core15.Device {
     }
     this.commandEncoder = null;
   }
+  // PRIVATE METHODS
+  _getInfo() {
+    const [driver, driverVersion] = (this.adapterInfo.driver || "").split(" Version ");
+    const vendor = this.adapterInfo.vendor || this.adapter.__brand || "unknown";
+    const renderer = driver || "";
+    const version = driverVersion || "";
+    const gpu = vendor === "apple" ? "apple" : "unknown";
+    const gpuArchitecture = this.adapterInfo.architecture || "unknown";
+    const gpuBackend = this.adapterInfo.backend || "unknown";
+    const gpuType = (this.adapterInfo.type || "").split(" ")[0].toLowerCase() || "unknown";
+    return {
+      type: "webgpu",
+      vendor,
+      renderer,
+      version,
+      gpu,
+      gpuType,
+      gpuBackend,
+      gpuArchitecture,
+      shadingLanguage: "wgsl",
+      shadingLanguageVersion: 100
+    };
+  }
   _getFeatures() {
     const features = new Set(this.handle.features);
     if (features.has("depth-clamping")) {
@@ -1310,19 +1374,18 @@ var _WebGPUDevice = class extends import_core15.Device {
       features.add("texture-compression-bc5-webgl");
     }
     const WEBGPU_ALWAYS_FEATURES = [
-      "webgpu",
-      "wgsl",
       "timer-query-webgl",
-      "float32-filterable-linear-webgl",
-      "float16-filterable-linear-webgl",
-      "texture-filterable-anisotropic-webgl",
+      "compilation-status-async-webgl",
       "float32-renderable-webgl",
-      "float16-renderable-webgl"
+      "float16-renderable-webgl",
+      "norm16-renderable-webgl",
+      "texture-filterable-anisotropic-webgl",
+      "shader-noperspective-interpolation-webgl"
     ];
     for (const feature of WEBGPU_ALWAYS_FEATURES) {
       features.add(feature);
     }
-    return features;
+    return new import_core17.DeviceFeatures(Array.from(features), this.props.disabledFeatures);
   }
   copyExternalImageToTexture(options) {
     var _a;