@luma.gl/webgl 9.1.0-alpha.14 → 9.1.0-alpha.16

package/dist/dist.dev.js

@@ -14,9 +14,9 @@ var __exports__ = (() => {
   var __commonJS = (cb, mod) => function __require() {
     return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
   };
-  var __export = (target, all) => {
+  var __export = (target2, all) => {
     for (var name in all)
-      __defProp(target, name, { get: all[name], enumerable: true });
+      __defProp(target2, name, { get: all[name], enumerable: true });
   };
   var __copyProps = (to, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
@@ -26,13 +26,13 @@ var __exports__ = (() => {
     }
     return to;
   };
-  var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  var __reExport = (target2, mod, secondTarget) => (__copyProps(target2, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+  var __toESM = (mod, isNodeMode, target2) => (target2 = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
     // If the importer is in node compatibility mode or this is not an ESM
     // file that has been converted to a CommonJS file using a Babel-
     // compatible transform (i.e. "__esModule" has not been set), then set
     // "default" to the CommonJS "module.exports" for node compatibility.
-    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target2, "default", { value: mod, enumerable: true }) : target2,
     mod
   ));
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -815,8 +815,8 @@ var __exports__ = (() => {
   var hint = (gl, value, key) => gl.hint(key, value);
   var pixelStorei = (gl, value, key) => gl.pixelStorei(key, value);
   var bindFramebuffer = (gl, value, key) => {
-    const target = key === 36006 /* FRAMEBUFFER_BINDING */ ? 36009 /* DRAW_FRAMEBUFFER */ : 36008 /* READ_FRAMEBUFFER */;
-    return gl.bindFramebuffer(target, value);
+    const target2 = key === 36006 /* FRAMEBUFFER_BINDING */ ? 36009 /* DRAW_FRAMEBUFFER */ : 36008 /* READ_FRAMEBUFFER */;
+    return gl.bindFramebuffer(target2, value);
   };
   var bindBuffer = (gl, value, key) => {
     const bindingMap = {
@@ -1049,17 +1049,17 @@ var __exports__ = (() => {
     useProgram: (update, value) => update({
       [35725 /* CURRENT_PROGRAM */]: value
     }),
-    bindRenderbuffer: (update, target, value) => update({
+    bindRenderbuffer: (update, target2, value) => update({
       [36007 /* RENDERBUFFER_BINDING */]: value
     }),
-    bindTransformFeedback: (update, target, value) => update({
+    bindTransformFeedback: (update, target2, value) => update({
       [36389 /* TRANSFORM_FEEDBACK_BINDING */]: value
     }),
     bindVertexArray: (update, value) => update({
       [34229 /* VERTEX_ARRAY_BINDING */]: value
     }),
-    bindFramebuffer: (update, target, framebuffer) => {
-      switch (target) {
+    bindFramebuffer: (update, target2, framebuffer) => {
+      switch (target2) {
         case 36160 /* FRAMEBUFFER */:
           return update({
             [36006 /* DRAW_FRAMEBUFFER_BINDING */]: framebuffer,
@@ -1073,14 +1073,14 @@ var __exports__ = (() => {
           return null;
       }
     },
-    bindBuffer: (update, target, buffer) => {
+    bindBuffer: (update, target2, buffer) => {
       const pname = {
         [34962 /* ARRAY_BUFFER */]: [34964 /* ARRAY_BUFFER_BINDING */],
         [36662 /* COPY_READ_BUFFER */]: [36662 /* COPY_READ_BUFFER_BINDING */],
         [36663 /* COPY_WRITE_BUFFER */]: [36663 /* COPY_WRITE_BUFFER_BINDING */],
         [35051 /* PIXEL_PACK_BUFFER */]: [35053 /* PIXEL_PACK_BUFFER_BINDING */],
         [35052 /* PIXEL_UNPACK_BUFFER */]: [35055 /* PIXEL_UNPACK_BUFFER_BINDING */]
-      }[target];
+      }[target2];
       if (pname) {
         return update({ [pname]: buffer });
       }
@@ -1434,37 +1434,31 @@ var __exports__ = (() => {
   }
 
   // src/context/helpers/create-browser-context.ts
-  var DEFAULT_CONTEXT_PROPS = {
-    powerPreference: "high-performance",
-    // After all, most apps are using WebGL for performance reasons
-    // eslint-disable-next-line no-console
-    onContextLost: () => console.error("WebGL context lost"),
-    // eslint-disable-next-line no-console
-    onContextRestored: () => console.info("WebGL context restored")
-  };
-  function createBrowserContext(canvas, props) {
-    props = { ...DEFAULT_CONTEXT_PROPS, ...props };
-    let errorMessage = null;
-    const onCreateError = (error) => errorMessage = error.statusMessage || errorMessage;
-    canvas.addEventListener("webglcontextcreationerror", onCreateError, false);
+  function createBrowserContext(canvas, props, webglContextAttributes) {
+    const errorMessage = null;
+    const webglProps = {
+      preserveDrawingBuffer: true,
+      // failIfMajorPerformanceCaveat: true,
+      ...webglContextAttributes
+    };
     let gl = null;
-    gl ||= canvas.getContext("webgl2", props);
-    canvas.removeEventListener("webglcontextcreationerror", onCreateError, false);
+    gl ||= canvas.getContext("webgl2", webglProps);
+    if (!gl && !webglContextAttributes.failIfMajorPerformanceCaveat) {
+      webglProps.failIfMajorPerformanceCaveat = false;
+      gl = canvas.getContext("webgl", webglProps);
+      gl.luma ||= {};
+      gl.luma.softwareRenderer = true;
+    }
     if (!gl) {
       throw new Error(`Failed to create WebGL context: ${errorMessage || "Unknown error"}`);
     }
-    if (props.onContextLost) {
-      const { onContextLost } = props;
-      canvas.addEventListener("webglcontextlost", (event) => onContextLost(event), false);
-    }
-    if (props.onContextRestored) {
-      const { onContextRestored } = props;
-      canvas.addEventListener(
-        "webglcontextrestored",
-        (event) => onContextRestored(event),
-        false
-      );
-    }
+    const { onContextLost, onContextRestored } = props;
+    canvas.addEventListener("webglcontextlost", (event) => onContextLost(event), false);
+    canvas.addEventListener(
+      "webglcontextrestored",
+      (event) => onContextRestored(event),
+      false
+    );
     return gl;
   }
 
@@ -2142,1848 +2136,1834 @@ var __exports__ = (() => {
   };
 
   // src/adapter/webgl-canvas-context.ts
-  var import_core10 = __toESM(require_core(), 1);
+  var import_core5 = __toESM(require_core(), 1);
 
   // src/adapter/resources/webgl-framebuffer.ts
-  var import_core9 = __toESM(require_core(), 1);
-
-  // src/adapter/resources/webgl-texture.ts
-  var import_core8 = __toESM(require_core(), 1);
-
-  // src/context/state-tracker/with-parameters.ts
-  function withGLParameters(gl, parameters, func) {
-    if (isObjectEmpty2(parameters)) {
-      return func(gl);
+  var import_core4 = __toESM(require_core(), 1);
+  var WEBGLFramebuffer = class extends import_core4.Framebuffer {
+    device;
+    gl;
+    handle;
+    colorAttachments = [];
+    depthStencilAttachment = null;
+    constructor(device, props) {
+      super(device, props);
+      const isDefaultFramebuffer = props.handle === null;
+      this.device = device;
+      this.gl = device.gl;
+      this.handle = this.props.handle || isDefaultFramebuffer ? this.props.handle : this.gl.createFramebuffer();
+      if (!isDefaultFramebuffer) {
+        device.setSpectorMetadata(this.handle, { id: this.props.id, props: this.props });
+        this.autoCreateAttachmentTextures();
+        this.updateAttachments();
+      }
     }
-    const { nocatch = true } = parameters;
-    const webglState = WebGLStateTracker.get(gl);
-    webglState.push();
-    setGLParameters(gl, parameters);
-    let value;
-    if (nocatch) {
-      value = func(gl);
-      webglState.pop();
-    } else {
-      try {
-        value = func(gl);
-      } finally {
-        webglState.pop();
+    /** destroys any auto created resources etc. */
+    destroy() {
+      super.destroy();
+      if (!this.destroyed && this.handle !== null) {
+        this.gl.deleteFramebuffer(this.handle);
       }
     }
-    return value;
+    updateAttachments() {
+      const prevHandle = this.gl.bindFramebuffer(
+        36160 /* FRAMEBUFFER */,
+        this.handle
+      );
+      for (let i = 0; i < this.colorAttachments.length; ++i) {
+        const attachment = this.colorAttachments[i];
+        if (attachment) {
+          const attachmentPoint = 36064 /* COLOR_ATTACHMENT0 */ + i;
+          this._attachTextureView(attachmentPoint, attachment);
+        }
+      }
+      if (this.depthStencilAttachment) {
+        const attachmentPoint = getDepthStencilAttachmentWebGL(
+          this.depthStencilAttachment.props.format
+        );
+        this._attachTextureView(attachmentPoint, this.depthStencilAttachment);
+      }
+      if (this.props.check !== false) {
+        const status = this.gl.checkFramebufferStatus(36160 /* FRAMEBUFFER */);
+        if (status !== 36053 /* FRAMEBUFFER_COMPLETE */) {
+          throw new Error(`Framebuffer ${_getFrameBufferStatus(status)}`);
+        }
+      }
+      this.gl.bindFramebuffer(36160 /* FRAMEBUFFER */, prevHandle);
+    }
+    // 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(attachment, textureView) {
+      const { gl } = this.device;
+      const { texture } = textureView;
+      const level = textureView.props.baseMipLevel;
+      const layer = textureView.props.baseArrayLayer;
+      gl.bindTexture(texture.glTarget, texture.handle);
+      switch (texture.glTarget) {
+        case 35866 /* TEXTURE_2D_ARRAY */:
+        case 32879 /* TEXTURE_3D */:
+          gl.framebufferTextureLayer(36160 /* FRAMEBUFFER */, attachment, texture.handle, level, layer);
+          break;
+        case 34067 /* TEXTURE_CUBE_MAP */:
+          const face = mapIndexToCubeMapFace(layer);
+          gl.framebufferTexture2D(36160 /* FRAMEBUFFER */, attachment, face, texture.handle, level);
+          break;
+        case 3553 /* TEXTURE_2D */:
+          gl.framebufferTexture2D(36160 /* FRAMEBUFFER */, attachment, 3553 /* TEXTURE_2D */, texture.handle, level);
+          break;
+        default:
+          throw new Error("Illegal texture type");
+      }
+      gl.bindTexture(texture.glTarget, null);
+    }
+  };
+  function mapIndexToCubeMapFace(layer) {
+    return layer < 34069 /* TEXTURE_CUBE_MAP_POSITIVE_X */ ? layer + 34069 /* TEXTURE_CUBE_MAP_POSITIVE_X */ : layer;
   }
-  function isObjectEmpty2(object) {
-    for (const key in object) {
-      return false;
+  function _getFrameBufferStatus(status) {
+    switch (status) {
+      case 36053 /* FRAMEBUFFER_COMPLETE */:
+        return "success";
+      case 36054 /* FRAMEBUFFER_INCOMPLETE_ATTACHMENT */:
+        return "Mismatched attachments";
+      case 36055 /* FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT */:
+        return "No attachments";
+      case 36057 /* FRAMEBUFFER_INCOMPLETE_DIMENSIONS */:
+        return "Height/width mismatch";
+      case 36061 /* FRAMEBUFFER_UNSUPPORTED */:
+        return "Unsupported or split attachments";
+      case 36182 /* FRAMEBUFFER_INCOMPLETE_MULTISAMPLE */:
+        return "Samples mismatch";
+      default:
+        return `${status}`;
     }
-    return true;
   }
 
-  // src/adapter/converters/device-parameters.ts
-  var import_core4 = __toESM(require_core(), 1);
-  function withDeviceAndGLParameters(device, parameters, glParameters, func) {
-    if (isObjectEmpty3(parameters)) {
-      return func(device);
-    }
-    const webglDevice = device;
-    webglDevice.pushState();
-    try {
-      setDeviceParameters(device, parameters);
-      setGLParameters(webglDevice.gl, glParameters);
-      return func(device);
-    } finally {
-      webglDevice.popState();
+  // src/adapter/webgl-canvas-context.ts
+  var WebGLCanvasContext = class extends import_core5.CanvasContext {
+    device;
+    format = "rgba8unorm";
+    depthStencilFormat = "depth24plus";
+    presentationSize;
+    _framebuffer = null;
+    constructor(device, props) {
+      super(props);
+      this.device = device;
+      this.presentationSize = [-1, -1];
+      this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
+      this.update();
     }
-  }
-  function withDeviceParameters(device, parameters, func) {
-    if (isObjectEmpty3(parameters)) {
-      return func(device);
+    getCurrentFramebuffer() {
+      this.update();
+      this._framebuffer = this._framebuffer || new WEBGLFramebuffer(this.device, { handle: null });
+      return this._framebuffer;
     }
-    const webglDevice = device;
-    webglDevice.pushState();
-    try {
-      setDeviceParameters(device, parameters);
-      return func(device);
-    } finally {
-      webglDevice.popState();
+    /** Resizes and updates render targets if necessary */
+    update() {
+      const size = this.getPixelSize();
+      const sizeChanged = size[0] !== this.presentationSize[0] || size[1] !== this.presentationSize[1];
+      if (sizeChanged) {
+        this.presentationSize = size;
+        this.resize();
+      }
     }
-  }
-  function setDeviceParameters(device, parameters) {
-    const webglDevice = device;
-    const { gl } = webglDevice;
-    if (parameters.cullMode) {
-      switch (parameters.cullMode) {
-        case "none":
-          gl.disable(2884 /* CULL_FACE */);
-          break;
-        case "front":
-          gl.enable(2884 /* CULL_FACE */);
-          gl.cullFace(1028 /* FRONT */);
-          break;
-        case "back":
-          gl.enable(2884 /* CULL_FACE */);
-          gl.cullFace(1029 /* BACK */);
-          break;
+    /**
+     * Resize the canvas' drawing buffer.
+     *
+     * Can match the canvas CSS size, and optionally also consider devicePixelRatio
+     * Can be called every frame
+     *
+     * Regardless of size, the drawing buffer will always be scaled to the viewport, but
+     * for best visual results, usually set to either:
+     *  canvas CSS width x canvas CSS height
+     *  canvas CSS width * devicePixelRatio x canvas CSS height * devicePixelRatio
+     * See http://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
+     */
+    resize(options) {
+      if (!this.device.gl)
+        return;
+      if (this.canvas) {
+        const devicePixelRatio = this.getDevicePixelRatio(options?.useDevicePixels);
+        this.setDevicePixelRatio(devicePixelRatio, options);
+        return;
       }
     }
-    if (parameters.frontFace) {
-      gl.frontFace(
-        map("frontFace", parameters.frontFace, {
-          ccw: 2305 /* CCW */,
-          cw: 2304 /* CW */
-        })
-      );
+    commit() {
     }
-    if (parameters.unclippedDepth) {
-      if (device.features.has("depth-clip-control")) {
-        gl.enable(34383 /* DEPTH_CLAMP_EXT */);
-      }
+  };
+
+  // src/context/debug/spector.ts
+  var import_core6 = __toESM(require_core(), 1);
+
+  // src/utils/load-script.ts
+  async function loadScript(scriptUrl, scriptId) {
+    const head = document.getElementsByTagName("head")[0];
+    if (!head) {
+      throw new Error("loadScript");
     }
-    if (parameters.depthBias !== void 0) {
-      gl.enable(32823 /* POLYGON_OFFSET_FILL */);
-      gl.polygonOffset(parameters.depthBias, parameters.depthBiasSlopeScale || 0);
+    const script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", scriptUrl);
+    if (scriptId) {
+      script.id = scriptId;
     }
-    if (parameters.provokingVertex) {
-      if (device.features.has("provoking-vertex-webgl")) {
-        const extensions = webglDevice.getExtension("WEBGL_provoking_vertex");
-        const ext = extensions.WEBGL_provoking_vertex;
-        const vertex = map(
-          "provokingVertex",
-          parameters.provokingVertex,
-          {
-            first: 36429 /* FIRST_VERTEX_CONVENTION_WEBGL */,
-            last: 36430 /* LAST_VERTEX_CONVENTION_WEBGL */
-          }
-        );
-        ext?.provokingVertexWEBGL(vertex);
+    return new Promise((resolve, reject) => {
+      script.onload = resolve;
+      script.onerror = (error) => reject(new Error(`Unable to load script '${scriptUrl}': ${error}`));
+      head.appendChild(script);
+    });
+  }
+
+  // src/context/debug/spector.ts
+  var LOG_LEVEL = 1;
+  var spector = null;
+  var initialized = false;
+  var DEFAULT_SPECTOR_PROPS = {
+    debugSpectorJS: import_core6.log.get("debug-spectorjs"),
+    // https://github.com/BabylonJS/Spector.js#basic-usage
+    // https://forum.babylonjs.com/t/spectorcdn-is-temporarily-off/48241
+    // spectorUrl: 'https://spectorcdn.babylonjs.com/spector.bundle.js';
+    debugSpectorJSUrl: "https://cdn.jsdelivr.net/npm/spectorjs@0.9.30/dist/spector.bundle.js",
+    gl: void 0
+  };
+  async function loadSpectorJS(props) {
+    if (!globalThis.SPECTOR) {
+      try {
+        await loadScript(props.debugSpectorJSUrl || DEFAULT_SPECTOR_PROPS.debugSpectorJSUrl);
+      } catch (error) {
+        import_core6.log.warn(String(error));
       }
     }
-    if (parameters.polygonMode || parameters.polygonOffsetLine) {
-      if (device.features.has("polygon-mode-webgl")) {
-        if (parameters.polygonMode) {
-          const extensions = webglDevice.getExtension("WEBGL_polygon_mode");
-          const ext = extensions.WEBGL_polygon_mode;
-          const mode = map("polygonMode", parameters.polygonMode, {
-            fill: 6914 /* FILL_WEBGL */,
-            line: 6913 /* LINE_WEBGL */
-          });
-          ext?.polygonModeWEBGL(1028 /* FRONT */, mode);
-          ext?.polygonModeWEBGL(1029 /* BACK */, mode);
-        }
-        if (parameters.polygonOffsetLine) {
-          gl.enable(10754 /* POLYGON_OFFSET_LINE_WEBGL */);
-        }
-      }
+  }
+  function initializeSpectorJS(props) {
+    props = { ...DEFAULT_SPECTOR_PROPS, ...props };
+    if (!props.debugSpectorJS) {
+      return null;
     }
-    if (device.features.has("shader-clip-cull-distance-webgl")) {
-      if (parameters.clipDistance0) {
-        gl.enable(12288 /* CLIP_DISTANCE0_WEBGL */);
-      }
-      if (parameters.clipDistance1) {
-        gl.enable(12289 /* CLIP_DISTANCE1_WEBGL */);
-      }
-      if (parameters.clipDistance2) {
-        gl.enable(12290 /* CLIP_DISTANCE2_WEBGL */);
-      }
-      if (parameters.clipDistance3) {
-        gl.enable(12291 /* CLIP_DISTANCE3_WEBGL */);
-      }
-      if (parameters.clipDistance4) {
-        gl.enable(12292 /* CLIP_DISTANCE4_WEBGL */);
-      }
-      if (parameters.clipDistance5) {
-        gl.enable(12293 /* CLIP_DISTANCE5_WEBGL */);
-      }
-      if (parameters.clipDistance6) {
-        gl.enable(12294 /* CLIP_DISTANCE6_WEBGL */);
-      }
-      if (parameters.clipDistance7) {
-        gl.enable(12295 /* CLIP_DISTANCE7_WEBGL */);
+    if (!spector && globalThis.SPECTOR && !globalThis.luma?.spector) {
+      import_core6.log.probe(LOG_LEVEL, "SPECTOR found and initialized. Start with `luma.spector.displayUI()`")();
+      const { Spector: SpectorJS } = globalThis.SPECTOR;
+      spector = new SpectorJS();
+      if (globalThis.luma) {
+        globalThis.luma.spector = spector;
       }
     }
-    if (parameters.depthWriteEnabled !== void 0) {
-      gl.depthMask(mapBoolean("depthWriteEnabled", parameters.depthWriteEnabled));
+    if (!spector) {
+      return null;
     }
-    if (parameters.depthCompare) {
-      parameters.depthCompare !== "always" ? gl.enable(2929 /* DEPTH_TEST */) : gl.disable(2929 /* DEPTH_TEST */);
-      gl.depthFunc(convertCompareFunction("depthCompare", parameters.depthCompare));
+    if (!initialized) {
+      initialized = true;
+      spector.spyCanvases();
+      spector?.onCaptureStarted.add(
+        (capture) => import_core6.log.info("Spector capture started:", capture)()
+      );
+      spector?.onCapture.add((capture) => {
+        import_core6.log.info("Spector capture complete:", capture)();
+        spector?.getResultUI();
+        spector?.resultView.display();
+        spector?.resultView.addCapture(capture);
+      });
     }
-    if (parameters.stencilWriteMask) {
-      const mask = parameters.stencilWriteMask;
-      gl.stencilMaskSeparate(1028 /* FRONT */, mask);
-      gl.stencilMaskSeparate(1029 /* BACK */, mask);
+    if (props.gl) {
+      const gl = props.gl;
+      const device = gl.device;
+      spector?.startCapture(props.gl, 500);
+      gl.device = device;
+      new Promise((resolve) => setTimeout(resolve, 2e3)).then((_) => {
+        import_core6.log.info("Spector capture stopped after 2 seconds")();
+        spector?.stopCapture();
+      });
     }
-    if (parameters.stencilReadMask) {
-      import_core4.log.warn("stencilReadMask not supported under WebGL");
+    return spector;
+  }
+
+  // src/context/debug/webgl-developer-tools.ts
+  var import_core7 = __toESM(require_core(), 1);
+
+  // ../../node_modules/@probe.gl/env/dist/lib/globals.js
+  var document_ = globalThis.document || {};
+  var process_ = globalThis.process || {};
+  var console_ = globalThis.console;
+  var navigator_ = globalThis.navigator || {};
+
+  // ../../node_modules/@probe.gl/env/dist/lib/is-electron.js
+  function isElectron(mockUserAgent) {
+    if (typeof window !== "undefined" && window.process?.type === "renderer") {
+      return true;
     }
-    if (parameters.stencilCompare) {
-      const mask = parameters.stencilReadMask || 4294967295;
-      const glValue = convertCompareFunction("depthCompare", parameters.stencilCompare);
-      parameters.stencilCompare !== "always" ? gl.enable(2960 /* STENCIL_TEST */) : gl.disable(2960 /* STENCIL_TEST */);
-      gl.stencilFuncSeparate(1028 /* FRONT */, glValue, 0, mask);
-      gl.stencilFuncSeparate(1029 /* BACK */, glValue, 0, mask);
+    if (typeof process !== "undefined" && Boolean(process.versions?.["electron"])) {
+      return true;
     }
-    if (parameters.stencilPassOperation && parameters.stencilFailOperation && parameters.stencilDepthFailOperation) {
-      const dppass = convertStencilOperation("stencilPassOperation", parameters.stencilPassOperation);
-      const sfail = convertStencilOperation("stencilFailOperation", parameters.stencilFailOperation);
-      const dpfail = convertStencilOperation(
-        "stencilDepthFailOperation",
-        parameters.stencilDepthFailOperation
-      );
-      gl.stencilOpSeparate(1028 /* FRONT */, sfail, dpfail, dppass);
-      gl.stencilOpSeparate(1029 /* BACK */, sfail, dpfail, dppass);
+    const realUserAgent = typeof navigator !== "undefined" && navigator.userAgent;
+    const userAgent = mockUserAgent || realUserAgent;
+    return Boolean(userAgent && userAgent.indexOf("Electron") >= 0);
+  }
+
+  // ../../node_modules/@probe.gl/env/dist/lib/is-browser.js
+  function isBrowser() {
+    const isNode = (
+      // @ts-expect-error
+      typeof process === "object" && String(process) === "[object process]" && !process?.browser
+    );
+    return !isNode || isElectron();
+  }
+
+  // ../../node_modules/@probe.gl/env/dist/lib/get-browser.js
+  function getBrowser(mockUserAgent) {
+    if (!mockUserAgent && !isBrowser()) {
+      return "Node";
     }
-    switch (parameters.blend) {
-      case true:
-        gl.enable(3042 /* BLEND */);
-        break;
-      case false:
-        gl.disable(3042 /* BLEND */);
-        break;
-      default:
+    if (isElectron(mockUserAgent)) {
+      return "Electron";
     }
-    if (parameters.blendColorOperation || parameters.blendAlphaOperation) {
-      const colorEquation = convertBlendOperationToEquation(
-        "blendColorOperation",
-        parameters.blendColorOperation || "add"
-      );
-      const alphaEquation = convertBlendOperationToEquation(
-        "blendAlphaOperation",
-        parameters.blendAlphaOperation || "add"
-      );
-      gl.blendEquationSeparate(colorEquation, alphaEquation);
-      const colorSrcFactor = convertBlendFactorToFunction(
-        "blendColorSrcFactor",
-        parameters.blendColorSrcFactor || "one"
-      );
-      const colorDstFactor = convertBlendFactorToFunction(
-        "blendColorDstFactor",
-        parameters.blendColorDstFactor || "zero"
-      );
-      const alphaSrcFactor = convertBlendFactorToFunction(
-        "blendAlphaSrcFactor",
-        parameters.blendAlphaSrcFactor || "one"
-      );
-      const alphaDstFactor = convertBlendFactorToFunction(
-        "blendAlphaDstFactor",
-        parameters.blendAlphaDstFactor || "zero"
-      );
-      gl.blendFuncSeparate(colorSrcFactor, colorDstFactor, alphaSrcFactor, alphaDstFactor);
+    const userAgent = mockUserAgent || navigator_.userAgent || "";
+    if (userAgent.indexOf("Edge") > -1) {
+      return "Edge";
+    }
+    if (globalThis.chrome) {
+      return "Chrome";
+    }
+    if (globalThis.safari) {
+      return "Safari";
+    }
+    if (globalThis.mozInnerScreenX) {
+      return "Firefox";
     }
+    return "Unknown";
   }
-  function convertCompareFunction(parameter, value) {
-    return map(parameter, value, {
-      never: 512 /* NEVER */,
-      less: 513 /* LESS */,
-      equal: 514 /* EQUAL */,
-      "less-equal": 515 /* LEQUAL */,
-      greater: 516 /* GREATER */,
-      "not-equal": 517 /* NOTEQUAL */,
-      "greater-equal": 518 /* GEQUAL */,
-      always: 519 /* ALWAYS */
-    });
+
+  // src/context/debug/webgl-developer-tools.ts
+  var WEBGL_DEBUG_CDN_URL = "https://unpkg.com/webgl-debug@2.0.1/index.js";
+  function getWebGLContextData(gl) {
+    gl.luma = gl.luma || {};
+    return gl.luma;
   }
-  function convertStencilOperation(parameter, value) {
-    return map(parameter, value, {
-      keep: 7680 /* KEEP */,
-      zero: 0 /* ZERO */,
-      replace: 7681 /* REPLACE */,
-      invert: 5386 /* INVERT */,
-      "increment-clamp": 7682 /* INCR */,
-      "decrement-clamp": 7683 /* DECR */,
-      "increment-wrap": 34055 /* INCR_WRAP */,
-      "decrement-wrap": 34056 /* DECR_WRAP */
-    });
+  async function loadWebGLDeveloperTools() {
+    if (isBrowser() && !globalThis.WebGLDebugUtils) {
+      globalThis.global = globalThis.global || globalThis;
+      globalThis.global.module = {};
+      await loadScript(WEBGL_DEBUG_CDN_URL);
+    }
   }
-  function convertBlendOperationToEquation(parameter, value) {
-    return map(parameter, value, {
-      add: 32774 /* FUNC_ADD */,
-      subtract: 32778 /* FUNC_SUBTRACT */,
-      "reverse-subtract": 32779 /* FUNC_REVERSE_SUBTRACT */,
-      min: 32775 /* MIN */,
-      max: 32776 /* MAX */
-    });
+  function makeDebugContext(gl, props = {}) {
+    return props.debugWebGL ? getDebugContext(gl, props) : getRealContext(gl);
   }
-  function convertBlendFactorToFunction(parameter, value) {
-    return map(parameter, value, {
-      one: 1 /* ONE */,
-      zero: 0 /* ZERO */,
-      "src-color": 768 /* SRC_COLOR */,
-      "one-minus-src-color": 769 /* ONE_MINUS_SRC_COLOR */,
-      "dst-color": 774 /* DST_COLOR */,
-      "one-minus-dst-color": 775 /* ONE_MINUS_DST_COLOR */,
-      "src-alpha": 770 /* SRC_ALPHA */,
-      "one-minus-src-alpha": 771 /* ONE_MINUS_SRC_ALPHA */,
-      "dst-alpha": 772 /* DST_ALPHA */,
-      "one-minus-dst-alpha": 773 /* ONE_MINUS_DST_ALPHA */,
-      "src-alpha-saturated": 776 /* SRC_ALPHA_SATURATE */,
-      "constant-color": 32769 /* CONSTANT_COLOR */,
-      "one-minus-constant-color": 32770 /* ONE_MINUS_CONSTANT_COLOR */,
-      "constant-alpha": 32771 /* CONSTANT_ALPHA */,
-      "one-minus-constant-alpha": 32772 /* ONE_MINUS_CONSTANT_ALPHA */
-    });
-  }
-  function message(parameter, value) {
-    return `Illegal parameter ${value} for ${parameter}`;
-  }
-  function map(parameter, value, valueMap) {
-    if (!(value in valueMap)) {
-      throw new Error(message(parameter, value));
-    }
-    return valueMap[value];
-  }
-  function mapBoolean(parameter, value) {
-    return value;
-  }
-  function isObjectEmpty3(obj) {
-    let isEmpty = true;
-    for (const key in obj) {
-      isEmpty = false;
-      break;
-    }
-    return isEmpty;
+  function getRealContext(gl) {
+    const data = getWebGLContextData(gl);
+    return data.realContext ? data.realContext : gl;
   }
-
-  // src/adapter/converters/sampler-parameters.ts
-  function convertSamplerParametersToWebGL(props) {
-    const params = {};
-    if (props.addressModeU) {
-      params[10242 /* TEXTURE_WRAP_S */] = convertAddressMode(props.addressModeU);
-    }
-    if (props.addressModeV) {
-      params[10243 /* TEXTURE_WRAP_T */] = convertAddressMode(props.addressModeV);
-    }
-    if (props.addressModeW) {
-      params[32882 /* TEXTURE_WRAP_R */] = convertAddressMode(props.addressModeW);
-    }
-    if (props.magFilter) {
-      params[10240 /* TEXTURE_MAG_FILTER */] = convertMaxFilterMode(props.magFilter);
-    }
-    if (props.minFilter || props.mipmapFilter) {
-      params[10241 /* TEXTURE_MIN_FILTER */] = convertMinFilterMode(
-        props.minFilter || "linear",
-        props.mipmapFilter
-      );
-    }
-    if (props.lodMinClamp !== void 0) {
-      params[33082 /* TEXTURE_MIN_LOD */] = props.lodMinClamp;
-    }
-    if (props.lodMaxClamp !== void 0) {
-      params[33083 /* TEXTURE_MAX_LOD */] = props.lodMaxClamp;
+  function getDebugContext(gl, props) {
+    if (!globalThis.WebGLDebugUtils) {
+      import_core7.log.warn("webgl-debug not loaded")();
+      return gl;
     }
-    if (props.type === "comparison-sampler") {
-      params[34892 /* TEXTURE_COMPARE_MODE */] = 34894 /* COMPARE_REF_TO_TEXTURE */;
+    const data = getWebGLContextData(gl);
+    if (data.debugContext) {
+      return data.debugContext;
     }
-    if (props.compare) {
-      params[34893 /* TEXTURE_COMPARE_FUNC */] = convertCompareFunction("compare", props.compare);
+    globalThis.WebGLDebugUtils.init({ ...GLEnum, ...gl });
+    const glDebug = globalThis.WebGLDebugUtils.makeDebugContext(
+      gl,
+      onGLError.bind(null, props),
+      onValidateGLFunc.bind(null, props)
+    );
+    for (const key in GLEnum) {
+      if (!(key in glDebug) && typeof GLEnum[key] === "number") {
+        glDebug[key] = GLEnum[key];
+      }
     }
-    if (props.maxAnisotropy) {
-      params[34046 /* TEXTURE_MAX_ANISOTROPY_EXT */] = props.maxAnisotropy;
+    class WebGLDebugContext {
     }
-    return params;
+    Object.setPrototypeOf(glDebug, Object.getPrototypeOf(gl));
+    Object.setPrototypeOf(WebGLDebugContext, glDebug);
+    const debugContext = Object.create(WebGLDebugContext);
+    data.realContext = gl;
+    data.debugContext = debugContext;
+    debugContext.debug = true;
+    return debugContext;
   }
-  function convertAddressMode(addressMode) {
-    switch (addressMode) {
-      case "clamp-to-edge":
-        return 33071 /* CLAMP_TO_EDGE */;
-      case "repeat":
-        return 10497 /* REPEAT */;
-      case "mirror-repeat":
-        return 33648 /* MIRRORED_REPEAT */;
-    }
+  function getFunctionString(functionName, functionArgs) {
+    functionArgs = Array.from(functionArgs).map((arg) => arg === void 0 ? "undefined" : arg);
+    let args = globalThis.WebGLDebugUtils.glFunctionArgsToString(functionName, functionArgs);
+    args = `${args.slice(0, 100)}${args.length > 100 ? "..." : ""}`;
+    return `gl.${functionName}(${args})`;
   }
-  function convertMaxFilterMode(maxFilter) {
-    switch (maxFilter) {
-      case "nearest":
-        return 9728 /* NEAREST */;
-      case "linear":
-        return 9729 /* LINEAR */;
-    }
+  function onGLError(props, err, functionName, args) {
+    args = Array.from(args).map((arg) => arg === void 0 ? "undefined" : arg);
+    const errorMessage = globalThis.WebGLDebugUtils.glEnumToString(err);
+    const functionArgs = globalThis.WebGLDebugUtils.glFunctionArgsToString(functionName, args);
+    const message2 = `${errorMessage} in gl.${functionName}(${functionArgs})`;
+    import_core7.log.error(message2)();
+    debugger;
   }
-  function convertMinFilterMode(minFilter, mipmapFilter) {
-    if (!mipmapFilter) {
-      return convertMaxFilterMode(minFilter);
+  function onValidateGLFunc(props, functionName, functionArgs) {
+    let functionString = "";
+    if (import_core7.log.level >= 1) {
+      functionString = getFunctionString(functionName, functionArgs);
+      import_core7.log.log(1, functionString)();
     }
-    switch (minFilter) {
-      case "nearest":
-        return mipmapFilter === "nearest" ? 9984 /* NEAREST_MIPMAP_NEAREST */ : 9986 /* NEAREST_MIPMAP_LINEAR */;
-      case "linear":
-        return mipmapFilter === "nearest" ? 9985 /* LINEAR_MIPMAP_NEAREST */ : 9987 /* LINEAR_MIPMAP_LINEAR */;
+    for (const arg of functionArgs) {
+      if (arg === void 0) {
+        functionString = functionString || getFunctionString(functionName, functionArgs);
+        debugger;
+      }
     }
   }
 
-  // src/adapter/resources/webgl-sampler.ts
-  var import_core5 = __toESM(require_core(), 1);
-  var WEBGLSampler = class extends import_core5.Sampler {
+  // src/utils/uid.ts
+  var uidCounters = {};
+  function uid(id = "id") {
+    uidCounters[id] = uidCounters[id] || 1;
+    const count = uidCounters[id]++;
+    return `${id}-${count}`;
+  }
+
+  // src/adapter/resources/webgl-buffer.ts
+  var import_core8 = __toESM(require_core(), 1);
+  var WEBGLBuffer = class extends import_core8.Buffer {
     device;
+    gl;
     handle;
-    parameters;
-    constructor(device, props) {
+    /** Target in OpenGL defines the type of buffer */
+    glTarget;
+    /** Usage is a hint on how frequently the buffer will be updates */
+    glUsage;
+    /** Index type is needed when issuing draw calls, so we pre-compute it */
+    glIndexType = 5123 /* UNSIGNED_SHORT */;
+    /** Number of bytes allocated on the GPU for this buffer */
+    byteLength;
+    /** Number of bytes used */
+    bytesUsed;
+    constructor(device, props = {}) {
       super(device, props);
       this.device = device;
-      this.parameters = convertSamplerParametersToWebGL(props);
-      this.handle = this.handle || this.device.gl.createSampler();
-      this._setSamplerParameters(this.parameters);
+      this.gl = this.device.gl;
+      const handle = typeof props === "object" ? props.handle : void 0;
+      this.handle = handle || this.gl.createBuffer();
+      device.setSpectorMetadata(this.handle, { ...this.props, data: typeof this.props.data });
+      this.glTarget = getWebGLTarget(this.props.usage);
+      this.glUsage = getWebGLUsage(this.props.usage);
+      this.glIndexType = this.props.indexType === "uint32" ? 5125 /* UNSIGNED_INT */ : 5123 /* UNSIGNED_SHORT */;
+      if (props.data) {
+        this._initWithData(props.data, props.byteOffset, props.byteLength);
+      } else {
+        this._initWithByteLength(props.byteLength || 0);
+      }
     }
-    destroy() {
-      if (this.handle) {
-        this.device.gl.deleteSampler(this.handle);
-        this.handle = void 0;
+    // PRIVATE METHODS
+    /** Allocate a new buffer and initialize to contents of typed array */
+    _initWithData(data, byteOffset = 0, byteLength = data.byteLength + byteOffset) {
+      const glTarget = this.glTarget;
+      this.gl.bindBuffer(glTarget, this.handle);
+      this.gl.bufferData(glTarget, byteLength, this.glUsage);
+      this.gl.bufferSubData(glTarget, byteOffset, data);
+      this.gl.bindBuffer(glTarget, null);
+      this.bytesUsed = byteLength;
+      this.byteLength = byteLength;
+      this._setDebugData(data, byteOffset, byteLength);
+      this.trackAllocatedMemory(byteLength);
+    }
+    // Allocate a GPU buffer of specified size.
+    _initWithByteLength(byteLength) {
+      let data = byteLength;
+      if (byteLength === 0) {
+        data = new Float32Array(0);
       }
+      const glTarget = this.glTarget;
+      this.gl.bindBuffer(glTarget, this.handle);
+      this.gl.bufferData(glTarget, data, this.glUsage);
+      this.gl.bindBuffer(glTarget, null);
+      this.bytesUsed = byteLength;
+      this.byteLength = byteLength;
+      this._setDebugData(null, 0, byteLength);
+      this.trackAllocatedMemory(byteLength);
+      return this;
     }
-    toString() {
-      return `Sampler(${this.id},${JSON.stringify(this.props)})`;
+    destroy() {
+      if (!this.destroyed && this.handle) {
+        this.removeStats();
+        this.trackDeallocatedMemory();
+        this.gl.deleteBuffer(this.handle);
+        this.destroyed = true;
+        this.handle = null;
+      }
     }
-    /** Set sampler parameters on the sampler */
-    _setSamplerParameters(parameters) {
-      for (const [pname, value] of Object.entries(parameters)) {
-        const param = Number(pname);
-        switch (param) {
-          case 33082 /* TEXTURE_MIN_LOD */:
-          case 33083 /* TEXTURE_MAX_LOD */:
-            this.device.gl.samplerParameterf(this.handle, param, value);
-            break;
-          default:
-            this.device.gl.samplerParameteri(this.handle, param, value);
-            break;
-        }
+    write(data, byteOffset = 0) {
+      const srcOffset = 0;
+      const byteLength = void 0;
+      const glTarget = 36663 /* COPY_WRITE_BUFFER */;
+      this.gl.bindBuffer(glTarget, this.handle);
+      if (srcOffset !== 0 || byteLength !== void 0) {
+        this.gl.bufferSubData(glTarget, byteOffset, data, srcOffset, byteLength);
+      } else {
+        this.gl.bufferSubData(glTarget, byteOffset, data);
       }
+      this.gl.bindBuffer(glTarget, null);
+      this._setDebugData(data, byteOffset, data.byteLength);
     }
-  };
-
-  // src/adapter/resources/webgl-texture-view.ts
-  var import_core6 = __toESM(require_core(), 1);
-  var WEBGLTextureView = class extends import_core6.TextureView {
-    device;
-    gl;
-    handle;
-    // Does not have a WebGL representation
-    texture;
-    constructor(device, props) {
-      super(device, { ...import_core6.Texture.defaultProps, ...props });
-      this.device = device;
-      this.gl = this.device.gl;
-      this.handle = null;
-      this.texture = props.texture;
+    /** Asynchronously read data from the buffer */
+    async readAsync(byteOffset = 0, byteLength) {
+      return this.readSyncWebGL(byteOffset, byteLength);
+    }
+    /** Synchronously read data from the buffer. WebGL only. */
+    readSyncWebGL(byteOffset = 0, byteLength) {
+      byteLength = byteLength ?? this.byteLength - byteOffset;
+      const data = new Uint8Array(byteLength);
+      const dstOffset = 0;
+      this.gl.bindBuffer(36662 /* COPY_READ_BUFFER */, this.handle);
+      this.gl.getBufferSubData(36662 /* COPY_READ_BUFFER */, byteOffset, data, dstOffset, byteLength);
+      this.gl.bindBuffer(36662 /* COPY_READ_BUFFER */, null);
+      this._setDebugData(data, byteOffset, byteLength);
+      return data;
     }
   };
-
-  // src/adapter/helpers/webgl-texture-utils.ts
-  var import_core7 = __toESM(require_core(), 1);
-
-  // src/adapter/helpers/typed-array-utils.ts
-  var ERR_TYPE_DEDUCTION = "Failed to deduce GL constant from typed array";
-  function getGLTypeFromTypedArray(arrayOrType) {
-    const type = ArrayBuffer.isView(arrayOrType) ? arrayOrType.constructor : arrayOrType;
-    switch (type) {
-      case Float32Array:
-        return 5126 /* FLOAT */;
-      case Uint16Array:
-        return 5123 /* UNSIGNED_SHORT */;
-      case Uint32Array:
-        return 5125 /* UNSIGNED_INT */;
-      case Uint8Array:
-        return 5121 /* UNSIGNED_BYTE */;
-      case Uint8ClampedArray:
-        return 5121 /* UNSIGNED_BYTE */;
-      case Int8Array:
-        return 5120 /* BYTE */;
-      case Int16Array:
-        return 5122 /* SHORT */;
-      case Int32Array:
-        return 5124 /* INT */;
-      default:
-        throw new Error(ERR_TYPE_DEDUCTION);
+  function getWebGLTarget(usage) {
+    if (usage & import_core8.Buffer.INDEX) {
+      return 34963 /* ELEMENT_ARRAY_BUFFER */;
     }
+    if (usage & import_core8.Buffer.VERTEX) {
+      return 34962 /* ARRAY_BUFFER */;
+    }
+    if (usage & import_core8.Buffer.UNIFORM) {
+      return 35345 /* UNIFORM_BUFFER */;
+    }
+    return 34962 /* ARRAY_BUFFER */;
   }
-  function getTypedArrayFromGLType(glType, options) {
-    const { clamped = true } = options || {};
-    switch (glType) {
-      case 5126 /* FLOAT */:
-        return Float32Array;
-      case 5123 /* UNSIGNED_SHORT */:
-      case 33635 /* UNSIGNED_SHORT_5_6_5 */:
-      case 32819 /* UNSIGNED_SHORT_4_4_4_4 */:
-      case 32820 /* UNSIGNED_SHORT_5_5_5_1 */:
-        return Uint16Array;
-      case 5125 /* UNSIGNED_INT */:
-        return Uint32Array;
-      case 5121 /* UNSIGNED_BYTE */:
-        return clamped ? Uint8ClampedArray : Uint8Array;
-      case 5120 /* BYTE */:
-        return Int8Array;
-      case 5122 /* SHORT */:
-        return Int16Array;
-      case 5124 /* INT */:
-        return Int32Array;
-      default:
-        throw new Error("Failed to deduce typed array type from GL constant");
+  function getWebGLUsage(usage) {
+    if (usage & import_core8.Buffer.INDEX) {
+      return 35044 /* STATIC_DRAW */;
+    }
+    if (usage & import_core8.Buffer.VERTEX) {
+      return 35044 /* STATIC_DRAW */;
+    }
+    if (usage & import_core8.Buffer.UNIFORM) {
+      return 35048 /* DYNAMIC_DRAW */;
     }
+    return 35044 /* STATIC_DRAW */;
   }
 
-  // src/adapter/helpers/format-utils.ts
-  function glFormatToComponents(format) {
-    switch (format) {
-      case 6406 /* ALPHA */:
-      case 33326 /* R32F */:
-      case 6403 /* RED */:
-        return 1;
-      case 33328 /* RG32F */:
-      case 33319 /* RG */:
-        return 2;
-      case 6407 /* RGB */:
-      case 34837 /* RGB32F */:
-        return 3;
-      case 6408 /* RGBA */:
-      case 34836 /* RGBA32F */:
-        return 4;
-      default:
-        return 0;
+  // src/adapter/resources/webgl-shader.ts
+  var import_core9 = __toESM(require_core(), 1);
+
+  // src/adapter/helpers/parse-shader-compiler-log.ts
+  function parseShaderCompilerLog(errLog) {
+    const lines = errLog.split(/\r?\n/);
+    const messages = [];
+    for (const line of lines) {
+      if (line.length <= 1) {
+        continue;
+      }
+      const segments = line.split(":");
+      if (segments.length === 2) {
+        const [messageType2, message2] = segments;
+        messages.push({
+          message: message2.trim(),
+          type: getMessageType(messageType2),
+          lineNum: 0,
+          linePos: 0
+        });
+        continue;
+      }
+      const [messageType, linePosition, lineNumber, ...rest] = segments;
+      let lineNum = parseInt(lineNumber, 10);
+      if (isNaN(lineNum)) {
+        lineNum = 0;
+      }
+      let linePos = parseInt(linePosition, 10);
+      if (isNaN(linePos)) {
+        linePos = 0;
+      }
+      messages.push({
+        message: rest.join(":").trim(),
+        type: getMessageType(messageType),
+        lineNum,
+        linePos
+        // TODO
+      });
     }
+    return messages;
   }
-  function glTypeToBytes(type) {
-    switch (type) {
-      case 5121 /* UNSIGNED_BYTE */:
-        return 1;
-      case 33635 /* UNSIGNED_SHORT_5_6_5 */:
-      case 32819 /* UNSIGNED_SHORT_4_4_4_4 */:
-      case 32820 /* UNSIGNED_SHORT_5_5_5_1 */:
-        return 2;
-      case 5126 /* FLOAT */:
-        return 4;
-      default:
-        return 0;
-    }
+  function getMessageType(messageType) {
+    const MESSAGE_TYPES = ["warning", "error", "info"];
+    const lowerCaseType = messageType.toLowerCase();
+    return MESSAGE_TYPES.includes(lowerCaseType) ? lowerCaseType : "info";
   }
 
-  // src/adapter/helpers/webgl-texture-utils.ts
-  function initializeTextureStorage(gl, levels, options) {
-    const { dimension, width, height, depth = 0 } = options;
-    const { glInternalFormat } = options;
-    const glTarget = options.glTarget;
-    switch (dimension) {
-      case "2d-array":
-      case "3d":
-        gl.texStorage3D(glTarget, levels, glInternalFormat, width, height, depth);
-        break;
-      default:
-        gl.texStorage2D(glTarget, levels, glInternalFormat, width, height);
+  // src/adapter/resources/webgl-shader.ts
+  var WEBGLShader = class extends import_core9.Shader {
+    device;
+    handle;
+    constructor(device, props) {
+      super(device, props);
+      this.device = device;
+      switch (this.props.stage) {
+        case "vertex":
+          this.handle = this.props.handle || this.device.gl.createShader(35633 /* VERTEX_SHADER */);
+          break;
+        case "fragment":
+          this.handle = this.props.handle || this.device.gl.createShader(35632 /* FRAGMENT_SHADER */);
+          break;
+        default:
+          throw new Error(this.props.stage);
+      }
+      this._compile(this.source);
     }
-  }
-  function copyExternalImageToMipLevel(gl, handle, image, options) {
-    const { width, height } = options;
-    const { dimension, depth = 0, mipLevel = 0 } = options;
-    const { x = 0, y = 0, z = 0 } = options;
-    const { glFormat, glType } = options;
-    const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
-    switch (dimension) {
-      case "2d-array":
-      case "3d":
-        gl.bindTexture(glTarget, handle);
-        gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, image);
-        gl.bindTexture(glTarget, null);
-        break;
-      case "2d":
-      case "cube":
-        gl.bindTexture(glTarget, handle);
-        gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, image);
-        gl.bindTexture(glTarget, null);
-        break;
-      default:
-        throw new Error(dimension);
+    destroy() {
+      if (this.handle) {
+        this.removeStats();
+        this.device.gl.deleteShader(this.handle);
+        this.destroyed = true;
+      }
     }
-  }
-  function copyCPUDataToMipLevel(gl, typedArray, options) {
-    const { dimension, width, height, depth = 0, mipLevel = 0, byteOffset = 0 } = options;
-    const { x = 0, y = 0, z = 0 } = options;
-    const { glFormat, glType, compressed } = options;
-    const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
-    switch (dimension) {
-      case "2d-array":
-      case "3d":
-        if (compressed) {
-          gl.compressedTexSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, typedArray, byteOffset);
-        } else {
-          gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, typedArray, byteOffset);
-        }
-        break;
-      case "2d":
-      case "cube":
-        if (compressed) {
-          gl.compressedTexSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, typedArray, byteOffset);
-        } else {
-          gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, typedArray, byteOffset);
-        }
-        break;
-      default:
-        throw new Error(dimension);
+    get asyncCompilationStatus() {
+      return this._waitForCompilationComplete().then(() => this.compilationStatus);
     }
-  }
-  function getWebGLTextureTarget(dimension) {
-    switch (dimension) {
-      case "1d":
-        break;
-      case "2d":
-        return 3553 /* TEXTURE_2D */;
-      case "3d":
-        return 32879 /* TEXTURE_3D */;
-      case "cube":
-        return 34067 /* TEXTURE_CUBE_MAP */;
-      case "2d-array":
-        return 35866 /* TEXTURE_2D_ARRAY */;
-      case "cube-array":
-        break;
+    async getCompilationInfo() {
+      await this._waitForCompilationComplete();
+      return this.getCompilationInfoSync();
     }
-    throw new Error(dimension);
-  }
-  function getWebGLCubeFaceTarget(glTarget, dimension, level) {
-    return dimension === "cube" ? 34069 /* TEXTURE_CUBE_MAP_POSITIVE_X */ + level : glTarget;
-  }
-  function readPixelsToArray(source, options) {
-    const {
-      sourceX = 0,
-      sourceY = 0,
-      sourceAttachment = 36064 /* COLOR_ATTACHMENT0 */
-      // TODO - support gl.readBuffer
-    } = options || {};
-    let {
-      target = null,
-      // following parameters are auto deduced if not provided
-      sourceWidth,
-      sourceHeight,
-      sourceDepth,
-      sourceFormat,
-      sourceType
-    } = options || {};
-    const { framebuffer, deleteFramebuffer } = getFramebuffer(source);
-    const { gl, handle } = framebuffer;
-    const attachment = sourceAttachment - 36064 /* COLOR_ATTACHMENT0 */;
-    sourceWidth ||= framebuffer.width;
-    sourceHeight ||= framebuffer.height;
-    sourceDepth = framebuffer.colorAttachments[attachment]?.texture?.depth || 1;
-    sourceFormat ||= framebuffer.colorAttachments[attachment]?.texture?.glFormat || 6408 /* RGBA */;
-    sourceType ||= framebuffer.colorAttachments[attachment]?.texture?.glType || 5121 /* UNSIGNED_BYTE */;
-    target = getPixelArray(target, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
-    sourceType = sourceType || getGLTypeFromTypedArray(target);
-    const prevHandle = gl.bindFramebuffer(36160 /* FRAMEBUFFER */, handle);
-    gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target);
-    gl.bindFramebuffer(36160 /* FRAMEBUFFER */, prevHandle || null);
-    if (deleteFramebuffer) {
-      framebuffer.destroy();
-    }
-    return target;
-  }
-  function readPixelsToBuffer(source, options) {
-    const {
-      target,
-      sourceX = 0,
-      sourceY = 0,
-      sourceFormat = 6408 /* RGBA */,
-      targetByteOffset = 0
-    } = options || {};
-    let { sourceWidth, sourceHeight, sourceType } = options || {};
-    const { framebuffer, deleteFramebuffer } = getFramebuffer(source);
-    sourceWidth = sourceWidth || framebuffer.width;
-    sourceHeight = sourceHeight || framebuffer.height;
-    const webglFramebuffer = framebuffer;
-    sourceType = sourceType || 5121 /* UNSIGNED_BYTE */;
-    let webglBufferTarget = target;
-    if (!webglBufferTarget) {
-      const components = glFormatToComponents(sourceFormat);
-      const byteCount = glTypeToBytes(sourceType);
-      const byteLength = targetByteOffset + sourceWidth * sourceHeight * components * byteCount;
-      webglBufferTarget = webglFramebuffer.device.createBuffer({ byteLength });
-    }
-    const commandEncoder = source.device.createCommandEncoder();
-    commandEncoder.copyTextureToBuffer({
-      source,
-      width: sourceWidth,
-      height: sourceHeight,
-      origin: [sourceX, sourceY],
-      destination: webglBufferTarget,
-      byteOffset: targetByteOffset
-    });
-    commandEncoder.destroy();
-    if (deleteFramebuffer) {
-      framebuffer.destroy();
-    }
-    return webglBufferTarget;
-  }
-  function getFramebuffer(source) {
-    if (!(source instanceof import_core7.Framebuffer)) {
-      return { framebuffer: toFramebuffer(source), deleteFramebuffer: true };
-    }
-    return { framebuffer: source, deleteFramebuffer: false };
-  }
-  function toFramebuffer(texture, props) {
-    const { device, width, height, id } = texture;
-    const framebuffer = device.createFramebuffer({
-      ...props,
-      id: `framebuffer-for-${id}`,
-      width,
-      height,
-      colorAttachments: [texture]
-    });
-    return framebuffer;
-  }
-  function getPixelArray(pixelArray, type, format, width, height, depth) {
-    if (pixelArray) {
-      return pixelArray;
-    }
-    type = type || 5121 /* UNSIGNED_BYTE */;
-    const ArrayType = getTypedArrayFromGLType(type, { clamped: false });
-    const components = glFormatToComponents(format);
-    return new ArrayType(width * height * components);
-  }
-
-  // src/adapter/resources/webgl-texture.ts
-  function normalizeTextureData(data, options) {
-    let lodArray;
-    if (ArrayBuffer.isView(data)) {
-      lodArray = [
-        {
-          // ts-expect-error does data really need to be Uint8ClampedArray?
-          data,
-          width: options.width,
-          height: options.height
-          // depth: options.depth
-        }
-      ];
-    } else if (!Array.isArray(data)) {
-      lodArray = [data];
-    } else {
-      lodArray = data;
-    }
-    return lodArray;
-  }
-  var WEBGLTexture = class extends import_core8.Texture {
-    MAX_ATTRIBUTES;
-    device;
-    gl;
-    handle;
-    sampler = void 0;
-    // TODO - currently unused in WebGL. Create dummy sampler?
-    view = void 0;
-    // TODO - currently unused in WebGL. Create dummy view?
-    mipmaps = false;
-    /**
-     * @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
-     */
-    glTarget;
-    // Texture type
-    /** The WebGL format - essentially channel structure */
-    glFormat;
-    /** The WebGL data format - the type of each channel */
-    glType;
-    /** The WebGL constant corresponding to the WebGPU style constant in format */
-    glInternalFormat;
-    /** Whether the internal format is compressed */
-    compressed;
-    // data;
-    // inherited props
-    // dimension: ...
-    // format: GLTextureTarget;
-    // width: number = undefined;
-    // height: number = undefined;
-    // depth: number = undefined;
-    // state
-    /** Texture binding slot */
-    textureUnit = 0;
-    /** For automatically updating video */
-    _video = null;
-    constructor(device, props) {
-      props = import_core8.Texture._fixProps(props);
-      super(device, { ...import_core8.Texture.defaultProps, ...props, data: void 0 });
-      this.device = device;
-      this.gl = this.device.gl;
-      this.glTarget = getWebGLTextureTarget(this.props.dimension);
-      const format = getTextureFormatWebGL(this.props.format);
-      this.glInternalFormat = format.internalFormat;
-      this.glFormat = format.format;
-      this.glType = format.type;
-      this.compressed = format.compressed;
-      if (typeof HTMLVideoElement !== "undefined" && props.data instanceof HTMLVideoElement && // @ts-expect-error
-      props.data.readyState < HTMLVideoElement.HAVE_METADATA) {
-        const video = props.data;
-        this._video = null;
-        video.addEventListener("loadeddata", () => this.initialize(props));
-      }
-      this.initialize({ ...this.props, data: props.data });
-      Object.seal(this);
-    }
-    /**
-     * Initialize texture with supplied props
-     */
-    // eslint-disable-next-line max-statements
-    initialize(props = {}) {
-      this.handle = this.props.handle || this.gl.createTexture();
-      this.device.setSpectorMetadata(this.handle, { ...this.props, data: typeof this.props.data });
-      const data = props.data;
-      let { width, height } = props;
-      if (!width || !height) {
-        const textureSize = import_core8.Texture.getTextureDataSize(data);
-        width = textureSize?.width || 1;
-        height = textureSize?.height || 1;
-      }
-      this.width = width;
-      this.height = height;
-      this.depth = props.depth;
-      this.setSampler(props.sampler);
-      this.view = new WEBGLTextureView(this.device, { ...this.props, texture: this });
-      this.bind();
-      if (!this.props.data) {
-        initializeTextureStorage(this.gl, this.mipLevels, this);
-      }
-      if (props.data) {
-        switch (props.dimension) {
-          case "1d":
-            this.setTexture1DData(props.data);
-            break;
-          case "2d":
-            this.setTexture2DData(props.data);
-            break;
-          case "3d":
-            this.setTexture3DData(props.data);
-            break;
-          case "cube":
-            this.setTextureCubeData(props.data);
-            break;
-          case "2d-array":
-            this.setTextureArrayData(props.data);
-            break;
-          case "cube-array":
-            this.setTextureCubeArrayData(props.data);
-            break;
-          default:
-            throw new Error(props.dimension);
-        }
-      }
-      this.mipmaps = Boolean(props.mipmaps);
-      if (this.mipmaps) {
-        this.generateMipmap();
-      }
-    }
-    /*
-      initializeCube(props?: TextureProps): void {
-        const {mipmaps = true} = props; // , parameters = {} as Record<GL, any>} = props;
-    
-        // Store props for accessors
-        // this.props = props;
-    
-        // @ts-expect-error
-        this.setCubeMapData(props).then(() => {
-          // TODO - should genMipmap() be called on the cubemap or on the faces?
-          // TODO - without generateMipmap() cube textures do not work at all!!! Why?
-          if (mipmaps) {
-            this.generateMipmap(props);
-          }
-    
-          this.setSampler(props.sampler);
-    
-          // v8 compatibility?
-          // const {parameters = {} as Record<GL, any>} = props;
-          // this._setSamplerParameters(parameters);
-        });
-      }
-      */
-    destroy() {
-      if (this.handle) {
-        this.gl.deleteTexture(this.handle);
-        this.removeStats();
-        this.trackDeallocatedMemory("Texture");
-        this.destroyed = true;
-      }
-    }
-    toString() {
-      return `Texture(${this.id},${this.width}x${this.height})`;
-    }
-    createView(props) {
-      return new WEBGLTextureView(this.device, { ...props, texture: this });
-    }
-    setSampler(sampler = {}) {
-      let samplerProps;
-      if (sampler instanceof WEBGLSampler) {
-        this.sampler = sampler;
-        samplerProps = sampler.props;
-      } else {
-        this.sampler = new WEBGLSampler(this.device, sampler);
-        samplerProps = sampler;
-      }
-      const parameters = convertSamplerParametersToWebGL(samplerProps);
-      this._setSamplerParameters(parameters);
-    }
-    /** Update external texture (video frame or canvas) */
-    update() {
-      import_core8.log.warn("Texture.update() not implemented");
-    }
-    // Call to regenerate mipmaps after modifying texture(s)
-    generateMipmap(params = {}) {
-      if (!this.props.data) {
-        return;
-      }
-      this.mipmaps = true;
-      this.gl.bindTexture(this.glTarget, this.handle);
-      withGLParameters(this.gl, params, () => {
-        this.gl.generateMipmap(this.glTarget);
-      });
-      this.gl.bindTexture(this.glTarget, null);
-    }
-    // Image Data Setters
-    copyExternalImage(options) {
-      const size = import_core8.Texture.getExternalImageSize(options.image);
-      const opts = { ...import_core8.Texture.defaultCopyExternalImageOptions, ...size, ...options };
-      const { image, depth, mipLevel, x, y, z } = opts;
-      let { width, height } = opts;
-      const { dimension, glTarget, glFormat, glInternalFormat, glType } = this;
-      width = Math.min(width, size.width - x);
-      height = Math.min(height, size.height - y);
-      if (options.sourceX || options.sourceY) {
-        throw new Error(
-          "WebGL does not yet support sourceX/sourceY in copyExternalImage; requires copyTexSubImage2D from a framebuffer"
-        );
-      }
-      copyExternalImageToMipLevel(this.device.gl, this.handle, image, {
-        dimension,
-        mipLevel,
-        x,
-        y,
-        z,
-        width,
-        height,
-        depth,
-        glFormat,
-        glInternalFormat,
-        glType,
-        glTarget
-      });
-      return { width: opts.width, height: opts.height };
-    }
-    setTexture1DData(data) {
-      throw new Error("setTexture1DData not supported in WebGL.");
-    }
-    /** Set a simple texture */
-    setTexture2DData(lodData, depth = 0) {
-      this.bind();
-      const lodArray = normalizeTextureData(lodData, this);
-      if (lodArray.length > 1 && this.props.mipmaps !== false) {
-        import_core8.log.warn(`Texture ${this.id} mipmap and multiple LODs.`)();
-      }
-      for (let lodLevel = 0; lodLevel < lodArray.length; lodLevel++) {
-        const imageData = lodArray[lodLevel];
-        this._setMipLevel(depth, lodLevel, imageData);
-      }
-      this.unbind();
+    getCompilationInfoSync() {
+      const shaderLog = this.device.gl.getShaderInfoLog(this.handle);
+      return shaderLog ? parseShaderCompilerLog(shaderLog) : [];
     }
-    /**
-     * Sets a 3D texture
-     * @param data
-     */
-    setTexture3DData(data) {
-      if (this.props.dimension !== "3d") {
-        throw new Error(this.id);
-      }
-      if (ArrayBuffer.isView(data)) {
-        this.bind();
-        copyCPUDataToMipLevel(this.device.gl, data, this);
-        this.unbind();
-      }
+    getTranslatedSource() {
+      const extensions = this.device.getExtension("WEBGL_debug_shaders");
+      const ext = extensions.WEBGL_debug_shaders;
+      return ext?.getTranslatedShaderSource(this.handle) || null;
     }
-    /**
-     * Set a Texture Cube Data
-     * @todo - could support TextureCubeArray with depth
-     * @param data
-     * @param index
-     */
-    setTextureCubeData(data, depth = 0) {
-      if (this.props.dimension !== "cube") {
-        throw new Error(this.id);
+    // PRIVATE METHODS
+    /** Compile a shader and get compilation status */
+    async _compile(source) {
+      source = source.startsWith("#version ") ? source : `#version 300 es
+${source}`;
+      const { gl } = this.device;
+      gl.shaderSource(this.handle, source);
+      gl.compileShader(this.handle);
+      if (import_core9.log.level === 0) {
+        this.compilationStatus = "pending";
+        return;
       }
-      for (const face of import_core8.Texture.CubeFaces) {
-        this.setTextureCubeFaceData(data[face], face);
+      if (!this.device.features.has("compilation-status-async-webgl")) {
+        this._getCompilationStatus();
+        this.debugShader();
+        if (this.compilationStatus === "error") {
+          throw new Error(`GLSL compilation errors in ${this.props.stage} shader ${this.props.id}`);
+        }
+        return;
       }
+      import_core9.log.once(1, "Shader compilation is asynchronous")();
+      await this._waitForCompilationComplete();
+      import_core9.log.info(2, `Shader ${this.id} - async compilation complete: ${this.compilationStatus}`)();
+      this._getCompilationStatus();
+      this.debugShader();
     }
-    /**
-     * Sets an entire texture array
-     * @param data
-     */
-    setTextureArrayData(data) {
-      if (this.props.dimension !== "2d-array") {
-        throw new Error(this.id);
+    /** Use KHR_parallel_shader_compile extension if available */
+    async _waitForCompilationComplete() {
+      const waitMs = async (ms) => await new Promise((resolve) => setTimeout(resolve, ms));
+      const DELAY_MS = 10;
+      if (!this.device.features.has("compilation-status-async-webgl")) {
+        await waitMs(DELAY_MS);
+        return;
+      }
+      const { gl } = this.device;
+      for (; ; ) {
+        const complete = gl.getShaderParameter(this.handle, 37297 /* COMPLETION_STATUS_KHR */);
+        if (complete) {
+          return;
+        }
+        await waitMs(DELAY_MS);
       }
-      throw new Error("setTextureArrayData not implemented.");
     }
     /**
-     * Sets an entire texture cube array
-     * @param data
+     * 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
      */
-    setTextureCubeArrayData(data) {
-      throw new Error("setTextureCubeArrayData not supported in WebGL2.");
+    _getCompilationStatus() {
+      this.compilationStatus = this.device.gl.getShaderParameter(this.handle, 35713 /* COMPILE_STATUS */) ? "success" : "error";
     }
-    setTextureCubeFaceData(lodData, face, depth = 0) {
-      if (Array.isArray(lodData) && lodData.length > 1 && this.props.mipmaps !== false) {
-        import_core8.log.warn(`${this.id} has mipmap and multiple LODs.`)();
-      }
-      const faceDepth = import_core8.Texture.CubeFaces.indexOf(face);
-      this.setTexture2DData(lodData, faceDepth);
+  };
+
+  // src/adapter/resources/webgl-sampler.ts
+  var import_core11 = __toESM(require_core(), 1);
+
+  // src/adapter/converters/device-parameters.ts
+  var import_core10 = __toESM(require_core(), 1);
+  function withDeviceAndGLParameters(device, parameters, glParameters, func) {
+    if (isObjectEmpty2(parameters)) {
+      return func(device);
     }
-    // INTERNAL METHODS
-    /** @todo update this method to accept LODs */
-    setImageDataForFace(options) {
-      const {
-        face,
-        width,
-        height,
-        pixels,
-        data,
-        format = 6408 /* RGBA */,
-        type = 5121 /* UNSIGNED_BYTE */
-        // generateMipmap = false // TODO
-      } = options;
-      const { gl } = this;
-      const imageData = pixels || data;
-      this.bind();
-      if (imageData instanceof Promise) {
-        imageData.then(
-          (resolvedImageData) => this.setImageDataForFace(
-            Object.assign({}, options, {
-              face,
-              data: resolvedImageData,
-              pixels: resolvedImageData
-            })
-          )
-        );
-      } else if (this.width || this.height) {
-        gl.texImage2D(face, 0, format, width, height, 0, format, type, imageData);
-      } else {
-        gl.texImage2D(face, 0, format, format, type, imageData);
-      }
+    const webglDevice = device;
+    webglDevice.pushState();
+    try {
+      setDeviceParameters(device, parameters);
+      setGLParameters(webglDevice.gl, glParameters);
+      return func(device);
+    } finally {
+      webglDevice.popState();
     }
-    _getImageDataMap(faceData) {
-      for (let i = 0; i < import_core8.Texture.CubeFaces.length; ++i) {
-        const faceName = import_core8.Texture.CubeFaces[i];
-        if (faceData[faceName]) {
-          faceData[34069 /* TEXTURE_CUBE_MAP_POSITIVE_X */ + i] = faceData[faceName];
-          delete faceData[faceName];
-        }
-      }
-      return faceData;
+  }
+  function withDeviceParameters(device, parameters, func) {
+    if (isObjectEmpty2(parameters)) {
+      return func(device);
     }
-    // RESOURCE METHODS
-    /**
-     * Sets sampler parameters on texture
-     */
-    _setSamplerParameters(parameters) {
-      import_core8.log.log(1, "texture sampler parameters", parameters)();
-      this.gl.bindTexture(this.glTarget, this.handle);
-      for (const [pname, pvalue] of Object.entries(parameters)) {
-        const param = Number(pname);
-        const value = pvalue;
-        switch (param) {
-          case 33082 /* TEXTURE_MIN_LOD */:
-          case 33083 /* TEXTURE_MAX_LOD */:
-            this.gl.texParameterf(this.glTarget, param, value);
-            break;
-          case 10241 /* TEXTURE_MIN_FILTER */:
-            this.gl.texParameteri(this.glTarget, param, value);
-            break;
-          case 10242 /* TEXTURE_WRAP_S */:
-          case 10243 /* TEXTURE_WRAP_T */:
-            this.gl.texParameteri(this.glTarget, param, value);
-            break;
-          case 34046 /* TEXTURE_MAX_ANISOTROPY_EXT */:
-            if (this.device.features.has("texture-filterable-anisotropic-webgl")) {
-              this.gl.texParameteri(this.glTarget, param, value);
-            }
-            break;
-          default:
-            this.gl.texParameteri(this.glTarget, param, value);
-            break;
-        }
-      }
-      this.gl.bindTexture(this.glTarget, null);
+    const webglDevice = device;
+    webglDevice.pushState();
+    try {
+      setDeviceParameters(device, parameters);
+      return func(device);
+    } finally {
+      webglDevice.popState();
     }
-    // CLASSIC
-    /*
-      setCubeMapData(options: {
-        width: number;
-        height: number;
-        data: Record<GL, Texture2DData> | Record<TextureCubeFace, Texture2DData>;
-        format?: any;
-        type?: any;
-        /** @deprecated Use .data *
-        pixels: any;
-      }): void {
-        const {gl} = this;
-    
-        const {width, height, pixels, data, format = GL.RGBA, type = GL.UNSIGNED_BYTE} = options;
-    
-        // pixel data (imageDataMap) is an Object from Face to Image or Promise.
-        // For example:
-        // {
-        // GL.TEXTURE_CUBE_MAP_POSITIVE_X : Image-or-Promise,
-        // GL.TEXTURE_CUBE_MAP_NEGATIVE_X : Image-or-Promise,
-        // ... }
-        // To provide multiple level-of-details (LODs) this can be Face to Array
-        // of Image or Promise, like this
-        // {
-        // GL.TEXTURE_CUBE_MAP_POSITIVE_X : [Image-or-Promise-LOD-0, Image-or-Promise-LOD-1],
-        // GL.TEXTURE_CUBE_MAP_NEGATIVE_X : [Image-or-Promise-LOD-0, Image-or-Promise-LOD-1],
-        // ... }
-    
-        const imageDataMap = this._getImageDataMap(pixels || data);
-    
-        const resolvedFaces = WEBGLTexture.FACES.map(face => {
-          const facePixels = imageDataMap[face];
-          return Array.isArray(facePixels) ? facePixels : [facePixels];
-        });
-        this.bind();
-    
-        WEBGLTexture.FACES.forEach((face, index) => {
-          if (resolvedFaces[index].length > 1 && this.props.mipmaps !== false) {
-            // If the user provides multiple LODs, then automatic mipmap
-            // generation generateMipmap() should be disabled to avoid overwritting them.
-            log.warn(`${this.id} has mipmap and multiple LODs.`)();
-          }
-          resolvedFaces[index].forEach((image, lodLevel) => {
-            // TODO: adjust width & height for LOD!
-            if (width && height) {
-              gl.texImage2D(face, lodLevel, format, width, height, 0 /* border*, format, type, image);
-            } else {
-              gl.texImage2D(face, lodLevel, format, format, type, image);
-            }
-          });
-        });
-    
-        this.unbind();
-      }
-      */
-    // INTERNAL SETTERS
-    /**
-     * Copy a region of data from a CPU memory buffer into this texture.
-     * @todo -   GLUnpackParameters parameters
-     */
-    _setMipLevel(depth, mipLevel, textureData, glTarget = this.glTarget) {
-      if (import_core8.Texture.isExternalImage(textureData)) {
-        copyExternalImageToMipLevel(this.device.gl, this.handle, textureData, {
-          ...this,
-          depth,
-          mipLevel,
-          glTarget
-        });
-        return;
-      }
-      if (import_core8.Texture.isTextureLevelData(textureData)) {
-        copyCPUDataToMipLevel(this.device.gl, textureData.data, {
-          ...this,
-          depth,
-          mipLevel,
-          glTarget
-        });
-        return;
+  }
+  function setDeviceParameters(device, parameters) {
+    const webglDevice = device;
+    const { gl } = webglDevice;
+    if (parameters.cullMode) {
+      switch (parameters.cullMode) {
+        case "none":
+          gl.disable(2884 /* CULL_FACE */);
+          break;
+        case "front":
+          gl.enable(2884 /* CULL_FACE */);
+          gl.cullFace(1028 /* FRONT */);
+          break;
+        case "back":
+          gl.enable(2884 /* CULL_FACE */);
+          gl.cullFace(1029 /* BACK */);
+          break;
       }
-      throw new Error("Texture: invalid image data");
     }
-    // HELPERS
-    getActiveUnit() {
-      return this.gl.getParameter(34016 /* ACTIVE_TEXTURE */) - 33984 /* TEXTURE0 */;
+    if (parameters.frontFace) {
+      gl.frontFace(
+        map("frontFace", parameters.frontFace, {
+          ccw: 2305 /* CCW */,
+          cw: 2304 /* CW */
+        })
+      );
     }
-    bind(textureUnit) {
-      const { gl } = this;
-      if (textureUnit !== void 0) {
-        this.textureUnit = textureUnit;
-        gl.activeTexture(gl.TEXTURE0 + textureUnit);
+    if (parameters.unclippedDepth) {
+      if (device.features.has("depth-clip-control")) {
+        gl.enable(34383 /* DEPTH_CLAMP_EXT */);
       }
-      gl.bindTexture(this.glTarget, this.handle);
-      return textureUnit;
     }
-    unbind(textureUnit) {
-      const { gl } = this;
-      if (textureUnit !== void 0) {
-        this.textureUnit = textureUnit;
-        gl.activeTexture(gl.TEXTURE0 + textureUnit);
+    if (parameters.depthBias !== void 0) {
+      gl.enable(32823 /* POLYGON_OFFSET_FILL */);
+      gl.polygonOffset(parameters.depthBias, parameters.depthBiasSlopeScale || 0);
+    }
+    if (parameters.provokingVertex) {
+      if (device.features.has("provoking-vertex-webgl")) {
+        const extensions = webglDevice.getExtension("WEBGL_provoking_vertex");
+        const ext = extensions.WEBGL_provoking_vertex;
+        const vertex = map(
+          "provokingVertex",
+          parameters.provokingVertex,
+          {
+            first: 36429 /* FIRST_VERTEX_CONVENTION_WEBGL */,
+            last: 36430 /* LAST_VERTEX_CONVENTION_WEBGL */
+          }
+        );
+        ext?.provokingVertexWEBGL(vertex);
       }
-      gl.bindTexture(this.glTarget, null);
-      return textureUnit;
     }
-  };
-
-  // src/adapter/resources/webgl-framebuffer.ts
-  var WEBGLFramebuffer = class extends import_core9.Framebuffer {
-    device;
-    gl;
-    handle;
-    colorAttachments = [];
-    depthStencilAttachment = null;
-    constructor(device, props) {
-      super(device, props);
-      const isDefaultFramebuffer = props.handle === null;
-      this.device = device;
-      this.gl = device.gl;
-      this.handle = this.props.handle || isDefaultFramebuffer ? this.props.handle : this.gl.createFramebuffer();
-      if (!isDefaultFramebuffer) {
-        device.setSpectorMetadata(this.handle, { id: this.props.id, props: this.props });
-        this.autoCreateAttachmentTextures();
-        this.updateAttachments();
+    if (parameters.polygonMode || parameters.polygonOffsetLine) {
+      if (device.features.has("polygon-mode-webgl")) {
+        if (parameters.polygonMode) {
+          const extensions = webglDevice.getExtension("WEBGL_polygon_mode");
+          const ext = extensions.WEBGL_polygon_mode;
+          const mode = map("polygonMode", parameters.polygonMode, {
+            fill: 6914 /* FILL_WEBGL */,
+            line: 6913 /* LINE_WEBGL */
+          });
+          ext?.polygonModeWEBGL(1028 /* FRONT */, mode);
+          ext?.polygonModeWEBGL(1029 /* BACK */, mode);
+        }
+        if (parameters.polygonOffsetLine) {
+          gl.enable(10754 /* POLYGON_OFFSET_LINE_WEBGL */);
+        }
       }
     }
-    /** destroys any auto created resources etc. */
-    destroy() {
-      super.destroy();
-      if (!this.destroyed && this.handle !== null) {
-        this.gl.deleteFramebuffer(this.handle);
+    if (device.features.has("shader-clip-cull-distance-webgl")) {
+      if (parameters.clipDistance0) {
+        gl.enable(12288 /* CLIP_DISTANCE0_WEBGL */);
+      }
+      if (parameters.clipDistance1) {
+        gl.enable(12289 /* CLIP_DISTANCE1_WEBGL */);
+      }
+      if (parameters.clipDistance2) {
+        gl.enable(12290 /* CLIP_DISTANCE2_WEBGL */);
+      }
+      if (parameters.clipDistance3) {
+        gl.enable(12291 /* CLIP_DISTANCE3_WEBGL */);
+      }
+      if (parameters.clipDistance4) {
+        gl.enable(12292 /* CLIP_DISTANCE4_WEBGL */);
+      }
+      if (parameters.clipDistance5) {
+        gl.enable(12293 /* CLIP_DISTANCE5_WEBGL */);
+      }
+      if (parameters.clipDistance6) {
+        gl.enable(12294 /* CLIP_DISTANCE6_WEBGL */);
       }
+      if (parameters.clipDistance7) {
+        gl.enable(12295 /* CLIP_DISTANCE7_WEBGL */);
+      }
+    }
+    if (parameters.depthWriteEnabled !== void 0) {
+      gl.depthMask(mapBoolean("depthWriteEnabled", parameters.depthWriteEnabled));
+    }
+    if (parameters.depthCompare) {
+      parameters.depthCompare !== "always" ? gl.enable(2929 /* DEPTH_TEST */) : gl.disable(2929 /* DEPTH_TEST */);
+      gl.depthFunc(convertCompareFunction("depthCompare", parameters.depthCompare));
+    }
+    if (parameters.stencilWriteMask) {
+      const mask = parameters.stencilWriteMask;
+      gl.stencilMaskSeparate(1028 /* FRONT */, mask);
+      gl.stencilMaskSeparate(1029 /* BACK */, mask);
+    }
+    if (parameters.stencilReadMask) {
+      import_core10.log.warn("stencilReadMask not supported under WebGL");
+    }
+    if (parameters.stencilCompare) {
+      const mask = parameters.stencilReadMask || 4294967295;
+      const glValue = convertCompareFunction("depthCompare", parameters.stencilCompare);
+      parameters.stencilCompare !== "always" ? gl.enable(2960 /* STENCIL_TEST */) : gl.disable(2960 /* STENCIL_TEST */);
+      gl.stencilFuncSeparate(1028 /* FRONT */, glValue, 0, mask);
+      gl.stencilFuncSeparate(1029 /* BACK */, glValue, 0, mask);
+    }
+    if (parameters.stencilPassOperation && parameters.stencilFailOperation && parameters.stencilDepthFailOperation) {
+      const dppass = convertStencilOperation("stencilPassOperation", parameters.stencilPassOperation);
+      const sfail = convertStencilOperation("stencilFailOperation", parameters.stencilFailOperation);
+      const dpfail = convertStencilOperation(
+        "stencilDepthFailOperation",
+        parameters.stencilDepthFailOperation
+      );
+      gl.stencilOpSeparate(1028 /* FRONT */, sfail, dpfail, dppass);
+      gl.stencilOpSeparate(1029 /* BACK */, sfail, dpfail, dppass);
+    }
+    switch (parameters.blend) {
+      case true:
+        gl.enable(3042 /* BLEND */);
+        break;
+      case false:
+        gl.disable(3042 /* BLEND */);
+        break;
+      default:
+    }
+    if (parameters.blendColorOperation || parameters.blendAlphaOperation) {
+      const colorEquation = convertBlendOperationToEquation(
+        "blendColorOperation",
+        parameters.blendColorOperation || "add"
+      );
+      const alphaEquation = convertBlendOperationToEquation(
+        "blendAlphaOperation",
+        parameters.blendAlphaOperation || "add"
+      );
+      gl.blendEquationSeparate(colorEquation, alphaEquation);
+      const colorSrcFactor = convertBlendFactorToFunction(
+        "blendColorSrcFactor",
+        parameters.blendColorSrcFactor || "one"
+      );
+      const colorDstFactor = convertBlendFactorToFunction(
+        "blendColorDstFactor",
+        parameters.blendColorDstFactor || "zero"
+      );
+      const alphaSrcFactor = convertBlendFactorToFunction(
+        "blendAlphaSrcFactor",
+        parameters.blendAlphaSrcFactor || "one"
+      );
+      const alphaDstFactor = convertBlendFactorToFunction(
+        "blendAlphaDstFactor",
+        parameters.blendAlphaDstFactor || "zero"
+      );
+      gl.blendFuncSeparate(colorSrcFactor, colorDstFactor, alphaSrcFactor, alphaDstFactor);
+    }
+  }
+  function convertCompareFunction(parameter, value) {
+    return map(parameter, value, {
+      never: 512 /* NEVER */,
+      less: 513 /* LESS */,
+      equal: 514 /* EQUAL */,
+      "less-equal": 515 /* LEQUAL */,
+      greater: 516 /* GREATER */,
+      "not-equal": 517 /* NOTEQUAL */,
+      "greater-equal": 518 /* GEQUAL */,
+      always: 519 /* ALWAYS */
+    });
+  }
+  function convertStencilOperation(parameter, value) {
+    return map(parameter, value, {
+      keep: 7680 /* KEEP */,
+      zero: 0 /* ZERO */,
+      replace: 7681 /* REPLACE */,
+      invert: 5386 /* INVERT */,
+      "increment-clamp": 7682 /* INCR */,
+      "decrement-clamp": 7683 /* DECR */,
+      "increment-wrap": 34055 /* INCR_WRAP */,
+      "decrement-wrap": 34056 /* DECR_WRAP */
+    });
+  }
+  function convertBlendOperationToEquation(parameter, value) {
+    return map(parameter, value, {
+      add: 32774 /* FUNC_ADD */,
+      subtract: 32778 /* FUNC_SUBTRACT */,
+      "reverse-subtract": 32779 /* FUNC_REVERSE_SUBTRACT */,
+      min: 32775 /* MIN */,
+      max: 32776 /* MAX */
+    });
+  }
+  function convertBlendFactorToFunction(parameter, value) {
+    return map(parameter, value, {
+      one: 1 /* ONE */,
+      zero: 0 /* ZERO */,
+      "src-color": 768 /* SRC_COLOR */,
+      "one-minus-src-color": 769 /* ONE_MINUS_SRC_COLOR */,
+      "dst-color": 774 /* DST_COLOR */,
+      "one-minus-dst-color": 775 /* ONE_MINUS_DST_COLOR */,
+      "src-alpha": 770 /* SRC_ALPHA */,
+      "one-minus-src-alpha": 771 /* ONE_MINUS_SRC_ALPHA */,
+      "dst-alpha": 772 /* DST_ALPHA */,
+      "one-minus-dst-alpha": 773 /* ONE_MINUS_DST_ALPHA */,
+      "src-alpha-saturated": 776 /* SRC_ALPHA_SATURATE */,
+      "constant-color": 32769 /* CONSTANT_COLOR */,
+      "one-minus-constant-color": 32770 /* ONE_MINUS_CONSTANT_COLOR */,
+      "constant-alpha": 32771 /* CONSTANT_ALPHA */,
+      "one-minus-constant-alpha": 32772 /* ONE_MINUS_CONSTANT_ALPHA */
+    });
+  }
+  function message(parameter, value) {
+    return `Illegal parameter ${value} for ${parameter}`;
+  }
+  function map(parameter, value, valueMap) {
+    if (!(value in valueMap)) {
+      throw new Error(message(parameter, value));
+    }
+    return valueMap[value];
+  }
+  function mapBoolean(parameter, value) {
+    return value;
+  }
+  function isObjectEmpty2(obj) {
+    let isEmpty = true;
+    for (const key in obj) {
+      isEmpty = false;
+      break;
+    }
+    return isEmpty;
+  }
+
+  // src/adapter/converters/sampler-parameters.ts
+  function convertSamplerParametersToWebGL(props) {
+    const params = {};
+    if (props.addressModeU) {
+      params[10242 /* TEXTURE_WRAP_S */] = convertAddressMode(props.addressModeU);
+    }
+    if (props.addressModeV) {
+      params[10243 /* TEXTURE_WRAP_T */] = convertAddressMode(props.addressModeV);
     }
-    updateAttachments() {
-      const prevHandle = this.gl.bindFramebuffer(
-        36160 /* FRAMEBUFFER */,
-        this.handle
+    if (props.addressModeW) {
+      params[32882 /* TEXTURE_WRAP_R */] = convertAddressMode(props.addressModeW);
+    }
+    if (props.magFilter) {
+      params[10240 /* TEXTURE_MAG_FILTER */] = convertMaxFilterMode(props.magFilter);
+    }
+    if (props.minFilter || props.mipmapFilter) {
+      params[10241 /* TEXTURE_MIN_FILTER */] = convertMinFilterMode(
+        props.minFilter || "linear",
+        props.mipmapFilter
       );
-      for (let i = 0; i < this.colorAttachments.length; ++i) {
-        const attachment = this.colorAttachments[i];
-        if (attachment) {
-          const attachmentPoint = 36064 /* COLOR_ATTACHMENT0 */ + i;
-          this._attachTextureView(attachmentPoint, attachment);
-        }
-      }
-      if (this.depthStencilAttachment) {
-        const attachmentPoint = getDepthStencilAttachmentWebGL(
-          this.depthStencilAttachment.props.format
-        );
-        this._attachTextureView(attachmentPoint, this.depthStencilAttachment);
-      }
-      if (this.props.check !== false) {
-        const status = this.gl.checkFramebufferStatus(36160 /* FRAMEBUFFER */);
-        if (status !== 36053 /* FRAMEBUFFER_COMPLETE */) {
-          throw new Error(`Framebuffer ${_getFrameBufferStatus(status)}`);
-        }
-      }
-      this.gl.bindFramebuffer(36160 /* FRAMEBUFFER */, prevHandle);
     }
-    // PRIVATE
-    /** In WebGL we must use renderbuffers for depth/stencil attachments (unless we have extensions) */
-    createDepthStencilTexture(format) {
-      return new WEBGLTexture(this.device, {
-        id: `${this.id}-depth-stencil`,
-        format,
-        width: this.width,
-        height: this.height,
-        mipmaps: false
-      });
+    if (props.lodMinClamp !== void 0) {
+      params[33082 /* TEXTURE_MIN_LOD */] = props.lodMinClamp;
     }
-    /**
-     * @param attachment
-     * @param texture
-     * @param layer = 0 - index into WEBGLTextureArray and Texture3D or face for `TextureCubeMap`
-     * @param level = 0 - mipmapLevel
-     */
-    _attachTextureView(attachment, textureView) {
-      const { gl } = this.device;
-      const { texture } = textureView;
-      const level = textureView.props.baseMipLevel;
-      const layer = textureView.props.baseArrayLayer;
-      gl.bindTexture(texture.glTarget, texture.handle);
-      switch (texture.glTarget) {
-        case 35866 /* TEXTURE_2D_ARRAY */:
-        case 32879 /* TEXTURE_3D */:
-          gl.framebufferTextureLayer(36160 /* FRAMEBUFFER */, attachment, texture.handle, level, layer);
-          break;
-        case 34067 /* TEXTURE_CUBE_MAP */:
-          const face = mapIndexToCubeMapFace(layer);
-          gl.framebufferTexture2D(36160 /* FRAMEBUFFER */, attachment, face, texture.handle, level);
-          break;
-        case 3553 /* TEXTURE_2D */:
-          gl.framebufferTexture2D(36160 /* FRAMEBUFFER */, attachment, 3553 /* TEXTURE_2D */, texture.handle, level);
-          break;
-        default:
-          throw new Error("Illegal texture type");
-      }
-      gl.bindTexture(texture.glTarget, null);
+    if (props.lodMaxClamp !== void 0) {
+      params[33083 /* TEXTURE_MAX_LOD */] = props.lodMaxClamp;
     }
-  };
-  function mapIndexToCubeMapFace(layer) {
-    return layer < 34069 /* TEXTURE_CUBE_MAP_POSITIVE_X */ ? layer + 34069 /* TEXTURE_CUBE_MAP_POSITIVE_X */ : layer;
+    if (props.type === "comparison-sampler") {
+      params[34892 /* TEXTURE_COMPARE_MODE */] = 34894 /* COMPARE_REF_TO_TEXTURE */;
+    }
+    if (props.compare) {
+      params[34893 /* TEXTURE_COMPARE_FUNC */] = convertCompareFunction("compare", props.compare);
+    }
+    if (props.maxAnisotropy) {
+      params[34046 /* TEXTURE_MAX_ANISOTROPY_EXT */] = props.maxAnisotropy;
+    }
+    return params;
   }
-  function _getFrameBufferStatus(status) {
-    switch (status) {
-      case 36053 /* FRAMEBUFFER_COMPLETE */:
-        return "success";
-      case 36054 /* FRAMEBUFFER_INCOMPLETE_ATTACHMENT */:
-        return "Mismatched attachments";
-      case 36055 /* FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT */:
-        return "No attachments";
-      case 36057 /* FRAMEBUFFER_INCOMPLETE_DIMENSIONS */:
-        return "Height/width mismatch";
-      case 36061 /* FRAMEBUFFER_UNSUPPORTED */:
-        return "Unsupported or split attachments";
-      case 36182 /* FRAMEBUFFER_INCOMPLETE_MULTISAMPLE */:
-        return "Samples mismatch";
-      default:
-        return `${status}`;
+  function convertAddressMode(addressMode) {
+    switch (addressMode) {
+      case "clamp-to-edge":
+        return 33071 /* CLAMP_TO_EDGE */;
+      case "repeat":
+        return 10497 /* REPEAT */;
+      case "mirror-repeat":
+        return 33648 /* MIRRORED_REPEAT */;
+    }
+  }
+  function convertMaxFilterMode(maxFilter) {
+    switch (maxFilter) {
+      case "nearest":
+        return 9728 /* NEAREST */;
+      case "linear":
+        return 9729 /* LINEAR */;
+    }
+  }
+  function convertMinFilterMode(minFilter, mipmapFilter) {
+    if (!mipmapFilter) {
+      return convertMaxFilterMode(minFilter);
+    }
+    switch (minFilter) {
+      case "nearest":
+        return mipmapFilter === "nearest" ? 9984 /* NEAREST_MIPMAP_NEAREST */ : 9986 /* NEAREST_MIPMAP_LINEAR */;
+      case "linear":
+        return mipmapFilter === "nearest" ? 9985 /* LINEAR_MIPMAP_NEAREST */ : 9987 /* LINEAR_MIPMAP_LINEAR */;
     }
   }
 
-  // src/adapter/webgl-canvas-context.ts
-  var WebGLCanvasContext = class extends import_core10.CanvasContext {
+  // src/adapter/resources/webgl-sampler.ts
+  var WEBGLSampler = class extends import_core11.Sampler {
     device;
-    format = "rgba8unorm";
-    depthStencilFormat = "depth24plus";
-    presentationSize;
-    _framebuffer = null;
+    handle;
+    parameters;
     constructor(device, props) {
-      super(props);
+      super(device, props);
       this.device = device;
-      this.presentationSize = [-1, -1];
-      this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
-      this.update();
-    }
-    getCurrentFramebuffer() {
-      this.update();
-      this._framebuffer = this._framebuffer || new WEBGLFramebuffer(this.device, { handle: null });
-      return this._framebuffer;
+      this.parameters = convertSamplerParametersToWebGL(props);
+      this.handle = this.handle || this.device.gl.createSampler();
+      this._setSamplerParameters(this.parameters);
     }
-    /** Resizes and updates render targets if necessary */
-    update() {
-      const size = this.getPixelSize();
-      const sizeChanged = size[0] !== this.presentationSize[0] || size[1] !== this.presentationSize[1];
-      if (sizeChanged) {
-        this.presentationSize = size;
-        this.resize();
+    destroy() {
+      if (this.handle) {
+        this.device.gl.deleteSampler(this.handle);
+        this.handle = void 0;
       }
     }
-    /**
-     * Resize the canvas' drawing buffer.
-     *
-     * Can match the canvas CSS size, and optionally also consider devicePixelRatio
-     * Can be called every frame
-     *
-     * Regardless of size, the drawing buffer will always be scaled to the viewport, but
-     * for best visual results, usually set to either:
-     *  canvas CSS width x canvas CSS height
-     *  canvas CSS width * devicePixelRatio x canvas CSS height * devicePixelRatio
-     * See http://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
-     */
-    resize(options) {
-      if (!this.device.gl)
-        return;
-      if (this.canvas) {
-        const devicePixelRatio = this.getDevicePixelRatio(options?.useDevicePixels);
-        this.setDevicePixelRatio(devicePixelRatio, options);
-        return;
-      }
+    toString() {
+      return `Sampler(${this.id},${JSON.stringify(this.props)})`;
     }
-    commit() {
+    /** Set sampler parameters on the sampler */
+    _setSamplerParameters(parameters) {
+      for (const [pname, value] of Object.entries(parameters)) {
+        const param = Number(pname);
+        switch (param) {
+          case 33082 /* TEXTURE_MIN_LOD */:
+          case 33083 /* TEXTURE_MAX_LOD */:
+            this.device.gl.samplerParameterf(this.handle, param, value);
+            break;
+          default:
+            this.device.gl.samplerParameteri(this.handle, param, value);
+            break;
+        }
+      }
     }
   };
 
-  // src/context/debug/spector.ts
-  var import_core11 = __toESM(require_core(), 1);
+  // src/adapter/resources/webgl-texture.ts
+  var import_core14 = __toESM(require_core(), 1);
 
-  // src/utils/load-script.ts
-  async function loadScript(scriptUrl, scriptId) {
-    const head = document.getElementsByTagName("head")[0];
-    if (!head) {
-      throw new Error("loadScript");
-    }
-    const script = document.createElement("script");
-    script.setAttribute("type", "text/javascript");
-    script.setAttribute("src", scriptUrl);
-    if (scriptId) {
-      script.id = scriptId;
+  // src/context/state-tracker/with-parameters.ts
+  function withGLParameters(gl, parameters, func) {
+    if (isObjectEmpty3(parameters)) {
+      return func(gl);
     }
-    return new Promise((resolve, reject) => {
-      script.onload = resolve;
-      script.onerror = (error) => reject(new Error(`Unable to load script '${scriptUrl}': ${error}`));
-      head.appendChild(script);
-    });
-  }
-
-  // src/context/debug/spector.ts
-  var LOG_LEVEL = 1;
-  var spector = null;
-  var initialized = false;
-  var DEFAULT_SPECTOR_PROPS = {
-    debugWithSpectorJS: import_core11.log.get("spector") || import_core11.log.get("spectorjs"),
-    // https://github.com/BabylonJS/Spector.js#basic-usage
-    // https://forum.babylonjs.com/t/spectorcdn-is-temporarily-off/48241
-    // spectorUrl: 'https://spectorcdn.babylonjs.com/spector.bundle.js';
-    spectorUrl: "https://cdn.jsdelivr.net/npm/spectorjs@0.9.30/dist/spector.bundle.js",
-    gl: void 0
-  };
-  async function loadSpectorJS(props) {
-    if (!globalThis.SPECTOR) {
+    const { nocatch = true } = parameters;
+    const webglState = WebGLStateTracker.get(gl);
+    webglState.push();
+    setGLParameters(gl, parameters);
+    let value;
+    if (nocatch) {
+      value = func(gl);
+      webglState.pop();
+    } else {
       try {
-        await loadScript(props.spectorUrl || DEFAULT_SPECTOR_PROPS.spectorUrl);
-      } catch (error) {
-        import_core11.log.warn(String(error));
-      }
-    }
-  }
-  function initializeSpectorJS(props) {
-    props = { ...DEFAULT_SPECTOR_PROPS, ...props };
-    if (!props.debugWithSpectorJS) {
-      return null;
-    }
-    if (!spector && globalThis.SPECTOR && !globalThis.luma?.spector) {
-      import_core11.log.probe(LOG_LEVEL, "SPECTOR found and initialized. Start with `luma.spector.displayUI()`")();
-      const { Spector } = globalThis.SPECTOR;
-      spector = new Spector();
-      if (globalThis.luma) {
-        globalThis.luma.spector = spector;
+        value = func(gl);
+      } finally {
+        webglState.pop();
       }
     }
-    if (!spector) {
-      return null;
-    }
-    if (!initialized) {
-      initialized = true;
-      spector.spyCanvases();
-      spector?.onCaptureStarted.add(
-        (capture) => import_core11.log.info("Spector capture started:", capture)()
-      );
-      spector?.onCapture.add((capture) => {
-        import_core11.log.info("Spector capture complete:", capture)();
-        spector?.getResultUI();
-        spector?.resultView.display();
-        spector?.resultView.addCapture(capture);
-      });
-    }
-    if (props.gl) {
-      const gl = props.gl;
-      const device = gl.device;
-      spector?.startCapture(props.gl, 500);
-      gl.device = device;
-      new Promise((resolve) => setTimeout(resolve, 2e3)).then((_) => {
-        import_core11.log.info("Spector capture stopped after 2 seconds")();
-        spector?.stopCapture();
-      });
+    return value;
+  }
+  function isObjectEmpty3(object) {
+    for (const key in object) {
+      return false;
     }
-    return spector;
+    return true;
   }
 
-  // src/context/debug/webgl-developer-tools.ts
+  // src/adapter/resources/webgl-texture-view.ts
   var import_core12 = __toESM(require_core(), 1);
+  var WEBGLTextureView = class extends import_core12.TextureView {
+    device;
+    gl;
+    handle;
+    // Does not have a WebGL representation
+    texture;
+    constructor(device, props) {
+      super(device, { ...import_core12.Texture.defaultProps, ...props });
+      this.device = device;
+      this.gl = this.device.gl;
+      this.handle = null;
+      this.texture = props.texture;
+    }
+  };
 
-  // ../../node_modules/@probe.gl/env/dist/lib/globals.js
-  var document_ = globalThis.document || {};
-  var process_ = globalThis.process || {};
-  var console_ = globalThis.console;
-  var navigator_ = globalThis.navigator || {};
+  // src/adapter/helpers/webgl-texture-utils.ts
+  var import_core13 = __toESM(require_core(), 1);
 
-  // ../../node_modules/@probe.gl/env/dist/lib/is-electron.js
-  function isElectron(mockUserAgent) {
-    if (typeof window !== "undefined" && window.process?.type === "renderer") {
-      return true;
-    }
-    if (typeof process !== "undefined" && Boolean(process.versions?.["electron"])) {
-      return true;
+  // src/adapter/helpers/typed-array-utils.ts
+  var ERR_TYPE_DEDUCTION = "Failed to deduce GL constant from typed array";
+  function getGLTypeFromTypedArray(arrayOrType) {
+    const type = ArrayBuffer.isView(arrayOrType) ? arrayOrType.constructor : arrayOrType;
+    switch (type) {
+      case Float32Array:
+        return 5126 /* FLOAT */;
+      case Uint16Array:
+        return 5123 /* UNSIGNED_SHORT */;
+      case Uint32Array:
+        return 5125 /* UNSIGNED_INT */;
+      case Uint8Array:
+        return 5121 /* UNSIGNED_BYTE */;
+      case Uint8ClampedArray:
+        return 5121 /* UNSIGNED_BYTE */;
+      case Int8Array:
+        return 5120 /* BYTE */;
+      case Int16Array:
+        return 5122 /* SHORT */;
+      case Int32Array:
+        return 5124 /* INT */;
+      default:
+        throw new Error(ERR_TYPE_DEDUCTION);
     }
-    const realUserAgent = typeof navigator !== "undefined" && navigator.userAgent;
-    const userAgent = mockUserAgent || realUserAgent;
-    return Boolean(userAgent && userAgent.indexOf("Electron") >= 0);
   }
-
-  // ../../node_modules/@probe.gl/env/dist/lib/is-browser.js
-  function isBrowser() {
-    const isNode = (
-      // @ts-expect-error
-      typeof process === "object" && String(process) === "[object process]" && !process?.browser
-    );
-    return !isNode || isElectron();
+  function getTypedArrayFromGLType(glType, options) {
+    const { clamped = true } = options || {};
+    switch (glType) {
+      case 5126 /* FLOAT */:
+        return Float32Array;
+      case 5123 /* UNSIGNED_SHORT */:
+      case 33635 /* UNSIGNED_SHORT_5_6_5 */:
+      case 32819 /* UNSIGNED_SHORT_4_4_4_4 */:
+      case 32820 /* UNSIGNED_SHORT_5_5_5_1 */:
+        return Uint16Array;
+      case 5125 /* UNSIGNED_INT */:
+        return Uint32Array;
+      case 5121 /* UNSIGNED_BYTE */:
+        return clamped ? Uint8ClampedArray : Uint8Array;
+      case 5120 /* BYTE */:
+        return Int8Array;
+      case 5122 /* SHORT */:
+        return Int16Array;
+      case 5124 /* INT */:
+        return Int32Array;
+      default:
+        throw new Error("Failed to deduce typed array type from GL constant");
+    }
   }
 
-  // ../../node_modules/@probe.gl/env/dist/lib/get-browser.js
-  function getBrowser(mockUserAgent) {
-    if (!mockUserAgent && !isBrowser()) {
-      return "Node";
-    }
-    if (isElectron(mockUserAgent)) {
-      return "Electron";
-    }
-    const userAgent = mockUserAgent || navigator_.userAgent || "";
-    if (userAgent.indexOf("Edge") > -1) {
-      return "Edge";
-    }
-    if (globalThis.chrome) {
-      return "Chrome";
-    }
-    if (globalThis.safari) {
-      return "Safari";
+  // src/adapter/helpers/format-utils.ts
+  function glFormatToComponents(format) {
+    switch (format) {
+      case 6406 /* ALPHA */:
+      case 33326 /* R32F */:
+      case 6403 /* RED */:
+        return 1;
+      case 33328 /* RG32F */:
+      case 33319 /* RG */:
+        return 2;
+      case 6407 /* RGB */:
+      case 34837 /* RGB32F */:
+        return 3;
+      case 6408 /* RGBA */:
+      case 34836 /* RGBA32F */:
+        return 4;
+      default:
+        return 0;
     }
-    if (globalThis.mozInnerScreenX) {
-      return "Firefox";
+  }
+  function glTypeToBytes(type) {
+    switch (type) {
+      case 5121 /* UNSIGNED_BYTE */:
+        return 1;
+      case 33635 /* UNSIGNED_SHORT_5_6_5 */:
+      case 32819 /* UNSIGNED_SHORT_4_4_4_4 */:
+      case 32820 /* UNSIGNED_SHORT_5_5_5_1 */:
+        return 2;
+      case 5126 /* FLOAT */:
+        return 4;
+      default:
+        return 0;
     }
-    return "Unknown";
   }
 
-  // src/context/debug/webgl-developer-tools.ts
-  var WEBGL_DEBUG_CDN_URL = "https://unpkg.com/webgl-debug@2.0.1/index.js";
-  function getWebGLContextData(gl) {
-    gl.luma = gl.luma || {};
-    return gl.luma;
-  }
-  async function loadWebGLDeveloperTools() {
-    if (isBrowser() && !globalThis.WebGLDebugUtils) {
-      globalThis.global = globalThis.global || globalThis;
-      globalThis.global.module = {};
-      await loadScript(WEBGL_DEBUG_CDN_URL);
+  // src/adapter/helpers/webgl-texture-utils.ts
+  function initializeTextureStorage(gl, levels, options) {
+    const { dimension, width, height, depth = 0 } = options;
+    const { glInternalFormat } = options;
+    const glTarget = options.glTarget;
+    switch (dimension) {
+      case "2d-array":
+      case "3d":
+        gl.texStorage3D(glTarget, levels, glInternalFormat, width, height, depth);
+        break;
+      default:
+        gl.texStorage2D(glTarget, levels, glInternalFormat, width, height);
     }
   }
-  function makeDebugContext(gl, props = {}) {
-    return props.debug ? getDebugContext(gl, props) : getRealContext(gl);
-  }
-  function getRealContext(gl) {
-    const data = getWebGLContextData(gl);
-    return data.realContext ? data.realContext : gl;
-  }
-  function getDebugContext(gl, props) {
-    if (!globalThis.WebGLDebugUtils) {
-      import_core12.log.warn("webgl-debug not loaded")();
-      return gl;
-    }
-    const data = getWebGLContextData(gl);
-    if (data.debugContext) {
-      return data.debugContext;
+  function copyExternalImageToMipLevel(gl, handle, image, options) {
+    const { width, height } = options;
+    const { dimension, depth = 0, mipLevel = 0 } = options;
+    const { x = 0, y = 0, z = 0 } = options;
+    const { glFormat, glType } = options;
+    const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
+    switch (dimension) {
+      case "2d-array":
+      case "3d":
+        gl.bindTexture(glTarget, handle);
+        gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, image);
+        gl.bindTexture(glTarget, null);
+        break;
+      case "2d":
+      case "cube":
+        gl.bindTexture(glTarget, handle);
+        gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, image);
+        gl.bindTexture(glTarget, null);
+        break;
+      default:
+        throw new Error(dimension);
     }
-    globalThis.WebGLDebugUtils.init({ ...GLEnum, ...gl });
-    const glDebug = globalThis.WebGLDebugUtils.makeDebugContext(
-      gl,
-      onGLError.bind(null, props),
-      onValidateGLFunc.bind(null, props)
-    );
-    for (const key in GLEnum) {
-      if (!(key in glDebug) && typeof GLEnum[key] === "number") {
-        glDebug[key] = GLEnum[key];
-      }
+  }
+  function copyCPUDataToMipLevel(gl, typedArray, options) {
+    const { dimension, width, height, depth = 0, mipLevel = 0, byteOffset = 0 } = options;
+    const { x = 0, y = 0, z = 0 } = options;
+    const { glFormat, glType, compressed } = options;
+    const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
+    switch (dimension) {
+      case "2d-array":
+      case "3d":
+        if (compressed) {
+          gl.compressedTexSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, typedArray, byteOffset);
+        } else {
+          gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, typedArray, byteOffset);
+        }
+        break;
+      case "2d":
+      case "cube":
+        if (compressed) {
+          gl.compressedTexSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, typedArray, byteOffset);
+        } else {
+          gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, typedArray, byteOffset);
+        }
+        break;
+      default:
+        throw new Error(dimension);
     }
-    class WebGLDebugContext {
+  }
+  function getWebGLTextureTarget(dimension) {
+    switch (dimension) {
+      case "1d":
+        break;
+      case "2d":
+        return 3553 /* TEXTURE_2D */;
+      case "3d":
+        return 32879 /* TEXTURE_3D */;
+      case "cube":
+        return 34067 /* TEXTURE_CUBE_MAP */;
+      case "2d-array":
+        return 35866 /* TEXTURE_2D_ARRAY */;
+      case "cube-array":
+        break;
     }
-    Object.setPrototypeOf(glDebug, Object.getPrototypeOf(gl));
-    Object.setPrototypeOf(WebGLDebugContext, glDebug);
-    const debugContext = Object.create(WebGLDebugContext);
-    data.realContext = gl;
-    data.debugContext = debugContext;
-    debugContext.debug = true;
-    return debugContext;
+    throw new Error(dimension);
   }
-  function getFunctionString(functionName, functionArgs) {
-    functionArgs = Array.from(functionArgs).map((arg) => arg === void 0 ? "undefined" : arg);
-    let args = globalThis.WebGLDebugUtils.glFunctionArgsToString(functionName, functionArgs);
-    args = `${args.slice(0, 100)}${args.length > 100 ? "..." : ""}`;
-    return `gl.${functionName}(${args})`;
+  function getWebGLCubeFaceTarget(glTarget, dimension, level) {
+    return dimension === "cube" ? 34069 /* TEXTURE_CUBE_MAP_POSITIVE_X */ + level : glTarget;
   }
-  function onGLError(props, err, functionName, args) {
-    args = Array.from(args).map((arg) => arg === void 0 ? "undefined" : arg);
-    const errorMessage = globalThis.WebGLDebugUtils.glEnumToString(err);
-    const functionArgs = globalThis.WebGLDebugUtils.glFunctionArgsToString(functionName, args);
-    const message2 = `${errorMessage} in gl.${functionName}(${functionArgs})`;
-    import_core12.log.error(message2)();
-    debugger;
-    if (props.throwOnError) {
-      throw new Error(message2);
+  function readPixelsToArray(source, options) {
+    const {
+      sourceX = 0,
+      sourceY = 0,
+      sourceAttachment = 36064 /* COLOR_ATTACHMENT0 */
+      // TODO - support gl.readBuffer
+    } = options || {};
+    let {
+      target: target2 = null,
+      // following parameters are auto deduced if not provided
+      sourceWidth,
+      sourceHeight,
+      sourceDepth,
+      sourceFormat,
+      sourceType
+    } = options || {};
+    const { framebuffer, deleteFramebuffer } = getFramebuffer(source);
+    const { gl, handle } = framebuffer;
+    const attachment = sourceAttachment - 36064 /* COLOR_ATTACHMENT0 */;
+    sourceWidth ||= framebuffer.width;
+    sourceHeight ||= framebuffer.height;
+    sourceDepth = framebuffer.colorAttachments[attachment]?.texture?.depth || 1;
+    sourceFormat ||= framebuffer.colorAttachments[attachment]?.texture?.glFormat || 6408 /* RGBA */;
+    sourceType ||= framebuffer.colorAttachments[attachment]?.texture?.glType || 5121 /* UNSIGNED_BYTE */;
+    target2 = getPixelArray(target2, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
+    sourceType = sourceType || getGLTypeFromTypedArray(target2);
+    const prevHandle = gl.bindFramebuffer(36160 /* FRAMEBUFFER */, handle);
+    gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target2);
+    gl.bindFramebuffer(36160 /* FRAMEBUFFER */, prevHandle || null);
+    if (deleteFramebuffer) {
+      framebuffer.destroy();
     }
+    return target2;
   }
-  function onValidateGLFunc(props, functionName, functionArgs) {
-    let functionString = "";
-    if (import_core12.log.level >= 1) {
-      functionString = getFunctionString(functionName, functionArgs);
-      import_core12.log.log(1, functionString)();
+  function readPixelsToBuffer(source, options) {
+    const {
+      target: target2,
+      sourceX = 0,
+      sourceY = 0,
+      sourceFormat = 6408 /* RGBA */,
+      targetByteOffset = 0
+    } = options || {};
+    let { sourceWidth, sourceHeight, sourceType } = options || {};
+    const { framebuffer, deleteFramebuffer } = getFramebuffer(source);
+    sourceWidth = sourceWidth || framebuffer.width;
+    sourceHeight = sourceHeight || framebuffer.height;
+    const webglFramebuffer = framebuffer;
+    sourceType = sourceType || 5121 /* UNSIGNED_BYTE */;
+    let webglBufferTarget = target2;
+    if (!webglBufferTarget) {
+      const components = glFormatToComponents(sourceFormat);
+      const byteCount = glTypeToBytes(sourceType);
+      const byteLength = targetByteOffset + sourceWidth * sourceHeight * components * byteCount;
+      webglBufferTarget = webglFramebuffer.device.createBuffer({ byteLength });
     }
-    if (props.break && props.break.length > 0) {
-      functionString = functionString || getFunctionString(functionName, functionArgs);
-      const isBreakpoint = props.break.every(
-        (breakOn) => functionString.indexOf(breakOn) !== -1
-      );
-      if (isBreakpoint) {
-        debugger;
-      }
+    const commandEncoder = source.device.createCommandEncoder();
+    commandEncoder.copyTextureToBuffer({
+      sourceTexture: source,
+      width: sourceWidth,
+      height: sourceHeight,
+      origin: [sourceX, sourceY],
+      destinationBuffer: webglBufferTarget,
+      byteOffset: targetByteOffset
+    });
+    commandEncoder.destroy();
+    if (deleteFramebuffer) {
+      framebuffer.destroy();
     }
-    for (const arg of functionArgs) {
-      if (arg === void 0) {
-        functionString = functionString || getFunctionString(functionName, functionArgs);
-        if (props.throwOnError) {
-          throw new Error(`Undefined argument: ${functionString}`);
-        } else {
-          import_core12.log.error(`Undefined argument: ${functionString}`)();
-          debugger;
-        }
-      }
+    return webglBufferTarget;
+  }
+  function getFramebuffer(source) {
+    if (!(source instanceof import_core13.Framebuffer)) {
+      return { framebuffer: toFramebuffer(source), deleteFramebuffer: true };
     }
+    return { framebuffer: source, deleteFramebuffer: false };
   }
-
-  // src/utils/uid.ts
-  var uidCounters = {};
-  function uid(id = "id") {
-    uidCounters[id] = uidCounters[id] || 1;
-    const count = uidCounters[id]++;
-    return `${id}-${count}`;
+  function toFramebuffer(texture, props) {
+    const { device, width, height, id } = texture;
+    const framebuffer = device.createFramebuffer({
+      ...props,
+      id: `framebuffer-for-${id}`,
+      width,
+      height,
+      colorAttachments: [texture]
+    });
+    return framebuffer;
+  }
+  function getPixelArray(pixelArray, type, format, width, height, depth) {
+    if (pixelArray) {
+      return pixelArray;
+    }
+    type = type || 5121 /* UNSIGNED_BYTE */;
+    const ArrayType = getTypedArrayFromGLType(type, { clamped: false });
+    const components = glFormatToComponents(format);
+    return new ArrayType(width * height * components);
   }
 
-  // src/adapter/resources/webgl-buffer.ts
-  var import_core13 = __toESM(require_core(), 1);
-  var WEBGLBuffer = class extends import_core13.Buffer {
+  // src/adapter/resources/webgl-texture.ts
+  function normalizeTextureData(data, options) {
+    let lodArray;
+    if (ArrayBuffer.isView(data)) {
+      lodArray = [
+        {
+          // ts-expect-error does data really need to be Uint8ClampedArray?
+          data,
+          width: options.width,
+          height: options.height
+          // depth: options.depth
+        }
+      ];
+    } else if (!Array.isArray(data)) {
+      lodArray = [data];
+    } else {
+      lodArray = data;
+    }
+    return lodArray;
+  }
+  var WEBGLTexture = class extends import_core14.Texture {
+    MAX_ATTRIBUTES;
     device;
     gl;
     handle;
-    /** Target in OpenGL defines the type of buffer */
+    sampler = void 0;
+    // TODO - currently unused in WebGL. Create dummy sampler?
+    view = void 0;
+    // TODO - currently unused in WebGL. Create dummy view?
+    mipmaps = false;
+    /**
+     * @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
+     */
     glTarget;
-    /** Usage is a hint on how frequently the buffer will be updates */
-    glUsage;
-    /** Index type is needed when issuing draw calls, so we pre-compute it */
-    glIndexType = 5123 /* UNSIGNED_SHORT */;
-    /** Number of bytes allocated on the GPU for this buffer */
-    byteLength;
-    /** Number of bytes used */
-    bytesUsed;
-    constructor(device, props = {}) {
-      super(device, props);
+    // Texture type
+    /** The WebGL format - essentially channel structure */
+    glFormat;
+    /** The WebGL data format - the type of each channel */
+    glType;
+    /** The WebGL constant corresponding to the WebGPU style constant in format */
+    glInternalFormat;
+    /** Whether the internal format is compressed */
+    compressed;
+    // data;
+    // inherited props
+    // dimension: ...
+    // format: GLTextureTarget;
+    // width: number = undefined;
+    // height: number = undefined;
+    // depth: number = undefined;
+    // state
+    /** Texture binding slot */
+    textureUnit = 0;
+    /** For automatically updating video */
+    _video = null;
+    constructor(device, props) {
+      props = import_core14.Texture._fixProps(props);
+      super(device, { ...import_core14.Texture.defaultProps, ...props, data: void 0 });
       this.device = device;
       this.gl = this.device.gl;
-      const handle = typeof props === "object" ? props.handle : void 0;
-      this.handle = handle || this.gl.createBuffer();
-      device.setSpectorMetadata(this.handle, { ...this.props, data: typeof this.props.data });
-      this.glTarget = getWebGLTarget(this.props.usage);
-      this.glUsage = getWebGLUsage(this.props.usage);
-      this.glIndexType = this.props.indexType === "uint32" ? 5125 /* UNSIGNED_INT */ : 5123 /* UNSIGNED_SHORT */;
+      this.glTarget = getWebGLTextureTarget(this.props.dimension);
+      const format = getTextureFormatWebGL(this.props.format);
+      this.glInternalFormat = format.internalFormat;
+      this.glFormat = format.format;
+      this.glType = format.type;
+      this.compressed = format.compressed;
+      if (typeof HTMLVideoElement !== "undefined" && props.data instanceof HTMLVideoElement && // @ts-expect-error
+      props.data.readyState < HTMLVideoElement.HAVE_METADATA) {
+        const video = props.data;
+        this._video = null;
+        video.addEventListener("loadeddata", () => this.initialize(props));
+      }
+      this.initialize({ ...this.props, data: props.data });
+      Object.seal(this);
+    }
+    /**
+     * Initialize texture with supplied props
+     */
+    // eslint-disable-next-line max-statements
+    initialize(props = {}) {
+      this.handle = this.props.handle || this.gl.createTexture();
+      this.device.setSpectorMetadata(this.handle, { ...this.props, data: typeof this.props.data });
+      const data = props.data;
+      let { width, height } = props;
+      if (!width || !height) {
+        const textureSize = import_core14.Texture.getTextureDataSize(data);
+        width = textureSize?.width || 1;
+        height = textureSize?.height || 1;
+      }
+      this.width = width;
+      this.height = height;
+      this.depth = props.depth;
+      this.setSampler(props.sampler);
+      this.view = new WEBGLTextureView(this.device, { ...this.props, texture: this });
+      this.bind();
+      if (!this.props.data) {
+        initializeTextureStorage(this.gl, this.mipLevels, this);
+      }
       if (props.data) {
-        this._initWithData(props.data, props.byteOffset, props.byteLength);
-      } else {
-        this._initWithByteLength(props.byteLength || 0);
+        switch (props.dimension) {
+          case "1d":
+            this.setTexture1DData(props.data);
+            break;
+          case "2d":
+            this.setTexture2DData(props.data);
+            break;
+          case "3d":
+            this.setTexture3DData(props.data);
+            break;
+          case "cube":
+            this.setTextureCubeData(props.data);
+            break;
+          case "2d-array":
+            this.setTextureArrayData(props.data);
+            break;
+          case "cube-array":
+            this.setTextureCubeArrayData(props.data);
+            break;
+          default:
+            throw new Error(props.dimension);
+        }
       }
-    }
-    // PRIVATE METHODS
-    /** Allocate a new buffer and initialize to contents of typed array */
-    _initWithData(data, byteOffset = 0, byteLength = data.byteLength + byteOffset) {
-      const glTarget = this.glTarget;
-      this.gl.bindBuffer(glTarget, this.handle);
-      this.gl.bufferData(glTarget, byteLength, this.glUsage);
-      this.gl.bufferSubData(glTarget, byteOffset, data);
-      this.gl.bindBuffer(glTarget, null);
-      this.bytesUsed = byteLength;
-      this.byteLength = byteLength;
-      this._setDebugData(data, byteOffset, byteLength);
-      this.trackAllocatedMemory(byteLength);
-    }
-    // Allocate a GPU buffer of specified size.
-    _initWithByteLength(byteLength) {
-      let data = byteLength;
-      if (byteLength === 0) {
-        data = new Float32Array(0);
+      this.mipmaps = Boolean(props.mipmaps);
+      if (this.mipmaps) {
+        this.generateMipmap();
       }
-      const glTarget = this.glTarget;
-      this.gl.bindBuffer(glTarget, this.handle);
-      this.gl.bufferData(glTarget, data, this.glUsage);
-      this.gl.bindBuffer(glTarget, null);
-      this.bytesUsed = byteLength;
-      this.byteLength = byteLength;
-      this._setDebugData(null, 0, byteLength);
-      this.trackAllocatedMemory(byteLength);
-      return this;
     }
+    /*
+      initializeCube(props?: TextureProps): void {
+        const {mipmaps = true} = props; // , parameters = {} as Record<GL, any>} = props;
+    
+        // Store props for accessors
+        // this.props = props;
+    
+        // @ts-expect-error
+        this.setCubeMapData(props).then(() => {
+          // TODO - should genMipmap() be called on the cubemap or on the faces?
+          // TODO - without generateMipmap() cube textures do not work at all!!! Why?
+          if (mipmaps) {
+            this.generateMipmap(props);
+          }
+    
+          this.setSampler(props.sampler);
+    
+          // v8 compatibility?
+          // const {parameters = {} as Record<GL, any>} = props;
+          // this._setSamplerParameters(parameters);
+        });
+      }
+      */
     destroy() {
-      if (!this.destroyed && this.handle) {
+      if (this.handle) {
+        this.gl.deleteTexture(this.handle);
         this.removeStats();
-        this.trackDeallocatedMemory();
-        this.gl.deleteBuffer(this.handle);
+        this.trackDeallocatedMemory("Texture");
         this.destroyed = true;
-        this.handle = null;
-      }
-    }
-    write(data, byteOffset = 0) {
-      const srcOffset = 0;
-      const byteLength = void 0;
-      const glTarget = 36663 /* COPY_WRITE_BUFFER */;
-      this.gl.bindBuffer(glTarget, this.handle);
-      if (srcOffset !== 0 || byteLength !== void 0) {
-        this.gl.bufferSubData(glTarget, byteOffset, data, srcOffset, byteLength);
-      } else {
-        this.gl.bufferSubData(glTarget, byteOffset, data);
       }
-      this.gl.bindBuffer(glTarget, null);
-      this._setDebugData(data, byteOffset, data.byteLength);
-    }
-    /** Asynchronously read data from the buffer */
-    async readAsync(byteOffset = 0, byteLength) {
-      return this.readSyncWebGL(byteOffset, byteLength);
     }
-    /** Synchronously read data from the buffer. WebGL only. */
-    readSyncWebGL(byteOffset = 0, byteLength) {
-      byteLength = byteLength ?? this.byteLength - byteOffset;
-      const data = new Uint8Array(byteLength);
-      const dstOffset = 0;
-      this.gl.bindBuffer(36662 /* COPY_READ_BUFFER */, this.handle);
-      this.gl.getBufferSubData(36662 /* COPY_READ_BUFFER */, byteOffset, data, dstOffset, byteLength);
-      this.gl.bindBuffer(36662 /* COPY_READ_BUFFER */, null);
-      this._setDebugData(data, byteOffset, byteLength);
-      return data;
+    toString() {
+      return `Texture(${this.id},${this.width}x${this.height})`;
     }
-  };
-  function getWebGLTarget(usage) {
-    if (usage & import_core13.Buffer.INDEX) {
-      return 34963 /* ELEMENT_ARRAY_BUFFER */;
+    createView(props) {
+      return new WEBGLTextureView(this.device, { ...props, texture: this });
     }
-    if (usage & import_core13.Buffer.VERTEX) {
-      return 34962 /* ARRAY_BUFFER */;
+    setSampler(sampler = {}) {
+      let samplerProps;
+      if (sampler instanceof WEBGLSampler) {
+        this.sampler = sampler;
+        samplerProps = sampler.props;
+      } else {
+        this.sampler = new WEBGLSampler(this.device, sampler);
+        samplerProps = sampler;
+      }
+      const parameters = convertSamplerParametersToWebGL(samplerProps);
+      this._setSamplerParameters(parameters);
     }
-    if (usage & import_core13.Buffer.UNIFORM) {
-      return 35345 /* UNIFORM_BUFFER */;
+    /** Update external texture (video frame or canvas) */
+    update() {
+      import_core14.log.warn("Texture.update() not implemented");
     }
-    return 34962 /* ARRAY_BUFFER */;
-  }
-  function getWebGLUsage(usage) {
-    if (usage & import_core13.Buffer.INDEX) {
-      return 35044 /* STATIC_DRAW */;
+    // Call to regenerate mipmaps after modifying texture(s)
+    generateMipmap(params = {}) {
+      if (!this.props.data) {
+        return;
+      }
+      this.mipmaps = true;
+      this.gl.bindTexture(this.glTarget, this.handle);
+      withGLParameters(this.gl, params, () => {
+        this.gl.generateMipmap(this.glTarget);
+      });
+      this.gl.bindTexture(this.glTarget, null);
     }
-    if (usage & import_core13.Buffer.VERTEX) {
-      return 35044 /* STATIC_DRAW */;
+    // Image Data Setters
+    copyExternalImage(options) {
+      const size = import_core14.Texture.getExternalImageSize(options.image);
+      const opts = { ...import_core14.Texture.defaultCopyExternalImageOptions, ...size, ...options };
+      const { image, depth, mipLevel, x, y, z } = opts;
+      let { width, height } = opts;
+      const { dimension, glTarget, glFormat, glInternalFormat, glType } = this;
+      width = Math.min(width, size.width - x);
+      height = Math.min(height, size.height - y);
+      if (options.sourceX || options.sourceY) {
+        throw new Error(
+          "WebGL does not yet support sourceX/sourceY in copyExternalImage; requires copyTexSubImage2D from a framebuffer"
+        );
+      }
+      copyExternalImageToMipLevel(this.device.gl, this.handle, image, {
+        dimension,
+        mipLevel,
+        x,
+        y,
+        z,
+        width,
+        height,
+        depth,
+        glFormat,
+        glInternalFormat,
+        glType,
+        glTarget
+      });
+      return { width: opts.width, height: opts.height };
     }
-    if (usage & import_core13.Buffer.UNIFORM) {
-      return 35048 /* DYNAMIC_DRAW */;
+    setTexture1DData(data) {
+      throw new Error("setTexture1DData not supported in WebGL.");
     }
-    return 35044 /* STATIC_DRAW */;
-  }
-
-  // src/adapter/resources/webgl-shader.ts
-  var import_core14 = __toESM(require_core(), 1);
-
-  // src/adapter/helpers/parse-shader-compiler-log.ts
-  function parseShaderCompilerLog(errLog) {
-    const lines = errLog.split(/\r?\n/);
-    const messages = [];
-    for (const line of lines) {
-      if (line.length <= 1) {
-        continue;
-      }
-      const segments = line.split(":");
-      if (segments.length === 2) {
-        const [messageType2, message2] = segments;
-        messages.push({
-          message: message2.trim(),
-          type: getMessageType(messageType2),
-          lineNum: 0,
-          linePos: 0
-        });
-        continue;
-      }
-      const [messageType, linePosition, lineNumber, ...rest] = segments;
-      let lineNum = parseInt(lineNumber, 10);
-      if (isNaN(lineNum)) {
-        lineNum = 0;
+    /** Set a simple texture */
+    setTexture2DData(lodData, depth = 0) {
+      this.bind();
+      const lodArray = normalizeTextureData(lodData, this);
+      if (lodArray.length > 1 && this.props.mipmaps !== false) {
+        import_core14.log.warn(`Texture ${this.id} mipmap and multiple LODs.`)();
       }
-      let linePos = parseInt(linePosition, 10);
-      if (isNaN(linePos)) {
-        linePos = 0;
+      for (let lodLevel = 0; lodLevel < lodArray.length; lodLevel++) {
+        const imageData = lodArray[lodLevel];
+        this._setMipLevel(depth, lodLevel, imageData);
       }
-      messages.push({
-        message: rest.join(":").trim(),
-        type: getMessageType(messageType),
-        lineNum,
-        linePos
-        // TODO
-      });
+      this.unbind();
     }
-    return messages;
-  }
-  function getMessageType(messageType) {
-    const MESSAGE_TYPES = ["warning", "error", "info"];
-    const lowerCaseType = messageType.toLowerCase();
-    return MESSAGE_TYPES.includes(lowerCaseType) ? lowerCaseType : "info";
-  }
-
-  // src/adapter/resources/webgl-shader.ts
-  var WEBGLShader = class extends import_core14.Shader {
-    device;
-    handle;
-    constructor(device, props) {
-      super(device, props);
-      this.device = device;
-      switch (this.props.stage) {
-        case "vertex":
-          this.handle = this.props.handle || this.device.gl.createShader(35633 /* VERTEX_SHADER */);
-          break;
-        case "fragment":
-          this.handle = this.props.handle || this.device.gl.createShader(35632 /* FRAGMENT_SHADER */);
-          break;
-        default:
-          throw new Error(this.props.stage);
+    /**
+     * Sets a 3D texture
+     * @param data
+     */
+    setTexture3DData(data) {
+      if (this.props.dimension !== "3d") {
+        throw new Error(this.id);
+      }
+      if (ArrayBuffer.isView(data)) {
+        this.bind();
+        copyCPUDataToMipLevel(this.device.gl, data, this);
+        this.unbind();
       }
-      this._compile(this.source);
     }
-    destroy() {
-      if (this.handle) {
-        this.removeStats();
-        this.device.gl.deleteShader(this.handle);
-        this.destroyed = true;
+    /**
+     * Set a Texture Cube Data
+     * @todo - could support TextureCubeArray with depth
+     * @param data
+     * @param index
+     */
+    setTextureCubeData(data, depth = 0) {
+      if (this.props.dimension !== "cube") {
+        throw new Error(this.id);
+      }
+      for (const face of import_core14.Texture.CubeFaces) {
+        this.setTextureCubeFaceData(data[face], face);
       }
     }
-    async getCompilationInfo() {
-      await this._waitForCompilationComplete();
-      return this.getCompilationInfoSync();
+    /**
+     * Sets an entire texture array
+     * @param data
+     */
+    setTextureArrayData(data) {
+      if (this.props.dimension !== "2d-array") {
+        throw new Error(this.id);
+      }
+      throw new Error("setTextureArrayData not implemented.");
     }
-    getCompilationInfoSync() {
-      const log12 = this.device.gl.getShaderInfoLog(this.handle);
-      return log12 ? parseShaderCompilerLog(log12) : [];
+    /**
+     * Sets an entire texture cube array
+     * @param data
+     */
+    setTextureCubeArrayData(data) {
+      throw new Error("setTextureCubeArrayData not supported in WebGL2.");
     }
-    getTranslatedSource() {
-      const extensions = this.device.getExtension("WEBGL_debug_shaders");
-      const ext = extensions.WEBGL_debug_shaders;
-      return ext?.getTranslatedShaderSource(this.handle) || null;
+    setTextureCubeFaceData(lodData, face, depth = 0) {
+      if (Array.isArray(lodData) && lodData.length > 1 && this.props.mipmaps !== false) {
+        import_core14.log.warn(`${this.id} has mipmap and multiple LODs.`)();
+      }
+      const faceDepth = import_core14.Texture.CubeFaces.indexOf(face);
+      this.setTexture2DData(lodData, faceDepth);
     }
-    // PRIVATE METHODS
-    /** Compile a shader and get compilation status */
-    async _compile(source) {
-      const addGLSLVersion = (source2) => source2.startsWith("#version ") ? source2 : `#version 300 es
-${source2}`;
-      source = addGLSLVersion(source);
-      const { gl } = this.device;
-      gl.shaderSource(this.handle, source);
-      gl.compileShader(this.handle);
-      if (import_core14.log.level === 0) {
-        this.compilationStatus = "pending";
-        return;
+    // INTERNAL METHODS
+    /** @todo update this method to accept LODs */
+    setImageDataForFace(options) {
+      const {
+        face,
+        width,
+        height,
+        pixels,
+        data,
+        format = 6408 /* RGBA */,
+        type = 5121 /* UNSIGNED_BYTE */
+        // generateMipmap = false // TODO
+      } = options;
+      const { gl } = this;
+      const imageData = pixels || data;
+      this.bind();
+      if (imageData instanceof Promise) {
+        imageData.then(
+          (resolvedImageData) => this.setImageDataForFace(
+            Object.assign({}, options, {
+              face,
+              data: resolvedImageData,
+              pixels: resolvedImageData
+            })
+          )
+        );
+      } else if (this.width || this.height) {
+        gl.texImage2D(face, 0, format, width, height, 0, format, type, imageData);
+      } else {
+        gl.texImage2D(face, 0, format, format, type, imageData);
       }
-      if (!this.device.features.has("compilation-status-async-webgl")) {
-        this._getCompilationStatus();
-        this.debugShader();
-        if (this.compilationStatus === "error") {
-          throw new Error(`GLSL compilation errors in ${this.props.stage} shader ${this.props.id}`);
+    }
+    _getImageDataMap(faceData) {
+      for (let i = 0; i < import_core14.Texture.CubeFaces.length; ++i) {
+        const faceName = import_core14.Texture.CubeFaces[i];
+        if (faceData[faceName]) {
+          faceData[34069 /* TEXTURE_CUBE_MAP_POSITIVE_X */ + i] = faceData[faceName];
+          delete faceData[faceName];
         }
-        return;
       }
-      import_core14.log.once(1, "Shader compilation is asynchronous")();
-      await this._waitForCompilationComplete();
-      import_core14.log.info(2, `Shader ${this.id} - async compilation complete: ${this.compilationStatus}`)();
-      this._getCompilationStatus();
-      this.debugShader();
+      return faceData;
     }
-    /** Use KHR_parallel_shader_compile extension if available */
-    async _waitForCompilationComplete() {
-      const waitMs = async (ms) => await new Promise((resolve) => setTimeout(resolve, ms));
-      const DELAY_MS = 10;
-      if (!this.device.features.has("compilation-status-async-webgl")) {
-        await waitMs(DELAY_MS);
-        return;
-      }
-      const { gl } = this.device;
-      for (; ; ) {
-        const complete = gl.getShaderParameter(this.handle, 37297 /* COMPLETION_STATUS_KHR */);
-        if (complete) {
-          return;
+    // RESOURCE METHODS
+    /**
+     * Sets sampler parameters on texture
+     */
+    _setSamplerParameters(parameters) {
+      import_core14.log.log(1, "texture sampler parameters", parameters)();
+      this.gl.bindTexture(this.glTarget, this.handle);
+      for (const [pname, pvalue] of Object.entries(parameters)) {
+        const param = Number(pname);
+        const value = pvalue;
+        switch (param) {
+          case 33082 /* TEXTURE_MIN_LOD */:
+          case 33083 /* TEXTURE_MAX_LOD */:
+            this.gl.texParameterf(this.glTarget, param, value);
+            break;
+          case 10241 /* TEXTURE_MIN_FILTER */:
+            this.gl.texParameteri(this.glTarget, param, value);
+            break;
+          case 10242 /* TEXTURE_WRAP_S */:
+          case 10243 /* TEXTURE_WRAP_T */:
+            this.gl.texParameteri(this.glTarget, param, value);
+            break;
+          case 34046 /* TEXTURE_MAX_ANISOTROPY_EXT */:
+            if (this.device.features.has("texture-filterable-anisotropic-webgl")) {
+              this.gl.texParameteri(this.glTarget, param, value);
+            }
+            break;
+          default:
+            this.gl.texParameteri(this.glTarget, param, value);
+            break;
         }
-        await waitMs(DELAY_MS);
       }
+      this.gl.bindTexture(this.glTarget, null);
     }
+    // CLASSIC
+    /*
+      setCubeMapData(options: {
+        width: number;
+        height: number;
+        data: Record<GL, Texture2DData> | Record<TextureCubeFace, Texture2DData>;
+        format?: any;
+        type?: any;
+        /** @deprecated Use .data *
+        pixels: any;
+      }): void {
+        const {gl} = this;
+    
+        const {width, height, pixels, data, format = GL.RGBA, type = GL.UNSIGNED_BYTE} = options;
+    
+        // pixel data (imageDataMap) is an Object from Face to Image or Promise.
+        // For example:
+        // {
+        // GL.TEXTURE_CUBE_MAP_POSITIVE_X : Image-or-Promise,
+        // GL.TEXTURE_CUBE_MAP_NEGATIVE_X : Image-or-Promise,
+        // ... }
+        // To provide multiple level-of-details (LODs) this can be Face to Array
+        // of Image or Promise, like this
+        // {
+        // GL.TEXTURE_CUBE_MAP_POSITIVE_X : [Image-or-Promise-LOD-0, Image-or-Promise-LOD-1],
+        // GL.TEXTURE_CUBE_MAP_NEGATIVE_X : [Image-or-Promise-LOD-0, Image-or-Promise-LOD-1],
+        // ... }
+    
+        const imageDataMap = this._getImageDataMap(pixels || data);
+    
+        const resolvedFaces = WEBGLTexture.FACES.map(face => {
+          const facePixels = imageDataMap[face];
+          return Array.isArray(facePixels) ? facePixels : [facePixels];
+        });
+        this.bind();
+    
+        WEBGLTexture.FACES.forEach((face, index) => {
+          if (resolvedFaces[index].length > 1 && this.props.mipmaps !== false) {
+            // If the user provides multiple LODs, then automatic mipmap
+            // generation generateMipmap() should be disabled to avoid overwritting them.
+            log.warn(`${this.id} has mipmap and multiple LODs.`)();
+          }
+          resolvedFaces[index].forEach((image, lodLevel) => {
+            // TODO: adjust width & height for LOD!
+            if (width && height) {
+              gl.texImage2D(face, lodLevel, format, width, height, 0 /* border*, format, type, image);
+            } else {
+              gl.texImage2D(face, lodLevel, format, format, type, image);
+            }
+          });
+        });
+    
+        this.unbind();
+      }
+      */
+    // INTERNAL SETTERS
     /**
-     * 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
+     * Copy a region of data from a CPU memory buffer into this texture.
+     * @todo -   GLUnpackParameters parameters
      */
-    _getCompilationStatus() {
-      this.compilationStatus = this.device.gl.getShaderParameter(this.handle, 35713 /* COMPILE_STATUS */) ? "success" : "error";
+    _setMipLevel(depth, mipLevel, textureData, glTarget = this.glTarget) {
+      if (import_core14.Texture.isExternalImage(textureData)) {
+        copyExternalImageToMipLevel(this.device.gl, this.handle, textureData, {
+          ...this,
+          depth,
+          mipLevel,
+          glTarget
+        });
+        return;
+      }
+      if (import_core14.Texture.isTextureLevelData(textureData)) {
+        copyCPUDataToMipLevel(this.device.gl, textureData.data, {
+          ...this,
+          depth,
+          mipLevel,
+          glTarget
+        });
+        return;
+      }
+      throw new Error("Texture: invalid image data");
+    }
+    // HELPERS
+    getActiveUnit() {
+      return this.gl.getParameter(34016 /* ACTIVE_TEXTURE */) - 33984 /* TEXTURE0 */;
+    }
+    bind(textureUnit) {
+      const { gl } = this;
+      if (textureUnit !== void 0) {
+        this.textureUnit = textureUnit;
+        gl.activeTexture(gl.TEXTURE0 + textureUnit);
+      }
+      gl.bindTexture(this.glTarget, this.handle);
+      return textureUnit;
+    }
+    unbind(textureUnit) {
+      const { gl } = this;
+      if (textureUnit !== void 0) {
+        this.textureUnit = textureUnit;
+        gl.activeTexture(gl.TEXTURE0 + textureUnit);
+      }
+      gl.bindTexture(this.glTarget, null);
+      return textureUnit;
     }
   };
 
@@ -4633,9 +4613,9 @@ ${source2}`;
      */
     setBindings(bindings, options) {
       for (const [name, value] of Object.entries(bindings)) {
-        const binding = this.shaderLayout.bindings.find((binding2) => binding2.name === name) || this.shaderLayout.bindings.find((binding2) => binding2.name === `${name}Uniforms`);
+        const binding = this.shaderLayout.bindings.find((binding_) => binding_.name === name) || this.shaderLayout.bindings.find((binding_) => binding_.name === `${name}Uniforms`);
         if (!binding) {
-          const validBindings = this.shaderLayout.bindings.map((binding2) => `"${binding2.name}"`).join(", ");
+          const validBindings = this.shaderLayout.bindings.map((binding_) => `"${binding_.name}"`).join(", ");
           if (!options?.disableWarnings) {
             import_core16.log.warn(
               `No binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`,
@@ -4771,20 +4751,33 @@ ${source2}`;
       this._reportLinkStatus(status);
     }
     /** Report link status. First, check for shader compilation failures if linking fails */
-    _reportLinkStatus(status) {
+    async _reportLinkStatus(status) {
       switch (status) {
         case "success":
           return;
         default:
-          if (this.vs.compilationStatus === "error") {
-            this.vs.debugShader();
-            throw new Error(`Error during compilation of shader ${this.vs.id}`);
+          switch (this.vs.compilationStatus) {
+            case "error":
+              this.vs.debugShader();
+              throw new Error(`Error during compilation of shader ${this.vs.id}`);
+            case "pending":
+              this.vs.asyncCompilationStatus.then(() => this.vs.debugShader());
+              break;
+            case "success":
+              break;
           }
-          if (this.fs?.compilationStatus === "error") {
-            this.fs.debugShader();
-            throw new Error(`Error during compilation of shader ${this.fs.id}`);
+          switch (this.fs?.compilationStatus) {
+            case "error":
+              this.fs.debugShader();
+              throw new Error(`Error during compilation of shader ${this.fs.id}`);
+            case "pending":
+              this.fs.asyncCompilationStatus.then(() => this.fs.debugShader());
+              break;
+            case "success":
+              break;
           }
-          throw new Error(`Error during ${status}: ${this.device.gl.getProgramInfoLog(this.handle)}`);
+          const linkErrorLog = this.device.gl.getProgramInfoLog(this.handle);
+          throw new Error(`Error during ${status}: ${linkErrorLog}`);
       }
     }
     /**
@@ -4975,8 +4968,8 @@ ${source2}`;
     }
   };
   function _copyBufferToBuffer(device, options) {
-    const source = options.source;
-    const destination = options.destination;
+    const source = options.sourceBuffer;
+    const destination = options.destinationBuffer;
     device.gl.bindBuffer(36662 /* COPY_READ_BUFFER */, source.handle);
     device.gl.bindBuffer(36663 /* COPY_WRITE_BUFFER */, destination.handle);
     device.gl.copyBufferSubData(
@@ -4995,20 +4988,20 @@ ${source2}`;
   function _copyTextureToBuffer(device, options) {
     const {
       /** Texture to copy to/from. */
-      source,
+      sourceTexture,
       /**  Mip-map level of the texture to copy to/from. (Default 0) */
       mipLevel = 0,
       /** Defines which aspects of the texture to copy to/from. */
       aspect = "all",
       /** Width to copy */
-      width = options.source.width,
+      width = options.sourceTexture.width,
       /** Height to copy */
-      height = options.source.height,
+      height = options.sourceTexture.height,
       depthOrArrayLayers = 0,
       /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
       origin = [0, 0],
       /** Destination buffer */
-      destination,
+      destinationBuffer,
       /** Offset, in bytes, from the beginning of the buffer to the start of the image data (default 0) */
       byteOffset = 0,
       /**
@@ -5024,15 +5017,15 @@ ${source2}`;
       rowsPerImage
     } = options;
     if (aspect !== "all") {
-      throw new Error("not supported");
+      throw new Error("aspect not supported in WebGL");
     }
     if (mipLevel !== 0 || depthOrArrayLayers !== 0 || bytesPerRow || rowsPerImage) {
       throw new Error("not implemented");
     }
-    const { framebuffer, destroyFramebuffer } = getFramebuffer2(source);
+    const { framebuffer, destroyFramebuffer } = getFramebuffer2(sourceTexture);
     let prevHandle;
     try {
-      const webglBuffer = destination;
+      const webglBuffer = destinationBuffer;
       const sourceWidth = width || framebuffer.width;
       const sourceHeight = height || framebuffer.height;
       const sourceParams = getTextureFormatWebGL(
@@ -5064,7 +5057,7 @@ ${source2}`;
   function _copyTextureToTexture(device, options) {
     const {
       /** Texture to copy to/from. */
-      source,
+      sourceTexture,
       /**  Mip-map level of the texture to copy to (Default 0) */
       destinationMipLevel = 0,
       /** Defines which aspects of the texture to copy to/from. */
@@ -5074,7 +5067,7 @@ ${source2}`;
       /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to. */
       destinationOrigin = [0, 0],
       /** Texture to copy to/from. */
-      destination
+      destinationTexture
       /**  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. */
@@ -5083,11 +5076,11 @@ ${source2}`;
       // destinationAspect = options.aspect,
     } = options;
     let {
-      width = options.destination.width,
-      height = options.destination.height
+      width = options.destinationTexture.width,
+      height = options.destinationTexture.height
       // depthOrArrayLayers = 0
     } = options;
-    const { framebuffer, destroyFramebuffer } = getFramebuffer2(source);
+    const { framebuffer, destroyFramebuffer } = getFramebuffer2(sourceTexture);
     const [sourceX, sourceY] = origin;
     const [destinationX, destinationY, destinationZ] = destinationOrigin;
     const prevHandle = device.gl.bindFramebuffer(
@@ -5096,8 +5089,8 @@ ${source2}`;
     );
     let texture = null;
     let textureTarget;
-    if (destination instanceof WEBGLTexture) {
-      texture = destination;
+    if (destinationTexture instanceof WEBGLTexture) {
+      texture = destinationTexture;
       width = Number.isFinite(width) ? width : texture.width;
       height = Number.isFinite(height) ? height : texture.height;
       texture.bind(0);
@@ -5201,19 +5194,19 @@ ${source2}`;
 
   // src/utils/fill-array.ts
   function fillArray(options) {
-    const { target, source, start = 0, count = 1 } = options;
+    const { target: target2, source, start = 0, count = 1 } = options;
     const length = source.length;
     const total = count * length;
     let copied = 0;
     for (let i = start; copied < length; copied++) {
-      target[i++] = source[copied];
+      target2[i++] = source[copied];
     }
     while (copied < total) {
       if (copied < total - copied) {
-        target.copyWithin(start + copied, start, start + copied);
+        target2.copyWithin(start + copied, start, start + copied);
         copied *= 2;
       } else {
-        target.copyWithin(start + copied, start, start + total - copied);
+        target2.copyWithin(start + copied, start, start + total - copied);
         copied = total;
       }
     }
@@ -5630,11 +5623,11 @@ ${source2}`;
      * outstanding queries representing disjoint `begin()`/`end()` intervals.
      * It is not possible to interleave or overlap `begin` and `end` calls.
      */
-    _begin(target) {
+    _begin(target2) {
       if (this._queryPending) {
         return;
       }
-      this.target = target;
+      this.target = target2;
       this.device.gl.beginQuery(this.target, this.handle);
       return;
     }
@@ -5767,33 +5760,57 @@ ${source2}`;
     //
     constructor(props) {
       super({ ...props, id: props.id || uid("webgl-device") });
-      const device = props.gl?.device;
+      if (!props.createCanvasContext) {
+        throw new Error("WebGLDevice requires props.createCanvasContext to be set");
+      }
+      const canvasContextProps = props.createCanvasContext === true ? {} : props.createCanvasContext;
+      let device = canvasContextProps.canvas?.gl?.device;
       if (device) {
         throw new Error(`WebGL context already attached to device ${device.id}`);
       }
-      const canvas = props.gl?.canvas || props.canvas;
-      this.canvasContext = new WebGLCanvasContext(this, { ...props, canvas });
+      this.canvasContext = new WebGLCanvasContext(this, canvasContextProps);
       this.lost = new Promise((resolve) => {
         this._resolveContextLost = resolve;
       });
-      this.handle = createBrowserContext(this.canvasContext.canvas, {
-        ...props,
-        onContextLost: (event) => this._resolveContextLost?.({
-          reason: "destroyed",
-          message: "Entered sleep mode, or too many apps or browser tabs are using the GPU."
-        })
-      });
-      this.gl = this.handle;
-      if (!this.handle) {
+      const webglContextAttributes = { ...props.webgl };
+      if (canvasContextProps.alphaMode === "premultiplied") {
+        webglContextAttributes.premultipliedAlpha = true;
+      }
+      if (props.powerPreference !== void 0) {
+        webglContextAttributes.powerPreference = props.powerPreference;
+      }
+      const gl = createBrowserContext(
+        this.canvasContext.canvas,
+        {
+          onContextLost: (event) => this._resolveContextLost?.({
+            reason: "destroyed",
+            message: "Entered sleep mode, or too many apps or browser tabs are using the GPU."
+          }),
+          // eslint-disable-next-line no-console
+          onContextRestored: (event) => console.log("WebGL context restored")
+        },
+        webglContextAttributes
+      );
+      if (!gl) {
         throw new Error("WebGL context creation failed");
       }
+      device = gl.device;
+      if (device) {
+        throw new Error(`WebGL context already attached to device ${device.id}`);
+      }
+      this.handle = gl;
+      this.gl = gl;
       this.spectorJS = initializeSpectorJS({ ...this.props, gl: this.handle });
       this.gl.device = this;
       this.gl._version = 2;
       this.info = getDeviceInfo(this.gl, this._extensions);
       this.limits = new WebGLDeviceLimits(this.gl);
-      this.features = new WebGLDeviceFeatures(this.gl, this._extensions, this.props.disabledFeatures);
-      if (this.props.initalizeFeatures) {
+      this.features = new WebGLDeviceFeatures(
+        this.gl,
+        this._extensions,
+        this.props._disabledFeatures
+      );
+      if (this.props._initializeFeatures) {
         this.features.initializeFeatures();
       }
       this.canvasContext.resize();
@@ -5801,8 +5818,8 @@ ${source2}`;
         log: (...args) => import_core23.log.log(1, ...args)()
       });
       glState.trackState(this.gl, { copyState: false });
-      if (props.debug) {
-        this.gl = makeDebugContext(this.gl, { ...props, throwOnError: true });
+      if (props.debugWebGL) {
+        this.gl = makeDebugContext(this.gl, { ...props });
         this.debug = true;
         import_core23.log.level = Math.max(import_core23.log.level, 1);
         import_core23.log.warn("WebGL debug mode activated. Performance reduced.")();
@@ -5831,7 +5848,7 @@ ${source2}`;
       throw new Error("WebGL only supports a single canvas");
     }
     createBuffer(props) {
-      const newProps = this._getBufferProps(props);
+      const newProps = this._normalizeBufferProps(props);
       return new WEBGLBuffer(this, newProps);
     }
     createTexture(props) {
@@ -6175,27 +6192,23 @@ ${source2}`;
       if (!isWebGL(gl)) {
         throw new Error("Invalid WebGL2RenderingContext");
       }
-      return new WebGLDevice({ gl });
+      return new WebGLDevice({ _handle: gl });
     }
     async create(props = {}) {
       import_core24.log.groupCollapsed(LOG_LEVEL2, "WebGLDevice created")();
       const promises = [];
-      if (props.debug) {
+      if (props.debugWebGL) {
         promises.push(loadWebGLDeveloperTools());
       }
-      if (props.debugWithSpectorJS) {
+      if (props.debugSpectorJS) {
         promises.push(loadSpectorJS(props));
       }
-      if (typeof props.canvas === "string") {
-        promises.push(import_core24.CanvasContext.pageLoaded);
-      }
       const results = await Promise.allSettled(promises);
       for (const result of results) {
         if (result.status === "rejected") {
           import_core24.log.error(`Failed to initialize debug libraries ${result.reason}`)();
         }
       }
-      import_core24.log.probe(LOG_LEVEL2 + 1, "DOM is loaded")();
       const device = new WebGLDevice(props);
       const message2 = `Created ${device.type}${device.debug ? " debug" : ""} context: ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContext.id}`;
       import_core24.log.probe(LOG_LEVEL2, message2)();