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

package/dist/dist.dev.js

@@ -1435,7 +1435,7 @@ var __exports__ = (() => {
 
   // src/context/helpers/create-browser-context.ts
   function createBrowserContext(canvas, props, webglContextAttributes) {
-    const errorMessage = null;
+    let errorMessage = "";
     const webglProps = {
       preserveDrawingBuffer: true,
       // failIfMajorPerformanceCaveat: true,
@@ -1443,14 +1443,25 @@ var __exports__ = (() => {
     };
     let gl = null;
     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("webgl", webglProps);
+      gl = canvas.getContext("webgl2", webglProps);
       gl.luma ||= {};
       gl.luma.softwareRenderer = true;
     }
     if (!gl) {
-      throw new Error(`Failed to create WebGL context: ${errorMessage || "Unknown error"}`);
+      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);
@@ -1459,6 +1470,7 @@ var __exports__ = (() => {
       (event) => onContextRestored(event),
       false
     );
+    gl.luma ||= {};
     return gl;
   }
 
@@ -1689,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 },
@@ -1875,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];
@@ -2183,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)}`);
@@ -2462,7 +2473,7 @@ var __exports__ = (() => {
     }
   }
   function makeDebugContext(gl, props = {}) {
-    return props.debugWebGL ? getDebugContext(gl, props) : getRealContext(gl);
+    return props.debugWebGL || props.traceWebGL ? getDebugContext(gl, props) : getRealContext(gl);
   }
   function getRealContext(gl) {
     const data = getWebGLContextData(gl);
@@ -2516,7 +2527,9 @@ var __exports__ = (() => {
     let functionString = "";
     if (import_core7.log.level >= 1) {
       functionString = getFunctionString(functionName, functionArgs);
-      import_core7.log.log(1, functionString)();
+      if (props.traceWebGL) {
+        import_core7.log.log(1, functionString)();
+      }
     }
     for (const arg of functionArgs) {
       if (arg === void 0) {
@@ -2755,7 +2768,7 @@ ${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;
       }
@@ -3124,15 +3137,17 @@ ${source}`;
         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 */;
     }
   }
 
@@ -3282,14 +3297,20 @@ ${source}`;
       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:
@@ -3331,22 +3352,25 @@ ${source}`;
     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;
@@ -3398,7 +3422,7 @@ ${source}`;
     const {
       sourceX = 0,
       sourceY = 0,
-      sourceAttachment = 36064 /* COLOR_ATTACHMENT0 */
+      sourceAttachment = 0
       // TODO - support gl.readBuffer
     } = options || {};
     let {
@@ -3412,16 +3436,24 @@ ${source}`;
     } = 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 */;
+    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);
+    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();
@@ -3481,38 +3513,19 @@ ${source}`;
     });
     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;
@@ -3520,8 +3533,12 @@ ${source}`;
     // 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.
@@ -3530,122 +3547,79 @@ ${source}`;
      * 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);
@@ -3654,9 +3628,6 @@ ${source}`;
         this.destroyed = true;
       }
     }
-    toString() {
-      return `Texture(${this.id},${this.width}x${this.height})`;
-    }
     createView(props) {
       return new WEBGLTextureView(this.device, { ...props, texture: this });
     }
@@ -3672,35 +3643,33 @@ ${source}`;
       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,
@@ -3714,7 +3683,8 @@ ${source}`;
         glFormat,
         glInternalFormat,
         glType,
-        glTarget
+        glTarget,
+        flipY
       });
       return { width: opts.width, height: opts.height };
     }
@@ -3724,7 +3694,7 @@ ${source}`;
     /** 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.`)();
       }
@@ -3786,6 +3756,11 @@ ${source}`;
       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) {
@@ -3833,7 +3808,7 @@ ${source}`;
      * 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);
@@ -3862,61 +3837,6 @@ ${source}`;
       }
       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.
@@ -3928,7 +3848,8 @@ ${source}`;
           ...this,
           depth,
           mipLevel,
-          glTarget
+          glTarget,
+          flipY: this.props.flipY
         });
         return;
       }
@@ -3969,10 +3890,6 @@ ${source}`;
 
   // 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;
@@ -3993,6 +3910,14 @@ ${source}`;
       }
       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() {
@@ -4058,19 +3983,30 @@ ${source}`;
      * 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, () => {
@@ -4084,21 +4020,27 @@ ${source}`;
     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:
@@ -4831,11 +4773,6 @@ ${source}`;
           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) */
@@ -4963,6 +4900,8 @@ ${source}`;
           case "copy-texture-to-texture":
             _copyTextureToTexture(this.device, command.options);
             break;
+          default:
+            throw new Error(command.name);
         }
       }
     }
@@ -5179,6 +5118,9 @@ ${source}`;
     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() {
@@ -5695,9 +5637,9 @@ ${source}`;
 
   // 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 || {};
@@ -5707,19 +5649,19 @@ ${source}`;
     }
     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;
       }
@@ -5818,11 +5760,14 @@ ${source}`;
         log: (...args) => import_core23.log.log(1, ...args)()
       });
       glState.trackState(this.gl, { copyState: false });
-      if (props.debugWebGL) {
-        this.gl = makeDebugContext(this.gl, { ...props });
-        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);
+        }
       }
     }
     /**
@@ -5970,15 +5915,24 @@ ${source}`;
      * 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;
@@ -6197,7 +6151,7 @@ ${source}`;
     async create(props = {}) {
       import_core24.log.groupCollapsed(LOG_LEVEL2, "WebGLDevice created")();
       const promises = [];
-      if (props.debugWebGL) {
+      if (props.debugWebGL || props.debug) {
         promises.push(loadWebGLDeveloperTools());
       }
       if (props.debugSpectorJS) {