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

package/dist/index.cjs

@@ -720,7 +720,7 @@ function installProgramSpy(gl) {
 
 // dist/context/helpers/create-browser-context.js
 function createBrowserContext(canvas, props, webglContextAttributes) {
-  const errorMessage = null;
+  let errorMessage = "";
   const webglProps = {
     preserveDrawingBuffer: true,
     // failIfMajorPerformanceCaveat: true,
@@ -728,18 +728,30 @@ function createBrowserContext(canvas, props, webglContextAttributes) {
   };
   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);
   canvas.addEventListener("webglcontextrestored", (event) => onContextRestored(event), false);
+  gl.luma ||= {};
   return gl;
 }
 
@@ -975,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 },
@@ -1136,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;
@@ -1443,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)}`);
@@ -1669,7 +1680,7 @@ async function loadWebGLDeveloperTools() {
   }
 }
 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);
@@ -1719,7 +1730,9 @@ 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.traceWebGL) {
+      import_core7.log.log(1, functionString)();
+    }
   }
   for (const arg of functionArgs) {
     if (arg === void 0) {
@@ -1960,7 +1973,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;
     }
@@ -2304,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;
   }
 }
 
@@ -2466,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:
@@ -2515,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;
@@ -2579,11 +2603,11 @@ 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 {
@@ -2597,16 +2621,21 @@ 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;
+  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.readBuffer(36064 + sourceAttachment);
   gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target2);
+  gl.readBuffer(36064);
   gl.bindFramebuffer(36160, prevHandle || null);
   if (deleteFramebuffer) {
     framebuffer.destroy();
@@ -2660,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;
@@ -2699,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.
@@ -2709,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);
@@ -2833,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 });
   }
@@ -2851,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,
@@ -2891,7 +2859,8 @@ var WEBGLTexture = class extends import_core14.Texture {
       glFormat,
       glInternalFormat,
       glType,
-      glTarget
+      glTarget,
+      flipY
     });
     return { width: opts.width, height: opts.height };
   }
@@ -2901,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.`)();
     }
@@ -2963,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) {
@@ -3006,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);
@@ -3035,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.
@@ -3101,7 +3020,8 @@ var WEBGLTexture = class extends import_core14.Texture {
         ...this,
         depth,
         mipLevel,
-        glTarget
+        glTarget,
+        flipY: this.props.flipY
       });
       return;
     }
@@ -3143,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;
@@ -3168,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() {
@@ -3233,16 +3155,23 @@ var WEBGLRenderPass = class extends import_core15.RenderPass {
   clear() {
     const glParameters = { ...this.glParameters };
     let clearMask = 0;
-    if (this.props.clearColor !== false) {
-      clearMask |= GL_COLOR_BUFFER_BIT;
+    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;
       glParameters.clearColor = this.props.clearColor;
     }
     if (this.props.clearDepth !== false) {
-      clearMask |= GL_DEPTH_BUFFER_BIT;
+      clearMask |= 256;
       glParameters.clearDepth = this.props.clearDepth;
     }
     if (this.props.clearStencil !== false) {
-      clearMask |= GL_STENCIL_BUFFER_BIT;
+      clearMask |= 1024;
       glParameters.clearStencil = this.props.clearStencil;
     }
     if (clearMask !== 0) {
@@ -3257,16 +3186,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");
       }
     });
   }
@@ -3970,11 +3905,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) */
@@ -4101,6 +4031,8 @@ var WEBGLCommandBuffer = class extends import_core17.CommandBuffer {
         case "copy-texture-to-texture":
           _copyTextureToTexture(this.device, command.options);
           break;
+        default:
+          throw new Error(command.name);
       }
     }
   }
@@ -4279,6 +4211,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() {
@@ -4793,9 +4728,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 || {};
@@ -4805,19 +4740,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;
     }
@@ -4912,11 +4847,14 @@ var WebGLDevice = class extends import_core23.Device {
       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);
+      }
     }
   }
   /**
@@ -5066,15 +5004,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;
@@ -5291,7 +5238,7 @@ var WebGLAdapter = class extends import_core24.Adapter {
   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) {