@luma.gl/webgl 9.1.0-alpha.15 → 9.1.0-alpha.17

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,39 @@ 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) {
+  let errorMessage = "";
+  const webglProps = {
+    preserveDrawingBuffer: true,
+    // failIfMajorPerformanceCaveat: true,
+    ...webglContextAttributes
+  };
   let gl = null;
-  gl ||= canvas.getContext("webgl2", props);
-  canvas.removeEventListener("webglcontextcreationerror", onCreateError, false);
-  if (!gl) {
-    throw new Error(`Failed to create WebGL context: ${errorMessage || "Unknown error"}`);
+  gl ||= canvas.getContext("webgl2", webglProps);
+  if (webglProps.failIfMajorPerformanceCaveat) {
+    errorMessage ||= "Only software GPU is available. Set `failIfMajorPerformanceCaveat: false` to allow.";
+  }
+  if (!gl && !webglContextAttributes.failIfMajorPerformanceCaveat) {
+    webglProps.failIfMajorPerformanceCaveat = false;
+    gl = canvas.getContext("webgl2", webglProps);
+    gl.luma ||= {};
+    gl.luma.softwareRenderer = true;
   }
-  if (props.onContextLost) {
-    const { onContextLost } = props;
-    canvas.addEventListener("webglcontextlost", (event) => onContextLost(event), false);
+  if (!gl) {
+    gl = canvas.getContext("webgl", {});
+    if (gl) {
+      gl = null;
+      errorMessage ||= "Your browser only supports WebGL1";
+    }
   }
-  if (props.onContextRestored) {
-    const { onContextRestored } = props;
-    canvas.addEventListener("webglcontextrestored", (event) => onContextRestored(event), false);
+  if (!gl) {
+    errorMessage ||= "Your browser does not support WebGL";
+    throw new Error(`Failed to create WebGL context: ${errorMessage}`);
   }
+  const { onContextLost, onContextRestored } = props;
+  canvas.addEventListener("webglcontextlost", (event) => onContextLost(event), false);
+  canvas.addEventListener("webglcontextrestored", (event) => onContextRestored(event), false);
+  gl.luma ||= {};
   return gl;
 }
 
@@ -981,7 +987,7 @@ var TEXTURE_FORMATS = {
   // 64-bit formats
   "rg32uint": { gl: 33340, b: 8, c: 2, rb: true },
   "rg32sint": { gl: 33339, b: 8, c: 2, rb: true },
-  "rg32float": { gl: 33328, b: 8, c: 2, render: float32_renderable, filter: float32_filterable, rb: true },
+  "rg32float": { gl: 33328, b: 8, c: 2, render: false, filter: float32_filterable, rb: true },
   "rgba16uint": { gl: 36214, b: 8, c: 4, rb: true },
   "rgba16sint": { gl: 36232, b: 8, c: 4, rb: true },
   "rgba16float": { gl: 34842, b: 8, c: 4, render: float16_renderable, filter: float16_filterable },
@@ -1142,36 +1148,35 @@ function isTextureFormatSupported(gl, format, extensions) {
   return true;
 }
 function isTextureFormatFilterable(gl, format, extensions) {
-  if (!isTextureFormatSupported(gl, format, extensions)) {
-    return false;
-  }
-  if (format.startsWith("depth") || format.startsWith("stencil")) {
-    return false;
-  }
-  try {
-    const decoded = (0, import_core.decodeTextureFormat)(format);
-    if (decoded.signed) {
-      return false;
-    }
-  } catch {
-    return false;
-  }
-  if (format.endsWith("32float")) {
-    return Boolean(getWebGLExtension(gl, "OES_texture_float_linear, extensions", extensions));
-  }
-  if (format.endsWith("16float")) {
-    return Boolean(getWebGLExtension(gl, "OES_texture_half_float_linear, extensions", extensions));
-  }
-  return true;
+  return getTextureFormatSupportWebGL(gl, format, extensions).filterable || false;
 }
 function isTextureFormatRenderable(gl, format, extensions) {
-  if (!isTextureFormatSupported(gl, format, extensions)) {
-    return false;
-  }
-  if (typeof format === "number") {
-    return false;
-  }
-  return true;
+  return getTextureFormatSupportWebGL(gl, format, extensions).renderable || false;
+}
+function getTextureFormatSupportWebGL(gl, format, extensions) {
+  const formatInto = (0, import_core.decodeTextureFormat)(format);
+  if (!formatInto) {
+    return { supported: false };
+  }
+  const webglFormatInfo = TEXTURE_FORMATS[format];
+  if (!webglFormatInfo) {
+    return { supported: false };
+  }
+  let supported = webglFormatInfo.gl !== void 0;
+  supported = supported && checkTextureFeature(gl, webglFormatInfo.f, extensions);
+  const isDepthStencil = format.startsWith("depth") || format.startsWith("stencil");
+  const isSigned = formatInto == null ? void 0 : formatInto.signed;
+  const renderable = supported && !isSigned && webglFormatInfo.render && checkTextureFeature(gl, webglFormatInfo.render, extensions);
+  const filterable = supported && !isDepthStencil && !isSigned && webglFormatInfo.filter && checkTextureFeature(gl, webglFormatInfo.filter, extensions);
+  return {
+    supported,
+    renderable,
+    filterable,
+    blendable: false,
+    // TODO,
+    storable: false
+    // TODO
+  };
 }
 function getTextureFormatWebGL(format) {
   var _a;
@@ -1449,7 +1454,7 @@ var WEBGLFramebuffer = class extends import_core4.Framebuffer {
       const attachmentPoint = getDepthStencilAttachmentWebGL(this.depthStencilAttachment.props.format);
       this._attachTextureView(attachmentPoint, this.depthStencilAttachment);
     }
-    if (this.props.check !== false) {
+    if (this.device.props.debug) {
       const status = this.gl.checkFramebufferStatus(36160);
       if (status !== 36053) {
         throw new Error(`Framebuffer ${_getFrameBufferStatus(status)}`);
@@ -1601,17 +1606,17 @@ var LOG_LEVEL = 1;
 var spector = null;
 var initialized = false;
 var DEFAULT_SPECTOR_PROPS = {
-  debugWithSpectorJS: import_core6.log.get("spector") || import_core6.log.get("spectorjs"),
+  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';
-  spectorUrl: "https://cdn.jsdelivr.net/npm/spectorjs@0.9.30/dist/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.spectorUrl || DEFAULT_SPECTOR_PROPS.spectorUrl);
+      await loadScript(props.debugSpectorJSUrl || DEFAULT_SPECTOR_PROPS.debugSpectorJSUrl);
     } catch (error) {
       import_core6.log.warn(String(error));
     }
@@ -1620,13 +1625,13 @@ async function loadSpectorJS(props) {
 function initializeSpectorJS(props) {
   var _a;
   props = { ...DEFAULT_SPECTOR_PROPS, ...props };
-  if (!props.debugWithSpectorJS) {
+  if (!props.debugSpectorJS) {
     return null;
   }
   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 } = globalThis.SPECTOR;
-    spector = new Spector();
+    const { Spector: SpectorJS } = globalThis.SPECTOR;
+    spector = new SpectorJS();
     if (globalThis.luma) {
       globalThis.luma.spector = spector;
     }
@@ -1675,7 +1680,7 @@ async function loadWebGLDeveloperTools() {
   }
 }
 function makeDebugContext(gl, props = {}) {
-  return props.debug ? getDebugContext(gl, props) : getRealContext(gl);
+  return props.debugWebGL || props.traceWebGL ? getDebugContext(gl, props) : getRealContext(gl);
 }
 function getRealContext(gl) {
   const data = getWebGLContextData(gl);
@@ -1720,32 +1725,19 @@ function onGLError(props, err, functionName, args) {
   const message2 = `${errorMessage} in gl.${functionName}(${functionArgs})`;
   import_core7.log.error(message2)();
   debugger;
-  if (props.throwOnError) {
-    throw new Error(message2);
-  }
 }
 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.break && props.break.length > 0) {
-    functionString = functionString || getFunctionString(functionName, functionArgs);
-    const isBreakpoint = props.break.every((breakOn) => functionString.indexOf(breakOn) !== -1);
-    if (isBreakpoint) {
-      debugger;
+    if (props.traceWebGL) {
+      import_core7.log.log(1, functionString)();
     }
   }
   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_core7.log.error(`Undefined argument: ${functionString}`)();
-        debugger;
-      }
+      debugger;
     }
   }
 }
@@ -1957,13 +1949,16 @@ var WEBGLShader = class extends import_core9.Shader {
       this.destroyed = true;
     }
   }
+  get asyncCompilationStatus() {
+    return this._waitForCompilationComplete().then(() => this.compilationStatus);
+  }
   async getCompilationInfo() {
     await this._waitForCompilationComplete();
     return this.getCompilationInfoSync();
   }
   getCompilationInfoSync() {
-    const log12 = this.device.gl.getShaderInfoLog(this.handle);
-    return log12 ? parseShaderCompilerLog(log12) : [];
+    const shaderLog = this.device.gl.getShaderInfoLog(this.handle);
+    return shaderLog ? parseShaderCompilerLog(shaderLog) : [];
   }
   getTranslatedSource() {
     const extensions = this.device.getExtension("WEBGL_debug_shaders");
@@ -1973,13 +1968,12 @@ var WEBGLShader = class extends import_core9.Shader {
   // 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);
+    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) {
+    if (!this.device.props.debug) {
       this.compilationStatus = "pending";
       return;
     }
@@ -2323,15 +2317,17 @@ function convertMaxFilterMode(maxFilter) {
       return 9729;
   }
 }
-function convertMinFilterMode(minFilter, mipmapFilter) {
+function convertMinFilterMode(minFilter, mipmapFilter = "none") {
   if (!mipmapFilter) {
     return convertMaxFilterMode(minFilter);
   }
-  switch (minFilter) {
+  switch (mipmapFilter) {
+    case "none":
+      return convertMaxFilterMode(minFilter);
     case "nearest":
-      return mipmapFilter === "nearest" ? 9984 : 9986;
+      return minFilter === "nearest" ? 9984 : 9986;
     case "linear":
-      return mipmapFilter === "nearest" ? 9985 : 9987;
+      return minFilter === "nearest" ? 9985 : 9987;
   }
 }
 
@@ -2485,14 +2481,20 @@ function glFormatToComponents(format) {
     case 6406:
     case 33326:
     case 6403:
+    case 36244:
       return 1;
+    case 33339:
+    case 33340:
     case 33328:
+    case 33320:
     case 33319:
       return 2;
     case 6407:
+    case 36248:
     case 34837:
       return 3;
     case 6408:
+    case 36249:
     case 34836:
       return 4;
     default:
@@ -2534,22 +2536,25 @@ function copyExternalImageToMipLevel(gl, handle, image, 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);
-  }
+  const glParameters = options.flipY ? { [37440]: true } : {};
+  withGLParameters(gl, glParameters, () => {
+    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);
+    }
+  });
 }
 function copyCPUDataToMipLevel(gl, typedArray, options) {
   const { dimension, width, height, depth = 0, mipLevel = 0, byteOffset = 0 } = options;
@@ -2598,15 +2603,15 @@ function getWebGLCubeFaceTarget(glTarget, dimension, level) {
   return dimension === "cube" ? 34069 + level : glTarget;
 }
 function readPixelsToArray(source, options) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a;
   const {
     sourceX = 0,
     sourceY = 0,
-    sourceAttachment = 36064
+    sourceAttachment = 0
     // TODO - support gl.readBuffer
   } = options || {};
   let {
-    target = null,
+    target: target2 = null,
     // following parameters are auto deduced if not provided
     sourceWidth,
     sourceHeight,
@@ -2616,31 +2621,36 @@ function readPixelsToArray(source, options) {
   } = 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 texture = (_a = framebuffer.colorAttachments[sourceAttachment]) == null ? void 0 : _a.texture;
+  if (!texture) {
+    throw new Error(`Invalid framebuffer attachment ${sourceAttachment}`);
+  }
+  sourceDepth = (texture == null ? void 0 : texture.depth) || 1;
+  sourceFormat ||= (texture == null ? void 0 : texture.glFormat) || 6408;
+  sourceType ||= (texture == null ? void 0 : texture.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, target);
+  gl.readBuffer(36064 + sourceAttachment);
+  gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target2);
+  gl.readBuffer(36064);
   gl.bindFramebuffer(36160, prevHandle || null);
   if (deleteFramebuffer) {
     framebuffer.destroy();
   }
-  return target;
+  return target2;
 }
 function readPixelsToBuffer(source, options) {
-  const { target, sourceX = 0, sourceY = 0, sourceFormat = 6408, targetByteOffset = 0 } = 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 = target;
+  let webglBufferTarget = target2;
   if (!webglBufferTarget) {
     const components = glFormatToComponents(sourceFormat);
     const byteCount = glTypeToBytes(sourceType);
@@ -2649,11 +2659,11 @@ function readPixelsToBuffer(source, options) {
   }
   const commandEncoder = source.device.createCommandEncoder();
   commandEncoder.copyTextureToBuffer({
-    source,
+    sourceTexture: source,
     width: sourceWidth,
     height: sourceHeight,
     origin: [sourceX, sourceY],
-    destination: webglBufferTarget,
+    destinationBuffer: webglBufferTarget,
     byteOffset: targetByteOffset
   });
   commandEncoder.destroy();
@@ -2679,38 +2689,19 @@ function toFramebuffer(texture, props) {
   });
   return framebuffer;
 }
-function getPixelArray(pixelArray, type, format, width, height, depth) {
+function getPixelArray(pixelArray, glType, glFormat, width, height, depth) {
   if (pixelArray) {
     return pixelArray;
   }
-  type = type || 5121;
-  const ArrayType = getTypedArrayFromGLType(type, { clamped: false });
-  const components = glFormatToComponents(format);
+  glType ||= 5121;
+  const ArrayType = getTypedArrayFromGLType(glType, { clamped: false });
+  const components = glFormatToComponents(glFormat);
   return new ArrayType(width * height * components);
 }
 
 // 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;
-}
 var WEBGLTexture = class extends import_core14.Texture {
-  MAX_ATTRIBUTES;
+  // readonly MAX_ATTRIBUTES: number;
   device;
   gl;
   handle;
@@ -2718,8 +2709,12 @@ var WEBGLTexture = class extends import_core14.Texture {
   // TODO - currently unused in WebGL. Create dummy sampler?
   view = void 0;
   // TODO - currently unused in WebGL. Create dummy view?
-  mipmaps = false;
+  mipmaps;
+  // Texture type
+  /** Whether the internal format is compressed */
+  compressed;
   /**
+   * The WebGL target corresponding to the texture type
    * @note `target` cannot be modified by bind:
    * textures are special because when you first bind them to a target,
    * When you first bind a texture as a GL_TEXTURE_2D, you are saying that this texture is a 2D texture.
@@ -2728,122 +2723,79 @@ var WEBGLTexture = class extends import_core14.Texture {
    * 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 */
+  /** Texture binding slot - TODO - move to texture view? */
   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 });
+    super(device, props);
+    const propsWithData = { ...this.props };
+    propsWithData.data = props.data;
     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 });
+    const formatInfo = getTextureFormatWebGL(this.props.format);
+    this.glInternalFormat = formatInfo.internalFormat;
+    this.glFormat = formatInfo.format;
+    this.glType = formatInfo.type;
+    this.compressed = formatInfo.compressed;
+    this.mipmaps = Boolean(this.props.mipmaps);
+    this._initialize(propsWithData);
     Object.seal(this);
   }
   /**
    * Initialize texture with supplied props
    */
   // eslint-disable-next-line max-statements
-  initialize(props = {}) {
+  _initialize(propsWithData) {
     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;
+    this.device.setSpectorMetadata(this.handle, { ...this.props, data: propsWithData.data });
+    let { width, height } = propsWithData;
     if (!width || !height) {
-      const textureSize = import_core14.Texture.getTextureDataSize(data);
+      const textureSize = import_core14.Texture.getTextureDataSize(propsWithData.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.depth = propsWithData.depth;
+    this.setSampler(propsWithData.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) {
+    initializeTextureStorage(this.gl, this.mipLevels, this);
+    if (propsWithData.data) {
+      switch (propsWithData.dimension) {
         case "1d":
-          this.setTexture1DData(props.data);
+          this.setTexture1DData(propsWithData.data);
           break;
         case "2d":
-          this.setTexture2DData(props.data);
+          this.setTexture2DData(propsWithData.data);
           break;
         case "3d":
-          this.setTexture3DData(props.data);
+          this.setTexture3DData(propsWithData.data);
           break;
         case "cube":
-          this.setTextureCubeData(props.data);
+          this.setTextureCubeData(propsWithData.data);
           break;
         case "2d-array":
-          this.setTextureArrayData(props.data);
+          this.setTextureArrayData(propsWithData.data);
           break;
         case "cube-array":
-          this.setTextureCubeArrayData(props.data);
+          this.setTextureCubeArrayData(propsWithData.data);
           break;
         default:
-          throw new Error(props.dimension);
+          throw new Error(propsWithData.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);
@@ -2852,9 +2804,6 @@ var WEBGLTexture = class extends import_core14.Texture {
       this.destroyed = true;
     }
   }
-  toString() {
-    return `Texture(${this.id},${this.width}x${this.height})`;
-  }
   createView(props) {
     return new WEBGLTextureView(this.device, { ...props, texture: this });
   }
@@ -2870,33 +2819,33 @@ var WEBGLTexture = class extends import_core14.Texture {
     const parameters = convertSamplerParametersToWebGL(samplerProps);
     this._setSamplerParameters(parameters);
   }
-  /** Update external texture (video frame or canvas) */
-  update() {
-    import_core14.log.warn("Texture.update() not implemented");
-  }
   // Call to regenerate mipmaps after modifying texture(s)
   generateMipmap(params = {}) {
-    if (!this.props.data) {
-      return;
+    if (!this.device.isTextureFormatRenderable(this.props.format) || !this.device.isTextureFormatFilterable(this.props.format)) {
+      import_core14.log.warn(`${this} is not renderable or filterable, may not be able to generate mipmaps`)();
+    }
+    try {
+      this.gl.bindTexture(this.glTarget, this.handle);
+      withGLParameters(this.gl, params, () => {
+        this.gl.generateMipmap(this.glTarget);
+      });
+    } catch (error) {
+      import_core14.log.warn(`Error generating mipmap for ${this}: ${error.message}`)();
+    } finally {
+      this.gl.bindTexture(this.glTarget, null);
     }
-    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_core14.Texture.getExternalImageSize(options.image);
     const opts = { ...import_core14.Texture.defaultCopyExternalImageOptions, ...size, ...options };
-    const { image, depth, mipLevel, x, y, z } = opts;
+    const { image, depth, mipLevel, x, y, z, flipY } = 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");
+      throw new Error("WebGL does not support sourceX/sourceY)");
     }
     copyExternalImageToMipLevel(this.device.gl, this.handle, image, {
       dimension,
@@ -2910,7 +2859,8 @@ var WEBGLTexture = class extends import_core14.Texture {
       glFormat,
       glInternalFormat,
       glType,
-      glTarget
+      glTarget,
+      flipY
     });
     return { width: opts.width, height: opts.height };
   }
@@ -2920,7 +2870,7 @@ var WEBGLTexture = class extends import_core14.Texture {
   /** Set a simple texture */
   setTexture2DData(lodData, depth = 0) {
     this.bind();
-    const lodArray = normalizeTextureData(lodData, this);
+    const lodArray = import_core14.Texture.normalizeTextureData(lodData, this);
     if (lodArray.length > 1 && this.props.mipmaps !== false) {
       import_core14.log.warn(`Texture ${this.id} mipmap and multiple LODs.`)();
     }
@@ -2982,6 +2932,11 @@ var WEBGLTexture = class extends import_core14.Texture {
     const faceDepth = import_core14.Texture.CubeFaces.indexOf(face);
     this.setTexture2DData(lodData, faceDepth);
   }
+  // DEPRECATED METHODS
+  /** Update external texture (video frame or canvas) @deprecated Use ExternalTexture */
+  update() {
+    throw new Error("Texture.update() not implemented. Use ExternalTexture");
+  }
   // INTERNAL METHODS
   /** @todo update this method to accept LODs */
   setImageDataForFace(options) {
@@ -3025,7 +2980,7 @@ var WEBGLTexture = class extends import_core14.Texture {
    * Sets sampler parameters on texture
    */
   _setSamplerParameters(parameters) {
-    import_core14.log.log(1, "texture sampler parameters", parameters)();
+    import_core14.log.log(1, `${this.id} sampler parameters`, this.device.getGLKeys(parameters))();
     this.gl.bindTexture(this.glTarget, this.handle);
     for (const [pname, pvalue] of Object.entries(parameters)) {
       const param = Number(pname);
@@ -3054,61 +3009,6 @@ var WEBGLTexture = class extends import_core14.Texture {
     }
     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.
@@ -3120,7 +3020,8 @@ var WEBGLTexture = class extends import_core14.Texture {
         ...this,
         depth,
         mipLevel,
-        glTarget
+        glTarget,
+        flipY: this.props.flipY
       });
       return;
     }
@@ -3162,10 +3063,6 @@ var WEBGLTexture = class extends import_core14.Texture {
 // dist/adapter/resources/webgl-render-pass.js
 var import_core15 = require("@luma.gl/core");
 var import_constants17 = require("@luma.gl/constants");
-var GL_DEPTH_BUFFER_BIT = 256;
-var GL_STENCIL_BUFFER_BIT = 1024;
-var GL_COLOR_BUFFER_BIT = 16384;
-var GL_COLOR = 6144;
 var COLOR_CHANNELS = [1, 2, 4, 8];
 var WEBGLRenderPass = class extends import_core15.RenderPass {
   device;
@@ -3187,6 +3084,12 @@ var WEBGLRenderPass = class extends import_core15.RenderPass {
     }
     this.device.pushState();
     this.setParameters({ viewport, ...this.props.parameters });
+    if (this.props.framebuffer) {
+      const drawBuffers = this.props.framebuffer.colorAttachments.map((_, i) => 36064 + i);
+      this.device.gl.drawBuffers(drawBuffers);
+    } else {
+      this.device.gl.drawBuffers([1029]);
+    }
     this.clear();
   }
   end() {
@@ -3250,19 +3153,30 @@ var WEBGLRenderPass = class extends import_core15.RenderPass {
    * Optionally clears depth, color and stencil buffers based on parameters
    */
   clear() {
+    const DEFAULT_CLEAR_COLOR = [0, 0, 0, 1];
+    const DEFAULT_CLEAR_DEPTH = 1;
+    const DEFAULT_CLEAR_STENCIL = 0;
     const glParameters = { ...this.glParameters };
     let clearMask = 0;
-    if (this.props.clearColor !== false) {
-      clearMask |= GL_COLOR_BUFFER_BIT;
-      glParameters.clearColor = this.props.clearColor;
+    if (this.props.clearColors) {
+      this.props.clearColors.forEach((color, drawBufferIndex) => {
+        if (color) {
+          this.clearColorBuffer(drawBufferIndex, color);
+        }
+      });
+    }
+    if (this.props.clearColor !== false && this.props.clearColors === void 0) {
+      clearMask |= 16384;
+      const clearColor = this.props.clearColor === true ? DEFAULT_CLEAR_COLOR : this.props.clearColor;
+      glParameters.clearColor = clearColor;
     }
     if (this.props.clearDepth !== false) {
-      clearMask |= GL_DEPTH_BUFFER_BIT;
-      glParameters.clearDepth = this.props.clearDepth;
+      clearMask |= 256;
+      glParameters.clearDepth = this.props.clearDepth === true ? DEFAULT_CLEAR_DEPTH : this.props.clearDepth;
     }
     if (this.props.clearStencil !== false) {
-      clearMask |= GL_STENCIL_BUFFER_BIT;
-      glParameters.clearStencil = this.props.clearStencil;
+      clearMask |= 1024;
+      glParameters.clearStencil = this.props.clearStencil === true ? DEFAULT_CLEAR_STENCIL : this.props.clearStencil;
     }
     if (clearMask !== 0) {
       withGLParameters(this.device.gl, glParameters, () => {
@@ -3276,16 +3190,22 @@ var WEBGLRenderPass = class extends import_core15.RenderPass {
   clearColorBuffer(drawBuffer = 0, value = [0, 0, 0, 0]) {
     withGLParameters(this.device.gl, { framebuffer: this.props.framebuffer }, () => {
       switch (value.constructor) {
+        case Int8Array:
+        case Int16Array:
         case Int32Array:
-          this.device.gl.clearBufferiv(GL_COLOR, drawBuffer, value);
+          this.device.gl.clearBufferiv(6144, drawBuffer, value);
           break;
+        case Uint8Array:
+        case Uint8ClampedArray:
+        case Uint16Array:
         case Uint32Array:
-          this.device.gl.clearBufferuiv(GL_COLOR, drawBuffer, value);
+          this.device.gl.clearBufferuiv(6144, drawBuffer, value);
           break;
         case Float32Array:
-        default:
-          this.device.gl.clearBufferfv(GL_COLOR, drawBuffer, value);
+          this.device.gl.clearBufferfv(6144, drawBuffer, value);
           break;
+        default:
+          throw new Error("clearColorBuffer: color must be typed array");
       }
     });
   }
@@ -3781,9 +3701,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)();
         }
@@ -3908,21 +3828,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}`);
     }
   }
   /**
@@ -3976,11 +3909,6 @@ var WEBGLRenderPipeline = class extends import_core16.RenderPipeline {
         texturesRenderable = false;
       }
     }
-    for (const [, texture] of Object.entries(this.bindings)) {
-      if (texture instanceof WEBGLTexture) {
-        texture.update();
-      }
-    }
     return texturesRenderable;
   }
   /** Apply any bindings (before each draw call) */
@@ -4107,13 +4035,15 @@ var WEBGLCommandBuffer = class extends import_core17.CommandBuffer {
         case "copy-texture-to-texture":
           _copyTextureToTexture(this.device, command.options);
           break;
+        default:
+          throw new Error(command.name);
       }
     }
   }
 };
 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);
@@ -4126,20 +4056,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,
     /**
@@ -4155,15 +4085,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);
@@ -4185,7 +4115,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. */
@@ -4195,7 +4125,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. */
@@ -4204,18 +4134,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);
@@ -4285,6 +4215,9 @@ var WEBGLCommandEncoder = class extends import_core18.CommandEncoder {
   copyTextureToTexture(options) {
     this.commandBuffer.commands.push({ name: "copy-texture-to-texture", options });
   }
+  // clearTexture(options: ClearTextureOptions): void {
+  //   this.commandBuffer.commands.push({name: 'copy-texture-to-texture', options});
+  // }
   pushDebugGroup(groupLabel) {
   }
   popDebugGroup() {
@@ -4302,19 +4235,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;
     }
   }
@@ -4730,11 +4663,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;
   }
@@ -4799,9 +4732,9 @@ var WEBGLQuerySet = class extends import_core21.QuerySet {
 
 // dist/deprecated/clear.js
 var import_core22 = require("@luma.gl/core");
-var GL_DEPTH_BUFFER_BIT2 = 256;
-var GL_STENCIL_BUFFER_BIT2 = 1024;
-var GL_COLOR_BUFFER_BIT2 = 16384;
+var GL_DEPTH_BUFFER_BIT = 256;
+var GL_STENCIL_BUFFER_BIT = 1024;
+var GL_COLOR_BUFFER_BIT = 16384;
 function clear(device, options) {
   import_core22.log.warn("clear will be removed in next minor release");
   const { framebuffer = null, color = null, depth = null, stencil = null } = options || {};
@@ -4811,19 +4744,19 @@ function clear(device, options) {
   }
   let clearFlags = 0;
   if (color) {
-    clearFlags |= GL_COLOR_BUFFER_BIT2;
+    clearFlags |= GL_COLOR_BUFFER_BIT;
     if (color !== true) {
       parameters.clearColor = color;
     }
   }
   if (depth) {
-    clearFlags |= GL_DEPTH_BUFFER_BIT2;
+    clearFlags |= GL_DEPTH_BUFFER_BIT;
     if (depth !== true) {
       parameters.clearDepth = depth;
     }
   }
   if (stencil) {
-    clearFlags |= GL_STENCIL_BUFFER_BIT2;
+    clearFlags |= GL_STENCIL_BUFFER_BIT;
     if (depth !== true) {
       parameters.clearStencil = depth;
     }
@@ -4865,36 +4798,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();
@@ -4902,11 +4851,14 @@ 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 });
-      this.debug = true;
-      import_core23.log.level = Math.max(import_core23.log.level, 1);
+    const debugWebGL = props.debugWebGL || props.debug;
+    const traceWebGL = props.debugWebGL;
+    if (debugWebGL) {
+      this.gl = makeDebugContext(this.gl, { debugWebGL, traceWebGL });
       import_core23.log.warn("WebGL debug mode activated. Performance reduced.")();
+      if (props.debugWebGL) {
+        import_core23.log.level = Math.max(import_core23.log.level, 1);
+      }
     }
   }
   /**
@@ -4932,7 +4884,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) {
@@ -5056,15 +5008,24 @@ var WebGLDevice = class extends import_core23.Device {
    * Be aware that there are some duplicates especially for constants that are 0,
    * so this isn't guaranteed to return the right key in all cases.
    */
-  getGLKey(value, gl) {
-    gl = gl || this.gl2 || this.gl;
+  getGLKey(value, options) {
     const number = Number(value);
-    for (const key in gl) {
-      if (gl[key] === number) {
+    for (const key in this.gl) {
+      if (this.gl[key] === number) {
         return `GL.${key}`;
       }
     }
-    return String(value);
+    return (options == null ? void 0 : options.emptyIfUnknown) ? "" : String(value);
+  }
+  /**
+   * Returns a map with any GL.<KEY> constants mapped to strings, both for keys and values
+   */
+  getGLKeys(glParameters) {
+    const opts = { emptyIfUnknown: true };
+    return Object.entries(glParameters).reduce((keys, [key, value]) => {
+      keys[`${key}:${this.getGLKey(key, opts)}`] = `${value}:${this.getGLKey(value, opts)}`;
+      return keys;
+    }, {});
   }
   /** Store constants */
   _constants;
@@ -5276,27 +5237,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 || props.debug) {
       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)();