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

package/dist/index.cjs

@@ -2,9 +2,9 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-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") {
@@ -137,8 +137,8 @@ var enable = (gl, value, key) => value ? gl.enable(key) : gl.disable(key);
 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 ? 36009 : 36008;
-  return gl.bindFramebuffer(target, value);
+  const target2 = key === 36006 ? 36009 : 36008;
+  return gl.bindFramebuffer(target2, value);
 };
 var bindBuffer = (gl, value, key) => {
   const bindingMap = {
@@ -340,17 +340,17 @@ var GL_HOOKED_SETTERS = {
   useProgram: (update, value) => update({
     [35725]: value
   }),
-  bindRenderbuffer: (update, target, value) => update({
+  bindRenderbuffer: (update, target2, value) => update({
     [36007]: value
   }),
-  bindTransformFeedback: (update, target, value) => update({
+  bindTransformFeedback: (update, target2, value) => update({
     [36389]: value
   }),
   bindVertexArray: (update, value) => update({
     [34229]: value
   }),
-  bindFramebuffer: (update, target, framebuffer) => {
-    switch (target) {
+  bindFramebuffer: (update, target2, framebuffer) => {
+    switch (target2) {
       case 36160:
         return update({
           [36006]: framebuffer,
@@ -364,14 +364,14 @@ var GL_HOOKED_SETTERS = {
         return null;
     }
   },
-  bindBuffer: (update, target, buffer) => {
+  bindBuffer: (update, target2, buffer) => {
     const pname = {
       [34962]: [34964],
       [36662]: [36662],
       [36663]: [36663],
       [35051]: [35053],
       [35052]: [35055]
-    }[target];
+    }[target2];
     if (pname) {
       return update({ [pname]: buffer });
     }
@@ -719,33 +719,27 @@ function installProgramSpy(gl) {
 }
 
 // dist/context/helpers/create-browser-context.js
-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;
 }
 
@@ -1406,1755 +1400,1743 @@ var WebGLDeviceLimits = class extends import_core3.DeviceLimits {
 };
 
 // dist/adapter/webgl-canvas-context.js
-var import_core10 = require("@luma.gl/core");
+var import_core5 = require("@luma.gl/core");
 
 // dist/adapter/resources/webgl-framebuffer.js
-var import_core9 = require("@luma.gl/core");
-var import_constants13 = require("@luma.gl/constants");
-
-// dist/adapter/resources/webgl-texture.js
-var import_core8 = require("@luma.gl/core");
-var import_constants12 = require("@luma.gl/constants");
-
-// dist/context/state-tracker/with-parameters.js
-function withGLParameters(gl, parameters, func) {
-  if (isObjectEmpty2(parameters)) {
-    return func(gl);
-  }
-  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();
-    }
-  }
-  return value;
-}
-function isObjectEmpty2(object) {
-  for (const key in object) {
-    return false;
-  }
-  return true;
-}
-
-// dist/adapter/converters/sampler-parameters.js
-var import_constants7 = require("@luma.gl/constants");
-
-// dist/adapter/converters/device-parameters.js
 var import_core4 = require("@luma.gl/core");
 var import_constants6 = require("@luma.gl/constants");
-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();
+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();
+    }
   }
-}
-function withDeviceParameters(device, parameters, func) {
-  if (isObjectEmpty3(parameters)) {
-    return func(device);
+  /** destroys any auto created resources etc. */
+  destroy() {
+    super.destroy();
+    if (!this.destroyed && this.handle !== null) {
+      this.gl.deleteFramebuffer(this.handle);
+    }
   }
-  const webglDevice = device;
-  webglDevice.pushState();
-  try {
-    setDeviceParameters(device, parameters);
-    return func(device);
-  } finally {
-    webglDevice.popState();
+  updateAttachments() {
+    const prevHandle = this.gl.bindFramebuffer(36160, this.handle);
+    for (let i = 0; i < this.colorAttachments.length; ++i) {
+      const attachment = this.colorAttachments[i];
+      if (attachment) {
+        const attachmentPoint = 36064 + 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);
+      if (status !== 36053) {
+        throw new Error(`Framebuffer ${_getFrameBufferStatus(status)}`);
+      }
+    }
+    this.gl.bindFramebuffer(36160, prevHandle);
   }
-}
-function setDeviceParameters(device, parameters) {
-  const webglDevice = device;
-  const { gl } = webglDevice;
-  if (parameters.cullMode) {
-    switch (parameters.cullMode) {
-      case "none":
-        gl.disable(2884);
+  // 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:
+      case 32879:
+        gl.framebufferTextureLayer(36160, attachment, texture.handle, level, layer);
         break;
-      case "front":
-        gl.enable(2884);
-        gl.cullFace(1028);
+      case 34067:
+        const face = mapIndexToCubeMapFace(layer);
+        gl.framebufferTexture2D(36160, attachment, face, texture.handle, level);
         break;
-      case "back":
-        gl.enable(2884);
-        gl.cullFace(1029);
+      case 3553:
+        gl.framebufferTexture2D(36160, attachment, 3553, texture.handle, level);
         break;
+      default:
+        throw new Error("Illegal texture type");
     }
+    gl.bindTexture(texture.glTarget, null);
   }
-  if (parameters.frontFace) {
-    gl.frontFace(map("frontFace", parameters.frontFace, {
-      ccw: 2305,
-      cw: 2304
-    }));
+};
+function mapIndexToCubeMapFace(layer) {
+  return layer < 34069 ? layer + 34069 : layer;
+}
+function _getFrameBufferStatus(status) {
+  switch (status) {
+    case 36053:
+      return "success";
+    case 36054:
+      return "Mismatched attachments";
+    case 36055:
+      return "No attachments";
+    case 36057:
+      return "Height/width mismatch";
+    case 36061:
+      return "Unsupported or split attachments";
+    case 36182:
+      return "Samples mismatch";
+    default:
+      return `${status}`;
   }
-  if (parameters.unclippedDepth) {
-    if (device.features.has("depth-clip-control")) {
-      gl.enable(34383);
-    }
+}
+
+// dist/adapter/webgl-canvas-context.js
+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();
   }
-  if (parameters.depthBias !== void 0) {
-    gl.enable(32823);
-    gl.polygonOffset(parameters.depthBias, parameters.depthBiasSlopeScale || 0);
+  getCurrentFramebuffer() {
+    this.update();
+    this._framebuffer = this._framebuffer || new WEBGLFramebuffer(this.device, { handle: null });
+    return this._framebuffer;
   }
-  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,
-        last: 36430
-      });
-      ext == null ? void 0 : ext.provokingVertexWEBGL(vertex);
+  /** 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();
     }
   }
-  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,
-          line: 6913
-        });
-        ext == null ? void 0 : ext.polygonModeWEBGL(1028, mode);
-        ext == null ? void 0 : ext.polygonModeWEBGL(1029, mode);
-      }
-      if (parameters.polygonOffsetLine) {
-        gl.enable(10754);
-      }
+  /**
+   * 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 == null ? void 0 : options.useDevicePixels);
+      this.setDevicePixelRatio(devicePixelRatio, options);
+      return;
     }
   }
-  if (device.features.has("shader-clip-cull-distance-webgl")) {
-    if (parameters.clipDistance0) {
-      gl.enable(12288);
-    }
-    if (parameters.clipDistance1) {
-      gl.enable(12289);
-    }
-    if (parameters.clipDistance2) {
-      gl.enable(12290);
-    }
-    if (parameters.clipDistance3) {
-      gl.enable(12291);
-    }
-    if (parameters.clipDistance4) {
-      gl.enable(12292);
-    }
-    if (parameters.clipDistance5) {
-      gl.enable(12293);
-    }
-    if (parameters.clipDistance6) {
-      gl.enable(12294);
-    }
-    if (parameters.clipDistance7) {
-      gl.enable(12295);
-    }
+  commit() {
   }
-  if (parameters.depthWriteEnabled !== void 0) {
-    gl.depthMask(mapBoolean("depthWriteEnabled", parameters.depthWriteEnabled));
+};
+
+// dist/context/debug/spector.js
+var import_core6 = require("@luma.gl/core");
+
+// dist/utils/load-script.js
+async function loadScript(scriptUrl, scriptId) {
+  const head = document.getElementsByTagName("head")[0];
+  if (!head) {
+    throw new Error("loadScript");
   }
-  if (parameters.depthCompare) {
-    parameters.depthCompare !== "always" ? gl.enable(2929) : gl.disable(2929);
-    gl.depthFunc(convertCompareFunction("depthCompare", parameters.depthCompare));
+  const script = document.createElement("script");
+  script.setAttribute("type", "text/javascript");
+  script.setAttribute("src", scriptUrl);
+  if (scriptId) {
+    script.id = scriptId;
   }
-  if (parameters.stencilWriteMask) {
-    const mask = parameters.stencilWriteMask;
-    gl.stencilMaskSeparate(1028, mask);
-    gl.stencilMaskSeparate(1029, mask);
+  return new Promise((resolve, reject) => {
+    script.onload = resolve;
+    script.onerror = (error) => reject(new Error(`Unable to load script '${scriptUrl}': ${error}`));
+    head.appendChild(script);
+  });
+}
+
+// dist/context/debug/spector.js
+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.stencilReadMask) {
-    import_core4.log.warn("stencilReadMask not supported under WebGL");
+}
+function initializeSpectorJS(props) {
+  var _a;
+  props = { ...DEFAULT_SPECTOR_PROPS, ...props };
+  if (!props.debugSpectorJS) {
+    return null;
   }
-  if (parameters.stencilCompare) {
-    const mask = parameters.stencilReadMask || 4294967295;
-    const glValue = convertCompareFunction("depthCompare", parameters.stencilCompare);
-    parameters.stencilCompare !== "always" ? gl.enable(2960) : gl.disable(2960);
-    gl.stencilFuncSeparate(1028, glValue, 0, mask);
-    gl.stencilFuncSeparate(1029, glValue, 0, mask);
+  if (!spector && globalThis.SPECTOR && !((_a = globalThis.luma) == null ? void 0 : _a.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.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, sfail, dpfail, dppass);
-    gl.stencilOpSeparate(1029, sfail, dpfail, dppass);
+  if (!spector) {
+    return null;
   }
-  switch (parameters.blend) {
-    case true:
-      gl.enable(3042);
-      break;
-    case false:
-      gl.disable(3042);
-      break;
-    default:
+  if (!initialized) {
+    initialized = true;
+    spector.spyCanvases();
+    spector == null ? void 0 : spector.onCaptureStarted.add((capture) => import_core6.log.info("Spector capture started:", capture)());
+    spector == null ? void 0 : spector.onCapture.add((capture) => {
+      import_core6.log.info("Spector capture complete:", capture)();
+      spector == null ? void 0 : spector.getResultUI();
+      spector == null ? void 0 : spector.resultView.display();
+      spector == null ? void 0 : spector.resultView.addCapture(capture);
+    });
   }
-  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);
+  if (props.gl) {
+    const gl = props.gl;
+    const device = gl.device;
+    spector == null ? void 0 : 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 == null ? void 0 : spector.stopCapture();
+    });
   }
+  return spector;
 }
-function convertCompareFunction(parameter, value) {
-  return map(parameter, value, {
-    never: 512,
-    less: 513,
-    equal: 514,
-    "less-equal": 515,
-    greater: 516,
-    "not-equal": 517,
-    "greater-equal": 518,
-    always: 519
-  });
-}
-function convertStencilOperation(parameter, value) {
-  return map(parameter, value, {
-    keep: 7680,
-    zero: 0,
-    replace: 7681,
-    invert: 5386,
-    "increment-clamp": 7682,
-    "decrement-clamp": 7683,
-    "increment-wrap": 34055,
-    "decrement-wrap": 34056
-  });
+
+// dist/context/debug/webgl-developer-tools.js
+var import_core7 = require("@luma.gl/core");
+var import_constants7 = require("@luma.gl/constants");
+var import_env = require("@probe.gl/env");
+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 convertBlendOperationToEquation(parameter, value) {
-  return map(parameter, value, {
-    add: 32774,
-    subtract: 32778,
-    "reverse-subtract": 32779,
-    min: 32775,
-    max: 32776
-  });
+async function loadWebGLDeveloperTools() {
+  if ((0, import_env.isBrowser)() && !globalThis.WebGLDebugUtils) {
+    globalThis.global = globalThis.global || globalThis;
+    globalThis.global.module = {};
+    await loadScript(WEBGL_DEBUG_CDN_URL);
+  }
 }
-function convertBlendFactorToFunction(parameter, value) {
-  return map(parameter, value, {
-    one: 1,
-    zero: 0,
-    "src-color": 768,
-    "one-minus-src-color": 769,
-    "dst-color": 774,
-    "one-minus-dst-color": 775,
-    "src-alpha": 770,
-    "one-minus-src-alpha": 771,
-    "dst-alpha": 772,
-    "one-minus-dst-alpha": 773,
-    "src-alpha-saturated": 776,
-    "constant-color": 32769,
-    "one-minus-constant-color": 32770,
-    "constant-alpha": 32771,
-    "one-minus-constant-alpha": 32772
-  });
+function makeDebugContext(gl, props = {}) {
+  return props.debugWebGL ? getDebugContext(gl, props) : getRealContext(gl);
 }
-function message(parameter, value) {
-  return `Illegal parameter ${value} for ${parameter}`;
+function getRealContext(gl) {
+  const data = getWebGLContextData(gl);
+  return data.realContext ? data.realContext : gl;
 }
-function map(parameter, value, valueMap) {
-  if (!(value in valueMap)) {
-    throw new Error(message(parameter, value));
+function getDebugContext(gl, props) {
+  if (!globalThis.WebGLDebugUtils) {
+    import_core7.log.warn("webgl-debug not loaded")();
+    return gl;
   }
-  return valueMap[value];
+  const data = getWebGLContextData(gl);
+  if (data.debugContext) {
+    return data.debugContext;
+  }
+  globalThis.WebGLDebugUtils.init({ ...import_constants7.GL, ...gl });
+  const glDebug = globalThis.WebGLDebugUtils.makeDebugContext(gl, onGLError.bind(null, props), onValidateGLFunc.bind(null, props));
+  for (const key in import_constants7.GL) {
+    if (!(key in glDebug) && typeof import_constants7.GL[key] === "number") {
+      glDebug[key] = import_constants7.GL[key];
+    }
+  }
+  class WebGLDebugContext {
+  }
+  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 mapBoolean(parameter, value) {
-  return value;
+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 isObjectEmpty3(obj) {
-  let isEmpty = true;
-  for (const key in obj) {
-    isEmpty = false;
-    break;
-  }
-  return isEmpty;
+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;
 }
-
-// dist/adapter/converters/sampler-parameters.js
-function convertSamplerParametersToWebGL(props) {
-  const params = {};
-  if (props.addressModeU) {
-    params[10242] = convertAddressMode(props.addressModeU);
+function onValidateGLFunc(props, functionName, functionArgs) {
+  let functionString = "";
+  if (import_core7.log.level >= 1) {
+    functionString = getFunctionString(functionName, functionArgs);
+    import_core7.log.log(1, functionString)();
   }
-  if (props.addressModeV) {
-    params[10243] = convertAddressMode(props.addressModeV);
+  for (const arg of functionArgs) {
+    if (arg === void 0) {
+      functionString = functionString || getFunctionString(functionName, functionArgs);
+      debugger;
+    }
   }
-  if (props.addressModeW) {
-    params[32882] = convertAddressMode(props.addressModeW);
+}
+
+// dist/utils/uid.js
+var uidCounters = {};
+function uid(id = "id") {
+  uidCounters[id] = uidCounters[id] || 1;
+  const count = uidCounters[id]++;
+  return `${id}-${count}`;
+}
+
+// dist/adapter/resources/webgl-buffer.js
+var import_core8 = require("@luma.gl/core");
+var import_constants8 = require("@luma.gl/constants");
+var WEBGLBuffer = class extends import_core8.Buffer {
+  device;
+  gl;
+  handle;
+  /** 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;
+  /** 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.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 : 5123;
+    if (props.data) {
+      this._initWithData(props.data, props.byteOffset, props.byteLength);
+    } else {
+      this._initWithByteLength(props.byteLength || 0);
+    }
   }
-  if (props.magFilter) {
-    params[10240] = convertMaxFilterMode(props.magFilter);
+  // 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);
   }
-  if (props.minFilter || props.mipmapFilter) {
-    params[10241] = convertMinFilterMode(props.minFilter || "linear", props.mipmapFilter);
+  // 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;
   }
-  if (props.lodMinClamp !== void 0) {
-    params[33082] = props.lodMinClamp;
+  destroy() {
+    if (!this.destroyed && this.handle) {
+      this.removeStats();
+      this.trackDeallocatedMemory();
+      this.gl.deleteBuffer(this.handle);
+      this.destroyed = true;
+      this.handle = null;
+    }
   }
-  if (props.lodMaxClamp !== void 0) {
-    params[33083] = props.lodMaxClamp;
+  write(data, byteOffset = 0) {
+    const srcOffset = 0;
+    const byteLength = void 0;
+    const glTarget = 36663;
+    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);
   }
-  if (props.type === "comparison-sampler") {
-    params[34892] = 34894;
+  /** Asynchronously read data from the buffer */
+  async readAsync(byteOffset = 0, byteLength) {
+    return this.readSyncWebGL(byteOffset, byteLength);
   }
-  if (props.compare) {
-    params[34893] = convertCompareFunction("compare", props.compare);
+  /** 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, this.handle);
+    this.gl.getBufferSubData(36662, byteOffset, data, dstOffset, byteLength);
+    this.gl.bindBuffer(36662, null);
+    this._setDebugData(data, byteOffset, byteLength);
+    return data;
   }
-  if (props.maxAnisotropy) {
-    params[34046] = props.maxAnisotropy;
+};
+function getWebGLTarget(usage) {
+  if (usage & import_core8.Buffer.INDEX) {
+    return 34963;
   }
-  return params;
-}
-function convertAddressMode(addressMode) {
-  switch (addressMode) {
-    case "clamp-to-edge":
-      return 33071;
-    case "repeat":
-      return 10497;
-    case "mirror-repeat":
-      return 33648;
+  if (usage & import_core8.Buffer.VERTEX) {
+    return 34962;
   }
-}
-function convertMaxFilterMode(maxFilter) {
-  switch (maxFilter) {
-    case "nearest":
-      return 9728;
-    case "linear":
-      return 9729;
+  if (usage & import_core8.Buffer.UNIFORM) {
+    return 35345;
   }
+  return 34962;
 }
-function convertMinFilterMode(minFilter, mipmapFilter) {
-  if (!mipmapFilter) {
-    return convertMaxFilterMode(minFilter);
+function getWebGLUsage(usage) {
+  if (usage & import_core8.Buffer.INDEX) {
+    return 35044;
   }
-  switch (minFilter) {
-    case "nearest":
-      return mipmapFilter === "nearest" ? 9984 : 9986;
-    case "linear":
-      return mipmapFilter === "nearest" ? 9985 : 9987;
+  if (usage & import_core8.Buffer.VERTEX) {
+    return 35044;
+  }
+  if (usage & import_core8.Buffer.UNIFORM) {
+    return 35048;
   }
+  return 35044;
 }
 
-// dist/adapter/resources/webgl-sampler.js
-var import_core5 = require("@luma.gl/core");
-var import_constants8 = require("@luma.gl/constants");
-var WEBGLSampler = class extends import_core5.Sampler {
+// dist/adapter/resources/webgl-shader.js
+var import_core9 = require("@luma.gl/core");
+var import_constants9 = require("@luma.gl/constants");
+
+// dist/adapter/helpers/parse-shader-compiler-log.js
+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 getMessageType(messageType) {
+  const MESSAGE_TYPES = ["warning", "error", "info"];
+  const lowerCaseType = messageType.toLowerCase();
+  return MESSAGE_TYPES.includes(lowerCaseType) ? lowerCaseType : "info";
+}
+
+// dist/adapter/resources/webgl-shader.js
+var WEBGLShader = class extends import_core9.Shader {
   device;
   handle;
-  parameters;
   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);
+    switch (this.props.stage) {
+      case "vertex":
+        this.handle = this.props.handle || this.device.gl.createShader(35633);
+        break;
+      case "fragment":
+        this.handle = this.props.handle || this.device.gl.createShader(35632);
+        break;
+      default:
+        throw new Error(this.props.stage);
+    }
+    this._compile(this.source);
   }
   destroy() {
     if (this.handle) {
-      this.device.gl.deleteSampler(this.handle);
-      this.handle = void 0;
+      this.removeStats();
+      this.device.gl.deleteShader(this.handle);
+      this.destroyed = true;
     }
   }
-  toString() {
-    return `Sampler(${this.id},${JSON.stringify(this.props)})`;
+  get asyncCompilationStatus() {
+    return this._waitForCompilationComplete().then(() => this.compilationStatus);
   }
-  /** Set sampler parameters on the sampler */
-  _setSamplerParameters(parameters) {
-    for (const [pname, value] of Object.entries(parameters)) {
-      const param = Number(pname);
-      switch (param) {
-        case 33082:
-        case 33083:
-          this.device.gl.samplerParameterf(this.handle, param, value);
-          break;
-        default:
-          this.device.gl.samplerParameteri(this.handle, param, value);
-          break;
-      }
-    }
+  async getCompilationInfo() {
+    await this._waitForCompilationComplete();
+    return this.getCompilationInfoSync();
   }
-};
-
-// dist/adapter/resources/webgl-texture-view.js
-var import_core6 = require("@luma.gl/core");
-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;
+  getCompilationInfoSync() {
+    const shaderLog = this.device.gl.getShaderInfoLog(this.handle);
+    return shaderLog ? parseShaderCompilerLog(shaderLog) : [];
+  }
+  getTranslatedSource() {
+    const extensions = this.device.getExtension("WEBGL_debug_shaders");
+    const ext = extensions.WEBGL_debug_shaders;
+    return (ext == null ? void 0 : ext.getTranslatedShaderSource(this.handle)) || null;
+  }
+  // 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;
+    }
+    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();
+  }
+  /** 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);
+      if (complete) {
+        return;
+      }
+      await waitMs(DELAY_MS);
+    }
+  }
+  /**
+   * Get the shader compilation status
+   * TODO - Load log even when no error reported, to catch warnings?
+   * https://gamedev.stackexchange.com/questions/30429/how-to-detect-glsl-warnings
+   */
+  _getCompilationStatus() {
+    this.compilationStatus = this.device.gl.getShaderParameter(this.handle, 35713) ? "success" : "error";
   }
 };
 
-// dist/adapter/helpers/webgl-texture-utils.js
-var import_core7 = require("@luma.gl/core");
+// dist/adapter/resources/webgl-sampler.js
+var import_core11 = require("@luma.gl/core");
+var import_constants12 = require("@luma.gl/constants");
+
+// dist/adapter/converters/sampler-parameters.js
 var import_constants11 = require("@luma.gl/constants");
 
-// dist/adapter/helpers/typed-array-utils.js
-var import_constants9 = require("@luma.gl/constants");
-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;
-    case Uint16Array:
-      return 5123;
-    case Uint32Array:
-      return 5125;
-    case Uint8Array:
-      return 5121;
-    case Uint8ClampedArray:
-      return 5121;
-    case Int8Array:
-      return 5120;
-    case Int16Array:
-      return 5122;
-    case Int32Array:
-      return 5124;
-    default:
-      throw new Error(ERR_TYPE_DEDUCTION);
+// dist/adapter/converters/device-parameters.js
+var import_core10 = require("@luma.gl/core");
+var import_constants10 = require("@luma.gl/constants");
+function withDeviceAndGLParameters(device, parameters, glParameters, func) {
+  if (isObjectEmpty2(parameters)) {
+    return func(device);
   }
-}
-function getTypedArrayFromGLType(glType, options) {
-  const { clamped = true } = options || {};
-  switch (glType) {
-    case 5126:
-      return Float32Array;
-    case 5123:
-    case 33635:
-    case 32819:
-    case 32820:
-      return Uint16Array;
-    case 5125:
-      return Uint32Array;
-    case 5121:
-      return clamped ? Uint8ClampedArray : Uint8Array;
-    case 5120:
-      return Int8Array;
-    case 5122:
-      return Int16Array;
-    case 5124:
-      return Int32Array;
-    default:
-      throw new Error("Failed to deduce typed array type from GL constant");
+  const webglDevice = device;
+  webglDevice.pushState();
+  try {
+    setDeviceParameters(device, parameters);
+    setGLParameters(webglDevice.gl, glParameters);
+    return func(device);
+  } finally {
+    webglDevice.popState();
   }
 }
-
-// dist/adapter/helpers/format-utils.js
-var import_constants10 = require("@luma.gl/constants");
-function glFormatToComponents(format) {
-  switch (format) {
-    case 6406:
-    case 33326:
-    case 6403:
-      return 1;
-    case 33328:
-    case 33319:
-      return 2;
-    case 6407:
-    case 34837:
-      return 3;
-    case 6408:
-    case 34836:
-      return 4;
-    default:
-      return 0;
+function withDeviceParameters(device, parameters, func) {
+  if (isObjectEmpty2(parameters)) {
+    return func(device);
   }
-}
-function glTypeToBytes(type) {
-  switch (type) {
-    case 5121:
-      return 1;
-    case 33635:
-    case 32819:
-    case 32820:
-      return 2;
-    case 5126:
-      return 4;
-    default:
-      return 0;
+  const webglDevice = device;
+  webglDevice.pushState();
+  try {
+    setDeviceParameters(device, parameters);
+    return func(device);
+  } finally {
+    webglDevice.popState();
   }
 }
-
-// dist/adapter/helpers/webgl-texture-utils.js
-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 setDeviceParameters(device, parameters) {
+  const webglDevice = device;
+  const { gl } = webglDevice;
+  if (parameters.cullMode) {
+    switch (parameters.cullMode) {
+      case "none":
+        gl.disable(2884);
+        break;
+      case "front":
+        gl.enable(2884);
+        gl.cullFace(1028);
+        break;
+      case "back":
+        gl.enable(2884);
+        gl.cullFace(1029);
+        break;
+    }
   }
-}
-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);
+  if (parameters.frontFace) {
+    gl.frontFace(map("frontFace", parameters.frontFace, {
+      ccw: 2305,
+      cw: 2304
+    }));
   }
-}
-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);
+  if (parameters.unclippedDepth) {
+    if (device.features.has("depth-clip-control")) {
+      gl.enable(34383);
+    }
   }
-}
-function getWebGLTextureTarget(dimension) {
-  switch (dimension) {
-    case "1d":
-      break;
-    case "2d":
-      return 3553;
-    case "3d":
-      return 32879;
-    case "cube":
-      return 34067;
-    case "2d-array":
-      return 35866;
-    case "cube-array":
+  if (parameters.depthBias !== void 0) {
+    gl.enable(32823);
+    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,
+        last: 36430
+      });
+      ext == null ? void 0 : ext.provokingVertexWEBGL(vertex);
+    }
+  }
+  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,
+          line: 6913
+        });
+        ext == null ? void 0 : ext.polygonModeWEBGL(1028, mode);
+        ext == null ? void 0 : ext.polygonModeWEBGL(1029, mode);
+      }
+      if (parameters.polygonOffsetLine) {
+        gl.enable(10754);
+      }
+    }
+  }
+  if (device.features.has("shader-clip-cull-distance-webgl")) {
+    if (parameters.clipDistance0) {
+      gl.enable(12288);
+    }
+    if (parameters.clipDistance1) {
+      gl.enable(12289);
+    }
+    if (parameters.clipDistance2) {
+      gl.enable(12290);
+    }
+    if (parameters.clipDistance3) {
+      gl.enable(12291);
+    }
+    if (parameters.clipDistance4) {
+      gl.enable(12292);
+    }
+    if (parameters.clipDistance5) {
+      gl.enable(12293);
+    }
+    if (parameters.clipDistance6) {
+      gl.enable(12294);
+    }
+    if (parameters.clipDistance7) {
+      gl.enable(12295);
+    }
+  }
+  if (parameters.depthWriteEnabled !== void 0) {
+    gl.depthMask(mapBoolean("depthWriteEnabled", parameters.depthWriteEnabled));
+  }
+  if (parameters.depthCompare) {
+    parameters.depthCompare !== "always" ? gl.enable(2929) : gl.disable(2929);
+    gl.depthFunc(convertCompareFunction("depthCompare", parameters.depthCompare));
+  }
+  if (parameters.stencilWriteMask) {
+    const mask = parameters.stencilWriteMask;
+    gl.stencilMaskSeparate(1028, mask);
+    gl.stencilMaskSeparate(1029, 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) : gl.disable(2960);
+    gl.stencilFuncSeparate(1028, glValue, 0, mask);
+    gl.stencilFuncSeparate(1029, 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, sfail, dpfail, dppass);
+    gl.stencilOpSeparate(1029, sfail, dpfail, dppass);
+  }
+  switch (parameters.blend) {
+    case true:
+      gl.enable(3042);
+      break;
+    case false:
+      gl.disable(3042);
       break;
+    default:
   }
-  throw new Error(dimension);
-}
-function getWebGLCubeFaceTarget(glTarget, dimension, level) {
-  return dimension === "cube" ? 34069 + level : glTarget;
-}
-function readPixelsToArray(source, options) {
-  var _a, _b, _c, _d, _e, _f;
-  const {
-    sourceX = 0,
-    sourceY = 0,
-    sourceAttachment = 36064
-    // 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;
-  sourceWidth ||= framebuffer.width;
-  sourceHeight ||= framebuffer.height;
-  sourceDepth = ((_b = (_a = framebuffer.colorAttachments[attachment]) == null ? void 0 : _a.texture) == null ? void 0 : _b.depth) || 1;
-  sourceFormat ||= ((_d = (_c = framebuffer.colorAttachments[attachment]) == null ? void 0 : _c.texture) == null ? void 0 : _d.glFormat) || 6408;
-  sourceType ||= ((_f = (_e = framebuffer.colorAttachments[attachment]) == null ? void 0 : _e.texture) == null ? void 0 : _f.glType) || 5121;
-  target = getPixelArray(target, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
-  sourceType = sourceType || getGLTypeFromTypedArray(target);
-  const prevHandle = gl.bindFramebuffer(36160, handle);
-  gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target);
-  gl.bindFramebuffer(36160, prevHandle || null);
-  if (deleteFramebuffer) {
-    framebuffer.destroy();
+  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);
   }
-  return target;
 }
-function readPixelsToBuffer(source, options) {
-  const { target, sourceX = 0, sourceY = 0, sourceFormat = 6408, 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;
-  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
+function convertCompareFunction(parameter, value) {
+  return map(parameter, value, {
+    never: 512,
+    less: 513,
+    equal: 514,
+    "less-equal": 515,
+    greater: 516,
+    "not-equal": 517,
+    "greater-equal": 518,
+    always: 519
   });
-  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 convertStencilOperation(parameter, value) {
+  return map(parameter, value, {
+    keep: 7680,
+    zero: 0,
+    replace: 7681,
+    invert: 5386,
+    "increment-clamp": 7682,
+    "decrement-clamp": 7683,
+    "increment-wrap": 34055,
+    "decrement-wrap": 34056
+  });
 }
-function toFramebuffer(texture, props) {
-  const { device, width, height, id } = texture;
-  const framebuffer = device.createFramebuffer({
-    ...props,
-    id: `framebuffer-for-${id}`,
-    width,
-    height,
-    colorAttachments: [texture]
+function convertBlendOperationToEquation(parameter, value) {
+  return map(parameter, value, {
+    add: 32774,
+    subtract: 32778,
+    "reverse-subtract": 32779,
+    min: 32775,
+    max: 32776
   });
-  return framebuffer;
 }
-function getPixelArray(pixelArray, type, format, width, height, depth) {
-  if (pixelArray) {
-    return pixelArray;
-  }
-  type = type || 5121;
-  const ArrayType = getTypedArrayFromGLType(type, { clamped: false });
-  const components = glFormatToComponents(format);
-  return new ArrayType(width * height * components);
+function convertBlendFactorToFunction(parameter, value) {
+  return map(parameter, value, {
+    one: 1,
+    zero: 0,
+    "src-color": 768,
+    "one-minus-src-color": 769,
+    "dst-color": 774,
+    "one-minus-dst-color": 775,
+    "src-alpha": 770,
+    "one-minus-src-alpha": 771,
+    "dst-alpha": 772,
+    "one-minus-dst-alpha": 773,
+    "src-alpha-saturated": 776,
+    "constant-color": 32769,
+    "one-minus-constant-color": 32770,
+    "constant-alpha": 32771,
+    "one-minus-constant-alpha": 32772
+  });
 }
-
-// dist/adapter/resources/webgl-texture.js
-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;
+function message(parameter, value) {
+  return `Illegal parameter ${value} for ${parameter}`;
 }
-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 == null ? void 0 : textureSize.width) || 1;
-      height = (textureSize == null ? void 0 : 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();
-  }
-  /**
-   * 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();
-    }
-  }
-  /**
-   * 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_core8.Texture.CubeFaces) {
-      this.setTextureCubeFaceData(data[face], face);
-    }
-  }
-  /**
-   * 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.");
-  }
-  /**
-   * Sets an entire texture cube array
-   * @param data
-   */
-  setTextureCubeArrayData(data) {
-    throw new Error("setTextureCubeArrayData not supported in WebGL2.");
-  }
-  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);
-  }
-  // INTERNAL METHODS
-  /** @todo update this method to accept LODs */
-  setImageDataForFace(options) {
-    const {
-      face,
-      width,
-      height,
-      pixels,
-      data,
-      format = 6408,
-      type = 5121
-      // 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);
-    }
-  }
-  _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 + i] = faceData[faceName];
-        delete faceData[faceName];
-      }
-    }
-    return faceData;
-  }
-  // 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:
-        case 33083:
-          this.gl.texParameterf(this.glTarget, param, value);
-          break;
-        case 10241:
-          this.gl.texParameteri(this.glTarget, param, value);
-          break;
-        case 10242:
-        case 10243:
-          this.gl.texParameteri(this.glTarget, param, value);
-          break;
-        case 34046:
-          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);
-  }
-  // 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;
-    }
-    throw new Error("Texture: invalid image data");
+function map(parameter, value, valueMap) {
+  if (!(value in valueMap)) {
+    throw new Error(message(parameter, value));
   }
-  // HELPERS
-  getActiveUnit() {
-    return this.gl.getParameter(34016) - 33984;
+  return valueMap[value];
+}
+function mapBoolean(parameter, value) {
+  return value;
+}
+function isObjectEmpty2(obj) {
+  let isEmpty = true;
+  for (const key in obj) {
+    isEmpty = false;
+    break;
   }
-  bind(textureUnit) {
-    const { gl } = this;
-    if (textureUnit !== void 0) {
-      this.textureUnit = textureUnit;
-      gl.activeTexture(33984 + textureUnit);
-    }
-    gl.bindTexture(this.glTarget, this.handle);
-    return textureUnit;
+  return isEmpty;
+}
+
+// dist/adapter/converters/sampler-parameters.js
+function convertSamplerParametersToWebGL(props) {
+  const params = {};
+  if (props.addressModeU) {
+    params[10242] = convertAddressMode(props.addressModeU);
   }
-  unbind(textureUnit) {
-    const { gl } = this;
-    if (textureUnit !== void 0) {
-      this.textureUnit = textureUnit;
-      gl.activeTexture(33984 + textureUnit);
-    }
-    gl.bindTexture(this.glTarget, null);
-    return textureUnit;
+  if (props.addressModeV) {
+    params[10243] = convertAddressMode(props.addressModeV);
   }
-};
-
-// dist/adapter/resources/webgl-framebuffer.js
-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 (props.addressModeW) {
+    params[32882] = convertAddressMode(props.addressModeW);
   }
-  /** destroys any auto created resources etc. */
-  destroy() {
-    super.destroy();
-    if (!this.destroyed && this.handle !== null) {
-      this.gl.deleteFramebuffer(this.handle);
-    }
+  if (props.magFilter) {
+    params[10240] = convertMaxFilterMode(props.magFilter);
   }
-  updateAttachments() {
-    const prevHandle = this.gl.bindFramebuffer(36160, this.handle);
-    for (let i = 0; i < this.colorAttachments.length; ++i) {
-      const attachment = this.colorAttachments[i];
-      if (attachment) {
-        const attachmentPoint = 36064 + 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);
-      if (status !== 36053) {
-        throw new Error(`Framebuffer ${_getFrameBufferStatus(status)}`);
-      }
-    }
-    this.gl.bindFramebuffer(36160, prevHandle);
+  if (props.minFilter || props.mipmapFilter) {
+    params[10241] = convertMinFilterMode(props.minFilter || "linear", props.mipmapFilter);
   }
-  // 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] = 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:
-      case 32879:
-        gl.framebufferTextureLayer(36160, attachment, texture.handle, level, layer);
-        break;
-      case 34067:
-        const face = mapIndexToCubeMapFace(layer);
-        gl.framebufferTexture2D(36160, attachment, face, texture.handle, level);
-        break;
-      case 3553:
-        gl.framebufferTexture2D(36160, attachment, 3553, texture.handle, level);
-        break;
-      default:
-        throw new Error("Illegal texture type");
-    }
-    gl.bindTexture(texture.glTarget, null);
+  if (props.lodMaxClamp !== void 0) {
+    params[33083] = props.lodMaxClamp;
   }
-};
-function mapIndexToCubeMapFace(layer) {
-  return layer < 34069 ? layer + 34069 : layer;
+  if (props.type === "comparison-sampler") {
+    params[34892] = 34894;
+  }
+  if (props.compare) {
+    params[34893] = convertCompareFunction("compare", props.compare);
+  }
+  if (props.maxAnisotropy) {
+    params[34046] = props.maxAnisotropy;
+  }
+  return params;
 }
-function _getFrameBufferStatus(status) {
-  switch (status) {
-    case 36053:
-      return "success";
-    case 36054:
-      return "Mismatched attachments";
-    case 36055:
-      return "No attachments";
-    case 36057:
-      return "Height/width mismatch";
-    case 36061:
-      return "Unsupported or split attachments";
-    case 36182:
-      return "Samples mismatch";
-    default:
-      return `${status}`;
+function convertAddressMode(addressMode) {
+  switch (addressMode) {
+    case "clamp-to-edge":
+      return 33071;
+    case "repeat":
+      return 10497;
+    case "mirror-repeat":
+      return 33648;
+  }
+}
+function convertMaxFilterMode(maxFilter) {
+  switch (maxFilter) {
+    case "nearest":
+      return 9728;
+    case "linear":
+      return 9729;
+  }
+}
+function convertMinFilterMode(minFilter, mipmapFilter) {
+  if (!mipmapFilter) {
+    return convertMaxFilterMode(minFilter);
+  }
+  switch (minFilter) {
+    case "nearest":
+      return mipmapFilter === "nearest" ? 9984 : 9986;
+    case "linear":
+      return mipmapFilter === "nearest" ? 9985 : 9987;
   }
 }
 
-// dist/adapter/webgl-canvas-context.js
-var WebGLCanvasContext = class extends import_core10.CanvasContext {
+// dist/adapter/resources/webgl-sampler.js
+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();
+    this.parameters = convertSamplerParametersToWebGL(props);
+    this.handle = this.handle || this.device.gl.createSampler();
+    this._setSamplerParameters(this.parameters);
   }
-  getCurrentFramebuffer() {
-    this.update();
-    this._framebuffer = this._framebuffer || new WEBGLFramebuffer(this.device, { handle: null });
-    return this._framebuffer;
+  destroy() {
+    if (this.handle) {
+      this.device.gl.deleteSampler(this.handle);
+      this.handle = void 0;
+    }
   }
-  /** 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();
+  toString() {
+    return `Sampler(${this.id},${JSON.stringify(this.props)})`;
+  }
+  /** Set sampler parameters on the sampler */
+  _setSamplerParameters(parameters) {
+    for (const [pname, value] of Object.entries(parameters)) {
+      const param = Number(pname);
+      switch (param) {
+        case 33082:
+        case 33083:
+          this.device.gl.samplerParameterf(this.handle, param, value);
+          break;
+        default:
+          this.device.gl.samplerParameteri(this.handle, param, value);
+          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 == null ? void 0 : options.useDevicePixels);
-      this.setDevicePixelRatio(devicePixelRatio, options);
-      return;
+};
+
+// dist/adapter/resources/webgl-texture.js
+var import_core14 = require("@luma.gl/core");
+var import_constants16 = require("@luma.gl/constants");
+
+// dist/context/state-tracker/with-parameters.js
+function withGLParameters(gl, parameters, func) {
+  if (isObjectEmpty3(parameters)) {
+    return func(gl);
+  }
+  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();
     }
   }
-  commit() {
+  return value;
+}
+function isObjectEmpty3(object) {
+  for (const key in object) {
+    return false;
+  }
+  return true;
+}
+
+// dist/adapter/resources/webgl-texture-view.js
+var import_core12 = require("@luma.gl/core");
+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;
   }
 };
 
-// dist/context/debug/spector.js
-var import_core11 = require("@luma.gl/core");
+// dist/adapter/helpers/webgl-texture-utils.js
+var import_core13 = require("@luma.gl/core");
+var import_constants15 = require("@luma.gl/constants");
 
-// dist/utils/load-script.js
-async function loadScript(scriptUrl, scriptId) {
-  const head = document.getElementsByTagName("head")[0];
-  if (!head) {
-    throw new Error("loadScript");
+// dist/adapter/helpers/typed-array-utils.js
+var import_constants13 = require("@luma.gl/constants");
+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;
+    case Uint16Array:
+      return 5123;
+    case Uint32Array:
+      return 5125;
+    case Uint8Array:
+      return 5121;
+    case Uint8ClampedArray:
+      return 5121;
+    case Int8Array:
+      return 5120;
+    case Int16Array:
+      return 5122;
+    case Int32Array:
+      return 5124;
+    default:
+      throw new Error(ERR_TYPE_DEDUCTION);
   }
-  const script = document.createElement("script");
-  script.setAttribute("type", "text/javascript");
-  script.setAttribute("src", scriptUrl);
-  if (scriptId) {
-    script.id = scriptId;
+}
+function getTypedArrayFromGLType(glType, options) {
+  const { clamped = true } = options || {};
+  switch (glType) {
+    case 5126:
+      return Float32Array;
+    case 5123:
+    case 33635:
+    case 32819:
+    case 32820:
+      return Uint16Array;
+    case 5125:
+      return Uint32Array;
+    case 5121:
+      return clamped ? Uint8ClampedArray : Uint8Array;
+    case 5120:
+      return Int8Array;
+    case 5122:
+      return Int16Array;
+    case 5124:
+      return Int32Array;
+    default:
+      throw new Error("Failed to deduce typed array type from GL constant");
   }
-  return new Promise((resolve, reject) => {
-    script.onload = resolve;
-    script.onerror = (error) => reject(new Error(`Unable to load script '${scriptUrl}': ${error}`));
-    head.appendChild(script);
-  });
 }
 
-// dist/context/debug/spector.js
-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) {
-    try {
-      await loadScript(props.spectorUrl || DEFAULT_SPECTOR_PROPS.spectorUrl);
-    } catch (error) {
-      import_core11.log.warn(String(error));
-    }
+// dist/adapter/helpers/format-utils.js
+var import_constants14 = require("@luma.gl/constants");
+function glFormatToComponents(format) {
+  switch (format) {
+    case 6406:
+    case 33326:
+    case 6403:
+      return 1;
+    case 33328:
+    case 33319:
+      return 2;
+    case 6407:
+    case 34837:
+      return 3;
+    case 6408:
+    case 34836:
+      return 4;
+    default:
+      return 0;
   }
 }
-function initializeSpectorJS(props) {
-  var _a;
-  props = { ...DEFAULT_SPECTOR_PROPS, ...props };
-  if (!props.debugWithSpectorJS) {
-    return null;
-  }
-  if (!spector && globalThis.SPECTOR && !((_a = globalThis.luma) == null ? void 0 : _a.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;
-    }
-  }
-  if (!spector) {
-    return null;
+function glTypeToBytes(type) {
+  switch (type) {
+    case 5121:
+      return 1;
+    case 33635:
+    case 32819:
+    case 32820:
+      return 2;
+    case 5126:
+      return 4;
+    default:
+      return 0;
   }
-  if (!initialized) {
-    initialized = true;
-    spector.spyCanvases();
-    spector == null ? void 0 : spector.onCaptureStarted.add((capture) => import_core11.log.info("Spector capture started:", capture)());
-    spector == null ? void 0 : spector.onCapture.add((capture) => {
-      import_core11.log.info("Spector capture complete:", capture)();
-      spector == null ? void 0 : spector.getResultUI();
-      spector == null ? void 0 : spector.resultView.display();
-      spector == null ? void 0 : spector.resultView.addCapture(capture);
-    });
+}
+
+// dist/adapter/helpers/webgl-texture-utils.js
+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);
   }
-  if (props.gl) {
-    const gl = props.gl;
-    const device = gl.device;
-    spector == null ? void 0 : 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 == null ? void 0 : spector.stopCapture();
-    });
+}
+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);
   }
-  return spector;
 }
-
-// dist/context/debug/webgl-developer-tools.js
-var import_core12 = require("@luma.gl/core");
-var import_constants14 = require("@luma.gl/constants");
-var import_env = require("@probe.gl/env");
-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 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);
+  }
 }
-async function loadWebGLDeveloperTools() {
-  if ((0, import_env.isBrowser)() && !globalThis.WebGLDebugUtils) {
-    globalThis.global = globalThis.global || globalThis;
-    globalThis.global.module = {};
-    await loadScript(WEBGL_DEBUG_CDN_URL);
+function getWebGLTextureTarget(dimension) {
+  switch (dimension) {
+    case "1d":
+      break;
+    case "2d":
+      return 3553;
+    case "3d":
+      return 32879;
+    case "cube":
+      return 34067;
+    case "2d-array":
+      return 35866;
+    case "cube-array":
+      break;
   }
+  throw new Error(dimension);
 }
-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 getWebGLCubeFaceTarget(glTarget, dimension, level) {
+  return dimension === "cube" ? 34069 + level : glTarget;
 }
-function getDebugContext(gl, props) {
-  if (!globalThis.WebGLDebugUtils) {
-    import_core12.log.warn("webgl-debug not loaded")();
-    return gl;
+function readPixelsToArray(source, options) {
+  var _a, _b, _c, _d, _e, _f;
+  const {
+    sourceX = 0,
+    sourceY = 0,
+    sourceAttachment = 36064
+    // 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;
+  sourceWidth ||= framebuffer.width;
+  sourceHeight ||= framebuffer.height;
+  sourceDepth = ((_b = (_a = framebuffer.colorAttachments[attachment]) == null ? void 0 : _a.texture) == null ? void 0 : _b.depth) || 1;
+  sourceFormat ||= ((_d = (_c = framebuffer.colorAttachments[attachment]) == null ? void 0 : _c.texture) == null ? void 0 : _d.glFormat) || 6408;
+  sourceType ||= ((_f = (_e = framebuffer.colorAttachments[attachment]) == null ? void 0 : _e.texture) == null ? void 0 : _f.glType) || 5121;
+  target2 = getPixelArray(target2, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
+  sourceType = sourceType || getGLTypeFromTypedArray(target2);
+  const prevHandle = gl.bindFramebuffer(36160, handle);
+  gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target2);
+  gl.bindFramebuffer(36160, prevHandle || null);
+  if (deleteFramebuffer) {
+    framebuffer.destroy();
   }
-  const data = getWebGLContextData(gl);
-  if (data.debugContext) {
-    return data.debugContext;
+  return target2;
+}
+function readPixelsToBuffer(source, options) {
+  const { target: target2, sourceX = 0, sourceY = 0, sourceFormat = 6408, 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;
+  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 });
   }
-  globalThis.WebGLDebugUtils.init({ ...import_constants14.GL, ...gl });
-  const glDebug = globalThis.WebGLDebugUtils.makeDebugContext(gl, onGLError.bind(null, props), onValidateGLFunc.bind(null, props));
-  for (const key in import_constants14.GL) {
-    if (!(key in glDebug) && typeof import_constants14.GL[key] === "number") {
-      glDebug[key] = import_constants14.GL[key];
-    }
+  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();
   }
-  class WebGLDebugContext {
+  return webglBufferTarget;
+}
+function getFramebuffer(source) {
+  if (!(source instanceof import_core13.Framebuffer)) {
+    return { framebuffer: toFramebuffer(source), deleteFramebuffer: true };
   }
-  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;
+  return { framebuffer: source, deleteFramebuffer: false };
 }
-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 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 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 getPixelArray(pixelArray, type, format, width, height, depth) {
+  if (pixelArray) {
+    return pixelArray;
   }
+  type = type || 5121;
+  const ArrayType = getTypedArrayFromGLType(type, { clamped: false });
+  const components = glFormatToComponents(format);
+  return new ArrayType(width * height * components);
 }
-function onValidateGLFunc(props, functionName, functionArgs) {
-  let functionString = "";
-  if (import_core12.log.level >= 1) {
-    functionString = getFunctionString(functionName, functionArgs);
-    import_core12.log.log(1, functionString)();
-  }
-  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;
-    }
-  }
-  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;
+
+// dist/adapter/resources/webgl-texture.js
+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;
 }
-
-// dist/utils/uid.js
-var uidCounters = {};
-function uid(id = "id") {
-  uidCounters[id] = uidCounters[id] || 1;
-  const count = uidCounters[id]++;
-  return `${id}-${count}`;
-}
-
-// dist/adapter/resources/webgl-buffer.js
-var import_core13 = require("@luma.gl/core");
-var import_constants15 = require("@luma.gl/constants");
-var WEBGLBuffer = class extends import_core13.Buffer {
+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;
-  /** 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 : 5123;
-    if (props.data) {
-      this._initWithData(props.data, props.byteOffset, props.byteLength);
-    } else {
-      this._initWithByteLength(props.byteLength || 0);
+    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 == null ? void 0 : textureSize.width) || 1;
+      height = (textureSize == null ? void 0 : 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);
     }
-  }
-  // 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);
+    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();
     }
-    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;
-    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, this.handle);
-    this.gl.getBufferSubData(36662, byteOffset, data, dstOffset, byteLength);
-    this.gl.bindBuffer(36662, 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;
+  createView(props) {
+    return new WEBGLTextureView(this.device, { ...props, texture: this });
   }
-  if (usage & import_core13.Buffer.VERTEX) {
-    return 34962;
+  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;
+  /** Update external texture (video frame or canvas) */
+  update() {
+    import_core14.log.warn("Texture.update() not implemented");
   }
-  return 34962;
-}
-function getWebGLUsage(usage) {
-  if (usage & import_core13.Buffer.INDEX) {
-    return 35044;
+  // 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;
+  // 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;
+  setTexture1DData(data) {
+    throw new Error("setTexture1DData not supported in WebGL.");
   }
-  return 35044;
-}
-
-// dist/adapter/resources/webgl-shader.js
-var import_core14 = require("@luma.gl/core");
-var import_constants16 = require("@luma.gl/constants");
-
-// dist/adapter/helpers/parse-shader-compiler-log.js
-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";
-}
-
-// dist/adapter/resources/webgl-shader.js
-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);
-        break;
-      case "fragment":
-        this.handle = this.props.handle || this.device.gl.createShader(35632);
-        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 == null ? void 0 : 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,
+      type = 5121
+      // 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 + 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);
-      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:
+        case 33083:
+          this.gl.texParameterf(this.glTarget, param, value);
+          break;
+        case 10241:
+          this.gl.texParameteri(this.glTarget, param, value);
+          break;
+        case 10242:
+        case 10243:
+          this.gl.texParameteri(this.glTarget, param, value);
+          break;
+        case 34046:
+          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) ? "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) - 33984;
+  }
+  bind(textureUnit) {
+    const { gl } = this;
+    if (textureUnit !== void 0) {
+      this.textureUnit = textureUnit;
+      gl.activeTexture(33984 + textureUnit);
+    }
+    gl.bindTexture(this.glTarget, this.handle);
+    return textureUnit;
+  }
+  unbind(textureUnit) {
+    const { gl } = this;
+    if (textureUnit !== void 0) {
+      this.textureUnit = textureUnit;
+      gl.activeTexture(33984 + textureUnit);
+    }
+    gl.bindTexture(this.glTarget, null);
+    return textureUnit;
   }
 };
 
@@ -3780,9 +3762,9 @@ var WEBGLRenderPipeline = class extends import_core16.RenderPipeline {
    */
   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 == null ? void 0 : options.disableWarnings)) {
           import_core16.log.warn(`No binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`, value)();
         }
@@ -3907,21 +3889,34 @@ var WEBGLRenderPipeline = class extends import_core16.RenderPipeline {
     this._reportLinkStatus(status);
   }
   /** Report link status. First, check for shader compilation failures if linking fails */
-  _reportLinkStatus(status) {
+  async _reportLinkStatus(status) {
     var _a;
     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 (((_a = this.fs) == null ? void 0 : _a.compilationStatus) === "error") {
-          this.fs.debugShader();
-          throw new Error(`Error during compilation of shader ${this.fs.id}`);
+        switch ((_a = this.fs) == null ? void 0 : _a.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}`);
     }
   }
   /**
@@ -4111,8 +4106,8 @@ var WEBGLCommandBuffer = class extends import_core17.CommandBuffer {
   }
 };
 function _copyBufferToBuffer(device, options) {
-  const source = options.source;
-  const destination = options.destination;
+  const source = options.sourceBuffer;
+  const destination = options.destinationBuffer;
   device.gl.bindBuffer(36662, source.handle);
   device.gl.bindBuffer(36663, destination.handle);
   device.gl.copyBufferSubData(36662, 36663, options.sourceOffset ?? 0, options.destinationOffset ?? 0, options.size);
@@ -4125,20 +4120,20 @@ function _copyBufferToTexture(device, options) {
 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,
     /**
@@ -4154,15 +4149,15 @@ function _copyTextureToBuffer(device, options) {
     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(framebuffer.colorAttachments[0].texture.props.format);
@@ -4184,7 +4179,7 @@ function _copyTextureToBuffer(device, options) {
 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. */
@@ -4194,7 +4189,7 @@ function _copyTextureToTexture(device, options) {
     /** 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. */
@@ -4203,18 +4198,18 @@ function _copyTextureToTexture(device, options) {
     // 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(36160, framebuffer.handle);
   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);
@@ -4301,19 +4296,19 @@ var import_env2 = require("@probe.gl/env");
 
 // dist/utils/fill-array.js
 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;
     }
   }
@@ -4729,11 +4724,11 @@ var WEBGLQuerySet = class extends import_core21.QuerySet {
    * 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;
   }
@@ -4864,36 +4859,52 @@ var WebGLDevice = class extends import_core23.Device {
   constructor(props) {
     var _a, _b;
     super({ ...props, id: props.id || uid("webgl-device") });
-    const device = (_a = props.gl) == null ? void 0 : _a.device;
+    if (!props.createCanvasContext) {
+      throw new Error("WebGLDevice requires props.createCanvasContext to be set");
+    }
+    const canvasContextProps = props.createCanvasContext === true ? {} : props.createCanvasContext;
+    let device = (_b = (_a = canvasContextProps.canvas) == null ? void 0 : _a.gl) == null ? void 0 : _b.device;
     if (device) {
       throw new Error(`WebGL context already attached to device ${device.id}`);
     }
-    const canvas = ((_b = props.gl) == null ? void 0 : _b.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,
+    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) => {
         var _a2;
         return (_a2 = this._resolveContextLost) == null ? void 0 : _a2.call(this, {
           reason: "destroyed",
           message: "Entered sleep mode, or too many apps or browser tabs are using the GPU."
         });
-      }
-    });
-    this.gl = this.handle;
-    if (!this.handle) {
+      },
+      // 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();
@@ -4901,8 +4912,8 @@ var WebGLDevice = class extends import_core23.Device {
       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.")();
@@ -4931,7 +4942,7 @@ var WebGLDevice = class extends import_core23.Device {
     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) {
@@ -5275,27 +5286,23 @@ var WebGLAdapter = class extends import_core24.Adapter {
     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)();