@luma.gl/webgl 9.2.6 → 9.3.0-alpha.4

package/dist/index.cjs

@@ -155,6 +155,24 @@ var init_load_script = __esm({
   }
 });
 
+// dist/context/helpers/webgl-context-data.js
+function getWebGLContextData(gl) {
+  const contextData = gl.luma || {
+    _polyfilled: false,
+    extensions: {},
+    softwareRenderer: false
+  };
+  contextData._polyfilled ??= false;
+  contextData.extensions ||= {};
+  gl.luma = contextData;
+  return contextData;
+}
+var init_webgl_context_data = __esm({
+  "dist/context/helpers/webgl-context-data.js"() {
+    "use strict";
+  }
+});
+
 // dist/context/debug/spector.js
 async function loadSpectorJS(props) {
   if (!globalThis.SPECTOR) {
@@ -195,9 +213,10 @@ function initializeSpectorJS(props) {
   }
   if (props.gl) {
     const gl = props.gl;
-    const device = gl.device;
+    const contextData = getWebGLContextData(gl);
+    const device = contextData.device;
     spector == null ? void 0 : spector.startCapture(props.gl, 500);
-    gl.device = device;
+    contextData.device = device;
     new Promise((resolve) => setTimeout(resolve, 2e3)).then((_) => {
       import_core.log.info("Spector capture stopped after 2 seconds")();
       spector == null ? void 0 : spector.stopCapture();
@@ -211,6 +230,7 @@ var init_spector = __esm({
     "use strict";
     import_core = require("@luma.gl/core");
     init_load_script();
+    init_webgl_context_data();
     LOG_LEVEL = 1;
     spector = null;
     initialized = false;
@@ -226,7 +246,7 @@ var init_spector = __esm({
 });
 
 // dist/context/debug/webgl-developer-tools.js
-function getWebGLContextData(gl) {
+function getWebGLContextData2(gl) {
   gl.luma = gl.luma || {};
   return gl.luma;
 }
@@ -241,7 +261,7 @@ function makeDebugContext(gl, props = {}) {
   return props.debugWebGL || props.traceWebGL ? getDebugContext(gl, props) : getRealContext(gl);
 }
 function getRealContext(gl) {
-  const data = getWebGLContextData(gl);
+  const data = getWebGLContextData2(gl);
   return data.realContext ? data.realContext : gl;
 }
 function getDebugContext(gl, props) {
@@ -249,7 +269,7 @@ function getDebugContext(gl, props) {
     import_core2.log.warn("webgl-debug not loaded")();
     return gl;
   }
-  const data = getWebGLContextData(gl);
+  const data = getWebGLContextData2(gl);
   if (data.debugContext) {
     return data.debugContext;
   }
@@ -267,6 +287,7 @@ function getDebugContext(gl, props) {
   const debugContext = Object.create(WebGLDebugContext);
   data.realContext = gl;
   data.debugContext = debugContext;
+  debugContext.luma = data;
   debugContext.debug = true;
   return debugContext;
 }
@@ -281,16 +302,15 @@ function onGLError(props, err, functionName, args) {
   const errorMessage = globalThis.WebGLDebugUtils.glEnumToString(err);
   const functionArgs = globalThis.WebGLDebugUtils.glFunctionArgsToString(functionName, args);
   const message2 = `${errorMessage} in gl.${functionName}(${functionArgs})`;
-  import_core2.log.error(message2)();
+  import_core2.log.error("%cWebGL", "color: white; background: red; padding: 2px 6px; border-radius: 3px;", message2)();
   debugger;
+  throw new Error(message2);
 }
 function onValidateGLFunc(props, functionName, functionArgs) {
   let functionString = "";
-  if (import_core2.log.level >= 1) {
+  if (props.traceWebGL && import_core2.log.level >= 1) {
     functionString = getFunctionString(functionName, functionArgs);
-    if (props.traceWebGL) {
-      import_core2.log.log(1, functionString)();
-    }
+    import_core2.log.info(1, "%cWebGL", "color: white; background: blue; padding: 2px 6px; border-radius: 3px;", functionString)();
   }
   for (const arg of functionArgs) {
     if (arg === void 0) {
@@ -792,6 +812,7 @@ var init_webgl_parameter_tables = __esm({
 
 // dist/context/parameters/unified-parameter-api.js
 function setGLParameters(gl, parameters) {
+  var _a;
   if (isObjectEmpty(parameters)) {
     return;
   }
@@ -807,7 +828,7 @@ function setGLParameters(gl, parameters) {
       }
     }
   }
-  const cache = gl.state && gl.state.cache;
+  const cache = (_a = gl.lumaState) == null ? void 0 : _a.cache;
   if (cache) {
     for (const key in compositeSetters) {
       const compositeSetter = GL_COMPOSITE_PARAMETER_SETTERS[key];
@@ -930,7 +951,7 @@ var init_webgl_state_tracker = __esm({
     init_webgl_parameter_tables();
     WebGLStateTracker = class {
       static get(gl) {
-        return gl.state;
+        return gl.lumaState;
       }
       gl;
       program = null;
@@ -968,7 +989,7 @@ var init_webgl_state_tracker = __esm({
           throw new Error("WebGLStateTracker");
         }
         this.initialized = true;
-        this.gl.state = this;
+        this.gl.lumaState = this;
         installProgramSpy(gl);
         for (const key in GL_HOOKED_SETTERS) {
           const setter = GL_HOOKED_SETTERS[key];
@@ -1008,42 +1029,57 @@ var init_webgl_state_tracker = __esm({
 // dist/context/helpers/create-browser-context.js
 function createBrowserContext(canvas, props, webglContextAttributes) {
   let errorMessage = "";
+  const onCreateError = (event) => {
+    const statusMessage = event.statusMessage;
+    if (statusMessage) {
+      errorMessage ||= statusMessage;
+    }
+  };
+  canvas.addEventListener("webglcontextcreationerror", onCreateError, false);
+  const allowSoftwareRenderer = webglContextAttributes.failIfMajorPerformanceCaveat !== true;
   const webglProps = {
     preserveDrawingBuffer: true,
-    // failIfMajorPerformanceCaveat: true,
-    ...webglContextAttributes
+    ...webglContextAttributes,
+    // Always start by requesting a high-performance context.
+    failIfMajorPerformanceCaveat: true
   };
   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("webgl2", webglProps);
-    gl.luma ||= {};
-    gl.luma.softwareRenderer = true;
-  }
-  if (!gl) {
-    gl = canvas.getContext("webgl", {});
-    if (gl) {
-      gl = null;
-      errorMessage ||= "Your browser only supports WebGL1";
+  try {
+    gl ||= canvas.getContext("webgl2", webglProps);
+    if (!gl && webglProps.failIfMajorPerformanceCaveat) {
+      errorMessage ||= "Only software GPU is available. Set `failIfMajorPerformanceCaveat: false` to allow.";
     }
+    let softwareRenderer = false;
+    if (!gl && allowSoftwareRenderer) {
+      webglProps.failIfMajorPerformanceCaveat = false;
+      gl = canvas.getContext("webgl2", webglProps);
+      softwareRenderer = true;
+    }
+    if (!gl) {
+      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 luma = getWebGLContextData(gl);
+    luma.softwareRenderer = softwareRenderer;
+    const { onContextLost, onContextRestored } = props;
+    canvas.addEventListener("webglcontextlost", (event) => onContextLost(event), false);
+    canvas.addEventListener("webglcontextrestored", (event) => onContextRestored(event), false);
+    return gl;
+  } finally {
+    canvas.removeEventListener("webglcontextcreationerror", onCreateError, false);
   }
-  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;
 }
 var init_create_browser_context = __esm({
   "dist/context/helpers/create-browser-context.js"() {
     "use strict";
+    init_webgl_context_data();
   }
 });
 
@@ -1794,14 +1830,25 @@ var init_webgl_canvas_context = __esm({
         super(props);
         this.device = device;
         this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
-        this._updateDevice();
-      }
-      getCurrentFramebuffer() {
-        this._framebuffer = this._framebuffer || new WEBGLFramebuffer(this.device, { handle: null });
-        return this._framebuffer;
+        this._configureDevice();
       }
       // IMPLEMENTATION OF ABSTRACT METHODS
-      _updateDevice() {
+      _configureDevice() {
+        var _a, _b, _c;
+        const shouldResize = this.drawingBufferWidth !== ((_a = this._framebuffer) == null ? void 0 : _a.width) || this.drawingBufferHeight !== ((_b = this._framebuffer) == null ? void 0 : _b.height);
+        if (shouldResize) {
+          (_c = this._framebuffer) == null ? void 0 : _c.resize([this.drawingBufferWidth, this.drawingBufferHeight]);
+        }
+      }
+      _getCurrentFramebuffer() {
+        this._framebuffer ||= new WEBGLFramebuffer(this.device, {
+          id: "canvas-context-framebuffer",
+          handle: null,
+          // Setting handle to null returns a reference to the default WebGL framebuffer
+          width: this.drawingBufferWidth,
+          height: this.drawingBufferHeight
+        });
+        return this._framebuffer;
       }
     };
   }
@@ -1963,15 +2010,27 @@ var init_webgl_buffer = __esm({
 
 // dist/adapter/helpers/parse-shader-compiler-log.js
 function parseShaderCompilerLog(errLog) {
+  var _a;
   const lines = errLog.split(/\r?\n/);
   const messages = [];
   for (const line of lines) {
     if (line.length <= 1) {
       continue;
     }
+    const lineWithTrimmedWhitespace = line.trim();
     const segments = line.split(":");
+    const trimmedMessageType = (_a = segments[0]) == null ? void 0 : _a.trim();
     if (segments.length === 2) {
       const [messageType2, message2] = segments;
+      if (!messageType2 || !message2) {
+        messages.push({
+          message: lineWithTrimmedWhitespace,
+          type: getMessageType(trimmedMessageType || "info"),
+          lineNum: 0,
+          linePos: 0
+        });
+        continue;
+      }
       messages.push({
         message: message2.trim(),
         type: getMessageType(messageType2),
@@ -1981,6 +2040,15 @@ function parseShaderCompilerLog(errLog) {
       continue;
     }
     const [messageType, linePosition, lineNumber, ...rest] = segments;
+    if (!messageType || !linePosition || !lineNumber) {
+      messages.push({
+        message: segments.slice(1).join(":").trim() || lineWithTrimmedWhitespace,
+        type: getMessageType(trimmedMessageType || "info"),
+        lineNum: 0,
+        linePos: 0
+      });
+      continue;
+    }
     let lineNum = parseInt(lineNumber, 10);
     if (isNaN(lineNum)) {
       lineNum = 0;
@@ -2562,6 +2630,119 @@ var init_webgl_texture_view = __esm({
   }
 });
 
+// dist/adapter/converters/webgl-shadertypes.js
+function convertDataTypeToGLDataType(normalizedType) {
+  return NORMALIZED_SHADER_TYPE_TO_WEBGL[normalizedType];
+}
+function convertGLUniformTypeToShaderVariableType(glUniformType) {
+  return WEBGL_SHADER_TYPES[glUniformType];
+}
+function isGLSamplerType(type) {
+  return Boolean(WEBGL_SAMPLER_TO_TEXTURE_BINDINGS[type]);
+}
+function getTextureBindingFromGLSamplerType(glSamplerType) {
+  return WEBGL_SAMPLER_TO_TEXTURE_BINDINGS[glSamplerType];
+}
+var import_constants14, WEBGL_SHADER_TYPES, WEBGL_SAMPLER_TO_TEXTURE_BINDINGS, NORMALIZED_SHADER_TYPE_TO_WEBGL;
+var init_webgl_shadertypes = __esm({
+  "dist/adapter/converters/webgl-shadertypes.js"() {
+    "use strict";
+    import_constants14 = require("@luma.gl/constants");
+    WEBGL_SHADER_TYPES = {
+      [5126]: "f32",
+      [35664]: "vec2<f32>",
+      [35665]: "vec3<f32>",
+      [35666]: "vec4<f32>",
+      [5124]: "i32",
+      [35667]: "vec2<i32>",
+      [35668]: "vec3<i32>",
+      [35669]: "vec4<i32>",
+      [5125]: "u32",
+      [36294]: "vec2<u32>",
+      [36295]: "vec3<u32>",
+      [36296]: "vec4<u32>",
+      [35670]: "f32",
+      [35671]: "vec2<f32>",
+      [35672]: "vec3<f32>",
+      [35673]: "vec4<f32>",
+      // TODO - are sizes/components below correct?
+      [35674]: "mat2x2<f32>",
+      [35685]: "mat2x3<f32>",
+      [35686]: "mat2x4<f32>",
+      [35687]: "mat3x2<f32>",
+      [35675]: "mat3x3<f32>",
+      [35688]: "mat3x4<f32>",
+      [35689]: "mat4x2<f32>",
+      [35690]: "mat4x3<f32>",
+      [35676]: "mat4x4<f32>"
+    };
+    WEBGL_SAMPLER_TO_TEXTURE_BINDINGS = {
+      [35678]: { viewDimension: "2d", sampleType: "float" },
+      [35680]: { viewDimension: "cube", sampleType: "float" },
+      [35679]: { viewDimension: "3d", sampleType: "float" },
+      [35682]: { viewDimension: "3d", sampleType: "depth" },
+      [36289]: { viewDimension: "2d-array", sampleType: "float" },
+      [36292]: { viewDimension: "2d-array", sampleType: "depth" },
+      [36293]: { viewDimension: "cube", sampleType: "float" },
+      [36298]: { viewDimension: "2d", sampleType: "sint" },
+      [36299]: { viewDimension: "3d", sampleType: "sint" },
+      [36300]: { viewDimension: "cube", sampleType: "sint" },
+      [36303]: { viewDimension: "2d-array", sampleType: "uint" },
+      [36306]: { viewDimension: "2d", sampleType: "uint" },
+      [36307]: { viewDimension: "3d", sampleType: "uint" },
+      [36308]: { viewDimension: "cube", sampleType: "uint" },
+      [36311]: { viewDimension: "2d-array", sampleType: "uint" }
+    };
+    NORMALIZED_SHADER_TYPE_TO_WEBGL = {
+      uint8: 5121,
+      sint8: 5120,
+      unorm8: 5121,
+      snorm8: 5120,
+      uint16: 5123,
+      sint16: 5122,
+      unorm16: 5123,
+      snorm16: 5122,
+      uint32: 5125,
+      sint32: 5124,
+      // WebGPU does not support normalized 32 bit integer attributes
+      //  'unorm32': GL.UNSIGNED_INT,
+      //  'snorm32': GL.INT,
+      float16: 5131,
+      float32: 5126
+    };
+  }
+});
+
+// dist/adapter/converters/shader-formats.js
+function convertGLDataTypeToDataType(type) {
+  return GL_DATA_TYPE_MAP[type];
+}
+var import_constants15, GL_DATA_TYPE_MAP;
+var init_shader_formats = __esm({
+  "dist/adapter/converters/shader-formats.js"() {
+    "use strict";
+    import_constants15 = require("@luma.gl/constants");
+    GL_DATA_TYPE_MAP = {
+      [5124]: "sint32",
+      [5125]: "uint32",
+      [5122]: "sint16",
+      [5123]: "uint16",
+      [5120]: "sint8",
+      [5121]: "uint8",
+      [5126]: "float32",
+      [5131]: "float16",
+      [33635]: "uint16",
+      [32819]: "uint16",
+      [32820]: "uint16",
+      [33640]: "uint32",
+      [35899]: "uint32",
+      [35902]: "uint32",
+      [34042]: "uint32",
+      [36269]: "uint32"
+    };
+  }
+});
+
 // dist/adapter/resources/webgl-texture.js
 function getWebGLTextureTarget(dimension) {
   switch (dimension) {
@@ -2583,16 +2764,19 @@ function getWebGLTextureTarget(dimension) {
 function getWebGLCubeFaceTarget(glTarget, dimension, level) {
   return dimension === "cube" ? 34069 + level : glTarget;
 }
-var import_core13, import_constants14, WEBGLTexture;
+var import_core13, import_constants16, import_core14, WEBGLTexture;
 var init_webgl_texture = __esm({
   "dist/adapter/resources/webgl-texture.js"() {
     "use strict";
     import_core13 = require("@luma.gl/core");
-    import_constants14 = require("@luma.gl/constants");
+    import_constants16 = require("@luma.gl/constants");
     init_webgl_texture_table();
     init_sampler_parameters();
     init_with_parameters();
     init_webgl_texture_view();
+    init_webgl_shadertypes();
+    init_shader_formats();
+    import_core14 = require("@luma.gl/core");
     WEBGLTexture = class extends import_core13.Texture {
       // readonly MAX_ATTRIBUTES: number;
       device;
@@ -2622,8 +2806,10 @@ var init_webgl_texture = __esm({
       // state
       /** Texture binding slot - TODO - move to texture view? */
       _textureUnit = 0;
+      /** Chached framebuffer */
+      _framebuffer = null;
       constructor(device, props) {
-        super(device, props);
+        super(device, props, { byteAlignment: 1 });
         this.device = device;
         this.gl = this.device.gl;
         const formatInfo = getTextureFormatWebGL(this.props.format);
@@ -2655,7 +2841,10 @@ var init_webgl_texture = __esm({
         Object.seal(this);
       }
       destroy() {
+        var _a;
         if (this.handle) {
+          (_a = this._framebuffer) == null ? void 0 : _a.destroy();
+          this._framebuffer = null;
           this.gl.deleteTexture(this.handle);
           this.removeStats();
           this.trackDeallocatedMemory("Texture");
@@ -2670,11 +2859,37 @@ var init_webgl_texture = __esm({
         const parameters = convertSamplerParametersToWebGL(this.sampler.props);
         this._setSamplerParameters(parameters);
       }
+      copyExternalImage(options_) {
+        const options = this._normalizeCopyExternalImageOptions(options_);
+        if (options.sourceX || options.sourceY) {
+          throw new Error("WebGL does not support sourceX/sourceY)");
+        }
+        const { glFormat, glType } = this;
+        const { image, depth, mipLevel, x, y, z, width, height } = options;
+        const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, z);
+        const glParameters = options.flipY ? { [37440]: true } : {};
+        this.gl.bindTexture(this.glTarget, this.handle);
+        withGLParameters(this.gl, glParameters, () => {
+          switch (this.dimension) {
+            case "2d":
+            case "cube":
+              this.gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, image);
+              break;
+            case "2d-array":
+            case "3d":
+              this.gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, image);
+              break;
+            default:
+          }
+        });
+        this.gl.bindTexture(this.glTarget, null);
+        return { width: options.width, height: options.height };
+      }
       copyImageData(options_) {
         const options = this._normalizeCopyImageDataOptions(options_);
         const typedArray = options.data;
-        const { width, height, depth } = this;
-        const { mipLevel = 0, byteOffset = 0, x = 0, y = 0, z = 0 } = options;
+        const { width, height, depth, z = 0 } = options;
+        const { mipLevel = 0, byteOffset = 0, x = 0, y = 0 } = options;
         const { glFormat, glType, compressed } = this;
         const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, z);
         let unpackRowLength;
@@ -2688,10 +2903,11 @@ var init_webgl_texture = __esm({
           }
         }
         const glParameters = !this.compressed ? {
+          [3317]: this.byteAlignment,
           ...unpackRowLength !== void 0 ? { [3314]: unpackRowLength } : {},
           [32878]: options.rowsPerImage
         } : {};
-        this.gl.bindTexture(glTarget, this.handle);
+        this.gl.bindTexture(this.glTarget, this.handle);
         withGLParameters(this.gl, glParameters, () => {
           switch (this.dimension) {
             case "2d":
@@ -2713,35 +2929,92 @@ var init_webgl_texture = __esm({
             default:
           }
         });
-        this.gl.bindTexture(glTarget, null);
+        this.gl.bindTexture(this.glTarget, null);
       }
-      copyExternalImage(options_) {
-        const options = this._normalizeCopyExternalImageOptions(options_);
-        if (options.sourceX || options.sourceY) {
-          throw new Error("WebGL does not support sourceX/sourceY)");
-        }
-        const { glFormat, glType } = this;
-        const { image, depth, mipLevel, x, y, z, width, height } = options;
+      readBuffer(options = {}, buffer) {
+        throw new Error("readBuffer not implemented");
+      }
+      async readDataAsync(options = {}) {
+        return this.readDataSyncWebGL(options);
+      }
+      writeBuffer(buffer, options_ = {}) {
+      }
+      writeData(data, options_ = {}) {
+        const options = this._normalizeTextureWriteOptions(options_);
+        const typedArray = ArrayBuffer.isView(data) ? data : new Uint8Array(data);
+        const {} = this;
+        const { width, height, mipLevel, x, y, z } = options;
+        const { glFormat, glType, compressed } = this;
+        const depth = 0;
         const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, depth);
-        const glParameters = options.flipY ? { [37440]: true } : {};
-        this.gl.bindTexture(this.glTarget, this.handle);
+        const glParameters = !this.compressed ? {
+          // WebGL does not require byte alignment, but allows it to be specified
+          [3317]: this.byteAlignment
+          // [GL.UNPACK_ROW_LENGTH]: bytesPerRow,
+          // [GL.UNPACK_IMAGE_HEIGHT]: rowsPerImage
+        } : {};
+        this.gl.bindTexture(glTarget, this.handle);
+        this.gl.bindBuffer(35052, null);
         withGLParameters(this.gl, glParameters, () => {
           switch (this.dimension) {
             case "2d":
             case "cube":
-              this.gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, image);
+              if (compressed) {
+                this.gl.compressedTexSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, typedArray);
+              } else {
+                this.gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, typedArray);
+              }
               break;
             case "2d-array":
             case "3d":
-              this.gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, image);
+              if (compressed) {
+                this.gl.compressedTexSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, typedArray);
+              } else {
+                this.gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, typedArray);
+              }
               break;
             default:
           }
         });
-        this.gl.bindTexture(this.glTarget, null);
-        return { width: options.width, height: options.height };
+        this.gl.bindTexture(glTarget, null);
+      }
+      // IMPLEMENTATION SPECIFIC
+      /** @todo - for now we always use 1 for maximum compatibility, we can fine tune later */
+      _getRowByteAlignment(format, width) {
+        return 1;
+      }
+      /**
+       * Wraps a given texture into a framebuffer object, that can be further used
+       * to read data from the texture object.
+       */
+      _getFramebuffer() {
+        this._framebuffer ||= this.device.createFramebuffer({
+          id: `framebuffer-for-${this.id}`,
+          width: this.width,
+          height: this.height,
+          colorAttachments: [this]
+        });
+        return this._framebuffer;
       }
       // WEBGL SPECIFIC
+      readDataSyncWebGL(options_ = {}) {
+        const options = this._normalizeTextureReadOptions(options_);
+        const memoryLayout = this.computeMemoryLayout(options);
+        const shaderType = convertGLDataTypeToDataType(this.glType);
+        const ArrayType = (0, import_core14.getTypedArrayConstructor)(shaderType);
+        const targetArray = new ArrayType(memoryLayout.byteLength);
+        const signedType = (0, import_core14.getDataType)(targetArray);
+        const sourceType = convertDataTypeToGLDataType(signedType);
+        const framebuffer = this._getFramebuffer();
+        const prevHandle = this.gl.bindFramebuffer(36160, framebuffer.handle);
+        this.gl.readBuffer(36064);
+        this.gl.readPixels(options.x, options.y, options.width, options.height, this.glFormat, sourceType, targetArray);
+        this.gl.bindFramebuffer(36160, prevHandle || null);
+        return targetArray.buffer;
+      }
+      /**
+       * @note - this is used by the DynamicTexture class to generate mipmaps on WebGL
+       */
       generateMipmapsWebGL(options) {
         const isFilterableAndRenderable = this.device.isTextureFormatRenderable(this.props.format) && this.device.isTextureFormatFilterable(this.props.format);
         if (!isFilterableAndRenderable) {
@@ -2821,89 +3094,6 @@ var init_webgl_texture = __esm({
   }
 });
 
-// dist/adapter/converters/webgl-shadertypes.js
-function convertDataTypeToGLDataType(normalizedType) {
-  return NORMALIZED_SHADER_TYPE_TO_WEBGL[normalizedType];
-}
-function convertGLUniformTypeToShaderVariableType(glUniformType) {
-  return WEBGL_SHADER_TYPES[glUniformType];
-}
-function isGLSamplerType(type) {
-  return Boolean(WEBGL_SAMPLER_TO_TEXTURE_BINDINGS[type]);
-}
-function getTextureBindingFromGLSamplerType(glSamplerType) {
-  return WEBGL_SAMPLER_TO_TEXTURE_BINDINGS[glSamplerType];
-}
-var import_constants15, WEBGL_SHADER_TYPES, WEBGL_SAMPLER_TO_TEXTURE_BINDINGS, NORMALIZED_SHADER_TYPE_TO_WEBGL;
-var init_webgl_shadertypes = __esm({
-  "dist/adapter/converters/webgl-shadertypes.js"() {
-    "use strict";
-    import_constants15 = require("@luma.gl/constants");
-    WEBGL_SHADER_TYPES = {
-      [5126]: "f32",
-      [35664]: "vec2<f32>",
-      [35665]: "vec3<f32>",
-      [35666]: "vec4<f32>",
-      [5124]: "i32",
-      [35667]: "vec2<i32>",
-      [35668]: "vec3<i32>",
-      [35669]: "vec4<i32>",
-      [5125]: "u32",
-      [36294]: "vec2<u32>",
-      [36295]: "vec3<u32>",
-      [36296]: "vec4<u32>",
-      [35670]: "f32",
-      [35671]: "vec2<f32>",
-      [35672]: "vec3<f32>",
-      [35673]: "vec4<f32>",
-      // TODO - are sizes/components below correct?
-      [35674]: "mat2x2<f32>",
-      [35685]: "mat2x3<f32>",
-      [35686]: "mat2x4<f32>",
-      [35687]: "mat3x2<f32>",
-      [35675]: "mat3x3<f32>",
-      [35688]: "mat3x4<f32>",
-      [35689]: "mat4x2<f32>",
-      [35690]: "mat4x3<f32>",
-      [35676]: "mat4x4<f32>"
-    };
-    WEBGL_SAMPLER_TO_TEXTURE_BINDINGS = {
-      [35678]: { viewDimension: "2d", sampleType: "float" },
-      [35680]: { viewDimension: "cube", sampleType: "float" },
-      [35679]: { viewDimension: "3d", sampleType: "float" },
-      [35682]: { viewDimension: "3d", sampleType: "depth" },
-      [36289]: { viewDimension: "2d-array", sampleType: "float" },
-      [36292]: { viewDimension: "2d-array", sampleType: "depth" },
-      [36293]: { viewDimension: "cube", sampleType: "float" },
-      [36298]: { viewDimension: "2d", sampleType: "sint" },
-      [36299]: { viewDimension: "3d", sampleType: "sint" },
-      [36300]: { viewDimension: "cube", sampleType: "sint" },
-      [36303]: { viewDimension: "2d-array", sampleType: "uint" },
-      [36306]: { viewDimension: "2d", sampleType: "uint" },
-      [36307]: { viewDimension: "3d", sampleType: "uint" },
-      [36308]: { viewDimension: "cube", sampleType: "uint" },
-      [36311]: { viewDimension: "2d-array", sampleType: "uint" }
-    };
-    NORMALIZED_SHADER_TYPE_TO_WEBGL = {
-      uint8: 5121,
-      sint8: 5120,
-      unorm8: 5121,
-      snorm8: 5120,
-      uint16: 5123,
-      sint16: 5122,
-      unorm16: 5123,
-      snorm16: 5122,
-      uint32: 5125,
-      sint32: 5124,
-      // WebGPU does not support normalized 32 bit integer attributes
-      //  'unorm32': GL.UNSIGNED_INT,
-      //  'snorm32': GL.INT,
-      float16: 5131,
-      float32: 5126
-    };
-  }
-});
-
 // dist/adapter/helpers/get-shader-layout-from-glsl.js
 function getShaderLayoutFromGLSL(gl, program) {
   const shaderLayout = {
@@ -2995,7 +3185,7 @@ function readVaryings(gl, program) {
     }
     const { name, type: glUniformType, size } = activeInfo;
     const uniformType = convertGLUniformTypeToShaderVariableType(glUniformType);
-    const { type, components } = (0, import_core14.getVariableShaderTypeInfo)(uniformType);
+    const { type, components } = (0, import_core15.getVariableShaderTypeInfo)(uniformType);
     varyings.push({ location, name, type, size: size * components });
   }
   varyings.sort((a, b) => a.location - b.location);
@@ -3056,7 +3246,11 @@ function readUniformBlocks(gl, program) {
     const uniformOffset = gl.getActiveUniforms(program, uniformIndices, 35387);
     const uniformStride = gl.getActiveUniforms(program, uniformIndices, 35388);
     for (let i = 0; i < blockInfo.uniformCount; ++i) {
-      const activeInfo = gl.getActiveUniform(program, uniformIndices[i]);
+      const uniformIndex = uniformIndices[i];
+      if (uniformIndex === void 0) {
+        continue;
+      }
+      const activeInfo = gl.getActiveUniform(program, uniformIndex);
       if (!activeInfo) {
         throw new Error("activeInfo");
       }
@@ -3087,21 +3281,20 @@ function parseUniformName(name) {
   }
   const UNIFORM_NAME_REGEXP = /([^[]*)(\[[0-9]+\])?/;
   const matches = UNIFORM_NAME_REGEXP.exec(name);
-  if (!matches || matches.length < 2) {
-    throw new Error(`Failed to parse GLSL uniform name ${name}`);
-  }
+  const uniformName = (0, import_core15.assertDefined)(matches == null ? void 0 : matches[1], `Failed to parse GLSL uniform name ${name}`);
   return {
-    name: matches[1],
-    length: matches[2] ? 1 : 0,
-    isArray: Boolean(matches[2])
+    name: uniformName,
+    // TODO - is this a bug, shouldn't we return the value?
+    length: (matches == null ? void 0 : matches[2]) ? 1 : 0,
+    isArray: Boolean(matches == null ? void 0 : matches[2])
   };
 }
-var import_core14, import_constants16;
+var import_core15, import_constants17;
 var init_get_shader_layout_from_glsl = __esm({
   "dist/adapter/helpers/get-shader-layout-from-glsl.js"() {
     "use strict";
-    import_core14 = require("@luma.gl/core");
-    import_constants16 = require("@luma.gl/constants");
+    import_core15 = require("@luma.gl/core");
+    import_constants17 = require("@luma.gl/constants");
     init_webgl_shadertypes();
   }
 });
@@ -3190,11 +3383,11 @@ function setUniform(gl, location, type, value) {
   }
   throw new Error("Illegal uniform");
 }
-var import_constants17;
+var import_constants18;
 var init_set_uniform = __esm({
   "dist/adapter/helpers/set-uniform.js"() {
     "use strict";
-    import_constants17 = require("@luma.gl/constants");
+    import_constants18 = require("@luma.gl/constants");
   }
 });
 
@@ -3231,11 +3424,11 @@ function getGLPrimitive(topology) {
       throw new Error(topology);
   }
 }
-var import_constants18;
+var import_constants19;
 var init_webgl_topology_utils = __esm({
   "dist/adapter/helpers/webgl-topology-utils.js"() {
     "use strict";
-    import_constants18 = require("@luma.gl/constants");
+    import_constants19 = require("@luma.gl/constants");
   }
 });
 
@@ -3248,7 +3441,7 @@ function mergeShaderLayout(baseLayout, overrideLayout) {
   for (const attribute of (overrideLayout == null ? void 0 : overrideLayout.attributes) || []) {
     const baseAttribute = mergedLayout.attributes.find((attr) => attr.name === attribute.name);
     if (!baseAttribute) {
-      import_core15.log.warn(`shader layout attribute ${attribute.name} not present in shader`);
+      import_core16.log.warn(`shader layout attribute ${attribute.name} not present in shader`);
     } else {
       baseAttribute.type = attribute.type || baseAttribute.type;
       baseAttribute.stepMode = attribute.stepMode || baseAttribute.stepMode;
@@ -3256,12 +3449,12 @@ function mergeShaderLayout(baseLayout, overrideLayout) {
   }
   return mergedLayout;
 }
-var import_core15, import_constants19, LOG_PROGRAM_PERF_PRIORITY, WEBGLRenderPipeline;
+var import_core16, import_constants20, LOG_PROGRAM_PERF_PRIORITY, WEBGLRenderPipeline;
 var init_webgl_render_pipeline = __esm({
   "dist/adapter/resources/webgl-render-pipeline.js"() {
     "use strict";
-    import_core15 = require("@luma.gl/core");
-    import_constants19 = require("@luma.gl/constants");
+    import_core16 = require("@luma.gl/core");
+    import_constants20 = require("@luma.gl/constants");
     init_get_shader_layout_from_glsl();
     init_device_parameters();
     init_set_uniform();
@@ -3271,7 +3464,7 @@ var init_webgl_render_pipeline = __esm({
     init_webgl_texture_view();
     init_webgl_topology_utils();
     LOG_PROGRAM_PERF_PRIORITY = 4;
-    WEBGLRenderPipeline = class extends import_core15.RenderPipeline {
+    WEBGLRenderPipeline = class extends import_core16.RenderPipeline {
       /** The WebGL device that created this render pipeline */
       device;
       /** Handle to underlying WebGL program */
@@ -3307,9 +3500,9 @@ var init_webgl_render_pipeline = __esm({
           this.device.gl.transformFeedbackVaryings(this.handle, varyings, bufferMode);
         }
         this._linkShaders();
-        import_core15.log.time(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+        import_core16.log.time(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
         this.introspectedLayout = getShaderLayoutFromGLSL(this.device.gl, this.handle);
-        import_core15.log.timeEnd(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+        import_core16.log.timeEnd(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
         this.shaderLayout = props.shaderLayout ? mergeShaderLayout(this.introspectedLayout, props.shaderLayout) : this.introspectedLayout;
       }
       destroy() {
@@ -3331,12 +3524,12 @@ var init_webgl_render_pipeline = __esm({
           if (!binding) {
             const validBindings = this.shaderLayout.bindings.map((binding_) => `"${binding_.name}"`).join(", ");
             if (!(options == null ? void 0 : options.disableWarnings)) {
-              import_core15.log.warn(`No binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`, value)();
+              import_core16.log.warn(`No binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`, value)();
             }
             continue;
           }
           if (!value) {
-            import_core15.log.warn(`Unsetting binding "${name}" in render pipeline "${this.id}"`)();
+            import_core16.log.warn(`Unsetting binding "${name}" in render pipeline "${this.id}"`)();
           }
           switch (binding.type) {
             case "uniform":
@@ -3350,7 +3543,7 @@ var init_webgl_render_pipeline = __esm({
               }
               break;
             case "sampler":
-              import_core15.log.warn(`Ignoring sampler ${name}`)();
+              import_core16.log.warn(`Ignoring sampler ${name}`)();
               break;
             default:
               throw new Error(binding.type);
@@ -3383,11 +3576,11 @@ var init_webgl_render_pipeline = __esm({
         const isIndexed = Boolean(vertexArray.indexBuffer);
         const glIndexType = (_a = vertexArray.indexBuffer) == null ? void 0 : _a.glIndexType;
         if (this.linkStatus !== "success") {
-          import_core15.log.info(2, `RenderPipeline:${this.id}.draw() aborted - waiting for shader linking`)();
+          import_core16.log.info(2, `RenderPipeline:${this.id}.draw() aborted - waiting for shader linking`)();
           return false;
         }
         if (!this._areTexturesRenderable()) {
-          import_core15.log.info(2, `RenderPipeline:${this.id}.draw() aborted - textures not yet loaded`)();
+          import_core16.log.info(2, `RenderPipeline:${this.id}.draw() aborted - textures not yet loaded`)();
           return false;
         }
         this.device.gl.useProgram(this.handle);
@@ -3429,19 +3622,19 @@ var init_webgl_render_pipeline = __esm({
         const { gl } = this.device;
         gl.attachShader(this.handle, this.vs.handle);
         gl.attachShader(this.handle, this.fs.handle);
-        import_core15.log.time(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
+        import_core16.log.time(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
         gl.linkProgram(this.handle);
-        import_core15.log.timeEnd(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
-        if (import_core15.log.level === 0) {
+        import_core16.log.timeEnd(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
+        if (import_core16.log.level === 0) {
         }
         if (!this.device.features.has("compilation-status-async-webgl")) {
           const status2 = this._getLinkStatus();
           this._reportLinkStatus(status2);
           return;
         }
-        import_core15.log.once(1, "RenderPipeline linking is asynchronous")();
+        import_core16.log.once(1, "RenderPipeline linking is asynchronous")();
         await this._waitForLinkComplete();
-        import_core15.log.info(2, `RenderPipeline ${this.id} - async linking complete: ${this.linkStatus}`)();
+        import_core16.log.info(2, `RenderPipeline ${this.id} - async linking complete: ${this.linkStatus}`)();
         const status = this._getLinkStatus();
         this._reportLinkStatus(status);
       }
@@ -3527,7 +3720,7 @@ var init_webgl_render_pipeline = __esm({
         let texturesRenderable = true;
         for (const bindingInfo of this.shaderLayout.bindings) {
           if (!this.bindings[bindingInfo.name] && !this.bindings[bindingInfo.name.replace(/Uniforms$/, "")]) {
-            import_core15.log.warn(`Binding ${bindingInfo.name} not found in ${this.id}`)();
+            import_core16.log.warn(`Binding ${bindingInfo.name} not found in ${this.id}`)();
             texturesRenderable = false;
           }
         }
@@ -3554,7 +3747,7 @@ var init_webgl_render_pipeline = __esm({
               if (location === 4294967295) {
                 throw new Error(`Invalid uniform block name ${name}`);
               }
-              gl.uniformBlockBinding(this.handle, uniformBufferIndex, location);
+              gl.uniformBlockBinding(this.handle, location, uniformBufferIndex);
               if (value instanceof WEBGLBuffer) {
                 gl.bindBufferBase(35345, uniformBufferIndex, value.handle);
               } else {
@@ -3581,7 +3774,7 @@ var init_webgl_render_pipeline = __esm({
               } else if (value instanceof WEBGLTexture) {
                 texture = value;
               } else if (value instanceof WEBGLFramebuffer && value.colorAttachments[0] instanceof WEBGLTextureView) {
-                import_core15.log.warn("Passing framebuffer in texture binding may be deprecated. Use fbo.colorAttachments[0] instead")();
+                import_core16.log.warn("Passing framebuffer in texture binding may be deprecated. Use fbo.colorAttachments[0] instead")();
                 texture = value.colorAttachments[0].texture;
               } else {
                 throw new Error("No texture");
@@ -3642,7 +3835,7 @@ function _copyTextureToBuffer(device, options) {
     height = options.sourceTexture.height,
     depthOrArrayLayers = 0,
     /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
-    origin = [0, 0],
+    origin = [0, 0, 0],
     /** Destination buffer */
     destinationBuffer,
     /** Offset, in bytes, from the beginning of the buffer to the start of the image data (default 0) */
@@ -3671,7 +3864,8 @@ function _copyTextureToBuffer(device, options) {
     const webglBuffer = destinationBuffer;
     const sourceWidth = width || framebuffer.width;
     const sourceHeight = height || framebuffer.height;
-    const sourceParams = getTextureFormatWebGL(framebuffer.colorAttachments[0].texture.props.format);
+    const colorAttachment0 = (0, import_core17.assertDefined)(framebuffer.colorAttachments[0]);
+    const sourceParams = getTextureFormatWebGL(colorAttachment0.texture.props.format);
     const sourceFormat = sourceParams.format;
     const sourceType = sourceParams.type;
     device.gl.bindBuffer(35051, webglBuffer.handle);
@@ -3698,7 +3892,7 @@ function _copyTextureToTexture(device, options) {
     /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy from. */
     origin = [0, 0],
     /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to. */
-    destinationOrigin = [0, 0],
+    destinationOrigin = [0, 0, 0],
     /** Texture to copy to/from. */
     destinationTexture
     /**  Mip-map level of the texture to copy to/from. (Default 0) */
@@ -3714,7 +3908,7 @@ function _copyTextureToTexture(device, options) {
     // depthOrArrayLayers = 0
   } = options;
   const { framebuffer, destroyFramebuffer } = getFramebuffer(sourceTexture);
-  const [sourceX, sourceY] = origin;
+  const [sourceX = 0, sourceY = 0] = origin;
   const [destinationX, destinationY, destinationZ] = destinationOrigin;
   const prevHandle = device.gl.bindFramebuffer(36160, framebuffer.handle);
   let texture;
@@ -3748,7 +3942,7 @@ function _copyTextureToTexture(device, options) {
   }
 }
 function getFramebuffer(source) {
-  if (source instanceof import_core16.Texture) {
+  if (source instanceof import_core17.Texture) {
     const { width, height, id } = source;
     const framebuffer = source.device.createFramebuffer({
       id: `framebuffer-for-${id}`,
@@ -3760,15 +3954,15 @@ function getFramebuffer(source) {
   }
   return { framebuffer: source, destroyFramebuffer: false };
 }
-var import_core16, import_constants20, WEBGLCommandBuffer;
+var import_core17, import_constants21, WEBGLCommandBuffer;
 var init_webgl_command_buffer = __esm({
   "dist/adapter/resources/webgl-command-buffer.js"() {
     "use strict";
-    import_core16 = require("@luma.gl/core");
-    import_constants20 = require("@luma.gl/constants");
+    import_core17 = require("@luma.gl/core");
+    import_constants21 = require("@luma.gl/constants");
     init_webgl_texture();
     init_webgl_texture_table();
-    WEBGLCommandBuffer = class extends import_core16.CommandBuffer {
+    WEBGLCommandBuffer = class extends import_core17.CommandBuffer {
       device;
       handle = null;
       commands = [];
@@ -3801,16 +3995,16 @@ var init_webgl_command_buffer = __esm({
 });
 
 // dist/adapter/resources/webgl-render-pass.js
-var import_core17, import_constants21, COLOR_CHANNELS, WEBGLRenderPass;
+var import_core18, import_constants22, COLOR_CHANNELS, WEBGLRenderPass;
 var init_webgl_render_pass = __esm({
   "dist/adapter/resources/webgl-render-pass.js"() {
     "use strict";
-    import_core17 = require("@luma.gl/core");
-    import_constants21 = require("@luma.gl/constants");
+    import_core18 = require("@luma.gl/core");
+    import_constants22 = require("@luma.gl/constants");
     init_with_parameters();
     init_unified_parameter_api();
     COLOR_CHANNELS = [1, 2, 4, 8];
-    WEBGLRenderPass = class extends import_core17.RenderPass {
+    WEBGLRenderPass = class extends import_core18.RenderPass {
       device;
       handle = null;
       /** Parameters that should be applied before each draw call */
@@ -3819,6 +4013,9 @@ var init_webgl_render_pass = __esm({
         var _a;
         super(device, props);
         this.device = device;
+        if (!(props == null ? void 0 : props.framebuffer)) {
+          device.getDefaultCanvasContext()._resizeDrawingBufferIfNeeded();
+        }
         let viewport;
         if (!((_a = props == null ? void 0 : props.parameters) == null ? void 0 : _a.viewport)) {
           if (props == null ? void 0 : props.framebuffer) {
@@ -3835,7 +4032,7 @@ var init_webgl_render_pass = __esm({
         if (this.props.framebuffer && (webglFramebuffer == null ? void 0 : webglFramebuffer.handle)) {
           const drawBuffers = this.props.framebuffer.colorAttachments.map((_, i) => 36064 + i);
           this.device.gl.drawBuffers(drawBuffers);
-        } else {
+        } else if (!this.props.framebuffer) {
           this.device.gl.drawBuffers([1029]);
         }
         this.clear();
@@ -3881,9 +4078,9 @@ var init_webgl_render_pass = __esm({
         if (parameters.blendConstant) {
           glParameters.blendColor = parameters.blendConstant;
         }
-        if (parameters.stencilReference) {
-          console.warn("RenderPassParameters.stencilReference not yet implemented in WebGL");
+        if (parameters.stencilReference !== void 0) {
           glParameters[2967] = parameters.stencilReference;
+          glParameters[36003] = parameters.stencilReference;
         }
         if ("colorMask" in parameters) {
           glParameters.colorMask = COLOR_CHANNELS.map((channel) => Boolean(channel & parameters.colorMask));
@@ -3961,14 +4158,14 @@ var init_webgl_render_pass = __esm({
 });
 
 // dist/adapter/resources/webgl-command-encoder.js
-var import_core18, WEBGLCommandEncoder;
+var import_core19, WEBGLCommandEncoder;
 var init_webgl_command_encoder = __esm({
   "dist/adapter/resources/webgl-command-encoder.js"() {
     "use strict";
-    import_core18 = require("@luma.gl/core");
+    import_core19 = require("@luma.gl/core");
     init_webgl_command_buffer();
     init_webgl_render_pass();
-    WEBGLCommandEncoder = class extends import_core18.CommandEncoder {
+    WEBGLCommandEncoder = class extends import_core19.CommandEncoder {
       device;
       handle = null;
       commandBuffer;
@@ -4022,7 +4219,7 @@ function fillArray(options) {
   const total = count * length;
   let copied = 0;
   for (let i = start; copied < length; copied++) {
-    target2[i++] = source[copied];
+    target2[i++] = source[copied] ?? 0;
   }
   while (copied < total) {
     if (copied < total - copied) {
@@ -4059,16 +4256,16 @@ function compareConstantArrayValues(v1, v2) {
   }
   return true;
 }
-var import_core19, import_constants22, import_env2, WEBGLVertexArray;
+var import_core20, import_constants23, import_env2, WEBGLVertexArray;
 var init_webgl_vertex_array = __esm({
   "dist/adapter/resources/webgl-vertex-array.js"() {
     "use strict";
-    import_core19 = require("@luma.gl/core");
-    import_constants22 = require("@luma.gl/constants");
+    import_core20 = require("@luma.gl/core");
+    import_constants23 = require("@luma.gl/constants");
     import_env2 = require("@probe.gl/env");
     init_webgl_vertex_formats();
     init_fill_array();
-    WEBGLVertexArray = class extends import_core19.VertexArray {
+    WEBGLVertexArray = class extends import_core20.VertexArray {
       get [Symbol.toStringTag]() {
         return "VertexArray";
       }
@@ -4235,7 +4432,7 @@ var init_webgl_vertex_array = __esm({
         this.buffer = this.buffer || this.device.createBuffer({ byteLength });
         updateNeeded ||= !compareConstantArrayValues(constantValue, this.bufferValue);
         if (updateNeeded) {
-          const typedArray = (0, import_core19.getScratchArray)(value.constructor, length);
+          const typedArray = (0, import_core20.getScratchArray)(value.constructor, length);
           fillArray({ target: typedArray, source: constantValue, start: 0, count: length });
           this.buffer.write(typedArray);
           this.bufferValue = value;
@@ -4253,15 +4450,15 @@ function isIndex(value) {
   }
   return /^\d+$/.test(value);
 }
-var import_core20, import_constants23, WEBGLTransformFeedback;
+var import_core21, import_constants24, WEBGLTransformFeedback;
 var init_webgl_transform_feedback = __esm({
   "dist/adapter/resources/webgl-transform-feedback.js"() {
     "use strict";
-    import_core20 = require("@luma.gl/core");
-    import_constants23 = require("@luma.gl/constants");
+    import_core21 = require("@luma.gl/core");
+    import_constants24 = require("@luma.gl/constants");
     init_dist();
     init_webgl_topology_utils();
-    WEBGLTransformFeedback = class extends import_core20.TransformFeedback {
+    WEBGLTransformFeedback = class extends import_core21.TransformFeedback {
       device;
       gl;
       handle;
@@ -4314,8 +4511,8 @@ var init_webgl_transform_feedback = __esm({
         this.buffers = {};
         this.unusedBuffers = {};
         this.bind(() => {
-          for (const bufferName in buffers) {
-            this.setBuffer(bufferName, buffers[bufferName]);
+          for (const [bufferName, buffer] of Object.entries(buffers)) {
+            this.setBuffer(bufferName, buffer);
           }
         });
       }
@@ -4324,7 +4521,7 @@ var init_webgl_transform_feedback = __esm({
         const { buffer, byteLength, byteOffset } = this._getBufferRange(bufferOrRange);
         if (location < 0) {
           this.unusedBuffers[locationOrName] = buffer;
-          import_core20.log.warn(`${this.id} unusedBuffers varying buffer ${locationOrName}`)();
+          import_core21.log.warn(`${this.id} unusedBuffers varying buffer ${locationOrName}`)();
           return;
         }
         this.buffers[location] = { buffer, byteLength, byteOffset };
@@ -4337,7 +4534,7 @@ var init_webgl_transform_feedback = __esm({
           return this.buffers[locationOrName] || null;
         }
         const location = this._getVaryingIndex(locationOrName);
-        return location >= 0 ? this.buffers[location] : null;
+        return this.buffers[location] ?? null;
       }
       bind(funcOrHandle = this.handle) {
         if (typeof funcOrHandle !== "function") {
@@ -4384,8 +4581,8 @@ var init_webgl_transform_feedback = __esm({
        * cannot be bound to 'TRANSFORM_FEEDBACK_BUFFER' target.
        */
       _bindBuffers() {
-        for (const bufferIndex in this.buffers) {
-          const { buffer, byteLength, byteOffset } = this._getBufferRange(this.buffers[bufferIndex]);
+        for (const [bufferIndex, bufferEntry] of Object.entries(this.buffers)) {
+          const { buffer, byteLength, byteOffset } = this._getBufferRange(bufferEntry);
           this._bindBuffer(Number(bufferIndex), buffer, byteOffset, byteLength);
         }
       }
@@ -4407,13 +4604,13 @@ var init_webgl_transform_feedback = __esm({
 });
 
 // dist/adapter/resources/webgl-query-set.js
-var import_core21, import_constants24, WEBGLQuerySet;
+var import_core22, import_constants25, WEBGLQuerySet;
 var init_webgl_query_set = __esm({
   "dist/adapter/resources/webgl-query-set.js"() {
     "use strict";
-    import_core21 = require("@luma.gl/core");
-    import_constants24 = require("@luma.gl/constants");
-    WEBGLQuerySet = class extends import_core21.QuerySet {
+    import_core22 = require("@luma.gl/core");
+    import_constants25 = require("@luma.gl/constants");
+    WEBGLQuerySet = class extends import_core22.QuerySet {
       device;
       handle;
       target = null;
@@ -4546,6 +4743,57 @@ var init_webgl_query_set = __esm({
   }
 });
 
+// dist/adapter/resources/webgl-fence.js
+var import_core23, WEBGLFence;
+var init_webgl_fence = __esm({
+  "dist/adapter/resources/webgl-fence.js"() {
+    "use strict";
+    import_core23 = require("@luma.gl/core");
+    WEBGLFence = class extends import_core23.Fence {
+      device;
+      gl;
+      handle;
+      signaled;
+      _signaled = false;
+      constructor(device, props = {}) {
+        super(device, {});
+        this.device = device;
+        this.gl = device.gl;
+        const sync = this.props.handle || this.gl.fenceSync(this.gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
+        if (!sync) {
+          throw new Error("Failed to create WebGL fence");
+        }
+        this.handle = sync;
+        this.signaled = new Promise((resolve) => {
+          const poll = () => {
+            const status = this.gl.clientWaitSync(this.handle, 0, 0);
+            if (status === this.gl.ALREADY_SIGNALED || status === this.gl.CONDITION_SATISFIED) {
+              this._signaled = true;
+              resolve();
+            } else {
+              setTimeout(poll, 1);
+            }
+          };
+          poll();
+        });
+      }
+      isSignaled() {
+        if (this._signaled) {
+          return true;
+        }
+        const status = this.gl.getSyncParameter(this.handle, this.gl.SYNC_STATUS);
+        this._signaled = status === this.gl.SIGNALED;
+        return this._signaled;
+      }
+      destroy() {
+        if (!this.destroyed) {
+          this.gl.deleteSync(this.handle);
+        }
+      }
+    };
+  }
+});
+
 // dist/adapter/helpers/format-utils.js
 function glFormatToComponents(format) {
   switch (format) {
@@ -4586,41 +4834,11 @@ function glTypeToBytes(type) {
       return 0;
   }
 }
-var import_constants25;
+var import_constants26;
 var init_format_utils = __esm({
   "dist/adapter/helpers/format-utils.js"() {
-    "use strict";
-    import_constants25 = require("@luma.gl/constants");
-  }
-});
-
-// dist/adapter/converters/shader-formats.js
-function convertGLDataTypeToDataType(type) {
-  return GL_DATA_TYPE_MAP[type];
-}
-var import_constants26, GL_DATA_TYPE_MAP;
-var init_shader_formats = __esm({
-  "dist/adapter/converters/shader-formats.js"() {
     "use strict";
     import_constants26 = require("@luma.gl/constants");
-    GL_DATA_TYPE_MAP = {
-      [5124]: "sint32",
-      [5125]: "uint32",
-      [5122]: "sint16",
-      [5123]: "uint16",
-      [5120]: "sint8",
-      [5121]: "uint8",
-      [5126]: "float32",
-      [5131]: "float16",
-      [33635]: "uint16",
-      [32819]: "uint16",
-      [32820]: "uint16",
-      [33640]: "uint32",
-      [35899]: "uint32",
-      [35902]: "uint32",
-      [34042]: "uint32",
-      [36269]: "uint32"
-    };
   }
 });
 
@@ -4654,7 +4872,7 @@ function readPixelsToArray(source, options) {
   sourceFormat ||= (texture == null ? void 0 : texture.glFormat) || 6408;
   sourceType ||= (texture == null ? void 0 : texture.glType) || 5121;
   target2 = getPixelArray(target2, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
-  const signedType = (0, import_core22.getDataType)(target2);
+  const signedType = (0, import_core24.getDataType)(target2);
   sourceType = sourceType || convertDataTypeToGLDataType(signedType);
   const prevHandle = gl.bindFramebuffer(36160, handle);
   gl.readBuffer(36064 + sourceAttachment);
@@ -4697,7 +4915,7 @@ function readPixelsToBuffer(source, options) {
   return webglBufferTarget;
 }
 function getFramebuffer2(source) {
-  if (!(source instanceof import_core22.Framebuffer)) {
+  if (!(source instanceof import_core24.Framebuffer)) {
     return { framebuffer: toFramebuffer(source), deleteFramebuffer: true };
   }
   return { framebuffer: source, deleteFramebuffer: false };
@@ -4719,15 +4937,15 @@ function getPixelArray(pixelArray, glType, glFormat, width, height, depth) {
   }
   glType ||= 5121;
   const shaderType = convertGLDataTypeToDataType(glType);
-  const ArrayType = (0, import_core22.getTypedArrayConstructor)(shaderType);
+  const ArrayType = (0, import_core24.getTypedArrayConstructor)(shaderType);
   const components = glFormatToComponents(glFormat);
   return new ArrayType(width * height * components);
 }
-var import_core22, import_constants27;
+var import_core24, import_constants27;
 var init_webgl_texture_utils = __esm({
   "dist/adapter/helpers/webgl-texture-utils.js"() {
     "use strict";
-    import_core22 = require("@luma.gl/core");
+    import_core24 = require("@luma.gl/core");
     import_constants27 = require("@luma.gl/constants");
     init_webgl_shadertypes();
     init_format_utils();
@@ -4774,13 +4992,14 @@ function compareConstantArrayValues2(v1, v2) {
   }
   return true;
 }
-var import_core23, WebGLDevice;
+var import_core25, WebGLDevice;
 var init_webgl_device = __esm({
   "dist/adapter/webgl-device.js"() {
     "use strict";
-    import_core23 = require("@luma.gl/core");
+    import_core25 = require("@luma.gl/core");
     init_webgl_state_tracker();
     init_create_browser_context();
+    init_webgl_context_data();
     init_webgl_device_info();
     init_webgl_device_features();
     init_webgl_device_limits();
@@ -4799,11 +5018,19 @@ var init_webgl_device = __esm({
     init_webgl_vertex_array();
     init_webgl_transform_feedback();
     init_webgl_query_set();
+    init_webgl_fence();
     init_webgl_texture_utils();
     init_unified_parameter_api();
     init_with_parameters();
     init_webgl_extensions();
-    WebGLDevice = class extends import_core23.Device {
+    WebGLDevice = class extends import_core25.Device {
+      static getDeviceFromContext(gl) {
+        var _a;
+        if (!gl) {
+          return null;
+        }
+        return ((_a = gl.luma) == null ? void 0 : _a.device) ?? null;
+      }
       // Public `Device` API
       /** type of this device */
       type = "webgl";
@@ -4825,7 +5052,7 @@ var init_webgl_device = __esm({
       // @ts-ignore TODO fix
       _constants;
       /** State used by luma.gl classes - TODO - not used? */
-      _extensions = {};
+      extensions;
       _polyfilled = false;
       /** Instance of Spector.js (if initialized) */
       spectorJS;
@@ -4847,13 +5074,14 @@ var init_webgl_device = __esm({
         }
       }
       constructor(props) {
-        var _a, _b;
+        var _a;
         super({ ...props, id: props.id || uid("webgl-device") });
-        const canvasContextProps = import_core23.Device._getCanvasContextProps(props);
+        const canvasContextProps = import_core25.Device._getCanvasContextProps(props);
         if (!canvasContextProps) {
           throw new Error("WebGLDevice requires props.createCanvasContext to be set");
         }
-        let device = (_b = (_a = canvasContextProps.canvas) == null ? void 0 : _a.gl) == null ? void 0 : _b.device;
+        const existingContext = ((_a = canvasContextProps.canvas) == null ? void 0 : _a.gl) ?? null;
+        let device = WebGLDevice.getDeviceFromContext(existingContext);
         if (device) {
           throw new Error(`WebGL context already attached to device ${device.id}`);
         }
@@ -4868,6 +5096,9 @@ var init_webgl_device = __esm({
         if (props.powerPreference !== void 0) {
           webglContextAttributes.powerPreference = props.powerPreference;
         }
+        if (props.failIfMajorPerformanceCaveat !== void 0) {
+          webglContextAttributes.failIfMajorPerformanceCaveat = props.failIfMajorPerformanceCaveat;
+        }
         const externalGLContext = this.props._handle;
         const gl = externalGLContext || createBrowserContext(this.canvasContext.canvas, {
           onContextLost: (event) => {
@@ -4883,10 +5114,11 @@ var init_webgl_device = __esm({
         if (!gl) {
           throw new Error("WebGL context creation failed");
         }
-        device = gl.device;
+        device = WebGLDevice.getDeviceFromContext(gl);
         if (device) {
           if (props._reuseDevices) {
-            import_core23.log.log(1, `Not creating a new Device, instead returning a reference to Device ${device.id} already attached to WebGL context`, device)();
+            import_core25.log.log(1, `Not creating a new Device, instead returning a reference to Device ${device.id} already attached to WebGL context`, device)();
+            this.canvasContext.destroy();
             device._reused = true;
             return device;
           }
@@ -4895,26 +5127,25 @@ var init_webgl_device = __esm({
         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);
+        const contextData = getWebGLContextData(this.handle);
+        contextData.device = this;
+        this.extensions = contextData.extensions || (contextData.extensions = {});
+        this.info = getDeviceInfo(this.gl, this.extensions);
         this.limits = new WebGLDeviceLimits(this.gl);
-        this.features = new WebGLDeviceFeatures(this.gl, this._extensions, this.props._disabledFeatures);
+        this.features = new WebGLDeviceFeatures(this.gl, this.extensions, this.props._disabledFeatures);
         if (this.props._initializeFeatures) {
           this.features.initializeFeatures();
         }
         const glState = new WebGLStateTracker(this.gl, {
-          log: (...args) => import_core23.log.log(1, ...args)()
+          log: (...args) => import_core25.log.log(1, ...args)()
         });
         glState.trackState(this.gl, { copyState: false });
-        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);
-          }
+        if (props.debug || props.debugWebGL) {
+          this.gl = makeDebugContext(this.gl, { debugWebGL: true, traceWebGL: props.debugWebGL });
+          import_core25.log.warn("WebGL debug mode activated. Performance reduced.")();
+        }
+        if (props.debugWebGL) {
+          import_core25.log.level = Math.max(import_core25.log.level, 1);
         }
         this.commandEncoder = new WEBGLCommandEncoder(this, { id: `${this}-command-encoder` });
       }
@@ -4930,16 +5161,14 @@ var init_webgl_device = __esm({
        */
       destroy() {
         if (!this.props._reuseDevices && !this._reused) {
-          delete this.gl.device;
+          const contextData = getWebGLContextData(this.handle);
+          contextData.device = null;
         }
       }
       get isLost() {
         return this.gl.isContextLost();
       }
       // IMPLEMENTATION OF ABSTRACT DEVICE
-      getTextureByteAlignment() {
-        return 4;
-      }
       createCanvasContext(props) {
         throw new Error("WebGL only supports a single canvas");
       }
@@ -4971,6 +5200,9 @@ var init_webgl_device = __esm({
       createQuerySet(props) {
         return new WEBGLQuerySet(this, props);
       }
+      createFence() {
+        return new WEBGLFence(this);
+      }
       createRenderPipeline(props) {
         return new WEBGLRenderPipeline(this, props);
       }
@@ -5014,11 +5246,11 @@ var init_webgl_device = __esm({
         return withGLParameters(this.gl, parameters, func);
       }
       resetWebGL() {
-        import_core23.log.warn("WebGLDevice.resetWebGL is deprecated, use only for debugging")();
+        import_core25.log.warn("WebGLDevice.resetWebGL is deprecated, use only for debugging")();
         resetGLParameters(this.gl);
       }
       _getDeviceSpecificTextureFormatCapabilities(capabilities) {
-        return getTextureFormatCapabilitiesWebGL(this.gl, capabilities, this._extensions);
+        return getTextureFormatCapabilitiesWebGL(this.gl, capabilities, this.extensions);
       }
       //
       // WebGL-only API (not part of `Device` API)
@@ -5087,7 +5319,7 @@ var init_webgl_device = __esm({
         this._constants = this._constants || new Array(maxVertexAttributes).fill(null);
         const currentConstant = this._constants[location];
         if (currentConstant && compareConstantArrayValues2(currentConstant, constant)) {
-          import_core23.log.info(1, `setConstantAttributeWebGL(${location}) could have been skipped, value unchanged`)();
+          import_core25.log.info(1, `setConstantAttributeWebGL(${location}) could have been skipped, value unchanged`)();
         }
         this._constants[location] = constant;
         switch (constant.constructor) {
@@ -5106,8 +5338,8 @@ var init_webgl_device = __esm({
       }
       /** Ensure extensions are only requested once */
       getExtension(name) {
-        getWebGLExtension(this.gl, name, this._extensions);
-        return this._extensions;
+        getWebGLExtension(this.gl, name, this.extensions);
+        return this.extensions;
       }
       // INTERNAL SUPPORT METHODS FOR WEBGL RESOURCES
       /**
@@ -5128,23 +5360,23 @@ function isWebGL(gl) {
   if (typeof WebGL2RenderingContext !== "undefined" && gl instanceof WebGL2RenderingContext) {
     return true;
   }
-  return Boolean(gl && Number.isFinite(gl._version));
+  return Boolean(gl && typeof gl.createVertexArray === "function");
 }
-var import_core24, LOG_LEVEL2, WebGLAdapter, webgl2Adapter;
+var import_core26, LOG_LEVEL2, WebGLAdapter, webgl2Adapter;
 var init_webgl_adapter = __esm({
   "dist/adapter/webgl-adapter.js"() {
     "use strict";
-    import_core24 = require("@luma.gl/core");
+    import_core26 = require("@luma.gl/core");
     init_polyfill_webgl1_extensions();
     init_spector();
     init_webgl_developer_tools();
     LOG_LEVEL2 = 1;
-    WebGLAdapter = class extends import_core24.Adapter {
+    WebGLAdapter = class extends import_core26.Adapter {
       /** type of device's created by this adapter */
       type = "webgl";
       constructor() {
         super();
-        import_core24.Device.defaultProps = { ...import_core24.Device.defaultProps, ...DEFAULT_SPECTOR_PROPS };
+        import_core26.Device.defaultProps = { ...import_core26.Device.defaultProps, ...DEFAULT_SPECTOR_PROPS };
       }
       /** Force any created WebGL contexts to be WebGL2 contexts, polyfilled with WebGL1 extensions */
       enforceWebGL2(enable2) {
@@ -5159,7 +5391,7 @@ var init_webgl_adapter = __esm({
           return true;
         }
         if (typeof WebGLRenderingContext !== "undefined" && handle instanceof WebGLRenderingContext) {
-          import_core24.log.warn("WebGL1 is not supported", handle)();
+          import_core26.log.warn("WebGL1 is not supported", handle)();
         }
         return false;
       }
@@ -5175,8 +5407,9 @@ var init_webgl_adapter = __esm({
         if (gl instanceof WebGLDevice2) {
           return gl;
         }
-        if ((gl == null ? void 0 : gl.device) instanceof WebGLDevice2) {
-          return gl.device;
+        const existingDevice = WebGLDevice2.getDeviceFromContext(gl);
+        if (existingDevice) {
+          return existingDevice;
         }
         if (!isWebGL(gl)) {
           throw new Error("Invalid WebGL2RenderingContext");
@@ -5190,28 +5423,29 @@ var init_webgl_adapter = __esm({
       }
       async create(props = {}) {
         const { WebGLDevice: WebGLDevice2 } = await Promise.resolve().then(() => (init_webgl_device(), webgl_device_exports));
-        import_core24.log.groupCollapsed(LOG_LEVEL2, "WebGLDevice created")();
-        try {
-          const promises = [];
-          if (props.debugWebGL || props.debug) {
-            promises.push(loadWebGLDeveloperTools());
-          }
-          if (props.debugSpectorJS) {
-            promises.push(loadSpectorJS(props));
-          }
-          const results = await Promise.allSettled(promises);
-          for (const result of results) {
-            if (result.status === "rejected") {
-              import_core24.log.error(`Failed to initialize debug libraries ${result.reason}`)();
-            }
+        const promises = [];
+        if (props.debugWebGL || props.debug) {
+          promises.push(loadWebGLDeveloperTools());
+        }
+        if (props.debugSpectorJS) {
+          promises.push(loadSpectorJS(props));
+        }
+        const results = await Promise.allSettled(promises);
+        for (const result of results) {
+          if (result.status === "rejected") {
+            import_core26.log.error(`Failed to initialize debug libraries ${result.reason}`)();
           }
+        }
+        try {
           const device = new WebGLDevice2(props);
+          import_core26.log.groupCollapsed(LOG_LEVEL2, `WebGLDevice ${device.id} created`)();
           const message2 = `${device._reused ? "Reusing" : "Created"} device with WebGL2 ${device.props.debug ? "debug " : ""}context: ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContext.id}`;
-          import_core24.log.probe(LOG_LEVEL2, message2)();
-          import_core24.log.table(LOG_LEVEL2, device.info)();
+          import_core26.log.probe(LOG_LEVEL2, message2)();
+          import_core26.log.table(LOG_LEVEL2, device.info)();
           return device;
         } finally {
-          import_core24.log.groupEnd(LOG_LEVEL2)();
+          import_core26.log.groupEnd(LOG_LEVEL2)();
+          import_core26.log.info(LOG_LEVEL2, `%cWebGL call tracing: luma.log.set('debug-webgl') `, "color: white; background: blue; padding: 2px 6px; border-radius: 3px;")();
         }
       }
     };
@@ -5224,6 +5458,7 @@ var dist_exports = {};
 __export(dist_exports, {
   WEBGLBuffer: () => WEBGLBuffer,
   WEBGLCommandEncoder: () => WEBGLCommandEncoder,
+  WEBGLFence: () => WEBGLFence,
   WEBGLFramebuffer: () => WEBGLFramebuffer,
   WEBGLRenderPass: () => WEBGLRenderPass,
   WEBGLRenderPipeline: () => WEBGLRenderPipeline,
@@ -5255,6 +5490,7 @@ var init_dist = __esm({
     init_webgl_shader();
     init_webgl_sampler();
     init_webgl_framebuffer();
+    init_webgl_fence();
     init_webgl_render_pipeline();
     init_webgl_command_encoder();
     init_webgl_render_pass();