@luma.gl/webgpu 9.1.0-alpha.2 → 9.1.0-beta.1

package/dist/index.cjs

@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 
 // dist/index.js
 var dist_exports = {};
@@ -28,10 +23,14 @@ __export(dist_exports, {
   WebGPUDevice: () => WebGPUDevice,
   WebGPUSampler: () => WebGPUSampler,
   WebGPUShader: () => WebGPUShader,
-  WebGPUTexture: () => WebGPUTexture
+  WebGPUTexture: () => WebGPUTexture,
+  webgpuAdapter: () => webgpuAdapter
 });
 module.exports = __toCommonJS(dist_exports);
 
+// dist/adapter/webgpu-adapter.js
+var import_core18 = require("@luma.gl/core");
+
 // dist/adapter/webgpu-device.js
 var import_core17 = require("@luma.gl/core");
 
@@ -123,11 +122,17 @@ var WebGPUSampler = class extends import_core2.Sampler {
   constructor(device, props) {
     super(device, props);
     this.device = device;
-    const samplerProps = { ...this.props };
-    if (samplerProps.type !== "comparison-sampler") {
-      delete samplerProps.compare;
+    const samplerDescriptor = {
+      ...this.props,
+      mipmapFilter: void 0
+    };
+    if (props.type !== "comparison-sampler") {
+      delete samplerDescriptor.compare;
     }
-    this.handle = this.handle || this.device.handle.createSampler(samplerProps);
+    if (props.mipmapFilter && props.mipmapFilter !== "none") {
+      samplerDescriptor.mipmapFilter = props.mipmapFilter;
+    }
+    this.handle = this.handle || this.device.handle.createSampler(samplerDescriptor);
     this.handle.label = this.props.id;
   }
   destroy() {
@@ -176,27 +181,16 @@ var BASE_DIMENSIONS = {
 var WebGPUTexture = class extends import_core4.Texture {
   device;
   handle;
-  height = 1;
-  width = 1;
   sampler;
   view;
-  // static async createFromImageURL(src, usage = 0) {
-  //   const img = document.createElement('img');
-  //   img.src = src;
-  //   await img.decode();
-  //   return WebGPUTexture(img, usage);
-  // }
   constructor(device, props) {
     super(device, props);
     this.device = device;
-    if (props.data instanceof Promise) {
-      props.data.then((resolvedImageData) => {
-        this.props = { ...this.props, data: resolvedImageData };
-        this.initialize(this.props);
-      });
-      return;
+    const propsWithData = { ...this.props };
+    if (props.data) {
+      propsWithData.data = props.data;
     }
-    this.initialize(props);
+    this.initialize(propsWithData);
   }
   destroy() {
     var _a;
@@ -210,7 +204,11 @@ var WebGPUTexture = class extends import_core4.Texture {
     this.handle = this.props.handle || this.createHandle();
     this.handle.label ||= this.id;
     if (this.props.data) {
-      this.setData({ data: this.props.data });
+      if (import_core4.Texture.isExternalImage(this.props.data)) {
+        this.copyExternalImage({ image: this.props.data });
+      } else {
+        this.setData({ data: this.props.data });
+      }
     }
     this.width = this.handle.width;
     this.height = this.handle.height;
@@ -266,16 +264,23 @@ var WebGPUTexture = class extends import_core4.Texture {
     throw new Error("not implemented");
   }
   setData(options) {
-    return this.setImage({ source: options.data });
+    if (ArrayBuffer.isView(options.data)) {
+      const clampedArray = new Uint8ClampedArray(options.data.buffer);
+      const image = new ImageData(clampedArray, this.width, this.height);
+      return this.copyExternalImage({ image });
+    }
+    throw new Error("Texture.setData: Use CommandEncoder to upload data to texture in WebGPU");
   }
-  /** Set image */
-  setImage(options) {
-    const { source, width = options.source.width, height = options.source.height, depth = 1, sourceX = 0, sourceY = 0, mipLevel = 0, x = 0, y = 0, z = 0, aspect = "all", colorSpace = "srgb", premultipliedAlpha = false } = options;
+  copyExternalImage(options) {
+    const size = import_core4.Texture.getExternalImageSize(options.image);
+    const opts = { ...import_core4.Texture.defaultCopyExternalImageOptions, ...size, ...options };
+    const { image, sourceX, sourceY, width, height, depth, mipLevel, x, y, z, aspect, colorSpace, premultipliedAlpha, flipY } = opts;
     this.device.handle.queue.copyExternalImageToTexture(
       // source: GPUImageCopyExternalImage
       {
-        source,
-        origin: [sourceX, sourceY]
+        source: image,
+        origin: [sourceX, sourceY],
+        flipY
       },
       // destination: GPUImageCopyTextureTagged
       {
@@ -326,18 +331,31 @@ var WebGPUShader = class extends import_core6.Shader {
   constructor(device, props) {
     super(device, props);
     this.device = device;
+    const isGLSL = props.source.includes("#version");
+    if (this.props.language === "glsl" || isGLSL) {
+      throw new Error("GLSL shaders are not supported in WebGPU");
+    }
     this.device.handle.pushErrorScope("validation");
-    this.handle = this.props.handle || this.createHandle();
+    this.handle = this.props.handle || this.device.handle.createShaderModule({ code: props.source });
+    this.device.handle.popErrorScope().then((error) => {
+      if (error) {
+        import_core6.log.error(`${this} creation failed:
+"${error.message}"`, this, this.props.source)();
+      }
+    });
     this.handle.label = this.props.id;
-    this._checkCompilationError(this.device.handle.popErrorScope());
-  }
-  async _checkCompilationError(errorScope) {
-    const error = await errorScope;
-    if (error) {
-      this.debugShader();
-      const shaderLog = await this.getCompilationInfo();
-      import_core6.log.error(`Shader compilation error: ${error.message}`, shaderLog)();
-      throw new Error(`Shader compilation error: ${error.message}`);
+    this._checkCompilationError();
+  }
+  get asyncCompilationStatus() {
+    return this.getCompilationInfo().then(() => this.compilationStatus);
+  }
+  async _checkCompilationError() {
+    const shaderLog = await this.getCompilationInfo();
+    const hasErrors = Boolean(shaderLog.find((msg) => msg.type === "error"));
+    this.compilationStatus = hasErrors ? "error" : "success";
+    this.debugShader();
+    if (this.compilationStatus === "error") {
+      import_core6.log.error(`Shader compilation error`, shaderLog)();
     }
   }
   destroy() {
@@ -348,15 +366,6 @@ var WebGPUShader = class extends import_core6.Shader {
     const compilationInfo = await this.handle.getCompilationInfo();
     return compilationInfo.messages;
   }
-  // PRIVATE METHODS
-  createHandle() {
-    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
@@ -568,9 +577,9 @@ function getBindGroup(device, bindGroupLayout, shaderLayout, bindings) {
     entries
   });
 }
-function getShaderLayoutBinding(shaderLayout, bindingName) {
+function getShaderLayoutBinding(shaderLayout, bindingName, options) {
   const bindingLayout = shaderLayout.bindings.find((binding) => binding.name === bindingName || `${binding.name}uniforms` === bindingName.toLocaleLowerCase());
-  if (!bindingLayout) {
+  if (!bindingLayout && !(options == null ? void 0 : options.ignoreWarnings)) {
     import_core7.log.warn(`Binding ${bindingName} not set: Not found in shader layout.`)();
   }
   return bindingLayout || null;
@@ -578,14 +587,20 @@ function getShaderLayoutBinding(shaderLayout, bindingName) {
 function getBindGroupEntries(bindings, shaderLayout) {
   const entries = [];
   for (const [bindingName, value] of Object.entries(bindings)) {
-    const bindingLayout = getShaderLayoutBinding(shaderLayout, bindingName);
+    let bindingLayout = getShaderLayoutBinding(shaderLayout, bindingName);
     if (bindingLayout) {
       entries.push(getBindGroupEntry(value, bindingLayout.location));
     }
+    bindingLayout = getShaderLayoutBinding(shaderLayout, `${bindingName}Sampler`, {
+      ignoreWarnings: true
+    });
+    if (bindingLayout) {
+      entries.push(getBindGroupEntry(value, bindingLayout.location, { sampler: true }));
+    }
   }
   return entries;
 }
-function getBindGroupEntry(binding, index) {
+function getBindGroupEntry(binding, index, options) {
   if (binding instanceof import_core7.Buffer) {
     return {
       binding: index,
@@ -600,6 +615,12 @@ function getBindGroupEntry(binding, index) {
       resource: binding.handle
     };
   } else if (binding instanceof import_core7.Texture) {
+    if (options == null ? void 0 : options.sampler) {
+      return {
+        binding: index,
+        resource: binding.sampler.handle
+      };
+    }
     return {
       binding: index,
       resource: binding.handle.createView({ label: "bind-group-auto-created" })
@@ -675,13 +696,13 @@ function getVertexBufferLayout(shaderLayout, bufferLayout) {
   return vertexBufferLayouts;
 }
 function findAttributeLayout(shaderLayout, name, attributeNames) {
-  const attribute = shaderLayout.attributes.find((attribute2) => attribute2.name === name);
+  const attribute = shaderLayout.attributes.find((attribute_) => attribute_.name === name);
   if (!attribute) {
-    import_core8.log.warn(`Unknown attribute ${name}`)();
+    import_core8.log.warn(`Supplied attribute not present in shader layout: ${name}`)();
     return null;
   }
   if (attributeNames.has(name)) {
-    throw new Error(`Duplicate attribute ${name}`);
+    throw new Error(`Found multiple entries for attribute: ${name}`);
   }
   attributeNames.add(name);
   return attribute;
@@ -697,6 +718,9 @@ var WebGPURenderPipeline = class extends import_core9.RenderPipeline {
   _bindings;
   _bindGroupLayout = null;
   _bindGroup = null;
+  get [Symbol.toStringTag]() {
+    return "WebGPURenderPipeline";
+  }
   constructor(device, props) {
     super(device, props);
     this.device = device;
@@ -706,7 +730,15 @@ var WebGPURenderPipeline = class extends import_core9.RenderPipeline {
       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.handle.pushErrorScope("validation");
       this.handle = this.device.handle.createRenderPipeline(descriptor);
+      this.device.handle.popErrorScope().then((error) => {
+        var _a;
+        if (error) {
+          import_core9.log.error(`${this} creation failed:
+"${error.message}"`, this, (_a = this.props.vs) == null ? void 0 : _a.source)();
+        }
+      });
     }
     this.handle.label = this.props.id;
     this.vs = props.vs;
@@ -721,12 +753,24 @@ var WebGPURenderPipeline = class extends import_core9.RenderPipeline {
    * @todo Do we want to expose BindGroups in the API and remove this?
    */
   setBindings(bindings) {
+    for (const [name, binding] of Object.entries(bindings)) {
+      if (this._bindings[name] !== binding) {
+        this._bindGroup = null;
+      }
+    }
     Object.assign(this._bindings, bindings);
   }
   /** @todo - should this be moved to renderpass? */
   draw(options) {
     const webgpuRenderPass = options.renderPass;
+    this.device.handle.pushErrorScope("validation");
     webgpuRenderPass.handle.setPipeline(this.handle);
+    this.device.handle.popErrorScope().then((error) => {
+      if (error) {
+        import_core9.log.error(`${this} setPipeline failed:
+"${error.message}"`, this)();
+      }
+    });
     const bindGroup = this._getBindGroup();
     if (bindGroup) {
       webgpuRenderPass.handle.setBindGroup(0, bindGroup);
@@ -763,15 +807,18 @@ var WebGPURenderPipeline = class extends import_core9.RenderPipeline {
       entryPoint: this.props.vertexEntryPoint || "main",
       buffers: getVertexBufferLayout(this.shaderLayout, this.props.bufferLayout)
     };
+    const targets = [];
+    if (this.props.colorAttachmentFormats) {
+      for (const format of this.props.colorAttachmentFormats) {
+        targets.push(format ? { format: getWebGPUTextureFormat(format) } : null);
+      }
+    } else {
+      targets.push({ format: getWebGPUTextureFormat(this.device.preferredColorFormat) });
+    }
     const fragment = {
       module: this.props.fs.handle,
       entryPoint: this.props.fragmentEntryPoint || "main",
-      targets: [
-        {
-          // TODO exclamation mark hack!
-          format: getWebGPUTextureFormat(this.device.getCanvasContext().format)
-        }
-      ]
+      targets
     };
     const descriptor = {
       vertex,
@@ -781,6 +828,12 @@ var WebGPURenderPipeline = class extends import_core9.RenderPipeline {
       },
       layout: "auto"
     };
+    const depthFormat = this.props.depthStencilAttachmentFormat || this.device.preferredDepthFormat;
+    if (this.props.parameters.depthWriteEnabled) {
+      descriptor.depthStencil = {
+        format: getWebGPUTextureFormat(depthFormat)
+      };
+    }
     applyParametersToRenderPipelineDescriptor(descriptor, this.props.parameters);
     return descriptor;
   }
@@ -797,6 +850,8 @@ var WebGPUFramebuffer = class extends import_core10.Framebuffer {
     this.device = device;
     this.autoCreateAttachmentTextures();
   }
+  updateAttachments() {
+  }
 };
 
 // dist/adapter/resources/webgpu-compute-pipeline.js
@@ -855,9 +910,9 @@ var WebGPURenderPass = class extends import_core12.RenderPass {
       renderPassDescriptor.occlusionQuerySet = webgpuQuerySet.handle;
     }
     if (device.features.has("timestamp-query")) {
-      const webgpuQuerySet2 = props.timestampQuerySet;
-      renderPassDescriptor.timestampWrites = webgpuQuerySet2 ? {
-        querySet: webgpuQuerySet2.handle,
+      const webgpuTSQuerySet = props.timestampQuerySet;
+      renderPassDescriptor.timestampWrites = webgpuTSQuerySet ? {
+        querySet: webgpuTSQuerySet.handle,
         beginningOfPassWriteIndex: props.beginTimestampIndex,
         endOfPassWriteIndex: props.endTimestampIndex
       } : void 0;
@@ -865,7 +920,14 @@ var WebGPURenderPass = class extends import_core12.RenderPass {
     if (!device.commandEncoder) {
       throw new Error("commandEncoder not available");
     }
+    this.device.handle.pushErrorScope("validation");
     this.handle = this.props.handle || device.commandEncoder.beginRenderPass(renderPassDescriptor);
+    this.device.handle.popErrorScope().then((error) => {
+      if (error) {
+        import_core12.log.error(`${this} creation failed:
+"${error.message}"`, this)();
+      }
+    });
     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))();
@@ -944,14 +1006,17 @@ var WebGPURenderPass = class extends import_core12.RenderPass {
     const renderPassDescriptor = {
       colorAttachments: []
     };
-    renderPassDescriptor.colorAttachments = framebuffer.colorAttachments.map((colorAttachment) => ({
-      // clear values
-      loadOp: this.props.clearColor !== false ? "clear" : "load",
-      colorClearValue: this.props.clearColor || [0, 0, 0, 0],
-      storeOp: this.props.discard ? "discard" : "store",
-      // ...colorAttachment,
-      view: colorAttachment.handle
-    }));
+    renderPassDescriptor.colorAttachments = framebuffer.colorAttachments.map((colorAttachment, index) => {
+      var _a;
+      return {
+        // clear values
+        loadOp: this.props.clearColor !== false ? "clear" : "load",
+        colorClearValue: ((_a = this.props.clearColors) == null ? void 0 : _a[index]) || this.props.clearColor || import_core12.RenderPass.defaultClearColor,
+        storeOp: this.props.discard ? "discard" : "store",
+        // ...colorAttachment,
+        view: colorAttachment.handle
+      };
+    });
     if (framebuffer.depthStencilAttachment) {
       renderPassDescriptor.depthStencilAttachment = {
         view: framebuffer.depthStencilAttachment.handle
@@ -960,7 +1025,9 @@ var WebGPURenderPass = class extends import_core12.RenderPass {
       if (this.props.depthReadOnly) {
         depthStencilAttachment.depthReadOnly = true;
       }
-      depthStencilAttachment.depthClearValue = this.props.clearDepth || 0;
+      if (this.props.clearDepth !== false) {
+        depthStencilAttachment.depthClearValue = this.props.clearDepth;
+      }
       const hasDepthAspect = true;
       if (hasDepthAspect) {
         depthStencilAttachment.depthLoadOp = this.props.clearDepth !== false ? "clear" : "load";
@@ -1085,7 +1152,7 @@ var WebGPUVertexArray = class extends import_core14.VertexArray {
     const webgpuRenderPass = renderPass;
     const webgpuIndexBuffer = this.indexBuffer;
     if (webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.handle) {
-      import_core14.log.warn("setting index buffer", webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.handle, webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.indexType)();
+      import_core14.log.info(3, "setting index buffer", webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.handle, webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.indexType)();
       webgpuRenderPass.handle.setIndexBuffer(
         webgpuIndexBuffer == null ? void 0 : webgpuIndexBuffer.handle,
         // @ts-expect-error TODO - we must enforce type
@@ -1095,7 +1162,7 @@ var WebGPUVertexArray = class extends import_core14.VertexArray {
     for (let location = 0; location < this.maxVertexAttributes; location++) {
       const webgpuBuffer = this.attributes[location];
       if (webgpuBuffer == null ? void 0 : webgpuBuffer.handle) {
-        import_core14.log.warn(`setting vertex buffer ${location}`, webgpuBuffer == null ? void 0 : webgpuBuffer.handle)();
+        import_core14.log.info(3, `setting vertex buffer ${location}`, webgpuBuffer == null ? void 0 : webgpuBuffer.handle)();
         webgpuRenderPass.handle.setVertexBuffer(location, webgpuBuffer == null ? void 0 : webgpuBuffer.handle);
       }
     }
@@ -1116,79 +1183,84 @@ var WebGPUVertexArray = class extends import_core14.VertexArray {
 var import_core15 = require("@luma.gl/core");
 var WebGPUCanvasContext = class extends import_core15.CanvasContext {
   device;
-  gpuCanvasContext;
-  /** Format of returned textures: "bgra8unorm", "rgba8unorm", "rgba16float". */
-  format = navigator.gpu.getPreferredCanvasFormat();
-  /** Default stencil format for depth textures */
-  depthStencilFormat = "depth24plus";
+  handle;
   depthStencilAttachment = null;
+  get [Symbol.toStringTag]() {
+    return "WebGPUCanvasContext";
+  }
   constructor(device, adapter, props) {
     super(props);
     this.device = device;
-    this.width = -1;
-    this.height = -1;
     this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
-    this.gpuCanvasContext = this.canvas.getContext("webgpu");
-    this.format = "bgra8unorm";
+    this.updateSize([this.drawingBufferWidth, this.drawingBufferHeight]);
   }
   /** Destroy any textures produced while configured and remove the context configuration. */
   destroy() {
-    this.gpuCanvasContext.unconfigure();
+    this.handle.unconfigure();
   }
   /** Update framebuffer with properly resized "swap chain" texture views */
-  getCurrentFramebuffer() {
-    this.update();
+  getCurrentFramebuffer(options = {
+    depthStencilFormat: "depth24plus"
+  }) {
     const currentColorAttachment = this.getCurrentTexture();
-    this.width = currentColorAttachment.width;
-    this.height = currentColorAttachment.height;
-    this._createDepthStencilAttachment();
+    if (currentColorAttachment.width !== this.drawingBufferWidth || currentColorAttachment.height !== this.drawingBufferHeight) {
+      const [oldWidth, oldHeight] = this.getDrawingBufferSize();
+      this.drawingBufferWidth = currentColorAttachment.width;
+      this.drawingBufferHeight = currentColorAttachment.height;
+      import_core15.log.log(1, `${this}: Resized to compensate for initial canvas size mismatch ${oldWidth}x${oldHeight} => ${this.drawingBufferWidth}x${this.drawingBufferHeight}px`)();
+    }
+    if (options == null ? void 0 : options.depthStencilFormat) {
+      this._createDepthStencilAttachment(options == null ? void 0 : options.depthStencilFormat);
+    }
     return new WebGPUFramebuffer(this.device, {
       colorAttachments: [currentColorAttachment],
       depthStencilAttachment: this.depthStencilAttachment
     });
   }
   /** Resizes and updates render targets if necessary */
-  update() {
-    const [width, height] = this.getPixelSize();
-    const sizeChanged = width !== this.width || height !== this.height;
-    if (sizeChanged) {
-      this.width = width;
-      this.height = height;
-      if (this.depthStencilAttachment) {
-        this.depthStencilAttachment.destroy();
-        this.depthStencilAttachment = null;
-      }
-      this.gpuCanvasContext.configure({
-        device: this.device.handle,
-        format: getWebGPUTextureFormat(this.format),
-        // Can be used to define e.g. -srgb views
-        // viewFormats: [...]
-        colorSpace: this.props.colorSpace,
-        alphaMode: this.props.alphaMode
-      });
-      import_core15.log.log(1, `Resized to ${this.width}x${this.height}px`)();
+  updateSize(size) {
+    if (this.depthStencilAttachment) {
+      this.depthStencilAttachment.destroy();
+      this.depthStencilAttachment = null;
     }
+    this.handle.configure({
+      device: this.device.handle,
+      format: this.device.preferredColorFormat,
+      // Can be used to define e.g. -srgb views
+      // viewFormats: [...]
+      colorSpace: this.props.colorSpace,
+      alphaMode: this.props.alphaMode
+    });
   }
   resize(options) {
-    this.update();
+    if (!this.device.handle)
+      return;
+    if (this.props.autoResize) {
+      return;
+    }
+    if (this.canvas) {
+      const devicePixelRatio = this.getDevicePixelRatio(options == null ? void 0 : options.useDevicePixels);
+      this._setDevicePixelRatio(devicePixelRatio, options);
+      return;
+    }
   }
   /** Wrap the current canvas context texture in a luma.gl texture */
   getCurrentTexture() {
-    return this.device._createTexture({
+    return this.device.createTexture({
       id: `${this.id}#color-texture`,
-      handle: this.gpuCanvasContext.getCurrentTexture(),
-      format: this.format
+      handle: this.handle.getCurrentTexture(),
+      format: this.device.preferredColorFormat
     });
   }
   /** We build render targets on demand (i.e. not when size changes but when about to render) */
-  _createDepthStencilAttachment() {
+  _createDepthStencilAttachment(depthStencilFormat) {
     if (!this.depthStencilAttachment) {
       this.depthStencilAttachment = this.device.createTexture({
         id: `${this.id}#depth-stencil-texture`,
-        format: this.depthStencilFormat,
-        width: this.width,
-        height: this.height,
-        usage: GPUTextureUsage.RENDER_ATTACHMENT
+        usage: import_core15.Texture.RENDER_ATTACHMENT,
+        format: depthStencilFormat,
+        width: this.drawingBufferWidth,
+        height: this.drawingBufferHeight
       });
     }
     return this.depthStencilAttachment;
@@ -1217,70 +1289,27 @@ var WebGPUQuerySet = class extends import_core16.QuerySet {
 };
 
 // dist/adapter/webgpu-device.js
-var _WebGPUDevice = class extends import_core17.Device {
-  /** type of this device */
-  type = "webgpu";
+var WebGPUDevice = class extends import_core17.Device {
   /** The underlying WebGPU device */
   handle;
-  /* The underlying WebGPU adapter */
-  adapter;
-  /* The underlying WebGPU adapter's info */
-  adapterInfo;
+  /** type of this device */
+  type = "webgpu";
+  preferredColorFormat = navigator.gpu.getPreferredCanvasFormat();
+  preferredDepthFormat = "depth24plus";
   features;
   info;
   limits;
   lost;
-  canvasContext = null;
+  renderPass = null;
+  canvasContext;
   _isLost = false;
+  // canvasContext: WebGPUCanvasContext | null = null;
   commandEncoder = null;
-  renderPass = null;
-  /** Check if WebGPU is available */
-  static isSupported() {
-    return Boolean(typeof navigator !== "undefined" && navigator.gpu);
-  }
-  static async create(props) {
-    if (!navigator.gpu) {
-      throw new Error("WebGPU not available. Open in Chrome Canary and turn on chrome://flags/#enable-unsafe-webgpu");
-    }
-    import_core17.log.groupCollapsed(1, "WebGPUDevice created")();
-    const adapter = await navigator.gpu.requestAdapter({
-      powerPreference: "high-performance"
-      // forceSoftware: false
-    });
-    if (!adapter) {
-      throw new Error("Failed to request WebGPU adapter");
-    }
-    const adapterInfo = await adapter.requestAdapterInfo();
-    import_core17.log.probe(2, "Adapter available", adapterInfo)();
-    const requiredFeatures = [];
-    const requiredLimits = {};
-    if (props.requestMaxLimits) {
-      requiredFeatures.push(...Array.from(adapter.features));
-      const limits = Object.keys(adapter.limits).filter((key) => !["minSubgroupSize", "maxSubgroupSize"].includes(key));
-      for (const key of limits) {
-        const limit = key;
-        const value = adapter.limits[limit];
-        if (typeof value === "number") {
-          requiredLimits[limit] = value;
-        }
-      }
-    }
-    const gpuDevice = await adapter.requestDevice({
-      requiredFeatures,
-      requiredLimits
-    });
-    import_core17.log.probe(1, "GPUDevice available")();
-    if (typeof props.canvas === "string") {
-      await import_core17.CanvasContext.pageLoaded;
-      import_core17.log.probe(1, "DOM is loaded")();
-    }
-    const device = new _WebGPUDevice(gpuDevice, adapter, adapterInfo, props);
-    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) {
+  /* The underlying WebGPU adapter */
+  adapter;
+  /* The underlying WebGPU adapter's info */
+  adapterInfo;
+  constructor(props, device, adapter, adapterInfo) {
     super({ ...props, id: props.id || "webgpu-device" });
     this.handle = device;
     this.adapter = adapter;
@@ -1289,20 +1318,22 @@ var _WebGPUDevice = class extends import_core17.Device {
     this.features = this._getFeatures();
     this.limits = this.handle.limits;
     device.addEventListener("uncapturederror", (event) => {
-      const errorMessage = event instanceof GPUUncapturedErrorEvent ? event.error.message : "Unknown error";
-      this.error(new Error(errorMessage));
+      const errorMessage = event instanceof GPUUncapturedErrorEvent ? event.error.message : "Unknown WebGPU error";
+      this.reportError(new Error(errorMessage));
+      if (this.props.debug) {
+        debugger;
+      }
+      event.preventDefault();
     });
     this.lost = new Promise(async (resolve) => {
       const lostInfo = await this.handle.lost;
       this._isLost = true;
       resolve({ reason: "destroyed", message: lostInfo.message });
     });
-    this.canvasContext = new WebGPUCanvasContext(this, this.adapter, {
-      canvas: props.canvas,
-      height: props.height,
-      width: props.width,
-      container: props.container
-    });
+    if (props.createCanvasContext) {
+      const canvasContextProps = props.createCanvasContext === true ? {} : props.createCanvasContext;
+      this.canvasContext = new WebGPUCanvasContext(this, this.adapter, canvasContextProps);
+    }
   }
   // TODO
   // Load the glslang module now so that it is available synchronously when compiling shaders
@@ -1311,25 +1342,14 @@ var _WebGPUDevice = class extends import_core17.Device {
   destroy() {
     this.handle.destroy();
   }
-  isTextureFormatSupported(format) {
-    return !format.includes("webgl");
-  }
-  /** @todo implement proper check? */
-  isTextureFormatFilterable(format) {
-    return this.isTextureFormatSupported(format) && !format.startsWith("depth") && !format.startsWith("stencil");
-  }
-  /** @todo implement proper check? */
-  isTextureFormatRenderable(format) {
-    return this.isTextureFormatSupported(format);
-  }
   get isLost() {
     return this._isLost;
   }
   createBuffer(props) {
-    const newProps = this._getBufferProps(props);
+    const newProps = this._normalizeBufferProps(props);
     return new WebGPUBuffer(this, newProps);
   }
-  _createTexture(props) {
+  createTexture(props) {
     return new WebGPUTexture(this, props);
   }
   createExternalTexture(props) {
@@ -1382,7 +1402,13 @@ var _WebGPUDevice = class extends import_core17.Device {
     var _a;
     const commandBuffer = (_a = this.commandEncoder) == null ? void 0 : _a.finish();
     if (commandBuffer) {
+      this.handle.pushErrorScope("validation");
       this.handle.queue.submit([commandBuffer]);
+      this.handle.popErrorScope().then((error) => {
+        if (error) {
+          this.reportError(new Error(`WebGPU command submission failed: ${error.message}`));
+        }
+      });
     }
     this.commandEncoder = null;
   }
@@ -1430,8 +1456,17 @@ var _WebGPUDevice = class extends import_core17.Device {
     for (const feature of WEBGPU_ALWAYS_FEATURES) {
       features.add(feature);
     }
-    return new import_core17.DeviceFeatures(Array.from(features), this.props.disabledFeatures);
+    return new import_core17.DeviceFeatures(Array.from(features), this.props._disabledFeatures);
   }
+  _getDeviceSpecificTextureFormatCapabilities(capabilities) {
+    const { format } = capabilities;
+    if (format.includes("webgl")) {
+      return { format, create: false, render: false, filter: false, blend: false, store: false };
+    }
+    return capabilities;
+  }
+  // DEPRECATED METHODS
+  // @deprecated
   copyExternalImageToTexture(options) {
     var _a;
     const {
@@ -1472,6 +1507,60 @@ var _WebGPUDevice = class extends import_core17.Device {
     );
   }
 };
-var WebGPUDevice = _WebGPUDevice;
-__publicField(WebGPUDevice, "type", "webgpu");
+
+// dist/adapter/webgpu-adapter.js
+var WebGPUAdapter = class extends import_core18.Adapter {
+  /** type of device's created by this adapter */
+  type = "webgpu";
+  constructor() {
+    super();
+    WebGPUDevice.adapter = this;
+  }
+  /** Check if WebGPU is available */
+  isSupported() {
+    return Boolean(typeof navigator !== "undefined" && navigator.gpu);
+  }
+  async create(props) {
+    if (!navigator.gpu) {
+      throw new Error("WebGPU not available. Open in Chrome Canary and turn on chrome://flags/#enable-unsafe-webgpu");
+    }
+    import_core18.log.groupCollapsed(1, "WebGPUDevice created")();
+    const adapter = await navigator.gpu.requestAdapter({
+      powerPreference: "high-performance"
+      // forceSoftware: false
+    });
+    if (!adapter) {
+      throw new Error("Failed to request WebGPU adapter");
+    }
+    const adapterInfo = await adapter.requestAdapterInfo();
+    import_core18.log.probe(2, "Adapter available", adapterInfo)();
+    const requiredFeatures = [];
+    const requiredLimits = {};
+    if (props._requestMaxLimits) {
+      requiredFeatures.push(...Array.from(adapter.features));
+      const limits = Object.keys(adapter.limits).filter((key) => !["minSubgroupSize", "maxSubgroupSize"].includes(key));
+      for (const key of limits) {
+        const limit = key;
+        const value = adapter.limits[limit];
+        if (typeof value === "number") {
+          requiredLimits[limit] = value;
+        }
+      }
+    }
+    const gpuDevice = await adapter.requestDevice({
+      requiredFeatures,
+      requiredLimits
+    });
+    import_core18.log.probe(1, "GPUDevice available")();
+    const device = new WebGPUDevice(props, gpuDevice, adapter, adapterInfo);
+    import_core18.log.probe(1, "Device created. For more info, set chrome://flags/#enable-webgpu-developer-features")();
+    import_core18.log.table(1, device.info)();
+    import_core18.log.groupEnd(1)();
+    return device;
+  }
+  async attach(handle) {
+    throw new Error("WebGPUAdapter.attach() not implemented");
+  }
+};
+var webgpuAdapter = new WebGPUAdapter();
 //# sourceMappingURL=index.cjs.map