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

package/dist/dist.dev.js

@@ -14,9 +14,9 @@ var __exports__ = (() => {
   var __commonJS = (cb, mod) => function __require() {
     return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
   };
-  var __export = (target, all) => {
+  var __export = (target2, all) => {
     for (var name in all)
-      __defProp(target, name, { get: all[name], enumerable: true });
+      __defProp(target2, name, { get: all[name], enumerable: true });
   };
   var __copyProps = (to, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
@@ -26,13 +26,13 @@ var __exports__ = (() => {
     }
     return to;
   };
-  var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  var __reExport = (target2, mod, secondTarget) => (__copyProps(target2, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+  var __toESM = (mod, isNodeMode, target2) => (target2 = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
     // If the importer is in node compatibility mode or this is not an ESM
     // file that has been converted to a CommonJS file using a Babel-
     // compatible transform (i.e. "__esModule" has not been set), then set
     // "default" to the CommonJS "module.exports" for node compatibility.
-    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target2, "default", { value: mod, enumerable: true }) : target2,
     mod
   ));
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -815,8 +815,8 @@ var __exports__ = (() => {
   var hint = (gl, value, key) => gl.hint(key, value);
   var pixelStorei = (gl, value, key) => gl.pixelStorei(key, value);
   var bindFramebuffer = (gl, value, key) => {
-    const target = key === 36006 /* FRAMEBUFFER_BINDING */ ? 36009 /* DRAW_FRAMEBUFFER */ : 36008 /* READ_FRAMEBUFFER */;
-    return gl.bindFramebuffer(target, value);
+    const target2 = key === 36006 /* FRAMEBUFFER_BINDING */ ? 36009 /* DRAW_FRAMEBUFFER */ : 36008 /* READ_FRAMEBUFFER */;
+    return gl.bindFramebuffer(target2, value);
   };
   var bindBuffer = (gl, value, key) => {
     const bindingMap = {
@@ -1049,17 +1049,17 @@ var __exports__ = (() => {
     useProgram: (update, value) => update({
       [35725 /* CURRENT_PROGRAM */]: value
     }),
-    bindRenderbuffer: (update, target, value) => update({
+    bindRenderbuffer: (update, target2, value) => update({
       [36007 /* RENDERBUFFER_BINDING */]: value
     }),
-    bindTransformFeedback: (update, target, value) => update({
+    bindTransformFeedback: (update, target2, value) => update({
       [36389 /* TRANSFORM_FEEDBACK_BINDING */]: value
     }),
     bindVertexArray: (update, value) => update({
       [34229 /* VERTEX_ARRAY_BINDING */]: value
     }),
-    bindFramebuffer: (update, target, framebuffer) => {
-      switch (target) {
+    bindFramebuffer: (update, target2, framebuffer) => {
+      switch (target2) {
         case 36160 /* FRAMEBUFFER */:
           return update({
             [36006 /* DRAW_FRAMEBUFFER_BINDING */]: framebuffer,
@@ -1073,14 +1073,14 @@ var __exports__ = (() => {
           return null;
       }
     },
-    bindBuffer: (update, target, buffer) => {
+    bindBuffer: (update, target2, buffer) => {
       const pname = {
         [34962 /* ARRAY_BUFFER */]: [34964 /* ARRAY_BUFFER_BINDING */],
         [36662 /* COPY_READ_BUFFER */]: [36662 /* COPY_READ_BUFFER_BINDING */],
         [36663 /* COPY_WRITE_BUFFER */]: [36663 /* COPY_WRITE_BUFFER_BINDING */],
         [35051 /* PIXEL_PACK_BUFFER */]: [35053 /* PIXEL_PACK_BUFFER_BINDING */],
         [35052 /* PIXEL_UNPACK_BUFFER */]: [35055 /* PIXEL_UNPACK_BUFFER_BINDING */]
-      }[target];
+      }[target2];
       if (pname) {
         return update({ [pname]: buffer });
       }
@@ -1434,37 +1434,43 @@ var __exports__ = (() => {
   }
 
   // src/context/helpers/create-browser-context.ts
-  var DEFAULT_CONTEXT_PROPS = {
-    powerPreference: "high-performance",
-    // After all, most apps are using WebGL for performance reasons
-    // eslint-disable-next-line no-console
-    onContextLost: () => console.error("WebGL context lost"),
-    // eslint-disable-next-line no-console
-    onContextRestored: () => console.info("WebGL context restored")
-  };
-  function createBrowserContext(canvas, props) {
-    props = { ...DEFAULT_CONTEXT_PROPS, ...props };
-    let errorMessage = null;
-    const onCreateError = (error) => errorMessage = error.statusMessage || errorMessage;
-    canvas.addEventListener("webglcontextcreationerror", onCreateError, false);
+  function createBrowserContext(canvas, props, webglContextAttributes) {
+    let errorMessage = "";
+    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 (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 (!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
-      );
+      gl = canvas.getContext("webgl", {});
+      if (gl) {
+        gl = null;
+        errorMessage ||= "Your browser only supports WebGL1";
+      }
     }
+    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;
   }
 
@@ -1695,7 +1701,7 @@ var __exports__ = (() => {
     // 64-bit formats
     "rg32uint": { gl: 33340 /* RG32UI */, b: 8, c: 2, rb: true },
     "rg32sint": { gl: 33339 /* RG32I */, b: 8, c: 2, rb: true },
-    "rg32float": { gl: 33328 /* RG32F */, b: 8, c: 2, render: float32_renderable, filter: float32_filterable, rb: true },
+    "rg32float": { gl: 33328 /* RG32F */, b: 8, c: 2, render: false, filter: float32_filterable, rb: true },
     "rgba16uint": { gl: 36214 /* RGBA16UI */, b: 8, c: 4, rb: true },
     "rgba16sint": { gl: 36232 /* RGBA16I */, b: 8, c: 4, rb: true },
     "rgba16float": { gl: 34842 /* RGBA16F */, b: 8, c: 4, render: float16_renderable, filter: float16_filterable },
@@ -1881,36 +1887,35 @@ var __exports__ = (() => {
     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?.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) {
     const formatData = TEXTURE_FORMATS[format];
@@ -2189,7 +2194,7 @@ var __exports__ = (() => {
         );
         this._attachTextureView(attachmentPoint, this.depthStencilAttachment);
       }
-      if (this.props.check !== false) {
+      if (this.device.props.debug) {
         const status = this.gl.checkFramebufferStatus(36160 /* FRAMEBUFFER */);
         if (status !== 36053 /* FRAMEBUFFER_COMPLETE */) {
           throw new Error(`Framebuffer ${_getFrameBufferStatus(status)}`);
@@ -2341,17 +2346,17 @@ var __exports__ = (() => {
   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));
       }
@@ -2359,13 +2364,13 @@ var __exports__ = (() => {
   }
   function initializeSpectorJS(props) {
     props = { ...DEFAULT_SPECTOR_PROPS, ...props };
-    if (!props.debugWithSpectorJS) {
+    if (!props.debugSpectorJS) {
       return null;
     }
     if (!spector && globalThis.SPECTOR && !globalThis.luma?.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;
       }
@@ -2468,7 +2473,7 @@ var __exports__ = (() => {
     }
   }
   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);
@@ -2517,34 +2522,19 @@ var __exports__ = (() => {
     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;
       }
     }
   }
@@ -2754,13 +2744,16 @@ var __exports__ = (() => {
         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");
@@ -2770,13 +2763,12 @@ var __exports__ = (() => {
     // 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;
       }
@@ -3145,15 +3137,17 @@ ${source2}`;
         return 9729 /* LINEAR */;
     }
   }
-  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 /* NEAREST_MIPMAP_NEAREST */ : 9986 /* NEAREST_MIPMAP_LINEAR */;
+        return minFilter === "nearest" ? 9984 /* NEAREST_MIPMAP_NEAREST */ : 9986 /* NEAREST_MIPMAP_LINEAR */;
       case "linear":
-        return mipmapFilter === "nearest" ? 9985 /* LINEAR_MIPMAP_NEAREST */ : 9987 /* LINEAR_MIPMAP_LINEAR */;
+        return minFilter === "nearest" ? 9985 /* LINEAR_MIPMAP_NEAREST */ : 9987 /* LINEAR_MIPMAP_LINEAR */;
     }
   }
 
@@ -3303,14 +3297,20 @@ ${source2}`;
       case 6406 /* ALPHA */:
       case 33326 /* R32F */:
       case 6403 /* RED */:
+      case 36244 /* RED_INTEGER */:
         return 1;
+      case 33339 /* RG32I */:
+      case 33340 /* RG32UI */:
       case 33328 /* RG32F */:
+      case 33320 /* RG_INTEGER */:
       case 33319 /* RG */:
         return 2;
       case 6407 /* RGB */:
+      case 36248 /* RGB_INTEGER */:
       case 34837 /* RGB32F */:
         return 3;
       case 6408 /* RGBA */:
+      case 36249 /* RGBA_INTEGER */:
       case 34836 /* RGBA32F */:
         return 4;
       default:
@@ -3352,22 +3352,25 @@ ${source2}`;
     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 /* UNPACK_FLIP_Y_WEBGL */]: 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;
@@ -3419,11 +3422,11 @@ ${source2}`;
     const {
       sourceX = 0,
       sourceY = 0,
-      sourceAttachment = 36064 /* COLOR_ATTACHMENT0 */
+      sourceAttachment = 0
       // TODO - support gl.readBuffer
     } = options || {};
     let {
-      target = null,
+      target: target2 = null,
       // following parameters are auto deduced if not provided
       sourceWidth,
       sourceHeight,
@@ -3433,25 +3436,33 @@ ${source2}`;
     } = options || {};
     const { framebuffer, deleteFramebuffer } = getFramebuffer(source);
     const { gl, handle } = framebuffer;
-    const attachment = sourceAttachment - 36064 /* COLOR_ATTACHMENT0 */;
     sourceWidth ||= framebuffer.width;
     sourceHeight ||= framebuffer.height;
-    sourceDepth = framebuffer.colorAttachments[attachment]?.texture?.depth || 1;
-    sourceFormat ||= framebuffer.colorAttachments[attachment]?.texture?.glFormat || 6408 /* RGBA */;
-    sourceType ||= framebuffer.colorAttachments[attachment]?.texture?.glType || 5121 /* UNSIGNED_BYTE */;
-    target = getPixelArray(target, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
-    sourceType = sourceType || getGLTypeFromTypedArray(target);
-    const prevHandle = gl.bindFramebuffer(36160 /* FRAMEBUFFER */, handle);
-    gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target);
+    const texture = framebuffer.colorAttachments[sourceAttachment]?.texture;
+    if (!texture) {
+      throw new Error(`Invalid framebuffer attachment ${sourceAttachment}`);
+    }
+    sourceDepth = texture?.depth || 1;
+    sourceFormat ||= texture?.glFormat || 6408 /* RGBA */;
+    sourceType ||= texture?.glType || 5121 /* UNSIGNED_BYTE */;
+    target2 = getPixelArray(target2, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
+    sourceType = sourceType || getGLTypeFromTypedArray(target2);
+    const prevHandle = gl.bindFramebuffer(
+      36160 /* FRAMEBUFFER */,
+      handle
+    );
+    gl.readBuffer(gl.COLOR_ATTACHMENT0 + sourceAttachment);
+    gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target2);
+    gl.readBuffer(gl.COLOR_ATTACHMENT0);
     gl.bindFramebuffer(36160 /* FRAMEBUFFER */, prevHandle || null);
     if (deleteFramebuffer) {
       framebuffer.destroy();
     }
-    return target;
+    return target2;
   }
   function readPixelsToBuffer(source, options) {
     const {
-      target,
+      target: target2,
       sourceX = 0,
       sourceY = 0,
       sourceFormat = 6408 /* RGBA */,
@@ -3463,7 +3474,7 @@ ${source2}`;
     sourceHeight = sourceHeight || framebuffer.height;
     const webglFramebuffer = framebuffer;
     sourceType = sourceType || 5121 /* UNSIGNED_BYTE */;
-    let webglBufferTarget = target;
+    let webglBufferTarget = target2;
     if (!webglBufferTarget) {
       const components = glFormatToComponents(sourceFormat);
       const byteCount = glTypeToBytes(sourceType);
@@ -3472,11 +3483,11 @@ ${source2}`;
     }
     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();
@@ -3502,38 +3513,19 @@ ${source2}`;
     });
     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 /* UNSIGNED_BYTE */;
-    const ArrayType = getTypedArrayFromGLType(type, { clamped: false });
-    const components = glFormatToComponents(format);
+    glType ||= 5121 /* UNSIGNED_BYTE */;
+    const ArrayType = getTypedArrayFromGLType(glType, { clamped: false });
+    const components = glFormatToComponents(glFormat);
     return new ArrayType(width * height * components);
   }
 
   // src/adapter/resources/webgl-texture.ts
-  function normalizeTextureData(data, options) {
-    let lodArray;
-    if (ArrayBuffer.isView(data)) {
-      lodArray = [
-        {
-          // ts-expect-error does data really need to be Uint8ClampedArray?
-          data,
-          width: options.width,
-          height: options.height
-          // depth: options.depth
-        }
-      ];
-    } else if (!Array.isArray(data)) {
-      lodArray = [data];
-    } else {
-      lodArray = data;
-    }
-    return lodArray;
-  }
   var WEBGLTexture = class extends import_core14.Texture {
-    MAX_ATTRIBUTES;
+    // readonly MAX_ATTRIBUTES: number;
     device;
     gl;
     handle;
@@ -3541,8 +3533,12 @@ ${source2}`;
     // 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.
@@ -3551,122 +3547,79 @@ ${source2}`;
      * 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?.width || 1;
         height = 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);
@@ -3675,9 +3628,6 @@ ${source2}`;
         this.destroyed = true;
       }
     }
-    toString() {
-      return `Texture(${this.id},${this.width}x${this.height})`;
-    }
     createView(props) {
       return new WEBGLTextureView(this.device, { ...props, texture: this });
     }
@@ -3693,35 +3643,33 @@ ${source2}`;
       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,
@@ -3735,7 +3683,8 @@ ${source2}`;
         glFormat,
         glInternalFormat,
         glType,
-        glTarget
+        glTarget,
+        flipY
       });
       return { width: opts.width, height: opts.height };
     }
@@ -3745,7 +3694,7 @@ ${source2}`;
     /** 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.`)();
       }
@@ -3807,6 +3756,11 @@ ${source2}`;
       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) {
@@ -3854,7 +3808,7 @@ ${source2}`;
      * 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);
@@ -3883,61 +3837,6 @@ ${source2}`;
       }
       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.
@@ -3949,7 +3848,8 @@ ${source2}`;
           ...this,
           depth,
           mipLevel,
-          glTarget
+          glTarget,
+          flipY: this.props.flipY
         });
         return;
       }
@@ -3990,10 +3890,6 @@ ${source2}`;
 
   // src/adapter/resources/webgl-render-pass.ts
   var import_core15 = __toESM(require_core(), 1);
-  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;
@@ -4014,6 +3910,14 @@ ${source2}`;
       }
       this.device.pushState();
       this.setParameters({ viewport, ...this.props.parameters });
+      if (this.props.framebuffer) {
+        const drawBuffers = this.props.framebuffer.colorAttachments.map(
+          (_, i) => 36064 /* COLOR_ATTACHMENT0 */ + i
+        );
+        this.device.gl.drawBuffers(drawBuffers);
+      } else {
+        this.device.gl.drawBuffers([1029 /* BACK */]);
+      }
       this.clear();
     }
     end() {
@@ -4079,19 +3983,30 @@ ${source2}`;
      * 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 /* COLOR_BUFFER_BIT */;
+        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 /* DEPTH_BUFFER_BIT */;
+        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 /* STENCIL_BUFFER_BIT */;
+        glParameters.clearStencil = this.props.clearStencil === true ? DEFAULT_CLEAR_STENCIL : this.props.clearStencil;
       }
       if (clearMask !== 0) {
         withGLParameters(this.device.gl, glParameters, () => {
@@ -4105,21 +4020,27 @@ ${source2}`;
     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 /* COLOR */, drawBuffer, value);
             break;
+          case Uint8Array:
+          case Uint8ClampedArray:
+          case Uint16Array:
           case Uint32Array:
-            this.device.gl.clearBufferuiv(GL_COLOR, drawBuffer, value);
+            this.device.gl.clearBufferuiv(6144 /* COLOR */, drawBuffer, value);
             break;
           case Float32Array:
-          default:
-            this.device.gl.clearBufferfv(GL_COLOR, drawBuffer, value);
+            this.device.gl.clearBufferfv(6144 /* COLOR */, drawBuffer, value);
             break;
+          default:
+            throw new Error("clearColorBuffer: color must be typed array");
         }
       });
     }
     // clearDepthStencil() {
-    // const GL_DEPTH = 0x1801;
+    // const GL.DEPTH = 0x1801;
     // const GL_STENCIL = 0x1802;
     // const GL_DEPTH_STENCIL = 0x84f9;
     //     case GL_DEPTH:
@@ -4634,9 +4555,9 @@ ${source2}`;
      */
     setBindings(bindings, options) {
       for (const [name, value] of Object.entries(bindings)) {
-        const binding = this.shaderLayout.bindings.find((binding2) => binding2.name === name) || this.shaderLayout.bindings.find((binding2) => binding2.name === `${name}Uniforms`);
+        const binding = this.shaderLayout.bindings.find((binding_) => binding_.name === name) || this.shaderLayout.bindings.find((binding_) => binding_.name === `${name}Uniforms`);
         if (!binding) {
-          const validBindings = this.shaderLayout.bindings.map((binding2) => `"${binding2.name}"`).join(", ");
+          const validBindings = this.shaderLayout.bindings.map((binding_) => `"${binding_.name}"`).join(", ");
           if (!options?.disableWarnings) {
             import_core16.log.warn(
               `No binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`,
@@ -4772,20 +4693,33 @@ ${source2}`;
       this._reportLinkStatus(status);
     }
     /** Report link status. First, check for shader compilation failures if linking fails */
-    _reportLinkStatus(status) {
+    async _reportLinkStatus(status) {
       switch (status) {
         case "success":
           return;
         default:
-          if (this.vs.compilationStatus === "error") {
-            this.vs.debugShader();
-            throw new Error(`Error during compilation of shader ${this.vs.id}`);
+          switch (this.vs.compilationStatus) {
+            case "error":
+              this.vs.debugShader();
+              throw new Error(`Error during compilation of shader ${this.vs.id}`);
+            case "pending":
+              this.vs.asyncCompilationStatus.then(() => this.vs.debugShader());
+              break;
+            case "success":
+              break;
           }
-          if (this.fs?.compilationStatus === "error") {
-            this.fs.debugShader();
-            throw new Error(`Error during compilation of shader ${this.fs.id}`);
+          switch (this.fs?.compilationStatus) {
+            case "error":
+              this.fs.debugShader();
+              throw new Error(`Error during compilation of shader ${this.fs.id}`);
+            case "pending":
+              this.fs.asyncCompilationStatus.then(() => this.fs.debugShader());
+              break;
+            case "success":
+              break;
           }
-          throw new Error(`Error during ${status}: ${this.device.gl.getProgramInfoLog(this.handle)}`);
+          const linkErrorLog = this.device.gl.getProgramInfoLog(this.handle);
+          throw new Error(`Error during ${status}: ${linkErrorLog}`);
       }
     }
     /**
@@ -4839,11 +4773,6 @@ ${source2}`;
           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) */
@@ -4971,13 +4900,15 @@ ${source2}`;
           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 /* COPY_READ_BUFFER */, source.handle);
     device.gl.bindBuffer(36663 /* COPY_WRITE_BUFFER */, destination.handle);
     device.gl.copyBufferSubData(
@@ -4996,20 +4927,20 @@ ${source2}`;
   function _copyTextureToBuffer(device, options) {
     const {
       /** Texture to copy to/from. */
-      source,
+      sourceTexture,
       /**  Mip-map level of the texture to copy to/from. (Default 0) */
       mipLevel = 0,
       /** Defines which aspects of the texture to copy to/from. */
       aspect = "all",
       /** Width to copy */
-      width = options.source.width,
+      width = options.sourceTexture.width,
       /** Height to copy */
-      height = options.source.height,
+      height = options.sourceTexture.height,
       depthOrArrayLayers = 0,
       /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
       origin = [0, 0],
       /** Destination buffer */
-      destination,
+      destinationBuffer,
       /** Offset, in bytes, from the beginning of the buffer to the start of the image data (default 0) */
       byteOffset = 0,
       /**
@@ -5025,15 +4956,15 @@ ${source2}`;
       rowsPerImage
     } = options;
     if (aspect !== "all") {
-      throw new Error("not supported");
+      throw new Error("aspect not supported in WebGL");
     }
     if (mipLevel !== 0 || depthOrArrayLayers !== 0 || bytesPerRow || rowsPerImage) {
       throw new Error("not implemented");
     }
-    const { framebuffer, destroyFramebuffer } = getFramebuffer2(source);
+    const { framebuffer, destroyFramebuffer } = getFramebuffer2(sourceTexture);
     let prevHandle;
     try {
-      const webglBuffer = destination;
+      const webglBuffer = destinationBuffer;
       const sourceWidth = width || framebuffer.width;
       const sourceHeight = height || framebuffer.height;
       const sourceParams = getTextureFormatWebGL(
@@ -5065,7 +4996,7 @@ ${source2}`;
   function _copyTextureToTexture(device, options) {
     const {
       /** Texture to copy to/from. */
-      source,
+      sourceTexture,
       /**  Mip-map level of the texture to copy to (Default 0) */
       destinationMipLevel = 0,
       /** Defines which aspects of the texture to copy to/from. */
@@ -5075,7 +5006,7 @@ ${source2}`;
       /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to. */
       destinationOrigin = [0, 0],
       /** Texture to copy to/from. */
-      destination
+      destinationTexture
       /**  Mip-map level of the texture to copy to/from. (Default 0) */
       // destinationMipLevel = options.mipLevel,
       /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
@@ -5084,11 +5015,11 @@ ${source2}`;
       // destinationAspect = options.aspect,
     } = options;
     let {
-      width = options.destination.width,
-      height = options.destination.height
+      width = options.destinationTexture.width,
+      height = options.destinationTexture.height
       // depthOrArrayLayers = 0
     } = options;
-    const { framebuffer, destroyFramebuffer } = getFramebuffer2(source);
+    const { framebuffer, destroyFramebuffer } = getFramebuffer2(sourceTexture);
     const [sourceX, sourceY] = origin;
     const [destinationX, destinationY, destinationZ] = destinationOrigin;
     const prevHandle = device.gl.bindFramebuffer(
@@ -5097,8 +5028,8 @@ ${source2}`;
     );
     let texture = null;
     let textureTarget;
-    if (destination instanceof WEBGLTexture) {
-      texture = destination;
+    if (destinationTexture instanceof WEBGLTexture) {
+      texture = destinationTexture;
       width = Number.isFinite(width) ? width : texture.width;
       height = Number.isFinite(height) ? height : texture.height;
       texture.bind(0);
@@ -5187,6 +5118,9 @@ ${source2}`;
     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() {
@@ -5202,19 +5136,19 @@ ${source2}`;
 
   // src/utils/fill-array.ts
   function fillArray(options) {
-    const { target, source, start = 0, count = 1 } = options;
+    const { target: target2, source, start = 0, count = 1 } = options;
     const length = source.length;
     const total = count * length;
     let copied = 0;
     for (let i = start; copied < length; copied++) {
-      target[i++] = source[copied];
+      target2[i++] = source[copied];
     }
     while (copied < total) {
       if (copied < total - copied) {
-        target.copyWithin(start + copied, start, start + copied);
+        target2.copyWithin(start + copied, start, start + copied);
         copied *= 2;
       } else {
-        target.copyWithin(start + copied, start, start + total - copied);
+        target2.copyWithin(start + copied, start, start + total - copied);
         copied = total;
       }
     }
@@ -5631,11 +5565,11 @@ ${source2}`;
      * outstanding queries representing disjoint `begin()`/`end()` intervals.
      * It is not possible to interleave or overlap `begin` and `end` calls.
      */
-    _begin(target) {
+    _begin(target2) {
       if (this._queryPending) {
         return;
       }
-      this.target = target;
+      this.target = target2;
       this.device.gl.beginQuery(this.target, this.handle);
       return;
     }
@@ -5703,9 +5637,9 @@ ${source2}`;
 
   // src/deprecated/clear.ts
   var import_core22 = __toESM(require_core(), 1);
-  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 || {};
@@ -5715,19 +5649,19 @@ ${source2}`;
     }
     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;
       }
@@ -5768,33 +5702,57 @@ ${source2}`;
     //
     constructor(props) {
       super({ ...props, id: props.id || uid("webgl-device") });
-      const device = props.gl?.device;
+      if (!props.createCanvasContext) {
+        throw new Error("WebGLDevice requires props.createCanvasContext to be set");
+      }
+      const canvasContextProps = props.createCanvasContext === true ? {} : props.createCanvasContext;
+      let device = canvasContextProps.canvas?.gl?.device;
       if (device) {
         throw new Error(`WebGL context already attached to device ${device.id}`);
       }
-      const canvas = props.gl?.canvas || props.canvas;
-      this.canvasContext = new WebGLCanvasContext(this, { ...props, canvas });
+      this.canvasContext = new WebGLCanvasContext(this, canvasContextProps);
       this.lost = new Promise((resolve) => {
         this._resolveContextLost = resolve;
       });
-      this.handle = createBrowserContext(this.canvasContext.canvas, {
-        ...props,
-        onContextLost: (event) => this._resolveContextLost?.({
-          reason: "destroyed",
-          message: "Entered sleep mode, or too many apps or browser tabs are using the GPU."
-        })
-      });
-      this.gl = this.handle;
-      if (!this.handle) {
+      const webglContextAttributes = { ...props.webgl };
+      if (canvasContextProps.alphaMode === "premultiplied") {
+        webglContextAttributes.premultipliedAlpha = true;
+      }
+      if (props.powerPreference !== void 0) {
+        webglContextAttributes.powerPreference = props.powerPreference;
+      }
+      const gl = createBrowserContext(
+        this.canvasContext.canvas,
+        {
+          onContextLost: (event) => this._resolveContextLost?.({
+            reason: "destroyed",
+            message: "Entered sleep mode, or too many apps or browser tabs are using the GPU."
+          }),
+          // eslint-disable-next-line no-console
+          onContextRestored: (event) => console.log("WebGL context restored")
+        },
+        webglContextAttributes
+      );
+      if (!gl) {
         throw new Error("WebGL context creation failed");
       }
+      device = gl.device;
+      if (device) {
+        throw new Error(`WebGL context already attached to device ${device.id}`);
+      }
+      this.handle = gl;
+      this.gl = gl;
       this.spectorJS = initializeSpectorJS({ ...this.props, gl: this.handle });
       this.gl.device = this;
       this.gl._version = 2;
       this.info = getDeviceInfo(this.gl, this._extensions);
       this.limits = new WebGLDeviceLimits(this.gl);
-      this.features = new WebGLDeviceFeatures(this.gl, this._extensions, this.props.disabledFeatures);
-      if (this.props.initalizeFeatures) {
+      this.features = new WebGLDeviceFeatures(
+        this.gl,
+        this._extensions,
+        this.props._disabledFeatures
+      );
+      if (this.props._initializeFeatures) {
         this.features.initializeFeatures();
       }
       this.canvasContext.resize();
@@ -5802,11 +5760,14 @@ ${source2}`;
         log: (...args) => import_core23.log.log(1, ...args)()
       });
       glState.trackState(this.gl, { copyState: false });
-      if (props.debug) {
-        this.gl = makeDebugContext(this.gl, { ...props, throwOnError: true });
-        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);
+        }
       }
     }
     /**
@@ -5832,7 +5793,7 @@ ${source2}`;
       throw new Error("WebGL only supports a single canvas");
     }
     createBuffer(props) {
-      const newProps = this._getBufferProps(props);
+      const newProps = this._normalizeBufferProps(props);
       return new WEBGLBuffer(this, newProps);
     }
     createTexture(props) {
@@ -5954,15 +5915,24 @@ ${source2}`;
      * 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?.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;
@@ -6176,27 +6146,23 @@ ${source2}`;
       if (!isWebGL(gl)) {
         throw new Error("Invalid WebGL2RenderingContext");
       }
-      return new WebGLDevice({ gl });
+      return new WebGLDevice({ _handle: gl });
     }
     async create(props = {}) {
       import_core24.log.groupCollapsed(LOG_LEVEL2, "WebGLDevice created")();
       const promises = [];
-      if (props.debug) {
+      if (props.debugWebGL || 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)();