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

package/dist/dist.dev.js

@@ -0,0 +1,3060 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+  if (typeof exports === 'object' && typeof module === 'object')
+    module.exports = factory();
+  else if (typeof define === 'function' && define.amd) define([], factory);
+        else if (typeof exports === 'object') exports['luma'] = factory();
+  else root['luma'] = factory();})(globalThis, function () {
+var __exports__ = (() => {
+  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
+  });
+
+  // ../../node_modules/@probe.gl/env/dist/lib/is-electron.js
+  function isElectron(mockUserAgent) {
+    if (typeof window !== "undefined" && typeof window.process === "object" && window.process.type === "renderer") {
+      return true;
+    }
+    if (typeof process !== "undefined" && typeof process.versions === "object" && Boolean(process.versions["electron"])) {
+      return true;
+    }
+    const realUserAgent = typeof navigator === "object" && typeof navigator.userAgent === "string" && navigator.userAgent;
+    const userAgent = mockUserAgent || realUserAgent;
+    if (userAgent && userAgent.indexOf("Electron") >= 0) {
+      return true;
+    }
+    return false;
+  }
+
+  // ../../node_modules/@probe.gl/env/dist/lib/is-browser.js
+  function isBrowser() {
+    const isNode = typeof process === "object" && String(process) === "[object process]" && !process.browser;
+    return !isNode || isElectron();
+  }
+
+  // ../../node_modules/@probe.gl/env/dist/lib/globals.js
+  var self_ = globalThis.self || globalThis.window || globalThis.global;
+  var window_ = globalThis.window || globalThis.self || globalThis.global;
+  var document_ = globalThis.document || {};
+  var process_ = globalThis.process || {};
+  var console_ = globalThis.console;
+  var navigator_ = globalThis.navigator || {};
+
+  // ../../node_modules/@probe.gl/env/dist/utils/globals.js
+  var VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : "untranspiled source";
+  var isBrowser2 = isBrowser();
+
+  // ../../node_modules/@babel/runtime/helpers/esm/typeof.js
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj2) {
+      return typeof obj2;
+    } : function(obj2) {
+      return obj2 && "function" == typeof Symbol && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
+    }, _typeof(obj);
+  }
+
+  // ../../node_modules/@babel/runtime/helpers/esm/toPrimitive.js
+  function _toPrimitive(input, hint) {
+    if (_typeof(input) !== "object" || input === null)
+      return input;
+    var prim = input[Symbol.toPrimitive];
+    if (prim !== void 0) {
+      var res = prim.call(input, hint || "default");
+      if (_typeof(res) !== "object")
+        return res;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (hint === "string" ? String : Number)(input);
+  }
+
+  // ../../node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
+  function _toPropertyKey(arg) {
+    var key = _toPrimitive(arg, "string");
+    return _typeof(key) === "symbol" ? key : String(key);
+  }
+
+  // ../../node_modules/@babel/runtime/helpers/esm/defineProperty.js
+  function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
+
+  // ../../node_modules/@probe.gl/log/dist/utils/local-storage.js
+  function getStorage(type2) {
+    try {
+      const storage = window[type2];
+      const x = "__storage_test__";
+      storage.setItem(x, x);
+      storage.removeItem(x);
+      return storage;
+    } catch (e) {
+      return null;
+    }
+  }
+  var LocalStorage = class {
+    constructor(id, defaultConfig) {
+      let type2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "sessionStorage";
+      _defineProperty(this, "storage", void 0);
+      _defineProperty(this, "id", void 0);
+      _defineProperty(this, "config", void 0);
+      this.storage = getStorage(type2);
+      this.id = id;
+      this.config = defaultConfig;
+      this._loadConfiguration();
+    }
+    getConfiguration() {
+      return this.config;
+    }
+    setConfiguration(configuration) {
+      Object.assign(this.config, configuration);
+      if (this.storage) {
+        const serialized = JSON.stringify(this.config);
+        this.storage.setItem(this.id, serialized);
+      }
+    }
+    _loadConfiguration() {
+      let configuration = {};
+      if (this.storage) {
+        const serializedConfiguration = this.storage.getItem(this.id);
+        configuration = serializedConfiguration ? JSON.parse(serializedConfiguration) : {};
+      }
+      Object.assign(this.config, configuration);
+      return this;
+    }
+  };
+
+  // ../../node_modules/@probe.gl/log/dist/utils/formatters.js
+  function formatTime(ms) {
+    let formatted;
+    if (ms < 10) {
+      formatted = "".concat(ms.toFixed(2), "ms");
+    } else if (ms < 100) {
+      formatted = "".concat(ms.toFixed(1), "ms");
+    } else if (ms < 1e3) {
+      formatted = "".concat(ms.toFixed(0), "ms");
+    } else {
+      formatted = "".concat((ms / 1e3).toFixed(2), "s");
+    }
+    return formatted;
+  }
+  function leftPad(string) {
+    let length = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 8;
+    const padLength = Math.max(length - string.length, 0);
+    return "".concat(" ".repeat(padLength)).concat(string);
+  }
+  function formatImage(image, message, scale) {
+    let maxWidth = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 600;
+    const imageUrl = image.src.replace(/\(/g, "%28").replace(/\)/g, "%29");
+    if (image.width > maxWidth) {
+      scale = Math.min(scale, maxWidth / image.width);
+    }
+    const width = image.width * scale;
+    const height = image.height * scale;
+    const style = ["font-size:1px;", "padding:".concat(Math.floor(height / 2), "px ").concat(Math.floor(width / 2), "px;"), "line-height:".concat(height, "px;"), "background:url(".concat(imageUrl, ");"), "background-size:".concat(width, "px ").concat(height, "px;"), "color:transparent;"].join("");
+    return ["".concat(message, " %c+"), style];
+  }
+
+  // ../../node_modules/@probe.gl/log/dist/utils/color.js
+  var COLOR;
+  (function(COLOR2) {
+    COLOR2[COLOR2["BLACK"] = 30] = "BLACK";
+    COLOR2[COLOR2["RED"] = 31] = "RED";
+    COLOR2[COLOR2["GREEN"] = 32] = "GREEN";
+    COLOR2[COLOR2["YELLOW"] = 33] = "YELLOW";
+    COLOR2[COLOR2["BLUE"] = 34] = "BLUE";
+    COLOR2[COLOR2["MAGENTA"] = 35] = "MAGENTA";
+    COLOR2[COLOR2["CYAN"] = 36] = "CYAN";
+    COLOR2[COLOR2["WHITE"] = 37] = "WHITE";
+    COLOR2[COLOR2["BRIGHT_BLACK"] = 90] = "BRIGHT_BLACK";
+    COLOR2[COLOR2["BRIGHT_RED"] = 91] = "BRIGHT_RED";
+    COLOR2[COLOR2["BRIGHT_GREEN"] = 92] = "BRIGHT_GREEN";
+    COLOR2[COLOR2["BRIGHT_YELLOW"] = 93] = "BRIGHT_YELLOW";
+    COLOR2[COLOR2["BRIGHT_BLUE"] = 94] = "BRIGHT_BLUE";
+    COLOR2[COLOR2["BRIGHT_MAGENTA"] = 95] = "BRIGHT_MAGENTA";
+    COLOR2[COLOR2["BRIGHT_CYAN"] = 96] = "BRIGHT_CYAN";
+    COLOR2[COLOR2["BRIGHT_WHITE"] = 97] = "BRIGHT_WHITE";
+  })(COLOR || (COLOR = {}));
+  var BACKGROUND_INCREMENT = 10;
+  function getColor(color) {
+    if (typeof color !== "string") {
+      return color;
+    }
+    color = color.toUpperCase();
+    return COLOR[color] || COLOR.WHITE;
+  }
+  function addColor(string, color, background) {
+    if (!isBrowser && typeof string === "string") {
+      if (color) {
+        const colorCode = getColor(color);
+        string = "\x1B[".concat(colorCode, "m").concat(string, "\x1B[39m");
+      }
+      if (background) {
+        const colorCode = getColor(background);
+        string = "\x1B[".concat(colorCode + BACKGROUND_INCREMENT, "m").concat(string, "\x1B[49m");
+      }
+    }
+    return string;
+  }
+
+  // ../../node_modules/@probe.gl/log/dist/utils/autobind.js
+  function autobind(obj) {
+    let predefined = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : ["constructor"];
+    const proto = Object.getPrototypeOf(obj);
+    const propNames = Object.getOwnPropertyNames(proto);
+    const object = obj;
+    for (const key of propNames) {
+      const value = object[key];
+      if (typeof value === "function") {
+        if (!predefined.find((name) => key === name)) {
+          object[key] = value.bind(obj);
+        }
+      }
+    }
+  }
+
+  // ../../node_modules/@probe.gl/log/dist/utils/assert.js
+  function assert(condition, message) {
+    if (!condition) {
+      throw new Error(message || "Assertion failed");
+    }
+  }
+
+  // ../../node_modules/@probe.gl/log/dist/utils/hi-res-timestamp.js
+  function getHiResTimestamp() {
+    let timestamp;
+    if (isBrowser() && window_.performance) {
+      var _window$performance, _window$performance$n;
+      timestamp = window_ === null || window_ === void 0 ? void 0 : (_window$performance = window_.performance) === null || _window$performance === void 0 ? void 0 : (_window$performance$n = _window$performance.now) === null || _window$performance$n === void 0 ? void 0 : _window$performance$n.call(_window$performance);
+    } else if ("hrtime" in process_) {
+      var _process$hrtime;
+      const timeParts = process_ === null || process_ === void 0 ? void 0 : (_process$hrtime = process_.hrtime) === null || _process$hrtime === void 0 ? void 0 : _process$hrtime.call(process_);
+      timestamp = timeParts[0] * 1e3 + timeParts[1] / 1e6;
+    } else {
+      timestamp = Date.now();
+    }
+    return timestamp;
+  }
+
+  // ../../node_modules/@probe.gl/log/dist/log.js
+  var originalConsole = {
+    debug: isBrowser() ? console.debug || console.log : console.log,
+    log: console.log,
+    info: console.info,
+    warn: console.warn,
+    error: console.error
+  };
+  var DEFAULT_LOG_CONFIGURATION = {
+    enabled: true,
+    level: 0
+  };
+  function noop() {
+  }
+  var cache = {};
+  var ONCE = {
+    once: true
+  };
+  var Log = class {
+    constructor() {
+      let {
+        id
+      } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {
+        id: ""
+      };
+      _defineProperty(this, "id", void 0);
+      _defineProperty(this, "VERSION", VERSION);
+      _defineProperty(this, "_startTs", getHiResTimestamp());
+      _defineProperty(this, "_deltaTs", getHiResTimestamp());
+      _defineProperty(this, "_storage", void 0);
+      _defineProperty(this, "userData", {});
+      _defineProperty(this, "LOG_THROTTLE_TIMEOUT", 0);
+      this.id = id;
+      this.userData = {};
+      this._storage = new LocalStorage("__probe-".concat(this.id, "__"), DEFAULT_LOG_CONFIGURATION);
+      this.timeStamp("".concat(this.id, " started"));
+      autobind(this);
+      Object.seal(this);
+    }
+    set level(newLevel) {
+      this.setLevel(newLevel);
+    }
+    get level() {
+      return this.getLevel();
+    }
+    isEnabled() {
+      return this._storage.config.enabled;
+    }
+    getLevel() {
+      return this._storage.config.level;
+    }
+    getTotal() {
+      return Number((getHiResTimestamp() - this._startTs).toPrecision(10));
+    }
+    getDelta() {
+      return Number((getHiResTimestamp() - this._deltaTs).toPrecision(10));
+    }
+    set priority(newPriority) {
+      this.level = newPriority;
+    }
+    get priority() {
+      return this.level;
+    }
+    getPriority() {
+      return this.level;
+    }
+    enable() {
+      let enabled = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
+      this._storage.setConfiguration({
+        enabled
+      });
+      return this;
+    }
+    setLevel(level) {
+      this._storage.setConfiguration({
+        level
+      });
+      return this;
+    }
+    get(setting) {
+      return this._storage.config[setting];
+    }
+    set(setting, value) {
+      this._storage.setConfiguration({
+        [setting]: value
+      });
+    }
+    settings() {
+      if (console.table) {
+        console.table(this._storage.config);
+      } else {
+        console.log(this._storage.config);
+      }
+    }
+    assert(condition, message) {
+      assert(condition, message);
+    }
+    warn(message) {
+      return this._getLogFunction(0, message, originalConsole.warn, arguments, ONCE);
+    }
+    error(message) {
+      return this._getLogFunction(0, message, originalConsole.error, arguments);
+    }
+    deprecated(oldUsage, newUsage) {
+      return this.warn("`".concat(oldUsage, "` is deprecated and will be removed in a later version. Use `").concat(newUsage, "` instead"));
+    }
+    removed(oldUsage, newUsage) {
+      return this.error("`".concat(oldUsage, "` has been removed. Use `").concat(newUsage, "` instead"));
+    }
+    probe(logLevel, message) {
+      return this._getLogFunction(logLevel, message, originalConsole.log, arguments, {
+        time: true,
+        once: true
+      });
+    }
+    log(logLevel, message) {
+      return this._getLogFunction(logLevel, message, originalConsole.debug, arguments);
+    }
+    info(logLevel, message) {
+      return this._getLogFunction(logLevel, message, console.info, arguments);
+    }
+    once(logLevel, message) {
+      return this._getLogFunction(logLevel, message, originalConsole.debug || originalConsole.info, arguments, ONCE);
+    }
+    table(logLevel, table, columns) {
+      if (table) {
+        return this._getLogFunction(logLevel, table, console.table || noop, columns && [columns], {
+          tag: getTableHeader(table)
+        });
+      }
+      return noop;
+    }
+    image(_ref) {
+      let {
+        logLevel,
+        priority,
+        image,
+        message = "",
+        scale = 1
+      } = _ref;
+      if (!this._shouldLog(logLevel || priority)) {
+        return noop;
+      }
+      return isBrowser() ? logImageInBrowser({
+        image,
+        message,
+        scale
+      }) : logImageInNode({
+        image,
+        message,
+        scale
+      });
+    }
+    time(logLevel, message) {
+      return this._getLogFunction(logLevel, message, console.time ? console.time : console.info);
+    }
+    timeEnd(logLevel, message) {
+      return this._getLogFunction(logLevel, message, console.timeEnd ? console.timeEnd : console.info);
+    }
+    timeStamp(logLevel, message) {
+      return this._getLogFunction(logLevel, message, console.timeStamp || noop);
+    }
+    group(logLevel, message) {
+      let opts = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {
+        collapsed: false
+      };
+      const options = normalizeArguments({
+        logLevel,
+        message,
+        opts
+      });
+      const {
+        collapsed
+      } = opts;
+      options.method = (collapsed ? console.groupCollapsed : console.group) || console.info;
+      return this._getLogFunction(options);
+    }
+    groupCollapsed(logLevel, message) {
+      let opts = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+      return this.group(logLevel, message, Object.assign({}, opts, {
+        collapsed: true
+      }));
+    }
+    groupEnd(logLevel) {
+      return this._getLogFunction(logLevel, "", console.groupEnd || noop);
+    }
+    withGroup(logLevel, message, func) {
+      this.group(logLevel, message)();
+      try {
+        func();
+      } finally {
+        this.groupEnd(logLevel)();
+      }
+    }
+    trace() {
+      if (console.trace) {
+        console.trace();
+      }
+    }
+    _shouldLog(logLevel) {
+      return this.isEnabled() && this.getLevel() >= normalizeLogLevel(logLevel);
+    }
+    _getLogFunction(logLevel, message, method, args, opts) {
+      if (this._shouldLog(logLevel)) {
+        opts = normalizeArguments({
+          logLevel,
+          message,
+          args,
+          opts
+        });
+        method = method || opts.method;
+        assert(method);
+        opts.total = this.getTotal();
+        opts.delta = this.getDelta();
+        this._deltaTs = getHiResTimestamp();
+        const tag = opts.tag || opts.message;
+        if (opts.once && tag) {
+          if (!cache[tag]) {
+            cache[tag] = getHiResTimestamp();
+          } else {
+            return noop;
+          }
+        }
+        message = decorateMessage(this.id, opts.message, opts);
+        return method.bind(console, message, ...opts.args);
+      }
+      return noop;
+    }
+  };
+  _defineProperty(Log, "VERSION", VERSION);
+  function normalizeLogLevel(logLevel) {
+    if (!logLevel) {
+      return 0;
+    }
+    let resolvedLevel;
+    switch (typeof logLevel) {
+      case "number":
+        resolvedLevel = logLevel;
+        break;
+      case "object":
+        resolvedLevel = logLevel.logLevel || logLevel.priority || 0;
+        break;
+      default:
+        return 0;
+    }
+    assert(Number.isFinite(resolvedLevel) && resolvedLevel >= 0);
+    return resolvedLevel;
+  }
+  function normalizeArguments(opts) {
+    const {
+      logLevel,
+      message
+    } = opts;
+    opts.logLevel = normalizeLogLevel(logLevel);
+    const args = opts.args ? Array.from(opts.args) : [];
+    while (args.length && args.shift() !== message) {
+    }
+    switch (typeof logLevel) {
+      case "string":
+      case "function":
+        if (message !== void 0) {
+          args.unshift(message);
+        }
+        opts.message = logLevel;
+        break;
+      case "object":
+        Object.assign(opts, logLevel);
+        break;
+      default:
+    }
+    if (typeof opts.message === "function") {
+      opts.message = opts.message();
+    }
+    const messageType = typeof opts.message;
+    assert(messageType === "string" || messageType === "object");
+    return Object.assign(opts, {
+      args
+    }, opts.opts);
+  }
+  function decorateMessage(id, message, opts) {
+    if (typeof message === "string") {
+      const time = opts.time ? leftPad(formatTime(opts.total)) : "";
+      message = opts.time ? "".concat(id, ": ").concat(time, "  ").concat(message) : "".concat(id, ": ").concat(message);
+      message = addColor(message, opts.color, opts.background);
+    }
+    return message;
+  }
+  function logImageInNode(_ref2) {
+    let {
+      image,
+      message = "",
+      scale = 1
+    } = _ref2;
+    console.warn("removed");
+    return noop;
+  }
+  function logImageInBrowser(_ref3) {
+    let {
+      image,
+      message = "",
+      scale = 1
+    } = _ref3;
+    if (typeof image === "string") {
+      const img = new Image();
+      img.onload = () => {
+        const args = formatImage(img, message, scale);
+        console.log(...args);
+      };
+      img.src = image;
+      return noop;
+    }
+    const element = image.nodeName || "";
+    if (element.toLowerCase() === "img") {
+      console.log(...formatImage(image, message, scale));
+      return noop;
+    }
+    if (element.toLowerCase() === "canvas") {
+      const img = new Image();
+      img.onload = () => console.log(...formatImage(img, message, scale));
+      img.src = image.toDataURL();
+      return noop;
+    }
+    return noop;
+  }
+  function getTableHeader(table) {
+    for (const key in table) {
+      for (const title in table[key]) {
+        return title || "untitled";
+      }
+    }
+    return "empty";
+  }
+
+  // ../../node_modules/@probe.gl/log/dist/index.js
+  var dist_default = new Log({
+    id: "@probe.gl/log"
+  });
+
+  // ../api/src/lib/utils/log.ts
+  var log = new Log({
+    id: "luma.gl"
+  });
+
+  // ../../node_modules/@probe.gl/stats/dist/utils/hi-res-timestamp.js
+  function getHiResTimestamp2() {
+    let timestamp;
+    if (typeof window !== "undefined" && window.performance) {
+      timestamp = window.performance.now();
+    } else if (typeof process !== "undefined" && process.hrtime) {
+      const timeParts = process.hrtime();
+      timestamp = timeParts[0] * 1e3 + timeParts[1] / 1e6;
+    } else {
+      timestamp = Date.now();
+    }
+    return timestamp;
+  }
+
+  // ../../node_modules/@probe.gl/stats/dist/lib/stat.js
+  var Stat = class {
+    constructor(name, type2) {
+      _defineProperty(this, "name", void 0);
+      _defineProperty(this, "type", void 0);
+      _defineProperty(this, "sampleSize", 1);
+      _defineProperty(this, "time", 0);
+      _defineProperty(this, "count", 0);
+      _defineProperty(this, "samples", 0);
+      _defineProperty(this, "lastTiming", 0);
+      _defineProperty(this, "lastSampleTime", 0);
+      _defineProperty(this, "lastSampleCount", 0);
+      _defineProperty(this, "_count", 0);
+      _defineProperty(this, "_time", 0);
+      _defineProperty(this, "_samples", 0);
+      _defineProperty(this, "_startTime", 0);
+      _defineProperty(this, "_timerPending", false);
+      this.name = name;
+      this.type = type2;
+      this.reset();
+    }
+    reset() {
+      this.time = 0;
+      this.count = 0;
+      this.samples = 0;
+      this.lastTiming = 0;
+      this.lastSampleTime = 0;
+      this.lastSampleCount = 0;
+      this._count = 0;
+      this._time = 0;
+      this._samples = 0;
+      this._startTime = 0;
+      this._timerPending = false;
+      return this;
+    }
+    setSampleSize(samples) {
+      this.sampleSize = samples;
+      return this;
+    }
+    incrementCount() {
+      this.addCount(1);
+      return this;
+    }
+    decrementCount() {
+      this.subtractCount(1);
+      return this;
+    }
+    addCount(value) {
+      this._count += value;
+      this._samples++;
+      this._checkSampling();
+      return this;
+    }
+    subtractCount(value) {
+      this._count -= value;
+      this._samples++;
+      this._checkSampling();
+      return this;
+    }
+    addTime(time) {
+      this._time += time;
+      this.lastTiming = time;
+      this._samples++;
+      this._checkSampling();
+      return this;
+    }
+    timeStart() {
+      this._startTime = getHiResTimestamp2();
+      this._timerPending = true;
+      return this;
+    }
+    timeEnd() {
+      if (!this._timerPending) {
+        return this;
+      }
+      this.addTime(getHiResTimestamp2() - this._startTime);
+      this._timerPending = false;
+      this._checkSampling();
+      return this;
+    }
+    getSampleAverageCount() {
+      return this.sampleSize > 0 ? this.lastSampleCount / this.sampleSize : 0;
+    }
+    getSampleAverageTime() {
+      return this.sampleSize > 0 ? this.lastSampleTime / this.sampleSize : 0;
+    }
+    getSampleHz() {
+      return this.lastSampleTime > 0 ? this.sampleSize / (this.lastSampleTime / 1e3) : 0;
+    }
+    getAverageCount() {
+      return this.samples > 0 ? this.count / this.samples : 0;
+    }
+    getAverageTime() {
+      return this.samples > 0 ? this.time / this.samples : 0;
+    }
+    getHz() {
+      return this.time > 0 ? this.samples / (this.time / 1e3) : 0;
+    }
+    _checkSampling() {
+      if (this._samples === this.sampleSize) {
+        this.lastSampleTime = this._time;
+        this.lastSampleCount = this._count;
+        this.count += this._count;
+        this.time += this._time;
+        this.samples += this._samples;
+        this._time = 0;
+        this._count = 0;
+        this._samples = 0;
+      }
+    }
+  };
+
+  // ../../node_modules/@probe.gl/stats/dist/lib/stats.js
+  var Stats = class {
+    constructor(options) {
+      _defineProperty(this, "id", void 0);
+      _defineProperty(this, "stats", {});
+      this.id = options.id;
+      this.stats = {};
+      this._initializeStats(options.stats);
+      Object.seal(this);
+    }
+    get(name) {
+      let type2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "count";
+      return this._getOrCreate({
+        name,
+        type: type2
+      });
+    }
+    get size() {
+      return Object.keys(this.stats).length;
+    }
+    reset() {
+      for (const stat of Object.values(this.stats)) {
+        stat.reset();
+      }
+      return this;
+    }
+    forEach(fn) {
+      for (const stat of Object.values(this.stats)) {
+        fn(stat);
+      }
+    }
+    getTable() {
+      const table = {};
+      this.forEach((stat) => {
+        table[stat.name] = {
+          time: stat.time || 0,
+          count: stat.count || 0,
+          average: stat.getAverageTime() || 0,
+          hz: stat.getHz() || 0
+        };
+      });
+      return table;
+    }
+    _initializeStats() {
+      let stats = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+      stats.forEach((stat) => this._getOrCreate(stat));
+    }
+    _getOrCreate(stat) {
+      const {
+        name,
+        type: type2
+      } = stat;
+      let result = this.stats[name];
+      if (!result) {
+        if (stat instanceof Stat) {
+          result = stat;
+        } else {
+          result = new Stat(name, type2);
+        }
+        this.stats[name] = result;
+      }
+      return result;
+    }
+  };
+
+  // ../api/src/lib/utils/stats-manager.ts
+  var StatsManager = class {
+    stats = /* @__PURE__ */ new Map();
+    getStats(name) {
+      return this.get(name);
+    }
+    get(name) {
+      if (!this.stats.has(name)) {
+        this.stats.set(name, new Stats({
+          id: name
+        }));
+      }
+      return this.stats.get(name);
+    }
+  };
+  var lumaStats = new StatsManager();
+
+  // ../api/src/init.ts
+  function initializeLuma() {
+    const VERSION3 = typeof __VERSION__ !== "undefined" ? __VERSION__ : "untranspiled source";
+    const STARTUP_MESSAGE = "set luma.log.level=1 (or higher) to trace rendering";
+    if (globalThis.luma && globalThis.luma.VERSION !== VERSION3) {
+      throw new Error(`luma.gl - multiple VERSIONs detected: ${globalThis.luma.VERSION} vs ${VERSION3}`);
+    }
+    if (!globalThis.luma) {
+      if (isBrowser()) {
+        log.log(1, `luma.gl ${VERSION3} - ${STARTUP_MESSAGE}`)();
+      }
+      globalThis.luma = globalThis.luma || {
+        VERSION: VERSION3,
+        version: VERSION3,
+        log,
+        // A global stats object that various components can add information to
+        // E.g. see webgl/resource.js
+        stats: lumaStats
+      };
+    }
+    return VERSION3;
+  }
+  var VERSION2 = initializeLuma();
+
+  // ../api/src/lib/utils/utils.ts
+  var uidCounters = {};
+  function uid(id = "id") {
+    uidCounters[id] = uidCounters[id] || 1;
+    const count = uidCounters[id]++;
+    return `${id}-${count}`;
+  }
+  function isObjectEmpty(obj) {
+    let isEmpty = true;
+    for (const key in obj) {
+      isEmpty = false;
+      break;
+    }
+    return isEmpty;
+  }
+
+  // ../api/src/adapter/resources/resource.ts
+  var DEFAULT_RESOURCE_PROPS = {
+    id: "undefined",
+    handle: void 0,
+    userData: {}
+  };
+  var Resource = class {
+    /** props.id, for debugging. */
+    userData = {};
+    destroyed = false;
+    /** For resources that allocate GPU memory */
+    allocatedBytes = 0;
+    /**
+     * Create a new Resource. Called from Subclass
+     */
+    constructor(device, props, defaultProps) {
+      if (!device) {
+        throw new Error("no device");
+      }
+      this._device = device;
+      this.props = selectivelyMerge(props, defaultProps);
+      const id = this.props.id !== "undefined" ? this.props.id : uid(this[Symbol.toStringTag]);
+      this.props.id = id;
+      this.id = id;
+      this.userData = this.props.userData || {};
+      this.addStats();
+    }
+    /**
+     * destroy can be called on any resource to release it before it is garbage collected.
+     */
+    destroy() {
+      this.removeStats();
+    }
+    /** @deprecated Use destroy() */
+    delete() {
+      this.destroy();
+      return this;
+    }
+    toString() {
+      return `${this[Symbol.toStringTag] || this.constructor.name}(${this.id})`;
+    }
+    /**
+     * Combines a map of user props and default props, only including props from defaultProps
+     * @returns returns a map of overridden default props
+     */
+    getProps() {
+      return this.props;
+    }
+    // PROTECTED METHODS
+    /** Called by resource constructor to track object creation */
+    addStats() {
+      const stats = this._device.statsManager.getStats("Resource Counts");
+      const name = this[Symbol.toStringTag];
+      stats.get("Resources Created").incrementCount();
+      stats.get(`${name}s Created`).incrementCount();
+      stats.get(`${name}s Active`).incrementCount();
+    }
+    /** Called by .destroy() to track object destruction. Subclass must call if overriding destroy() */
+    removeStats() {
+      const stats = this._device.statsManager.getStats("Resource Counts");
+      const name = this[Symbol.toStringTag];
+      stats.get(`${name}s Active`).decrementCount();
+    }
+    /** Called by subclass to track memory allocations */
+    trackAllocatedMemory(bytes, name = this[Symbol.toStringTag]) {
+      const stats = this._device.statsManager.getStats("Resource Counts");
+      stats.get("GPU Memory").addCount(bytes);
+      stats.get(`${name} Memory`).addCount(bytes);
+      this.allocatedBytes = bytes;
+    }
+    /** Called by subclass to track memory deallocations */
+    trackDeallocatedMemory(name = this[Symbol.toStringTag]) {
+      const stats = this._device.statsManager.getStats("Resource Counts");
+      stats.get("GPU Memory").subtractCount(this.allocatedBytes);
+      stats.get(`${name} Memory`).subtractCount(this.allocatedBytes);
+      this.allocatedBytes = 0;
+    }
+  };
+  function selectivelyMerge(props, defaultProps) {
+    const mergedProps = {
+      ...defaultProps
+    };
+    for (const key in props) {
+      if (props[key] !== void 0) {
+        mergedProps[key] = props[key];
+      }
+    }
+    return mergedProps;
+  }
+
+  // ../api/src/adapter/resources/buffer.ts
+  var DEFAULT_BUFFER_PROPS = {
+    ...DEFAULT_RESOURCE_PROPS,
+    usage: 0,
+    // Buffer.COPY_DST | Buffer.COPY_SRC
+    byteLength: 0,
+    byteOffset: 0,
+    data: null,
+    indexType: "uint16",
+    mappedAtCreation: false
+  };
+  var _Buffer = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "Buffer";
+    }
+    constructor(device, props) {
+      const deducedProps = {
+        ...props
+      };
+      if ((props.usage || 0) & _Buffer.INDEX && !props.indexType) {
+        if (props.data instanceof Uint32Array) {
+          deducedProps.indexType = "uint32";
+        } else if (props.data instanceof Uint16Array) {
+          deducedProps.indexType = "uint16";
+        }
+      }
+      super(device, deducedProps, DEFAULT_BUFFER_PROPS);
+    }
+    write(data, byteOffset) {
+      throw new Error("not implemented");
+    }
+    readAsync(byteOffset, byteLength) {
+      throw new Error("not implemented");
+    }
+    // TODO - can sync read be supported in WebGPU?
+    getData() {
+      throw new Error("not implemented");
+    }
+    // Convenience API
+    /** Read data from the buffer *
+    async readAsync(options: {
+      byteOffset?: number,
+      byteLength?: number,
+      map?: boolean,
+      unmap?: boolean
+    }): Promise<ArrayBuffer> {
+      if (options.map ?? true) {
+        await this.mapAsync(Buffer.MAP_READ, options.byteOffset, options.byteLength);
+      }
+      const arrayBuffer = this.getMappedRange(options.byteOffset, options.byteLength);
+      if (options.unmap ?? true) {
+        this.unmap();
+      }
+      return arrayBuffer;
+    }
+     /** Write data to the buffer *
+    async writeAsync(options: {
+      data: ArrayBuffer,
+      byteOffset?: number,
+      byteLength?: number,
+      map?: boolean,
+      unmap?: boolean
+    }): Promise<void> {
+      if (options.map ?? true) {
+        await this.mapAsync(Buffer.MAP_WRITE, options.byteOffset, options.byteLength);
+      }
+      const arrayBuffer = this.getMappedRange(options.byteOffset, options.byteLength);
+      const destArray = new Uint8Array(arrayBuffer);
+      const srcArray = new Uint8Array(options.data);
+      destArray.set(srcArray);
+      if (options.unmap ?? true) {
+        this.unmap();
+      }
+    }
+    */
+    // Mapped API (WebGPU)
+    /** Maps the memory so that it can be read */
+    // abstract mapAsync(mode, byteOffset, byteLength): Promise<void>
+    /** Get the mapped range of data for reading or writing */
+    // abstract getMappedRange(byteOffset, byteLength): ArrayBuffer;
+    /** unmap makes the contents of the buffer available to the GPU again */
+    // abstract unmap(): void;
+  };
+  var Buffer2 = _Buffer;
+  // Usage Flags
+  __publicField(Buffer2, "MAP_READ", 1);
+  __publicField(Buffer2, "MAP_WRITE", 2);
+  __publicField(Buffer2, "COPY_SRC", 4);
+  __publicField(Buffer2, "COPY_DST", 8);
+  __publicField(Buffer2, "INDEX", 16);
+  __publicField(Buffer2, "VERTEX", 32);
+  __publicField(Buffer2, "UNIFORM", 64);
+  __publicField(Buffer2, "STORAGE", 128);
+  __publicField(Buffer2, "INDIRECT", 256);
+  __publicField(Buffer2, "QUERY_RESOLVE", 512);
+
+  // ../api/src/adapter/device.ts
+  var DEFAULT_DEVICE_PROPS = {
+    id: null,
+    type: "best-available",
+    canvas: null,
+    container: null,
+    webgl2: true,
+    // Attempt to create a WebGL2 context
+    webgl1: true,
+    // Attempt to create a WebGL1 context (false to fail if webgl2 not available)
+    manageState: true,
+    width: 800,
+    // width are height are only used by headless gl
+    height: 600,
+    debug: Boolean(log.get("debug")),
+    // Instrument context (at the expense of performance)
+    break: [],
+    // alpha: undefined,
+    // depth: undefined,
+    // stencil: undefined,
+    // antialias: undefined,
+    // premultipliedAlpha: undefined,
+    // preserveDrawingBuffer: undefined,
+    // failIfMajorPerformanceCaveat: undefined
+    gl: null
+  };
+  var Device = class {
+    get [Symbol.toStringTag]() {
+      return "Device";
+    }
+    constructor(props) {
+      this.props = {
+        ...DEFAULT_DEVICE_PROPS,
+        ...props
+      };
+      this.id = this.props.id || uid(this[Symbol.toStringTag].toLowerCase());
+    }
+    statsManager = lumaStats;
+    userData = {};
+    /** Information about the device (vendor, versions etc) */
+    /** Optional capability discovery */
+    /** WebGPU style device limits */
+    /** Check if device supports a specific texture format (creation and `nearest` sampling) */
+    /** Check if linear filtering (sampler interpolation) is supported for a specific texture format */
+    /** Check if device supports rendering to a specific texture format */
+    /** True context is already lost */
+    /** Promise that resolves when context is lost */
+    /** default canvas context */
+    /** Creates a new CanvasContext (WebGPU only) */
+    /** Call after rendering a frame (necessary e.g. on WebGL OffscreenCanvas) */
+    // Resource creation
+    /** Create a buffer */
+    createBuffer(props) {
+      if (props instanceof ArrayBuffer || ArrayBuffer.isView(props)) {
+        return this._createBuffer({
+          data: props
+        });
+      }
+      if ((props.usage || 0) & Buffer2.INDEX && !props.indexType) {
+        if (props.data instanceof Uint32Array) {
+          props.indexType = "uint32";
+        } else if (props.data instanceof Uint16Array) {
+          props.indexType = "uint16";
+        }
+      }
+      return this._createBuffer(props);
+    }
+    /** Create a texture */
+    createTexture(props) {
+      if (props instanceof Promise || typeof props === "string") {
+        props = {
+          data: props
+        };
+      }
+      return this._createTexture(props);
+    }
+    /** Create a temporary texture view of a video source */
+    /** Create a sampler */
+    /** Create a shader */
+    /** Create a render pipeline (aka program) */
+    /** Create a compute pipeline (aka program) */
+    /** Create a RenderPass */
+    /** Create a ComputePass */
+    // Implementation
+  };
+  __publicField(Device, "VERSION", VERSION2);
+
+  // ../api/src/adapter/canvas-context.ts
+  var isPage = isBrowser() && typeof document !== "undefined";
+  var isPageLoaded = () => isPage && document.readyState === "complete";
+  var DEFAULT_CANVAS_CONTEXT_PROPS = {
+    canvas: null,
+    width: 800,
+    // width are height are only used by headless gl
+    height: 600,
+    useDevicePixels: true,
+    autoResize: true,
+    container: null,
+    visible: true,
+    colorSpace: "srgb",
+    alphaMode: "opaque"
+  };
+  var CanvasContext = class {
+    width = 1;
+    height = 1;
+    /** State used by luma.gl classes: TODO - move to canvasContext*/
+    _canvasSizeInfo = {
+      clientWidth: 0,
+      clientHeight: 0,
+      devicePixelRatio: 1
+    };
+    /** Check if the DOM is loaded */
+    static get isPageLoaded() {
+      return isPageLoaded();
+    }
+    constructor(props) {
+      this.props = {
+        ...DEFAULT_CANVAS_CONTEXT_PROPS,
+        ...props
+      };
+      props = this.props;
+      if (!isBrowser()) {
+        this.id = "node-canvas-context";
+        this.type = "node";
+        this.width = this.props.width;
+        this.height = this.props.height;
+        this.canvas = null;
+        return;
+      }
+      if (!props.canvas) {
+        const canvas = createCanvas(props);
+        const container = getContainer(props?.container || null);
+        container.insertBefore(canvas, container.firstChild);
+        this.canvas = canvas;
+        if (!props?.visible) {
+          this.canvas.style.visibility = "hidden";
+        }
+      } else if (typeof props.canvas === "string") {
+        this.canvas = getCanvasFromDOM(props.canvas);
+      } else {
+        this.canvas = props.canvas;
+      }
+      if (this.canvas instanceof HTMLCanvasElement) {
+        this.id = this.canvas.id;
+        this.type = "html-canvas";
+        this.htmlCanvas = this.canvas;
+      } else {
+        this.id = "offscreen-canvas";
+        this.type = "offscreen-canvas";
+        this.offscreenCanvas = this.canvas;
+      }
+      if (this.canvas instanceof HTMLCanvasElement && props.autoResize) {
+        this.resizeObserver = new ResizeObserver((entries) => {
+          for (const entry of entries) {
+            if (entry.target === this.canvas) {
+              this.update();
+            }
+          }
+        });
+        this.resizeObserver.observe(this.canvas);
+      }
+    }
+    /** Returns a framebuffer with properly resized current 'swap chain' textures */
+    /**
+     * Returns the current DPR, if props.useDevicePixels is true
+     * Device refers to physical
+     */
+    getDevicePixelRatio(useDevicePixels) {
+      if (typeof OffscreenCanvas !== "undefined" && this.canvas instanceof OffscreenCanvas) {
+        return 1;
+      }
+      if (typeof useDevicePixels === "number") {
+        return useDevicePixels > 0 ? useDevicePixels : 1;
+      }
+      if (typeof this.props.useDevicePixels === "number") {
+        return this.props.useDevicePixels > 0 ? this.props.useDevicePixels : 1;
+      }
+      return useDevicePixels || this.props.useDevicePixels ? typeof window !== "undefined" && window.devicePixelRatio || 1 : 1;
+    }
+    /**
+     * Returns the size of drawing buffer in device pixels.
+     * @note This can be different from the 'CSS' size of a canvas, and also from the
+     * canvas' internal drawing buffer size (.width, .height).
+     * This is the size required to cover the canvas, adjusted for DPR
+     */
+    getPixelSize() {
+      switch (this.type) {
+        case "node":
+          return [this.width, this.height];
+        case "offscreen-canvas":
+          return [this.canvas.width, this.canvas.height];
+        case "html-canvas":
+          const dpr = this.getDevicePixelRatio();
+          const canvas = this.canvas;
+          return canvas.parentElement ? [canvas.clientWidth * dpr, canvas.clientHeight * dpr] : [this.canvas.width, this.canvas.height];
+        default:
+          throw new Error(this.type);
+      }
+    }
+    getAspect() {
+      const [width, height] = this.getPixelSize();
+      return width / height;
+    }
+    /**
+     * Returns multiplier need to convert CSS size to Device size
+     */
+    cssToDeviceRatio() {
+      try {
+        const [drawingBufferWidth] = this.getDrawingBufferSize();
+        const {
+          clientWidth
+        } = this._canvasSizeInfo;
+        return clientWidth ? drawingBufferWidth / clientWidth : 1;
+      } catch {
+        return 1;
+      }
+    }
+    /**
+     * Maps CSS pixel position to device pixel position
+     */
+    cssToDevicePixels(cssPixel, yInvert = true) {
+      const ratio = this.cssToDeviceRatio();
+      const [width, height] = this.getDrawingBufferSize();
+      return scalePixels(cssPixel, ratio, width, height, yInvert);
+    }
+    /**
+     * Use devicePixelRatio to set canvas width and height
+     * @note this is a raw port of luma.gl v8 code. Might be worth a review
+     */
+    setDevicePixelRatio(devicePixelRatio, options = {}) {
+      if (!this.htmlCanvas) {
+        return;
+      }
+      let clientWidth = "width" in options ? options.width : this.htmlCanvas.clientWidth;
+      let clientHeight = "height" in options ? options.height : this.htmlCanvas.clientHeight;
+      if (!clientWidth || !clientHeight) {
+        log.log(1, "Canvas clientWidth/clientHeight is 0")();
+        devicePixelRatio = 1;
+        clientWidth = this.htmlCanvas.width || 1;
+        clientHeight = this.htmlCanvas.height || 1;
+      }
+      const cachedSize = this._canvasSizeInfo;
+      if (cachedSize.clientWidth !== clientWidth || cachedSize.clientHeight !== clientHeight || cachedSize.devicePixelRatio !== devicePixelRatio) {
+        let clampedPixelRatio = devicePixelRatio;
+        const canvasWidth = Math.floor(clientWidth * clampedPixelRatio);
+        const canvasHeight = Math.floor(clientHeight * clampedPixelRatio);
+        this.htmlCanvas.width = canvasWidth;
+        this.htmlCanvas.height = canvasHeight;
+        const [drawingBufferWidth, drawingBufferHeight] = this.getDrawingBufferSize();
+        if (drawingBufferWidth !== canvasWidth || drawingBufferHeight !== canvasHeight) {
+          clampedPixelRatio = Math.min(drawingBufferWidth / clientWidth, drawingBufferHeight / clientHeight);
+          this.htmlCanvas.width = Math.floor(clientWidth * clampedPixelRatio);
+          this.htmlCanvas.height = Math.floor(clientHeight * clampedPixelRatio);
+          log.warn("Device pixel ratio clamped")();
+        }
+        this._canvasSizeInfo.clientWidth = clientWidth;
+        this._canvasSizeInfo.clientHeight = clientHeight;
+        this._canvasSizeInfo.devicePixelRatio = devicePixelRatio;
+      }
+    }
+    // PRIVATE
+    /** @todo Major hack done to port the CSS methods above, base canvas context should not depend on WebGL */
+    getDrawingBufferSize() {
+      const gl = this.device.gl;
+      if (!gl) {
+        throw new Error("canvas size");
+      }
+      return [gl.drawingBufferWidth, gl.drawingBufferHeight];
+    }
+    /** Perform platform specific updates (WebGPU vs WebGL) */
+    /**
+     * Allows subclass constructor to override the canvas id for auto created canvases.
+     * This can really help when debugging DOM in apps that create multiple devices
+     */
+    _setAutoCreatedCanvasId(id) {
+      if (this.htmlCanvas?.id === "lumagl-auto-created-canvas") {
+        this.htmlCanvas.id = id;
+      }
+    }
+  };
+  /**
+   * Get a 'lazy' promise that resolves when the DOM is loaded.
+   * @note Since there may be limitations on number of `load` event listeners,
+   * it is recommended avoid calling this function until actually needed.
+   * I.e. don't call it until you know that you will be looking up a string in the DOM.
+   */
+  __publicField(CanvasContext, "pageLoaded", getPageLoadPromise());
+  function getPageLoadPromise() {
+    if (isPageLoaded() || typeof window === "undefined") {
+      return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+      window.addEventListener("load", () => resolve());
+    });
+  }
+  function getContainer(container) {
+    if (typeof container === "string") {
+      const element = document.getElementById(container);
+      if (!element && !isPageLoaded()) {
+        throw new Error(`Accessing '${container}' before page was loaded`);
+      }
+      if (!element) {
+        throw new Error(`${container} is not an HTML element`);
+      }
+      return element;
+    } else if (container) {
+      return container;
+    }
+    return document.body;
+  }
+  function getCanvasFromDOM(canvasId) {
+    const canvas = document.getElementById(canvasId);
+    if (!canvas && !isPageLoaded()) {
+      throw new Error(`Accessing '${canvasId}' before page was loaded`);
+    }
+    if (!(canvas instanceof HTMLCanvasElement)) {
+      throw new Error(`'${canvas}' is not a canvas element`);
+    }
+    return canvas;
+  }
+  function createCanvas(props) {
+    const {
+      width,
+      height
+    } = props;
+    const targetCanvas = document.createElement("canvas");
+    targetCanvas.id = "lumagl-auto-created-canvas";
+    targetCanvas.width = width || 1;
+    targetCanvas.height = height || 1;
+    targetCanvas.style.width = Number.isFinite(width) ? `${width}px` : "100%";
+    targetCanvas.style.height = Number.isFinite(height) ? `${height}px` : "100%";
+    return targetCanvas;
+  }
+  function scalePixels(pixel, ratio, width, height, yInvert) {
+    const point = pixel;
+    const x = scaleX(point[0], ratio, width);
+    let y = scaleY(point[1], ratio, height, yInvert);
+    let t = scaleX(point[0] + 1, ratio, width);
+    const xHigh = t === width - 1 ? t : t - 1;
+    t = scaleY(point[1] + 1, ratio, height, yInvert);
+    let yHigh;
+    if (yInvert) {
+      t = t === 0 ? t : t + 1;
+      yHigh = y;
+      y = t;
+    } else {
+      yHigh = t === height - 1 ? t : t - 1;
+    }
+    return {
+      x,
+      y,
+      // when ratio < 1, current css pixel and next css pixel may point to same device pixel, set width/height to 1 in those cases.
+      width: Math.max(xHigh - x + 1, 1),
+      height: Math.max(yHigh - y + 1, 1)
+    };
+  }
+  function scaleX(x, ratio, width) {
+    const r = Math.min(Math.round(x * ratio), width - 1);
+    return r;
+  }
+  function scaleY(y, ratio, height, yInvert) {
+    return yInvert ? Math.max(0, height - 1 - Math.round(y * ratio)) : Math.min(Math.round(y * ratio), height - 1);
+  }
+
+  // ../api/src/adapter/resources/texture.ts
+  var DEFAULT_TEXTURE_PROPS = {
+    ...DEFAULT_RESOURCE_PROPS,
+    data: null,
+    dimension: "2d",
+    format: "rgba8unorm",
+    // width: undefined,
+    // height: undefined,
+    depth: 1,
+    mipmaps: true,
+    sampler: {},
+    // type: undefined,
+    compressed: false,
+    // mipLevels: 1,
+    usage: 0,
+    parameters: {},
+    pixelStore: {},
+    pixels: null,
+    border: 0,
+    recreate: false
+  };
+  var Texture = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "Texture";
+    }
+    constructor(device, props) {
+      super(device, props, DEFAULT_TEXTURE_PROPS);
+    }
+    /** Default sampler for this device */
+  };
+  __publicField(Texture, "COPY_SRC", 1);
+  __publicField(Texture, "COPY_DST", 2);
+  __publicField(Texture, "TEXTURE_BINDING", 4);
+  __publicField(Texture, "STORAGE_BINDING", 8);
+  __publicField(Texture, "RENDER_ATTACHMENT", 16);
+
+  // ../api/src/adapter/resources/external-texture.ts
+  var DEFAULT_TEXTURE_PROPS2 = {
+    ...DEFAULT_RESOURCE_PROPS,
+    source: null,
+    colorSpace: "srgb"
+  };
+  var ExternalTexture = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "ExternalTexture";
+    }
+    constructor(device, props) {
+      super(device, props, DEFAULT_TEXTURE_PROPS2);
+    }
+  };
+
+  // ../api/src/adapter/resources/shader.ts
+  var DEFAULT_SHADER_PROPS = {
+    ...DEFAULT_RESOURCE_PROPS,
+    stage: "vertex",
+    source: "",
+    sourceMap: null,
+    language: "glsl",
+    shaderType: 0
+  };
+  var Shader = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "Shader";
+    }
+    constructor(device, props) {
+      super(device, props, DEFAULT_SHADER_PROPS);
+      this.stage = this.props.stage;
+      this.source = this.props.source;
+    }
+  };
+
+  // ../api/src/adapter/resources/sampler.ts
+  var DEFAULT_SAMPLER_PROPS = {
+    ...DEFAULT_RESOURCE_PROPS,
+    type: "color-sampler",
+    addressModeU: "clamp-to-edge",
+    addressModeV: "clamp-to-edge",
+    addressModeW: "clamp-to-edge",
+    magFilter: "nearest",
+    minFilter: "nearest",
+    mipmapFilter: "nearest",
+    lodMinClamp: 0,
+    lodMaxClamp: 32,
+    // Per WebGPU spec
+    compare: "less-equal",
+    maxAnisotropy: 1
+  };
+  var Sampler = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "Sampler";
+    }
+    constructor(device, props) {
+      super(device, props, DEFAULT_SAMPLER_PROPS);
+    }
+  };
+
+  // ../api/src/adapter/resources/framebuffer.ts
+  var DEFAULT_FRAMEBUFFER_PROPS = {
+    ...DEFAULT_RESOURCE_PROPS,
+    width: 1,
+    height: 1,
+    colorAttachments: [],
+    // ['rgba8unorm-unsized'],
+    depthStencilAttachment: null
+    // 'depth24plus-stencil8'
+  };
+  var Framebuffer = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "Framebuffer";
+    }
+    /** Width of all attachments in this framebuffer */
+    /** Height of all attachments in this framebuffer */
+    constructor(device, props = {}) {
+      super(device, props, DEFAULT_FRAMEBUFFER_PROPS);
+      this.width = this.props.width;
+      this.height = this.props.height;
+    }
+    /**
+     * Resizes all attachments
+     * @note resize() destroys existing textures (if size has changed).
+     */
+    resize(size) {
+      const updateSize = !size || size.height !== this.height || size.width !== this.width;
+      if (size) {
+        this.width = size?.width;
+        this.height = size?.height;
+      }
+      if (updateSize) {
+        this._resizeAttachments(this.width, this.height);
+      }
+    }
+    /** Implementation of resize */
+  };
+
+  // ../api/src/adapter/resources/render-pipeline.ts
+  var DEFAULT_RENDER_PIPELINE_PROPS = {
+    ...DEFAULT_RESOURCE_PROPS,
+    vs: null,
+    vsEntryPoint: "",
+    // main
+    vsConstants: {},
+    fs: null,
+    fsEntryPoint: "",
+    // main
+    fsConstants: {},
+    layout: null,
+    // {attributes: [], bindings: []},
+    topology: "triangle-list",
+    // targets:
+    parameters: {},
+    bufferMap: [],
+    vertexCount: 0,
+    instanceCount: 0,
+    indices: null,
+    attributes: {},
+    bindings: {},
+    uniforms: {}
+  };
+  var RenderPipeline = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "RenderPipeline";
+    }
+    hash = "";
+    constructor(device, props) {
+      super(device, props, DEFAULT_RENDER_PIPELINE_PROPS);
+    }
+  };
+  /** Set attributes (stored on pipeline and set before each call) */
+  /** Set attributes (stored on pipeline and set before each call) */
+  /** Set bindings (stored on pipeline and set before each call) */
+  /** Uniforms (only supported on WebGL devices. Reset before each call to enable pipeline sharing) */
+  /** Draw call */
+  /** Private "export" for Model class */
+  __publicField(RenderPipeline, "_DEFAULT_PROPS", DEFAULT_RENDER_PIPELINE_PROPS);
+
+  // ../api/src/adapter/resources/compute-pipeline.ts
+  var DEFAULT_COMPUTE_PIPELINE_PROPS = {
+    ...DEFAULT_RESOURCE_PROPS,
+    // cs: undefined,
+    // csEntryPoint: undefined,
+    csConstants: {},
+    layout: []
+  };
+  var ComputePipeline = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "ComputePipeline";
+    }
+    hash = "";
+    constructor(device, props) {
+      super(device, props, DEFAULT_COMPUTE_PIPELINE_PROPS);
+    }
+  };
+
+  // ../api/src/adapter/resources/render-pass.ts
+  var DEFAULT_RENDERPASS_PROPS = {
+    ...DEFAULT_RESOURCE_PROPS,
+    framebuffer: null,
+    parameters: null
+  };
+  var RenderPass = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "RenderPass";
+    }
+    constructor(device, props) {
+      super(device, props, DEFAULT_RENDERPASS_PROPS);
+    }
+    // writeTimestamp(querySet: GPUQuerySet, queryIndex: number): void;
+    // beginOcclusionQuery(queryIndex: number): void;
+    // endOcclusionQuery(): void;
+    // executeBundles(bundles: Iterable<GPURenderBundle>): void;
+    // In WebGPU the following methods are on the renderpass.
+    // luma.gl keeps them on the pipeline for now
+    /*
+    setPipeline(pipeline: RenderPipeline): void {}
+     setIndexBuffer(
+      buffer: Buffer,
+      indexFormat: 'uint16' | 'uint32',
+      offset?: number,
+      size?: number
+    ): void {}
+     abstract setVertexBuffer(slot: number, buffer: Buffer, offset: number): void;
+     abstract setBindings(bindings: Record<string, Binding>): void;
+     abstract setParameters(parameters: RenderPassParameters);
+     draw(options: {
+      vertexCount?: number; // Either vertexCount or indexCount must be provided
+      indexCount?: number;  // Activates indexed drawing (call setIndexBuffer())
+      instanceCount?: number; //
+      firstVertex?: number;
+      firstIndex?: number; // requires device.features.has('indirect-first-instance')?
+      firstInstance?: number;
+      baseVertex?: number;
+    }): void {}
+     drawIndirect(indirectBuffer: GPUBuffer, indirectOffset: number): void;
+    drawIndexedIndirect(indirectBuffer: GPUBuffer, indirectOffset: number): void;
+    */
+  };
+
+  // ../api/src/adapter/resources/compute-pass.ts
+  var ComputePass = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "ComputePass";
+    }
+    constructor(device, props) {
+      super(device, props, DEFAULT_RESOURCE_PROPS);
+    }
+    /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */
+    // abstract setBindings(bindings: Binding[]): void;
+    /**
+     * 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 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
+     */
+    // writeTimestamp(querySet: GPUQuerySet, queryIndex: number): void;
+    // beginPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
+    // endPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
+  };
+
+  // ../api/src/adapter/utils/decode-data-type.ts
+  function decodeVertexType(type2) {
+    const dataType = TYPE_MAP[type2];
+    const bytes = getDataTypeBytes(dataType);
+    const integer = !type2.startsWith("float");
+    const normalized = type2.includes("norm");
+    const signed = type2.startsWith("s");
+    return {
+      dataType: TYPE_MAP[type2],
+      byteLength: bytes,
+      integer,
+      signed,
+      normalized
+    };
+  }
+  function getDataTypeBytes(type2) {
+    const bytes = TYPE_SIZES[type2];
+    return bytes;
+  }
+  var TYPE_MAP = {
+    uint8: "uint8",
+    sint8: "sint8",
+    unorm8: "uint8",
+    snorm8: "sint8",
+    uint16: "uint16",
+    sint16: "sint16",
+    unorm16: "uint16",
+    snorm16: "sint16",
+    float16: "float16",
+    float32: "float32",
+    uint32: "uint32",
+    sint32: "sint32"
+  };
+  var TYPE_SIZES = {
+    uint8: 1,
+    sint8: 1,
+    uint16: 2,
+    sint16: 2,
+    float16: 2,
+    float32: 4,
+    uint32: 4,
+    sint32: 4
+  };
+
+  // ../api/src/adapter/utils/decode-vertex-format.ts
+  function decodeVertexFormat(format) {
+    const [type_, count] = format.split("x");
+    const type2 = type_;
+    const components = count ? parseInt(count) : 1;
+    const decodedType = decodeVertexType(type2);
+    return {
+      type: type2,
+      components,
+      byteLength: decodedType.byteLength * components,
+      integer: decodedType.integer,
+      signed: decodedType.signed,
+      normalized: decodedType.normalized
+    };
+  }
+
+  // ../api/src/lib/utils/cast.ts
+  function cast(value) {
+    return value;
+  }
+
+  // src/adapter/resources/webgpu-buffer.ts
+  function getByteLength(props) {
+    return props.byteLength || props.data?.byteLength || 0;
+  }
+  var WebGPUBuffer = class extends Buffer2 {
+    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);
+    }
+    async readAsync(byteOffset = 0, byteLength = this.byteLength) {
+      const tempBuffer = new WebGPUBuffer(this.device, {
+        usage: Buffer2.MAP_READ | Buffer2.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 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/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 WebGPUSampler = class extends Sampler {
+    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 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() {
+      if (typeof this.props.format === "number") {
+        throw new Error("number format");
+      }
+      const width = this.props.width || this.props.data?.width || 1;
+      const height = this.props.height || this.props.data?.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 WebGPUExternalTexture = class extends 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 WebGPUShader = class extends 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());
+    }
+    async _checkCompilationError(errorScope) {
+      const error = await errorScope;
+      if (error) {
+        const shaderLog = await this.compilationInfo();
+        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 */
+    async compilationInfo() {
+      const compilationInfo = await this.handle.getCompilationInfo();
+      return compilationInfo.messages;
+    }
+  };
+
+  // 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, {
+      ...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) {
+    descriptor.fragment.targets = descriptor.fragment?.targets || [];
+    if (!Array.isArray(descriptor.fragment?.targets)) {
+      throw new Error("colorstate");
+    }
+    if (descriptor.fragment?.targets?.length === 0) {
+      descriptor.fragment.targets?.push({});
+    }
+    return descriptor.fragment?.targets;
+  }
+
+  // src/adapter/helpers/get-bind-group.ts
+  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) {
+      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 Buffer2) {
+      return {
+        binding: index,
+        resource: {
+          buffer: cast(binding).handle
+        }
+      };
+    }
+    if (binding instanceof Sampler) {
+      return {
+        binding: index,
+        resource: cast(binding).handle
+      };
+    } else if (binding instanceof Texture) {
+      return {
+        binding: index,
+        resource: cast(binding).handle.createView()
+      };
+    }
+    throw new Error("invalid binding");
+  }
+
+  // src/adapter/helpers/get-vertex-buffer-layout.ts
+  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 += decodeVertexFormat(attributeLayout.format).byteLength;
+        }
+      } else {
+        const attributeLayout = findAttributeLayout(layout, mapping.name, usedAttributes);
+        byteStride = 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: 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 RenderPipeline {
+    fs = null;
+    _indexBuffer = null;
+    // private _firstIndex: number;
+    // private _lastIndex: number;
+    /** For internal use to create BindGroups */
+    _bindGroup = null;
+    constructor(device, props) {
+      super(device, props);
+      this.device = device;
+      this.handle = this.props.handle || this.createHandle();
+      this.handle.label = this.props.id;
+      this.vs = cast(props.vs);
+      this.fs = 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);
+      log.groupCollapsed(1, `new WebGPRenderPipeline(${this.id})`)();
+      log.log(1, JSON.stringify(descriptor, null, 2))();
+      log.groupEnd(1)();
+      return renderPipeline;
+    }
+    destroy() {
+    }
+    setIndexBuffer(indexBuffer) {
+      this._indexBuffer = 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 (!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 (!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() {
+      const vertex = {
+        module: 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: cast(this.props.fs).handle,
+          entryPoint: this.props.fsEntryPoint || "main",
+          targets: [{
+            // TODO exclamation mark hack!
+            format: getWebGPUTextureFormat(this.device?.canvasContext?.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 = 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 = 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?.name || ""}' in Model '${this.props.id}'`);
+        }
+        webgpuRenderPass.handle.setVertexBuffer(i, buffer.handle);
+      }
+    }
+  };
+
+  // src/adapter/resources/webgpu-compute-pipeline.ts
+  var WebGPUComputePipeline = class extends ComputePipeline {
+    constructor(device, props) {
+      super(device, props);
+      this.device = device;
+      const module = cast(this.props.cs).handle;
+      this.handle = this.props.handle || this.device.handle.createComputePipeline({
+        label: this.props.id,
+        compute: {
+          module,
+          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 WebGPURenderPass = class extends RenderPass {
+    /** Active pipeline */
+    pipeline = null;
+    constructor(device, props = {}) {
+      super(device, props);
+      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 = cast(pipeline);
+      this.handle.setPipeline(this.pipeline.handle);
+    }
+    /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */
+    setBindings(bindings) {
+      this.pipeline?.setBindings(bindings);
+      const bindGroup = this.pipeline?._getBindGroup();
+      if (bindGroup) {
+        this.handle.setBindGroup(0, bindGroup);
+      }
+    }
+    setIndexBuffer(buffer, indexFormat, offset = 0, size) {
+      this.handle.setIndexBuffer(cast(buffer).handle, indexFormat, offset, size);
+    }
+    setVertexBuffer(slot, buffer, offset = 0) {
+      this.handle.setVertexBuffer(slot, 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 WebGPUComputePass = class extends ComputePass {
+    _bindGroupLayout = null;
+    constructor(device, props) {
+      super(device, props);
+      this.device = device;
+      this.handle = this.props.handle || device.commandEncoder?.beginComputePass({
+        label: this.props.id
+        // timestampWrites?: GPUComputePassTimestampWrites;
+      });
+    }
+    /** @note no WebGPU destroy method, just gc */
+    destroy() {
+    }
+    end() {
+      this.handle.end();
+    }
+    setPipeline(pipeline) {
+      const wgpuPipeline = 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(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-framebuffer.ts
+  var WebGPUFramebuffer = class extends Framebuffer {
+    colorAttachments = [];
+    depthStencilAttachment = null;
+    /** Partial render pass descriptor. Used by WebGPURenderPass */
+    renderPassDescriptor = {
+      colorAttachments: []
+    };
+    constructor(device, props) {
+      super(device, props);
+      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: 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: 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({
+            ...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({
+          ...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 CanvasContext {
+    depthStencilFormat = "depth24plus";
+    sampleCount = 1;
+    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 = 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
+        });
+        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 Device {
+    canvasContext = null;
+    commandEncoder = null;
+    renderPass = null;
+    _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");
+      }
+      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");
+      }
+      log.probe(1, "Adapter available")();
+      const gpuDevice = await adapter.requestDevice({
+        requiredFeatures: adapter.features
+        // TODO ensure we obtain best limits
+        // requiredLimits: adapter.limits
+      });
+      log.probe(1, "GPUDevice available")();
+      if (typeof props.canvas === "string") {
+        await CanvasContext.pageLoaded;
+        log.probe(1, "DOM is loaded")();
+      }
+      const device = new _WebGPUDevice(gpuDevice, adapter, props);
+      log.probe(1, "Device created", device.info)();
+      log.table(1, device.info)();
+      log.groupEnd(1)();
+      return device;
+    }
+    constructor(device, adapter, props) {
+      super({
+        ...props,
+        id: props.id || 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',
+        shadingLanguages: ["glsl", "wgsl"],
+        shadingLanguageVersions: {
+          glsl: "450",
+          wgsl: "100"
+        },
+        vendorMasked: "",
+        rendererMasked: ""
+      };
+      this.lost = new Promise(async (resolve) => {
+        const lostInfo = await 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();
+    }
+    // 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() {
+      this.renderPass = this.renderPass || this.beginRenderPass({
+        framebuffer: this.canvasContext?.getCurrentFramebuffer()
+      });
+      return this.renderPass;
+    }
+    submit() {
+      this.renderPass?.end();
+      const commandBuffer = this.commandEncoder?.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;
+  __publicField(WebGPUDevice, "type", "webgpu");
+  return __toCommonJS(src_exports);
+})();
+      return __exports__;
+      });