@cosmos.gl/graph 2.6.2 → 2.7.0-beta.1

package/dist/webgl-device-DzkMihDq.js

@@ -0,0 +1,3923 @@
+var je = Object.defineProperty;
+var Qe = (r, t, e) => t in r ? je(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var o = (r, t, e) => Qe(r, typeof t != "symbol" ? t + "" : t, e);
+import { i as Me, a as Ye, n as Ke, u as Ze, R as S, l as b, T as L, g as Je, t as We, D as et, b as tt, B, S as rt, c as it, d as nt, e as st, f as at, h as ot, j as ct, k as lt, m as pe, o as ut, p as ht } from "./index-B1_1MjaX.js";
+function ft(r) {
+  return Me() ? Ye() ? "Electron" : (Ke.userAgent || "").indexOf("Edge") > -1 ? "Edge" : globalThis.chrome ? "Chrome" : globalThis.safari ? "Safari" : globalThis.mozInnerScreenX ? "Firefox" : "Unknown" : "Node";
+}
+function dt() {
+  let r, t;
+  return { promise: new Promise((i, n) => {
+    r = i, t = n;
+  }), resolve: r, reject: t };
+}
+const E = class E {
+  constructor(t) {
+    o(this, "id");
+    o(this, "props");
+    o(this, "canvas");
+    /** Handle to HTML canvas */
+    o(this, "htmlCanvas");
+    /** Handle to wrapped OffScreenCanvas */
+    o(this, "offscreenCanvas");
+    o(this, "type");
+    /** Promise that resolved once the resize observer has updated the pixel size */
+    o(this, "initialized");
+    o(this, "isInitialized", !1);
+    /** Visibility is automatically updated (via an IntersectionObserver) */
+    o(this, "isVisible", !0);
+    /** Width of canvas in CSS units (tracked by a ResizeObserver) */
+    o(this, "cssWidth");
+    /** Height of canvas in CSS units (tracked by a ResizeObserver) */
+    o(this, "cssHeight");
+    /** Device pixel ratio. Automatically updated via media queries */
+    o(this, "devicePixelRatio");
+    /** Exact width of canvas in physical pixels (tracked by a ResizeObserver) */
+    o(this, "devicePixelWidth");
+    /** Exact height of canvas in physical pixels (tracked by a ResizeObserver) */
+    o(this, "devicePixelHeight");
+    /** Width of drawing buffer: automatically tracks this.pixelWidth if props.autoResize is true */
+    o(this, "drawingBufferWidth");
+    /** Height of drawing buffer: automatically tracks this.pixelHeight if props.autoResize is true */
+    o(this, "drawingBufferHeight");
+    o(this, "_initializedResolvers", dt());
+    o(this, "_resizeObserver");
+    o(this, "_intersectionObserver");
+    o(this, "_position");
+    o(this, "destroyed", !1);
+    var e, i;
+    if (this.props = { ...E.defaultProps, ...t }, t = this.props, this.initialized = this._initializedResolvers.promise, Me() ? t.canvas ? typeof t.canvas == "string" ? this.canvas = bt(t.canvas) : this.canvas = t.canvas : this.canvas = mt(t) : this.canvas = { width: t.width || 1, height: t.height || 1 }, E.isHTMLCanvas(this.canvas) ? (this.id = t.id || this.canvas.id, this.type = "html-canvas", this.htmlCanvas = this.canvas) : E.isOffscreenCanvas(this.canvas) ? (this.id = t.id || "offscreen-canvas", this.type = "offscreen-canvas", this.offscreenCanvas = this.canvas) : (this.id = t.id || "node-canvas-context", this.type = "node"), this.cssWidth = ((e = this.htmlCanvas) == null ? void 0 : e.clientWidth) || this.canvas.width, this.cssHeight = ((i = this.htmlCanvas) == null ? void 0 : i.clientHeight) || this.canvas.height, this.devicePixelWidth = this.canvas.width, this.devicePixelHeight = this.canvas.height, this.drawingBufferWidth = this.canvas.width, this.drawingBufferHeight = this.canvas.height, this.devicePixelRatio = globalThis.devicePixelRatio || 1, this._position = [0, 0], E.isHTMLCanvas(this.canvas)) {
+      this._intersectionObserver = new IntersectionObserver((n) => this._handleIntersection(n)), this._intersectionObserver.observe(this.canvas), this._resizeObserver = new ResizeObserver((n) => this._handleResize(n));
+      try {
+        this._resizeObserver.observe(this.canvas, { box: "device-pixel-content-box" });
+      } catch {
+        this._resizeObserver.observe(this.canvas, { box: "content-box" });
+      }
+      setTimeout(() => this._observeDevicePixelRatio(), 0), this.props.trackPosition && this._trackPosition();
+    }
+  }
+  static isHTMLCanvas(t) {
+    return typeof HTMLCanvasElement < "u" && t instanceof HTMLCanvasElement;
+  }
+  static isOffscreenCanvas(t) {
+    return typeof OffscreenCanvas < "u" && t instanceof OffscreenCanvas;
+  }
+  toString() {
+    return `${this[Symbol.toStringTag]}(${this.id})`;
+  }
+  destroy() {
+    this.destroyed = !0;
+  }
+  setProps(t) {
+    return "useDevicePixels" in t && (this.props.useDevicePixels = t.useDevicePixels || !1, this._updateDrawingBufferSize()), this;
+  }
+  // SIZE METHODS
+  /**
+   * Returns the size covered by the canvas in CSS pixels
+   * @note This can be different from the actual device pixel size of a canvas due to DPR scaling, and rounding to integer pixels
+   * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
+   */
+  getCSSSize() {
+    return [this.cssWidth, this.cssHeight];
+  }
+  getPosition() {
+    return this._position;
+  }
+  /**
+   * Returns the size covered by the canvas in actual device pixels.
+   * @note This can be different from the 'CSS' size of a canvas due to DPR scaling, and rounding to integer pixels
+   * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
+   */
+  getDevicePixelSize() {
+    return [this.devicePixelWidth, this.devicePixelHeight];
+  }
+  /** Get the drawing buffer size (number of pixels GPU is rendering into, can be different from CSS size) */
+  getDrawingBufferSize() {
+    return [this.drawingBufferWidth, this.drawingBufferHeight];
+  }
+  /** Returns the biggest allowed framebuffer size. @todo Allow the application to limit this? */
+  getMaxDrawingBufferSize() {
+    const t = this.device.limits.maxTextureDimension2D;
+    return [t, t];
+  }
+  /** Update the canvas drawing buffer size. Called automatically if props.autoResize is true. */
+  setDrawingBufferSize(t, e) {
+    this.canvas.width = t, this.canvas.height = e, this.drawingBufferWidth = t, this.drawingBufferHeight = e;
+  }
+  /**
+   * Returns the current DPR (number of physical pixels per CSS pixel), if props.useDevicePixels is true
+   * @note This can be a fractional (non-integer) number, e.g. when the user zooms in the browser.
+   * @note This function handles the non-HTML canvas cases
+   */
+  getDevicePixelRatio() {
+    return typeof window < "u" && window.devicePixelRatio || 1;
+  }
+  // DEPRECATED METHODS
+  /**
+   * Maps CSS pixel position to device pixel position
+   */
+  cssToDevicePixels(t, e = !0) {
+    const i = this.cssToDeviceRatio(), [n, s] = this.getDrawingBufferSize();
+    return pt(t, i, n, s, e);
+  }
+  /** @deprecated - use .getDevicePixelSize() */
+  getPixelSize() {
+    return this.getDevicePixelSize();
+  }
+  /** @deprecated - TODO which values should we use for aspect */
+  getAspect() {
+    const [t, e] = this.getDevicePixelSize();
+    return t / e;
+  }
+  /** @deprecated Returns multiplier need to convert CSS size to Device size */
+  cssToDeviceRatio() {
+    try {
+      const [t] = this.getDrawingBufferSize(), [e] = this.getCSSSize();
+      return e ? t / e : 1;
+    } catch {
+      return 1;
+    }
+  }
+  /** @deprecated Use canvasContext.setDrawingBufferSize() */
+  resize(t) {
+    this.setDrawingBufferSize(t.width, t.height);
+  }
+  // IMPLEMENTATION
+  /**
+   * 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(t) {
+    var e;
+    ((e = this.htmlCanvas) == null ? void 0 : e.id) === "lumagl-auto-created-canvas" && (this.htmlCanvas.id = t);
+  }
+  /** reacts to an observed intersection */
+  _handleIntersection(t) {
+    const e = t.find((n) => n.target === this.canvas);
+    if (!e)
+      return;
+    const i = e.isIntersecting;
+    this.isVisible !== i && (this.isVisible = i, this.device.props.onVisibilityChange(this));
+  }
+  /**
+   * Reacts to an observed resize by using the most accurate pixel size information the browser can provide
+   * @see https://web.dev/articles/device-pixel-content-box
+   * @see https://webgpufundamentals.org/webgpu/lessons/webgpu-resizing-the-canvas.html
+   */
+  _handleResize(t) {
+    var l, u;
+    const e = t.find((h) => h.target === this.canvas);
+    if (!e)
+      return;
+    this.cssWidth = e.contentBoxSize[0].inlineSize, this.cssHeight = e.contentBoxSize[0].blockSize;
+    const i = this.getDevicePixelSize(), n = ((l = e.devicePixelContentBoxSize) == null ? void 0 : l[0].inlineSize) || e.contentBoxSize[0].inlineSize * devicePixelRatio, s = ((u = e.devicePixelContentBoxSize) == null ? void 0 : u[0].blockSize) || e.contentBoxSize[0].blockSize * devicePixelRatio, [a, c] = this.getMaxDrawingBufferSize();
+    this.devicePixelWidth = Math.max(1, Math.min(n, a)), this.devicePixelHeight = Math.max(1, Math.min(s, c)), this._updateDrawingBufferSize(), this.device.props.onResize(this, { oldPixelSize: i });
+  }
+  _updateDrawingBufferSize() {
+    if (this.props.autoResize) {
+      if (typeof this.props.useDevicePixels == "number") {
+        const t = this.props.useDevicePixels;
+        this.setDrawingBufferSize(this.cssWidth * t, this.cssHeight * t);
+      } else this.props.useDevicePixels ? this.setDrawingBufferSize(this.devicePixelWidth, this.devicePixelHeight) : this.setDrawingBufferSize(this.cssWidth, this.cssHeight);
+      this._updateDevice();
+    }
+    this._initializedResolvers.resolve(), this.isInitialized = !0, this.updatePosition();
+  }
+  /** Monitor DPR changes */
+  _observeDevicePixelRatio() {
+    const t = this.devicePixelRatio;
+    this.devicePixelRatio = window.devicePixelRatio, this.updatePosition(), this.device.props.onDevicePixelRatioChange(this, { oldRatio: t }), matchMedia(`(resolution: ${this.devicePixelRatio}dppx)`).addEventListener("change", () => this._observeDevicePixelRatio(), { once: !0 });
+  }
+  /** Start tracking positions with a timer */
+  _trackPosition(t = 100) {
+    const e = setInterval(() => {
+      this.destroyed ? clearInterval(e) : this.updatePosition();
+    }, t);
+  }
+  /**
+   * Calculated the absolute position of the canvas
+   * @note - getBoundingClientRect() is normally cheap but can be expensive
+   * if called before browser has finished a reflow. Should not be the case here.
+   */
+  updatePosition() {
+    var e, i, n;
+    const t = (e = this.htmlCanvas) == null ? void 0 : e.getBoundingClientRect();
+    if (t) {
+      const s = [t.left, t.top];
+      if (this._position ?? (this._position = s), s[0] !== this._position[0] || s[1] !== this._position[1]) {
+        const c = this._position;
+        this._position = s, (n = (i = this.device.props).onPositionChange) == null || n.call(i, this, { oldPosition: c });
+      }
+    }
+  }
+};
+o(E, "defaultProps", {
+  id: void 0,
+  canvas: null,
+  width: 800,
+  height: 600,
+  useDevicePixels: !0,
+  autoResize: !0,
+  container: null,
+  visible: !0,
+  alphaMode: "opaque",
+  colorSpace: "srgb",
+  trackPosition: !1
+});
+let X = E;
+function gt(r) {
+  if (typeof r == "string") {
+    const t = document.getElementById(r);
+    if (!t)
+      throw new Error(`${r} is not an HTML element`);
+    return t;
+  }
+  return r || document.body;
+}
+function bt(r) {
+  const t = document.getElementById(r);
+  if (!X.isHTMLCanvas(t))
+    throw new Error("Object is not a canvas element");
+  return t;
+}
+function mt(r) {
+  const { width: t, height: e } = r, i = document.createElement("canvas");
+  i.id = Ze("lumagl-auto-created-canvas"), i.width = t || 1, i.height = e || 1, i.style.width = Number.isFinite(t) ? `${t}px` : "100%", i.style.height = Number.isFinite(e) ? `${e}px` : "100%", r != null && r.visible || (i.style.visibility = "hidden");
+  const n = gt((r == null ? void 0 : r.container) || null);
+  return n.insertBefore(i, n.firstChild), i;
+}
+function pt(r, t, e, i, n) {
+  const s = r, a = xe(s[0], t, e);
+  let c = ye(s[1], t, i, n), l = xe(s[0] + 1, t, e);
+  const u = l === e - 1 ? l : l - 1;
+  l = ye(s[1] + 1, t, i, n);
+  let h;
+  return n ? (l = l === 0 ? l : l + 1, h = c, c = l) : h = l === i - 1 ? l : l - 1, {
+    x: a,
+    y: c,
+    // 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(u - a + 1, 1),
+    height: Math.max(h - c + 1, 1)
+  };
+}
+function xe(r, t, e) {
+  return Math.min(Math.round(r * t), e - 1);
+}
+function ye(r, t, e, i) {
+  return i ? Math.max(0, e - 1 - Math.round(r * t)) : Math.min(Math.round(r * t), e - 1);
+}
+const q = class q extends S {
+  constructor(e, i = {}) {
+    super(e, i, q.defaultProps);
+    /** Width of all attachments in this framebuffer */
+    o(this, "width");
+    /** Height of all attachments in this framebuffer */
+    o(this, "height");
+    this.width = this.props.width, this.height = this.props.height;
+  }
+  get [Symbol.toStringTag]() {
+    return "Framebuffer";
+  }
+  /**
+   * Create a copy of this framebuffer with new attached textures, with same props but of the specified size.
+   * @note Does not copy contents of the attached textures.
+   */
+  clone(e) {
+    const i = this.colorAttachments.map((s) => s.texture.clone(e)), n = this.depthStencilAttachment && this.depthStencilAttachment.texture.clone(e);
+    return this.device.createFramebuffer({ ...this.props, colorAttachments: i, depthStencilAttachment: n });
+  }
+  resize(e) {
+    let i = !e;
+    if (e) {
+      const [n, s] = Array.isArray(e) ? e : [e.width, e.height];
+      i = i || s !== this.height || n !== this.width, this.width = n, this.height = s;
+    }
+    i && (b.log(2, `Resizing framebuffer ${this.id} to ${this.width}x${this.height}`)(), this.resizeAttachments(this.width, this.height));
+  }
+  /** Auto creates any textures */
+  autoCreateAttachmentTextures() {
+    if (this.props.colorAttachments.length === 0 && !this.props.depthStencilAttachment)
+      throw new Error("Framebuffer has noattachments");
+    this.colorAttachments = this.props.colorAttachments.map((i, n) => {
+      if (typeof i == "string") {
+        const s = this.createColorTexture(i, n);
+        return this.attachResource(s), s.view;
+      }
+      return i instanceof L ? i.view : i;
+    });
+    const e = this.props.depthStencilAttachment;
+    if (e)
+      if (typeof e == "string") {
+        const i = this.createDepthStencilTexture(e);
+        this.attachResource(i), this.depthStencilAttachment = i.view;
+      } else e instanceof L ? this.depthStencilAttachment = e.view : this.depthStencilAttachment = e;
+  }
+  /** Create a color texture */
+  createColorTexture(e, i) {
+    return this.device.createTexture({
+      id: `${this.id}-color-attachment-${i}`,
+      usage: L.RENDER_ATTACHMENT,
+      format: e,
+      width: this.width,
+      height: this.height,
+      // TODO deprecated? - luma.gl v8 compatibility
+      sampler: {
+        magFilter: "linear",
+        minFilter: "linear"
+      }
+    });
+  }
+  /** Create depth stencil texture */
+  createDepthStencilTexture(e) {
+    return this.device.createTexture({
+      id: `${this.id}-depth-stencil-attachment`,
+      usage: L.RENDER_ATTACHMENT,
+      format: e,
+      width: this.width,
+      height: this.height
+    });
+  }
+  /**
+   * Default implementation of resize
+   * Creates new textures with correct size for all attachments.
+   * and destroys existing textures if owned
+   */
+  resizeAttachments(e, i) {
+    for (let n = 0; n < this.colorAttachments.length; ++n)
+      if (this.colorAttachments[n]) {
+        const s = this.colorAttachments[n].texture.clone({
+          width: e,
+          height: i
+        });
+        this.destroyAttachedResource(this.colorAttachments[n]), this.colorAttachments[n] = s.view, this.attachResource(s.view);
+      }
+    if (this.depthStencilAttachment) {
+      const n = this.depthStencilAttachment.texture.clone({
+        width: e,
+        height: i
+      });
+      this.destroyAttachedResource(this.depthStencilAttachment), this.depthStencilAttachment = n.view, this.attachResource(n);
+    }
+    this.updateAttachments();
+  }
+};
+o(q, "defaultProps", {
+  ...S.defaultProps,
+  width: 1,
+  height: 1,
+  colorAttachments: [],
+  // ['rgba8unorm'],
+  depthStencilAttachment: null
+  // 'depth24plus-stencil8'
+});
+let H = q;
+const _ = class _ extends S {
+  get [Symbol.toStringTag]() {
+    return "RenderPass";
+  }
+  constructor(t, e) {
+    e = _.normalizeProps(t, e), super(t, e, _.defaultProps);
+  }
+  static normalizeProps(t, e) {
+    return e;
+  }
+};
+/** TODO - should be [0, 0, 0, 0], update once deck.gl tests run clean */
+o(_, "defaultClearColor", [0, 0, 0, 1]), /** Depth 1.0 represents the far plance */
+o(_, "defaultClearDepth", 1), /** Clears all stencil bits */
+o(_, "defaultClearStencil", 0), /** Default properties for RenderPass */
+o(_, "defaultProps", {
+  ...S.defaultProps,
+  framebuffer: null,
+  parameters: void 0,
+  clearColor: _.defaultClearColor,
+  clearColors: void 0,
+  clearDepth: _.defaultClearDepth,
+  clearStencil: _.defaultClearStencil,
+  depthReadOnly: !1,
+  stencilReadOnly: !1,
+  discard: !1,
+  occlusionQuerySet: void 0,
+  timestampQuerySet: void 0,
+  beginTimestampIndex: void 0,
+  endTimestampIndex: void 0
+});
+let ie = _;
+const j = class j extends S {
+  get [Symbol.toStringTag]() {
+    return "CommandEncoder";
+  }
+  constructor(t, e) {
+    super(t, e, j.defaultProps);
+  }
+};
+// TODO - luma.gl has these on the device, should we align with WebGPU API?
+// beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
+// beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
+o(j, "defaultProps", {
+  ...S.defaultProps,
+  measureExecutionTime: void 0
+});
+let ne = j;
+const Q = class Q extends S {
+  get [Symbol.toStringTag]() {
+    return "CommandBuffer";
+  }
+  constructor(t, e) {
+    super(t, e, Q.defaultProps);
+  }
+};
+o(Q, "defaultProps", {
+  ...S.defaultProps
+});
+let se = Q;
+const Y = class Y extends S {
+  constructor(e, i) {
+    super(e, i, Y.defaultProps);
+    /** Max number of vertex attributes */
+    o(this, "maxVertexAttributes");
+    /** Attribute infos indexed by location - TODO only needed by webgl module? */
+    o(this, "attributeInfos");
+    /** Index buffer */
+    o(this, "indexBuffer", null);
+    /** Attributes indexed by buffer slot */
+    o(this, "attributes");
+    this.maxVertexAttributes = e.limits.maxVertexAttributes, this.attributes = new Array(this.maxVertexAttributes).fill(null), this.attributeInfos = Je(i.shaderLayout, i.bufferLayout, this.maxVertexAttributes);
+  }
+  get [Symbol.toStringTag]() {
+    return "VertexArray";
+  }
+  // DEPRECATED METHODS
+  /** @deprecated Set constant attributes (WebGL only) */
+  setConstantWebGL(e, i) {
+    this.device.reportError(new Error("constant attributes not supported"), this)();
+  }
+};
+o(Y, "defaultProps", {
+  ...S.defaultProps,
+  shaderLayout: void 0,
+  bufferLayout: []
+});
+let ae = Y;
+const K = class K extends S {
+  get [Symbol.toStringTag]() {
+    return "TransformFeedback";
+  }
+  constructor(t, e) {
+    super(t, e, K.defaultProps);
+  }
+};
+o(K, "defaultProps", {
+  ...S.defaultProps,
+  layout: void 0,
+  buffers: {}
+});
+let oe = K;
+const Z = class Z extends S {
+  get [Symbol.toStringTag]() {
+    return "QuerySet";
+  }
+  constructor(t, e) {
+    super(t, e, Z.defaultProps);
+  }
+};
+o(Z, "defaultProps", {
+  ...S.defaultProps,
+  type: void 0,
+  count: void 0
+});
+let ce = Z;
+const he = {
+  3042: !1,
+  32773: new Float32Array([0, 0, 0, 0]),
+  32777: 32774,
+  34877: 32774,
+  32969: 1,
+  32968: 0,
+  32971: 1,
+  32970: 0,
+  3106: new Float32Array([0, 0, 0, 0]),
+  // TBD
+  3107: [!0, !0, !0, !0],
+  2884: !1,
+  2885: 1029,
+  2929: !1,
+  2931: 1,
+  2932: 513,
+  2928: new Float32Array([0, 1]),
+  // TBD
+  2930: !0,
+  3024: !0,
+  35725: null,
+  // FRAMEBUFFER_BINDING and DRAW_FRAMEBUFFER_BINDING(WebGL2) refer same state.
+  36006: null,
+  36007: null,
+  34229: null,
+  34964: null,
+  2886: 2305,
+  33170: 4352,
+  2849: 1,
+  32823: !1,
+  32824: 0,
+  10752: 0,
+  32926: !1,
+  32928: !1,
+  32938: 1,
+  32939: !1,
+  3089: !1,
+  // Note: Dynamic value. If scissor test enabled we expect users to set correct scissor box
+  3088: new Int32Array([0, 0, 1024, 1024]),
+  2960: !1,
+  2961: 0,
+  2968: 4294967295,
+  36005: 4294967295,
+  2962: 519,
+  2967: 0,
+  2963: 4294967295,
+  34816: 519,
+  36003: 0,
+  36004: 4294967295,
+  2964: 7680,
+  2965: 7680,
+  2966: 7680,
+  34817: 7680,
+  34818: 7680,
+  34819: 7680,
+  // Dynamic value: We use [0, 0, 1024, 1024] as default, but usually this is updated in each frame.
+  2978: [0, 0, 1024, 1024],
+  36389: null,
+  36662: null,
+  36663: null,
+  35053: null,
+  35055: null,
+  35723: 4352,
+  36010: null,
+  35977: !1,
+  3333: 4,
+  3317: 4,
+  37440: !1,
+  37441: !1,
+  37443: 37444,
+  3330: 0,
+  3332: 0,
+  3331: 0,
+  3314: 0,
+  32878: 0,
+  3316: 0,
+  3315: 0,
+  32877: 0
+}, y = (r, t, e) => t ? r.enable(e) : r.disable(e), we = (r, t, e) => r.hint(e, t), T = (r, t, e) => r.pixelStorei(e, t), ve = (r, t, e) => {
+  const i = e === 36006 ? 36009 : 36008;
+  return r.bindFramebuffer(i, t);
+}, R = (r, t, e) => {
+  const n = {
+    34964: 34962,
+    36662: 36662,
+    36663: 36663,
+    35053: 35051,
+    35055: 35052
+  }[e];
+  r.bindBuffer(n, t);
+};
+function J(r) {
+  return Array.isArray(r) || ArrayBuffer.isView(r) && !(r instanceof DataView);
+}
+const xt = {
+  3042: y,
+  32773: (r, t) => r.blendColor(...t),
+  32777: "blendEquation",
+  34877: "blendEquation",
+  32969: "blendFunc",
+  32968: "blendFunc",
+  32971: "blendFunc",
+  32970: "blendFunc",
+  3106: (r, t) => r.clearColor(...t),
+  3107: (r, t) => r.colorMask(...t),
+  2884: y,
+  2885: (r, t) => r.cullFace(t),
+  2929: y,
+  2931: (r, t) => r.clearDepth(t),
+  2932: (r, t) => r.depthFunc(t),
+  2928: (r, t) => r.depthRange(...t),
+  2930: (r, t) => r.depthMask(t),
+  3024: y,
+  35723: we,
+  35725: (r, t) => r.useProgram(t),
+  36007: (r, t) => r.bindRenderbuffer(36161, t),
+  36389: (r, t) => {
+    var e;
+    return (e = r.bindTransformFeedback) == null ? void 0 : e.call(r, 36386, t);
+  },
+  34229: (r, t) => r.bindVertexArray(t),
+  // NOTE: FRAMEBUFFER_BINDING and DRAW_FRAMEBUFFER_BINDING(WebGL2) refer same state.
+  36006: ve,
+  36010: ve,
+  // Buffers
+  34964: R,
+  36662: R,
+  36663: R,
+  35053: R,
+  35055: R,
+  2886: (r, t) => r.frontFace(t),
+  33170: we,
+  2849: (r, t) => r.lineWidth(t),
+  32823: y,
+  32824: "polygonOffset",
+  10752: "polygonOffset",
+  35977: y,
+  32926: y,
+  32928: y,
+  32938: "sampleCoverage",
+  32939: "sampleCoverage",
+  3089: y,
+  3088: (r, t) => r.scissor(...t),
+  2960: y,
+  2961: (r, t) => r.clearStencil(t),
+  2968: (r, t) => r.stencilMaskSeparate(1028, t),
+  36005: (r, t) => r.stencilMaskSeparate(1029, t),
+  2962: "stencilFuncFront",
+  2967: "stencilFuncFront",
+  2963: "stencilFuncFront",
+  34816: "stencilFuncBack",
+  36003: "stencilFuncBack",
+  36004: "stencilFuncBack",
+  2964: "stencilOpFront",
+  2965: "stencilOpFront",
+  2966: "stencilOpFront",
+  34817: "stencilOpBack",
+  34818: "stencilOpBack",
+  34819: "stencilOpBack",
+  2978: (r, t) => r.viewport(...t),
+  // WEBGL2 EXTENSIONS
+  // EXT_depth_clamp https://registry.khronos.org/webgl/extensions/EXT_depth_clamp/
+  34383: y,
+  // WEBGL_provoking_vertex https://registry.khronos.org/webgl/extensions/WEBGL_provoking_vertex/
+  // [GL.PROVOKING_VERTEX_WEBL]: TODO - extension function needed
+  // WEBGL_polygon_mode https://registry.khronos.org/webgl/extensions/WEBGL_polygon_mode/
+  // POLYGON_MODE_WEBGL  TODO - extension function needed
+  10754: y,
+  // WEBGL_clip_cull_distance https://registry.khronos.org/webgl/extensions/WEBGL_clip_cull_distance/
+  12288: y,
+  12289: y,
+  12290: y,
+  12291: y,
+  12292: y,
+  12293: y,
+  12294: y,
+  12295: y,
+  // PIXEL PACK/UNPACK MODES
+  3333: T,
+  3317: T,
+  37440: T,
+  37441: T,
+  37443: T,
+  3330: T,
+  3332: T,
+  3331: T,
+  3314: T,
+  32878: T,
+  3316: T,
+  3315: T,
+  32877: T,
+  // Function-style setters
+  framebuffer: (r, t) => {
+    const e = t && "handle" in t ? t.handle : t;
+    return r.bindFramebuffer(36160, e);
+  },
+  blend: (r, t) => t ? r.enable(3042) : r.disable(3042),
+  blendColor: (r, t) => r.blendColor(...t),
+  blendEquation: (r, t) => {
+    const e = typeof t == "number" ? [t, t] : t;
+    r.blendEquationSeparate(...e);
+  },
+  blendFunc: (r, t) => {
+    const e = (t == null ? void 0 : t.length) === 2 ? [...t, ...t] : t;
+    r.blendFuncSeparate(...e);
+  },
+  clearColor: (r, t) => r.clearColor(...t),
+  clearDepth: (r, t) => r.clearDepth(t),
+  clearStencil: (r, t) => r.clearStencil(t),
+  colorMask: (r, t) => r.colorMask(...t),
+  cull: (r, t) => t ? r.enable(2884) : r.disable(2884),
+  cullFace: (r, t) => r.cullFace(t),
+  depthTest: (r, t) => t ? r.enable(2929) : r.disable(2929),
+  depthFunc: (r, t) => r.depthFunc(t),
+  depthMask: (r, t) => r.depthMask(t),
+  depthRange: (r, t) => r.depthRange(...t),
+  dither: (r, t) => t ? r.enable(3024) : r.disable(3024),
+  derivativeHint: (r, t) => {
+    r.hint(35723, t);
+  },
+  frontFace: (r, t) => r.frontFace(t),
+  mipmapHint: (r, t) => r.hint(33170, t),
+  lineWidth: (r, t) => r.lineWidth(t),
+  polygonOffsetFill: (r, t) => t ? r.enable(32823) : r.disable(32823),
+  polygonOffset: (r, t) => r.polygonOffset(...t),
+  sampleCoverage: (r, t) => r.sampleCoverage(t[0], t[1] || !1),
+  scissorTest: (r, t) => t ? r.enable(3089) : r.disable(3089),
+  scissor: (r, t) => r.scissor(...t),
+  stencilTest: (r, t) => t ? r.enable(2960) : r.disable(2960),
+  stencilMask: (r, t) => {
+    t = J(t) ? t : [t, t];
+    const [e, i] = t;
+    r.stencilMaskSeparate(1028, e), r.stencilMaskSeparate(1029, i);
+  },
+  stencilFunc: (r, t) => {
+    t = J(t) && t.length === 3 ? [...t, ...t] : t;
+    const [e, i, n, s, a, c] = t;
+    r.stencilFuncSeparate(1028, e, i, n), r.stencilFuncSeparate(1029, s, a, c);
+  },
+  stencilOp: (r, t) => {
+    t = J(t) && t.length === 3 ? [...t, ...t] : t;
+    const [e, i, n, s, a, c] = t;
+    r.stencilOpSeparate(1028, e, i, n), r.stencilOpSeparate(1029, s, a, c);
+  },
+  viewport: (r, t) => r.viewport(...t)
+};
+function x(r, t, e) {
+  return t[r] !== void 0 ? t[r] : e[r];
+}
+const yt = {
+  blendEquation: (r, t, e) => r.blendEquationSeparate(x(32777, t, e), x(34877, t, e)),
+  blendFunc: (r, t, e) => r.blendFuncSeparate(x(32969, t, e), x(32968, t, e), x(32971, t, e), x(32970, t, e)),
+  polygonOffset: (r, t, e) => r.polygonOffset(x(32824, t, e), x(10752, t, e)),
+  sampleCoverage: (r, t, e) => r.sampleCoverage(x(32938, t, e), x(32939, t, e)),
+  stencilFuncFront: (r, t, e) => r.stencilFuncSeparate(1028, x(2962, t, e), x(2967, t, e), x(2963, t, e)),
+  stencilFuncBack: (r, t, e) => r.stencilFuncSeparate(1029, x(34816, t, e), x(36003, t, e), x(36004, t, e)),
+  stencilOpFront: (r, t, e) => r.stencilOpSeparate(1028, x(2964, t, e), x(2965, t, e), x(2966, t, e)),
+  stencilOpBack: (r, t, e) => r.stencilOpSeparate(1029, x(34817, t, e), x(34818, t, e), x(34819, t, e))
+}, Se = {
+  // GENERIC SETTERS
+  enable: (r, t) => r({
+    [t]: !0
+  }),
+  disable: (r, t) => r({
+    [t]: !1
+  }),
+  pixelStorei: (r, t, e) => r({
+    [t]: e
+  }),
+  hint: (r, t, e) => r({
+    [t]: e
+  }),
+  // SPECIFIC SETTERS
+  useProgram: (r, t) => r({
+    35725: t
+  }),
+  bindRenderbuffer: (r, t, e) => r({
+    36007: e
+  }),
+  bindTransformFeedback: (r, t, e) => r({
+    36389: e
+  }),
+  bindVertexArray: (r, t) => r({
+    34229: t
+  }),
+  bindFramebuffer: (r, t, e) => {
+    switch (t) {
+      case 36160:
+        return r({
+          36006: e,
+          36010: e
+        });
+      case 36009:
+        return r({ 36006: e });
+      case 36008:
+        return r({ 36010: e });
+      default:
+        return null;
+    }
+  },
+  bindBuffer: (r, t, e) => {
+    const i = {
+      34962: [34964],
+      36662: [36662],
+      36663: [36663],
+      35051: [35053],
+      35052: [35055]
+    }[t];
+    return i ? r({ [i]: e }) : { valueChanged: !0 };
+  },
+  blendColor: (r, t, e, i, n) => r({
+    32773: new Float32Array([t, e, i, n])
+  }),
+  blendEquation: (r, t) => r({
+    32777: t,
+    34877: t
+  }),
+  blendEquationSeparate: (r, t, e) => r({
+    32777: t,
+    34877: e
+  }),
+  blendFunc: (r, t, e) => r({
+    32969: t,
+    32968: e,
+    32971: t,
+    32970: e
+  }),
+  blendFuncSeparate: (r, t, e, i, n) => r({
+    32969: t,
+    32968: e,
+    32971: i,
+    32970: n
+  }),
+  clearColor: (r, t, e, i, n) => r({
+    3106: new Float32Array([t, e, i, n])
+  }),
+  clearDepth: (r, t) => r({
+    2931: t
+  }),
+  clearStencil: (r, t) => r({
+    2961: t
+  }),
+  colorMask: (r, t, e, i, n) => r({
+    3107: [t, e, i, n]
+  }),
+  cullFace: (r, t) => r({
+    2885: t
+  }),
+  depthFunc: (r, t) => r({
+    2932: t
+  }),
+  depthRange: (r, t, e) => r({
+    2928: new Float32Array([t, e])
+  }),
+  depthMask: (r, t) => r({
+    2930: t
+  }),
+  frontFace: (r, t) => r({
+    2886: t
+  }),
+  lineWidth: (r, t) => r({
+    2849: t
+  }),
+  polygonOffset: (r, t, e) => r({
+    32824: t,
+    10752: e
+  }),
+  sampleCoverage: (r, t, e) => r({
+    32938: t,
+    32939: e
+  }),
+  scissor: (r, t, e, i, n) => r({
+    3088: new Int32Array([t, e, i, n])
+  }),
+  stencilMask: (r, t) => r({
+    2968: t,
+    36005: t
+  }),
+  stencilMaskSeparate: (r, t, e) => r({
+    [t === 1028 ? 2968 : 36005]: e
+  }),
+  stencilFunc: (r, t, e, i) => r({
+    2962: t,
+    2967: e,
+    2963: i,
+    34816: t,
+    36003: e,
+    36004: i
+  }),
+  stencilFuncSeparate: (r, t, e, i, n) => r({
+    [t === 1028 ? 2962 : 34816]: e,
+    [t === 1028 ? 2967 : 36003]: i,
+    [t === 1028 ? 2963 : 36004]: n
+  }),
+  stencilOp: (r, t, e, i) => r({
+    2964: t,
+    2965: e,
+    2966: i,
+    34817: t,
+    34818: e,
+    34819: i
+  }),
+  stencilOpSeparate: (r, t, e, i, n) => r({
+    [t === 1028 ? 2964 : 34817]: e,
+    [t === 1028 ? 2965 : 34818]: i,
+    [t === 1028 ? 2966 : 34819]: n
+  }),
+  viewport: (r, t, e, i, n) => r({
+    2978: [t, e, i, n]
+  })
+}, P = (r, t) => r.isEnabled(t), Te = {
+  3042: P,
+  2884: P,
+  2929: P,
+  3024: P,
+  32823: P,
+  32926: P,
+  32928: P,
+  3089: P,
+  2960: P,
+  35977: P
+}, wt = /* @__PURE__ */ new Set([
+  34016,
+  36388,
+  36387,
+  35983,
+  35368,
+  34965,
+  35739,
+  35738,
+  3074,
+  34853,
+  34854,
+  34855,
+  34856,
+  34857,
+  34858,
+  34859,
+  34860,
+  34861,
+  34862,
+  34863,
+  34864,
+  34865,
+  34866,
+  34867,
+  34868,
+  35097,
+  32873,
+  35869,
+  32874,
+  34068
+]);
+function W(r, t) {
+  if (St(t))
+    return;
+  const e = {};
+  for (const n in t) {
+    const s = Number(n), a = xt[n];
+    a && (typeof a == "string" ? e[a] = !0 : a(r, t[n], s));
+  }
+  const i = r.state && r.state.cache;
+  if (i)
+    for (const n in e) {
+      const s = yt[n];
+      s(r, t, i);
+    }
+}
+function Re(r, t = he) {
+  if (typeof t == "number") {
+    const n = t, s = Te[n];
+    return s ? s(r, n) : r.getParameter(n);
+  }
+  const e = Array.isArray(t) ? t : Object.keys(t), i = {};
+  for (const n of e) {
+    const s = Te[n];
+    i[n] = s ? s(r, Number(n)) : r.getParameter(Number(n));
+  }
+  return i;
+}
+function vt(r) {
+  W(r, he);
+}
+function St(r) {
+  for (const t in r)
+    return !1;
+  return !0;
+}
+function Tt(r, t) {
+  if (r === t)
+    return !0;
+  if (_e(r) && _e(t) && r.length === t.length) {
+    for (let e = 0; e < r.length; ++e)
+      if (r[e] !== t[e])
+        return !1;
+    return !0;
+  }
+  return !1;
+}
+function _e(r) {
+  return Array.isArray(r) || ArrayBuffer.isView(r);
+}
+class C {
+  constructor(t, e) {
+    o(this, "gl");
+    o(this, "program", null);
+    o(this, "stateStack", []);
+    o(this, "enable", !0);
+    o(this, "cache", null);
+    o(this, "log");
+    o(this, "initialized", !1);
+    this.gl = t, this.log = (e == null ? void 0 : e.log) || (() => {
+    }), this._updateCache = this._updateCache.bind(this), Object.seal(this);
+  }
+  static get(t) {
+    return t.state;
+  }
+  push(t = {}) {
+    this.stateStack.push({});
+  }
+  pop() {
+    const t = this.stateStack[this.stateStack.length - 1];
+    W(this.gl, t), this.stateStack.pop();
+  }
+  /**
+   * Initialize WebGL state caching on a context
+   * can be called multiple times to enable/disable
+   *
+   * @note After calling this function, context state will be cached
+   * .push() and .pop() will be available for saving,
+   * temporarily modifying, and then restoring state.
+   */
+  trackState(t, e) {
+    if (this.cache = e != null && e.copyState ? Re(t) : Object.assign({}, he), this.initialized)
+      throw new Error("WebGLStateTracker");
+    this.initialized = !0, this.gl.state = this, Pt(t);
+    for (const i in Se) {
+      const n = Se[i];
+      _t(t, i, n);
+    }
+    Pe(t, "getParameter"), Pe(t, "isEnabled");
+  }
+  /**
+  // interceptor for context set functions - update our cache and our stack
+  // values (Object) - the key values for this setter
+   * @param values
+   * @returns
+   */
+  _updateCache(t) {
+    let e = !1, i;
+    const n = this.stateStack.length > 0 ? this.stateStack[this.stateStack.length - 1] : null;
+    for (const s in t) {
+      const a = t[s], c = this.cache[s];
+      Tt(a, c) || (e = !0, i = c, n && !(s in n) && (n[s] = c), this.cache[s] = a);
+    }
+    return { valueChanged: e, oldValue: i };
+  }
+}
+function Pe(r, t) {
+  const e = r[t].bind(r);
+  r[t] = function(n) {
+    if (n === void 0 || wt.has(n))
+      return e(n);
+    const s = C.get(r);
+    return n in s.cache || (s.cache[n] = e(n)), s.enable ? (
+      // Call the getter the params so that it can e.g. serve from a cache
+      s.cache[n]
+    ) : (
+      // Optionally call the original function to do a "hard" query from the WebGL2RenderingContext
+      e(n)
+    );
+  }, Object.defineProperty(r[t], "name", {
+    value: `${t}-from-cache`,
+    configurable: !1
+  });
+}
+function _t(r, t, e) {
+  if (!r[t])
+    return;
+  const i = r[t].bind(r);
+  r[t] = function(...s) {
+    const a = C.get(r), { valueChanged: c, oldValue: l } = e(a._updateCache, ...s);
+    return c && i(...s), l;
+  }, Object.defineProperty(r[t], "name", {
+    value: `${t}-to-cache`,
+    configurable: !1
+  });
+}
+function Pt(r) {
+  const t = r.useProgram.bind(r);
+  r.useProgram = function(i) {
+    const n = C.get(r);
+    n.program !== i && (t(i), n.program = i);
+  };
+}
+function At(r, t, e) {
+  let i = "";
+  const n = {
+    preserveDrawingBuffer: !0,
+    // failIfMajorPerformanceCaveat: true,
+    ...e
+  };
+  let s = null;
+  if (s || (s = r.getContext("webgl2", n)), n.failIfMajorPerformanceCaveat && (i || (i = "Only software GPU is available. Set `failIfMajorPerformanceCaveat: false` to allow.")), !s && !e.failIfMajorPerformanceCaveat && (n.failIfMajorPerformanceCaveat = !1, s = r.getContext("webgl2", n), s.luma || (s.luma = {}), s.luma.softwareRenderer = !0), s || (s = r.getContext("webgl", {}), s && (s = null, i || (i = "Your browser only supports WebGL1"))), !s)
+    throw i || (i = "Your browser does not support WebGL"), new Error(`Failed to create WebGL context: ${i}`);
+  const { onContextLost: a, onContextRestored: c } = t;
+  return r.addEventListener("webglcontextlost", (l) => a(l), !1), r.addEventListener("webglcontextrestored", (l) => c(l), !1), s.luma || (s.luma = {}), s;
+}
+function M(r, t, e) {
+  return e[t] === void 0 && (e[t] = r.getExtension(t) || null), e[t];
+}
+function Et(r, t) {
+  const e = r.getParameter(7936), i = r.getParameter(7937);
+  M(r, "WEBGL_debug_renderer_info", t);
+  const n = t.WEBGL_debug_renderer_info, s = r.getParameter(n ? n.UNMASKED_VENDOR_WEBGL : 7936), a = r.getParameter(n ? n.UNMASKED_RENDERER_WEBGL : 7937), c = s || e, l = a || i, u = r.getParameter(7938), h = Ie(c, l), f = Lt(c, l), g = Bt(c, l);
+  return {
+    type: "webgl",
+    gpu: h,
+    gpuType: g,
+    gpuBackend: f,
+    vendor: c,
+    renderer: l,
+    version: u,
+    shadingLanguage: "glsl",
+    shadingLanguageVersion: 300
+  };
+}
+function Ie(r, t) {
+  return /NVIDIA/i.exec(r) || /NVIDIA/i.exec(t) ? "nvidia" : /INTEL/i.exec(r) || /INTEL/i.exec(t) ? "intel" : /Apple/i.exec(r) || /Apple/i.exec(t) ? "apple" : /AMD/i.exec(r) || /AMD/i.exec(t) || /ATI/i.exec(r) || /ATI/i.exec(t) ? "amd" : /SwiftShader/i.exec(r) || /SwiftShader/i.exec(t) ? "software" : "unknown";
+}
+function Lt(r, t) {
+  return /Metal/i.exec(r) || /Metal/i.exec(t) ? "metal" : /ANGLE/i.exec(r) || /ANGLE/i.exec(t) ? "opengl" : "unknown";
+}
+function Bt(r, t) {
+  if (/SwiftShader/i.exec(r) || /SwiftShader/i.exec(t))
+    return "cpu";
+  switch (Ie(r, t)) {
+    case "intel":
+      return "integrated";
+    case "software":
+      return "cpu";
+    case "unknown":
+      return "unknown";
+    default:
+      return "discrete";
+  }
+}
+function Oe(r) {
+  switch (r) {
+    case "uint8":
+      return 5121;
+    case "sint8":
+      return 5120;
+    case "unorm8":
+      return 5121;
+    case "snorm8":
+      return 5120;
+    case "uint16":
+      return 5123;
+    case "sint16":
+      return 5122;
+    case "unorm16":
+      return 5123;
+    case "snorm16":
+      return 5122;
+    case "uint32":
+      return 5125;
+    case "sint32":
+      return 5124;
+    // WebGPU does not support normalized 32 bit integer attributes
+    // case 'unorm32': return GL.UNSIGNED_INT;
+    // case 'snorm32': return GL.INT;
+    case "float16":
+      return 5131;
+    case "float32":
+      return 5126;
+  }
+  throw new Error(String(r));
+}
+const I = "WEBGL_compressed_texture_s3tc", O = "WEBGL_compressed_texture_s3tc_srgb", k = "EXT_texture_compression_rgtc", D = "EXT_texture_compression_bptc", Ct = "WEBGL_compressed_texture_etc", Ft = "WEBGL_compressed_texture_astc", kt = "WEBGL_compressed_texture_etc1", Dt = "WEBGL_compressed_texture_pvrtc", Gt = "WEBGL_compressed_texture_atc", Ae = "EXT_texture_norm16", Ee = "EXT_render_snorm", Mt = "EXT_color_buffer_float", fe = {
+  "float32-renderable-webgl": ["EXT_color_buffer_float"],
+  "float16-renderable-webgl": ["EXT_color_buffer_half_float"],
+  "rgb9e5ufloat-renderable-webgl": ["WEBGL_render_shared_exponent"],
+  "snorm8-renderable-webgl": [Ee],
+  "norm16-renderable-webgl": [Ae],
+  "snorm16-renderable-webgl": [Ae, Ee],
+  "float32-filterable": ["OES_texture_float_linear"],
+  "float16-filterable-webgl": ["OES_texture_half_float_linear"],
+  "texture-filterable-anisotropic-webgl": ["EXT_texture_filter_anisotropic"],
+  "texture-blend-float-webgl": ["EXT_float_blend"],
+  "texture-compression-bc": [I, O, k, D],
+  // 'texture-compression-bc3-srgb-webgl': [X_S3TC_SRGB],
+  // 'texture-compression-bc3-webgl': [X_S3TC],
+  "texture-compression-bc5-webgl": [k],
+  "texture-compression-bc7-webgl": [D],
+  "texture-compression-etc2": [Ct],
+  "texture-compression-astc": [Ft],
+  "texture-compression-etc1-webgl": [kt],
+  "texture-compression-pvrtc-webgl": [Dt],
+  "texture-compression-atc-webgl": [Gt]
+};
+function Wt(r) {
+  return r in fe;
+}
+function Rt(r, t, e) {
+  return (fe[t] || []).every((n) => M(r, n, e));
+}
+const de = {
+  // 8-bit formats
+  r8unorm: { gl: 33321, rb: !0 },
+  r8snorm: { gl: 36756 },
+  r8uint: { gl: 33330, rb: !0 },
+  r8sint: { gl: 33329, rb: !0 },
+  // 16-bit formats
+  rg8unorm: { gl: 33323, rb: !0 },
+  rg8snorm: { gl: 36757 },
+  rg8uint: { gl: 33336, rb: !0 },
+  rg8sint: { gl: 33335, rb: !0 },
+  r16uint: { gl: 33332, rb: !0 },
+  r16sint: { gl: 33331, rb: !0 },
+  r16float: { gl: 33325, rb: !0 },
+  r16unorm: { gl: 33322, rb: !0 },
+  r16snorm: { gl: 36760 },
+  // Packed 16-bit formats
+  "rgba4unorm-webgl": { gl: 32854, rb: !0 },
+  "rgb565unorm-webgl": { gl: 36194, rb: !0 },
+  "rgb5a1unorm-webgl": { gl: 32855, rb: !0 },
+  // 24-bit formats
+  "rgb8unorm-webgl": { gl: 32849 },
+  "rgb8snorm-webgl": { gl: 36758 },
+  // 32-bit formats
+  rgba8unorm: { gl: 32856 },
+  "rgba8unorm-srgb": { gl: 35907 },
+  rgba8snorm: { gl: 36759 },
+  rgba8uint: { gl: 36220 },
+  rgba8sint: { gl: 36238 },
+  // reverse colors, webgpu only
+  bgra8unorm: {},
+  "bgra8unorm-srgb": {},
+  rg16uint: { gl: 33338 },
+  rg16sint: { gl: 33337 },
+  rg16float: { gl: 33327, rb: !0 },
+  rg16unorm: { gl: 33324 },
+  rg16snorm: { gl: 36761 },
+  r32uint: { gl: 33334, rb: !0 },
+  r32sint: { gl: 33333, rb: !0 },
+  r32float: { gl: 33326 },
+  // Packed 32-bit formats
+  rgb9e5ufloat: { gl: 35901 },
+  // , filter: true},
+  rg11b10ufloat: { gl: 35898, rb: !0 },
+  rgb10a2unorm: { gl: 32857, rb: !0 },
+  rgb10a2uint: { gl: 36975, rb: !0 },
+  // 48-bit formats
+  "rgb16unorm-webgl": { gl: 32852 },
+  // rgb not renderable
+  "rgb16snorm-webgl": { gl: 36762 },
+  // rgb not renderable
+  // 64-bit formats
+  rg32uint: { gl: 33340, rb: !0 },
+  rg32sint: { gl: 33339, rb: !0 },
+  rg32float: { gl: 33328, rb: !0 },
+  rgba16uint: { gl: 36214, rb: !0 },
+  rgba16sint: { gl: 36232, rb: !0 },
+  rgba16float: { gl: 34842 },
+  rgba16unorm: { gl: 32859, rb: !0 },
+  rgba16snorm: { gl: 36763 },
+  // 96-bit formats (deprecated!)
+  "rgb32float-webgl": { gl: 34837, x: Mt, dataFormat: 6407, types: [5126] },
+  // 128-bit formats
+  rgba32uint: { gl: 36208, rb: !0 },
+  rgba32sint: { gl: 36226, rb: !0 },
+  rgba32float: { gl: 34836, rb: !0 },
+  // Depth and stencil formats
+  stencil8: { gl: 36168, rb: !0 },
+  // 8 stencil bits
+  depth16unorm: { gl: 33189, dataFormat: 6402, types: [5123], rb: !0 },
+  // 16 depth bits
+  depth24plus: { gl: 33190, dataFormat: 6402, types: [5125] },
+  depth32float: { gl: 36012, dataFormat: 6402, types: [5126], rb: !0 },
+  // The depth component of the "depth24plus" and "depth24plus-stencil8" formats may be implemented as either a 24-bit depth value or a "depth32float" value.
+  "depth24plus-stencil8": { gl: 35056, rb: !0, depthTexture: !0, dataFormat: 34041, types: [34042] },
+  // "depth32float-stencil8" feature - TODO below is render buffer only?
+  "depth32float-stencil8": { gl: 36013, dataFormat: 34041, types: [36269], rb: !0 },
+  // BC compressed formats: check device.features.has("texture-compression-bc");
+  "bc1-rgb-unorm-webgl": { gl: 33776, x: I },
+  "bc1-rgb-unorm-srgb-webgl": { gl: 35916, x: O },
+  "bc1-rgba-unorm": { gl: 33777, x: I },
+  "bc1-rgba-unorm-srgb": { gl: 35916, x: O },
+  "bc2-rgba-unorm": { gl: 33778, x: I },
+  "bc2-rgba-unorm-srgb": { gl: 35918, x: O },
+  "bc3-rgba-unorm": { gl: 33779, x: I },
+  "bc3-rgba-unorm-srgb": { gl: 35919, x: O },
+  "bc4-r-unorm": { gl: 36283, x: k },
+  "bc4-r-snorm": { gl: 36284, x: k },
+  "bc5-rg-unorm": { gl: 36285, x: k },
+  "bc5-rg-snorm": { gl: 36286, x: k },
+  "bc6h-rgb-ufloat": { gl: 36495, x: D },
+  "bc6h-rgb-float": { gl: 36494, x: D },
+  "bc7-rgba-unorm": { gl: 36492, x: D },
+  "bc7-rgba-unorm-srgb": { gl: 36493, x: D },
+  // WEBGL_compressed_texture_etc: device.features.has("texture-compression-etc2")
+  // Note: Supposedly guaranteed availability compressed formats in WebGL2, but through CPU decompression
+  "etc2-rgb8unorm": { gl: 37492 },
+  "etc2-rgb8unorm-srgb": { gl: 37494 },
+  "etc2-rgb8a1unorm": { gl: 37496 },
+  "etc2-rgb8a1unorm-srgb": { gl: 37497 },
+  "etc2-rgba8unorm": { gl: 37493 },
+  "etc2-rgba8unorm-srgb": { gl: 37495 },
+  "eac-r11unorm": { gl: 37488 },
+  "eac-r11snorm": { gl: 37489 },
+  "eac-rg11unorm": { gl: 37490 },
+  "eac-rg11snorm": { gl: 37491 },
+  // X_ASTC compressed formats: device.features.has("texture-compression-astc")
+  "astc-4x4-unorm": { gl: 37808 },
+  "astc-4x4-unorm-srgb": { gl: 37840 },
+  "astc-5x4-unorm": { gl: 37809 },
+  "astc-5x4-unorm-srgb": { gl: 37841 },
+  "astc-5x5-unorm": { gl: 37810 },
+  "astc-5x5-unorm-srgb": { gl: 37842 },
+  "astc-6x5-unorm": { gl: 37811 },
+  "astc-6x5-unorm-srgb": { gl: 37843 },
+  "astc-6x6-unorm": { gl: 37812 },
+  "astc-6x6-unorm-srgb": { gl: 37844 },
+  "astc-8x5-unorm": { gl: 37813 },
+  "astc-8x5-unorm-srgb": { gl: 37845 },
+  "astc-8x6-unorm": { gl: 37814 },
+  "astc-8x6-unorm-srgb": { gl: 37846 },
+  "astc-8x8-unorm": { gl: 37815 },
+  "astc-8x8-unorm-srgb": { gl: 37847 },
+  "astc-10x5-unorm": { gl: 37819 },
+  "astc-10x5-unorm-srgb": { gl: 37851 },
+  "astc-10x6-unorm": { gl: 37817 },
+  "astc-10x6-unorm-srgb": { gl: 37849 },
+  "astc-10x8-unorm": { gl: 37818 },
+  "astc-10x8-unorm-srgb": { gl: 37850 },
+  "astc-10x10-unorm": { gl: 37819 },
+  "astc-10x10-unorm-srgb": { gl: 37851 },
+  "astc-12x10-unorm": { gl: 37820 },
+  "astc-12x10-unorm-srgb": { gl: 37852 },
+  "astc-12x12-unorm": { gl: 37821 },
+  "astc-12x12-unorm-srgb": { gl: 37853 },
+  // WEBGL_compressed_texture_pvrtc
+  "pvrtc-rgb4unorm-webgl": { gl: 35840 },
+  "pvrtc-rgba4unorm-webgl": { gl: 35842 },
+  "pvrtc-rbg2unorm-webgl": { gl: 35841 },
+  "pvrtc-rgba2unorm-webgl": { gl: 35843 },
+  // WEBGL_compressed_texture_etc1
+  "etc1-rbg-unorm-webgl": { gl: 36196 },
+  // WEBGL_compressed_texture_atc
+  "atc-rgb-unorm-webgl": { gl: 35986 },
+  "atc-rgba-unorm-webgl": { gl: 35986 },
+  "atc-rgbai-unorm-webgl": { gl: 34798 }
+};
+function It(r, t, e) {
+  let i = t.create;
+  const n = de[t.format];
+  return (n == null ? void 0 : n.gl) === void 0 && (i = !1), n != null && n.x && (i = i && !!M(r, n.x, e)), {
+    format: t.format,
+    // @ts-ignore
+    create: i && t.create,
+    // @ts-ignore
+    render: i && t.render,
+    // @ts-ignore
+    filter: i && t.filter,
+    // @ts-ignore
+    blend: i && t.blend,
+    // @ts-ignore
+    store: i && t.store
+  };
+}
+function $e(r) {
+  var n;
+  const t = de[r], e = zt(r), i = We.getInfo(r);
+  return i.compressed && (t.dataFormat = e), {
+    internalFormat: e,
+    format: (t == null ? void 0 : t.dataFormat) || $t(i.channels, i.integer, i.normalized, e),
+    // depth formats don't have a type
+    type: i.dataType ? Oe(i.dataType) : ((n = t == null ? void 0 : t.types) == null ? void 0 : n[0]) || 5121,
+    compressed: i.compressed || !1
+  };
+}
+function Ot(r) {
+  switch (We.getInfo(r).attachment) {
+    case "depth":
+      return 36096;
+    case "stencil":
+      return 36128;
+    case "depth-stencil":
+      return 33306;
+    default:
+      throw new Error(`Not a depth stencil format: ${r}`);
+  }
+}
+function $t(r, t, e, i) {
+  if (i === 6408 || i === 6407)
+    return i;
+  switch (r) {
+    case "r":
+      return t && !e ? 36244 : 6403;
+    case "rg":
+      return t && !e ? 33320 : 33319;
+    case "rgb":
+      return t && !e ? 36248 : 6407;
+    case "rgba":
+      return t && !e ? 36249 : 6408;
+    case "bgra":
+      throw new Error("bgra pixels not supported by WebGL");
+    default:
+      return 6408;
+  }
+}
+function zt(r) {
+  const t = de[r], e = t == null ? void 0 : t.gl;
+  if (e === void 0)
+    throw new Error(`Unsupported texture format ${r}`);
+  return e;
+}
+const Le = {
+  // optional WebGPU features
+  "depth-clip-control": "EXT_depth_clamp",
+  // TODO these seem subtly different
+  // 'timestamp-query' // GPUQueryType "timestamp-query"
+  // "indirect-first-instance"
+  // Textures are handled by getTextureFeatures()
+  // 'depth32float-stencil8' // GPUTextureFormat 'depth32float-stencil8'
+  // optional WebGL features
+  "timer-query-webgl": "EXT_disjoint_timer_query_webgl2",
+  "compilation-status-async-webgl": "KHR_parallel_shader_compile",
+  "polygon-mode-webgl": "WEBGL_polygon_mode",
+  "provoking-vertex-webgl": "WEBGL_provoking_vertex",
+  "shader-clip-cull-distance-webgl": "WEBGL_clip_cull_distance",
+  "shader-noperspective-interpolation-webgl": "NV_shader_noperspective_interpolation",
+  "shader-conservative-depth-webgl": "EXT_conservative_depth"
+  // Textures are handled by getTextureFeatures()
+};
+class Vt extends et {
+  constructor(e, i, n) {
+    super([], n);
+    o(this, "gl");
+    o(this, "extensions");
+    o(this, "testedFeatures", /* @__PURE__ */ new Set());
+    this.gl = e, this.extensions = i, M(e, "EXT_color_buffer_float", i);
+  }
+  *[Symbol.iterator]() {
+    const e = this.getFeatures();
+    for (const i of e)
+      this.has(i) && (yield i);
+    return [];
+  }
+  has(e) {
+    var i;
+    return (i = this.disabledFeatures) != null && i[e] ? !1 : (this.testedFeatures.has(e) || (this.testedFeatures.add(e), Wt(e) && Rt(this.gl, e, this.extensions) && this.features.add(e), this.getWebGLFeature(e) && this.features.add(e)), this.features.has(e));
+  }
+  // FOR DEVICE
+  initializeFeatures() {
+    const e = this.getFeatures().filter((i) => i !== "polygon-mode-webgl");
+    for (const i of e)
+      this.has(i);
+  }
+  // IMPLEMENTATION
+  getFeatures() {
+    return [...Object.keys(Le), ...Object.keys(fe)];
+  }
+  /** Extract all WebGL features */
+  getWebGLFeature(e) {
+    const i = Le[e];
+    return typeof i == "string" ? !!M(this.gl, i, this.extensions) : !!i;
+  }
+}
+class Ut extends tt {
+  constructor(e) {
+    super();
+    // WebGL does not support compute shaders
+    // PRIVATE
+    o(this, "gl");
+    o(this, "limits", {});
+    this.gl = e;
+  }
+  get maxTextureDimension1D() {
+    return 0;
+  }
+  // WebGL does not support 1D textures
+  get maxTextureDimension2D() {
+    return this.getParameter(3379);
+  }
+  get maxTextureDimension3D() {
+    return this.getParameter(32883);
+  }
+  get maxTextureArrayLayers() {
+    return this.getParameter(35071);
+  }
+  get maxBindGroups() {
+    return 0;
+  }
+  get maxDynamicUniformBuffersPerPipelineLayout() {
+    return 0;
+  }
+  // TBD
+  get maxDynamicStorageBuffersPerPipelineLayout() {
+    return 0;
+  }
+  // TBD
+  get maxSampledTexturesPerShaderStage() {
+    return this.getParameter(35660);
+  }
+  // ) TBD
+  get maxSamplersPerShaderStage() {
+    return this.getParameter(35661);
+  }
+  get maxStorageBuffersPerShaderStage() {
+    return 0;
+  }
+  // TBD
+  get maxStorageTexturesPerShaderStage() {
+    return 0;
+  }
+  // TBD
+  get maxUniformBuffersPerShaderStage() {
+    return this.getParameter(35375);
+  }
+  get maxUniformBufferBindingSize() {
+    return this.getParameter(35376);
+  }
+  get maxStorageBufferBindingSize() {
+    return 0;
+  }
+  get minUniformBufferOffsetAlignment() {
+    return this.getParameter(35380);
+  }
+  get minStorageBufferOffsetAlignment() {
+    return 0;
+  }
+  get maxVertexBuffers() {
+    return 16;
+  }
+  // WebGL 2 supports 16 buffers, see https://github.com/gpuweb/gpuweb/issues/4284
+  get maxVertexAttributes() {
+    return this.getParameter(34921);
+  }
+  get maxVertexBufferArrayStride() {
+    return 2048;
+  }
+  // TBD, this is just the default value from WebGPU
+  get maxInterStageShaderVariables() {
+    return this.getParameter(35659);
+  }
+  get maxComputeWorkgroupStorageSize() {
+    return 0;
+  }
+  // WebGL does not support compute shaders
+  get maxComputeInvocationsPerWorkgroup() {
+    return 0;
+  }
+  // WebGL does not support compute shaders
+  get maxComputeWorkgroupSizeX() {
+    return 0;
+  }
+  // WebGL does not support compute shaders
+  get maxComputeWorkgroupSizeY() {
+    return 0;
+  }
+  // WebGL does not support compute shaders
+  get maxComputeWorkgroupSizeZ() {
+    return 0;
+  }
+  // WebGL does not support compute shaders
+  get maxComputeWorkgroupsPerDimension() {
+    return 0;
+  }
+  getParameter(e) {
+    return this.limits[e] === void 0 && (this.limits[e] = this.gl.getParameter(e)), this.limits[e] || 0;
+  }
+}
+class $ extends H {
+  constructor(e, i) {
+    super(e, i);
+    o(this, "device");
+    o(this, "gl");
+    o(this, "handle");
+    o(this, "colorAttachments", []);
+    o(this, "depthStencilAttachment", null);
+    const n = i.handle === null;
+    this.device = e, this.gl = e.gl, this.handle = this.props.handle || n ? this.props.handle : this.gl.createFramebuffer(), n || (e._setWebGLDebugMetadata(this.handle, this, { spector: this.props }), this.autoCreateAttachmentTextures(), this.updateAttachments());
+  }
+  /** destroys any auto created resources etc. */
+  destroy() {
+    super.destroy(), !this.destroyed && this.handle !== null && this.gl.deleteFramebuffer(this.handle);
+  }
+  updateAttachments() {
+    const e = this.gl.bindFramebuffer(36160, this.handle);
+    for (let i = 0; i < this.colorAttachments.length; ++i) {
+      const n = this.colorAttachments[i];
+      if (n) {
+        const s = 36064 + i;
+        this._attachTextureView(s, n);
+      }
+    }
+    if (this.depthStencilAttachment) {
+      const i = Ot(this.depthStencilAttachment.props.format);
+      this._attachTextureView(i, this.depthStencilAttachment);
+    }
+    if (this.device.props.debug) {
+      const i = this.gl.checkFramebufferStatus(36160);
+      if (i !== 36053)
+        throw new Error(`Framebuffer ${Xt(i)}`);
+    }
+    this.gl.bindFramebuffer(36160, e);
+  }
+  // PRIVATE
+  /** In WebGL we must use renderbuffers for depth/stencil attachments (unless we have extensions) */
+  // protected override createDepthStencilTexture(format: TextureFormat): Texture {
+  //   // return new WEBGLRenderbuffer(this.device, {
+  //   return new WEBGLTexture(this.device, {
+  //     id: `${this.id}-depth-stencil`,
+  //     format,
+  //     width: this.width,
+  //     height: this.height,
+  //     mipmaps: false
+  //   });
+  // }
+  /**
+   * @param attachment
+   * @param texture
+   * @param layer = 0 - index into WEBGLTextureArray and Texture3D or face for `TextureCubeMap`
+   * @param level = 0 - mipmapLevel
+   */
+  _attachTextureView(e, i) {
+    const { gl: n } = this.device, { texture: s } = i, a = i.props.baseMipLevel, c = i.props.baseArrayLayer;
+    switch (n.bindTexture(s.glTarget, s.handle), s.glTarget) {
+      case 35866:
+      case 32879:
+        n.framebufferTextureLayer(36160, e, s.handle, a, c);
+        break;
+      case 34067:
+        const l = Nt(c);
+        n.framebufferTexture2D(36160, e, l, s.handle, a);
+        break;
+      case 3553:
+        n.framebufferTexture2D(36160, e, 3553, s.handle, a);
+        break;
+      default:
+        throw new Error("Illegal texture type");
+    }
+    n.bindTexture(s.glTarget, null);
+  }
+}
+function Nt(r) {
+  return r < 34069 ? r + 34069 : r;
+}
+function Xt(r) {
+  switch (r) {
+    case 36053:
+      return "success";
+    case 36054:
+      return "Mismatched attachments";
+    case 36055:
+      return "No attachments";
+    case 36057:
+      return "Height/width mismatch";
+    case 36061:
+      return "Unsupported or split attachments";
+    // WebGL2
+    case 36182:
+      return "Samples mismatch";
+    // OVR_multiview2 extension
+    // case GL.FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR: return 'baseViewIndex mismatch';
+    default:
+      return `${r}`;
+  }
+}
+class Ht extends X {
+  constructor(e, i) {
+    super(i);
+    o(this, "device");
+    o(this, "handle", null);
+    o(this, "_framebuffer", null);
+    this.device = e, this._setAutoCreatedCanvasId(`${this.device.id}-canvas`), this._updateDevice();
+  }
+  get [Symbol.toStringTag]() {
+    return "WebGLCanvasContext";
+  }
+  getCurrentFramebuffer() {
+    return this._framebuffer = this._framebuffer || new $(this.device, { handle: null }), this._framebuffer;
+  }
+  // IMPLEMENTATION OF ABSTRACT METHODS
+  _updateDevice() {
+  }
+}
+const ee = {};
+function qt(r = "id") {
+  ee[r] = ee[r] || 1;
+  const t = ee[r]++;
+  return `${r}-${t}`;
+}
+class z extends B {
+  constructor(e, i = {}) {
+    super(e, i);
+    o(this, "device");
+    o(this, "gl");
+    o(this, "handle");
+    /** Target in OpenGL defines the type of buffer */
+    o(this, "glTarget");
+    /** Usage is a hint on how frequently the buffer will be updates */
+    o(this, "glUsage");
+    /** Index type is needed when issuing draw calls, so we pre-compute it */
+    o(this, "glIndexType", 5123);
+    /** Number of bytes allocated on the GPU for this buffer */
+    o(this, "byteLength", 0);
+    /** Number of bytes used */
+    o(this, "bytesUsed", 0);
+    this.device = e, this.gl = this.device.gl;
+    const n = typeof i == "object" ? i.handle : void 0;
+    this.handle = n || this.gl.createBuffer(), e._setWebGLDebugMetadata(this.handle, this, {
+      spector: { ...this.props, data: typeof this.props.data }
+    }), this.glTarget = jt(this.props.usage), this.glUsage = Qt(this.props.usage), this.glIndexType = this.props.indexType === "uint32" ? 5125 : 5123, i.data ? this._initWithData(i.data, i.byteOffset, i.byteLength) : this._initWithByteLength(i.byteLength || 0);
+  }
+  destroy() {
+    !this.destroyed && this.handle && (this.removeStats(), this.trackDeallocatedMemory(), this.gl.deleteBuffer(this.handle), this.destroyed = !0, this.handle = null);
+  }
+  /** Allocate a new buffer and initialize to contents of typed array */
+  _initWithData(e, i = 0, n = e.byteLength + i) {
+    const s = this.glTarget;
+    this.gl.bindBuffer(s, this.handle), this.gl.bufferData(s, n, this.glUsage), this.gl.bufferSubData(s, i, e), this.gl.bindBuffer(s, null), this.bytesUsed = n, this.byteLength = n, this._setDebugData(e, i, n), this.trackAllocatedMemory(n);
+  }
+  // Allocate a GPU buffer of specified size.
+  _initWithByteLength(e) {
+    let i = e;
+    e === 0 && (i = new Float32Array(0));
+    const n = this.glTarget;
+    return this.gl.bindBuffer(n, this.handle), this.gl.bufferData(n, i, this.glUsage), this.gl.bindBuffer(n, null), this.bytesUsed = e, this.byteLength = e, this._setDebugData(null, 0, e), this.trackAllocatedMemory(e), this;
+  }
+  write(e, i = 0) {
+    const n = ArrayBuffer.isView(e) ? e : new Uint8Array(e), s = 36663;
+    this.gl.bindBuffer(s, this.handle), this.gl.bufferSubData(s, i, n), this.gl.bindBuffer(s, null), this._setDebugData(e, i, e.byteLength);
+  }
+  async mapAndWriteAsync(e, i = 0, n = this.byteLength - i) {
+    const s = new ArrayBuffer(n);
+    await e(s, "copied"), this.write(s, i);
+  }
+  async readAsync(e = 0, i) {
+    return this.readSyncWebGL(e, i);
+  }
+  async mapAndReadAsync(e, i = 0, n) {
+    const s = await this.readAsync(i, n);
+    return await e(s.buffer, "copied");
+  }
+  readSyncWebGL(e = 0, i) {
+    i = i ?? this.byteLength - e;
+    const n = new Uint8Array(i), s = 0;
+    return this.gl.bindBuffer(36662, this.handle), this.gl.getBufferSubData(36662, e, n, s, i), this.gl.bindBuffer(36662, null), this._setDebugData(n, e, i), n;
+  }
+}
+function jt(r) {
+  return r & B.INDEX ? 34963 : r & B.VERTEX ? 34962 : r & B.UNIFORM ? 35345 : 34962;
+}
+function Qt(r) {
+  return r & B.INDEX || r & B.VERTEX ? 35044 : r & B.UNIFORM ? 35048 : 35044;
+}
+function Yt(r) {
+  const t = r.split(/\r?\n/), e = [];
+  for (const i of t) {
+    if (i.length <= 1)
+      continue;
+    const n = i.split(":");
+    if (n.length === 2) {
+      const [f, g] = n;
+      e.push({
+        message: g.trim(),
+        type: Be(f),
+        lineNum: 0,
+        linePos: 0
+      });
+      continue;
+    }
+    const [s, a, c, ...l] = n;
+    let u = parseInt(c, 10);
+    isNaN(u) && (u = 0);
+    let h = parseInt(a, 10);
+    isNaN(h) && (h = 0), e.push({
+      message: l.join(":").trim(),
+      type: Be(s),
+      lineNum: u,
+      linePos: h
+      // TODO
+    });
+  }
+  return e;
+}
+function Be(r) {
+  const t = ["warning", "error", "info"], e = r.toLowerCase();
+  return t.includes(e) ? e : "info";
+}
+class Kt extends rt {
+  constructor(e, i) {
+    super(e, i);
+    o(this, "device");
+    o(this, "handle");
+    switch (this.device = e, this.props.stage) {
+      case "vertex":
+        this.handle = this.props.handle || this.device.gl.createShader(35633);
+        break;
+      case "fragment":
+        this.handle = this.props.handle || this.device.gl.createShader(35632);
+        break;
+      default:
+        throw new Error(this.props.stage);
+    }
+    e._setWebGLDebugMetadata(this.handle, this, { spector: this.props }), this._compile(this.source);
+  }
+  destroy() {
+    this.handle && (this.removeStats(), this.device.gl.deleteShader(this.handle), this.destroyed = !0, this.handle.destroyed = !0);
+  }
+  get asyncCompilationStatus() {
+    return this._waitForCompilationComplete().then(() => (this._getCompilationStatus(), this.compilationStatus));
+  }
+  async getCompilationInfo() {
+    return await this._waitForCompilationComplete(), this.getCompilationInfoSync();
+  }
+  getCompilationInfoSync() {
+    const e = this.device.gl.getShaderInfoLog(this.handle);
+    return e ? Yt(e) : [];
+  }
+  getTranslatedSource() {
+    const i = this.device.getExtension("WEBGL_debug_shaders").WEBGL_debug_shaders;
+    return (i == null ? void 0 : i.getTranslatedShaderSource(this.handle)) || null;
+  }
+  // PRIVATE METHODS
+  /** Compile a shader and get compilation status */
+  async _compile(e) {
+    e = e.startsWith("#version ") ? e : `#version 300 es
+${e}`;
+    const { gl: i } = this.device;
+    if (i.shaderSource(this.handle, e), i.compileShader(this.handle), !this.device.props.debug) {
+      this.compilationStatus = "pending";
+      return;
+    }
+    if (!this.device.features.has("compilation-status-async-webgl")) {
+      if (this._getCompilationStatus(), this.debugShader(), this.compilationStatus === "error")
+        throw new Error(`GLSL compilation errors in ${this.props.stage} shader ${this.props.id}`);
+      return;
+    }
+    b.once(1, "Shader compilation is asynchronous")(), await this._waitForCompilationComplete(), b.info(2, `Shader ${this.id} - async compilation complete: ${this.compilationStatus}`)(), this._getCompilationStatus(), this.debugShader();
+  }
+  /** Use KHR_parallel_shader_compile extension if available */
+  async _waitForCompilationComplete() {
+    const e = async (s) => await new Promise((a) => setTimeout(a, s));
+    if (!this.device.features.has("compilation-status-async-webgl")) {
+      await e(10);
+      return;
+    }
+    const { gl: n } = this.device;
+    for (; ; ) {
+      if (n.getShaderParameter(this.handle, 37297))
+        return;
+      await e(10);
+    }
+  }
+  /**
+   * Get the shader compilation status
+   * TODO - Load log even when no error reported, to catch warnings?
+   * https://gamedev.stackexchange.com/questions/30429/how-to-detect-glsl-warnings
+   */
+  _getCompilationStatus() {
+    this.compilationStatus = this.device.gl.getShaderParameter(this.handle, 35713) ? "success" : "error";
+  }
+}
+function Zt(r, t, e, i) {
+  if (rr(t))
+    return i(r);
+  const n = r;
+  n.pushState();
+  try {
+    return Jt(r, t), W(n.gl, e), i(r);
+  } finally {
+    n.popState();
+  }
+}
+function Jt(r, t) {
+  const e = r, { gl: i } = e;
+  if (t.cullMode)
+    switch (t.cullMode) {
+      case "none":
+        i.disable(2884);
+        break;
+      case "front":
+        i.enable(2884), i.cullFace(1028);
+        break;
+      case "back":
+        i.enable(2884), i.cullFace(1029);
+        break;
+    }
+  if (t.frontFace && i.frontFace(F("frontFace", t.frontFace, {
+    ccw: 2305,
+    cw: 2304
+  })), t.unclippedDepth && r.features.has("depth-clip-control") && i.enable(34383), t.depthBias !== void 0 && (i.enable(32823), i.polygonOffset(t.depthBias, t.depthBiasSlopeScale || 0)), t.provokingVertex && r.features.has("provoking-vertex-webgl")) {
+    const s = e.getExtension("WEBGL_provoking_vertex").WEBGL_provoking_vertex, a = F("provokingVertex", t.provokingVertex, {
+      first: 36429,
+      last: 36430
+    });
+    s == null || s.provokingVertexWEBGL(a);
+  }
+  if ((t.polygonMode || t.polygonOffsetLine) && r.features.has("polygon-mode-webgl")) {
+    if (t.polygonMode) {
+      const s = e.getExtension("WEBGL_polygon_mode").WEBGL_polygon_mode, a = F("polygonMode", t.polygonMode, {
+        fill: 6914,
+        line: 6913
+      });
+      s == null || s.polygonModeWEBGL(1028, a), s == null || s.polygonModeWEBGL(1029, a);
+    }
+    t.polygonOffsetLine && i.enable(10754);
+  }
+  if (r.features.has("shader-clip-cull-distance-webgl") && (t.clipDistance0 && i.enable(12288), t.clipDistance1 && i.enable(12289), t.clipDistance2 && i.enable(12290), t.clipDistance3 && i.enable(12291), t.clipDistance4 && i.enable(12292), t.clipDistance5 && i.enable(12293), t.clipDistance6 && i.enable(12294), t.clipDistance7 && i.enable(12295)), t.depthWriteEnabled !== void 0 && i.depthMask(tr("depthWriteEnabled", t.depthWriteEnabled)), t.depthCompare && (t.depthCompare !== "always" ? i.enable(2929) : i.disable(2929), i.depthFunc(le("depthCompare", t.depthCompare))), t.stencilWriteMask) {
+    const n = t.stencilWriteMask;
+    i.stencilMaskSeparate(1028, n), i.stencilMaskSeparate(1029, n);
+  }
+  if (t.stencilReadMask && b.warn("stencilReadMask not supported under WebGL"), t.stencilCompare) {
+    const n = t.stencilReadMask || 4294967295, s = le("depthCompare", t.stencilCompare);
+    t.stencilCompare !== "always" ? i.enable(2960) : i.disable(2960), i.stencilFuncSeparate(1028, s, 0, n), i.stencilFuncSeparate(1029, s, 0, n);
+  }
+  if (t.stencilPassOperation && t.stencilFailOperation && t.stencilDepthFailOperation) {
+    const n = te("stencilPassOperation", t.stencilPassOperation), s = te("stencilFailOperation", t.stencilFailOperation), a = te("stencilDepthFailOperation", t.stencilDepthFailOperation);
+    i.stencilOpSeparate(1028, s, a, n), i.stencilOpSeparate(1029, s, a, n);
+  }
+  switch (t.blend) {
+    case !0:
+      i.enable(3042);
+      break;
+    case !1:
+      i.disable(3042);
+      break;
+  }
+  if (t.blendColorOperation || t.blendAlphaOperation) {
+    const n = Ce("blendColorOperation", t.blendColorOperation || "add"), s = Ce("blendAlphaOperation", t.blendAlphaOperation || "add");
+    i.blendEquationSeparate(n, s);
+    const a = N("blendColorSrcFactor", t.blendColorSrcFactor || "one"), c = N("blendColorDstFactor", t.blendColorDstFactor || "zero"), l = N("blendAlphaSrcFactor", t.blendAlphaSrcFactor || "one"), u = N("blendAlphaDstFactor", t.blendAlphaDstFactor || "zero");
+    i.blendFuncSeparate(a, c, l, u);
+  }
+}
+function le(r, t) {
+  return F(r, t, {
+    never: 512,
+    less: 513,
+    equal: 514,
+    "less-equal": 515,
+    greater: 516,
+    "not-equal": 517,
+    "greater-equal": 518,
+    always: 519
+  });
+}
+function te(r, t) {
+  return F(r, t, {
+    keep: 7680,
+    zero: 0,
+    replace: 7681,
+    invert: 5386,
+    "increment-clamp": 7682,
+    "decrement-clamp": 7683,
+    "increment-wrap": 34055,
+    "decrement-wrap": 34056
+  });
+}
+function Ce(r, t) {
+  return F(r, t, {
+    add: 32774,
+    subtract: 32778,
+    "reverse-subtract": 32779,
+    min: 32775,
+    max: 32776
+  });
+}
+function N(r, t, e = "color") {
+  return F(r, t, {
+    one: 1,
+    zero: 0,
+    src: 768,
+    "one-minus-src": 769,
+    dst: 774,
+    "one-minus-dst": 775,
+    "src-alpha": 770,
+    "one-minus-src-alpha": 771,
+    "dst-alpha": 772,
+    "one-minus-dst-alpha": 773,
+    "src-alpha-saturated": 776,
+    constant: e === "color" ? 32769 : 32771,
+    "one-minus-constant": e === "color" ? 32770 : 32772,
+    // 'constant-alpha': GL.CONSTANT_ALPHA,
+    // 'one-minus-constant-alpha': GL.ONE_MINUS_CONSTANT_ALPHA,
+    // TODO not supported in WebGL2
+    src1: 768,
+    "one-minus-src1": 769,
+    "src1-alpha": 770,
+    "one-minus-src1-alpha": 771
+  });
+}
+function er(r, t) {
+  return `Illegal parameter ${t} for ${r}`;
+}
+function F(r, t, e) {
+  if (!(t in e))
+    throw new Error(er(r, t));
+  return e[t];
+}
+function tr(r, t) {
+  return t;
+}
+function rr(r) {
+  let t = !0;
+  for (const e in r) {
+    t = !1;
+    break;
+  }
+  return t;
+}
+function ze(r) {
+  const t = {};
+  return r.addressModeU && (t[10242] = re(r.addressModeU)), r.addressModeV && (t[10243] = re(r.addressModeV)), r.addressModeW && (t[32882] = re(r.addressModeW)), r.magFilter && (t[10240] = ue(r.magFilter)), (r.minFilter || r.mipmapFilter) && (t[10241] = ir(r.minFilter || "linear", r.mipmapFilter)), r.lodMinClamp !== void 0 && (t[33082] = r.lodMinClamp), r.lodMaxClamp !== void 0 && (t[33083] = r.lodMaxClamp), r.type === "comparison-sampler" && (t[34892] = 34894), r.compare && (t[34893] = le("compare", r.compare)), r.maxAnisotropy && (t[34046] = r.maxAnisotropy), t;
+}
+function re(r) {
+  switch (r) {
+    case "clamp-to-edge":
+      return 33071;
+    case "repeat":
+      return 10497;
+    case "mirror-repeat":
+      return 33648;
+  }
+}
+function ue(r) {
+  switch (r) {
+    case "nearest":
+      return 9728;
+    case "linear":
+      return 9729;
+  }
+}
+function ir(r, t = "none") {
+  if (!t)
+    return ue(r);
+  switch (t) {
+    case "none":
+      return ue(r);
+    case "nearest":
+      switch (r) {
+        case "nearest":
+          return 9984;
+        case "linear":
+          return 9985;
+      }
+      break;
+    case "linear":
+      switch (r) {
+        case "nearest":
+          return 9986;
+        case "linear":
+          return 9987;
+      }
+  }
+}
+class nr extends it {
+  constructor(e, i) {
+    super(e, i);
+    o(this, "device");
+    o(this, "handle");
+    o(this, "parameters");
+    this.device = e, this.parameters = ze(i), this.handle = i.handle || this.device.gl.createSampler(), this._setSamplerParameters(this.parameters);
+  }
+  destroy() {
+    this.handle && (this.device.gl.deleteSampler(this.handle), this.handle = void 0);
+  }
+  toString() {
+    return `Sampler(${this.id},${JSON.stringify(this.props)})`;
+  }
+  /** Set sampler parameters on the sampler */
+  _setSamplerParameters(e) {
+    for (const [i, n] of Object.entries(e)) {
+      const s = Number(i);
+      switch (s) {
+        case 33082:
+        case 33083:
+          this.device.gl.samplerParameterf(this.handle, s, n);
+          break;
+        default:
+          this.device.gl.samplerParameteri(this.handle, s, n);
+          break;
+      }
+    }
+  }
+}
+function U(r, t, e) {
+  if (sr(t))
+    return e(r);
+  const { nocatch: i = !0 } = t, n = C.get(r);
+  n.push(), W(r, t);
+  let s;
+  if (i)
+    s = e(r), n.pop();
+  else
+    try {
+      s = e(r);
+    } finally {
+      n.pop();
+    }
+  return s;
+}
+function sr(r) {
+  for (const t in r)
+    return !1;
+  return !0;
+}
+class G extends nt {
+  constructor(e, i) {
+    super(e, { ...L.defaultProps, ...i });
+    o(this, "device");
+    o(this, "gl");
+    o(this, "handle");
+    // Does not have a WebGL representation
+    o(this, "texture");
+    this.device = e, this.gl = this.device.gl, this.handle = null, this.texture = i.texture;
+  }
+}
+class V extends L {
+  constructor(e, i) {
+    super(e, i);
+    // readonly MAX_ATTRIBUTES: number;
+    o(this, "device");
+    o(this, "gl");
+    o(this, "handle");
+    // @ts-ignore TODO - currently unused in WebGL. Create dummy sampler?
+    o(this, "sampler");
+    o(this, "view");
+    /**
+     * The WebGL target corresponding to the texture type
+     * @note `target` cannot be modified by bind:
+     * textures are special because when you first bind them to a target,
+     * When you first bind a texture as a GL_TEXTURE_2D, you are saying that this texture is a 2D texture.
+     * And it will always be a 2D texture; this state cannot be changed ever.
+     * A texture that was first bound as a GL_TEXTURE_2D, must always be bound as a GL_TEXTURE_2D;
+     * attempting to bind it as GL_TEXTURE_3D will give rise to a run-time error
+     */
+    o(this, "glTarget");
+    /** The WebGL format - essentially channel structure */
+    o(this, "glFormat");
+    /** The WebGL data format - the type of each channel */
+    o(this, "glType");
+    /** The WebGL constant corresponding to the WebGPU style constant in format */
+    o(this, "glInternalFormat");
+    /** Whether the internal format is compressed */
+    o(this, "compressed");
+    // state
+    /** Texture binding slot - TODO - move to texture view? */
+    o(this, "_textureUnit", 0);
+    this.device = e, this.gl = this.device.gl;
+    const n = $e(this.props.format);
+    this.glTarget = ar(this.props.dimension), this.glInternalFormat = n.internalFormat, this.glFormat = n.format, this.glType = n.type, this.compressed = n.compressed, this.handle = this.props.handle || this.gl.createTexture(), this.device._setWebGLDebugMetadata(this.handle, this, { spector: this.props }), this.gl.bindTexture(this.glTarget, this.handle);
+    const { dimension: s, width: a, height: c, depth: l, mipLevels: u, glTarget: h, glInternalFormat: f } = this;
+    switch (s) {
+      case "2d":
+      case "cube":
+        this.gl.texStorage2D(h, u, f, a, c);
+        break;
+      case "2d-array":
+      case "3d":
+        this.gl.texStorage3D(h, u, f, a, c, l);
+        break;
+      default:
+        throw new Error(s);
+    }
+    this.gl.bindTexture(this.glTarget, null), this._initializeData(i.data), this.setSampler(this.props.sampler), this.view = new G(this.device, { ...this.props, texture: this }), Object.seal(this);
+  }
+  destroy() {
+    this.handle && (this.gl.deleteTexture(this.handle), this.removeStats(), this.trackDeallocatedMemory("Texture"), this.destroyed = !0);
+  }
+  createView(e) {
+    return new G(this.device, { ...e, texture: this });
+  }
+  setSampler(e = {}) {
+    super.setSampler(e);
+    const i = ze(this.sampler.props);
+    this._setSamplerParameters(i);
+  }
+  copyImageData(e) {
+    const i = this._normalizeCopyImageDataOptions(e), n = i.data, { width: s, height: a, depth: c } = this, { mipLevel: l = 0, byteOffset: u = 0, x: h = 0, y: f = 0, z: g = 0 } = i, { glFormat: d, glType: m, compressed: p } = this, w = Fe(this.glTarget, this.dimension, c), v = this.compressed ? {} : {
+      3314: i.bytesPerRow,
+      32878: i.rowsPerImage
+    };
+    this.gl.bindTexture(w, this.handle), U(this.gl, v, () => {
+      switch (this.dimension) {
+        case "2d":
+        case "cube":
+          p ? this.gl.compressedTexSubImage2D(w, l, h, f, s, a, d, n, u) : this.gl.texSubImage2D(w, l, h, f, s, a, d, m, n, u);
+          break;
+        case "2d-array":
+        case "3d":
+          p ? this.gl.compressedTexSubImage3D(w, l, h, f, g, s, a, c, d, n, u) : this.gl.texSubImage3D(w, l, h, f, g, s, a, c, d, m, n, u);
+          break;
+        default:
+      }
+    }), this.gl.bindTexture(w, null);
+  }
+  copyExternalImage(e) {
+    const i = this._normalizeCopyExternalImageOptions(e);
+    if (i.sourceX || i.sourceY)
+      throw new Error("WebGL does not support sourceX/sourceY)");
+    const { glFormat: n, glType: s } = this, { image: a, depth: c, mipLevel: l, x: u, y: h, z: f, width: g, height: d } = i, m = Fe(this.glTarget, this.dimension, c), p = i.flipY ? { 37440: !0 } : {};
+    return this.gl.bindTexture(this.glTarget, this.handle), U(this.gl, p, () => {
+      switch (this.dimension) {
+        case "2d":
+        case "cube":
+          this.gl.texSubImage2D(m, l, u, h, g, d, n, s, a);
+          break;
+        case "2d-array":
+        case "3d":
+          this.gl.texSubImage3D(m, l, u, h, f, g, d, c, n, s, a);
+          break;
+        default:
+      }
+    }), this.gl.bindTexture(this.glTarget, null), { width: i.width, height: i.height };
+  }
+  // WEBGL SPECIFIC
+  generateMipmapsWebGL(e) {
+    if (!(!(this.device.isTextureFormatRenderable(this.props.format) && this.device.isTextureFormatFilterable(this.props.format)) && (b.warn(`${this} is not renderable or filterable, may not be able to generate mipmaps`)(), !(e != null && e.force))))
+      try {
+        this.gl.bindTexture(this.glTarget, this.handle), this.gl.generateMipmap(this.glTarget);
+      } catch (n) {
+        b.warn(`Error generating mipmap for ${this}: ${n.message}`)();
+      } finally {
+        this.gl.bindTexture(this.glTarget, null);
+      }
+  }
+  // INTERNAL
+  /**
+   * Sets sampler parameters on texture
+   */
+  _setSamplerParameters(e) {
+    b.log(2, `${this.id} sampler parameters`, this.device.getGLKeys(e))(), this.gl.bindTexture(this.glTarget, this.handle);
+    for (const [i, n] of Object.entries(e)) {
+      const s = Number(i), a = n;
+      switch (s) {
+        case 33082:
+        case 33083:
+          this.gl.texParameterf(this.glTarget, s, a);
+          break;
+        case 10240:
+        case 10241:
+          this.gl.texParameteri(this.glTarget, s, a);
+          break;
+        case 10242:
+        case 10243:
+        case 32882:
+          this.gl.texParameteri(this.glTarget, s, a);
+          break;
+        case 34046:
+          this.device.features.has("texture-filterable-anisotropic-webgl") && this.gl.texParameteri(this.glTarget, s, a);
+          break;
+        case 34892:
+        case 34893:
+          this.gl.texParameteri(this.glTarget, s, a);
+          break;
+      }
+    }
+    this.gl.bindTexture(this.glTarget, null);
+  }
+  _getActiveUnit() {
+    return this.gl.getParameter(34016) - 33984;
+  }
+  _bind(e) {
+    const { gl: i } = this;
+    return e !== void 0 && (this._textureUnit = e, i.activeTexture(33984 + e)), i.bindTexture(this.glTarget, this.handle), e;
+  }
+  _unbind(e) {
+    const { gl: i } = this;
+    return e !== void 0 && (this._textureUnit = e, i.activeTexture(33984 + e)), i.bindTexture(this.glTarget, null), e;
+  }
+}
+function ar(r) {
+  switch (r) {
+    case "1d":
+      break;
+    // not supported in any WebGL version
+    case "2d":
+      return 3553;
+    // supported in WebGL1
+    case "3d":
+      return 32879;
+    // supported in WebGL2
+    case "cube":
+      return 34067;
+    // supported in WebGL1
+    case "2d-array":
+      return 35866;
+  }
+  throw new Error(r);
+}
+function Fe(r, t, e) {
+  return t === "cube" ? 34069 + e : r;
+}
+function or(r) {
+  return hr[r];
+}
+function ge(r) {
+  return ur[r];
+}
+function cr(r) {
+  return !!Ve[r];
+}
+function lr(r) {
+  return Ve[r];
+}
+const ur = {
+  5126: "f32",
+  35664: "vec2<f32>",
+  35665: "vec3<f32>",
+  35666: "vec4<f32>",
+  5124: "i32",
+  35667: "vec2<i32>",
+  35668: "vec3<i32>",
+  35669: "vec4<i32>",
+  5125: "u32",
+  36294: "vec2<u32>",
+  36295: "vec3<u32>",
+  36296: "vec4<u32>",
+  35670: "f32",
+  35671: "vec2<f32>",
+  35672: "vec3<f32>",
+  35673: "vec4<f32>",
+  // TODO - are sizes/components below correct?
+  35674: "mat2x2<f32>",
+  35685: "mat2x3<f32>",
+  35686: "mat2x4<f32>",
+  35687: "mat3x2<f32>",
+  35675: "mat3x3<f32>",
+  35688: "mat3x4<f32>",
+  35689: "mat4x2<f32>",
+  35690: "mat4x3<f32>",
+  35676: "mat4x4<f32>"
+}, Ve = {
+  35678: { viewDimension: "2d", sampleType: "float" },
+  35680: { viewDimension: "cube", sampleType: "float" },
+  35679: { viewDimension: "3d", sampleType: "float" },
+  35682: { viewDimension: "3d", sampleType: "depth" },
+  36289: { viewDimension: "2d-array", sampleType: "float" },
+  36292: { viewDimension: "2d-array", sampleType: "depth" },
+  36293: { viewDimension: "cube", sampleType: "float" },
+  36298: { viewDimension: "2d", sampleType: "sint" },
+  36299: { viewDimension: "3d", sampleType: "sint" },
+  36300: { viewDimension: "cube", sampleType: "sint" },
+  36303: { viewDimension: "2d-array", sampleType: "uint" },
+  36306: { viewDimension: "2d", sampleType: "uint" },
+  36307: { viewDimension: "3d", sampleType: "uint" },
+  36308: { viewDimension: "cube", sampleType: "uint" },
+  36311: { viewDimension: "2d-array", sampleType: "uint" }
+}, hr = {
+  uint8: 5121,
+  sint8: 5120,
+  unorm8: 5121,
+  snorm8: 5120,
+  uint16: 5123,
+  sint16: 5122,
+  unorm16: 5123,
+  snorm16: 5122,
+  uint32: 5125,
+  sint32: 5124,
+  // WebGPU does not support normalized 32 bit integer attributes
+  //  'unorm32': GL.UNSIGNED_INT,
+  //  'snorm32': GL.INT,
+  float16: 5131,
+  float32: 5126
+};
+function fr(r, t) {
+  const e = {
+    attributes: [],
+    bindings: []
+  };
+  e.attributes = dr(r, t);
+  const i = mr(r, t);
+  for (const c of i) {
+    const l = c.uniforms.map((u) => ({
+      name: u.name,
+      format: u.format,
+      byteOffset: u.byteOffset,
+      byteStride: u.byteStride,
+      arrayLength: u.arrayLength
+    }));
+    e.bindings.push({
+      type: "uniform",
+      name: c.name,
+      group: 0,
+      location: c.location,
+      visibility: (c.vertex ? 1 : 0) & (c.fragment ? 2 : 0),
+      minBindingSize: c.byteLength,
+      uniforms: l
+    });
+  }
+  const n = br(r, t);
+  let s = 0;
+  for (const c of n)
+    if (cr(c.type)) {
+      const { viewDimension: l, sampleType: u } = lr(c.type);
+      e.bindings.push({
+        type: "texture",
+        name: c.name,
+        group: 0,
+        location: s,
+        viewDimension: l,
+        sampleType: u
+      }), c.textureUnit = s, s += 1;
+    }
+  n.length && (e.uniforms = n);
+  const a = gr(r, t);
+  return a != null && a.length && (e.varyings = a), e;
+}
+function dr(r, t) {
+  const e = [], i = r.getProgramParameter(t, 35721);
+  for (let n = 0; n < i; n++) {
+    const s = r.getActiveAttrib(t, n);
+    if (!s)
+      throw new Error("activeInfo");
+    const {
+      name: a,
+      type: c
+      /* , size*/
+    } = s, l = r.getAttribLocation(t, a);
+    if (l >= 0) {
+      const u = ge(c), h = /instance/i.test(a) ? "instance" : "vertex";
+      e.push({
+        name: a,
+        location: l,
+        stepMode: h,
+        type: u
+        // size - for arrays, size is the number of elements in the array
+      });
+    }
+  }
+  return e.sort((n, s) => n.location - s.location), e;
+}
+function gr(r, t) {
+  const e = [], i = r.getProgramParameter(t, 35971);
+  for (let n = 0; n < i; n++) {
+    const s = r.getTransformFeedbackVarying(t, n);
+    if (!s)
+      throw new Error("activeInfo");
+    const { name: a, type: c, size: l } = s, u = ge(c), { type: h, components: f } = st(u);
+    e.push({ location: n, name: a, type: h, size: l * f });
+  }
+  return e.sort((n, s) => n.location - s.location), e;
+}
+function br(r, t) {
+  const e = [], i = r.getProgramParameter(t, 35718);
+  for (let n = 0; n < i; n++) {
+    const s = r.getActiveUniform(t, n);
+    if (!s)
+      throw new Error("activeInfo");
+    const { name: a, size: c, type: l } = s, { name: u, isArray: h } = pr(a);
+    let f = r.getUniformLocation(t, u);
+    const g = {
+      // WebGL locations are uniquely typed but just numbers
+      location: f,
+      name: u,
+      size: c,
+      type: l,
+      isArray: h
+    };
+    if (e.push(g), g.size > 1)
+      for (let d = 0; d < g.size; d++) {
+        const m = `${u}[${d}]`;
+        f = r.getUniformLocation(t, m);
+        const p = {
+          ...g,
+          name: m,
+          location: f
+        };
+        e.push(p);
+      }
+  }
+  return e;
+}
+function mr(r, t) {
+  const e = (s, a) => r.getActiveUniformBlockParameter(t, s, a), i = [], n = r.getProgramParameter(t, 35382);
+  for (let s = 0; s < n; s++) {
+    const a = {
+      name: r.getActiveUniformBlockName(t, s) || "",
+      location: e(s, 35391),
+      byteLength: e(s, 35392),
+      vertex: e(s, 35396),
+      fragment: e(s, 35398),
+      uniformCount: e(s, 35394),
+      uniforms: []
+    }, c = e(s, 35395) || [], l = r.getActiveUniforms(t, c, 35383), u = r.getActiveUniforms(t, c, 35384), h = r.getActiveUniforms(t, c, 35387), f = r.getActiveUniforms(t, c, 35388);
+    for (let g = 0; g < a.uniformCount; ++g) {
+      const d = r.getActiveUniform(t, c[g]);
+      if (!d)
+        throw new Error("activeInfo");
+      const m = ge(l[g]);
+      a.uniforms.push({
+        name: d.name,
+        format: m,
+        type: l[g],
+        arrayLength: u[g],
+        byteOffset: h[g],
+        byteStride: f[g]
+        // matrixStride: uniformStride[i],
+        // rowMajor: uniformRowMajor[i]
+      });
+    }
+    i.push(a);
+  }
+  return i.sort((s, a) => s.location - a.location), i;
+}
+function pr(r) {
+  if (r[r.length - 1] !== "]")
+    return {
+      name: r,
+      length: 1,
+      isArray: !1
+    };
+  const e = /([^[]*)(\[[0-9]+\])?/.exec(r);
+  if (!e || e.length < 2)
+    throw new Error(`Failed to parse GLSL uniform name ${r}`);
+  return {
+    name: e[1],
+    length: e[2] ? 1 : 0,
+    isArray: !!e[2]
+  };
+}
+function xr(r, t, e, i) {
+  const n = r;
+  let s = i;
+  s === !0 && (s = 1), s === !1 && (s = 0);
+  const a = typeof s == "number" ? [s] : s;
+  switch (e) {
+    case 35678:
+    case 35680:
+    case 35679:
+    case 35682:
+    case 36289:
+    case 36292:
+    case 36293:
+    case 36298:
+    case 36299:
+    case 36300:
+    case 36303:
+    case 36306:
+    case 36307:
+    case 36308:
+    case 36311:
+      if (typeof i != "number")
+        throw new Error("samplers must be set to integers");
+      return r.uniform1i(t, i);
+    case 5126:
+      return r.uniform1fv(t, a);
+    case 35664:
+      return r.uniform2fv(t, a);
+    case 35665:
+      return r.uniform3fv(t, a);
+    case 35666:
+      return r.uniform4fv(t, a);
+    case 5124:
+      return r.uniform1iv(t, a);
+    case 35667:
+      return r.uniform2iv(t, a);
+    case 35668:
+      return r.uniform3iv(t, a);
+    case 35669:
+      return r.uniform4iv(t, a);
+    case 35670:
+      return r.uniform1iv(t, a);
+    case 35671:
+      return r.uniform2iv(t, a);
+    case 35672:
+      return r.uniform3iv(t, a);
+    case 35673:
+      return r.uniform4iv(t, a);
+    // WEBGL2 - unsigned integers
+    case 5125:
+      return n.uniform1uiv(t, a, 1);
+    case 36294:
+      return n.uniform2uiv(t, a, 2);
+    case 36295:
+      return n.uniform3uiv(t, a, 3);
+    case 36296:
+      return n.uniform4uiv(t, a, 4);
+    // WebGL2 - quadratic matrices
+    // false: don't transpose the matrix
+    case 35674:
+      return r.uniformMatrix2fv(t, !1, a);
+    case 35675:
+      return r.uniformMatrix3fv(t, !1, a);
+    case 35676:
+      return r.uniformMatrix4fv(t, !1, a);
+    // WebGL2 - rectangular matrices
+    case 35685:
+      return n.uniformMatrix2x3fv(t, !1, a);
+    case 35686:
+      return n.uniformMatrix2x4fv(t, !1, a);
+    case 35687:
+      return n.uniformMatrix3x2fv(t, !1, a);
+    case 35688:
+      return n.uniformMatrix3x4fv(t, !1, a);
+    case 35689:
+      return n.uniformMatrix4x2fv(t, !1, a);
+    case 35690:
+      return n.uniformMatrix4x3fv(t, !1, a);
+  }
+  throw new Error("Illegal uniform");
+}
+function yr(r) {
+  switch (r) {
+    case "point-list":
+      return 0;
+    case "line-list":
+      return 1;
+    case "line-strip":
+      return 3;
+    case "triangle-list":
+      return 4;
+    case "triangle-strip":
+      return 5;
+    default:
+      throw new Error(r);
+  }
+}
+function wr(r) {
+  switch (r) {
+    case "point-list":
+      return 0;
+    case "line-list":
+      return 1;
+    case "line-strip":
+      return 1;
+    case "triangle-list":
+      return 4;
+    case "triangle-strip":
+      return 4;
+    default:
+      throw new Error(r);
+  }
+}
+const ke = 4;
+class vr extends at {
+  constructor(e, i) {
+    super(e, i);
+    /** The WebGL device that created this render pipeline */
+    o(this, "device");
+    /** Handle to underlying WebGL program */
+    o(this, "handle");
+    /** vertex shader */
+    o(this, "vs");
+    /** fragment shader */
+    o(this, "fs");
+    /** The layout extracted from shader by WebGL introspection APIs */
+    o(this, "introspectedLayout");
+    /** Uniforms set on this model */
+    o(this, "uniforms", {});
+    /** Bindings set on this model */
+    o(this, "bindings", {});
+    /** WebGL varyings */
+    o(this, "varyings", null);
+    o(this, "_uniformCount", 0);
+    o(this, "_uniformSetters", {});
+    this.device = e, this.handle = this.props.handle || this.device.gl.createProgram(), this.device._setWebGLDebugMetadata(this.handle, this, { spector: { id: this.props.id } }), this.vs = i.vs, this.fs = i.fs;
+    const { varyings: n, bufferMode: s = 35981 } = i;
+    n && n.length > 0 && (this.varyings = n, this.device.gl.transformFeedbackVaryings(this.handle, n, s)), this._linkShaders(), b.time(3, `RenderPipeline ${this.id} - shaderLayout introspection`)(), this.introspectedLayout = fr(this.device.gl, this.handle), b.timeEnd(3, `RenderPipeline ${this.id} - shaderLayout introspection`)(), this.shaderLayout = i.shaderLayout ? Sr(this.introspectedLayout, i.shaderLayout) : this.introspectedLayout;
+  }
+  // TODO are these used?
+  get [Symbol.toStringTag]() {
+    return "WEBGLRenderPipeline";
+  }
+  destroy() {
+    this.handle && (this.device.gl.useProgram(null), this.device.gl.deleteProgram(this.handle), this.destroyed = !0, this.handle.destroyed = !0, this.handle = null);
+  }
+  /**
+   * Bindings include: textures, samplers and uniform buffers
+   * @todo needed for portable model
+   */
+  setBindings(e, i) {
+    for (const [n, s] of Object.entries(e)) {
+      const a = this.shaderLayout.bindings.find((c) => c.name === n) || this.shaderLayout.bindings.find((c) => c.name === `${n}Uniforms`);
+      if (!a) {
+        const c = this.shaderLayout.bindings.map((l) => `"${l.name}"`).join(", ");
+        i != null && i.disableWarnings || b.warn(`No binding "${n}" in render pipeline "${this.id}", expected one of ${c}`, s)();
+        continue;
+      }
+      switch (s || b.warn(`Unsetting binding "${n}" in render pipeline "${this.id}"`)(), a.type) {
+        case "uniform":
+          if (!(s instanceof z) && !(s.buffer instanceof z))
+            throw new Error("buffer value");
+          break;
+        case "texture":
+          if (!(s instanceof G || s instanceof V || s instanceof $))
+            throw new Error(`${this} Bad texture binding for ${n}`);
+          break;
+        case "sampler":
+          b.warn(`Ignoring sampler ${n}`)();
+          break;
+        default:
+          throw new Error(a.type);
+      }
+      this.bindings[n] = s;
+    }
+  }
+  /** @todo needed for portable model
+   * @note The WebGL API is offers many ways to draw things
+   * This function unifies those ways into a single call using common parameters with sane defaults
+   */
+  draw(e) {
+    var w;
+    const {
+      renderPass: i,
+      parameters: n = this.props.parameters,
+      topology: s = this.props.topology,
+      vertexArray: a,
+      vertexCount: c,
+      // indexCount,
+      instanceCount: l,
+      isInstanced: u = !1,
+      firstVertex: h = 0,
+      // firstIndex,
+      // firstInstance,
+      // baseVertex,
+      transformFeedback: f
+    } = e, g = yr(s), d = !!a.indexBuffer, m = (w = a.indexBuffer) == null ? void 0 : w.glIndexType;
+    if (this.linkStatus !== "success")
+      return b.info(2, `RenderPipeline:${this.id}.draw() aborted - waiting for shader linking`)(), !1;
+    if (!this._areTexturesRenderable())
+      return b.info(2, `RenderPipeline:${this.id}.draw() aborted - textures not yet loaded`)(), !1;
+    this.device.gl.useProgram(this.handle), a.bindBeforeRender(i), f && f.begin(this.props.topology), this._applyBindings(), this._applyUniforms();
+    const p = i;
+    return Zt(this.device, n, p.glParameters, () => {
+      d && u ? this.device.gl.drawElementsInstanced(
+        g,
+        c || 0,
+        // indexCount?
+        m,
+        h,
+        l || 0
+      ) : d ? this.device.gl.drawElements(g, c || 0, m, h) : u ? this.device.gl.drawArraysInstanced(g, h, c || 0, l || 0) : this.device.gl.drawArrays(g, h, c || 0), f && f.end();
+    }), a.unbindAfterRender(i), !0;
+  }
+  // PRIVATE METHODS
+  // setAttributes(attributes: Record<string, Buffer>): void {}
+  // setBindings(bindings: Record<string, Binding>): void {}
+  async _linkShaders() {
+    const { gl: e } = this.device;
+    if (e.attachShader(this.handle, this.vs.handle), e.attachShader(this.handle, this.fs.handle), b.time(ke, `linkProgram for ${this.id}`)(), e.linkProgram(this.handle), b.timeEnd(ke, `linkProgram for ${this.id}`)(), b.level, !this.device.features.has("compilation-status-async-webgl")) {
+      const n = this._getLinkStatus();
+      this._reportLinkStatus(n);
+      return;
+    }
+    b.once(1, "RenderPipeline linking is asynchronous")(), await this._waitForLinkComplete(), b.info(2, `RenderPipeline ${this.id} - async linking complete: ${this.linkStatus}`)();
+    const i = this._getLinkStatus();
+    this._reportLinkStatus(i);
+  }
+  /** Report link status. First, check for shader compilation failures if linking fails */
+  async _reportLinkStatus(e) {
+    var i;
+    switch (e) {
+      case "success":
+        return;
+      default:
+        const n = e === "link-error" ? "Link error" : "Validation error";
+        switch (this.vs.compilationStatus) {
+          case "error":
+            throw this.vs.debugShader(), new Error(`${this} ${n} during compilation of ${this.vs}`);
+          case "pending":
+            await this.vs.asyncCompilationStatus, this.vs.debugShader();
+            break;
+        }
+        switch ((i = this.fs) == null ? void 0 : i.compilationStatus) {
+          case "error":
+            throw this.fs.debugShader(), new Error(`${this} ${n} during compilation of ${this.fs}`);
+          case "pending":
+            await this.fs.asyncCompilationStatus, this.fs.debugShader();
+            break;
+        }
+        const s = this.device.gl.getProgramInfoLog(this.handle);
+        this.device.reportError(new Error(`${n} during ${e}: ${s}`), this)(), this.device.debug();
+    }
+  }
+  /**
+   * Get the shader compilation status
+   * TODO - Load log even when no error reported, to catch warnings?
+   * https://gamedev.stackexchange.com/questions/30429/how-to-detect-glsl-warnings
+   */
+  _getLinkStatus() {
+    const { gl: e } = this.device;
+    return e.getProgramParameter(this.handle, 35714) ? (e.validateProgram(this.handle), e.getProgramParameter(this.handle, 35715) ? (this.linkStatus = "success", "success") : (this.linkStatus = "error", "validation-error")) : (this.linkStatus = "error", "link-error");
+  }
+  /** Use KHR_parallel_shader_compile extension if available */
+  async _waitForLinkComplete() {
+    const e = async (s) => await new Promise((a) => setTimeout(a, s));
+    if (!this.device.features.has("compilation-status-async-webgl")) {
+      await e(10);
+      return;
+    }
+    const { gl: n } = this.device;
+    for (; ; ) {
+      if (n.getProgramParameter(this.handle, 37297))
+        return;
+      await e(10);
+    }
+  }
+  /**
+   * Checks if all texture-values uniforms are renderable (i.e. loaded)
+   * Update a texture if needed (e.g. from video)
+   * Note: This is currently done before every draw call
+   */
+  _areTexturesRenderable() {
+    let e = !0;
+    for (const i of this.shaderLayout.bindings)
+      !this.bindings[i.name] && !this.bindings[i.name.replace(/Uniforms$/, "")] && (b.warn(`Binding ${i.name} not found in ${this.id}`)(), e = !1);
+    return e;
+  }
+  /** Apply any bindings (before each draw call) */
+  _applyBindings() {
+    if (this.linkStatus !== "success")
+      return;
+    const { gl: e } = this.device;
+    e.useProgram(this.handle);
+    let i = 0, n = 0;
+    for (const s of this.shaderLayout.bindings) {
+      const a = this.bindings[s.name] || this.bindings[s.name.replace(/Uniforms$/, "")];
+      if (!a)
+        throw new Error(`No value for binding ${s.name} in ${this.id}`);
+      switch (s.type) {
+        case "uniform":
+          const { name: c } = s, l = e.getUniformBlockIndex(this.handle, c);
+          if (l === 4294967295)
+            throw new Error(`Invalid uniform block name ${c}`);
+          e.uniformBlockBinding(this.handle, n, l), a instanceof z ? e.bindBufferBase(35345, n, a.handle) : e.bindBufferRange(
+            35345,
+            n,
+            // @ts-expect-error
+            a.buffer.handle,
+            // @ts-expect-error
+            a.offset || 0,
+            // @ts-expect-error
+            a.size || a.buffer.byteLength - a.offset
+          ), n += 1;
+          break;
+        case "texture":
+          if (!(a instanceof G || a instanceof V || a instanceof $))
+            throw new Error("texture");
+          let u;
+          if (a instanceof G)
+            u = a.texture;
+          else if (a instanceof V)
+            u = a;
+          else if (a instanceof $ && a.colorAttachments[0] instanceof G)
+            b.warn("Passing framebuffer in texture binding may be deprecated. Use fbo.colorAttachments[0] instead")(), u = a.colorAttachments[0].texture;
+          else
+            throw new Error("No texture");
+          e.activeTexture(33984 + i), e.bindTexture(u.glTarget, u.handle), i += 1;
+          break;
+        case "sampler":
+          break;
+        case "storage":
+        case "read-only-storage":
+          throw new Error(`binding type '${s.type}' not supported in WebGL`);
+      }
+    }
+  }
+  /**
+   * Due to program sharing, uniforms need to be reset before every draw call
+   * (though caching will avoid redundant WebGL calls)
+   */
+  _applyUniforms() {
+    for (const e of this.shaderLayout.uniforms || []) {
+      const { name: i, location: n, type: s, textureUnit: a } = e, c = this.uniforms[i] ?? a;
+      c !== void 0 && xr(this.device.gl, n, s, c);
+    }
+  }
+}
+function Sr(r, t) {
+  const e = {
+    ...r,
+    attributes: r.attributes.map((i) => ({ ...i }))
+  };
+  for (const i of (t == null ? void 0 : t.attributes) || []) {
+    const n = e.attributes.find((s) => s.name === i.name);
+    n ? (n.type = i.type || n.type, n.stepMode = i.stepMode || n.stepMode) : b.warn(`shader layout attribute ${i.name} not present in shader`);
+  }
+  return e;
+}
+class Tr extends se {
+  constructor(e) {
+    super(e, {});
+    o(this, "device");
+    o(this, "handle", null);
+    o(this, "commands", []);
+    this.device = e;
+  }
+  _executeCommands(e = this.commands) {
+    for (const i of e)
+      switch (i.name) {
+        case "copy-buffer-to-buffer":
+          _r(this.device, i.options);
+          break;
+        case "copy-buffer-to-texture":
+          Pr(this.device, i.options);
+          break;
+        case "copy-texture-to-buffer":
+          Ar(this.device, i.options);
+          break;
+        case "copy-texture-to-texture":
+          Er(this.device, i.options);
+          break;
+        // case 'clear-texture':
+        //   _clearTexture(this.device, command.options);
+        //   break;
+        default:
+          throw new Error(i.name);
+      }
+  }
+}
+function _r(r, t) {
+  const e = t.sourceBuffer, i = t.destinationBuffer;
+  r.gl.bindBuffer(36662, e.handle), r.gl.bindBuffer(36663, i.handle), r.gl.copyBufferSubData(36662, 36663, t.sourceOffset ?? 0, t.destinationOffset ?? 0, t.size), r.gl.bindBuffer(36662, null), r.gl.bindBuffer(36663, null);
+}
+function Pr(r, t) {
+  throw new Error("Not implemented");
+}
+function Ar(r, t) {
+  const {
+    /** Texture to copy to/from. */
+    sourceTexture: e,
+    /**  Mip-map level of the texture to copy to/from. (Default 0) */
+    mipLevel: i = 0,
+    /** Defines which aspects of the texture to copy to/from. */
+    aspect: n = "all",
+    /** Width to copy */
+    width: s = t.sourceTexture.width,
+    /** Height to copy */
+    height: a = t.sourceTexture.height,
+    depthOrArrayLayers: c = 0,
+    /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
+    origin: l = [0, 0],
+    /** Destination buffer */
+    destinationBuffer: u,
+    /** Offset, in bytes, from the beginning of the buffer to the start of the image data (default 0) */
+    byteOffset: h = 0,
+    /**
+     * The stride, in bytes, between the beginning of each block row and the subsequent block row.
+     * Required if there are multiple block rows (i.e. the copy height or depth is more than one block).
+     */
+    bytesPerRow: f,
+    /**
+     * Number of block rows per single image of the texture.
+     * rowsPerImage &times; bytesPerRow is the stride, in bytes, between the beginning of each image of data and the subsequent image.
+     * Required if there are multiple images (i.e. the copy depth is more than one).
+     */
+    rowsPerImage: g
+  } = t;
+  if (n !== "all")
+    throw new Error("aspect not supported in WebGL");
+  if (i !== 0 || c !== 0 || f || g)
+    throw new Error("not implemented");
+  const { framebuffer: d, destroyFramebuffer: m } = Ue(e);
+  let p;
+  try {
+    const w = u, v = s || d.width, A = a || d.height, me = $e(d.colorAttachments[0].texture.props.format), He = me.format, qe = me.type;
+    r.gl.bindBuffer(35051, w.handle), p = r.gl.bindFramebuffer(36160, d.handle), r.gl.readPixels(l[0], l[1], v, A, He, qe, h);
+  } finally {
+    r.gl.bindBuffer(35051, null), p !== void 0 && r.gl.bindFramebuffer(36160, p), m && d.destroy();
+  }
+}
+function Er(r, t) {
+  const {
+    /** Texture to copy to/from. */
+    sourceTexture: e,
+    /**  Mip-map level of the texture to copy to (Default 0) */
+    destinationMipLevel: i = 0,
+    /** Defines which aspects of the texture to copy to/from. */
+    // aspect = 'all',
+    /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy from. */
+    origin: n = [0, 0],
+    /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to. */
+    destinationOrigin: s = [0, 0],
+    /** Texture to copy to/from. */
+    destinationTexture: a
+    /**  Mip-map level of the texture to copy to/from. (Default 0) */
+    // destinationMipLevel = options.mipLevel,
+    /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
+    // destinationOrigin = [0, 0],
+    /** Defines which aspects of the texture to copy to/from. */
+    // destinationAspect = options.aspect,
+  } = t;
+  let {
+    width: c = t.destinationTexture.width,
+    height: l = t.destinationTexture.height
+    // depthOrArrayLayers = 0
+  } = t;
+  const { framebuffer: u, destroyFramebuffer: h } = Ue(e), [f, g] = n, [d, m, p] = s, w = r.gl.bindFramebuffer(36160, u.handle);
+  let v, A;
+  if (a instanceof V)
+    v = a, c = Number.isFinite(c) ? c : v.width, l = Number.isFinite(l) ? l : v.height, v._bind(0), A = v.glTarget;
+  else
+    throw new Error("invalid destination");
+  switch (A) {
+    case 3553:
+    case 34067:
+      r.gl.copyTexSubImage2D(A, i, d, m, f, g, c, l);
+      break;
+    case 35866:
+    case 32879:
+      r.gl.copyTexSubImage3D(A, i, d, m, p, f, g, c, l);
+      break;
+  }
+  v && v._unbind(), r.gl.bindFramebuffer(36160, w), h && u.destroy();
+}
+function Ue(r) {
+  if (r instanceof L) {
+    const { width: t, height: e, id: i } = r;
+    return { framebuffer: r.device.createFramebuffer({
+      id: `framebuffer-for-${i}`,
+      width: t,
+      height: e,
+      colorAttachments: [r]
+    }), destroyFramebuffer: !0 };
+  }
+  return { framebuffer: r, destroyFramebuffer: !1 };
+}
+const Lr = [1, 2, 4, 8];
+class Br extends ie {
+  constructor(e, i) {
+    var a;
+    super(e, i);
+    o(this, "device");
+    o(this, "handle", null);
+    /** Parameters that should be applied before each draw call */
+    o(this, "glParameters", {});
+    this.device = e;
+    let n;
+    if (!((a = i == null ? void 0 : i.parameters) != null && a.viewport))
+      if (i != null && i.framebuffer) {
+        const { width: c, height: l } = i.framebuffer;
+        n = [0, 0, c, l];
+      } else {
+        const [c, l] = e.getDefaultCanvasContext().getDrawingBufferSize();
+        n = [0, 0, c, l];
+      }
+    this.device.pushState(), this.setParameters({ viewport: n, ...this.props.parameters });
+    const s = this.props.framebuffer;
+    if (this.props.framebuffer && (s != null && s.handle)) {
+      const c = this.props.framebuffer.colorAttachments.map((l, u) => 36064 + u);
+      this.device.gl.drawBuffers(c);
+    } else
+      this.device.gl.drawBuffers([1029]);
+    this.clear();
+  }
+  end() {
+    this.device.popState();
+  }
+  pushDebugGroup(e) {
+  }
+  popDebugGroup() {
+  }
+  insertDebugMarker(e) {
+  }
+  // beginOcclusionQuery(queryIndex: number): void;
+  // endOcclusionQuery(): void;
+  // executeBundles(bundles: Iterable<GPURenderBundle>): void;
+  /**
+   * Maps RenderPass parameters to GL parameters
+   */
+  setParameters(e = {}) {
+    const i = { ...this.glParameters };
+    i.framebuffer = this.props.framebuffer || null, this.props.depthReadOnly && (i.depthMask = !this.props.depthReadOnly), i.stencilMask = this.props.stencilReadOnly ? 0 : 1, i[35977] = this.props.discard, e.viewport && (e.viewport.length >= 6 ? (i.viewport = e.viewport.slice(0, 4), i.depthRange = [
+      e.viewport[4],
+      e.viewport[5]
+    ]) : i.viewport = e.viewport), e.scissorRect && (i.scissorTest = !0, i.scissor = e.scissorRect), e.blendConstant && (i.blendColor = e.blendConstant), e.stencilReference && (console.warn("RenderPassParameters.stencilReference not yet implemented in WebGL"), i[2967] = e.stencilReference), "colorMask" in e && (i.colorMask = Lr.map((n) => !!(n & e.colorMask))), this.glParameters = i, W(this.device.gl, i);
+  }
+  beginOcclusionQuery(e) {
+    const i = this.props.occlusionQuerySet;
+    i == null || i.beginOcclusionQuery();
+  }
+  endOcclusionQuery() {
+    const e = this.props.occlusionQuerySet;
+    e == null || e.endOcclusionQuery();
+  }
+  // PRIVATE
+  /**
+   * Optionally clears depth, color and stencil buffers based on parameters
+   */
+  clear() {
+    const e = { ...this.glParameters };
+    let i = 0;
+    this.props.clearColors && this.props.clearColors.forEach((n, s) => {
+      n && this.clearColorBuffer(s, n);
+    }), this.props.clearColor !== !1 && this.props.clearColors === void 0 && (i |= 16384, e.clearColor = this.props.clearColor), this.props.clearDepth !== !1 && (i |= 256, e.clearDepth = this.props.clearDepth), this.props.clearStencil !== !1 && (i |= 1024, e.clearStencil = this.props.clearStencil), i !== 0 && U(this.device.gl, e, () => {
+      this.device.gl.clear(i);
+    });
+  }
+  /**
+   * WebGL2 - clear a specific color buffer
+   */
+  clearColorBuffer(e = 0, i = [0, 0, 0, 0]) {
+    U(this.device.gl, { framebuffer: this.props.framebuffer }, () => {
+      switch (i.constructor) {
+        case Int8Array:
+        case Int16Array:
+        case Int32Array:
+          this.device.gl.clearBufferiv(6144, e, i);
+          break;
+        case Uint8Array:
+        case Uint8ClampedArray:
+        case Uint16Array:
+        case Uint32Array:
+          this.device.gl.clearBufferuiv(6144, e, i);
+          break;
+        case Float32Array:
+          this.device.gl.clearBufferfv(6144, e, i);
+          break;
+        default:
+          throw new Error("clearColorBuffer: color must be typed array");
+      }
+    });
+  }
+}
+class De extends ne {
+  constructor(e, i) {
+    super(e, i);
+    o(this, "device");
+    o(this, "handle", null);
+    o(this, "commandBuffer");
+    this.device = e, this.commandBuffer = new Tr(e);
+  }
+  destroy() {
+  }
+  finish() {
+    return this.commandBuffer;
+  }
+  beginRenderPass(e) {
+    return new Br(this.device, e);
+  }
+  beginComputePass(e) {
+    throw new Error("ComputePass not supported in WebGL");
+  }
+  copyBufferToBuffer(e) {
+    this.commandBuffer.commands.push({ name: "copy-buffer-to-buffer", options: e });
+  }
+  copyBufferToTexture(e) {
+    this.commandBuffer.commands.push({ name: "copy-buffer-to-texture", options: e });
+  }
+  copyTextureToBuffer(e) {
+    this.commandBuffer.commands.push({ name: "copy-texture-to-buffer", options: e });
+  }
+  copyTextureToTexture(e) {
+    this.commandBuffer.commands.push({ name: "copy-texture-to-texture", options: e });
+  }
+  // clearTexture(options: ClearTextureOptions): void {
+  //   this.commandBuffer.commands.push({name: 'copy-texture-to-texture', options});
+  // }
+  pushDebugGroup(e) {
+  }
+  popDebugGroup() {
+  }
+  insertDebugMarker(e) {
+  }
+  resolveQuerySet(e, i, n) {
+  }
+}
+function Cr(r) {
+  const { target: t, source: e, start: i = 0, count: n = 1 } = r, s = e.length, a = n * s;
+  let c = 0;
+  for (let l = i; c < s; c++)
+    t[l++] = e[c];
+  for (; c < a; )
+    c < a - c ? (t.copyWithin(i + c, i, i + c), c *= 2) : (t.copyWithin(i + c, i, i + a - c), c = a);
+  return r.target;
+}
+class be extends ae {
+  // Create a VertexArray
+  constructor(e, i) {
+    super(e, i);
+    o(this, "device");
+    o(this, "handle");
+    /** Attribute 0 buffer constant */
+    o(this, "buffer", null);
+    o(this, "bufferValue", null);
+    this.device = e, this.handle = this.device.gl.createVertexArray();
+  }
+  get [Symbol.toStringTag]() {
+    return "VertexArray";
+  }
+  /** * Attribute 0 can not be disable on most desktop OpenGL based browsers */
+  static isConstantAttributeZeroSupported(e) {
+    return ft() === "Chrome";
+  }
+  destroy() {
+    var e;
+    super.destroy(), this.buffer && ((e = this.buffer) == null || e.destroy()), this.handle && (this.device.gl.deleteVertexArray(this.handle), this.handle = void 0);
+  }
+  /**
+  // Set (bind/unbind) an elements buffer, for indexed rendering.
+  // Must be a Buffer bound to GL.ELEMENT_ARRAY_BUFFER or null. Constants not supported
+   *
+   * @param elementBuffer
+   */
+  setIndexBuffer(e) {
+    const i = e;
+    if (i && i.glTarget !== 34963)
+      throw new Error("Use .setBuffer()");
+    this.device.gl.bindVertexArray(this.handle), this.device.gl.bindBuffer(34963, i ? i.handle : null), this.indexBuffer = i, this.device.gl.bindVertexArray(null);
+  }
+  /** Set a location in vertex attributes array to a buffer, enables the location, sets divisor */
+  setBuffer(e, i) {
+    const n = i;
+    if (n.glTarget === 34963)
+      throw new Error("Use .setIndexBuffer()");
+    const { size: s, type: a, stride: c, offset: l, normalized: u, integer: h, divisor: f } = this._getAccessor(e);
+    this.device.gl.bindVertexArray(this.handle), this.device.gl.bindBuffer(34962, n.handle), h ? this.device.gl.vertexAttribIPointer(e, s, a, c, l) : this.device.gl.vertexAttribPointer(e, s, a, u, c, l), this.device.gl.bindBuffer(34962, null), this.device.gl.enableVertexAttribArray(e), this.device.gl.vertexAttribDivisor(e, f || 0), this.attributes[e] = n, this.device.gl.bindVertexArray(null);
+  }
+  /** Set a location in vertex attributes array to a constant value, disables the location */
+  setConstantWebGL(e, i) {
+    this._enable(e, !1), this.attributes[e] = i;
+  }
+  bindBeforeRender() {
+    this.device.gl.bindVertexArray(this.handle), this._applyConstantAttributes();
+  }
+  unbindAfterRender() {
+    this.device.gl.bindVertexArray(null);
+  }
+  // Internal methods
+  /**
+   * Constant attributes need to be reset before every draw call
+   * Any attribute that is disabled in the current vertex array object
+   * is read from the context's global constant value for that attribute location.
+   * @note Constant attributes are only supported in WebGL, not in WebGPU
+   */
+  _applyConstantAttributes() {
+    for (let e = 0; e < this.maxVertexAttributes; ++e) {
+      const i = this.attributes[e];
+      ArrayBuffer.isView(i) && this.device.setConstantAttributeWebGL(e, i);
+    }
+  }
+  /**
+   * Set a location in vertex attributes array to a buffer, enables the location, sets divisor
+   * @note requires vertex array to be bound
+   */
+  // protected _setAttributeLayout(location: number): void {
+  //   const {size, type, stride, offset, normalized, integer, divisor} = this._getAccessor(location);
+  //   // WebGL2 supports *integer* data formats, i.e. GPU will see integer values
+  //   if (integer) {
+  //     this.device.gl.vertexAttribIPointer(location, size, type, stride, offset);
+  //   } else {
+  //     // Attaches ARRAY_BUFFER with specified buffer format to location
+  //     this.device.gl.vertexAttribPointer(location, size, type, normalized, stride, offset);
+  //   }
+  //   this.device.gl.vertexAttribDivisor(location, divisor || 0);
+  // }
+  /** Get an accessor from the  */
+  _getAccessor(e) {
+    const i = this.attributeInfos[e];
+    if (!i)
+      throw new Error(`Unknown attribute location ${e}`);
+    const n = Oe(i.bufferDataType);
+    return {
+      size: i.bufferComponents,
+      type: n,
+      stride: i.byteStride,
+      offset: i.byteOffset,
+      normalized: i.normalized,
+      // it is the shader attribute declaration, not the vertex memory format,
+      // that determines if the data in the buffer will be treated as integers.
+      //
+      // Also note that WebGL supports assigning non-normalized integer data to floating point attributes,
+      // but as far as we can tell, WebGPU does not.
+      integer: i.integer,
+      divisor: i.stepMode === "instance" ? 1 : 0
+    };
+  }
+  /**
+   * Enabling an attribute location makes it reference the currently bound buffer
+   * Disabling an attribute location makes it reference the global constant value
+   * TODO - handle single values for size 1 attributes?
+   * TODO - convert classic arrays based on known type?
+   */
+  _enable(e, i = !0) {
+    const s = be.isConstantAttributeZeroSupported(this.device) || e !== 0;
+    (i || s) && (e = Number(e), this.device.gl.bindVertexArray(this.handle), i ? this.device.gl.enableVertexAttribArray(e) : this.device.gl.disableVertexAttribArray(e), this.device.gl.bindVertexArray(null));
+  }
+  /**
+   * Provide a means to create a buffer that is equivalent to a constant.
+   * NOTE: Desktop OpenGL cannot disable attribute 0.
+   * https://stackoverflow.com/questions/20305231/webgl-warning-attribute-0-is-disabled-
+   * this-has-significant-performance-penalty
+   */
+  getConstantBuffer(e, i) {
+    const n = Fr(i), s = n.byteLength * e, a = n.length * e;
+    if (this.buffer && s !== this.buffer.byteLength)
+      throw new Error(`Buffer size is immutable, byte length ${s} !== ${this.buffer.byteLength}.`);
+    let c = !this.buffer;
+    if (this.buffer = this.buffer || this.device.createBuffer({ byteLength: s }), c || (c = !kr(n, this.bufferValue)), c) {
+      const l = ot(i.constructor, a);
+      Cr({ target: l, source: n, start: 0, count: a }), this.buffer.write(l), this.bufferValue = i;
+    }
+    return this.buffer;
+  }
+}
+function Fr(r) {
+  return Array.isArray(r) ? new Float32Array(r) : r;
+}
+function kr(r, t) {
+  if (!r || !t || r.length !== t.length || r.constructor !== t.constructor)
+    return !1;
+  for (let e = 0; e < r.length; ++e)
+    if (r[e] !== t[e])
+      return !1;
+  return !0;
+}
+class Dr extends oe {
+  constructor(e, i) {
+    super(e, i);
+    o(this, "device");
+    o(this, "gl");
+    o(this, "handle");
+    /**
+     * NOTE: The Model already has this information while drawing, but
+     * TransformFeedback currently needs it internally, to look up
+     * varying information outside of a draw() call.
+     */
+    o(this, "layout");
+    o(this, "buffers", {});
+    o(this, "unusedBuffers", {});
+    /**
+     * Allows us to avoid a Chrome bug where a buffer that is already bound to a
+     * different target cannot be bound to 'TRANSFORM_FEEDBACK_BUFFER' target.
+     * This a major workaround, see: https://github.com/KhronosGroup/WebGL/issues/2346
+     */
+    o(this, "bindOnUse", !0);
+    o(this, "_bound", !1);
+    this.device = e, this.gl = e.gl, this.handle = this.props.handle || this.gl.createTransformFeedback(), this.layout = this.props.layout, i.buffers && this.setBuffers(i.buffers), Object.seal(this);
+  }
+  destroy() {
+    this.gl.deleteTransformFeedback(this.handle), super.destroy();
+  }
+  begin(e = "point-list") {
+    this.gl.bindTransformFeedback(36386, this.handle), this.bindOnUse && this._bindBuffers(), this.gl.beginTransformFeedback(wr(e));
+  }
+  end() {
+    this.gl.endTransformFeedback(), this.bindOnUse && this._unbindBuffers(), this.gl.bindTransformFeedback(36386, null);
+  }
+  // SUBCLASS
+  setBuffers(e) {
+    this.buffers = {}, this.unusedBuffers = {}, this.bind(() => {
+      for (const i in e)
+        this.setBuffer(i, e[i]);
+    });
+  }
+  setBuffer(e, i) {
+    const n = this._getVaryingIndex(e), { buffer: s, byteLength: a, byteOffset: c } = this._getBufferRange(i);
+    if (n < 0) {
+      this.unusedBuffers[e] = s, b.warn(`${this.id} unusedBuffers varying buffer ${e}`)();
+      return;
+    }
+    this.buffers[n] = { buffer: s, byteLength: a, byteOffset: c }, this.bindOnUse || this._bindBuffer(n, s, c, a);
+  }
+  getBuffer(e) {
+    if (Ge(e))
+      return this.buffers[e] || null;
+    const i = this._getVaryingIndex(e);
+    return i >= 0 ? this.buffers[i] : null;
+  }
+  bind(e = this.handle) {
+    if (typeof e != "function")
+      return this.gl.bindTransformFeedback(36386, e), this;
+    let i;
+    return this._bound ? i = e() : (this.gl.bindTransformFeedback(36386, this.handle), this._bound = !0, i = e(), this._bound = !1, this.gl.bindTransformFeedback(36386, null)), i;
+  }
+  unbind() {
+    this.bind(null);
+  }
+  // PRIVATE METHODS
+  /** Extract offsets for bindBufferRange */
+  _getBufferRange(e) {
+    if (e instanceof z)
+      return { buffer: e, byteOffset: 0, byteLength: e.byteLength };
+    const { buffer: i, byteOffset: n = 0, byteLength: s = e.buffer.byteLength } = e;
+    return { buffer: i, byteOffset: n, byteLength: s };
+  }
+  _getVaryingIndex(e) {
+    if (Ge(e))
+      return Number(e);
+    for (const i of this.layout.varyings || [])
+      if (e === i.name)
+        return i.location;
+    return -1;
+  }
+  /**
+   * Need to avoid chrome bug where buffer that is already bound to a different target
+   * cannot be bound to 'TRANSFORM_FEEDBACK_BUFFER' target.
+   */
+  _bindBuffers() {
+    for (const e in this.buffers) {
+      const { buffer: i, byteLength: n, byteOffset: s } = this._getBufferRange(this.buffers[e]);
+      this._bindBuffer(Number(e), i, s, n);
+    }
+  }
+  _unbindBuffers() {
+    for (const e in this.buffers)
+      this.gl.bindBufferBase(35982, Number(e), null);
+  }
+  _bindBuffer(e, i, n = 0, s) {
+    const a = i && i.handle;
+    !a || s === void 0 ? this.gl.bindBufferBase(35982, e, a) : this.gl.bindBufferRange(35982, e, a, n, s);
+  }
+}
+function Ge(r) {
+  return typeof r == "number" ? Number.isInteger(r) : /^\d+$/.test(r);
+}
+class Gr extends ce {
+  // Create a query class
+  constructor(e, i) {
+    super(e, i);
+    o(this, "device");
+    o(this, "handle");
+    o(this, "target", null);
+    o(this, "_queryPending", !1);
+    o(this, "_pollingPromise", null);
+    if (this.device = e, i.count > 1)
+      throw new Error("WebGL QuerySet can only have one value");
+    const n = this.device.gl.createQuery();
+    if (!n)
+      throw new Error("WebGL query not supported");
+    this.handle = n, Object.seal(this);
+  }
+  get [Symbol.toStringTag]() {
+    return "Query";
+  }
+  destroy() {
+    this.device.gl.deleteQuery(this.handle);
+  }
+  // FOR RENDER PASS AND COMMAND ENCODER
+  /**
+   * Shortcut for timer query (dependent on extension in both WebGL1 and 2)
+   * Measures GPU time delta between this call and a matching `end` call in the
+   * GPU instruction stream.
+   */
+  beginTimestampQuery() {
+    return this._begin(35007);
+  }
+  endTimestampQuery() {
+    this._end();
+  }
+  // Shortcut for occlusion queries
+  beginOcclusionQuery(e) {
+    return this._begin(e != null && e.conservative ? 36202 : 35887);
+  }
+  endOcclusionQuery() {
+    this._end();
+  }
+  // Shortcut for transformFeedbackQuery
+  beginTransformFeedbackQuery() {
+    return this._begin(35976);
+  }
+  endTransformFeedbackQuery() {
+    this._end();
+  }
+  async resolveQuery() {
+    return [await this.pollQuery()];
+  }
+  // PRIVATE METHODS
+  /**
+   * Due to OpenGL API limitations, after calling `begin()` on one Query
+   * instance, `end()` must be called on that same instance before
+   * calling `begin()` on another query. While there can be multiple
+   * outstanding queries representing disjoint `begin()`/`end()` intervals.
+   * It is not possible to interleave or overlap `begin` and `end` calls.
+   */
+  _begin(e) {
+    this._queryPending || (this.target = e, this.device.gl.beginQuery(this.target, this.handle));
+  }
+  // ends the current query
+  _end() {
+    this._queryPending || this.target && (this.device.gl.endQuery(this.target), this.target = null, this._queryPending = !0);
+  }
+  // Returns true if the query result is available
+  isResultAvailable() {
+    if (!this._queryPending)
+      return !1;
+    const e = this.device.gl.getQueryParameter(this.handle, 34919);
+    return e && (this._queryPending = !1), e;
+  }
+  // Timing query is disjoint, i.e. results are invalid
+  isTimerDisjoint() {
+    return this.device.gl.getParameter(36795);
+  }
+  // Returns query result.
+  getResult() {
+    return this.device.gl.getQueryParameter(this.handle, 34918);
+  }
+  // Returns the query result, converted to milliseconds to match JavaScript conventions.
+  getTimerMilliseconds() {
+    return this.getResult() / 1e6;
+  }
+  // Polls the query
+  pollQuery(e = Number.POSITIVE_INFINITY) {
+    if (this._pollingPromise)
+      return this._pollingPromise;
+    let i = 0;
+    return this._pollingPromise = new Promise((n, s) => {
+      const a = () => {
+        this.isResultAvailable() ? (n(this.getResult()), this._pollingPromise = null) : i++ > e ? (s("Timed out"), this._pollingPromise = null) : requestAnimationFrame(a);
+      };
+      requestAnimationFrame(a);
+    }), this._pollingPromise;
+  }
+}
+function Ne(r) {
+  switch (r) {
+    case 6406:
+    case 33326:
+    case 6403:
+    case 36244:
+      return 1;
+    case 33339:
+    case 33340:
+    case 33328:
+    case 33320:
+    case 33319:
+      return 2;
+    case 6407:
+    case 36248:
+    case 34837:
+      return 3;
+    case 6408:
+    case 36249:
+    case 34836:
+      return 4;
+    // TODO: Add support for additional WebGL2 formats
+    default:
+      return 0;
+  }
+}
+function Mr(r) {
+  switch (r) {
+    case 5121:
+      return 1;
+    case 33635:
+    case 32819:
+    case 32820:
+      return 2;
+    case 5126:
+      return 4;
+    // TODO: Add support for additional WebGL2 types
+    default:
+      return 0;
+  }
+}
+function Wr(r) {
+  return Rr[r];
+}
+const Rr = {
+  5124: "sint32",
+  5125: "uint32",
+  5122: "sint16",
+  5123: "uint16",
+  5120: "sint8",
+  5121: "uint8",
+  5126: "float32",
+  5131: "float16",
+  33635: "uint16",
+  32819: "uint16",
+  32820: "uint16",
+  33640: "uint32",
+  35899: "uint32",
+  35902: "uint32",
+  34042: "uint32",
+  36269: "uint32"
+};
+function Ir(r, t) {
+  var A;
+  const {
+    sourceX: e = 0,
+    sourceY: i = 0,
+    sourceAttachment: n = 0
+    // TODO - support gl.readBuffer
+  } = t || {};
+  let {
+    target: s = null,
+    // following parameters are auto deduced if not provided
+    sourceWidth: a,
+    sourceHeight: c,
+    sourceDepth: l,
+    sourceFormat: u,
+    sourceType: h
+  } = t || {};
+  const { framebuffer: f, deleteFramebuffer: g } = Xe(r), { gl: d, handle: m } = f;
+  a || (a = f.width), c || (c = f.height);
+  const p = (A = f.colorAttachments[n]) == null ? void 0 : A.texture;
+  if (!p)
+    throw new Error(`Invalid framebuffer attachment ${n}`);
+  l = (p == null ? void 0 : p.depth) || 1, u || (u = (p == null ? void 0 : p.glFormat) || 6408), h || (h = (p == null ? void 0 : p.glType) || 5121), s = zr(s, h, u, a, c);
+  const w = ct(s);
+  h = h || or(w);
+  const v = d.bindFramebuffer(36160, m);
+  return d.readBuffer(36064 + n), d.readPixels(e, i, a, c, u, h, s), d.readBuffer(36064), d.bindFramebuffer(36160, v || null), g && f.destroy(), s;
+}
+function Or(r, t) {
+  const { target: e, sourceX: i = 0, sourceY: n = 0, sourceFormat: s = 6408, targetByteOffset: a = 0 } = t || {};
+  let { sourceWidth: c, sourceHeight: l, sourceType: u } = t || {};
+  const { framebuffer: h, deleteFramebuffer: f } = Xe(r);
+  c = c || h.width, l = l || h.height;
+  const g = h;
+  u = u || 5121;
+  let d = e;
+  if (!d) {
+    const p = Ne(s), w = Mr(u), v = a + c * l * p * w;
+    d = g.device.createBuffer({ byteLength: v });
+  }
+  const m = r.device.createCommandEncoder();
+  return m.copyTextureToBuffer({
+    sourceTexture: r,
+    width: c,
+    height: l,
+    origin: [i, n],
+    destinationBuffer: d,
+    byteOffset: a
+  }), m.destroy(), f && h.destroy(), d;
+}
+function Xe(r) {
+  return r instanceof H ? { framebuffer: r, deleteFramebuffer: !1 } : { framebuffer: $r(r), deleteFramebuffer: !0 };
+}
+function $r(r, t) {
+  const { device: e, width: i, height: n, id: s } = r;
+  return e.createFramebuffer({
+    ...t,
+    id: `framebuffer-for-${s}`,
+    width: i,
+    height: n,
+    colorAttachments: [r]
+  });
+}
+function zr(r, t, e, i, n, s) {
+  if (r)
+    return r;
+  t || (t = 5121);
+  const a = Wr(t), c = lt(a), l = Ne(e);
+  return new c(i * n * l);
+}
+class jr extends pe {
+  constructor(e) {
+    var f, g;
+    super({ ...e, id: e.id || qt("webgl-device") });
+    // Public `Device` API
+    /** type of this device */
+    o(this, "type", "webgl");
+    // Use the ! assertion to handle the case where _reuseDevices causes the constructor to return early
+    /** The underlying WebGL context */
+    o(this, "handle");
+    o(this, "features");
+    o(this, "limits");
+    o(this, "info");
+    o(this, "canvasContext");
+    o(this, "preferredColorFormat", "rgba8unorm");
+    o(this, "preferredDepthFormat", "depth24plus");
+    o(this, "commandEncoder");
+    o(this, "lost");
+    o(this, "_resolveContextLost");
+    /** WebGL2 context. */
+    o(this, "gl");
+    /** Store constants */
+    // @ts-ignore TODO fix
+    o(this, "_constants");
+    /** State used by luma.gl classes - TODO - not used? */
+    o(this, "_extensions", {});
+    o(this, "_polyfilled", !1);
+    /** Instance of Spector.js (if initialized) */
+    o(this, "spectorJS");
+    const i = pe._getCanvasContextProps(e);
+    if (!i)
+      throw new Error("WebGLDevice requires props.createCanvasContext to be set");
+    let n = (g = (f = i.canvas) == null ? void 0 : f.gl) == null ? void 0 : g.device;
+    if (n)
+      throw new Error(`WebGL context already attached to device ${n.id}`);
+    this.canvasContext = new Ht(this, i), this.lost = new Promise((d) => {
+      this._resolveContextLost = d;
+    });
+    const s = { ...e.webgl };
+    i.alphaMode === "premultiplied" && (s.premultipliedAlpha = !0), e.powerPreference !== void 0 && (s.powerPreference = e.powerPreference);
+    const c = this.props._handle || At(this.canvasContext.canvas, {
+      onContextLost: (d) => {
+        var m;
+        return (m = this._resolveContextLost) == null ? void 0 : m.call(this, {
+          reason: "destroyed",
+          message: "Entered sleep mode, or too many apps or browser tabs are using the GPU."
+        });
+      },
+      // eslint-disable-next-line no-console
+      onContextRestored: (d) => console.log("WebGL context restored")
+    }, s);
+    if (!c)
+      throw new Error("WebGL context creation failed");
+    if (n = c.device, n) {
+      if (e._reuseDevices)
+        return b.log(1, `Not creating a new Device, instead returning a reference to Device ${n.id} already attached to WebGL context`, n)(), n._reused = !0, n;
+      throw new Error(`WebGL context already attached to device ${n.id}`);
+    }
+    this.handle = c, this.gl = c, this.spectorJS = ut({ ...this.props, gl: this.handle }), this.gl.device = this, this.gl._version = 2, this.info = Et(this.gl, this._extensions), this.limits = new Ut(this.gl), this.features = new Vt(this.gl, this._extensions, this.props._disabledFeatures), this.props._initializeFeatures && this.features.initializeFeatures(), new C(this.gl, {
+      log: (...d) => b.log(1, ...d)()
+    }).trackState(this.gl, { copyState: !1 });
+    const u = e.debugWebGL || e.debug, h = e.debugWebGL;
+    u && (this.gl = ht(this.gl, { debugWebGL: u, traceWebGL: h }), b.warn("WebGL debug mode activated. Performance reduced.")(), e.debugWebGL && (b.level = Math.max(b.level, 1))), this.commandEncoder = new De(this, { id: `${this}-command-encoder` });
+  }
+  //
+  // Public API
+  //
+  get [Symbol.toStringTag]() {
+    return "WebGLDevice";
+  }
+  toString() {
+    return `${this[Symbol.toStringTag]}(${this.id})`;
+  }
+  isVertexFormatSupported(e) {
+    switch (e) {
+      case "unorm8x4-bgra":
+        return !1;
+      default:
+        return !0;
+    }
+  }
+  /**
+   * Destroys the device
+   *
+   * @note "Detaches" from the WebGL context unless _reuseDevices is true.
+   *
+   * @note The underlying WebGL context is not immediately destroyed,
+   * but may be destroyed later through normal JavaScript garbage collection.
+   * This is a fundamental limitation since WebGL does not offer any
+   * browser API for destroying WebGL contexts.
+   */
+  destroy() {
+    !this.props._reuseDevices && !this._reused && delete this.gl.device;
+  }
+  get isLost() {
+    return this.gl.isContextLost();
+  }
+  // IMPLEMENTATION OF ABSTRACT DEVICE
+  getTextureByteAlignment() {
+    return 4;
+  }
+  createCanvasContext(e) {
+    throw new Error("WebGL only supports a single canvas");
+  }
+  createBuffer(e) {
+    const i = this._normalizeBufferProps(e);
+    return new z(this, i);
+  }
+  createTexture(e) {
+    return new V(this, e);
+  }
+  createExternalTexture(e) {
+    throw new Error("createExternalTexture() not implemented");
+  }
+  createSampler(e) {
+    return new nr(this, e);
+  }
+  createShader(e) {
+    return new Kt(this, e);
+  }
+  createFramebuffer(e) {
+    return new $(this, e);
+  }
+  createVertexArray(e) {
+    return new be(this, e);
+  }
+  createTransformFeedback(e) {
+    return new Dr(this, e);
+  }
+  createQuerySet(e) {
+    return new Gr(this, e);
+  }
+  createRenderPipeline(e) {
+    return new vr(this, e);
+  }
+  createComputePipeline(e) {
+    throw new Error("ComputePipeline not supported in WebGL");
+  }
+  createCommandEncoder(e = {}) {
+    return new De(this, e);
+  }
+  /**
+   * Offscreen Canvas Support: Commit the frame
+   * https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/commit
+   * Chrome's offscreen canvas does not require gl.commit
+   */
+  submit(e) {
+    e || (e = this.commandEncoder.finish(), this.commandEncoder.destroy(), this.commandEncoder = this.createCommandEncoder({ id: `${this.id}-default-encoder` })), e._executeCommands();
+  }
+  //
+  // TEMPORARY HACKS - will be removed in v9.1
+  //
+  /** @deprecated - should use command encoder */
+  readPixelsToArrayWebGL(e, i) {
+    return Ir(e, i);
+  }
+  /** @deprecated - should use command encoder */
+  readPixelsToBufferWebGL(e, i) {
+    return Or(e, i);
+  }
+  setParametersWebGL(e) {
+    W(this.gl, e);
+  }
+  getParametersWebGL(e) {
+    return Re(this.gl, e);
+  }
+  withParametersWebGL(e, i) {
+    return U(this.gl, e, i);
+  }
+  resetWebGL() {
+    b.warn("WebGLDevice.resetWebGL is deprecated, use only for debugging")(), vt(this.gl);
+  }
+  _getDeviceSpecificTextureFormatCapabilities(e) {
+    return It(this.gl, e, this._extensions);
+  }
+  //
+  // WebGL-only API (not part of `Device` API)
+  //
+  /**
+   * Triggers device (or WebGL context) loss.
+   * @note primarily intended for testing how application reacts to device loss
+   */
+  loseDevice() {
+    var s;
+    let e = !1;
+    const n = this.getExtension("WEBGL_lose_context").WEBGL_lose_context;
+    return n && (e = !0, n.loseContext()), (s = this._resolveContextLost) == null || s.call(this, {
+      reason: "destroyed",
+      message: "Application triggered context loss"
+    }), e;
+  }
+  /** Save current WebGL context state onto an internal stack */
+  pushState() {
+    C.get(this.gl).push();
+  }
+  /** Restores previously saved context state */
+  popState() {
+    C.get(this.gl).pop();
+  }
+  /**
+   * Returns the GL.<KEY> constant that corresponds to a numeric value of a GL constant
+   * Be aware that there are some duplicates especially for constants that are 0,
+   * so this isn't guaranteed to return the right key in all cases.
+   */
+  getGLKey(e, i) {
+    const n = Number(e);
+    for (const s in this.gl)
+      if (this.gl[s] === n)
+        return `GL.${s}`;
+    return i != null && i.emptyIfUnknown ? "" : String(e);
+  }
+  /**
+   * Returns a map with any GL.<KEY> constants mapped to strings, both for keys and values
+   */
+  getGLKeys(e) {
+    const i = { emptyIfUnknown: !0 };
+    return Object.entries(e).reduce((n, [s, a]) => (n[`${s}:${this.getGLKey(s, i)}`] = `${a}:${this.getGLKey(a, i)}`, n), {});
+  }
+  /**
+   * Set a constant value for a location. Disabled attributes at that location will read from this value
+   * @note WebGL constants are stored globally on the WebGL context, not the VertexArray
+   * so they need to be updated before every render
+   * @todo - remember/cache values to avoid setting them unnecessarily?
+   */
+  setConstantAttributeWebGL(e, i) {
+    const n = this.limits.maxVertexAttributes;
+    this._constants = this._constants || new Array(n).fill(null);
+    const s = this._constants[e];
+    switch (s && Xr(s, i) && b.info(1, `setConstantAttributeWebGL(${e}) could have been skipped, value unchanged`)(), this._constants[e] = i, i.constructor) {
+      case Float32Array:
+        Vr(this, e, i);
+        break;
+      case Int32Array:
+        Ur(this, e, i);
+        break;
+      case Uint32Array:
+        Nr(this, e, i);
+        break;
+      default:
+        throw new Error("constant");
+    }
+  }
+  /** Ensure extensions are only requested once */
+  getExtension(e) {
+    return M(this.gl, e, this._extensions), this._extensions;
+  }
+  // INTERNAL SUPPORT METHODS FOR WEBGL RESOURCES
+  /**
+   * Storing data on a special field on WebGLObjects makes that data visible in SPECTOR chrome debug extension
+   * luma.gl ids and props can be inspected
+   */
+  _setWebGLDebugMetadata(e, i, n) {
+    e.luma = i;
+    const s = { props: n.spector, id: n.spector.id };
+    e.__SPECTOR_Metadata = s;
+  }
+}
+function Vr(r, t, e) {
+  switch (e.length) {
+    case 1:
+      r.gl.vertexAttrib1fv(t, e);
+      break;
+    case 2:
+      r.gl.vertexAttrib2fv(t, e);
+      break;
+    case 3:
+      r.gl.vertexAttrib3fv(t, e);
+      break;
+    case 4:
+      r.gl.vertexAttrib4fv(t, e);
+      break;
+  }
+}
+function Ur(r, t, e) {
+  r.gl.vertexAttribI4iv(t, e);
+}
+function Nr(r, t, e) {
+  r.gl.vertexAttribI4uiv(t, e);
+}
+function Xr(r, t) {
+  if (!r || !t || r.length !== t.length || r.constructor !== t.constructor)
+    return !1;
+  for (let e = 0; e < r.length; ++e)
+    if (r[e] !== t[e])
+      return !1;
+  return !0;
+}
+export {
+  jr as WebGLDevice
+};
+//# sourceMappingURL=webgl-device-DzkMihDq.js.map