@luma.gl/webgpu 9.0.0-alpha.5 → 9.0.0-alpha.50

package/dist/index.cjs

@@ -0,0 +1,1518 @@
+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 });
+};
+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 __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// 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_core15 = require("@luma.gl/core");
+
+// src/adapter/resources/webgpu-buffer.ts
+var import_core = require("@luma.gl/core");
+function getByteLength(props) {
+  var _a;
+  return props.byteLength || ((_a = props.data) == null ? void 0 : _a.byteLength) || 0;
+}
+var WebGPUBuffer = class extends import_core.Buffer {
+  device;
+  handle;
+  byteLength;
+  constructor(device, props) {
+    super(device, props);
+    this.device = device;
+    this.byteLength = getByteLength(props);
+    const mapBuffer = Boolean(props.data);
+    const size = Math.ceil(this.byteLength / 4) * 4;
+    this.handle = this.props.handle || this.device.handle.createBuffer({
+      size,
+      // 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
+    );
+  }
+  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 commandEncoder = this.device.handle.createCommandEncoder();
+    commandEncoder.copyBufferToBuffer(this.handle, byteOffset, tempBuffer.handle, 0, byteLength);
+    this.device.handle.queue.submit([commandEncoder.finish()]);
+    await tempBuffer.handle.mapAsync(GPUMapMode.READ, byteOffset, byteLength);
+    const arrayBuffer = tempBuffer.handle.getMappedRange().slice(0);
+    tempBuffer.handle.unmap();
+    tempBuffer.destroy();
+    return new Uint8Array(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_core3 = require("@luma.gl/core");
+
+// 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_core2 = require("@luma.gl/core");
+var WebGPUSampler = class extends import_core2.Sampler {
+  device;
+  handle;
+  constructor(device, props) {
+    super(device, props);
+    this.device = device;
+    const samplerProps = { ...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_core3.Texture {
+  device;
+  handle;
+  view;
+  sampler;
+  height = 1;
+  width = 1;
+  // 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.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.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 { width, height };
+  }
+  /*
+    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_core4 = require("@luma.gl/core");
+var WebGPUExternalTexture = class extends import_core4.ExternalTexture {
+  device;
+  handle;
+  sampler;
+  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_core5 = require("@luma.gl/core");
+var WebGPUShader = class extends import_core5.Shader {
+  device;
+  handle;
+  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());
+  }
+  async _checkCompilationError(errorScope) {
+    const error = await errorScope;
+    if (error) {
+      const shaderLog = await this.compilationInfo();
+      import_core5.log.error(`Shader compilation error: ${error.message}`, shaderLog)();
+      throw new Error(`Shader compilation error: ${error.message}`);
+    }
+  }
+  destroy() {
+  }
+  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);
+    }
+  }
+  /** Returns compilation info for this shader */
+  async compilationInfo() {
+    const compilationInfo = await this.handle.getCompilationInfo();
+    return compilationInfo.messages;
+  }
+};
+
+// src/adapter/resources/webgpu-render-pipeline.ts
+var import_core8 = require("@luma.gl/core");
+
+// 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: false,
+    depthCompare: "less-equal"
+  };
+  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, { ...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_core6 = require("@luma.gl/core");
+function getBindGroup(device, bindGroupLayout, shaderLayout, bindings) {
+  const entries = getBindGroupEntries(bindings, shaderLayout);
+  return device.createBindGroup({
+    layout: bindGroupLayout,
+    entries
+  });
+}
+function getShaderLayoutBinding(shaderLayout, bindingName) {
+  const bindingLayout = shaderLayout.bindings.find((binding) => binding.name === bindingName);
+  if (!bindingLayout) {
+    import_core6.log.warn(`Binding ${bindingName} not set: Not found in shader layout.`)();
+  }
+  return bindingLayout;
+}
+function getBindGroupEntries(bindings, shaderLayout) {
+  const entries = [];
+  for (const [bindingName, value] of Object.entries(bindings)) {
+    const bindingLayout = getShaderLayoutBinding(shaderLayout, bindingName);
+    if (bindingLayout) {
+      entries.push(getBindGroupEntry(value, bindingLayout.location));
+    }
+  }
+  return entries;
+}
+function getBindGroupEntry(binding, index) {
+  if (binding instanceof import_core6.Buffer) {
+    return {
+      binding: index,
+      resource: {
+        buffer: (0, import_core6.cast)(binding).handle
+      }
+    };
+  }
+  if (binding instanceof import_core6.Sampler) {
+    return {
+      binding: index,
+      resource: (0, import_core6.cast)(binding).handle
+    };
+  } else if (binding instanceof import_core6.Texture) {
+    return {
+      binding: index,
+      resource: (0, import_core6.cast)(binding).handle.createView()
+    };
+  }
+  throw new Error("invalid binding");
+}
+
+// src/adapter/helpers/get-vertex-buffer-layout.ts
+var import_core7 = require("@luma.gl/core");
+function getWebGPUVertexFormat(format) {
+  if (format.endsWith("-webgl")) {
+    throw new Error(`WebGPU does not support vertex format ${format}`);
+  }
+  return format;
+}
+function getVertexBufferLayout(shaderLayout, bufferLayout) {
+  const vertexBufferLayouts = [];
+  const usedAttributes = /* @__PURE__ */ new Set();
+  for (const mapping of bufferLayout) {
+    const vertexAttributes = [];
+    let stepMode = "vertex";
+    let byteStride = 0;
+    if (mapping.attributes) {
+      for (const attributeMapping of mapping.attributes) {
+        const attributeName = attributeMapping.attribute;
+        const attributeLayout = findAttributeLayout(shaderLayout, attributeName, usedAttributes);
+        stepMode = attributeLayout.stepMode || "vertex";
+        vertexAttributes.push({
+          format: getWebGPUVertexFormat(attributeMapping.format || mapping.format),
+          offset: attributeMapping.byteOffset,
+          shaderLocation: attributeLayout.location
+        });
+        byteStride += (0, import_core7.decodeVertexFormat)(mapping.format).byteLength;
+      }
+    } else {
+      const attributeLayout = findAttributeLayout(shaderLayout, mapping.name, usedAttributes);
+      byteStride = (0, import_core7.decodeVertexFormat)(mapping.format).byteLength;
+      stepMode = attributeLayout.stepMode || "vertex";
+      vertexAttributes.push({
+        format: getWebGPUVertexFormat(mapping.format),
+        // We only support 0 offset for non-interleaved buffer layouts
+        offset: 0,
+        shaderLocation: attributeLayout.location
+      });
+    }
+    vertexBufferLayouts.push({
+      arrayStride: mapping.byteStride || byteStride,
+      stepMode: stepMode || "vertex",
+      attributes: vertexAttributes
+    });
+  }
+  for (const attribute of shaderLayout.attributes) {
+    if (!usedAttributes.has(attribute.name)) {
+      vertexBufferLayouts.push({
+        arrayStride: (0, import_core7.decodeVertexFormat)("float32x3").byteLength,
+        stepMode: attribute.stepMode || "vertex",
+        attributes: [
+          {
+            format: getWebGPUVertexFormat("float32x3"),
+            offset: 0,
+            shaderLocation: attribute.location
+          }
+        ]
+      });
+    }
+  }
+  return vertexBufferLayouts;
+}
+function getBufferSlots(shaderLayout, bufferLayout) {
+  const usedAttributes = /* @__PURE__ */ new Set();
+  let bufferSlot = 0;
+  const bufferSlots = {};
+  for (const mapping of bufferLayout) {
+    if ("attributes" in mapping) {
+      for (const interleaved of mapping.attributes) {
+        usedAttributes.add(interleaved.attribute);
+      }
+    } else {
+      usedAttributes.add(mapping.name);
+    }
+    bufferSlots[mapping.name] = bufferSlot++;
+  }
+  for (const attribute of shaderLayout.attributes) {
+    if (!usedAttributes.has(attribute.name)) {
+      bufferSlots[attribute.name] = bufferSlot++;
+    }
+  }
+  return bufferSlots;
+}
+function findAttributeLayout(shaderLayout, name, attributeNames) {
+  const attribute = shaderLayout.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_core8.RenderPipeline {
+  device;
+  handle;
+  vs;
+  fs = null;
+  _bufferSlots;
+  _buffers;
+  _indexBuffer = null;
+  // private _firstIndex: number;
+  // private _lastIndex: number;
+  /** For internal use to create BindGroups */
+  _bindGroupLayout = null;
+  _bindGroup = null;
+  constructor(device, props) {
+    super(device, props);
+    this.device = device;
+    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)();
+      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._bufferSlots = getBufferSlots(this.props.shaderLayout, this.props.bufferLayout);
+    this._buffers = new Array(Object.keys(this._bufferSlots).length).fill(null);
+  }
+  destroy() {
+  }
+  setIndexBuffer(indexBuffer) {
+    this._indexBuffer = (0, import_core8.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}`
+        );
+      }
+    }
+  }
+  setConstantAttributes(attributes) {
+    throw new Error("not implemented");
+  }
+  setBindings(bindings) {
+    if (!(0, import_core8.isObjectEmpty)(this.props.bindings)) {
+      Object.assign(this.props.bindings, bindings);
+      this._bindGroupLayout = this._bindGroupLayout || this.handle.getBindGroupLayout(0);
+      this._bindGroup = getBindGroup(
+        this.device.handle,
+        this._bindGroupLayout,
+        this.props.shaderLayout,
+        this.props.bindings
+      );
+    }
+  }
+  setUniforms(uniforms) {
+    if (!(0, import_core8.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_core8.cast)(this.props.vs).handle,
+      entryPoint: this.props.vsEntryPoint || "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)
+          }
+        ]
+      };
+    }
+    switch (this.props.topology) {
+      case "triangle-fan-webgl":
+      case "line-loop-webgl":
+        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_core8.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 || 1,
+        // If 0, nothing will be drawn
+        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_core8.cast)(buffers[i]);
+      if (!buffer) {
+        const attribute = this.props.shaderLayout.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_core9 = require("@luma.gl/core");
+var WebGPUComputePipeline = class extends import_core9.ComputePipeline {
+  device;
+  handle;
+  constructor(device, props) {
+    super(device, props);
+    this.device = device;
+    const module2 = (0, import_core9.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_core10 = require("@luma.gl/core");
+var WebGPURenderPass = class extends import_core10.RenderPass {
+  device;
+  handle;
+  /** Active pipeline */
+  pipeline = null;
+  constructor(device, props = {}) {
+    super(device, props);
+    this.device = device;
+    const framebuffer = props.framebuffer || device.canvasContext.getCurrentFramebuffer();
+    const renderPassDescriptor = this.getRenderPassDescriptor(framebuffer);
+    import_core10.log.groupCollapsed(1, `new WebGPURenderPass(${this.id})`)();
+    import_core10.log.probe(1, JSON.stringify(renderPassDescriptor, null, 2))();
+    import_core10.log.groupEnd(1)();
+    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_core10.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_core10.cast)(buffer).handle, indexFormat, offset, size);
+  }
+  setVertexBuffer(slot, buffer, offset = 0) {
+    this.handle.setVertexBuffer(slot, (0, import_core10.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 || 1,
+        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;
+  // INTERNAL
+  /** 
+   * Partial render pass descriptor. Used by WebGPURenderPass.
+   * @returns attachments fields of a renderpass descriptor. 
+   */
+  getRenderPassDescriptor(framebuffer) {
+    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.createView()
+    }));
+    if (framebuffer.depthStencilAttachment) {
+      renderPassDescriptor.depthStencilAttachment = {
+        view: framebuffer.depthStencilAttachment.handle.createView()
+      };
+      const { depthStencilAttachment } = renderPassDescriptor;
+      if (this.props.depthReadOnly) {
+        depthStencilAttachment.depthReadOnly = true;
+      }
+      depthStencilAttachment.depthClearValue = this.props.clearDepth || 0;
+      const hasDepthAspect = true;
+      if (hasDepthAspect) {
+        depthStencilAttachment.depthLoadOp = this.props.clearDepth !== false ? "clear" : "load";
+        depthStencilAttachment.depthStoreOp = "store";
+      }
+      const hasStencilAspect = false;
+      if (hasStencilAspect) {
+        depthStencilAttachment.stencilLoadOp = this.props.clearStencil !== false ? "clear" : "load";
+        depthStencilAttachment.stencilStoreOp = "store";
+      }
+    }
+    return renderPassDescriptor;
+  }
+};
+
+// src/adapter/resources/webgpu-compute-pass.ts
+var import_core11 = require("@luma.gl/core");
+var WebGPUComputePass = class extends import_core11.ComputePass {
+  device;
+  handle;
+  _bindGroupLayout = null;
+  constructor(device, props) {
+    var _a;
+    super(device, props);
+    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_core11.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_core11.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/resources/webgpu-vertex-array.ts
+var import_core12 = require("@luma.gl/core");
+var import_env = require("@probe.gl/env");
+var WebGPUVertexArray = class extends import_core12.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 */
+  static isConstantAttributeZeroSupported(device) {
+    return device.info.type === "webgl2" || (0, import_env.getBrowser)() === "Chrome";
+  }
+  // Create a VertexArray
+  constructor(device, props) {
+    super(device, props);
+    this.device = device;
+  }
+  destroy() {
+  }
+  /**
+   * Set an elements buffer, for indexed rendering.
+   * Must be a Buffer bound to buffer with usage bit Buffer.INDEX set. 
+   */
+  setIndexBuffer(buffer) {
+    this.indexBuffer = buffer;
+  }
+  /** Set a location in vertex attributes array to a buffer, enables the location, sets divisor */
+  setBuffer(location, buffer) {
+    this.attributes[location] = 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;
+    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];
+      webgpuRenderPass.handle.setVertexBuffer(location, webgpuBuffer.handle);
+    }
+  }
+  unbindAfterRender(renderPass) {
+  }
+};
+
+// src/adapter/webgpu-canvas-context.ts
+var import_core14 = require("@luma.gl/core");
+
+// src/adapter/resources/webgpu-framebuffer.ts
+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();
+  }
+};
+
+// src/adapter/webgpu-canvas-context.ts
+var WebGPUCanvasContext = class extends import_core14.CanvasContext {
+  device;
+  gpuCanvasContext;
+  /** Format of returned textures: "bgra8unorm", "rgba8unorm", "rgba16float". */
+  format = navigator.gpu.getPreferredCanvasFormat();
+  /** Default stencil format for depth textures */
+  depthStencilFormat = "depth24plus";
+  depthStencilAttachment = null;
+  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";
+  }
+  /** Destroy any textures produced while configured and remove the context configuration. */
+  destroy() {
+    this.gpuCanvasContext.unconfigure();
+  }
+  getCurrentTexture() {
+    return this.device._createTexture({
+      id: "default-render-target",
+      handle: this.gpuCanvasContext.getCurrentTexture()
+    });
+  }
+  /** Update framebuffer with properly resized "swap chain" texture views */
+  getCurrentFramebuffer() {
+    this.update();
+    const currentColorAttachment = this.getCurrentTexture();
+    this.width = currentColorAttachment.width;
+    this.height = currentColorAttachment.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),
+        // Can be used to define e.g. -srgb views
+        // viewFormats: [...]
+        colorSpace: this.props.colorSpace,
+        alphaMode: this.props.alphaMode
+      });
+      import_core14.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_core15.Device {
+  handle;
+  adapter;
+  lost;
+  canvasContext = null;
+  commandEncoder = null;
+  renderPass = null;
+  _info;
+  _isLost = false;
+  /** 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_core15.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_core15.log.probe(1, "Adapter available", adapterInfo)();
+    const gpuDevice = await adapter.requestDevice({
+      requiredFeatures: adapter.features
+      // TODO ensure we obtain best limits
+      // requiredLimits: adapter.limits
+    });
+    import_core15.log.probe(1, "GPUDevice available")();
+    if (typeof props.canvas === "string") {
+      await import_core15.CanvasContext.pageLoaded;
+      import_core15.log.probe(1, "DOM is loaded")();
+    }
+    const device = new _WebGPUDevice(gpuDevice, adapter, props);
+    import_core15.log.probe(1, "Device created", device.info)();
+    import_core15.log.table(1, device.info)();
+    import_core15.log.groupEnd(1)();
+    return device;
+  }
+  constructor(device, adapter, props) {
+    super({ ...props, id: props.id || (0, import_core15.uid)("webgpu-device") });
+    this.handle = device;
+    this.adapter = adapter;
+    this._info = {
+      type: "webgpu",
+      vendor: this.adapter.__brand,
+      renderer: "",
+      version: "",
+      gpu: "unknown",
+      // 'nvidia' | 'amd' | 'intel' | 'apple' | 'unknown',
+      shadingLanguage: "wgsl",
+      shadingLanguageVersion: 100,
+      vendorMasked: "",
+      rendererMasked: ""
+    };
+    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
+    });
+    this.features = this._getFeatures();
+  }
+  // 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;
+  }
+  features;
+  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) {
+    const newProps = this._getBufferProps(props);
+    return new WebGPUBuffer(this, newProps);
+  }
+  _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);
+  }
+  createVertexArray(props) {
+    return new WebGPUVertexArray(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);
+  }
+  // createCommandEncoder(props: CommandEncoderProps): WebGPUCommandEncoder {
+  //   return new WebGPUCommandEncoder(this, props);
+  // }
+  createTransformFeedback(props) {
+    throw new Error("Transform feedback not supported in WebGPU");
+  }
+  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();
+    if (commandBuffer) {
+      this.handle.queue.submit([commandBuffer]);
+    }
+    this.commandEncoder = 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;
+  }
+  copyExternalImageToTexture(options) {
+    var _a;
+    const {
+      source,
+      sourceX = 0,
+      sourceY = 0,
+      texture,
+      mipLevel = 0,
+      aspect = "all",
+      colorSpace = "display-p3",
+      premultipliedAlpha = false,
+      // destinationX,
+      // destinationY,
+      // desitnationZ,
+      width = texture.width,
+      height = texture.height,
+      depth = 1
+    } = options;
+    const webGpuTexture = texture;
+    (_a = this.handle) == null ? void 0 : _a.queue.copyExternalImageToTexture(
+      // source: GPUImageCopyExternalImage
+      {
+        source,
+        origin: [sourceX, sourceY]
+      },
+      // destination: GPUImageCopyTextureTagged
+      {
+        texture: webGpuTexture.handle,
+        origin: [0, 0, 0],
+        // [x, y, z],
+        mipLevel,
+        aspect,
+        colorSpace,
+        premultipliedAlpha
+      },
+      // copySize: GPUExtent3D
+      [width, height, depth]
+    );
+  }
+};
+var WebGPUDevice = _WebGPUDevice;
+__publicField(WebGPUDevice, "type", "webgpu");