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

package/dist/index.cjs

@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 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 __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 
 // dist/index.js
 var dist_exports = {};
@@ -37,20 +32,22 @@ __export(dist_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
 });
 module.exports = __toCommonJS(dist_exports);
 
+// dist/adapter/webgl-adapter.js
+var import_core23 = require("@luma.gl/core");
+
 // dist/adapter/webgl-device.js
 var import_core22 = require("@luma.gl/core");
 
@@ -594,24 +591,22 @@ function deepArrayEqual(x, y) {
   return false;
 }
 
-// dist/context/state-tracker/track-context-state.js
-var GLState = class {
+// dist/context/state-tracker/webgl-state-tracker.js
+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 == null ? void 0 : props.log) || (() => {
+    });
     this._updateCache = this._updateCache.bind(this);
     Object.seal(this);
   }
@@ -623,6 +618,29 @@ var GLState = class {
     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
@@ -648,44 +666,13 @@ var GLState = class {
     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);
     }
@@ -708,7 +695,7 @@ function installSetterSpy(gl, functionName, setter) {
   }
   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);
@@ -723,7 +710,7 @@ function installSetterSpy(gl, functionName, setter) {
 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;
@@ -941,26 +928,6 @@ function checkTextureFeature(gl, feature, extensions) {
   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,
-    b: 4,
-    c: 2,
-    bpp: 4,
-    dataFormat: 6407,
-    types: [5121, 33635]
-  },
-  "rgba8unorm-unsized": {
-    gl: 6408,
-    b: 4,
-    c: 2,
-    bpp: 4,
-    dataFormat: 6408,
-    types: [5121, 32819, 32820]
-  },
-  // '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, b: 1, c: 1, rb: true },
   "r8snorm": { gl: 36756, b: 1, c: 1, render: snorm8_renderable },
@@ -1075,17 +1042,6 @@ var TEXTURE_FORMATS = {
     dataFormat: 34041,
     types: [34042]
   },
-  // "depth24unorm-stencil8" feature
-  "depth24unorm-stencil8": {
-    gl: 35056,
-    b: 4,
-    c: 2,
-    p: 1,
-    attachment: 33306,
-    dataFormat: 34041,
-    types: [34042],
-    rb: true
-  },
   // "depth32float-stencil8" feature - TODO below is render buffer only?
   "depth32float-stencil8": {
     gl: 36013,
@@ -1175,6 +1131,10 @@ function isTextureFormatSupported(gl, format, extensions) {
   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));
@@ -1220,11 +1180,10 @@ function getTextureFormatWebGL(format) {
   const decoded = (0, import_core.decodeTextureFormat)(format);
   return {
     internalFormat: webglFormat,
-    format: (formatData == null ? void 0 : formatData.dataFormat) || getWebGLPixelDataFormat(decoded.format, decoded.integer, decoded.normalized, webglFormat),
+    format: (formatData == null ? void 0 : formatData.dataFormat) || getWebGLPixelDataFormat(decoded.channels, decoded.integer, decoded.normalized, webglFormat),
     // depth formats don't have a type
     type: decoded.dataType ? getGLFromVertexType(decoded.dataType) : ((_a = formatData == null ? void 0 : formatData.types) == null ? void 0 : _a[0]) || 5121,
-    // @ts-expect-error
-    compressed: decoded.compressed
+    compressed: decoded.compressed || false
   };
 }
 function getDepthStencilAttachmentWebGL(format) {
@@ -1234,11 +1193,11 @@ function getDepthStencilAttachmentWebGL(format) {
   }
   return info.attachment;
 }
-function getWebGLPixelDataFormat(dataFormat, integer, normalized, format) {
+function getWebGLPixelDataFormat(channels, integer, normalized, format) {
   if (format === 6408 || format === 6407) {
     return format;
   }
-  switch (dataFormat) {
+  switch (channels) {
     case "r":
       return integer && !normalized ? 36244 : 6403;
     case "rg":
@@ -1247,6 +1206,8 @@ function getWebGLPixelDataFormat(dataFormat, integer, normalized, format) {
       return integer && !normalized ? 36248 : 6407;
     case "rgba":
       return integer && !normalized ? 36249 : 6408;
+    case "bgra":
+      throw new Error("bgra pixels not supported by WebGL");
     default:
       return 6408;
   }
@@ -1268,7 +1229,6 @@ var WEBGL_FEATURES = {
   // '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",
@@ -1462,17 +1422,18 @@ function withGLParameters(gl, parameters, func) {
     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;
@@ -1495,25 +1456,26 @@ function withDeviceAndGLParameters(device, parameters, glParameters, func) {
     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) {
@@ -1632,8 +1594,16 @@ function setDeviceParameters(device, parameters) {
     gl.stencilOpSeparate(1028, sfail, dpfail, dppass);
     gl.stencilOpSeparate(1029, sfail, dpfail, dppass);
   }
+  switch (parameters.blend) {
+    case true:
+      gl.enable(3042);
+      break;
+    case false:
+      gl.disable(3042);
+      break;
+    default:
+  }
   if (parameters.blendColorOperation || parameters.blendAlphaOperation) {
-    gl.enable(3042);
     const colorEquation = convertBlendOperationToEquation("blendColorOperation", parameters.blendColorOperation || "add");
     const alphaEquation = convertBlendOperationToEquation("blendAlphaOperation", parameters.blendAlphaOperation || "add");
     gl.blendEquationSeparate(colorEquation, alphaEquation);
@@ -1858,7 +1828,7 @@ function copyCPUImageToMipLevel(gl, image, options) {
   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":
@@ -1876,7 +1846,7 @@ function copyCPUDataToMipLevel(gl, typedArray, options) {
   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":
@@ -1915,7 +1885,7 @@ function getWebGLTextureTarget(dimension) {
   }
   throw new Error(dimension);
 }
-function getCubeTargetWebGL(glTarget, dimension, level) {
+function getWebGLCubeFaceTarget(glTarget, dimension, level) {
   return dimension === "cube" ? 34069 + level : glTarget;
 }
 
@@ -2120,7 +2090,7 @@ var WEBGLTexture = class extends import_core7.Texture {
     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) {
@@ -2141,7 +2111,9 @@ var WEBGLTexture = class extends import_core7.Texture {
       throw new Error(this.id);
     }
     if (ArrayBuffer.isView(data)) {
+      this.bind();
       copyCPUDataToMipLevel(this.device.gl, data, this);
+      this.unbind();
     }
   }
   /**
@@ -2154,6 +2126,9 @@ var WEBGLTexture = class extends import_core7.Texture {
     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
@@ -2176,8 +2151,8 @@ var WEBGLTexture = class extends import_core7.Texture {
     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 */
@@ -2311,16 +2286,17 @@ var WEBGLTexture = class extends import_core7.Texture {
    * 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)) {
       copyCPUDataToMipLevel(this.device.gl, textureData.data, {
         ...this,
         depth,
-        level
+        level,
+        glTarget
       });
       return;
     }
@@ -2453,7 +2429,7 @@ var WEBGLFramebuffer = class extends import_core8.Framebuffer {
     switch (texture.glTarget) {
       case 35866:
       case 32879:
-        gl.framebufferTextureLayer(36160, attachment, texture.glTarget, level, layer);
+        gl.framebufferTextureLayer(36160, attachment, texture.handle, level, layer);
         break;
       case 34067:
         const face = mapIndexToCubeMapFace(layer);
@@ -2566,30 +2542,36 @@ async function loadScript(scriptUrl, scriptId) {
 }
 
 // dist/context/debug/spector.js
-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));
     }
   }
 }
 function initializeSpectorJS(props) {
+  var _a;
   props = { ...DEFAULT_SPECTOR_PROPS, ...props };
-  if (!(props == null ? void 0 : 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 && !((_a = globalThis.luma) == null ? void 0 : _a.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;
     }
@@ -2608,11 +2590,11 @@ function initializeSpectorJS(props) {
       spector == null ? void 0 : spector.resultView.addCapture(capture);
     });
   }
-  if (props == null ? void 0 : props.canvas) {
-    if (typeof props.spector === "string" && props.spector !== props.canvas.id) {
-      return spector;
-    }
-    spector == null ? void 0 : spector.startCapture(props == null ? void 0 : props.canvas, 500);
+  if (props.gl) {
+    const gl = props.gl;
+    const device = gl.device;
+    spector == null ? void 0 : 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 == null ? void 0 : spector.stopCapture();
@@ -2713,6 +2695,14 @@ function onValidateGLFunc(props, functionName, functionArgs) {
   }
 }
 
+// dist/utils/uid.js
+var uidCounters = {};
+function uid(id = "id") {
+  uidCounters[id] = uidCounters[id] || 1;
+  const count = uidCounters[id]++;
+  return `${id}-${count}`;
+}
+
 // dist/adapter/resources/webgl-buffer.js
 var import_core12 = require("@luma.gl/core");
 var import_constants13 = require("@luma.gl/constants");
@@ -2917,8 +2907,8 @@ var WEBGLShader = class extends import_core13.Shader {
     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");
@@ -2928,7 +2918,7 @@ var WEBGLShader = class extends import_core13.Shader {
   // 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;
@@ -2992,14 +2982,25 @@ var WEBGLRenderPass = class extends import_core14.RenderPass {
   /** Parameters that should be applied before each draw call */
   glParameters;
   constructor(device, props) {
+    var _a;
     super(device, props);
     this.device = device;
-    pushContextState(this.device.gl);
-    this.setParameters(this.props.parameters);
+    let viewport;
+    if (!((_a = props == null ? void 0 : props.parameters) == null ? void 0 : _a.viewport)) {
+      if (props == null ? void 0 : 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) {
   }
@@ -3767,7 +3768,7 @@ var WEBGLRenderPipeline = class extends import_core15.RenderPipeline {
       if (!binding) {
         const validBindings = this.shaderLayout.bindings.map((binding2) => `"${binding2.name}"`).join(", ");
         if (!(options == null ? void 0 : options.disableWarnings)) {
-          import_core15.log.warn(`Unknown binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`)();
+          import_core15.log.warn(`No binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`, value)();
         }
         continue;
       }
@@ -4364,6 +4365,7 @@ var WEBGLVertexArray = class extends import_core18.VertexArray {
     } else {
       this.device.gl.vertexAttribPointer(location, size, type, normalized, stride, offset);
     }
+    this.device.gl.bindBuffer(34962, null);
     this.device.gl.enableVertexAttribArray(location);
     this.device.gl.vertexAttribDivisor(location, divisor || 0);
     this.attributes[location] = buffer;
@@ -4542,7 +4544,7 @@ var WEBGLTransformFeedback = class extends import_core19.TransformFeedback {
   }
   end() {
     this.gl.endTransformFeedback();
-    if (!this.bindOnUse) {
+    if (this.bindOnUse) {
       this._unbindBuffers();
     }
     this.gl.bindTransformFeedback(36386, null);
@@ -4820,11 +4822,10 @@ function glTypeToBytes(type) {
 
 // dist/classic/copy-and-blit.js
 function readPixelsToArray(source, options) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f;
   const {
     sourceX = 0,
     sourceY = 0,
-    sourceFormat = 6408,
     sourceAttachment = 36064
     // TODO - support gl.readBuffer
   } = options || {};
@@ -4833,15 +4834,19 @@ function readPixelsToArray(source, options) {
     // 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;
-  sourceType = sourceType || ((_b = (_a = framebuffer.colorAttachments[attachment]) == null ? void 0 : _a.texture) == null ? void 0 : _b.glType) || 5121;
-  target = getPixelArray(target, sourceType, sourceFormat, sourceWidth, sourceHeight);
+  sourceWidth ||= framebuffer.width;
+  sourceHeight ||= framebuffer.height;
+  sourceDepth = ((_b = (_a = framebuffer.colorAttachments[attachment]) == null ? void 0 : _a.texture) == null ? void 0 : _b.depth) || 1;
+  sourceFormat ||= ((_d = (_c = framebuffer.colorAttachments[attachment]) == null ? void 0 : _c.texture) == null ? void 0 : _d.glFormat) || 6408;
+  sourceType ||= ((_f = (_e = framebuffer.colorAttachments[attachment]) == null ? void 0 : _e.texture) == null ? void 0 : _f.glType) || 5121;
+  target = getPixelArray(target, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
   sourceType = sourceType || getGLTypeFromTypedArray(target);
   const prevHandle = gl.bindFramebuffer(36160, handle);
   gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target);
@@ -4898,7 +4903,7 @@ function toFramebuffer(texture, props) {
   });
   return framebuffer;
 }
-function getPixelArray(pixelArray, type, format, width, height) {
+function getPixelArray(pixelArray, type, format, width, height, depth) {
   if (pixelArray) {
     return pixelArray;
   }
@@ -4944,8 +4949,10 @@ function clear(device, options) {
 }
 
 // dist/adapter/webgl-device.js
-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 */
@@ -4956,68 +4963,22 @@ var _WebGLDevice = class extends import_core22.Device {
   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 == null ? void 0 : 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 = {}) {
-    var _a;
-    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 ((_a = props.gl) == null ? void 0 : _a.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) {
     var _a, _b;
-    super({ ...props, id: props.id || "webgl-device" });
+    super({ ...props, id: props.id || uid("webgl-device") });
     const device = (_a = props.gl) == null ? void 0 : _a.device;
     if (device) {
       throw new Error(`WebGL context already attached to device ${device.id}`);
@@ -5027,8 +4988,7 @@ var _WebGLDevice = class extends import_core22.Device {
     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) => {
         var _a2;
@@ -5038,11 +4998,11 @@ var _WebGLDevice = class extends import_core22.Device {
         });
       }
     });
-    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);
@@ -5052,21 +5012,16 @@ var _WebGLDevice = class extends import_core22.Device {
       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
@@ -5077,9 +5032,6 @@ var _WebGLDevice = class extends import_core22.Device {
   get isLost() {
     return this.gl.isContextLost();
   }
-  getSize() {
-    return [this.gl.drawingBufferWidth, this.gl.drawingBufferHeight];
-  }
   isTextureFormatSupported(format) {
     return isTextureFormatSupported(this.gl, format, this._extensions);
   }
@@ -5178,16 +5130,6 @@ var _WebGLDevice = class extends import_core22.Device {
   //
   // 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
@@ -5209,11 +5151,13 @@ var _WebGLDevice = class extends import_core22.Device {
   }
   /** 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
@@ -5273,18 +5217,6 @@ var _WebGLDevice = class extends import_core22.Device {
     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:
@@ -5319,4 +5251,180 @@ function compareConstantArrayValues2(v1, v2) {
   }
   return true;
 }
+
+// dist/context/polyfills/polyfill-webgl1-extensions.js
+var import_constants29 = require("@luma.gl/constants");
+var WEBGL1_STATIC_EXTENSIONS = {
+  WEBGL_depth_texture: {
+    UNSIGNED_INT_24_8_WEBGL: 34042
+  },
+  OES_element_index_uint: {},
+  OES_texture_float: {},
+  OES_texture_half_float: {
+    // @ts-expect-error different numbers?
+    HALF_FLOAT_OES: 5131
+  },
+  EXT_color_buffer_float: {},
+  OES_standard_derivatives: {
+    FRAGMENT_SHADER_DERIVATIVE_HINT_OES: 35723
+  },
+  EXT_frag_depth: {},
+  EXT_blend_minmax: {
+    MIN_EXT: 32775,
+    MAX_EXT: 32776
+  },
+  EXT_shader_texture_lod: {}
+};
+var getWEBGL_draw_buffers = (gl) => ({
+  drawBuffersWEBGL(buffers) {
+    return gl.drawBuffers(buffers);
+  },
+  COLOR_ATTACHMENT0_WEBGL: 36064,
+  COLOR_ATTACHMENT1_WEBGL: 36065,
+  COLOR_ATTACHMENT2_WEBGL: 36066,
+  COLOR_ATTACHMENT3_WEBGL: 36067
+});
+var getOES_vertex_array_object = (gl) => ({
+  VERTEX_ARRAY_BINDING_OES: 34229,
+  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 == null ? void 0 : extensions.concat(Object.keys(boundExtensions));
+  };
+}
+
+// dist/adapter/webgl-adapter.js
+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 == null ? void 0 : 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();
 //# sourceMappingURL=index.cjs.map