@luma.gl/webgl 9.1.0-alpha.1 → 9.1.0-alpha.10

package/dist/dist.dev.js

@@ -11,7 +11,6 @@ var __exports__ = (() => {
   var __getOwnPropNames = Object.getOwnPropertyNames;
   var __getProtoOf = Object.getPrototypeOf;
   var __hasOwnProp = Object.prototype.hasOwnProperty;
-  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __commonJS = (cb, mod) => function __require() {
     return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
   };
@@ -37,10 +36,6 @@ var __exports__ = (() => {
     mod
   ));
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-  var __publicField = (obj, key, value) => {
-    __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-    return value;
-  };
 
   // external-global-plugin:@luma.gl/core
   var require_core = __commonJS({
@@ -65,20 +60,22 @@ var __exports__ = (() => {
     WEBGLVertexArray: () => WEBGLVertexArray,
     WebGLCanvasContext: () => WebGLCanvasContext,
     WebGLDevice: () => WebGLDevice,
+    WebGLStateTracker: () => WebGLStateTracker,
     _TEXTURE_FORMATS: () => TEXTURE_FORMATS,
     getGLParameters: () => getGLParameters,
     getShaderLayout: () => getShaderLayout,
-    popContextState: () => popContextState,
-    pushContextState: () => pushContextState,
     resetGLParameters: () => resetGLParameters,
     setDeviceParameters: () => setDeviceParameters,
     setGLParameters: () => setGLParameters,
-    trackContextState: () => trackContextState,
+    webgl2Adapter: () => webgl2Adapter,
     withDeviceParameters: () => withDeviceParameters,
     withGLParameters: () => withGLParameters
   });
   __reExport(bundle_exports, __toESM(require_core(), 1));
 
+  // src/adapter/webgl-adapter.ts
+  var import_core23 = __toESM(require_core(), 1);
+
   // src/adapter/webgl-device.ts
   var import_core22 = __toESM(require_core(), 1);
 
@@ -1309,24 +1306,22 @@ var __exports__ = (() => {
     return false;
   }
 
-  // src/context/state-tracker/track-context-state.ts
-  var GLState = class {
+  // src/context/state-tracker/webgl-state-tracker.ts
+  var WebGLStateTracker = class {
+    static get(gl) {
+      return gl.state;
+    }
     gl;
     program = null;
     stateStack = [];
     enable = true;
-    cache;
+    cache = null;
     log;
-    constructor(gl, {
-      copyState = false,
-      // Copy cache from params (slow) or initialize from WebGL defaults (fast)
-      log: log9 = () => {
-      }
-      // Logging function, called when gl parameter change calls are actually issued
-    } = {}) {
+    initialized = false;
+    constructor(gl, props) {
       this.gl = gl;
-      this.cache = copyState ? getGLParameters(gl) : Object.assign({}, GL_PARAMETER_DEFAULTS);
-      this.log = log9;
+      this.log = props?.log || (() => {
+      });
       this._updateCache = this._updateCache.bind(this);
       Object.seal(this);
     }
@@ -1338,6 +1333,29 @@ var __exports__ = (() => {
       setGLParameters(this.gl, oldValues);
       this.stateStack.pop();
     }
+    /**
+     * Initialize WebGL state caching on a context
+     * can be called multiple times to enable/disable
+     *
+     * @note After calling this function, context state will be cached
+     * .push() and .pop() will be available for saving,
+     * temporarily modifying, and then restoring state.
+     */
+    trackState(gl, options) {
+      this.cache = options.copyState ? getGLParameters(gl) : Object.assign({}, GL_PARAMETER_DEFAULTS);
+      if (this.initialized) {
+        throw new Error("WebGLStateTracker");
+      }
+      this.initialized = true;
+      this.gl.state = this;
+      installProgramSpy(gl);
+      for (const key in GL_HOOKED_SETTERS) {
+        const setter = GL_HOOKED_SETTERS[key];
+        installSetterSpy(gl, key, setter);
+      }
+      installGetterOverride(gl, "getParameter");
+      installGetterOverride(gl, "isEnabled");
+    }
     /**
     // interceptor for context set functions - update our cache and our stack
     // values (Object) - the key values for this setter
@@ -1363,44 +1381,13 @@ var __exports__ = (() => {
       return { valueChanged, oldValue };
     }
   };
-  function getContextState(gl) {
-    return gl.state;
-  }
-  function trackContextState(gl, options) {
-    const { enable: enable2 = true, copyState } = options || {};
-    if (!gl.state) {
-      gl.state = new GLState(gl, { copyState });
-      installProgramSpy(gl);
-      for (const key in GL_HOOKED_SETTERS) {
-        const setter = GL_HOOKED_SETTERS[key];
-        installSetterSpy(gl, key, setter);
-      }
-      installGetterOverride(gl, "getParameter");
-      installGetterOverride(gl, "isEnabled");
-    }
-    const glState = getContextState(gl);
-    glState.enable = enable2;
-    return gl;
-  }
-  function pushContextState(gl) {
-    let glState = getContextState(gl);
-    if (!glState) {
-      trackContextState(gl, { copyState: false });
-      glState = getContextState(gl);
-    }
-    glState.push();
-  }
-  function popContextState(gl) {
-    const glState = getContextState(gl);
-    glState.pop();
-  }
   function installGetterOverride(gl, functionName) {
     const originalGetterFunc = gl[functionName].bind(gl);
     gl[functionName] = function get(pname) {
       if (pname === void 0 || NON_CACHE_PARAMETERS.has(pname)) {
         return originalGetterFunc(pname);
       }
-      const glState = getContextState(gl);
+      const glState = WebGLStateTracker.get(gl);
       if (!(pname in glState.cache)) {
         glState.cache[pname] = originalGetterFunc(pname);
       }
@@ -1423,7 +1410,7 @@ var __exports__ = (() => {
     }
     const originalSetterFunc = gl[functionName].bind(gl);
     gl[functionName] = function set(...params) {
-      const glState = getContextState(gl);
+      const glState = WebGLStateTracker.get(gl);
       const { valueChanged, oldValue } = setter(glState._updateCache, ...params);
       if (valueChanged) {
         originalSetterFunc(...params);
@@ -1438,7 +1425,7 @@ var __exports__ = (() => {
   function installProgramSpy(gl) {
     const originalUseProgram = gl.useProgram.bind(gl);
     gl.useProgram = function useProgramLuma(handle) {
-      const glState = getContextState(gl);
+      const glState = WebGLStateTracker.get(gl);
       if (glState.program !== handle) {
         originalUseProgram(handle);
         glState.program = handle;
@@ -1655,26 +1642,6 @@ var __exports__ = (() => {
     return textureExtensions.every((extension) => getWebGLExtension(gl, extension, extensions));
   }
   var TEXTURE_FORMATS = {
-    // Unsized formats that leave the precision up to the driver. TODO - Fix bpp constants
-    "rgb8unorm-unsized": {
-      gl: 6407 /* RGB */,
-      b: 4,
-      c: 2,
-      bpp: 4,
-      dataFormat: 6407 /* RGB */,
-      types: [5121 /* UNSIGNED_BYTE */, 33635 /* UNSIGNED_SHORT_5_6_5 */]
-    },
-    "rgba8unorm-unsized": {
-      gl: 6408 /* RGBA */,
-      b: 4,
-      c: 2,
-      bpp: 4,
-      dataFormat: 6408 /* RGBA */,
-      types: [5121 /* UNSIGNED_BYTE */, 32819 /* UNSIGNED_SHORT_4_4_4_4 */, 32820 /* UNSIGNED_SHORT_5_5_5_1 */]
-    },
-    // 'r8unorm-unsized': {gl: GL.LUMINANCE, b: 4, c: 2, bpp: 4},
-    // 'rgb8unorm-srgb-unsized': {gl: GL.SRGB_EXT, b: 4, c: 2, bpp: 4, gl1Ext: SRGB},
-    // 'rgba8unorm-srgb-unsized': {gl: GL.SRGB_ALPHA_EXT, b: 4, c: 2, bpp: 4, gl1Ext: SRGB},
     // 8-bit formats
     "r8unorm": { gl: 33321 /* R8 */, b: 1, c: 1, rb: true },
     "r8snorm": { gl: 36756 /* R8_SNORM */, b: 1, c: 1, render: snorm8_renderable },
@@ -1789,17 +1756,6 @@ var __exports__ = (() => {
       dataFormat: 34041 /* DEPTH_STENCIL */,
       types: [34042 /* UNSIGNED_INT_24_8 */]
     },
-    // "depth24unorm-stencil8" feature
-    "depth24unorm-stencil8": {
-      gl: 35056 /* DEPTH24_STENCIL8 */,
-      b: 4,
-      c: 2,
-      p: 1,
-      attachment: 33306 /* DEPTH_STENCIL_ATTACHMENT */,
-      dataFormat: 34041 /* DEPTH_STENCIL */,
-      types: [34042 /* UNSIGNED_INT_24_8 */],
-      rb: true
-    },
     // "depth32float-stencil8" feature - TODO below is render buffer only?
     "depth32float-stencil8": {
       gl: 36013 /* DEPTH32F_STENCIL8 */,
@@ -1914,6 +1870,10 @@ var __exports__ = (() => {
     if (info.gl === void 0) {
       return false;
     }
+    const feature = info.f;
+    if (feature) {
+      return checkTextureFeature(gl, feature, extensions);
+    }
     const extension = info.x || info.gl2ext;
     if (extension) {
       return Boolean(getWebGLExtension(gl, extension, extensions));
@@ -1958,11 +1918,10 @@ var __exports__ = (() => {
     const decoded = (0, import_core.decodeTextureFormat)(format);
     return {
       internalFormat: webglFormat,
-      format: formatData?.dataFormat || getWebGLPixelDataFormat(decoded.format, decoded.integer, decoded.normalized, webglFormat),
+      format: formatData?.dataFormat || getWebGLPixelDataFormat(decoded.channels, decoded.integer, decoded.normalized, webglFormat),
       // depth formats don't have a type
       type: decoded.dataType ? getGLFromVertexType(decoded.dataType) : formatData?.types?.[0] || 5121 /* UNSIGNED_BYTE */,
-      // @ts-expect-error
-      compressed: decoded.compressed
+      compressed: decoded.compressed || false
     };
   }
   function getDepthStencilAttachmentWebGL(format) {
@@ -1972,11 +1931,11 @@ var __exports__ = (() => {
     }
     return info.attachment;
   }
-  function getWebGLPixelDataFormat(dataFormat, integer, normalized, format) {
+  function getWebGLPixelDataFormat(channels, integer, normalized, format) {
     if (format === 6408 /* RGBA */ || format === 6407 /* RGB */) {
       return format;
     }
-    switch (dataFormat) {
+    switch (channels) {
       case "r":
         return integer && !normalized ? 36244 /* RED_INTEGER */ : 6403 /* RED */;
       case "rg":
@@ -1985,6 +1944,8 @@ var __exports__ = (() => {
         return integer && !normalized ? 36248 /* RGB_INTEGER */ : 6407 /* RGB */;
       case "rgba":
         return integer && !normalized ? 36249 /* RGBA_INTEGER */ : 6408 /* RGBA */;
+      case "bgra":
+        throw new Error("bgra pixels not supported by WebGL");
       default:
         return 6408 /* RGBA */;
     }
@@ -2006,7 +1967,6 @@ var __exports__ = (() => {
     // 'timestamp-query' // GPUQueryType "timestamp-query"
     // "indirect-first-instance"
     // Textures are handled by getTextureFeatures()
-    // 'depth24unorm-stencil8' // GPUTextureFormat 'depth24unorm-stencil8'
     // 'depth32float-stencil8' // GPUTextureFormat 'depth32float-stencil8'
     // optional WebGL features
     "timer-query-webgl": "EXT_disjoint_timer_query_webgl2",
@@ -2196,17 +2156,18 @@ var __exports__ = (() => {
       return func(gl);
     }
     const { nocatch = true } = parameters;
-    pushContextState(gl);
+    const webglState = WebGLStateTracker.get(gl);
+    webglState.push();
     setGLParameters(gl, parameters);
     let value;
     if (nocatch) {
       value = func(gl);
-      popContextState(gl);
+      webglState.pop();
     } else {
       try {
         value = func(gl);
       } finally {
-        popContextState(gl);
+        webglState.pop();
       }
     }
     return value;
@@ -2225,25 +2186,26 @@ var __exports__ = (() => {
       return func(device);
     }
     const webglDevice = device;
-    pushContextState(webglDevice.gl);
+    webglDevice.pushState();
     try {
       setDeviceParameters(device, parameters);
       setGLParameters(webglDevice.gl, glParameters);
       return func(device);
     } finally {
-      popContextState(webglDevice.gl);
+      webglDevice.popState();
     }
   }
   function withDeviceParameters(device, parameters, func) {
     if (isObjectEmpty3(parameters)) {
       return func(device);
     }
-    pushContextState(device.gl);
+    const webglDevice = device;
+    webglDevice.pushState();
     try {
       setDeviceParameters(device, parameters);
       return func(device);
     } finally {
-      popContextState(device.gl);
+      webglDevice.popState();
     }
   }
   function setDeviceParameters(device, parameters) {
@@ -2371,8 +2333,16 @@ var __exports__ = (() => {
       gl.stencilOpSeparate(1028 /* FRONT */, sfail, dpfail, dppass);
       gl.stencilOpSeparate(1029 /* BACK */, sfail, dpfail, dppass);
     }
+    switch (parameters.blend) {
+      case true:
+        gl.enable(3042 /* BLEND */);
+        break;
+      case false:
+        gl.disable(3042 /* BLEND */);
+        break;
+      default:
+    }
     if (parameters.blendColorOperation || parameters.blendAlphaOperation) {
-      gl.enable(3042 /* BLEND */);
       const colorEquation = convertBlendOperationToEquation(
         "blendColorOperation",
         parameters.blendColorOperation || "add"
@@ -2616,7 +2586,7 @@ var __exports__ = (() => {
     const { dimension, width, height, depth = 0, level = 0 } = options;
     const { x = 0, y = 0, z = 0 } = options;
     const { glFormat, glType } = options;
-    const glTarget = getCubeTargetWebGL(options.glTarget, dimension, depth);
+    const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
     switch (dimension) {
       case "2d-array":
       case "3d":
@@ -2634,7 +2604,7 @@ var __exports__ = (() => {
     const { dimension, width, height, depth = 0, level = 0, byteOffset = 0 } = options;
     const { x = 0, y = 0, z = 0 } = options;
     const { glFormat, glType, compressed } = options;
-    const glTarget = getCubeTargetWebGL(options.glTarget, dimension, depth);
+    const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
     switch (dimension) {
       case "2d-array":
       case "3d":
@@ -2673,7 +2643,7 @@ var __exports__ = (() => {
     }
     throw new Error(dimension);
   }
-  function getCubeTargetWebGL(glTarget, dimension, level) {
+  function getWebGLCubeFaceTarget(glTarget, dimension, level) {
     return dimension === "cube" ? 34069 /* TEXTURE_CUBE_MAP_POSITIVE_X */ + level : glTarget;
   }
 
@@ -2766,7 +2736,7 @@ var __exports__ = (() => {
       const data = props.data;
       let { width, height } = props;
       if (!width || !height) {
-        const textureSize = this.getTextureDataSize(data);
+        const textureSize = import_core7.Texture.getTextureDataSize(data);
         width = textureSize?.width || 1;
         height = textureSize?.height || 1;
       }
@@ -2874,11 +2844,20 @@ var __exports__ = (() => {
       this.gl.bindTexture(this.glTarget, null);
     }
     // Image Data Setters
+    copyExternalImage(options) {
+      const size = import_core7.Texture.getExternalImageSize(options.image);
+      const opts = { ...import_core7.Texture.defaultCopyExternalImageOptions, ...size, ...options };
+      const { depth, mipLevel: lodLevel, image } = opts;
+      this.bind();
+      this._setMipLevel(depth, lodLevel, image);
+      this.unbind();
+      return { width: opts.width, height: opts.height };
+    }
     setTexture1DData(data) {
       throw new Error("setTexture1DData not supported in WebGL.");
     }
     /** Set a simple texture */
-    setTexture2DData(lodData, depth = 0, glTarget = this.glTarget) {
+    setTexture2DData(lodData, depth = 0) {
       this.bind();
       const lodArray = normalizeTextureData(lodData, this);
       if (lodArray.length > 1 && this.props.mipmaps !== false) {
@@ -2899,7 +2878,9 @@ var __exports__ = (() => {
         throw new Error(this.id);
       }
       if (ArrayBuffer.isView(data)) {
+        this.bind();
         copyCPUDataToMipLevel(this.device.gl, data, this);
+        this.unbind();
       }
     }
     /**
@@ -2912,6 +2893,9 @@ var __exports__ = (() => {
       if (this.props.dimension !== "cube") {
         throw new Error(this.id);
       }
+      for (const face of import_core7.Texture.CubeFaces) {
+        this.setTextureCubeFaceData(data[face], face);
+      }
     }
     /**
      * Sets an entire texture array
@@ -2934,8 +2918,8 @@ var __exports__ = (() => {
       if (Array.isArray(lodData) && lodData.length > 1 && this.props.mipmaps !== false) {
         import_core7.log.warn(`${this.id} has mipmap and multiple LODs.`)();
       }
-      this.bind();
-      this.unbind();
+      const faceDepth = import_core7.Texture.CubeFaces.indexOf(face);
+      this.setTexture2DData(lodData, faceDepth);
     }
     // INTERNAL METHODS
     /** @todo update this method to accept LODs */
@@ -3073,16 +3057,17 @@ var __exports__ = (() => {
      * Copy a region of data from a CPU memory buffer into this texture.
      * @todo -   GLUnpackParameters parameters
      */
-    _setMipLevel(depth, level, textureData, offset = 0) {
+    _setMipLevel(depth, level, textureData, glTarget = this.glTarget) {
       if (import_core7.Texture.isExternalImage(textureData)) {
-        copyCPUImageToMipLevel(this.device.gl, textureData, { ...this, depth, level });
+        copyCPUImageToMipLevel(this.device.gl, textureData, { ...this, depth, level, glTarget });
         return;
       }
-      if (this.isTextureLevelData(textureData)) {
+      if (import_core7.Texture.isTextureLevelData(textureData)) {
         copyCPUDataToMipLevel(this.device.gl, textureData.data, {
           ...this,
           depth,
-          level
+          level,
+          glTarget
         });
         return;
       }
@@ -3221,7 +3206,7 @@ var __exports__ = (() => {
       switch (texture.glTarget) {
         case 35866 /* TEXTURE_2D_ARRAY */:
         case 32879 /* TEXTURE_3D */:
-          gl.framebufferTextureLayer(36160 /* FRAMEBUFFER */, attachment, texture.glTarget, level, layer);
+          gl.framebufferTextureLayer(36160 /* FRAMEBUFFER */, attachment, texture.handle, level, layer);
           break;
         case 34067 /* TEXTURE_CUBE_MAP */:
           const face = mapIndexToCubeMapFace(layer);
@@ -3334,17 +3319,21 @@ var __exports__ = (() => {
   }
 
   // src/context/debug/spector.ts
-  var DEFAULT_SPECTOR_PROPS = {
-    spector: import_core10.log.get("spector") || import_core10.log.get("inspect")
-  };
-  var SPECTOR_CDN_URL = "https://spectorcdn.babylonjs.com/spector.bundle.js";
   var LOG_LEVEL = 1;
   var spector = null;
   var initialized = false;
+  var DEFAULT_SPECTOR_PROPS = {
+    debugWithSpectorJS: import_core10.log.get("spector") || import_core10.log.get("spectorjs"),
+    // https://github.com/BabylonJS/Spector.js#basic-usage
+    // https://forum.babylonjs.com/t/spectorcdn-is-temporarily-off/48241
+    // spectorUrl: 'https://spectorcdn.babylonjs.com/spector.bundle.js';
+    spectorUrl: "https://cdn.jsdelivr.net/npm/spectorjs@0.9.30/dist/spector.bundle.js",
+    gl: void 0
+  };
   async function loadSpectorJS(props) {
     if (!globalThis.SPECTOR) {
       try {
-        await loadScript(SPECTOR_CDN_URL);
+        await loadScript(props.spectorUrl || DEFAULT_SPECTOR_PROPS.spectorUrl);
       } catch (error) {
         import_core10.log.warn(String(error));
       }
@@ -3352,12 +3341,13 @@ var __exports__ = (() => {
   }
   function initializeSpectorJS(props) {
     props = { ...DEFAULT_SPECTOR_PROPS, ...props };
-    if (!props?.spector) {
+    if (!props.debugWithSpectorJS) {
       return null;
     }
-    if (!spector && globalThis.SPECTOR) {
-      import_core10.log.probe(LOG_LEVEL, "SPECTOR found and initialized")();
-      spector = new globalThis.SPECTOR.Spector();
+    if (!spector && globalThis.SPECTOR && !globalThis.luma?.spector) {
+      import_core10.log.probe(LOG_LEVEL, "SPECTOR found and initialized. Start with `luma.spector.displayUI()`")();
+      const { Spector } = globalThis.SPECTOR;
+      spector = new Spector();
       if (globalThis.luma) {
         globalThis.luma.spector = spector;
       }
@@ -3378,11 +3368,11 @@ var __exports__ = (() => {
         spector?.resultView.addCapture(capture);
       });
     }
-    if (props?.canvas) {
-      if (typeof props.spector === "string" && props.spector !== props.canvas.id) {
-        return spector;
-      }
-      spector?.startCapture(props?.canvas, 500);
+    if (props.gl) {
+      const gl = props.gl;
+      const device = gl.device;
+      spector?.startCapture(props.gl, 500);
+      gl.device = device;
       new Promise((resolve) => setTimeout(resolve, 2e3)).then((_) => {
         import_core10.log.info("Spector capture stopped after 2 seconds")();
         spector?.stopCapture();
@@ -3541,6 +3531,14 @@ var __exports__ = (() => {
     }
   }
 
+  // src/utils/uid.ts
+  var uidCounters = {};
+  function uid(id = "id") {
+    uidCounters[id] = uidCounters[id] || 1;
+    const count = uidCounters[id]++;
+    return `${id}-${count}`;
+  }
+
   // src/adapter/resources/webgl-buffer.ts
   var import_core12 = __toESM(require_core(), 1);
   var WEBGLBuffer = class extends import_core12.Buffer {
@@ -3743,8 +3741,8 @@ var __exports__ = (() => {
       return this.getCompilationInfoSync();
     }
     getCompilationInfoSync() {
-      const log9 = this.device.gl.getShaderInfoLog(this.handle);
-      return log9 ? parseShaderCompilerLog(log9) : [];
+      const log10 = this.device.gl.getShaderInfoLog(this.handle);
+      return log10 ? parseShaderCompilerLog(log10) : [];
     }
     getTranslatedSource() {
       const extensions = this.device.getExtension("WEBGL_debug_shaders");
@@ -3754,7 +3752,7 @@ var __exports__ = (() => {
     // PRIVATE METHODS
     /** Compile a shader and get compilation status */
     async _compile(source) {
-      const addGLSLVersion = (source2) => source2.startsWith("#version ") ? source2 : `#version 100
+      const addGLSLVersion = (source2) => source2.startsWith("#version ") ? source2 : `#version 300 es
 ${source2}`;
       source = addGLSLVersion(source);
       const { gl } = this.device;
@@ -3819,12 +3817,22 @@ ${source2}`;
     constructor(device, props) {
       super(device, props);
       this.device = device;
-      pushContextState(this.device.gl);
-      this.setParameters(this.props.parameters);
+      let viewport;
+      if (!props?.parameters?.viewport) {
+        if (props?.framebuffer) {
+          const { width, height } = props.framebuffer;
+          viewport = [0, 0, width, height];
+        } else {
+          const [width, height] = device.getCanvasContext().getDrawingBufferSize();
+          viewport = [0, 0, width, height];
+        }
+      }
+      this.device.pushState();
+      this.setParameters({ viewport, ...this.props.parameters });
       this.clear();
     }
     end() {
-      popContextState(this.device.gl);
+      this.device.popState();
     }
     pushDebugGroup(groupLabel) {
     }
@@ -4612,7 +4620,8 @@ ${source2}`;
           const validBindings = this.shaderLayout.bindings.map((binding2) => `"${binding2.name}"`).join(", ");
           if (!options?.disableWarnings) {
             import_core15.log.warn(
-              `Unknown binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`
+              `No binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`,
+              value
             )();
           }
           continue;
@@ -5253,6 +5262,7 @@ ${source2}`;
       } else {
         this.device.gl.vertexAttribPointer(location, size, type, normalized, stride, offset);
       }
+      this.device.gl.bindBuffer(34962 /* ARRAY_BUFFER */, null);
       this.device.gl.enableVertexAttribArray(location);
       this.device.gl.vertexAttribDivisor(location, divisor || 0);
       this.attributes[location] = buffer;
@@ -5432,7 +5442,7 @@ ${source2}`;
     }
     end() {
       this.gl.endTransformFeedback();
-      if (!this.bindOnUse) {
+      if (this.bindOnUse) {
         this._unbindBuffers();
       }
       this.gl.bindTransformFeedback(36386 /* TRANSFORM_FEEDBACK */, null);
@@ -5715,7 +5725,6 @@ ${source2}`;
     const {
       sourceX = 0,
       sourceY = 0,
-      sourceFormat = 6408 /* RGBA */,
       sourceAttachment = 36064 /* COLOR_ATTACHMENT0 */
       // TODO - support gl.readBuffer
     } = options || {};
@@ -5724,15 +5733,19 @@ ${source2}`;
       // following parameters are auto deduced if not provided
       sourceWidth,
       sourceHeight,
+      sourceDepth,
+      sourceFormat,
       sourceType
     } = options || {};
     const { framebuffer, deleteFramebuffer } = getFramebuffer2(source);
     const { gl, handle } = framebuffer;
-    sourceWidth = sourceWidth || framebuffer.width;
-    sourceHeight = sourceHeight || framebuffer.height;
     const attachment = sourceAttachment - 36064 /* COLOR_ATTACHMENT0 */;
-    sourceType = sourceType || framebuffer.colorAttachments[attachment]?.texture?.glType || 5121 /* UNSIGNED_BYTE */;
-    target = getPixelArray(target, sourceType, sourceFormat, sourceWidth, sourceHeight);
+    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);
@@ -5795,7 +5808,7 @@ ${source2}`;
     });
     return framebuffer;
   }
-  function getPixelArray(pixelArray, type, format, width, height) {
+  function getPixelArray(pixelArray, type, format, width, height, depth) {
     if (pixelArray) {
       return pixelArray;
     }
@@ -5841,8 +5854,10 @@ ${source2}`;
   }
 
   // src/adapter/webgl-device.ts
-  var LOG_LEVEL2 = 1;
-  var _WebGLDevice = class extends import_core22.Device {
+  var WebGLDevice = class extends import_core22.Device {
+    //
+    // Public `Device` API
+    //
     /** type of this device */
     type = "webgl";
     /** The underlying WebGL context */
@@ -5853,66 +5868,21 @@ ${source2}`;
     canvasContext;
     lost;
     _resolveContextLost;
-    //
-    // Static methods, expected to be present by `luma.createDevice()`
-    //
-    /** Check if WebGL 2 is available */
-    static isSupported() {
-      return typeof WebGL2RenderingContext !== "undefined";
-    }
-    /**
-     * Get a device instance from a GL context
-     * Creates and instruments the device if not already created
-     * @param gl
-     * @returns
-     */
-    static attach(gl) {
-      if (gl instanceof _WebGLDevice) {
-        return gl;
-      }
-      if (gl?.device instanceof import_core22.Device) {
-        return gl.device;
-      }
-      if (!isWebGL(gl)) {
-        throw new Error("Invalid WebGL2RenderingContext");
-      }
-      return new _WebGLDevice({ gl });
-    }
-    static async create(props = {}) {
-      import_core22.log.groupCollapsed(LOG_LEVEL2, "WebGLDevice created")();
-      const promises = [];
-      if (props.debug) {
-        promises.push(loadWebGLDeveloperTools());
-      }
-      if (props.spector) {
-        promises.push(loadSpectorJS());
-      }
-      if (typeof props.canvas === "string") {
-        promises.push(import_core22.CanvasContext.pageLoaded);
-      }
-      const results = await Promise.allSettled(promises);
-      for (const result of results) {
-        if (result.status === "rejected") {
-          import_core22.log.error(`Failed to initialize debug libraries ${result.reason}`)();
-        }
-      }
-      import_core22.log.probe(LOG_LEVEL2 + 1, "DOM is loaded")();
-      if (props.gl?.device) {
-        import_core22.log.warn("reattaching existing device")();
-        return _WebGLDevice.attach(props.gl);
-      }
-      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_core22.log.probe(LOG_LEVEL2, message2)();
-      import_core22.log.table(LOG_LEVEL2, device.info)();
-      import_core22.log.groupEnd(LOG_LEVEL2)();
-      return device;
-    }
+    /** WebGL2 context. */
+    gl;
+    debug = false;
+    /** State used by luma.gl classes: TODO - move to canvasContext*/
+    _canvasSizeInfo = { clientWidth: 0, clientHeight: 0, devicePixelRatio: 1 };
+    /** State used by luma.gl classes - TODO - not used? */
+    _extensions = {};
+    _polyfilled = false;
+    /** Instance of Spector.js (if initialized) */
+    spectorJS;
     //
     // Public API
     //
     constructor(props) {
-      super({ ...props, id: props.id || "webgl-device" });
+      super({ ...props, id: props.id || uid("webgl-device") });
       const device = props.gl?.device;
       if (device) {
         throw new Error(`WebGL context already attached to device ${device.id}`);
@@ -5922,19 +5892,18 @@ ${source2}`;
       this.lost = new Promise((resolve) => {
         this._resolveContextLost = resolve;
       });
-      let gl = props.gl || null;
-      gl ||= createBrowserContext(this.canvasContext.canvas, {
+      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."
         })
       });
-      if (!gl) {
+      this.gl = this.handle;
+      if (!this.handle) {
         throw new Error("WebGL context creation failed");
       }
-      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);
@@ -5944,21 +5913,16 @@ ${source2}`;
         this.features.initializeFeatures();
       }
       this.canvasContext.resize();
-      const { enable: enable2 = true, copyState = false } = props;
-      trackContextState(this.gl, {
-        enable: enable2,
-        copyState,
+      const glState = new WebGLStateTracker(this.gl, {
         log: (...args) => import_core22.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_core22.log.level = Math.max(import_core22.log.level, 1);
         import_core22.log.warn("WebGL debug mode activated. Performance reduced.")();
       }
-      if (props.spector) {
-        this.spectorJS = initializeSpectorJS({ ...this.props, canvas: this.handle.canvas });
-      }
     }
     /**
      * Destroys the context
@@ -5969,9 +5933,6 @@ ${source2}`;
     get isLost() {
       return this.gl.isContextLost();
     }
-    getSize() {
-      return [this.gl.drawingBufferWidth, this.gl.drawingBufferHeight];
-    }
     isTextureFormatSupported(format) {
       return isTextureFormatSupported(this.gl, format, this._extensions);
     }
@@ -6069,16 +6030,6 @@ ${source2}`;
     //
     // WebGL-only API (not part of `Device` API)
     //
-    /** WebGL2 context. */
-    gl;
-    debug = false;
-    /** State used by luma.gl classes: TODO - move to canvasContext*/
-    _canvasSizeInfo = { clientWidth: 0, clientHeight: 0, devicePixelRatio: 1 };
-    /** State used by luma.gl classes - TODO - not used? */
-    _extensions = {};
-    _polyfilled = false;
-    /** Instance of Spector.js (if initialized) */
-    spectorJS;
     /**
      * Triggers device (or WebGL context) loss.
      * @note primarily intended for testing how application reacts to device loss
@@ -6099,11 +6050,13 @@ ${source2}`;
     }
     /** Save current WebGL context state onto an internal stack */
     pushState() {
-      pushContextState(this.gl);
+      const webglState = WebGLStateTracker.get(this.gl);
+      webglState.push();
     }
     /** Restores previously saved context state */
     popState() {
-      popContextState(this.gl);
+      const webglState = WebGLStateTracker.get(this.gl);
+      webglState.pop();
     }
     /**
      * Storing data on a special field on WebGLObjects makes that data visible in SPECTOR chrome debug extension
@@ -6166,18 +6119,6 @@ ${source2}`;
       return this._extensions;
     }
   };
-  var WebGLDevice = _WebGLDevice;
-  //
-  // Public `Device` API
-  //
-  /** type of this device */
-  __publicField(WebGLDevice, "type", "webgl");
-  function isWebGL(gl) {
-    if (typeof WebGL2RenderingContext !== "undefined" && gl instanceof WebGL2RenderingContext) {
-      return true;
-    }
-    return Boolean(gl && Number.isFinite(gl._version));
-  }
   function setConstantFloatArray(device, location, array) {
     switch (array.length) {
       case 1:
@@ -6212,6 +6153,181 @@ ${source2}`;
     }
     return true;
   }
+
+  // src/context/polyfills/polyfill-webgl1-extensions.ts
+  var WEBGL1_STATIC_EXTENSIONS = {
+    WEBGL_depth_texture: {
+      UNSIGNED_INT_24_8_WEBGL: 34042 /* UNSIGNED_INT_24_8 */
+    },
+    OES_element_index_uint: {},
+    OES_texture_float: {},
+    OES_texture_half_float: {
+      // @ts-expect-error different numbers?
+      HALF_FLOAT_OES: 5131 /* HALF_FLOAT */
+    },
+    EXT_color_buffer_float: {},
+    OES_standard_derivatives: {
+      FRAGMENT_SHADER_DERIVATIVE_HINT_OES: 35723 /* FRAGMENT_SHADER_DERIVATIVE_HINT */
+    },
+    EXT_frag_depth: {},
+    EXT_blend_minmax: {
+      MIN_EXT: 32775 /* MIN */,
+      MAX_EXT: 32776 /* MAX */
+    },
+    EXT_shader_texture_lod: {}
+  };
+  var getWEBGL_draw_buffers = (gl) => ({
+    drawBuffersWEBGL(buffers) {
+      return gl.drawBuffers(buffers);
+    },
+    COLOR_ATTACHMENT0_WEBGL: 36064 /* COLOR_ATTACHMENT0 */,
+    COLOR_ATTACHMENT1_WEBGL: 36065 /* COLOR_ATTACHMENT1 */,
+    COLOR_ATTACHMENT2_WEBGL: 36066 /* COLOR_ATTACHMENT2 */,
+    COLOR_ATTACHMENT3_WEBGL: 36067 /* COLOR_ATTACHMENT3 */
+  });
+  var getOES_vertex_array_object = (gl) => ({
+    VERTEX_ARRAY_BINDING_OES: 34229 /* VERTEX_ARRAY_BINDING */,
+    createVertexArrayOES() {
+      return gl.createVertexArray();
+    },
+    deleteVertexArrayOES(vertexArray) {
+      return gl.deleteVertexArray(vertexArray);
+    },
+    isVertexArrayOES(vertexArray) {
+      return gl.isVertexArray(vertexArray);
+    },
+    bindVertexArrayOES(vertexArray) {
+      return gl.bindVertexArray(vertexArray);
+    }
+  });
+  var getANGLE_instanced_arrays = (gl) => ({
+    VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE: 35070,
+    drawArraysInstancedANGLE(...args) {
+      return gl.drawArraysInstanced(...args);
+    },
+    drawElementsInstancedANGLE(...args) {
+      return gl.drawElementsInstanced(...args);
+    },
+    vertexAttribDivisorANGLE(...args) {
+      return gl.vertexAttribDivisor(...args);
+    }
+  });
+  function enforceWebGL2(enforce = true) {
+    const prototype = HTMLCanvasElement.prototype;
+    if (!enforce && prototype.originalGetContext) {
+      prototype.getContext = prototype.originalGetContext;
+      prototype.originalGetContext = void 0;
+      return;
+    }
+    prototype.originalGetContext = prototype.getContext;
+    prototype.getContext = function(contextId, options) {
+      if (contextId === "webgl" || contextId === "experimental-webgl") {
+        const context = this.originalGetContext("webgl2", options);
+        if (context instanceof HTMLElement) {
+          polyfillWebGL1Extensions(context);
+        }
+        return context;
+      }
+      return this.originalGetContext(contextId, options);
+    };
+  }
+  function polyfillWebGL1Extensions(gl) {
+    gl.getExtension("EXT_color_buffer_float");
+    const boundExtensions = {
+      ...WEBGL1_STATIC_EXTENSIONS,
+      WEBGL_disjoint_timer_query: gl.getExtension("EXT_disjoint_timer_query_webgl2"),
+      WEBGL_draw_buffers: getWEBGL_draw_buffers(gl),
+      OES_vertex_array_object: getOES_vertex_array_object(gl),
+      ANGLE_instanced_arrays: getANGLE_instanced_arrays(gl)
+    };
+    const originalGetExtension = gl.getExtension;
+    gl.getExtension = function(extensionName) {
+      const ext = originalGetExtension.call(gl, extensionName);
+      if (ext) {
+        return ext;
+      }
+      if (extensionName in boundExtensions) {
+        return boundExtensions[extensionName];
+      }
+      return null;
+    };
+    const originalGetSupportedExtensions = gl.getSupportedExtensions;
+    gl.getSupportedExtensions = function() {
+      const extensions = originalGetSupportedExtensions.apply(gl) || [];
+      return extensions?.concat(Object.keys(boundExtensions));
+    };
+  }
+
+  // src/adapter/webgl-adapter.ts
+  var LOG_LEVEL2 = 1;
+  var WebGLAdapter = class extends import_core23.Adapter {
+    /** type of device's created by this adapter */
+    type = "webgl";
+    constructor() {
+      super();
+      import_core23.Device.defaultProps = { ...import_core23.Device.defaultProps, ...DEFAULT_SPECTOR_PROPS };
+      WebGLDevice.adapter = this;
+    }
+    /** Check if WebGL 2 is available */
+    isSupported() {
+      return typeof WebGL2RenderingContext !== "undefined";
+    }
+    /** Force any created WebGL contexts to be WebGL2 contexts, polyfilled with WebGL1 extensions */
+    enforceWebGL2(enable2) {
+      enforceWebGL2(enable2);
+    }
+    /**
+     * Get a device instance from a GL context
+     * Creates and instruments the device if not already created
+     * @param gl
+     * @returns
+     */
+    async attach(gl) {
+      if (gl instanceof WebGLDevice) {
+        return gl;
+      }
+      if (gl?.device instanceof import_core23.Device) {
+        return gl.device;
+      }
+      if (!isWebGL(gl)) {
+        throw new Error("Invalid WebGL2RenderingContext");
+      }
+      return new WebGLDevice({ gl });
+    }
+    async create(props = {}) {
+      import_core23.log.groupCollapsed(LOG_LEVEL2, "WebGLDevice created")();
+      const promises = [];
+      if (props.debug) {
+        promises.push(loadWebGLDeveloperTools());
+      }
+      if (props.debugWithSpectorJS) {
+        promises.push(loadSpectorJS(props));
+      }
+      if (typeof props.canvas === "string") {
+        promises.push(import_core23.CanvasContext.pageLoaded);
+      }
+      const results = await Promise.allSettled(promises);
+      for (const result of results) {
+        if (result.status === "rejected") {
+          import_core23.log.error(`Failed to initialize debug libraries ${result.reason}`)();
+        }
+      }
+      import_core23.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_core23.log.probe(LOG_LEVEL2, message2)();
+      import_core23.log.table(LOG_LEVEL2, device.info)();
+      import_core23.log.groupEnd(LOG_LEVEL2)();
+      return device;
+    }
+  };
+  function isWebGL(gl) {
+    if (typeof WebGL2RenderingContext !== "undefined" && gl instanceof WebGL2RenderingContext) {
+      return true;
+    }
+    return Boolean(gl && Number.isFinite(gl._version));
+  }
+  var webgl2Adapter = new WebGLAdapter();
   return __toCommonJS(bundle_exports);
 })();
       return __exports__;