@luma.gl/webgpu 9.0.0-alpha.2 → 9.0.0-alpha.21

package/dist/index.cjs

@@ -0,0 +1,1442 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  WebGPUBuffer: () => WebGPUBuffer,
+  WebGPUDevice: () => WebGPUDevice,
+  WebGPUSampler: () => WebGPUSampler,
+  WebGPUShader: () => WebGPUShader,
+  WebGPUTexture: () => WebGPUTexture
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/adapter/webgpu-device.ts
+var import_api14 = require("@luma.gl/api");
+
+// src/adapter/resources/webgpu-buffer.ts
+var import_api = require("@luma.gl/api");
+function getByteLength(props) {
+  var _a;
+  return props.byteLength || ((_a = props.data) == null ? void 0 : _a.byteLength) || 0;
+}
+var WebGPUBuffer = class extends import_api.Buffer {
+  constructor(device, props) {
+    super(device, props);
+    this.device = device;
+    this.byteLength = getByteLength(props);
+    const mapBuffer = Boolean(props.data);
+    this.handle = this.props.handle || this.device.handle.createBuffer({
+      size: this.byteLength,
+      // usage defaults to vertex
+      usage: this.props.usage || GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+      mappedAtCreation: this.props.mappedAtCreation || mapBuffer,
+      label: this.props.id
+    });
+    if (props.data) {
+      this._writeMapped(props.data);
+    }
+    if (mapBuffer && !props.mappedAtCreation) {
+      this.handle.unmap();
+    }
+  }
+  destroy() {
+    this.handle.destroy();
+  }
+  // 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
+    );
+  }
+  readAsync() {
+    return __async(this, arguments, function* (byteOffset = 0, byteLength = this.byteLength) {
+      const tempBuffer = new WebGPUBuffer(this.device, { usage: import_api.Buffer.MAP_READ | import_api.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()]);
+      yield tempBuffer.handle.mapAsync(GPUMapMode.READ, byteOffset, byteLength);
+      const arrayBuffer = tempBuffer.handle.getMappedRange().slice(0);
+      tempBuffer.handle.unmap();
+      tempBuffer.destroy();
+      return arrayBuffer;
+    });
+  }
+  _writeMapped(typedArray) {
+    const arrayBuffer = this.handle.getMappedRange();
+    new typedArray.constructor(arrayBuffer).set(typedArray);
+  }
+  // WEBGPU API
+  mapAsync(mode, offset = 0, size) {
+    return this.handle.mapAsync(mode, offset, size);
+  }
+  getMappedRange(offset = 0, size) {
+    return this.handle.getMappedRange(offset, size);
+  }
+  unmap() {
+    this.handle.unmap();
+  }
+};
+
+// src/adapter/resources/webgpu-texture.ts
+var import_api3 = require("@luma.gl/api");
+
+// src/adapter/helpers/convert-texture-format.ts
+function getWebGPUTextureFormat(format) {
+  if (format.includes("webgl")) {
+    throw new Error("webgl-only format");
+  }
+  return format;
+}
+
+// src/adapter/resources/webgpu-sampler.ts
+var import_api2 = require("@luma.gl/api");
+var WebGPUSampler = class extends import_api2.Sampler {
+  constructor(device, props) {
+    super(device, props);
+    this.device = device;
+    const samplerProps = __spreadValues({}, this.props);
+    if (samplerProps.type !== "comparison-sampler") {
+      delete samplerProps.compare;
+    }
+    this.handle = this.handle || this.device.handle.createSampler(samplerProps);
+    this.handle.label = this.props.id;
+  }
+  destroy() {
+  }
+};
+
+// src/adapter/resources/webgpu-texture.ts
+var BASE_DIMENSIONS = {
+  "1d": "1d",
+  "2d": "2d",
+  "2d-array": "2d",
+  "cube": "2d",
+  "cube-array": "2d",
+  "3d": "3d"
+};
+var WebGPUTexture = class extends import_api3.Texture {
+  // 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);
+    if (typeof this.props.format === "number") {
+      throw new Error("number format");
+    }
+    this.device = device;
+    this.handle = this.props.handle || this.createHandle();
+    if (this.props.data) {
+      this.setData({ data: this.props.data });
+    }
+    this.sampler = props.sampler instanceof WebGPUSampler ? props.sampler : new WebGPUSampler(this.device, props.sampler);
+    this.view = this.handle.createView({
+      // format: this.props.format,
+      // dimension: this.props.dimension,
+      // aspect = "all";
+      // baseMipLevel: 0;
+      // mipLevelCount;
+      // baseArrayLayer = 0;
+      // arrayLayerCount;
+    });
+  }
+  createHandle() {
+    var _a, _b;
+    if (typeof this.props.format === "number") {
+      throw new Error("number format");
+    }
+    const width = this.props.width || ((_a = this.props.data) == null ? void 0 : _a.width) || 1;
+    const height = this.props.height || ((_b = this.props.data) == null ? void 0 : _b.height) || 1;
+    return this.device.handle.createTexture({
+      size: {
+        width,
+        height,
+        depthOrArrayLayers: this.props.depth
+      },
+      dimension: BASE_DIMENSIONS[this.props.dimension],
+      format: getWebGPUTextureFormat(this.props.format),
+      usage: this.props.usage,
+      mipLevelCount: this.props.mipLevels,
+      sampleCount: this.props.samples
+    });
+  }
+  destroy() {
+    this.handle.destroy();
+  }
+  /**
+   * Set default sampler
+   * Accept a sampler instance or set of props;
+   */
+  setSampler(sampler) {
+    this.sampler = sampler instanceof WebGPUSampler ? sampler : new WebGPUSampler(this.device, sampler);
+    return this;
+  }
+  setData(options) {
+    return this.setImage({ source: options.data });
+  }
+  /** 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;
+    this.device.handle.queue.copyExternalImageToTexture(
+      // source: GPUImageCopyExternalImage
+      {
+        source,
+        origin: [sourceX, sourceY]
+      },
+      // destination: GPUImageCopyTextureTagged
+      {
+        texture: this.handle,
+        origin: [x, y, z],
+        mipLevel,
+        aspect,
+        colorSpace,
+        premultipliedAlpha
+      },
+      // copySize: GPUExtent3D
+      [
+        width,
+        height,
+        depth
+      ]
+    );
+    return this;
+  }
+  /*
+    async readPixels() {
+      const readbackBuffer = device.createBuffer({
+          usage: Buffer.COPY_DST | Buffer.MAP_READ,
+          size: 4 * textureWidth * textureHeight,
+      });
+  
+      // Copy data from the texture to the buffer.
+      const encoder = device.createCommandEncoder();
+      encoder.copyTextureToBuffer(
+          { texture },
+          { buffer, rowPitch: textureWidth * 4 },
+          [textureWidth, textureHeight],
+      );
+      device.submit([encoder.finish()]);
+  
+      // Get the data on the CPU.
+      await buffer.mapAsync(GPUMapMode.READ);
+      saveScreenshot(buffer.getMappedRange());
+      buffer.unmap();
+    }
+  
+    setImageData(imageData, usage): this {
+      let data = null;
+  
+      const bytesPerRow = Math.ceil((img.width * 4) / 256) * 256;
+      if (bytesPerRow == img.width * 4) {
+        data = imageData.data;
+      } else {
+        data = new Uint8Array(bytesPerRow * img.height);
+        let imagePixelIndex = 0;
+        for (let y = 0; y < img.height; ++y) {
+          for (let x = 0; x < img.width; ++x) {
+            const i = x * 4 + y * bytesPerRow;
+            data[i] = imageData.data[imagePixelIndex];
+            data[i + 1] = imageData.data[imagePixelIndex + 1];
+            data[i + 2] = imageData.data[imagePixelIndex + 2];
+            data[i + 3] = imageData.data[imagePixelIndex + 3];
+            imagePixelIndex += 4;
+          }
+        }
+      }
+      return this;
+    }
+  
+    setData(data): this {
+      const textureDataBuffer = this.device.handle.createBuffer({
+        size: data.byteLength,
+        usage: Buffer.COPY_DST | Buffer.COPY_SRC,
+        mappedAtCreation: true
+      });
+      new Uint8Array(textureDataBuffer.getMappedRange()).set(data);
+      textureDataBuffer.unmap();
+  
+      this.setBuffer(textureDataBuffer);
+  
+      textureDataBuffer.destroy();
+      return this;
+    }
+  
+    setBuffer(textureDataBuffer, {bytesPerRow}): this {
+      const commandEncoder = this.device.handle.createCommandEncoder();
+      commandEncoder.copyBufferToTexture(
+        {
+          buffer: textureDataBuffer,
+          bytesPerRow
+        },
+        {
+          texture: this.handle
+        },
+        {
+          width,
+          height,
+          depth
+        }
+      );
+  
+      this.device.handle.defaultQueue.submit([commandEncoder.finish()]);
+      return this;
+    }
+    */
+};
+
+// src/adapter/resources/webgpu-external-texture.ts
+var import_api4 = require("@luma.gl/api");
+var WebGPUExternalTexture = class extends import_api4.ExternalTexture {
+  constructor(device, props) {
+    super(device, props);
+    this.device = device;
+    this.handle = this.props.handle || this.device.handle.importExternalTexture({
+      source: props.source,
+      colorSpace: props.colorSpace
+    });
+    this.sampler = null;
+  }
+  destroy() {
+  }
+  /** Set default sampler */
+  setSampler(sampler) {
+    this.sampler = sampler instanceof WebGPUSampler ? sampler : new WebGPUSampler(this.device, sampler);
+    return this;
+  }
+};
+
+// src/adapter/resources/webgpu-shader.ts
+var import_api5 = require("@luma.gl/api");
+var WebGPUShader = class extends import_api5.Shader {
+  constructor(device, props) {
+    super(device, props);
+    this.device = device;
+    this.device.handle.pushErrorScope("validation");
+    this.handle = this.props.handle || this.createHandle();
+    this.handle.label = this.props.id;
+    this._checkCompilationError(this.device.handle.popErrorScope());
+  }
+  _checkCompilationError(errorScope) {
+    return __async(this, null, function* () {
+      const error = yield errorScope;
+      if (error) {
+        const shaderLog = yield this.compilationInfo();
+        import_api5.log.error(`Shader compilation error: ${error.message}`, shaderLog)();
+        throw new Error(`Shader compilation error: ${error.message}`);
+      }
+    });
+  }
+  destroy() {
+  }
+  createHandle() {
+    const { source } = this.props;
+    let language = this.props.language;
+    if (!language) {
+      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, type)
+        });
+      default:
+        throw new Error(language);
+    }
+  }
+  /** Returns compilation info for this shader */
+  compilationInfo() {
+    return __async(this, null, function* () {
+      const compilationInfo = yield this.handle.getCompilationInfo();
+      return compilationInfo.messages;
+    });
+  }
+};
+
+// src/adapter/resources/webgpu-render-pipeline.ts
+var import_api8 = require("@luma.gl/api");
+
+// src/adapter/helpers/webgpu-parameters.ts
+function addDepthStencil(descriptor) {
+  descriptor.depthStencil = descriptor.depthStencil || {
+    // required, set something
+    format: "depth24plus",
+    stencilFront: {},
+    stencilBack: {},
+    // TODO can this cause trouble? Should we set to WebGPU defaults? Are there defaults?
+    depthWriteEnabled: void 0,
+    depthCompare: void 0
+  };
+  return descriptor.depthStencil;
+}
+var PARAMETER_TABLE = {
+  // RASTERIZATION PARAMETERS
+  cullMode: (parameter, value, descriptor) => {
+    descriptor.primitive = descriptor.primitive || {};
+    descriptor.primitive.cullMode = value;
+  },
+  frontFace: (parameter, value, descriptor) => {
+    descriptor.primitive = descriptor.primitive || {};
+    descriptor.primitive.frontFace = value;
+  },
+  // DEPTH
+  depthWriteEnabled: (parameter, value, descriptor) => {
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthWriteEnabled = value;
+  },
+  depthCompare: (parameter, value, descriptor) => {
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthCompare = value;
+  },
+  depthFormat: (parameter, value, descriptor) => {
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.format = value;
+  },
+  depthBias: (parameter, value, descriptor) => {
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthBias = value;
+  },
+  depthBiasSlopeScale: (parameter, value, descriptor) => {
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthBiasSlopeScale = value;
+  },
+  depthBiasClamp: (parameter, value, descriptor) => {
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthBiasClamp = value;
+  },
+  // STENCIL
+  stencilReadMask: (parameter, value, descriptor) => {
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilReadMask = value;
+  },
+  stencilWriteMask: (parameter, value, descriptor) => {
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilWriteMask = value;
+  },
+  stencilCompare: (parameter, value, descriptor) => {
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront.compare = value;
+    depthStencil.stencilBack.compare = value;
+  },
+  stencilPassOperation: (parameter, value, descriptor) => {
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront.passOp = value;
+    depthStencil.stencilBack.passOp = value;
+  },
+  stencilFailOperation: (parameter, value, descriptor) => {
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront.failOp = value;
+    depthStencil.stencilBack.failOp = value;
+  },
+  stencilDepthFailOperation: (parameter, value, descriptor) => {
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront.depthFailOp = value;
+    depthStencil.stencilBack.depthFailOp = value;
+  },
+  // MULTISAMPLE
+  sampleCount: (parameter, value, descriptor) => {
+    descriptor.multisample = descriptor.multisample || {};
+    descriptor.multisample.count = value;
+  },
+  sampleMask: (parameter, value, descriptor) => {
+    descriptor.multisample = descriptor.multisample || {};
+    descriptor.multisample.mask = value;
+  },
+  sampleAlphaToCoverageEnabled: (parameter, value, descriptor) => {
+    descriptor.multisample = descriptor.multisample || {};
+    descriptor.multisample.alphaToCoverageEnabled = value;
+  },
+  // COLOR
+  colorMask: (parameter, value, descriptor) => {
+    const targets = addColorState(descriptor);
+    targets[0].writeMask = value;
+  },
+  blendColorOperation: (parameter, value, descriptor) => {
+    addColorState(descriptor);
+  }
+  /*
+    blendColorSrcTarget: (parameter, value, descriptor: GPURenderPipelineDescriptor) => {
+      addColorState(descriptor);
+      targets[0].blend = targets[0].blend || {};
+      targets[0].blend.color = targets[0].blend.color || {};
+      targets[0].blend.color.srcTarget = value;
+    },
+  
+    blendColorDstTarget: (parameter, value, descriptor: GPURenderPipelineDescriptor) => {
+      addColorState(descriptor);
+      targets[0].blend = targets[0].blend || {};
+      targets[0].blend.color = targets[0].blend.color || {};
+      targets[0].blend.color.dstTarget = value;
+    },
+  
+    blendAlphaOperation: (parameter, value, descriptor: GPURenderPipelineDescriptor) => {
+      addColorState(descriptor);
+      targets[0].blend = targets[0].blend || {};
+      targets[0].blend.alpha = targets[0].blend.alpha || {};
+      targets[0].blend.alpha.operation = value;
+    },
+  
+    blendAlphaSrcTarget: (parameter, value, descriptor: GPURenderPipelineDescriptor) => {
+      addColorState(descriptor);
+      targets[0].blend = targets[0].blend || {};
+      targets[0].blend.alpha = targets[0].blend.alpha || {};
+      targets[0].blend.alpha.srcTarget = value;
+    },
+  
+    blendAlphaDstTarget: (parameter, value, descriptor: GPURenderPipelineDescriptor) => {
+      addColorState(descriptor);
+      targets[0].blend = targets[0].blend || {};
+      targets[0].blend.alpha = targets[0].blend.alpha || {};
+      targets[0].blend.alpha.dstTarget = value;
+    },
+    */
+};
+var DEFAULT_PIPELINE_DESCRIPTOR = {
+  // depthStencil: {
+  //   stencilFront: {},
+  //   stencilBack: {},
+  //   // depthWriteEnabled: true,
+  //   // depthCompare: 'less',
+  //   // format: 'depth24plus-stencil8',
+  // },
+  primitive: {
+    cullMode: "back",
+    topology: "triangle-list"
+  },
+  vertex: {
+    module: void 0,
+    entryPoint: "main"
+  },
+  fragment: {
+    module: void 0,
+    entryPoint: "main",
+    targets: [
+      // { format: props.color0Format || 'bgra8unorm' }
+    ]
+  },
+  layout: "auto"
+};
+function applyParametersToRenderPipelineDescriptor(pipelineDescriptor, parameters = {}) {
+  Object.assign(pipelineDescriptor, __spreadValues(__spreadValues({}, DEFAULT_PIPELINE_DESCRIPTOR), pipelineDescriptor));
+  setParameters(pipelineDescriptor, parameters);
+}
+function setParameters(pipelineDescriptor, parameters) {
+  for (const [key, value] of Object.entries(parameters)) {
+    const setterFunction = PARAMETER_TABLE[key];
+    if (!setterFunction) {
+      throw new Error(`Illegal parameter ${key}`);
+    }
+    setterFunction(key, value, pipelineDescriptor);
+  }
+}
+function addColorState(descriptor) {
+  var _a, _b, _c, _d, _e, _f;
+  descriptor.fragment.targets = ((_a = descriptor.fragment) == null ? void 0 : _a.targets) || [];
+  if (!Array.isArray((_b = descriptor.fragment) == null ? void 0 : _b.targets)) {
+    throw new Error("colorstate");
+  }
+  if (((_d = (_c = descriptor.fragment) == null ? void 0 : _c.targets) == null ? void 0 : _d.length) === 0) {
+    (_e = descriptor.fragment.targets) == null ? void 0 : _e.push({});
+  }
+  return (_f = descriptor.fragment) == null ? void 0 : _f.targets;
+}
+
+// src/adapter/helpers/get-bind-group.ts
+var import_api6 = require("@luma.gl/api");
+function getBindGroup(device, bindGroupLayout, layout, bindings) {
+  const entries = getBindGroupEntries(bindings, layout);
+  return device.createBindGroup({
+    layout: bindGroupLayout,
+    entries
+  });
+}
+function getShaderLayoutBinding(layout, bindingName) {
+  const bindingLayout = layout.bindings.find((binding) => binding.name === bindingName);
+  if (!bindingLayout) {
+    import_api6.log.warn(`Binding ${bindingName} not set: Not found in shader layout.`)();
+  }
+  return bindingLayout;
+}
+function getBindGroupEntries(bindings, layout) {
+  const entries = [];
+  for (const [bindingName, value] of Object.entries(bindings)) {
+    const bindingLayout = getShaderLayoutBinding(layout, bindingName);
+    if (bindingLayout) {
+      entries.push(getBindGroupEntry(value, bindingLayout.location));
+    }
+  }
+  return entries;
+}
+function getBindGroupEntry(binding, index) {
+  if (binding instanceof import_api6.Buffer) {
+    return {
+      binding: index,
+      resource: {
+        buffer: (0, import_api6.cast)(binding).handle
+      }
+    };
+  }
+  if (binding instanceof import_api6.Sampler) {
+    return {
+      binding: index,
+      resource: (0, import_api6.cast)(binding).handle
+    };
+  } else if (binding instanceof import_api6.Texture) {
+    return {
+      binding: index,
+      resource: (0, import_api6.cast)(binding).handle.createView()
+    };
+  }
+  throw new Error("invalid binding");
+}
+
+// src/adapter/helpers/get-vertex-buffer-layout.ts
+var import_api7 = require("@luma.gl/api");
+function getVertexBufferLayout(layout, bufferMap) {
+  const vertexBufferLayouts = [];
+  const usedAttributes = /* @__PURE__ */ new Set();
+  for (const mapping of bufferMap) {
+    const vertexAttributes = [];
+    let stepMode = "vertex";
+    let byteStride = 0;
+    const byteOffset = mapping.byteOffset || 0;
+    if ("attributes" in mapping) {
+      for (const interleaved of mapping.attributes) {
+        const attributeLayout = findAttributeLayout(layout, interleaved.name, usedAttributes);
+        stepMode = attributeLayout.stepMode || "vertex";
+        vertexAttributes.push({
+          format: attributeLayout.format,
+          offset: byteOffset + byteStride,
+          shaderLocation: attributeLayout.location
+        });
+        byteStride += (0, import_api7.decodeVertexFormat)(attributeLayout.format).byteLength;
+      }
+    } else {
+      const attributeLayout = findAttributeLayout(layout, mapping.name, usedAttributes);
+      byteStride = (0, import_api7.decodeVertexFormat)(attributeLayout.format).byteLength;
+      stepMode = attributeLayout.stepMode || "vertex";
+      vertexAttributes.push({
+        format: attributeLayout.format,
+        offset: byteOffset,
+        shaderLocation: attributeLayout.location
+      });
+    }
+    vertexBufferLayouts.push({
+      arrayStride: mapping.byteStride || byteStride,
+      stepMode: stepMode || "vertex",
+      attributes: vertexAttributes
+    });
+  }
+  for (const attribute of layout.attributes) {
+    if (!usedAttributes.has(attribute.name)) {
+      vertexBufferLayouts.push({
+        arrayStride: (0, import_api7.decodeVertexFormat)(attribute.format).byteLength,
+        stepMode: attribute.stepMode || "vertex",
+        attributes: [{
+          format: attribute.format,
+          offset: 0,
+          shaderLocation: attribute.location
+        }]
+      });
+    }
+  }
+  return vertexBufferLayouts;
+}
+function getBufferSlots(layout, bufferMap) {
+  const usedAttributes = /* @__PURE__ */ new Set();
+  let bufferSlot = 0;
+  const bufferSlots = {};
+  for (const mapping of bufferMap) {
+    if ("attributes" in mapping) {
+      for (const interleaved of mapping.attributes) {
+        usedAttributes.add(interleaved.name);
+      }
+    } else {
+      usedAttributes.add(mapping.name);
+    }
+    bufferSlots[mapping.name] = bufferSlot++;
+  }
+  for (const attribute of layout.attributes) {
+    if (!usedAttributes.has(attribute.name)) {
+      bufferSlots[attribute.name] = bufferSlot++;
+    }
+  }
+  return bufferSlots;
+}
+function findAttributeLayout(layout, name, attributeNames) {
+  const attribute = layout.attributes.find((attribute2) => attribute2.name === name);
+  if (!attribute) {
+    throw new Error(`Unknown attribute ${name}`);
+  }
+  if (attributeNames.has(name)) {
+    throw new Error(`Duplicate attribute ${name}`);
+  }
+  attributeNames.add(name);
+  return attribute;
+}
+
+// src/adapter/resources/webgpu-render-pipeline.ts
+var WebGPURenderPipeline = class extends import_api8.RenderPipeline {
+  constructor(device, props) {
+    super(device, props);
+    this.fs = null;
+    this._indexBuffer = null;
+    this._bindGroup = null;
+    this.device = device;
+    this.handle = this.props.handle || this.createHandle();
+    this.handle.label = this.props.id;
+    this.vs = (0, import_api8.cast)(props.vs);
+    this.fs = (0, import_api8.cast)(props.fs);
+    this._bufferSlots = getBufferSlots(this.props.layout, this.props.bufferMap);
+    this._buffers = new Array(Object.keys(this._bufferSlots).length).fill(null);
+    this._bindGroupLayout = this.handle.getBindGroupLayout(0);
+  }
+  createHandle() {
+    const descriptor = this._getRenderPipelineDescriptor();
+    const renderPipeline = this.device.handle.createRenderPipeline(descriptor);
+    import_api8.log.groupCollapsed(1, `new WebGPRenderPipeline(${this.id})`)();
+    import_api8.log.log(1, JSON.stringify(descriptor, null, 2))();
+    import_api8.log.groupEnd(1)();
+    return renderPipeline;
+  }
+  destroy() {
+  }
+  setIndexBuffer(indexBuffer) {
+    this._indexBuffer = (0, import_api8.cast)(indexBuffer);
+  }
+  setAttributes(attributes) {
+    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}`
+        );
+      }
+    }
+  }
+  /** Set the bindings */
+  setBindings(bindings) {
+    if (!(0, import_api8.isObjectEmpty)(this.props.bindings)) {
+      Object.assign(this.props.bindings, bindings);
+      this._bindGroup = getBindGroup(
+        this.device.handle,
+        this._bindGroupLayout,
+        this.props.layout,
+        this.props.bindings
+      );
+    }
+  }
+  setUniforms(uniforms) {
+    if (!(0, import_api8.isObjectEmpty)(uniforms)) {
+      throw new Error("WebGPU does not support uniforms");
+    }
+  }
+  _getBuffers() {
+    return this._buffers;
+  }
+  /** Return a bind group created by setBindings */
+  _getBindGroup() {
+    return this._bindGroup;
+  }
+  /** Populate the complex WebGPU GPURenderPipelineDescriptor */
+  _getRenderPipelineDescriptor() {
+    var _a, _b;
+    const vertex = {
+      module: (0, import_api8.cast)(this.props.vs).handle,
+      entryPoint: this.props.vsEntryPoint || "main",
+      buffers: getVertexBufferLayout(this.props.layout, this.props.bufferMap)
+    };
+    let fragment;
+    if (this.props.fs) {
+      fragment = {
+        module: (0, import_api8.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)
+          }
+        ]
+      };
+    }
+    switch (this.props.topology) {
+      case "triangle-fan":
+      case "line-loop":
+        throw new Error(`WebGPU does not support primitive topology ${this.props.topology}`);
+      default:
+    }
+    const descriptor = {
+      vertex,
+      fragment,
+      primitive: {
+        topology: this.props.topology
+      },
+      layout: "auto"
+    };
+    applyParametersToRenderPipelineDescriptor(descriptor, this.props.parameters);
+    return descriptor;
+  }
+  draw(options) {
+    const webgpuRenderPass = (0, import_api8.cast)(options.renderPass) || this.device.getDefaultRenderPass();
+    webgpuRenderPass.handle.setPipeline(this.handle);
+    const bindGroup = this._getBindGroup();
+    if (bindGroup) {
+      webgpuRenderPass.handle.setBindGroup(0, bindGroup);
+    }
+    this._setAttributeBuffers(webgpuRenderPass);
+    if (options.indexCount) {
+      webgpuRenderPass.handle.drawIndexed(
+        options.indexCount,
+        options.instanceCount,
+        options.firstIndex,
+        options.baseVertex,
+        options.firstInstance
+      );
+    } else {
+      webgpuRenderPass.handle.draw(
+        options.vertexCount || 0,
+        options.instanceCount,
+        options.firstIndex,
+        options.firstInstance
+      );
+    }
+  }
+  _setAttributeBuffers(webgpuRenderPass) {
+    if (this._indexBuffer) {
+      webgpuRenderPass.handle.setIndexBuffer(this._indexBuffer.handle, this._indexBuffer.props.indexType);
+    }
+    const buffers = this._getBuffers();
+    for (let i = 0; i < buffers.length; ++i) {
+      const buffer = (0, import_api8.cast)(buffers[i]);
+      if (!buffer) {
+        const attribute = this.props.layout.attributes.find(
+          (attribute2) => attribute2.location === i
+        );
+        throw new Error(
+          `No buffer provided for attribute '${(attribute == null ? void 0 : attribute.name) || ""}' in Model '${this.props.id}'`
+        );
+      }
+      webgpuRenderPass.handle.setVertexBuffer(i, buffer.handle);
+    }
+  }
+};
+
+// src/adapter/resources/webgpu-compute-pipeline.ts
+var import_api9 = require("@luma.gl/api");
+var WebGPUComputePipeline = class extends import_api9.ComputePipeline {
+  constructor(device, props) {
+    super(device, props);
+    this.device = device;
+    const module2 = (0, import_api9.cast)(this.props.cs).handle;
+    this.handle = this.props.handle || this.device.handle.createComputePipeline({
+      label: this.props.id,
+      compute: {
+        module: module2,
+        entryPoint: this.props.csEntryPoint
+        // constants: this.props.csConstants
+      },
+      layout: "auto"
+    });
+  }
+  /** For internal use in render passes */
+  _getBindGroupLayout() {
+    return this.handle.getBindGroupLayout(0);
+  }
+};
+
+// src/adapter/resources/webgpu-render-pass.ts
+var import_api10 = require("@luma.gl/api");
+var WebGPURenderPass = class extends import_api10.RenderPass {
+  constructor(device, props = {}) {
+    super(device, props);
+    /** Active pipeline */
+    this.pipeline = null;
+    this.device = device;
+    const framebuffer = props.framebuffer || device.canvasContext.getCurrentFramebuffer();
+    const renderPassDescriptor = framebuffer.renderPassDescriptor;
+    this.handle = this.props.handle || device.commandEncoder.beginRenderPass(renderPassDescriptor);
+    this.handle.label = this.props.id;
+  }
+  destroy() {
+  }
+  end() {
+    this.handle.end();
+  }
+  setPipeline(pipeline) {
+    this.pipeline = (0, import_api10.cast)(pipeline);
+    this.handle.setPipeline(this.pipeline.handle);
+  }
+  /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */
+  setBindings(bindings) {
+    var _a, _b;
+    (_a = this.pipeline) == null ? void 0 : _a.setBindings(bindings);
+    const bindGroup = (_b = this.pipeline) == null ? void 0 : _b._getBindGroup();
+    if (bindGroup) {
+      this.handle.setBindGroup(0, bindGroup);
+    }
+  }
+  setIndexBuffer(buffer, indexFormat, offset = 0, size) {
+    this.handle.setIndexBuffer((0, import_api10.cast)(buffer).handle, indexFormat, offset, size);
+  }
+  setVertexBuffer(slot, buffer, offset = 0) {
+    this.handle.setVertexBuffer(slot, (0, import_api10.cast)(buffer).handle, offset);
+  }
+  draw(options) {
+    if (options.indexCount) {
+      this.handle.drawIndexed(
+        options.indexCount,
+        options.instanceCount,
+        options.firstIndex,
+        options.baseVertex,
+        options.firstInstance
+      );
+    } else {
+      this.handle.draw(
+        options.vertexCount || 0,
+        options.instanceCount,
+        options.firstIndex,
+        options.firstInstance
+      );
+    }
+  }
+  drawIndirect() {
+  }
+  setParameters(parameters) {
+    const { blendConstant, stencilReference, scissorRect, viewport } = parameters;
+    if (blendConstant) {
+      this.handle.setBlendConstant(blendConstant);
+    }
+    if (stencilReference) {
+      this.handle.setStencilReference(stencilReference);
+    }
+    if (scissorRect) {
+      this.handle.setScissorRect(scissorRect[0], scissorRect[1], scissorRect[2], scissorRect[3]);
+    }
+    if (viewport) {
+      this.handle.setViewport(
+        viewport[0],
+        viewport[1],
+        viewport[2],
+        viewport[3],
+        viewport[4],
+        viewport[5]
+      );
+    }
+  }
+  pushDebugGroup(groupLabel) {
+    this.handle.pushDebugGroup(groupLabel);
+  }
+  popDebugGroup() {
+    this.handle.popDebugGroup();
+  }
+  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;
+  // executeBundles(bundles: Iterable<GPURenderBundle>): void;
+};
+
+// src/adapter/resources/webgpu-compute-pass.ts
+var import_api11 = require("@luma.gl/api");
+var WebGPUComputePass = class extends import_api11.ComputePass {
+  constructor(device, props) {
+    var _a;
+    super(device, props);
+    this._bindGroupLayout = null;
+    this.device = device;
+    this.handle = this.props.handle || ((_a = device.commandEncoder) == null ? void 0 : _a.beginComputePass({
+      label: this.props.id
+      // timestampWrites?: GPUComputePassTimestampWrites;
+    }));
+  }
+  /** @note no WebGPU destroy method, just gc */
+  destroy() {
+  }
+  end() {
+    this.handle.end();
+  }
+  setPipeline(pipeline) {
+    const wgpuPipeline = (0, import_api11.cast)(pipeline);
+    this.handle.setPipeline(wgpuPipeline.handle);
+    this._bindGroupLayout = wgpuPipeline._getBindGroupLayout();
+  }
+  /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */
+  setBindings(bindings) {
+    throw new Error("fix me");
+  }
+  /**
+   * 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.
+   */
+  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
+   */
+  dispatchIndirect(indirectBuffer, indirectOffset = 0) {
+    this.handle.dispatchWorkgroupsIndirect((0, import_api11.cast)(indirectBuffer).handle, indirectOffset);
+  }
+  pushDebugGroup(groupLabel) {
+    this.handle.pushDebugGroup(groupLabel);
+  }
+  popDebugGroup() {
+    this.handle.popDebugGroup();
+  }
+  insertDebugMarker(markerLabel) {
+    this.handle.insertDebugMarker(markerLabel);
+  }
+  // writeTimestamp(querySet: GPUQuerySet, queryIndex: number): void;
+  // beginPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
+  // endPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
+};
+
+// src/adapter/webgpu-canvas-context.ts
+var import_api13 = require("@luma.gl/api");
+
+// src/adapter/resources/webgpu-framebuffer.ts
+var import_api12 = require("@luma.gl/api");
+var WebGPUFramebuffer = class extends import_api12.Framebuffer {
+  constructor(device, props) {
+    super(device, props);
+    this.colorAttachments = [];
+    this.depthStencilAttachment = null;
+    /** Partial render pass descriptor. Used by WebGPURenderPass */
+    this.renderPassDescriptor = {
+      colorAttachments: []
+    };
+    this.device = device;
+    if (props.depthStencilAttachment) {
+      this.depthStencilAttachment = this.createDepthStencilTexture(props);
+    }
+    if (props.colorAttachments) {
+      this.colorAttachments = props.colorAttachments.map((colorAttachment) => this.createColorTexture(this.props, colorAttachment));
+    }
+    if (this.depthStencilAttachment) {
+      this.renderPassDescriptor.depthStencilAttachment = {
+        view: this.depthStencilAttachment.handle.createView(),
+        // Add default clear values
+        depthClearValue: 1,
+        depthStoreOp: "store",
+        stencilClearValue: 0,
+        stencilStoreOp: "store"
+      };
+    }
+    if (this.colorAttachments.length > 0) {
+      this.renderPassDescriptor.colorAttachments = this.colorAttachments.map((colorAttachment) => ({
+        view: colorAttachment.handle.createView(),
+        loadOp: "clear",
+        loadValue: [0, 0, 0, 0],
+        storeOp: "store"
+      }));
+    }
+  }
+  /** Create depth stencil texture */
+  createDepthStencilTexture(props) {
+    if (props.depthStencilAttachment instanceof WebGPUTexture) {
+      return props.depthStencilAttachment;
+    }
+    if (typeof props.depthStencilAttachment === "string") {
+      return this.device._createTexture({
+        id: "depth-stencil-attachment",
+        format: props.depthStencilAttachment,
+        width: props.width,
+        height: props.height,
+        usage: import_api12.Texture.RENDER_ATTACHMENT
+      });
+    }
+    throw new Error("type");
+  }
+  createColorTexture(props, texture) {
+    if (texture instanceof WebGPUTexture) {
+      return texture;
+    }
+    if (typeof texture === "string") {
+      return this.device._createTexture({
+        id: "color-attachment",
+        format: texture,
+        width: props.width,
+        height: props.height,
+        usage: import_api12.Texture.RENDER_ATTACHMENT
+      });
+    }
+    throw new Error("type");
+  }
+  /**
+   * Create new textures with correct size for all attachments.
+   * @note destroys existing textures.
+   */
+  _resizeAttachments(width, height) {
+    for (let i = 0; i < this.colorAttachments.length; ++i) {
+      if (this.colorAttachments[i]) {
+        const resizedTexture = this.device._createTexture(__spreadProps(__spreadValues({}, this.colorAttachments[i].props), { width, height }));
+        this.colorAttachments[i].destroy();
+        this.colorAttachments[i] = resizedTexture;
+        this.renderPassDescriptor.colorAttachments[i].view = resizedTexture.handle.createView();
+      }
+    }
+    if (this.depthStencilAttachment) {
+      const resizedTexture = this.device._createTexture(__spreadProps(__spreadValues({}, this.depthStencilAttachment.props), { width, height }));
+      this.depthStencilAttachment.destroy();
+      this.depthStencilAttachment = resizedTexture;
+      this.renderPassDescriptor.depthStencilAttachment.view = resizedTexture.handle.createView();
+    }
+  }
+};
+
+// src/adapter/webgpu-canvas-context.ts
+var WebGPUCanvasContext = class extends import_api13.CanvasContext {
+  constructor(device, adapter, props) {
+    super(props);
+    this.depthStencilFormat = "depth24plus";
+    this.sampleCount = 1;
+    this.depthStencilAttachment = null;
+    this.device = device;
+    this.width = -1;
+    this.height = -1;
+    this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
+    this.gpuCanvasContext = this.canvas.getContext("webgpu");
+    this.format = this.gpuCanvasContext.getPreferredFormat(adapter);
+  }
+  destroy() {
+    this.gpuCanvasContext.unconfigure();
+  }
+  /** Update framebuffer with properly resized "swap chain" texture views */
+  getCurrentFramebuffer() {
+    this.update();
+    const currentColorAttachment = this.device.createTexture({
+      id: "default-render-target",
+      handle: this.gpuCanvasContext.getCurrentTexture(),
+      format: this.format,
+      width: this.width,
+      height: this.height
+    });
+    this._createDepthStencilAttachment();
+    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),
+        // size: [this.width, this.height],
+        colorSpace: this.props.colorSpace,
+        alphaMode: this.props.alphaMode
+      });
+      import_api13.log.log(1, `Resized to ${this.width}x${this.height}px`)();
+    }
+  }
+  resize(options) {
+    this.update();
+  }
+  /** We build render targets on demand (i.e. not when size changes but when about to render) */
+  _createDepthStencilAttachment() {
+    if (!this.depthStencilAttachment) {
+      this.depthStencilAttachment = this.device.createTexture({
+        id: "depth-stencil-target",
+        format: this.depthStencilFormat,
+        width: this.width,
+        height: this.height,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT
+      });
+    }
+    return this.depthStencilAttachment;
+  }
+};
+
+// src/adapter/webgpu-device.ts
+var _WebGPUDevice = class extends import_api14.Device {
+  constructor(device, adapter, props) {
+    super(__spreadProps(__spreadValues({}, props), { id: props.id || (0, import_api14.uid)("webgpu-device") }));
+    this.canvasContext = null;
+    this.commandEncoder = null;
+    this.renderPass = null;
+    this._isLost = false;
+    this.handle = device;
+    this.adapter = adapter;
+    this._info = {
+      type: "webgpu",
+      vendor: this.adapter.__brand,
+      renderer: "",
+      version: "",
+      gpu: "unknown",
+      // 'nvidia' | 'amd' | 'intel' | 'apple' | 'unknown',
+      shadingLanguages: ["glsl", "wgsl"],
+      shadingLanguageVersions: {
+        glsl: "450",
+        wgsl: "100"
+      },
+      vendorMasked: "",
+      rendererMasked: ""
+    };
+    this.lost = new Promise((resolve) => __async(this, null, function* () {
+      const lostInfo = yield this.handle.lost;
+      this._isLost = true;
+      resolve({ reason: "destroyed", message: lostInfo.message });
+    }));
+    if (props.canvas) {
+      this.canvasContext = new WebGPUCanvasContext(this, this.adapter, { canvas: props.canvas });
+    }
+    this.features = this._getFeatures();
+  }
+  /** Check if WebGPU is available */
+  static isSupported() {
+    return Boolean(typeof navigator !== "undefined" && navigator.gpu);
+  }
+  static create(props) {
+    return __async(this, null, function* () {
+      if (!navigator.gpu) {
+        throw new Error(
+          "WebGPU not available. Open in Chrome Canary and turn on chrome://flags/#enable-unsafe-webgpu"
+        );
+      }
+      import_api14.log.groupCollapsed(1, "WebGPUDevice created")();
+      const adapter = yield navigator.gpu.requestAdapter({
+        powerPreference: "high-performance"
+        // forceSoftware: false
+      });
+      if (!adapter) {
+        throw new Error("Failed to request WebGPU adapter");
+      }
+      import_api14.log.probe(1, "Adapter available")();
+      const gpuDevice = yield adapter.requestDevice({
+        requiredFeatures: adapter.features
+        // TODO ensure we obtain best limits
+        // requiredLimits: adapter.limits
+      });
+      import_api14.log.probe(1, "GPUDevice available")();
+      if (typeof props.canvas === "string") {
+        yield import_api14.CanvasContext.pageLoaded;
+        import_api14.log.probe(1, "DOM is loaded")();
+      }
+      const device = new _WebGPUDevice(gpuDevice, adapter, props);
+      import_api14.log.probe(1, "Device created", device.info)();
+      import_api14.log.table(1, device.info)();
+      import_api14.log.groupEnd(1)();
+      return device;
+    });
+  }
+  // TODO
+  // Load the glslang module now so that it is available synchronously when compiling shaders
+  // const {glsl = true} = props;
+  // this.glslang = glsl && await loadGlslangModule();
+  destroy() {
+    this.handle.destroy();
+  }
+  get info() {
+    return this._info;
+  }
+  get limits() {
+    return this.handle.limits;
+  }
+  isTextureFormatSupported(format) {
+    return !format.includes("webgl");
+  }
+  /** @todo implement proper check? */
+  isTextureFormatFilterable(format) {
+    return this.isTextureFormatSupported(format);
+  }
+  /** @todo implement proper check? */
+  isTextureFormatRenderable(format) {
+    return this.isTextureFormatSupported(format);
+  }
+  get isLost() {
+    return this._isLost;
+  }
+  _createBuffer(props) {
+    return new WebGPUBuffer(this, props);
+  }
+  _createTexture(props) {
+    return new WebGPUTexture(this, props);
+  }
+  createExternalTexture(props) {
+    return new WebGPUExternalTexture(this, props);
+  }
+  createShader(props) {
+    return new WebGPUShader(this, props);
+  }
+  createSampler(props) {
+    return new WebGPUSampler(this, props);
+  }
+  createRenderPipeline(props) {
+    return new WebGPURenderPipeline(this, props);
+  }
+  createFramebuffer(props) {
+    throw new Error("Not implemented");
+  }
+  createComputePipeline(props) {
+    return new WebGPUComputePipeline(this, props);
+  }
+  // WebGPU specifics
+  /**
+   * Allows a render pass to begin against a canvas context
+   * @todo need to support a "Framebuffer" equivalent (aka preconfigured RenderPassDescriptors?).
+   */
+  beginRenderPass(props) {
+    this.commandEncoder = this.commandEncoder || this.handle.createCommandEncoder();
+    return new WebGPURenderPass(this, props);
+  }
+  beginComputePass(props) {
+    this.commandEncoder = this.commandEncoder || this.handle.createCommandEncoder();
+    return new WebGPUComputePass(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.
+   */
+  getDefaultRenderPass() {
+    var _a;
+    this.renderPass = this.renderPass || this.beginRenderPass({
+      framebuffer: (_a = this.canvasContext) == null ? void 0 : _a.getCurrentFramebuffer()
+    });
+    return this.renderPass;
+  }
+  submit() {
+    var _a, _b;
+    (_a = this.renderPass) == null ? void 0 : _a.end();
+    const commandBuffer = (_b = this.commandEncoder) == null ? void 0 : _b.finish();
+    if (commandBuffer) {
+      this.handle.queue.submit([commandBuffer]);
+    }
+    this.commandEncoder = null;
+    this.renderPass = null;
+  }
+  _getFeatures() {
+    const features = new Set(this.handle.features);
+    if (features.has("depth-clamping")) {
+      features.delete("depth-clamping");
+      features.add("depth-clip-control");
+    }
+    if (features.has("texture-compression-bc")) {
+      features.add("texture-compression-bc5-webgl");
+    }
+    features.add("webgpu");
+    features.add("timer-query-webgl");
+    features.add("vertex-array-object-webgl1");
+    features.add("instanced-rendering-webgl1");
+    features.add("multiple-render-targets-webgl1");
+    features.add("index-uint32-webgl1");
+    features.add("blend-minmax-webgl1");
+    features.add("texture-blend-float-webgl1");
+    features.add("texture-formats-srgb-webgl1");
+    features.add("texture-formats-depth-webgl1");
+    features.add("texture-formats-float32-webgl1");
+    features.add("texture-formats-float16-webgl1");
+    features.add("texture-filter-linear-float32-webgl");
+    features.add("texture-filter-linear-float16-webgl");
+    features.add("texture-filter-anisotropic-webgl");
+    features.add("texture-renderable-rgba32float-webgl");
+    features.add("texture-renderable-float32-webgl");
+    features.add("texture-renderable-float16-webgl");
+    features.add("glsl-frag-data");
+    features.add("glsl-frag-depth");
+    features.add("glsl-derivatives");
+    features.add("glsl-texture-lod");
+    return features;
+  }
+};
+var WebGPUDevice = _WebGPUDevice;
+WebGPUDevice.type = "webgpu";