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

package/dist/dist.dev.js

@@ -48,10 +48,10 @@ var __exports__ = (() => {
     }
   });
 
-  // ../constants/src/webgl-constants.ts
+  // src/constants/webgl-constants.ts
   var GLEnum;
   var init_webgl_constants = __esm({
-    "../constants/src/webgl-constants.ts"() {
+    "src/constants/webgl-constants.ts"() {
       "use strict";
       GLEnum = /* @__PURE__ */ ((GLEnum2) => {
         GLEnum2[GLEnum2["DEPTH_BUFFER_BIT"] = 256] = "DEPTH_BUFFER_BIT";
@@ -705,9 +705,9 @@ var __exports__ = (() => {
     }
   });
 
-  // ../constants/src/index.ts
-  var init_src = __esm({
-    "../constants/src/index.ts"() {
+  // src/constants/index.ts
+  var init_constants = __esm({
+    "src/constants/index.ts"() {
       "use strict";
       init_webgl_constants();
     }
@@ -847,6 +847,24 @@ var __exports__ = (() => {
     }
   });
 
+  // src/context/helpers/webgl-context-data.ts
+  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({
+    "src/context/helpers/webgl-context-data.ts"() {
+      "use strict";
+    }
+  });
+
   // src/context/debug/spector.ts
   async function loadSpectorJS(props) {
     if (!globalThis.SPECTOR) {
@@ -888,9 +906,10 @@ var __exports__ = (() => {
     }
     if (props.gl) {
       const gl = props.gl;
-      const device = gl.device;
+      const contextData = getWebGLContextData(gl);
+      const device = contextData.device;
       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?.stopCapture();
@@ -904,6 +923,7 @@ var __exports__ = (() => {
       "use strict";
       import_core = __toESM(require_core(), 1);
       init_load_script();
+      init_webgl_context_data();
       LOG_LEVEL = 1;
       spector = null;
       initialized = false;
@@ -1000,7 +1020,7 @@ var __exports__ = (() => {
   });
 
   // src/context/debug/webgl-developer-tools.ts
-  function getWebGLContextData(gl) {
+  function getWebGLContextData2(gl) {
     gl.luma = gl.luma || {};
     return gl.luma;
   }
@@ -1015,7 +1035,7 @@ var __exports__ = (() => {
     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) {
@@ -1023,7 +1043,7 @@ var __exports__ = (() => {
       import_core2.log.warn("webgl-debug not loaded")();
       return gl;
     }
-    const data = getWebGLContextData(gl);
+    const data = getWebGLContextData2(gl);
     if (data.debugContext) {
       return data.debugContext;
     }
@@ -1045,6 +1065,7 @@ var __exports__ = (() => {
     const debugContext = Object.create(WebGLDebugContext);
     data.realContext = gl;
     data.debugContext = debugContext;
+    debugContext.luma = data;
     debugContext.debug = true;
     return debugContext;
   }
@@ -1059,16 +1080,24 @@ var __exports__ = (() => {
     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) {
@@ -1082,7 +1111,7 @@ var __exports__ = (() => {
     "src/context/debug/webgl-developer-tools.ts"() {
       "use strict";
       import_core2 = __toESM(require_core(), 1);
-      init_src();
+      init_constants();
       init_dist();
       init_load_script();
       WEBGL_DEBUG_CDN_URL = "https://unpkg.com/webgl-debug@2.0.1/index.js";
@@ -1621,7 +1650,7 @@ var __exports__ = (() => {
         }
       }
     }
-    const cache = gl.state && gl.state.cache;
+    const cache = gl.lumaState?.cache;
     if (cache) {
       for (const key in compositeSetters) {
         const compositeSetter = GL_COMPOSITE_PARAMETER_SETTERS[key];
@@ -1744,7 +1773,7 @@ var __exports__ = (() => {
       init_webgl_parameter_tables();
       WebGLStateTracker = class {
         static get(gl) {
-          return gl.state;
+          return gl.lumaState;
         }
         gl;
         program = null;
@@ -1782,7 +1811,7 @@ var __exports__ = (() => {
             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];
@@ -1822,46 +1851,61 @@ var __exports__ = (() => {
   // src/context/helpers/create-browser-context.ts
   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({
     "src/context/helpers/create-browser-context.ts"() {
       "use strict";
+      init_webgl_context_data();
     }
   });
 
@@ -1939,6 +1983,8 @@ var __exports__ = (() => {
     }
     const gpuVendor = identifyGPUVendor(vendor, renderer);
     switch (gpuVendor) {
+      case "apple":
+        return isAppleSiliconGPU(vendor, renderer) ? "integrated" : "unknown";
       case "intel":
         return "integrated";
       case "software":
@@ -1949,6 +1995,9 @@ var __exports__ = (() => {
         return "discrete";
     }
   }
+  function isAppleSiliconGPU(vendor, renderer) {
+    return /Apple (M\d|A\d|GPU)/i.test(`${vendor} ${renderer}`);
+  }
   var init_webgl_device_info = __esm({
     "src/adapter/device-helpers/webgl-device-info.ts"() {
       "use strict";
@@ -1997,8 +2046,27 @@ var __exports__ = (() => {
     return feature in TEXTURE_FEATURES;
   }
   function checkTextureFeature(gl, feature, extensions) {
-    const textureExtensions = TEXTURE_FEATURES[feature] || [];
-    return textureExtensions.every((extension) => getWebGLExtension(gl, extension, extensions));
+    return hasTextureFeature(gl, feature, extensions, /* @__PURE__ */ new Set());
+  }
+  function hasTextureFeature(gl, feature, extensions, seenFeatures) {
+    const definition = TEXTURE_FEATURES[feature];
+    if (!definition) {
+      return false;
+    }
+    if (seenFeatures.has(feature)) {
+      return false;
+    }
+    seenFeatures.add(feature);
+    const hasDependentFeatures = (definition.features || []).every(
+      (dependentFeature) => hasTextureFeature(gl, dependentFeature, extensions, seenFeatures)
+    );
+    seenFeatures.delete(feature);
+    if (!hasDependentFeatures) {
+      return false;
+    }
+    return (definition.extensions || []).every(
+      (extension) => Boolean(getWebGLExtension(gl, extension, extensions))
+    );
   }
   function getTextureFormatCapabilitiesWebGL(gl, formatSupport, extensions) {
     let supported = formatSupport.create;
@@ -2009,12 +2077,17 @@ var __exports__ = (() => {
     if (webglFormatInfo?.x) {
       supported = supported && Boolean(getWebGLExtension(gl, webglFormatInfo.x, extensions));
     }
+    if (formatSupport.format === "stencil8") {
+      supported = false;
+    }
+    const renderFeatureSupported = webglFormatInfo?.r === false ? false : webglFormatInfo?.r === void 0 || checkTextureFeature(gl, webglFormatInfo.r, extensions);
+    const renderable = supported && formatSupport.render && renderFeatureSupported && isColorRenderableTextureFormat(gl, formatSupport.format, extensions);
     return {
       format: formatSupport.format,
       // @ts-ignore
       create: supported && formatSupport.create,
       // @ts-ignore
-      render: supported && formatSupport.render,
+      render: renderable,
       // @ts-ignore
       filter: supported && formatSupport.filter,
       // @ts-ignore
@@ -2023,6 +2096,45 @@ var __exports__ = (() => {
       store: supported && formatSupport.store
     };
   }
+  function isColorRenderableTextureFormat(gl, format, extensions) {
+    const webglFormatInfo = WEBGL_TEXTURE_FORMATS[format];
+    const internalFormat = webglFormatInfo?.gl;
+    if (internalFormat === void 0) {
+      return false;
+    }
+    if (webglFormatInfo?.x && !getWebGLExtension(gl, webglFormatInfo.x, extensions)) {
+      return false;
+    }
+    const previousTexture = gl.getParameter(32873 /* TEXTURE_BINDING_2D */);
+    const previousFramebuffer = gl.getParameter(36006 /* FRAMEBUFFER_BINDING */);
+    const texture = gl.createTexture();
+    const framebuffer = gl.createFramebuffer();
+    if (!texture || !framebuffer) {
+      return false;
+    }
+    const noError = Number(0 /* NO_ERROR */);
+    let error = Number(gl.getError());
+    while (error !== noError) {
+      error = gl.getError();
+    }
+    let renderable = false;
+    try {
+      gl.bindTexture(3553 /* TEXTURE_2D */, texture);
+      gl.texStorage2D(3553 /* TEXTURE_2D */, 1, internalFormat, 1, 1);
+      if (Number(gl.getError()) !== noError) {
+        return false;
+      }
+      gl.bindFramebuffer(36160 /* FRAMEBUFFER */, framebuffer);
+      gl.framebufferTexture2D(36160 /* FRAMEBUFFER */, 36064 /* COLOR_ATTACHMENT0 */, 3553 /* TEXTURE_2D */, texture, 0);
+      renderable = Number(gl.checkFramebufferStatus(36160 /* FRAMEBUFFER */)) === Number(36053 /* FRAMEBUFFER_COMPLETE */) && Number(gl.getError()) === noError;
+    } finally {
+      gl.bindFramebuffer(36160 /* FRAMEBUFFER */, previousFramebuffer);
+      gl.deleteFramebuffer(framebuffer);
+      gl.bindTexture(3553 /* TEXTURE_2D */, previousTexture);
+      gl.deleteTexture(texture);
+    }
+    return renderable;
+  }
   function getTextureFormatWebGL(format) {
     const formatData = WEBGL_TEXTURE_FORMATS[format];
     const webglFormat = convertTextureFormatToGL(format);
@@ -2078,7 +2190,7 @@ var __exports__ = (() => {
     }
     return webglFormat;
   }
-  var import_core3, X_S3TC, X_S3TC_SRGB, X_RGTC, X_BPTC, X_ETC2, X_ASTC, X_ETC1, X_PVRTC, X_ATC, EXT_texture_norm16, EXT_render_snorm, EXT_color_buffer_float, TEXTURE_FEATURES, WEBGL_TEXTURE_FORMATS;
+  var import_core3, X_S3TC, X_S3TC_SRGB, X_RGTC, X_BPTC, X_ETC2, X_ASTC, X_ETC1, X_PVRTC, X_ATC, EXT_texture_norm16, EXT_render_snorm, EXT_color_buffer_float, SNORM8_COLOR_RENDERABLE, NORM16_COLOR_RENDERABLE, SNORM16_COLOR_RENDERABLE, FLOAT16_COLOR_RENDERABLE, FLOAT32_COLOR_RENDERABLE, RGB9E5UFLOAT_COLOR_RENDERABLE, TEXTURE_FEATURES, WEBGL_TEXTURE_FORMATS;
   var init_webgl_texture_table = __esm({
     "src/adapter/converters/webgl-texture-table.ts"() {
       "use strict";
@@ -2097,44 +2209,51 @@ var __exports__ = (() => {
       EXT_texture_norm16 = "EXT_texture_norm16";
       EXT_render_snorm = "EXT_render_snorm";
       EXT_color_buffer_float = "EXT_color_buffer_float";
+      SNORM8_COLOR_RENDERABLE = "snorm8-renderable-webgl";
+      NORM16_COLOR_RENDERABLE = "norm16-renderable-webgl";
+      SNORM16_COLOR_RENDERABLE = "snorm16-renderable-webgl";
+      FLOAT16_COLOR_RENDERABLE = "float16-renderable-webgl";
+      FLOAT32_COLOR_RENDERABLE = "float32-renderable-webgl";
+      RGB9E5UFLOAT_COLOR_RENDERABLE = "rgb9e5ufloat-renderable-webgl";
       TEXTURE_FEATURES = {
-        "float32-renderable-webgl": ["EXT_color_buffer_float"],
-        "float16-renderable-webgl": ["EXT_color_buffer_half_float"],
-        "rgb9e5ufloat-renderable-webgl": ["WEBGL_render_shared_exponent"],
-        "snorm8-renderable-webgl": [EXT_render_snorm],
-        "norm16-renderable-webgl": [EXT_texture_norm16],
-        "snorm16-renderable-webgl": [EXT_texture_norm16, EXT_render_snorm],
-        "float32-filterable": ["OES_texture_float_linear"],
-        "float16-filterable-webgl": ["OES_texture_half_float_linear"],
-        "texture-filterable-anisotropic-webgl": ["EXT_texture_filter_anisotropic"],
-        "texture-blend-float-webgl": ["EXT_float_blend"],
-        "texture-compression-bc": [X_S3TC, X_S3TC_SRGB, X_RGTC, X_BPTC],
+        "float32-renderable-webgl": { extensions: [EXT_color_buffer_float] },
+        "float16-renderable-webgl": { extensions: ["EXT_color_buffer_half_float"] },
+        "rgb9e5ufloat-renderable-webgl": { extensions: ["WEBGL_render_shared_exponent"] },
+        "snorm8-renderable-webgl": { extensions: [EXT_render_snorm] },
+        "norm16-webgl": { extensions: [EXT_texture_norm16] },
+        "norm16-renderable-webgl": { features: ["norm16-webgl"] },
+        "snorm16-renderable-webgl": { features: ["norm16-webgl"], extensions: [EXT_render_snorm] },
+        "float32-filterable": { extensions: ["OES_texture_float_linear"] },
+        "float16-filterable-webgl": { extensions: ["OES_texture_half_float_linear"] },
+        "texture-filterable-anisotropic-webgl": { extensions: ["EXT_texture_filter_anisotropic"] },
+        "texture-blend-float-webgl": { extensions: ["EXT_float_blend"] },
+        "texture-compression-bc": { extensions: [X_S3TC, X_S3TC_SRGB, X_RGTC, X_BPTC] },
         // 'texture-compression-bc3-srgb-webgl': [X_S3TC_SRGB],
         // 'texture-compression-bc3-webgl': [X_S3TC],
-        "texture-compression-bc5-webgl": [X_RGTC],
-        "texture-compression-bc7-webgl": [X_BPTC],
-        "texture-compression-etc2": [X_ETC2],
-        "texture-compression-astc": [X_ASTC],
-        "texture-compression-etc1-webgl": [X_ETC1],
-        "texture-compression-pvrtc-webgl": [X_PVRTC],
-        "texture-compression-atc-webgl": [X_ATC]
+        "texture-compression-bc5-webgl": { extensions: [X_RGTC] },
+        "texture-compression-bc7-webgl": { extensions: [X_BPTC] },
+        "texture-compression-etc2": { extensions: [X_ETC2] },
+        "texture-compression-astc": { extensions: [X_ASTC] },
+        "texture-compression-etc1-webgl": { extensions: [X_ETC1] },
+        "texture-compression-pvrtc-webgl": { extensions: [X_PVRTC] },
+        "texture-compression-atc-webgl": { extensions: [X_ATC] }
       };
       WEBGL_TEXTURE_FORMATS = {
         // 8-bit formats
         "r8unorm": { gl: 33321 /* R8 */, rb: true },
-        "r8snorm": { gl: 36756 /* R8_SNORM */ },
+        "r8snorm": { gl: 36756 /* R8_SNORM */, r: SNORM8_COLOR_RENDERABLE },
         "r8uint": { gl: 33330 /* R8UI */, rb: true },
         "r8sint": { gl: 33329 /* R8I */, rb: true },
         // 16-bit formats
         "rg8unorm": { gl: 33323 /* RG8 */, rb: true },
-        "rg8snorm": { gl: 36757 /* RG8_SNORM */ },
+        "rg8snorm": { gl: 36757 /* RG8_SNORM */, r: SNORM8_COLOR_RENDERABLE },
         "rg8uint": { gl: 33336 /* RG8UI */, rb: true },
         "rg8sint": { gl: 33335 /* RG8I */, rb: true },
         "r16uint": { gl: 33332 /* R16UI */, rb: true },
         "r16sint": { gl: 33331 /* R16I */, rb: true },
-        "r16float": { gl: 33325 /* R16F */, rb: true },
-        "r16unorm": { gl: 33322 /* R16_EXT */, rb: true },
-        "r16snorm": { gl: 36760 /* R16_SNORM_EXT */ },
+        "r16float": { gl: 33325 /* R16F */, rb: true, r: FLOAT16_COLOR_RENDERABLE },
+        "r16unorm": { gl: 33322 /* R16_EXT */, rb: true, r: NORM16_COLOR_RENDERABLE },
+        "r16snorm": { gl: 36760 /* R16_SNORM_EXT */, r: SNORM16_COLOR_RENDERABLE },
         // Packed 16-bit formats
         "rgba4unorm-webgl": { gl: 32854 /* RGBA4 */, rb: true },
         "rgb565unorm-webgl": { gl: 36194 /* RGB565 */, rb: true },
@@ -2145,7 +2264,7 @@ var __exports__ = (() => {
         // 32-bit formats
         "rgba8unorm": { gl: 32856 /* RGBA8 */ },
         "rgba8unorm-srgb": { gl: 35907 /* SRGB8_ALPHA8 */ },
-        "rgba8snorm": { gl: 36759 /* RGBA8_SNORM */ },
+        "rgba8snorm": { gl: 36759 /* RGBA8_SNORM */, r: SNORM8_COLOR_RENDERABLE },
         "rgba8uint": { gl: 36220 /* RGBA8UI */ },
         "rgba8sint": { gl: 36238 /* RGBA8I */ },
         // reverse colors, webgpu only
@@ -2153,38 +2272,38 @@ var __exports__ = (() => {
         "bgra8unorm-srgb": {},
         "rg16uint": { gl: 33338 /* RG16UI */ },
         "rg16sint": { gl: 33337 /* RG16I */ },
-        "rg16float": { gl: 33327 /* RG16F */, rb: true },
-        "rg16unorm": { gl: 33324 /* RG16_EXT */ },
-        "rg16snorm": { gl: 36761 /* RG16_SNORM_EXT */ },
+        "rg16float": { gl: 33327 /* RG16F */, rb: true, r: FLOAT16_COLOR_RENDERABLE },
+        "rg16unorm": { gl: 33324 /* RG16_EXT */, r: NORM16_COLOR_RENDERABLE },
+        "rg16snorm": { gl: 36761 /* RG16_SNORM_EXT */, r: SNORM16_COLOR_RENDERABLE },
         "r32uint": { gl: 33334 /* R32UI */, rb: true },
         "r32sint": { gl: 33333 /* R32I */, rb: true },
-        "r32float": { gl: 33326 /* R32F */ },
+        "r32float": { gl: 33326 /* R32F */, r: FLOAT32_COLOR_RENDERABLE },
         // Packed 32-bit formats
-        "rgb9e5ufloat": { gl: 35901 /* RGB9_E5 */ },
+        "rgb9e5ufloat": { gl: 35901 /* RGB9_E5 */, r: RGB9E5UFLOAT_COLOR_RENDERABLE },
         // , filter: true},
         "rg11b10ufloat": { gl: 35898 /* R11F_G11F_B10F */, rb: true },
         "rgb10a2unorm": { gl: 32857 /* RGB10_A2 */, rb: true },
         "rgb10a2uint": { gl: 36975 /* RGB10_A2UI */, rb: true },
         // 48-bit formats
-        "rgb16unorm-webgl": { gl: 32852 /* RGB16_EXT */ },
+        "rgb16unorm-webgl": { gl: 32852 /* RGB16_EXT */, r: false },
         // rgb not renderable
-        "rgb16snorm-webgl": { gl: 36762 /* RGB16_SNORM_EXT */ },
+        "rgb16snorm-webgl": { gl: 36762 /* RGB16_SNORM_EXT */, r: false },
         // rgb not renderable
         // 64-bit formats
         "rg32uint": { gl: 33340 /* RG32UI */, rb: true },
         "rg32sint": { gl: 33339 /* RG32I */, rb: true },
-        "rg32float": { gl: 33328 /* RG32F */, rb: true },
+        "rg32float": { gl: 33328 /* RG32F */, rb: true, r: FLOAT32_COLOR_RENDERABLE },
         "rgba16uint": { gl: 36214 /* RGBA16UI */, rb: true },
         "rgba16sint": { gl: 36232 /* RGBA16I */, rb: true },
-        "rgba16float": { gl: 34842 /* RGBA16F */ },
-        "rgba16unorm": { gl: 32859 /* RGBA16_EXT */, rb: true },
-        "rgba16snorm": { gl: 36763 /* RGBA16_SNORM_EXT */ },
+        "rgba16float": { gl: 34842 /* RGBA16F */, r: FLOAT16_COLOR_RENDERABLE },
+        "rgba16unorm": { gl: 32859 /* RGBA16_EXT */, rb: true, r: NORM16_COLOR_RENDERABLE },
+        "rgba16snorm": { gl: 36763 /* RGBA16_SNORM_EXT */, r: SNORM16_COLOR_RENDERABLE },
         // 96-bit formats (deprecated!)
-        "rgb32float-webgl": { gl: 34837 /* RGB32F */, x: EXT_color_buffer_float, dataFormat: 6407 /* RGB */, types: [5126 /* FLOAT */] },
+        "rgb32float-webgl": { gl: 34837 /* RGB32F */, x: EXT_color_buffer_float, r: FLOAT32_COLOR_RENDERABLE, dataFormat: 6407 /* RGB */, types: [5126 /* FLOAT */] },
         // 128-bit formats
         "rgba32uint": { gl: 36208 /* RGBA32UI */, rb: true },
         "rgba32sint": { gl: 36226 /* RGBA32I */, rb: true },
-        "rgba32float": { gl: 34836 /* RGBA32F */, rb: true },
+        "rgba32float": { gl: 34836 /* RGBA32F */, rb: true, r: FLOAT32_COLOR_RENDERABLE },
         // Depth and stencil formats
         "stencil8": { gl: 36168 /* STENCIL_INDEX8 */, rb: true },
         // 8 stencil bits
@@ -2242,8 +2361,8 @@ var __exports__ = (() => {
         "astc-8x6-unorm-srgb": { gl: 37846 /* COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR */ },
         "astc-8x8-unorm": { gl: 37815 /* COMPRESSED_RGBA_ASTC_8x8_KHR */ },
         "astc-8x8-unorm-srgb": { gl: 37847 /* COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR */ },
-        "astc-10x5-unorm": { gl: 37819 /* COMPRESSED_RGBA_ASTC_10x10_KHR */ },
-        "astc-10x5-unorm-srgb": { gl: 37851 /* COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR */ },
+        "astc-10x5-unorm": { gl: 37816 /* COMPRESSED_RGBA_ASTC_10x5_KHR */ },
+        "astc-10x5-unorm-srgb": { gl: 37848 /* COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR */ },
         "astc-10x6-unorm": { gl: 37817 /* COMPRESSED_RGBA_ASTC_10x6_KHR */ },
         "astc-10x6-unorm-srgb": { gl: 37849 /* COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR */ },
         "astc-10x8-unorm": { gl: 37818 /* COMPRESSED_RGBA_ASTC_10x8_KHR */ },
@@ -2257,7 +2376,7 @@ var __exports__ = (() => {
         // WEBGL_compressed_texture_pvrtc
         "pvrtc-rgb4unorm-webgl": { gl: 35840 /* COMPRESSED_RGB_PVRTC_4BPPV1_IMG */ },
         "pvrtc-rgba4unorm-webgl": { gl: 35842 /* COMPRESSED_RGBA_PVRTC_4BPPV1_IMG */ },
-        "pvrtc-rbg2unorm-webgl": { gl: 35841 /* COMPRESSED_RGB_PVRTC_2BPPV1_IMG */ },
+        "pvrtc-rgb2unorm-webgl": { gl: 35841 /* COMPRESSED_RGB_PVRTC_2BPPV1_IMG */ },
         "pvrtc-rgba2unorm-webgl": { gl: 35843 /* COMPRESSED_RGBA_PVRTC_2BPPV1_IMG */ },
         // WEBGL_compressed_texture_etc1
         "etc1-rbg-unorm-webgl": { gl: 36196 /* COMPRESSED_RGB_ETC1_WEBGL */ },
@@ -2281,12 +2400,11 @@ var __exports__ = (() => {
         // optional WebGPU features
         "depth-clip-control": "EXT_depth_clamp",
         // TODO these seem subtly different
-        // 'timestamp-query' // GPUQueryType "timestamp-query"
+        "timestamp-query": "EXT_disjoint_timer_query_webgl2",
         // "indirect-first-instance"
         // Textures are handled by getTextureFeatures()
         // 'depth32float-stencil8' // GPUTextureFormat 'depth32float-stencil8'
         // optional WebGL features
-        "timer-query-webgl": "EXT_disjoint_timer_query_webgl2",
         "compilation-status-async-webgl": "KHR_parallel_shader_compile",
         "polygon-mode-webgl": "WEBGL_polygon_mode",
         "provoking-vertex-webgl": "WEBGL_provoking_vertex",
@@ -2586,6 +2704,15 @@ var __exports__ = (() => {
           }
           gl.bindTexture(texture.glTarget, null);
         }
+        /** Default framebuffer resize is managed by canvas size and should be a no-op. */
+        resizeAttachments(width, height) {
+          if (this.handle === null) {
+            this.width = width;
+            this.height = height;
+            return;
+          }
+          super.resizeAttachments(width, height);
+        }
       };
     }
   });
@@ -2608,14 +2735,83 @@ var __exports__ = (() => {
           super(props);
           this.device = device;
           this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
-          this._updateDevice();
+          this._configureDevice();
+        }
+        // IMPLEMENTATION OF ABSTRACT METHODS
+        _configureDevice() {
+          const shouldResize = this.drawingBufferWidth !== this._framebuffer?.width || this.drawingBufferHeight !== this._framebuffer?.height;
+          if (shouldResize) {
+            this._framebuffer?.resize([this.drawingBufferWidth, this.drawingBufferHeight]);
+          }
         }
-        getCurrentFramebuffer() {
-          this._framebuffer = this._framebuffer || new WEBGLFramebuffer(this.device, { handle: null });
+        _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;
         }
-        // IMPLEMENTATION OF ABSTRACT METHODS
-        _updateDevice() {
+      };
+    }
+  });
+
+  // src/adapter/webgl-presentation-context.ts
+  var import_core8, WebGLPresentationContext;
+  var init_webgl_presentation_context = __esm({
+    "src/adapter/webgl-presentation-context.ts"() {
+      "use strict";
+      import_core8 = __toESM(require_core(), 1);
+      WebGLPresentationContext = class extends import_core8.PresentationContext {
+        device;
+        handle = null;
+        context2d;
+        get [Symbol.toStringTag]() {
+          return "WebGLPresentationContext";
+        }
+        constructor(device, props = {}) {
+          super(props);
+          this.device = device;
+          const contextLabel = `${this[Symbol.toStringTag]}(${this.id})`;
+          const defaultCanvasContext = this.device.getDefaultCanvasContext();
+          if (!defaultCanvasContext.offscreenCanvas) {
+            throw new Error(
+              `${contextLabel}: WebGL PresentationContext requires the default CanvasContext canvas to be an OffscreenCanvas`
+            );
+          }
+          const context2d = this.canvas.getContext("2d");
+          if (!context2d) {
+            throw new Error(`${contextLabel}: Failed to create 2d presentation context`);
+          }
+          this.context2d = context2d;
+          this._setAutoCreatedCanvasId(`${this.device.id}-presentation-canvas`);
+          this._configureDevice();
+          this._startObservers();
+        }
+        present() {
+          this._resizeDrawingBufferIfNeeded();
+          this.device.submit();
+          const defaultCanvasContext = this.device.getDefaultCanvasContext();
+          const [sourceWidth, sourceHeight] = defaultCanvasContext.getDrawingBufferSize();
+          if (this.drawingBufferWidth === 0 || this.drawingBufferHeight === 0 || sourceWidth === 0 || sourceHeight === 0 || defaultCanvasContext.canvas.width === 0 || defaultCanvasContext.canvas.height === 0) {
+            return;
+          }
+          if (sourceWidth !== this.drawingBufferWidth || sourceHeight !== this.drawingBufferHeight || defaultCanvasContext.canvas.width !== this.drawingBufferWidth || defaultCanvasContext.canvas.height !== this.drawingBufferHeight) {
+            throw new Error(
+              `${this[Symbol.toStringTag]}(${this.id}): Default canvas context size ${sourceWidth}x${sourceHeight} does not match presentation size ${this.drawingBufferWidth}x${this.drawingBufferHeight}`
+            );
+          }
+          this.context2d.clearRect(0, 0, this.drawingBufferWidth, this.drawingBufferHeight);
+          this.context2d.drawImage(defaultCanvasContext.canvas, 0, 0);
+        }
+        _configureDevice() {
+        }
+        _getCurrentFramebuffer(options) {
+          const defaultCanvasContext = this.device.getDefaultCanvasContext();
+          defaultCanvasContext.setDrawingBufferSize(this.drawingBufferWidth, this.drawingBufferHeight);
+          return defaultCanvasContext.getCurrentFramebuffer(options);
         }
       };
     }
@@ -2637,35 +2833,35 @@ var __exports__ = (() => {
 
   // src/adapter/resources/webgl-buffer.ts
   function getWebGLTarget(usage) {
-    if (usage & import_core8.Buffer.INDEX) {
+    if (usage & import_core9.Buffer.INDEX) {
       return 34963 /* ELEMENT_ARRAY_BUFFER */;
     }
-    if (usage & import_core8.Buffer.VERTEX) {
+    if (usage & import_core9.Buffer.VERTEX) {
       return 34962 /* ARRAY_BUFFER */;
     }
-    if (usage & import_core8.Buffer.UNIFORM) {
+    if (usage & import_core9.Buffer.UNIFORM) {
       return 35345 /* UNIFORM_BUFFER */;
     }
     return 34962 /* ARRAY_BUFFER */;
   }
   function getWebGLUsage(usage) {
-    if (usage & import_core8.Buffer.INDEX) {
+    if (usage & import_core9.Buffer.INDEX) {
       return 35044 /* STATIC_DRAW */;
     }
-    if (usage & import_core8.Buffer.VERTEX) {
+    if (usage & import_core9.Buffer.VERTEX) {
       return 35044 /* STATIC_DRAW */;
     }
-    if (usage & import_core8.Buffer.UNIFORM) {
+    if (usage & import_core9.Buffer.UNIFORM) {
       return 35048 /* DYNAMIC_DRAW */;
     }
     return 35044 /* STATIC_DRAW */;
   }
-  var import_core8, WEBGLBuffer;
+  var import_core9, WEBGLBuffer;
   var init_webgl_buffer = __esm({
     "src/adapter/resources/webgl-buffer.ts"() {
       "use strict";
-      import_core8 = __toESM(require_core(), 1);
-      WEBGLBuffer = class extends import_core8.Buffer {
+      import_core9 = __toESM(require_core(), 1);
+      WEBGLBuffer = class extends import_core9.Buffer {
         device;
         gl;
         handle;
@@ -2700,8 +2896,12 @@ var __exports__ = (() => {
         destroy() {
           if (!this.destroyed && this.handle) {
             this.removeStats();
-            this.trackDeallocatedMemory();
-            this.gl.deleteBuffer(this.handle);
+            if (!this.props.handle) {
+              this.trackDeallocatedMemory();
+              this.gl.deleteBuffer(this.handle);
+            } else {
+              this.trackDeallocatedReferencedMemory("Buffer");
+            }
             this.destroyed = true;
             this.handle = null;
           }
@@ -2716,7 +2916,11 @@ var __exports__ = (() => {
           this.bytesUsed = byteLength;
           this.byteLength = byteLength;
           this._setDebugData(data, byteOffset, byteLength);
-          this.trackAllocatedMemory(byteLength);
+          if (!this.props.handle) {
+            this.trackAllocatedMemory(byteLength);
+          } else {
+            this.trackReferencedMemory(byteLength, "Buffer");
+          }
         }
         // Allocate a GPU buffer of specified size.
         _initWithByteLength(byteLength) {
@@ -2731,7 +2935,11 @@ var __exports__ = (() => {
           this.bytesUsed = byteLength;
           this.byteLength = byteLength;
           this._setDebugData(null, 0, byteLength);
-          this.trackAllocatedMemory(byteLength);
+          if (!this.props.handle) {
+            this.trackAllocatedMemory(byteLength);
+          } else {
+            this.trackReferencedMemory(byteLength, "Buffer");
+          }
           return this;
         }
         write(data, byteOffset = 0) {
@@ -2782,9 +2990,20 @@ var __exports__ = (() => {
       if (line.length <= 1) {
         continue;
       }
+      const lineWithTrimmedWhitespace = line.trim();
       const segments = line.split(":");
+      const trimmedMessageType = segments[0]?.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),
@@ -2794,12 +3013,21 @@ var __exports__ = (() => {
         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)) {
+      if (Number.isNaN(lineNum)) {
         lineNum = 0;
       }
       let linePos = parseInt(linePosition, 10);
-      if (isNaN(linePos)) {
+      if (Number.isNaN(linePos)) {
         linePos = 0;
       }
       messages.push({
@@ -2824,13 +3052,13 @@ var __exports__ = (() => {
   });
 
   // src/adapter/resources/webgl-shader.ts
-  var import_core9, WEBGLShader;
+  var import_core10, WEBGLShader;
   var init_webgl_shader = __esm({
     "src/adapter/resources/webgl-shader.ts"() {
       "use strict";
-      import_core9 = __toESM(require_core(), 1);
+      import_core10 = __toESM(require_core(), 1);
       init_parse_shader_compiler_log();
-      WEBGLShader = class extends import_core9.Shader {
+      WEBGLShader = class extends import_core10.Shader {
         device;
         handle;
         constructor(device, props) {
@@ -2847,7 +3075,12 @@ var __exports__ = (() => {
               throw new Error(this.props.stage);
           }
           device._setWebGLDebugMetadata(this.handle, this, { spector: this.props });
-          this._compile(this.source);
+          const compilationStatus = this._compile(this.source);
+          if (compilationStatus && typeof compilationStatus.catch === "function") {
+            compilationStatus.catch(() => {
+              this.compilationStatus = "error";
+            });
+          }
         }
         destroy() {
           if (this.handle) {
@@ -2878,7 +3111,7 @@ var __exports__ = (() => {
         }
         // PRIVATE METHODS
         /** Compile a shader and get compilation status */
-        async _compile(source) {
+        _compile(source) {
           source = source.startsWith("#version ") ? source : `#version 300 es
 ${source}`;
           const { gl } = this.device;
@@ -2896,11 +3129,12 @@ ${source}`;
             }
             return;
           }
-          import_core9.log.once(1, "Shader compilation is asynchronous")();
-          await this._waitForCompilationComplete();
-          import_core9.log.info(2, `Shader ${this.id} - async compilation complete: ${this.compilationStatus}`)();
-          this._getCompilationStatus();
-          this.debugShader();
+          import_core10.log.once(1, "Shader compilation is asynchronous")();
+          return this._waitForCompilationComplete().then(() => {
+            import_core10.log.info(2, `Shader ${this.id} - async compilation complete: ${this.compilationStatus}`)();
+            this._getCompilationStatus();
+            this.debugShader();
+          });
         }
         /** Use KHR_parallel_shader_compile extension if available */
         async _waitForCompilationComplete() {
@@ -3059,13 +3293,16 @@ ${source}`;
       parameters.depthCompare !== "always" ? gl.enable(2929 /* DEPTH_TEST */) : gl.disable(2929 /* DEPTH_TEST */);
       gl.depthFunc(convertCompareFunction("depthCompare", parameters.depthCompare));
     }
+    if (parameters.clearDepth !== void 0) {
+      gl.clearDepth(parameters.clearDepth);
+    }
     if (parameters.stencilWriteMask) {
       const mask = parameters.stencilWriteMask;
       gl.stencilMaskSeparate(1028 /* FRONT */, mask);
       gl.stencilMaskSeparate(1029 /* BACK */, mask);
     }
     if (parameters.stencilReadMask) {
-      import_core10.log.warn("stencilReadMask not supported under WebGL");
+      import_core11.log.warn("stencilReadMask not supported under WebGL");
     }
     if (parameters.stencilCompare) {
       const mask = parameters.stencilReadMask || 4294967295;
@@ -3199,11 +3436,11 @@ ${source}`;
     }
     return isEmpty;
   }
-  var import_core10;
+  var import_core11;
   var init_device_parameters = __esm({
     "src/adapter/converters/device-parameters.ts"() {
       "use strict";
-      import_core10 = __toESM(require_core(), 1);
+      import_core11 = __toESM(require_core(), 1);
       init_unified_parameter_api();
     }
   });
@@ -3296,13 +3533,13 @@ ${source}`;
   });
 
   // src/adapter/resources/webgl-sampler.ts
-  var import_core11, WEBGLSampler;
+  var import_core12, WEBGLSampler;
   var init_webgl_sampler = __esm({
     "src/adapter/resources/webgl-sampler.ts"() {
       "use strict";
-      import_core11 = __toESM(require_core(), 1);
+      import_core12 = __toESM(require_core(), 1);
       init_sampler_parameters();
-      WEBGLSampler = class extends import_core11.Sampler {
+      WEBGLSampler = class extends import_core12.Sampler {
         device;
         handle;
         parameters;
@@ -3378,19 +3615,19 @@ ${source}`;
   });
 
   // src/adapter/resources/webgl-texture-view.ts
-  var import_core12, WEBGLTextureView;
+  var import_core13, WEBGLTextureView;
   var init_webgl_texture_view = __esm({
     "src/adapter/resources/webgl-texture-view.ts"() {
       "use strict";
-      import_core12 = __toESM(require_core(), 1);
-      WEBGLTextureView = class extends import_core12.TextureView {
+      import_core13 = __toESM(require_core(), 1);
+      WEBGLTextureView = class extends import_core13.TextureView {
         device;
         gl;
         handle;
         // Does not have a WebGL representation
         texture;
         constructor(device, props) {
-          super(device, { ...import_core12.Texture.defaultProps, ...props });
+          super(device, { ...import_core13.Texture.defaultProps, ...props });
           this.device = device;
           this.gl = this.device.gl;
           this.handle = null;
@@ -3400,7 +3637,54 @@ ${source}`;
     }
   });
 
+  // src/adapter/converters/shader-formats.ts
+  function convertGLDataTypeToDataType(type) {
+    return GL_DATA_TYPE_MAP[type];
+  }
+  var GL_DATA_TYPE_MAP;
+  var init_shader_formats = __esm({
+    "src/adapter/converters/shader-formats.ts"() {
+      "use strict";
+      GL_DATA_TYPE_MAP = {
+        [5124 /* INT */]: "sint32",
+        [5125 /* UNSIGNED_INT */]: "uint32",
+        [5122 /* SHORT */]: "sint16",
+        [5123 /* UNSIGNED_SHORT */]: "uint16",
+        [5120 /* BYTE */]: "sint8",
+        [5121 /* UNSIGNED_BYTE */]: "uint8",
+        [5126 /* FLOAT */]: "float32",
+        [5131 /* HALF_FLOAT */]: "float16",
+        [33635 /* UNSIGNED_SHORT_5_6_5 */]: "uint16",
+        [32819 /* UNSIGNED_SHORT_4_4_4_4 */]: "uint16",
+        [32820 /* UNSIGNED_SHORT_5_5_5_1 */]: "uint16",
+        [33640 /* UNSIGNED_INT_2_10_10_10_REV */]: "uint32",
+        [35899 /* UNSIGNED_INT_10F_11F_11F_REV */]: "uint32",
+        [35902 /* UNSIGNED_INT_5_9_9_9_REV */]: "uint32",
+        [34042 /* UNSIGNED_INT_24_8 */]: "uint32",
+        [36269 /* FLOAT_32_UNSIGNED_INT_24_8_REV */]: "uint32"
+      };
+    }
+  });
+
   // src/adapter/resources/webgl-texture.ts
+  function getArrayBufferView(typedArray, byteOffset = 0) {
+    if (!byteOffset) {
+      return typedArray;
+    }
+    return new typedArray.constructor(
+      typedArray.buffer,
+      typedArray.byteOffset + byteOffset,
+      (typedArray.byteLength - byteOffset) / typedArray.BYTES_PER_ELEMENT
+    );
+  }
+  function getWebGLTextureSourceElementOffset(typedArray, byteOffset) {
+    if (byteOffset % typedArray.BYTES_PER_ELEMENT !== 0) {
+      throw new Error(
+        `Texture byteOffset ${byteOffset} must align to typed array element size ${typedArray.BYTES_PER_ELEMENT}`
+      );
+    }
+    return byteOffset / typedArray.BYTES_PER_ELEMENT;
+  }
   function getWebGLTextureTarget(dimension) {
     switch (dimension) {
       case "1d":
@@ -3421,16 +3705,17 @@ ${source}`;
   function getWebGLCubeFaceTarget(glTarget, dimension, level) {
     return dimension === "cube" ? 34069 /* TEXTURE_CUBE_MAP_POSITIVE_X */ + level : glTarget;
   }
-  var import_core13, WEBGLTexture;
+  var import_core14, WEBGLTexture;
   var init_webgl_texture = __esm({
     "src/adapter/resources/webgl-texture.ts"() {
       "use strict";
-      import_core13 = __toESM(require_core(), 1);
+      import_core14 = __toESM(require_core(), 1);
       init_webgl_texture_table();
       init_sampler_parameters();
       init_with_parameters();
       init_webgl_texture_view();
-      WEBGLTexture = class extends import_core13.Texture {
+      init_shader_formats();
+      WEBGLTexture = class extends import_core14.Texture {
         // readonly MAX_ATTRIBUTES: number;
         device;
         gl;
@@ -3459,8 +3744,12 @@ ${source}`;
         // state
         /** Texture binding slot - TODO - move to texture view? */
         _textureUnit = 0;
+        /** Cached framebuffer reused for color texture readback. */
+        _framebuffer = null;
+        /** Cache key for the currently attached readback subresource `${mipLevel}:${layer}`. */
+        _framebufferAttachmentKey = 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);
@@ -3473,29 +3762,43 @@ ${source}`;
           this.device._setWebGLDebugMetadata(this.handle, this, { spector: this.props });
           this.gl.bindTexture(this.glTarget, this.handle);
           const { dimension, width, height, depth, mipLevels, glTarget, glInternalFormat } = this;
-          switch (dimension) {
-            case "2d":
-            case "cube":
-              this.gl.texStorage2D(glTarget, mipLevels, glInternalFormat, width, height);
-              break;
-            case "2d-array":
-            case "3d":
-              this.gl.texStorage3D(glTarget, mipLevels, glInternalFormat, width, height, depth);
-              break;
-            default:
-              throw new Error(dimension);
+          if (!this.compressed) {
+            switch (dimension) {
+              case "2d":
+              case "cube":
+                this.gl.texStorage2D(glTarget, mipLevels, glInternalFormat, width, height);
+                break;
+              case "2d-array":
+              case "3d":
+                this.gl.texStorage3D(glTarget, mipLevels, glInternalFormat, width, height, depth);
+                break;
+              default:
+                throw new Error(dimension);
+            }
           }
           this.gl.bindTexture(this.glTarget, null);
           this._initializeData(props.data);
+          if (!this.props.handle) {
+            this.trackAllocatedMemory(this.getAllocatedByteLength(), "Texture");
+          } else {
+            this.trackReferencedMemory(this.getAllocatedByteLength(), "Texture");
+          }
           this.setSampler(this.props.sampler);
           this.view = new WEBGLTextureView(this.device, { ...this.props, texture: this });
           Object.seal(this);
         }
         destroy() {
           if (this.handle) {
-            this.gl.deleteTexture(this.handle);
+            this._framebuffer?.destroy();
+            this._framebuffer = null;
+            this._framebufferAttachmentKey = null;
             this.removeStats();
-            this.trackDeallocatedMemory("Texture");
+            if (!this.props.handle) {
+              this.gl.deleteTexture(this.handle);
+              this.trackDeallocatedMemory("Texture");
+            } else {
+              this.trackDeallocatedReferencedMemory("Texture");
+            }
             this.destroyed = true;
           }
         }
@@ -3507,53 +3810,6 @@ ${source}`;
           const parameters = convertSamplerParametersToWebGL(this.sampler.props);
           this._setSamplerParameters(parameters);
         }
-        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 { glFormat, glType, compressed } = this;
-          const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, z);
-          let unpackRowLength;
-          if (!this.compressed) {
-            const { bytesPerPixel } = this.device.getTextureFormatInfo(this.format);
-            if (bytesPerPixel) {
-              if (options.bytesPerRow % bytesPerPixel !== 0) {
-                throw new Error(
-                  `bytesPerRow (${options.bytesPerRow}) must be a multiple of bytesPerPixel (${bytesPerPixel}) for ${this.format}`
-                );
-              }
-              unpackRowLength = options.bytesPerRow / bytesPerPixel;
-            }
-          }
-          const glParameters = !this.compressed ? {
-            ...unpackRowLength !== void 0 ? { [3314 /* UNPACK_ROW_LENGTH */]: unpackRowLength } : {},
-            [32878 /* UNPACK_IMAGE_HEIGHT */]: options.rowsPerImage
-          } : {};
-          this.gl.bindTexture(glTarget, this.handle);
-          withGLParameters(this.gl, glParameters, () => {
-            switch (this.dimension) {
-              case "2d":
-              case "cube":
-                if (compressed) {
-                  this.gl.compressedTexSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, typedArray, byteOffset);
-                } else {
-                  this.gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, typedArray, byteOffset);
-                }
-                break;
-              case "2d-array":
-              case "3d":
-                if (compressed) {
-                  this.gl.compressedTexSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, typedArray, byteOffset);
-                } else {
-                  this.gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, typedArray, byteOffset);
-                }
-                break;
-              default:
-            }
-          });
-          this.gl.bindTexture(glTarget, null);
-        }
         copyExternalImage(options_) {
           const options = this._normalizeCopyExternalImageOptions(options_);
           if (options.sourceX || options.sourceY) {
@@ -3561,7 +3817,7 @@ ${source}`;
           }
           const { glFormat, glType } = this;
           const { image, depth, mipLevel, x, y, z, width, height } = options;
-          const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, depth);
+          const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, z);
           const glParameters = options.flipY ? { [37440 /* UNPACK_FLIP_Y_WEBGL */]: true } : {};
           this.gl.bindTexture(this.glTarget, this.handle);
           withGLParameters(this.gl, glParameters, () => {
@@ -3580,81 +3836,815 @@ ${source}`;
           this.gl.bindTexture(this.glTarget, null);
           return { width: options.width, height: options.height };
         }
-        // WEBGL SPECIFIC
-        generateMipmapsWebGL(options) {
-          const isFilterableAndRenderable = this.device.isTextureFormatRenderable(this.props.format) && this.device.isTextureFormatFilterable(this.props.format);
-          if (!isFilterableAndRenderable) {
-            import_core13.log.warn(`${this} is not renderable or filterable, may not be able to generate mipmaps`)();
-            if (!options?.force) {
-              return;
-            }
+        copyImageData(options_) {
+          super.copyImageData(options_);
+        }
+        /**
+         * Reads a color texture subresource into a GPU buffer using `PIXEL_PACK_BUFFER`.
+         *
+         * @note Only first-pass color readback is supported. Unsupported formats and aspects throw
+         * before any WebGL calls are issued.
+         */
+        readBuffer(options = {}, buffer) {
+          if (!buffer) {
+            throw new Error(`${this} readBuffer requires a destination buffer`);
+          }
+          const normalizedOptions = this._getSupportedColorReadOptions(options);
+          const byteOffset = options.byteOffset ?? 0;
+          const memoryLayout = this.computeMemoryLayout(normalizedOptions);
+          if (buffer.byteLength < byteOffset + memoryLayout.byteLength) {
+            throw new Error(
+              `${this} readBuffer target is too small (${buffer.byteLength} < ${byteOffset + memoryLayout.byteLength})`
+            );
           }
+          const webglBuffer = buffer;
+          this.gl.bindBuffer(35051 /* PIXEL_PACK_BUFFER */, webglBuffer.handle);
           try {
-            this.gl.bindTexture(this.glTarget, this.handle);
-            this.gl.generateMipmap(this.glTarget);
-          } catch (error) {
-            import_core13.log.warn(`Error generating mipmap for ${this}: ${error.message}`)();
+            this._readColorTextureLayers(normalizedOptions, memoryLayout, (destinationByteOffset) => {
+              this.gl.readPixels(
+                normalizedOptions.x,
+                normalizedOptions.y,
+                normalizedOptions.width,
+                normalizedOptions.height,
+                this.glFormat,
+                this.glType,
+                byteOffset + destinationByteOffset
+              );
+            });
           } finally {
-            this.gl.bindTexture(this.glTarget, null);
+            this.gl.bindBuffer(35051 /* PIXEL_PACK_BUFFER */, null);
           }
+          return buffer;
         }
-        // INTERNAL
-        /**
-         * Sets sampler parameters on texture
-         */
-        _setSamplerParameters(parameters) {
-          import_core13.log.log(2, `${this.id} sampler parameters`, this.device.getGLKeys(parameters))();
+        async readDataAsync(options = {}) {
+          throw new Error(
+            `${this} readDataAsync is deprecated; use readBuffer() with an explicit destination buffer or DynamicTexture.readAsync()`
+          );
+        }
+        writeBuffer(buffer, options_ = {}) {
+          const options = this._normalizeTextureWriteOptions(options_);
+          const { width, height, depthOrArrayLayers, mipLevel, byteOffset, x, y, z } = options;
+          const { glFormat, glType, compressed } = this;
+          const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, z);
+          if (compressed) {
+            throw new Error("writeBuffer for compressed textures is not implemented in WebGL");
+          }
+          const { bytesPerPixel } = this.device.getTextureFormatInfo(this.format);
+          const unpackRowLength = bytesPerPixel ? options.bytesPerRow / bytesPerPixel : void 0;
+          const glParameters = {
+            [3317 /* UNPACK_ALIGNMENT */]: this.byteAlignment,
+            ...unpackRowLength !== void 0 ? { [3314 /* UNPACK_ROW_LENGTH */]: unpackRowLength } : {},
+            [32878 /* UNPACK_IMAGE_HEIGHT */]: options.rowsPerImage
+          };
           this.gl.bindTexture(this.glTarget, this.handle);
-          for (const [pname, pvalue] of Object.entries(parameters)) {
-            const param = Number(pname);
-            const value = pvalue;
-            switch (param) {
-              case 33082 /* TEXTURE_MIN_LOD */:
-              case 33083 /* TEXTURE_MAX_LOD */:
-                this.gl.texParameterf(this.glTarget, param, value);
-                break;
-              case 10240 /* TEXTURE_MAG_FILTER */:
-              case 10241 /* TEXTURE_MIN_FILTER */:
-                this.gl.texParameteri(this.glTarget, param, value);
+          this.gl.bindBuffer(35052 /* PIXEL_UNPACK_BUFFER */, buffer.handle);
+          withGLParameters(this.gl, glParameters, () => {
+            switch (this.dimension) {
+              case "2d":
+              case "cube":
+                this.gl.texSubImage2D(
+                  glTarget,
+                  mipLevel,
+                  x,
+                  y,
+                  width,
+                  height,
+                  glFormat,
+                  glType,
+                  byteOffset
+                );
+                break;
+              case "2d-array":
+              case "3d":
+                this.gl.texSubImage3D(
+                  glTarget,
+                  mipLevel,
+                  x,
+                  y,
+                  z,
+                  width,
+                  height,
+                  depthOrArrayLayers,
+                  glFormat,
+                  glType,
+                  byteOffset
+                );
+                break;
+              default:
+            }
+          });
+          this.gl.bindBuffer(35052 /* PIXEL_UNPACK_BUFFER */, null);
+          this.gl.bindTexture(this.glTarget, null);
+        }
+        writeData(data, options_ = {}) {
+          const options = this._normalizeTextureWriteOptions(options_);
+          const typedArray = ArrayBuffer.isView(data) ? data : new Uint8Array(data);
+          const { width, height, depthOrArrayLayers, mipLevel, x, y, z, byteOffset } = options;
+          const { glFormat, glType, compressed } = this;
+          const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, z);
+          let unpackRowLength;
+          if (!compressed) {
+            const { bytesPerPixel } = this.device.getTextureFormatInfo(this.format);
+            if (bytesPerPixel) {
+              unpackRowLength = options.bytesPerRow / bytesPerPixel;
+            }
+          }
+          const glParameters = !this.compressed ? {
+            [3317 /* UNPACK_ALIGNMENT */]: this.byteAlignment,
+            ...unpackRowLength !== void 0 ? { [3314 /* UNPACK_ROW_LENGTH */]: unpackRowLength } : {},
+            [32878 /* UNPACK_IMAGE_HEIGHT */]: options.rowsPerImage
+          } : {};
+          const sourceElementOffset = getWebGLTextureSourceElementOffset(typedArray, byteOffset);
+          const compressedData = compressed ? getArrayBufferView(typedArray, byteOffset) : typedArray;
+          const mipLevelSize = this._getMipLevelSize(mipLevel);
+          const isFullMipUpload = x === 0 && y === 0 && z === 0 && width === mipLevelSize.width && height === mipLevelSize.height && depthOrArrayLayers === mipLevelSize.depthOrArrayLayers;
+          this.gl.bindTexture(this.glTarget, this.handle);
+          this.gl.bindBuffer(35052 /* PIXEL_UNPACK_BUFFER */, null);
+          withGLParameters(this.gl, glParameters, () => {
+            switch (this.dimension) {
+              case "2d":
+              case "cube":
+                if (compressed) {
+                  if (isFullMipUpload) {
+                    this.gl.compressedTexImage2D(glTarget, mipLevel, glFormat, width, height, 0, compressedData);
+                  } else {
+                    this.gl.compressedTexSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, compressedData);
+                  }
+                } else {
+                  this.gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, typedArray, sourceElementOffset);
+                }
+                break;
+              case "2d-array":
+              case "3d":
+                if (compressed) {
+                  if (isFullMipUpload) {
+                    this.gl.compressedTexImage3D(
+                      glTarget,
+                      mipLevel,
+                      glFormat,
+                      width,
+                      height,
+                      depthOrArrayLayers,
+                      0,
+                      compressedData
+                    );
+                  } else {
+                    this.gl.compressedTexSubImage3D(
+                      glTarget,
+                      mipLevel,
+                      x,
+                      y,
+                      z,
+                      width,
+                      height,
+                      depthOrArrayLayers,
+                      glFormat,
+                      compressedData
+                    );
+                  }
+                } else {
+                  this.gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depthOrArrayLayers, glFormat, glType, typedArray, sourceElementOffset);
+                }
+                break;
+              default:
+            }
+          });
+          this.gl.bindTexture(this.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._getSupportedColorReadOptions(options_);
+          const memoryLayout = this.computeMemoryLayout(options);
+          const shaderType = convertGLDataTypeToDataType(this.glType);
+          const ArrayType = (0, import_core14.getTypedArrayConstructor)(shaderType);
+          const targetArray = new ArrayType(memoryLayout.byteLength / ArrayType.BYTES_PER_ELEMENT);
+          this._readColorTextureLayers(options, memoryLayout, (destinationByteOffset) => {
+            const layerView = new ArrayType(
+              targetArray.buffer,
+              targetArray.byteOffset + destinationByteOffset,
+              memoryLayout.bytesPerImage / ArrayType.BYTES_PER_ELEMENT
+            );
+            this.gl.readPixels(
+              options.x,
+              options.y,
+              options.width,
+              options.height,
+              this.glFormat,
+              this.glType,
+              layerView
+            );
+          });
+          return targetArray.buffer;
+        }
+        /**
+         * Iterates the requested mip/layer/slice range, reattaching the cached read framebuffer as
+         * needed before delegating the actual `readPixels()` call to the supplied callback.
+         */
+        _readColorTextureLayers(options, memoryLayout, readLayer) {
+          const framebuffer = this._getFramebuffer();
+          const packRowLength = memoryLayout.bytesPerRow / memoryLayout.bytesPerPixel;
+          const glParameters = {
+            [3333 /* PACK_ALIGNMENT */]: this.byteAlignment,
+            ...packRowLength !== options.width ? { [3330 /* PACK_ROW_LENGTH */]: packRowLength } : {}
+          };
+          const prevReadBuffer = this.gl.getParameter(3074 /* READ_BUFFER */);
+          const prevHandle = this.gl.bindFramebuffer(
+            36160 /* FRAMEBUFFER */,
+            framebuffer.handle
+          );
+          try {
+            this.gl.readBuffer(36064 /* COLOR_ATTACHMENT0 */);
+            withGLParameters(this.gl, glParameters, () => {
+              for (let layerIndex = 0; layerIndex < options.depthOrArrayLayers; layerIndex++) {
+                this._attachReadSubresource(framebuffer, options.mipLevel, options.z + layerIndex);
+                readLayer(layerIndex * memoryLayout.bytesPerImage);
+              }
+            });
+          } finally {
+            this.gl.bindFramebuffer(36160 /* FRAMEBUFFER */, prevHandle || null);
+            this.gl.readBuffer(prevReadBuffer);
+          }
+        }
+        /**
+         * Attaches a single color subresource to the cached read framebuffer.
+         *
+         * @note Repeated attachments of the same `(mipLevel, layer)` tuple are skipped.
+         */
+        _attachReadSubresource(framebuffer, mipLevel, layer) {
+          const attachmentKey = `${mipLevel}:${layer}`;
+          if (this._framebufferAttachmentKey === attachmentKey) {
+            return;
+          }
+          switch (this.dimension) {
+            case "2d":
+              this.gl.framebufferTexture2D(
+                36160 /* FRAMEBUFFER */,
+                36064 /* COLOR_ATTACHMENT0 */,
+                3553 /* TEXTURE_2D */,
+                this.handle,
+                mipLevel
+              );
+              break;
+            case "cube":
+              this.gl.framebufferTexture2D(
+                36160 /* FRAMEBUFFER */,
+                36064 /* COLOR_ATTACHMENT0 */,
+                getWebGLCubeFaceTarget(this.glTarget, this.dimension, layer),
+                this.handle,
+                mipLevel
+              );
+              break;
+            case "2d-array":
+            case "3d":
+              this.gl.framebufferTextureLayer(
+                36160 /* FRAMEBUFFER */,
+                36064 /* COLOR_ATTACHMENT0 */,
+                this.handle,
+                mipLevel,
+                layer
+              );
+              break;
+            default:
+              throw new Error(`${this} color readback does not support ${this.dimension} textures`);
+          }
+          if (this.device.props.debug) {
+            const status = Number(this.gl.checkFramebufferStatus(36160 /* FRAMEBUFFER */));
+            if (status !== Number(36053 /* FRAMEBUFFER_COMPLETE */)) {
+              throw new Error(`${framebuffer} incomplete for ${this} readback (${status})`);
+            }
+          }
+          this._framebufferAttachmentKey = attachmentKey;
+        }
+        /**
+         * @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) {
+            import_core14.log.warn(`${this} is not renderable or filterable, may not be able to generate mipmaps`)();
+            if (!options?.force) {
+              return;
+            }
+          }
+          try {
+            this.gl.bindTexture(this.glTarget, this.handle);
+            this.gl.generateMipmap(this.glTarget);
+          } catch (error) {
+            import_core14.log.warn(`Error generating mipmap for ${this}: ${error.message}`)();
+          } finally {
+            this.gl.bindTexture(this.glTarget, null);
+          }
+        }
+        // INTERNAL
+        /**
+         * Sets sampler parameters on texture
+         */
+        _setSamplerParameters(parameters) {
+          import_core14.log.log(2, `${this.id} sampler parameters`, this.device.getGLKeys(parameters))();
+          this.gl.bindTexture(this.glTarget, this.handle);
+          for (const [pname, pvalue] of Object.entries(parameters)) {
+            const param = Number(pname);
+            const value = pvalue;
+            switch (param) {
+              case 33082 /* TEXTURE_MIN_LOD */:
+              case 33083 /* TEXTURE_MAX_LOD */:
+                this.gl.texParameterf(this.glTarget, param, value);
+                break;
+              case 10240 /* TEXTURE_MAG_FILTER */:
+              case 10241 /* TEXTURE_MIN_FILTER */:
+                this.gl.texParameteri(this.glTarget, param, value);
                 break;
               case 10242 /* TEXTURE_WRAP_S */:
               case 10243 /* TEXTURE_WRAP_T */:
               case 32882 /* TEXTURE_WRAP_R */:
                 this.gl.texParameteri(this.glTarget, param, value);
                 break;
-              case 34046 /* TEXTURE_MAX_ANISOTROPY_EXT */:
-                if (this.device.features.has("texture-filterable-anisotropic-webgl")) {
-                  this.gl.texParameteri(this.glTarget, param, value);
+              case 34046 /* TEXTURE_MAX_ANISOTROPY_EXT */:
+                if (this.device.features.has("texture-filterable-anisotropic-webgl")) {
+                  this.gl.texParameteri(this.glTarget, param, value);
+                }
+                break;
+              case 34892 /* TEXTURE_COMPARE_MODE */:
+              case 34893 /* TEXTURE_COMPARE_FUNC */:
+                this.gl.texParameteri(this.glTarget, param, value);
+                break;
+            }
+          }
+          this.gl.bindTexture(this.glTarget, null);
+        }
+        _getActiveUnit() {
+          return this.gl.getParameter(34016 /* ACTIVE_TEXTURE */) - 33984 /* TEXTURE0 */;
+        }
+        _bind(_textureUnit) {
+          const { gl } = this;
+          if (_textureUnit !== void 0) {
+            this._textureUnit = _textureUnit;
+            gl.activeTexture(gl.TEXTURE0 + _textureUnit);
+          }
+          gl.bindTexture(this.glTarget, this.handle);
+          return _textureUnit;
+        }
+        _unbind(_textureUnit) {
+          const { gl } = this;
+          if (_textureUnit !== void 0) {
+            this._textureUnit = _textureUnit;
+            gl.activeTexture(gl.TEXTURE0 + _textureUnit);
+          }
+          gl.bindTexture(this.glTarget, null);
+          return _textureUnit;
+        }
+      };
+    }
+  });
+
+  // src/adapter/helpers/set-uniform.ts
+  function setUniform(gl, location, type, value) {
+    const gl2 = gl;
+    let uniformValue = value;
+    if (uniformValue === true) {
+      uniformValue = 1;
+    }
+    if (uniformValue === false) {
+      uniformValue = 0;
+    }
+    const arrayValue = typeof uniformValue === "number" ? [uniformValue] : uniformValue;
+    switch (type) {
+      case 35678 /* SAMPLER_2D */:
+      case 35680 /* SAMPLER_CUBE */:
+      case 35679 /* SAMPLER_3D */:
+      case 35682 /* SAMPLER_2D_SHADOW */:
+      case 36289 /* SAMPLER_2D_ARRAY */:
+      case 36292 /* SAMPLER_2D_ARRAY_SHADOW */:
+      case 36293 /* SAMPLER_CUBE_SHADOW */:
+      case 36298 /* INT_SAMPLER_2D */:
+      case 36299 /* INT_SAMPLER_3D */:
+      case 36300 /* INT_SAMPLER_CUBE */:
+      case 36303 /* INT_SAMPLER_2D_ARRAY */:
+      case 36306 /* UNSIGNED_INT_SAMPLER_2D */:
+      case 36307 /* UNSIGNED_INT_SAMPLER_3D */:
+      case 36308 /* UNSIGNED_INT_SAMPLER_CUBE */:
+      case 36311 /* UNSIGNED_INT_SAMPLER_2D_ARRAY */:
+        if (typeof value !== "number") {
+          throw new Error("samplers must be set to integers");
+        }
+        return gl.uniform1i(location, value);
+      case 5126 /* FLOAT */:
+        return gl.uniform1fv(location, arrayValue);
+      case 35664 /* FLOAT_VEC2 */:
+        return gl.uniform2fv(location, arrayValue);
+      case 35665 /* FLOAT_VEC3 */:
+        return gl.uniform3fv(location, arrayValue);
+      case 35666 /* FLOAT_VEC4 */:
+        return gl.uniform4fv(location, arrayValue);
+      case 5124 /* INT */:
+        return gl.uniform1iv(location, arrayValue);
+      case 35667 /* INT_VEC2 */:
+        return gl.uniform2iv(location, arrayValue);
+      case 35668 /* INT_VEC3 */:
+        return gl.uniform3iv(location, arrayValue);
+      case 35669 /* INT_VEC4 */:
+        return gl.uniform4iv(location, arrayValue);
+      case 35670 /* BOOL */:
+        return gl.uniform1iv(location, arrayValue);
+      case 35671 /* BOOL_VEC2 */:
+        return gl.uniform2iv(location, arrayValue);
+      case 35672 /* BOOL_VEC3 */:
+        return gl.uniform3iv(location, arrayValue);
+      case 35673 /* BOOL_VEC4 */:
+        return gl.uniform4iv(location, arrayValue);
+      case 5125 /* UNSIGNED_INT */:
+        return gl2.uniform1uiv(location, arrayValue, 1);
+      case 36294 /* UNSIGNED_INT_VEC2 */:
+        return gl2.uniform2uiv(location, arrayValue, 2);
+      case 36295 /* UNSIGNED_INT_VEC3 */:
+        return gl2.uniform3uiv(location, arrayValue, 3);
+      case 36296 /* UNSIGNED_INT_VEC4 */:
+        return gl2.uniform4uiv(location, arrayValue, 4);
+      case 35674 /* FLOAT_MAT2 */:
+        return gl.uniformMatrix2fv(location, false, arrayValue);
+      case 35675 /* FLOAT_MAT3 */:
+        return gl.uniformMatrix3fv(location, false, arrayValue);
+      case 35676 /* FLOAT_MAT4 */:
+        return gl.uniformMatrix4fv(location, false, arrayValue);
+      case 35685 /* FLOAT_MAT2x3 */:
+        return gl2.uniformMatrix2x3fv(location, false, arrayValue);
+      case 35686 /* FLOAT_MAT2x4 */:
+        return gl2.uniformMatrix2x4fv(location, false, arrayValue);
+      case 35687 /* FLOAT_MAT3x2 */:
+        return gl2.uniformMatrix3x2fv(location, false, arrayValue);
+      case 35688 /* FLOAT_MAT3x4 */:
+        return gl2.uniformMatrix3x4fv(location, false, arrayValue);
+      case 35689 /* FLOAT_MAT4x2 */:
+        return gl2.uniformMatrix4x2fv(location, false, arrayValue);
+      case 35690 /* FLOAT_MAT4x3 */:
+        return gl2.uniformMatrix4x3fv(location, false, arrayValue);
+    }
+    throw new Error("Illegal uniform");
+  }
+  var init_set_uniform = __esm({
+    "src/adapter/helpers/set-uniform.ts"() {
+      "use strict";
+    }
+  });
+
+  // src/adapter/helpers/webgl-topology-utils.ts
+  function getGLDrawMode(topology) {
+    switch (topology) {
+      case "point-list":
+        return 0 /* POINTS */;
+      case "line-list":
+        return 1 /* LINES */;
+      case "line-strip":
+        return 3 /* LINE_STRIP */;
+      case "triangle-list":
+        return 4 /* TRIANGLES */;
+      case "triangle-strip":
+        return 5 /* TRIANGLE_STRIP */;
+      default:
+        throw new Error(topology);
+    }
+  }
+  function getGLPrimitive(topology) {
+    switch (topology) {
+      case "point-list":
+        return 0 /* POINTS */;
+      case "line-list":
+        return 1 /* LINES */;
+      case "line-strip":
+        return 1 /* LINES */;
+      case "triangle-list":
+        return 4 /* TRIANGLES */;
+      case "triangle-strip":
+        return 4 /* TRIANGLES */;
+      default:
+        throw new Error(topology);
+    }
+  }
+  var init_webgl_topology_utils = __esm({
+    "src/adapter/helpers/webgl-topology-utils.ts"() {
+      "use strict";
+    }
+  });
+
+  // src/adapter/resources/webgl-render-pipeline.ts
+  function mergeShaderLayout(baseLayout, overrideLayout) {
+    const mergedLayout = {
+      ...baseLayout,
+      attributes: baseLayout.attributes.map((attribute) => ({ ...attribute })),
+      bindings: baseLayout.bindings.map((binding) => ({ ...binding }))
+    };
+    for (const attribute of 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`);
+      } else {
+        baseAttribute.type = attribute.type || baseAttribute.type;
+        baseAttribute.stepMode = attribute.stepMode || baseAttribute.stepMode;
+      }
+    }
+    for (const binding of overrideLayout?.bindings || []) {
+      const baseBinding = getShaderLayoutBindingByName(mergedLayout, binding.name);
+      if (!baseBinding) {
+        import_core15.log.warn(`shader layout binding ${binding.name} not present in shader`);
+        continue;
+      }
+      Object.assign(baseBinding, binding);
+    }
+    return mergedLayout;
+  }
+  function getShaderLayoutBindingByName(shaderLayout, bindingName) {
+    return shaderLayout.bindings.find(
+      (binding) => binding.name === bindingName || binding.name === `${bindingName}Uniforms` || `${binding.name}Uniforms` === bindingName
+    );
+  }
+  function getBindingValueForLayoutBinding(bindings, bindingName) {
+    return bindings[bindingName] || bindings[`${bindingName}Uniforms`] || bindings[bindingName.replace(/Uniforms$/, "")];
+  }
+  var import_core15, WEBGLRenderPipeline;
+  var init_webgl_render_pipeline = __esm({
+    "src/adapter/resources/webgl-render-pipeline.ts"() {
+      "use strict";
+      import_core15 = __toESM(require_core(), 1);
+      init_device_parameters();
+      init_set_uniform();
+      init_webgl_buffer();
+      init_webgl_framebuffer();
+      init_webgl_texture();
+      init_webgl_texture_view();
+      init_webgl_topology_utils();
+      WEBGLRenderPipeline = class extends import_core15.RenderPipeline {
+        /** The WebGL device that created this render pipeline */
+        device;
+        /** Handle to underlying WebGL program */
+        handle;
+        /** vertex shader */
+        vs;
+        /** fragment shader */
+        fs;
+        /** The layout extracted from shader by WebGL introspection APIs */
+        introspectedLayout;
+        /** Compatibility path for direct pipeline.setBindings() usage */
+        bindings = {};
+        /** Compatibility path for direct pipeline.uniforms usage */
+        uniforms = {};
+        /** WebGL varyings */
+        varyings = null;
+        _uniformCount = 0;
+        _uniformSetters = {};
+        // TODO are these used?
+        get [Symbol.toStringTag]() {
+          return "WEBGLRenderPipeline";
+        }
+        constructor(device, props) {
+          super(device, props);
+          this.device = device;
+          const webglSharedRenderPipeline = this.sharedRenderPipeline || this.device._createSharedRenderPipelineWebGL(props);
+          this.sharedRenderPipeline = webglSharedRenderPipeline;
+          this.handle = webglSharedRenderPipeline.handle;
+          this.vs = webglSharedRenderPipeline.vs;
+          this.fs = webglSharedRenderPipeline.fs;
+          this.linkStatus = webglSharedRenderPipeline.linkStatus;
+          this.introspectedLayout = webglSharedRenderPipeline.introspectedLayout;
+          this.device._setWebGLDebugMetadata(this.handle, this, { spector: { id: this.props.id } });
+          this.shaderLayout = props.shaderLayout ? mergeShaderLayout(this.introspectedLayout, props.shaderLayout) : this.introspectedLayout;
+        }
+        destroy() {
+          if (this.destroyed) {
+            return;
+          }
+          if (this.sharedRenderPipeline && !this.props._sharedRenderPipeline) {
+            this.sharedRenderPipeline.destroy();
+          }
+          this.destroyResource();
+        }
+        /**
+         * Compatibility shim for code paths that still set bindings on the pipeline.
+         * Shared-model draws pass bindings per draw and do not rely on this state.
+         */
+        setBindings(bindings, options) {
+          const flatBindings = (0, import_core15.flattenBindingsByGroup)(
+            (0, import_core15.normalizeBindingsByGroup)(this.shaderLayout, bindings)
+          );
+          for (const [name, value] of Object.entries(flatBindings)) {
+            const binding = getShaderLayoutBindingByName(this.shaderLayout, name);
+            if (!binding) {
+              const validBindings = this.shaderLayout.bindings.map((binding_) => `"${binding_.name}"`).join(", ");
+              if (!options?.disableWarnings) {
+                import_core15.log.warn(
+                  `No binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`,
+                  value
+                )();
+              }
+            } else {
+              if (!value) {
+                import_core15.log.warn(`Unsetting binding "${name}" in render pipeline "${this.id}"`)();
+              }
+              switch (binding.type) {
+                case "uniform":
+                  if (!(value instanceof WEBGLBuffer) && !(value.buffer instanceof WEBGLBuffer)) {
+                    throw new Error("buffer value");
+                  }
+                  break;
+                case "texture":
+                  if (!(value instanceof WEBGLTextureView || value instanceof WEBGLTexture || value instanceof WEBGLFramebuffer)) {
+                    throw new Error(`${this} Bad texture binding for ${name}`);
+                  }
+                  break;
+                case "sampler":
+                  import_core15.log.warn(`Ignoring sampler ${name}`)();
+                  break;
+                default:
+                  throw new Error(binding.type);
+              }
+              this.bindings[name] = value;
+            }
+          }
+        }
+        /** @todo needed for portable model
+         * @note The WebGL API is offers many ways to draw things
+         * This function unifies those ways into a single call using common parameters with sane defaults
+         */
+        draw(options) {
+          this._syncLinkStatus();
+          const drawBindings = options.bindGroups ? (0, import_core15.flattenBindingsByGroup)(options.bindGroups) : options.bindings || this.bindings;
+          const {
+            renderPass,
+            parameters = this.props.parameters,
+            topology = this.props.topology,
+            vertexArray,
+            vertexCount,
+            // indexCount,
+            instanceCount,
+            isInstanced = false,
+            firstVertex = 0,
+            // firstIndex,
+            // firstInstance,
+            // baseVertex,
+            transformFeedback,
+            uniforms = this.uniforms
+          } = options;
+          const glDrawMode = getGLDrawMode(topology);
+          const isIndexed = Boolean(vertexArray.indexBuffer);
+          const glIndexType = vertexArray.indexBuffer?.glIndexType;
+          if (this.linkStatus !== "success") {
+            import_core15.log.info(2, `RenderPipeline:${this.id}.draw() aborted - waiting for shader linking`)();
+            return false;
+          }
+          if (!this._areTexturesRenderable(drawBindings)) {
+            import_core15.log.info(2, `RenderPipeline:${this.id}.draw() aborted - textures not yet loaded`)();
+            return false;
+          }
+          this.device.gl.useProgram(this.handle);
+          vertexArray.bindBeforeRender(renderPass);
+          if (transformFeedback) {
+            transformFeedback.begin(this.props.topology);
+          }
+          this._applyBindings(drawBindings, { disableWarnings: this.props.disableWarnings });
+          this._applyUniforms(uniforms);
+          const webglRenderPass = renderPass;
+          withDeviceAndGLParameters(this.device, parameters, webglRenderPass.glParameters, () => {
+            if (isIndexed && isInstanced) {
+              this.device.gl.drawElementsInstanced(
+                glDrawMode,
+                vertexCount || 0,
+                // indexCount?
+                glIndexType,
+                firstVertex,
+                instanceCount || 0
+              );
+            } else if (isIndexed) {
+              this.device.gl.drawElements(glDrawMode, vertexCount || 0, glIndexType, firstVertex);
+            } else if (isInstanced) {
+              this.device.gl.drawArraysInstanced(
+                glDrawMode,
+                firstVertex,
+                vertexCount || 0,
+                instanceCount || 0
+              );
+            } else {
+              this.device.gl.drawArrays(glDrawMode, firstVertex, vertexCount || 0);
+            }
+            if (transformFeedback) {
+              transformFeedback.end();
+            }
+          });
+          vertexArray.unbindAfterRender(renderPass);
+          return true;
+        }
+        /**
+         * Checks if all texture-values uniforms are renderable (i.e. loaded)
+         * Update a texture if needed (e.g. from video)
+         * Note: This is currently done before every draw call
+         */
+        _areTexturesRenderable(bindings) {
+          let texturesRenderable = true;
+          for (const bindingInfo of this.shaderLayout.bindings) {
+            if (!getBindingValueForLayoutBinding(bindings, bindingInfo.name)) {
+              import_core15.log.warn(`Binding ${bindingInfo.name} not found in ${this.id}`)();
+              texturesRenderable = false;
+            }
+          }
+          return texturesRenderable;
+        }
+        /** Apply any bindings (before each draw call) */
+        _applyBindings(bindings, _options) {
+          this._syncLinkStatus();
+          if (this.linkStatus !== "success") {
+            return;
+          }
+          const { gl } = this.device;
+          gl.useProgram(this.handle);
+          let textureUnit = 0;
+          let uniformBufferIndex = 0;
+          for (const binding of this.shaderLayout.bindings) {
+            const value = getBindingValueForLayoutBinding(bindings, binding.name);
+            if (!value) {
+              throw new Error(`No value for binding ${binding.name} in ${this.id}`);
+            }
+            switch (binding.type) {
+              case "uniform":
+                const { name } = binding;
+                const location = gl.getUniformBlockIndex(this.handle, name);
+                if (location === 4294967295 /* INVALID_INDEX */) {
+                  throw new Error(`Invalid uniform block name ${name}`);
+                }
+                gl.uniformBlockBinding(this.handle, location, uniformBufferIndex);
+                if (value instanceof WEBGLBuffer) {
+                  gl.bindBufferBase(35345 /* UNIFORM_BUFFER */, uniformBufferIndex, value.handle);
+                } else {
+                  const bufferBinding = value;
+                  gl.bindBufferRange(
+                    35345 /* UNIFORM_BUFFER */,
+                    uniformBufferIndex,
+                    bufferBinding.buffer.handle,
+                    bufferBinding.offset || 0,
+                    bufferBinding.size || bufferBinding.buffer.byteLength - (bufferBinding.offset || 0)
+                  );
+                }
+                uniformBufferIndex += 1;
+                break;
+              case "texture":
+                if (!(value instanceof WEBGLTextureView || value instanceof WEBGLTexture || value instanceof WEBGLFramebuffer)) {
+                  throw new Error("texture");
+                }
+                let texture;
+                if (value instanceof WEBGLTextureView) {
+                  texture = value.texture;
+                } 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"
+                  )();
+                  texture = value.colorAttachments[0].texture;
+                } else {
+                  throw new Error("No texture");
                 }
+                gl.activeTexture(33984 /* TEXTURE0 */ + textureUnit);
+                gl.bindTexture(texture.glTarget, texture.handle);
+                textureUnit += 1;
                 break;
-              case 34892 /* TEXTURE_COMPARE_MODE */:
-              case 34893 /* TEXTURE_COMPARE_FUNC */:
-                this.gl.texParameteri(this.glTarget, param, value);
+              case "sampler":
                 break;
+              case "storage":
+              case "read-only-storage":
+                throw new Error(`binding type '${binding.type}' not supported in WebGL`);
             }
           }
-          this.gl.bindTexture(this.glTarget, null);
-        }
-        _getActiveUnit() {
-          return this.gl.getParameter(34016 /* ACTIVE_TEXTURE */) - 33984 /* TEXTURE0 */;
         }
-        _bind(_textureUnit) {
-          const { gl } = this;
-          if (_textureUnit !== void 0) {
-            this._textureUnit = _textureUnit;
-            gl.activeTexture(gl.TEXTURE0 + _textureUnit);
+        /**
+         * Due to program sharing, uniforms need to be reset before every draw call
+         * (though caching will avoid redundant WebGL calls)
+         */
+        _applyUniforms(uniforms) {
+          for (const uniformLayout of this.shaderLayout.uniforms || []) {
+            const { name, location, type, textureUnit } = uniformLayout;
+            const value = uniforms[name] ?? textureUnit;
+            if (value !== void 0) {
+              setUniform(this.device.gl, location, type, value);
+            }
           }
-          gl.bindTexture(this.glTarget, this.handle);
-          return _textureUnit;
         }
-        _unbind(_textureUnit) {
-          const { gl } = this;
-          if (_textureUnit !== void 0) {
-            this._textureUnit = _textureUnit;
-            gl.activeTexture(gl.TEXTURE0 + _textureUnit);
-          }
-          gl.bindTexture(this.glTarget, null);
-          return _textureUnit;
+        _syncLinkStatus() {
+          this.linkStatus = this.sharedRenderPipeline.linkStatus;
         }
       };
     }
@@ -3843,7 +4833,7 @@ ${source}`;
       }
       const { name, type: glUniformType, size } = activeInfo;
       const uniformType = convertGLUniformTypeToShaderVariableType(glUniformType);
-      const { type, components } = (0, import_core14.getVariableShaderTypeInfo)(uniformType);
+      const { type, components } = (0, import_core16.getVariableShaderTypeInfo)(uniformType);
       varyings.push({ location, name, type, size: size * components });
     }
     varyings.sort((a, b) => a.location - b.location);
@@ -3904,21 +4894,34 @@ ${source}`;
       const uniformOffset = gl.getActiveUniforms(program, uniformIndices, 35387 /* UNIFORM_OFFSET */);
       const uniformStride = gl.getActiveUniforms(program, uniformIndices, 35388 /* UNIFORM_ARRAY_STRIDE */);
       for (let i = 0; i < blockInfo.uniformCount; ++i) {
-        const activeInfo = gl.getActiveUniform(program, uniformIndices[i]);
-        if (!activeInfo) {
-          throw new Error("activeInfo");
-        }
-        const format = convertGLUniformTypeToShaderVariableType(uniformType[i]);
-        blockInfo.uniforms.push({
-          name: activeInfo.name,
-          format,
-          type: uniformType[i],
-          arrayLength: uniformArrayLength[i],
-          byteOffset: uniformOffset[i],
-          byteStride: uniformStride[i]
-          // matrixStride: uniformStride[i],
-          // rowMajor: uniformRowMajor[i]
-        });
+        const uniformIndex = uniformIndices[i];
+        if (uniformIndex !== void 0) {
+          const activeInfo = gl.getActiveUniform(program, uniformIndex);
+          if (!activeInfo) {
+            throw new Error("activeInfo");
+          }
+          const format = convertGLUniformTypeToShaderVariableType(uniformType[i]);
+          blockInfo.uniforms.push({
+            name: activeInfo.name,
+            format,
+            type: uniformType[i],
+            arrayLength: uniformArrayLength[i],
+            byteOffset: uniformOffset[i],
+            byteStride: uniformStride[i]
+            // matrixStride: uniformStride[i],
+            // rowMajor: uniformRowMajor[i]
+          });
+        }
+      }
+      const uniformInstancePrefixes = new Set(
+        blockInfo.uniforms.map((uniform) => uniform.name.split(".")[0]).filter((instanceName) => Boolean(instanceName))
+      );
+      const blockAlias = blockInfo.name.replace(/Uniforms$/, "");
+      if (uniformInstancePrefixes.size === 1 && !uniformInstancePrefixes.has(blockInfo.name) && !uniformInstancePrefixes.has(blockAlias)) {
+        const [instanceName] = uniformInstancePrefixes;
+        import_core16.log.warn(
+          `Uniform block "${blockInfo.name}" uses GLSL instance "${instanceName}". luma.gl binds uniform buffers by block name ("${blockInfo.name}") and alias ("${blockAlias}"). Prefer matching the instance name to one of those to avoid confusing silent mismatches.`
+        )();
       }
       uniformBlocks.push(blockInfo);
     }
@@ -3935,366 +4938,84 @@ ${source}`;
     }
     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_core16.assertDefined)(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?.[2] ? 1 : 0,
+      isArray: Boolean(matches?.[2])
     };
   }
-  var import_core14;
+  var import_core16;
   var init_get_shader_layout_from_glsl = __esm({
     "src/adapter/helpers/get-shader-layout-from-glsl.ts"() {
       "use strict";
-      import_core14 = __toESM(require_core(), 1);
+      import_core16 = __toESM(require_core(), 1);
       init_webgl_shadertypes();
     }
-  });
-
-  // src/adapter/helpers/set-uniform.ts
-  function setUniform(gl, location, type, value) {
-    const gl2 = gl;
-    let uniformValue = value;
-    if (uniformValue === true) {
-      uniformValue = 1;
-    }
-    if (uniformValue === false) {
-      uniformValue = 0;
-    }
-    const arrayValue = typeof uniformValue === "number" ? [uniformValue] : uniformValue;
-    switch (type) {
-      case 35678 /* SAMPLER_2D */:
-      case 35680 /* SAMPLER_CUBE */:
-      case 35679 /* SAMPLER_3D */:
-      case 35682 /* SAMPLER_2D_SHADOW */:
-      case 36289 /* SAMPLER_2D_ARRAY */:
-      case 36292 /* SAMPLER_2D_ARRAY_SHADOW */:
-      case 36293 /* SAMPLER_CUBE_SHADOW */:
-      case 36298 /* INT_SAMPLER_2D */:
-      case 36299 /* INT_SAMPLER_3D */:
-      case 36300 /* INT_SAMPLER_CUBE */:
-      case 36303 /* INT_SAMPLER_2D_ARRAY */:
-      case 36306 /* UNSIGNED_INT_SAMPLER_2D */:
-      case 36307 /* UNSIGNED_INT_SAMPLER_3D */:
-      case 36308 /* UNSIGNED_INT_SAMPLER_CUBE */:
-      case 36311 /* UNSIGNED_INT_SAMPLER_2D_ARRAY */:
-        if (typeof value !== "number") {
-          throw new Error("samplers must be set to integers");
-        }
-        return gl.uniform1i(location, value);
-      case 5126 /* FLOAT */:
-        return gl.uniform1fv(location, arrayValue);
-      case 35664 /* FLOAT_VEC2 */:
-        return gl.uniform2fv(location, arrayValue);
-      case 35665 /* FLOAT_VEC3 */:
-        return gl.uniform3fv(location, arrayValue);
-      case 35666 /* FLOAT_VEC4 */:
-        return gl.uniform4fv(location, arrayValue);
-      case 5124 /* INT */:
-        return gl.uniform1iv(location, arrayValue);
-      case 35667 /* INT_VEC2 */:
-        return gl.uniform2iv(location, arrayValue);
-      case 35668 /* INT_VEC3 */:
-        return gl.uniform3iv(location, arrayValue);
-      case 35669 /* INT_VEC4 */:
-        return gl.uniform4iv(location, arrayValue);
-      case 35670 /* BOOL */:
-        return gl.uniform1iv(location, arrayValue);
-      case 35671 /* BOOL_VEC2 */:
-        return gl.uniform2iv(location, arrayValue);
-      case 35672 /* BOOL_VEC3 */:
-        return gl.uniform3iv(location, arrayValue);
-      case 35673 /* BOOL_VEC4 */:
-        return gl.uniform4iv(location, arrayValue);
-      case 5125 /* UNSIGNED_INT */:
-        return gl2.uniform1uiv(location, arrayValue, 1);
-      case 36294 /* UNSIGNED_INT_VEC2 */:
-        return gl2.uniform2uiv(location, arrayValue, 2);
-      case 36295 /* UNSIGNED_INT_VEC3 */:
-        return gl2.uniform3uiv(location, arrayValue, 3);
-      case 36296 /* UNSIGNED_INT_VEC4 */:
-        return gl2.uniform4uiv(location, arrayValue, 4);
-      case 35674 /* FLOAT_MAT2 */:
-        return gl.uniformMatrix2fv(location, false, arrayValue);
-      case 35675 /* FLOAT_MAT3 */:
-        return gl.uniformMatrix3fv(location, false, arrayValue);
-      case 35676 /* FLOAT_MAT4 */:
-        return gl.uniformMatrix4fv(location, false, arrayValue);
-      case 35685 /* FLOAT_MAT2x3 */:
-        return gl2.uniformMatrix2x3fv(location, false, arrayValue);
-      case 35686 /* FLOAT_MAT2x4 */:
-        return gl2.uniformMatrix2x4fv(location, false, arrayValue);
-      case 35687 /* FLOAT_MAT3x2 */:
-        return gl2.uniformMatrix3x2fv(location, false, arrayValue);
-      case 35688 /* FLOAT_MAT3x4 */:
-        return gl2.uniformMatrix3x4fv(location, false, arrayValue);
-      case 35689 /* FLOAT_MAT4x2 */:
-        return gl2.uniformMatrix4x2fv(location, false, arrayValue);
-      case 35690 /* FLOAT_MAT4x3 */:
-        return gl2.uniformMatrix4x3fv(location, false, arrayValue);
-    }
-    throw new Error("Illegal uniform");
-  }
-  var init_set_uniform = __esm({
-    "src/adapter/helpers/set-uniform.ts"() {
-      "use strict";
-    }
-  });
-
-  // src/adapter/helpers/webgl-topology-utils.ts
-  function getGLDrawMode(topology) {
-    switch (topology) {
-      case "point-list":
-        return 0 /* POINTS */;
-      case "line-list":
-        return 1 /* LINES */;
-      case "line-strip":
-        return 3 /* LINE_STRIP */;
-      case "triangle-list":
-        return 4 /* TRIANGLES */;
-      case "triangle-strip":
-        return 5 /* TRIANGLE_STRIP */;
-      default:
-        throw new Error(topology);
-    }
-  }
-  function getGLPrimitive(topology) {
-    switch (topology) {
-      case "point-list":
-        return 0 /* POINTS */;
-      case "line-list":
-        return 1 /* LINES */;
-      case "line-strip":
-        return 1 /* LINES */;
-      case "triangle-list":
-        return 4 /* TRIANGLES */;
-      case "triangle-strip":
-        return 4 /* TRIANGLES */;
-      default:
-        throw new Error(topology);
-    }
-  }
-  var init_webgl_topology_utils = __esm({
-    "src/adapter/helpers/webgl-topology-utils.ts"() {
-      "use strict";
-    }
-  });
-
-  // src/adapter/resources/webgl-render-pipeline.ts
-  function mergeShaderLayout(baseLayout, overrideLayout) {
-    const mergedLayout = {
-      ...baseLayout,
-      attributes: baseLayout.attributes.map((attribute) => ({ ...attribute }))
-    };
-    for (const attribute of 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`);
-      } else {
-        baseAttribute.type = attribute.type || baseAttribute.type;
-        baseAttribute.stepMode = attribute.stepMode || baseAttribute.stepMode;
-      }
-    }
-    return mergedLayout;
-  }
-  var import_core15, LOG_PROGRAM_PERF_PRIORITY, WEBGLRenderPipeline;
-  var init_webgl_render_pipeline = __esm({
-    "src/adapter/resources/webgl-render-pipeline.ts"() {
+  });
+
+  // src/adapter/resources/webgl-shared-render-pipeline.ts
+  var import_core17, LOG_PROGRAM_PERF_PRIORITY, WEBGLSharedRenderPipeline;
+  var init_webgl_shared_render_pipeline = __esm({
+    "src/adapter/resources/webgl-shared-render-pipeline.ts"() {
       "use strict";
-      import_core15 = __toESM(require_core(), 1);
+      import_core17 = __toESM(require_core(), 1);
       init_get_shader_layout_from_glsl();
-      init_device_parameters();
-      init_set_uniform();
-      init_webgl_buffer();
-      init_webgl_framebuffer();
-      init_webgl_texture();
-      init_webgl_texture_view();
-      init_webgl_topology_utils();
+      init_webgl_shadertypes();
       LOG_PROGRAM_PERF_PRIORITY = 4;
-      WEBGLRenderPipeline = class extends import_core15.RenderPipeline {
-        /** The WebGL device that created this render pipeline */
+      WEBGLSharedRenderPipeline = class extends import_core17.SharedRenderPipeline {
         device;
-        /** Handle to underlying WebGL program */
         handle;
-        /** vertex shader */
         vs;
-        /** fragment shader */
         fs;
-        /** The layout extracted from shader by WebGL introspection APIs */
-        introspectedLayout;
-        /** Uniforms set on this model */
-        uniforms = {};
-        /** Bindings set on this model */
-        bindings = {};
-        /** WebGL varyings */
-        varyings = null;
-        _uniformCount = 0;
-        _uniformSetters = {};
-        // TODO are these used?
-        get [Symbol.toStringTag]() {
-          return "WEBGLRenderPipeline";
-        }
+        introspectedLayout = { attributes: [], bindings: [], uniforms: [] };
+        linkStatus = "pending";
         constructor(device, props) {
           super(device, props);
           this.device = device;
-          this.handle = this.props.handle || this.device.gl.createProgram();
-          this.device._setWebGLDebugMetadata(this.handle, this, { spector: { id: this.props.id } });
+          this.handle = props.handle || this.device.gl.createProgram();
           this.vs = props.vs;
           this.fs = props.fs;
-          const { varyings, bufferMode = 35981 /* SEPARATE_ATTRIBS */ } = props;
-          if (varyings && varyings.length > 0) {
-            this.varyings = varyings;
-            this.device.gl.transformFeedbackVaryings(this.handle, varyings, bufferMode);
+          if (props.varyings && props.varyings.length > 0) {
+            this.device.gl.transformFeedbackVaryings(
+              this.handle,
+              props.varyings,
+              props.bufferMode || 35981 /* SEPARATE_ATTRIBS */
+            );
           }
           this._linkShaders();
-          import_core15.log.time(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+          import_core17.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`)();
-          this.shaderLayout = props.shaderLayout ? mergeShaderLayout(this.introspectedLayout, props.shaderLayout) : this.introspectedLayout;
+          import_core17.log.timeEnd(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
         }
         destroy() {
-          if (this.handle) {
-            this.device.gl.useProgram(null);
-            this.device.gl.deleteProgram(this.handle);
-            this.destroyed = true;
-            this.handle.destroyed = true;
-            this.handle = null;
-          }
-        }
-        /**
-         * Bindings include: textures, samplers and uniform buffers
-         * @todo needed for portable model
-         */
-        setBindings(bindings, options) {
-          for (const [name, value] of Object.entries(bindings)) {
-            const binding = this.shaderLayout.bindings.find((binding_) => binding_.name === name) || this.shaderLayout.bindings.find((binding_) => binding_.name === `${name}Uniforms`);
-            if (!binding) {
-              const validBindings = this.shaderLayout.bindings.map((binding_) => `"${binding_.name}"`).join(", ");
-              if (!options?.disableWarnings) {
-                import_core15.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}"`)();
-            }
-            switch (binding.type) {
-              case "uniform":
-                if (!(value instanceof WEBGLBuffer) && !(value.buffer instanceof WEBGLBuffer)) {
-                  throw new Error("buffer value");
-                }
-                break;
-              case "texture":
-                if (!(value instanceof WEBGLTextureView || value instanceof WEBGLTexture || value instanceof WEBGLFramebuffer)) {
-                  throw new Error(`${this} Bad texture binding for ${name}`);
-                }
-                break;
-              case "sampler":
-                import_core15.log.warn(`Ignoring sampler ${name}`)();
-                break;
-              default:
-                throw new Error(binding.type);
-            }
-            this.bindings[name] = value;
-          }
-        }
-        /** @todo needed for portable model
-         * @note The WebGL API is offers many ways to draw things
-         * This function unifies those ways into a single call using common parameters with sane defaults
-         */
-        draw(options) {
-          const {
-            renderPass,
-            parameters = this.props.parameters,
-            topology = this.props.topology,
-            vertexArray,
-            vertexCount,
-            // indexCount,
-            instanceCount,
-            isInstanced = false,
-            firstVertex = 0,
-            // firstIndex,
-            // firstInstance,
-            // baseVertex,
-            transformFeedback
-          } = options;
-          const glDrawMode = getGLDrawMode(topology);
-          const isIndexed = Boolean(vertexArray.indexBuffer);
-          const glIndexType = vertexArray.indexBuffer?.glIndexType;
-          if (this.linkStatus !== "success") {
-            import_core15.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`)();
-            return false;
-          }
-          this.device.gl.useProgram(this.handle);
-          vertexArray.bindBeforeRender(renderPass);
-          if (transformFeedback) {
-            transformFeedback.begin(this.props.topology);
+          if (this.destroyed) {
+            return;
           }
-          this._applyBindings();
-          this._applyUniforms();
-          const webglRenderPass = renderPass;
-          withDeviceAndGLParameters(this.device, parameters, webglRenderPass.glParameters, () => {
-            if (isIndexed && isInstanced) {
-              this.device.gl.drawElementsInstanced(
-                glDrawMode,
-                vertexCount || 0,
-                // indexCount?
-                glIndexType,
-                firstVertex,
-                instanceCount || 0
-              );
-            } else if (isIndexed) {
-              this.device.gl.drawElements(glDrawMode, vertexCount || 0, glIndexType, firstVertex);
-            } else if (isInstanced) {
-              this.device.gl.drawArraysInstanced(
-                glDrawMode,
-                firstVertex,
-                vertexCount || 0,
-                instanceCount || 0
-              );
-            } else {
-              this.device.gl.drawArrays(glDrawMode, firstVertex, vertexCount || 0);
-            }
-            if (transformFeedback) {
-              transformFeedback.end();
-            }
-          });
-          vertexArray.unbindAfterRender(renderPass);
-          return true;
+          this.device.gl.useProgram(null);
+          this.device.gl.deleteProgram(this.handle);
+          this.handle.destroyed = true;
+          this.destroyResource();
         }
-        // PRIVATE METHODS
-        // setAttributes(attributes: Record<string, Buffer>): void {}
-        // setBindings(bindings: Record<string, Binding>): void {}
         async _linkShaders() {
           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_core17.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_core17.log.timeEnd(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
           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_core17.log.once(1, "RenderPipeline linking is asynchronous")();
           await this._waitForLinkComplete();
-          import_core15.log.info(2, `RenderPipeline ${this.id} - async linking complete: ${this.linkStatus}`)();
+          import_core17.log.info(2, `RenderPipeline ${this.id} - async linking complete: ${this.linkStatus}`)();
           const status = this._getLinkStatus();
           this._reportLinkStatus(status);
         }
-        /** Report link status. First, check for shader compilation failures if linking fails */
         async _reportLinkStatus(status) {
           switch (status) {
             case "success":
@@ -4316,152 +5037,82 @@ ${source}`;
                 case "error":
                   this.fs.debugShader();
                   throw new Error(`${this} ${errorType} during compilation of ${this.fs}`);
-                case "pending":
-                  await this.fs.asyncCompilationStatus;
-                  this.fs.debugShader();
-                  break;
-                case "success":
-                  break;
-              }
-              const linkErrorLog = this.device.gl.getProgramInfoLog(this.handle);
-              this.device.reportError(
-                new Error(`${errorType} during ${status}: ${linkErrorLog}`),
-                this
-              )();
-              this.device.debug();
-          }
-        }
-        /**
-         * Get the shader compilation status
-         * TODO - Load log even when no error reported, to catch warnings?
-         * https://gamedev.stackexchange.com/questions/30429/how-to-detect-glsl-warnings
-         */
-        _getLinkStatus() {
-          const { gl } = this.device;
-          const linked = gl.getProgramParameter(this.handle, 35714 /* LINK_STATUS */);
-          if (!linked) {
-            this.linkStatus = "error";
-            return "link-error";
-          }
-          gl.validateProgram(this.handle);
-          const validated = gl.getProgramParameter(this.handle, 35715 /* VALIDATE_STATUS */);
-          if (!validated) {
-            this.linkStatus = "error";
-            return "validation-error";
-          }
-          this.linkStatus = "success";
-          return "success";
-        }
-        /** Use KHR_parallel_shader_compile extension if available */
-        async _waitForLinkComplete() {
-          const waitMs = async (ms) => await new Promise((resolve) => setTimeout(resolve, ms));
-          const DELAY_MS = 10;
-          if (!this.device.features.has("compilation-status-async-webgl")) {
-            await waitMs(DELAY_MS);
-            return;
-          }
-          const { gl } = this.device;
-          for (; ; ) {
-            const complete = gl.getProgramParameter(this.handle, 37297 /* COMPLETION_STATUS_KHR */);
-            if (complete) {
-              return;
-            }
-            await waitMs(DELAY_MS);
-          }
-        }
-        /**
-         * Checks if all texture-values uniforms are renderable (i.e. loaded)
-         * Update a texture if needed (e.g. from video)
-         * Note: This is currently done before every draw call
-         */
-        _areTexturesRenderable() {
-          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}`)();
-              texturesRenderable = false;
-            }
-          }
-          return texturesRenderable;
-        }
-        /** Apply any bindings (before each draw call) */
-        _applyBindings() {
-          if (this.linkStatus !== "success") {
-            return;
-          }
-          const { gl } = this.device;
-          gl.useProgram(this.handle);
-          let textureUnit = 0;
-          let uniformBufferIndex = 0;
-          for (const binding of this.shaderLayout.bindings) {
-            const value = this.bindings[binding.name] || this.bindings[binding.name.replace(/Uniforms$/, "")];
-            if (!value) {
-              throw new Error(`No value for binding ${binding.name} in ${this.id}`);
-            }
-            switch (binding.type) {
-              case "uniform":
-                const { name } = binding;
-                const location = gl.getUniformBlockIndex(this.handle, name);
-                if (location === 4294967295 /* INVALID_INDEX */) {
-                  throw new Error(`Invalid uniform block name ${name}`);
-                }
-                gl.uniformBlockBinding(this.handle, uniformBufferIndex, location);
-                if (value instanceof WEBGLBuffer) {
-                  gl.bindBufferBase(35345 /* UNIFORM_BUFFER */, uniformBufferIndex, value.handle);
-                } else {
-                  gl.bindBufferRange(
-                    35345 /* UNIFORM_BUFFER */,
-                    uniformBufferIndex,
-                    // @ts-expect-error
-                    value.buffer.handle,
-                    // @ts-expect-error
-                    value.offset || 0,
-                    // @ts-expect-error
-                    value.size || value.buffer.byteLength - value.offset
-                  );
-                }
-                uniformBufferIndex += 1;
-                break;
-              case "texture":
-                if (!(value instanceof WEBGLTextureView || value instanceof WEBGLTexture || value instanceof WEBGLFramebuffer)) {
-                  throw new Error("texture");
-                }
-                let texture;
-                if (value instanceof WEBGLTextureView) {
-                  texture = value.texture;
-                } 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"
-                  )();
-                  texture = value.colorAttachments[0].texture;
-                } else {
-                  throw new Error("No texture");
-                }
-                gl.activeTexture(33984 /* TEXTURE0 */ + textureUnit);
-                gl.bindTexture(texture.glTarget, texture.handle);
-                textureUnit += 1;
-                break;
-              case "sampler":
-                break;
-              case "storage":
-              case "read-only-storage":
-                throw new Error(`binding type '${binding.type}' not supported in WebGL`);
+                case "pending":
+                  await this.fs.asyncCompilationStatus;
+                  this.fs.debugShader();
+                  break;
+                case "success":
+                  break;
+              }
+              const linkErrorLog = this.device.gl.getProgramInfoLog(this.handle);
+              this.device.reportError(
+                new Error(`${errorType} during ${status}: ${linkErrorLog}`),
+                this
+              )();
+              this.device.debug();
+          }
+        }
+        _getLinkStatus() {
+          const { gl } = this.device;
+          const linked = gl.getProgramParameter(this.handle, 35714 /* LINK_STATUS */);
+          if (!linked) {
+            this.linkStatus = "error";
+            return "link-error";
+          }
+          this._initializeSamplerUniforms();
+          gl.validateProgram(this.handle);
+          const validated = gl.getProgramParameter(this.handle, 35715 /* VALIDATE_STATUS */);
+          if (!validated) {
+            this.linkStatus = "error";
+            return "validation-error";
+          }
+          this.linkStatus = "success";
+          return "success";
+        }
+        _initializeSamplerUniforms() {
+          const { gl } = this.device;
+          gl.useProgram(this.handle);
+          let textureUnit = 0;
+          const uniformCount = gl.getProgramParameter(this.handle, 35718 /* ACTIVE_UNIFORMS */);
+          for (let uniformIndex = 0; uniformIndex < uniformCount; uniformIndex++) {
+            const activeInfo = gl.getActiveUniform(this.handle, uniformIndex);
+            if (activeInfo && isGLSamplerType(activeInfo.type)) {
+              const isArray3 = activeInfo.name.endsWith("[0]");
+              const uniformName = isArray3 ? activeInfo.name.slice(0, -3) : activeInfo.name;
+              const location = gl.getUniformLocation(this.handle, uniformName);
+              if (location !== null) {
+                textureUnit = this._assignSamplerUniform(location, activeInfo, isArray3, textureUnit);
+              }
             }
           }
         }
-        /**
-         * Due to program sharing, uniforms need to be reset before every draw call
-         * (though caching will avoid redundant WebGL calls)
-         */
-        _applyUniforms() {
-          for (const uniformLayout of this.shaderLayout.uniforms || []) {
-            const { name, location, type, textureUnit } = uniformLayout;
-            const value = this.uniforms[name] ?? textureUnit;
-            if (value !== void 0) {
-              setUniform(this.device.gl, location, type, value);
+        _assignSamplerUniform(location, activeInfo, isArray3, textureUnit) {
+          const { gl } = this.device;
+          if (isArray3 && activeInfo.size > 1) {
+            const textureUnits = Int32Array.from(
+              { length: activeInfo.size },
+              (_, arrayIndex) => textureUnit + arrayIndex
+            );
+            gl.uniform1iv(location, textureUnits);
+            return textureUnit + activeInfo.size;
+          }
+          gl.uniform1i(location, textureUnit);
+          return textureUnit + 1;
+        }
+        async _waitForLinkComplete() {
+          const waitMs = async (ms) => await new Promise((resolve) => setTimeout(resolve, ms));
+          const DELAY_MS = 10;
+          if (!this.device.features.has("compilation-status-async-webgl")) {
+            await waitMs(DELAY_MS);
+            return;
+          }
+          const { gl } = this.device;
+          for (; ; ) {
+            const complete = gl.getProgramParameter(this.handle, 37297 /* COMPLETION_STATUS_KHR */);
+            if (complete) {
+              return;
             }
+            await waitMs(DELAY_MS);
           }
         }
       };
@@ -4484,44 +5135,44 @@ ${source}`;
     device.gl.bindBuffer(36662 /* COPY_READ_BUFFER */, null);
     device.gl.bindBuffer(36663 /* COPY_WRITE_BUFFER */, null);
   }
-  function _copyBufferToTexture(device, options) {
-    throw new Error("Not implemented");
+  function _copyBufferToTexture(_device, _options) {
+    throw new Error("copyBufferToTexture is not supported in WebGL");
   }
   function _copyTextureToBuffer(device, options) {
     const {
-      /** Texture to copy to/from. */
       sourceTexture,
-      /**  Mip-map level of the texture to copy to/from. (Default 0) */
       mipLevel = 0,
-      /** Defines which aspects of the texture to copy to/from. */
       aspect = "all",
-      /** Width to copy */
       width = options.sourceTexture.width,
-      /** Height to copy */
       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],
-      /** Destination buffer */
+      depthOrArrayLayers,
+      origin = [0, 0, 0],
       destinationBuffer,
-      /** Offset, in bytes, from the beginning of the buffer to the start of the image data (default 0) */
       byteOffset = 0,
-      /**
-       * The stride, in bytes, between the beginning of each block row and the subsequent block row.
-       * Required if there are multiple block rows (i.e. the copy height or depth is more than one block).
-       */
       bytesPerRow,
-      /**
-       * Number of block rows per single image of the texture.
-       * rowsPerImage &times; bytesPerRow is the stride, in bytes, between the beginning of each image of data and the subsequent image.
-       * Required if there are multiple images (i.e. the copy depth is more than one).
-       */
       rowsPerImage
     } = options;
+    if (sourceTexture instanceof import_core18.Texture) {
+      sourceTexture.readBuffer(
+        {
+          x: origin[0] ?? 0,
+          y: origin[1] ?? 0,
+          z: origin[2] ?? 0,
+          width,
+          height,
+          depthOrArrayLayers,
+          mipLevel,
+          aspect,
+          byteOffset
+        },
+        destinationBuffer
+      );
+      return;
+    }
     if (aspect !== "all") {
       throw new Error("aspect not supported in WebGL");
     }
-    if (mipLevel !== 0 || depthOrArrayLayers !== 0 || bytesPerRow || rowsPerImage) {
+    if (mipLevel !== 0 || depthOrArrayLayers !== void 0 || bytesPerRow || rowsPerImage) {
       throw new Error("not implemented");
     }
     const { framebuffer, destroyFramebuffer } = getFramebuffer(sourceTexture);
@@ -4530,9 +5181,8 @@ ${source}`;
       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_core18.assertDefined)(framebuffer.colorAttachments[0]);
+      const sourceParams = getTextureFormatWebGL(colorAttachment0.texture.props.format);
       const sourceFormat = sourceParams.format;
       const sourceType = sourceParams.type;
       device.gl.bindBuffer(35051 /* PIXEL_PACK_BUFFER */, webglBuffer.handle);
@@ -4567,7 +5217,7 @@ ${source}`;
       /** 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) */
@@ -4583,7 +5233,7 @@ ${source}`;
       // 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 */,
@@ -4639,7 +5289,7 @@ ${source}`;
     }
   }
   function getFramebuffer(source) {
-    if (source instanceof import_core16.Texture) {
+    if (source instanceof import_core18.Texture) {
       const { width, height, id } = source;
       const framebuffer = source.device.createFramebuffer({
         id: `framebuffer-for-${id}`,
@@ -4651,19 +5301,19 @@ ${source}`;
     }
     return { framebuffer: source, destroyFramebuffer: false };
   }
-  var import_core16, WEBGLCommandBuffer;
+  var import_core18, WEBGLCommandBuffer;
   var init_webgl_command_buffer = __esm({
     "src/adapter/resources/webgl-command-buffer.ts"() {
       "use strict";
-      import_core16 = __toESM(require_core(), 1);
-      init_webgl_texture();
+      import_core18 = __toESM(require_core(), 1);
       init_webgl_texture_table();
-      WEBGLCommandBuffer = class extends import_core16.CommandBuffer {
+      init_webgl_texture();
+      WEBGLCommandBuffer = class extends import_core18.CommandBuffer {
         device;
         handle = null;
         commands = [];
-        constructor(device) {
-          super(device, {});
+        constructor(device, props = {}) {
+          super(device, props);
           this.device = device;
         }
         _executeCommands(commands = this.commands) {
@@ -4691,15 +5341,15 @@ ${source}`;
   });
 
   // src/adapter/resources/webgl-render-pass.ts
-  var import_core17, COLOR_CHANNELS, WEBGLRenderPass;
+  var import_core19, COLOR_CHANNELS, WEBGLRenderPass;
   var init_webgl_render_pass = __esm({
     "src/adapter/resources/webgl-render-pass.ts"() {
       "use strict";
-      import_core17 = __toESM(require_core(), 1);
+      import_core19 = __toESM(require_core(), 1);
       init_with_parameters();
       init_unified_parameter_api();
       COLOR_CHANNELS = [1, 2, 4, 8];
-      WEBGLRenderPass = class extends import_core17.RenderPass {
+      WEBGLRenderPass = class extends import_core19.RenderPass {
         device;
         handle = null;
         /** Parameters that should be applied before each draw call */
@@ -4707,10 +5357,15 @@ ${source}`;
         constructor(device, props) {
           super(device, props);
           this.device = device;
+          const webglFramebuffer = this.props.framebuffer;
+          const isDefaultFramebuffer = !webglFramebuffer || webglFramebuffer.handle === null;
+          if (isDefaultFramebuffer) {
+            device.getDefaultCanvasContext()._resizeDrawingBufferIfNeeded();
+          }
           let viewport;
           if (!props?.parameters?.viewport) {
-            if (props?.framebuffer) {
-              const { width, height } = props.framebuffer;
+            if (!isDefaultFramebuffer) {
+              const { width, height } = webglFramebuffer;
               viewport = [0, 0, width, height];
             } else {
               const [width, height] = device.getDefaultCanvasContext().getDrawingBufferSize();
@@ -4719,19 +5374,28 @@ ${source}`;
           }
           this.device.pushState();
           this.setParameters({ viewport, ...this.props.parameters });
-          const webglFramebuffer = this.props.framebuffer;
-          if (this.props.framebuffer && webglFramebuffer?.handle) {
-            const drawBuffers = this.props.framebuffer.colorAttachments.map(
-              (_, i) => 36064 /* COLOR_ATTACHMENT0 */ + i
-            );
+          if (!isDefaultFramebuffer) {
+            const drawBuffers = webglFramebuffer.colorAttachments.map((_, i) => 36064 /* COLOR_ATTACHMENT0 */ + i);
             this.device.gl.drawBuffers(drawBuffers);
           } else {
             this.device.gl.drawBuffers([1029 /* BACK */]);
           }
           this.clear();
+          if (this.props.timestampQuerySet && this.props.beginTimestampIndex !== void 0) {
+            const webglQuerySet = this.props.timestampQuerySet;
+            webglQuerySet.writeTimestamp(this.props.beginTimestampIndex);
+          }
         }
         end() {
+          if (this.destroyed) {
+            return;
+          }
+          if (this.props.timestampQuerySet && this.props.endTimestampIndex !== void 0) {
+            const webglQuerySet = this.props.timestampQuerySet;
+            webglQuerySet.writeTimestamp(this.props.endTimestampIndex);
+          }
           this.device.popState();
+          this.destroy();
         }
         pushDebugGroup(groupLabel) {
         }
@@ -4771,9 +5435,9 @@ ${source}`;
           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 /* STENCIL_REF */] = parameters.stencilReference;
+            glParameters[36003 /* STENCIL_BACK_REF */] = parameters.stencilReference;
           }
           if ("colorMask" in parameters) {
             glParameters.colorMask = COLOR_CHANNELS.map(
@@ -4873,31 +5537,39 @@ ${source}`;
   });
 
   // src/adapter/resources/webgl-command-encoder.ts
-  var import_core18, WEBGLCommandEncoder;
+  var import_core20, WEBGLCommandEncoder;
   var init_webgl_command_encoder = __esm({
     "src/adapter/resources/webgl-command-encoder.ts"() {
       "use strict";
-      import_core18 = __toESM(require_core(), 1);
+      import_core20 = __toESM(require_core(), 1);
       init_webgl_command_buffer();
       init_webgl_render_pass();
-      WEBGLCommandEncoder = class extends import_core18.CommandEncoder {
+      WEBGLCommandEncoder = class extends import_core20.CommandEncoder {
         device;
         handle = null;
         commandBuffer;
         constructor(device, props) {
           super(device, props);
           this.device = device;
-          this.commandBuffer = new WEBGLCommandBuffer(device);
+          this.commandBuffer = new WEBGLCommandBuffer(device, {
+            id: `${this.props.id}-command-buffer`
+          });
         }
         destroy() {
+          this.destroyResource();
         }
-        finish() {
+        finish(props) {
+          if (props?.id && this.commandBuffer.id !== props.id) {
+            this.commandBuffer.id = props.id;
+            this.commandBuffer.props.id = props.id;
+          }
+          this.destroy();
           return this.commandBuffer;
         }
-        beginRenderPass(props) {
-          return new WEBGLRenderPass(this.device, props);
+        beginRenderPass(props = {}) {
+          return new WEBGLRenderPass(this.device, this._applyTimeProfilingToPassProps(props));
         }
-        beginComputePass(props) {
+        beginComputePass(props = {}) {
           throw new Error("ComputePass not supported in WebGL");
         }
         copyBufferToBuffer(options) {
@@ -4921,7 +5593,12 @@ ${source}`;
         }
         insertDebugMarker(markerLabel) {
         }
-        resolveQuerySet(querySet, destination, options) {
+        resolveQuerySet(_querySet, _destination, _options) {
+          throw new Error("resolveQuerySet is not supported in WebGL");
+        }
+        writeTimestamp(querySet, queryIndex) {
+          const webglQuerySet = querySet;
+          webglQuerySet.writeTimestamp(queryIndex);
         }
       };
     }
@@ -4934,7 +5611,7 @@ ${source}`;
     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) {
@@ -4971,15 +5648,15 @@ ${source}`;
     }
     return true;
   }
-  var import_core19, WEBGLVertexArray;
+  var import_core21, WEBGLVertexArray;
   var init_webgl_vertex_array = __esm({
     "src/adapter/resources/webgl-vertex-array.ts"() {
       "use strict";
-      import_core19 = __toESM(require_core(), 1);
+      import_core21 = __toESM(require_core(), 1);
       init_dist();
       init_webgl_vertex_formats();
       init_fill_array();
-      WEBGLVertexArray = class extends import_core19.VertexArray {
+      WEBGLVertexArray = class extends import_core21.VertexArray {
         get [Symbol.toStringTag]() {
           return "VertexArray";
         }
@@ -5147,7 +5824,7 @@ ${source}`;
           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_core21.getScratchArray)(value.constructor, length);
             fillArray({ target: typedArray, source: constantValue, start: 0, count: length });
             this.buffer.write(typedArray);
             this.bufferValue = value;
@@ -5165,14 +5842,14 @@ ${source}`;
     }
     return /^\d+$/.test(value);
   }
-  var import_core20, WEBGLTransformFeedback;
+  var import_core22, WEBGLTransformFeedback;
   var init_webgl_transform_feedback = __esm({
     "src/adapter/resources/webgl-transform-feedback.ts"() {
       "use strict";
-      import_core20 = __toESM(require_core(), 1);
-      init_src2();
+      import_core22 = __toESM(require_core(), 1);
+      init_src();
       init_webgl_topology_utils();
-      WEBGLTransformFeedback = class extends import_core20.TransformFeedback {
+      WEBGLTransformFeedback = class extends import_core22.TransformFeedback {
         device;
         gl;
         handle;
@@ -5225,8 +5902,8 @@ ${source}`;
           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);
             }
           });
         }
@@ -5235,7 +5912,7 @@ ${source}`;
           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_core22.log.warn(`${this.id} unusedBuffers varying buffer ${locationOrName}`)();
             return;
           }
           this.buffers[location] = { buffer, byteLength, byteOffset };
@@ -5248,7 +5925,7 @@ ${source}`;
             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") {
@@ -5295,8 +5972,8 @@ ${source}`;
          * 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);
           }
         }
@@ -5318,144 +5995,343 @@ ${source}`;
   });
 
   // src/adapter/resources/webgl-query-set.ts
-  var import_core21, WEBGLQuerySet;
+  var import_core23, WEBGLQuerySet;
   var init_webgl_query_set = __esm({
     "src/adapter/resources/webgl-query-set.ts"() {
       "use strict";
-      import_core21 = __toESM(require_core(), 1);
-      WEBGLQuerySet = class extends import_core21.QuerySet {
+      import_core23 = __toESM(require_core(), 1);
+      WEBGLQuerySet = class extends import_core23.QuerySet {
         device;
         handle;
-        target = null;
-        _queryPending = false;
-        _pollingPromise = null;
+        _timestampPairs = [];
+        _pendingReads = /* @__PURE__ */ new Set();
+        _occlusionQuery = null;
+        _occlusionActive = false;
         get [Symbol.toStringTag]() {
-          return "Query";
+          return "QuerySet";
         }
-        // Create a query class
         constructor(device, props) {
           super(device, props);
           this.device = device;
-          if (props.count > 1) {
-            throw new Error("WebGL QuerySet can only have one value");
-          }
-          const handle = this.device.gl.createQuery();
-          if (!handle) {
-            throw new Error("WebGL query not supported");
+          if (props.type === "timestamp") {
+            if (props.count < 2) {
+              throw new Error("Timestamp QuerySet requires at least two query slots");
+            }
+            this._timestampPairs = new Array(Math.ceil(props.count / 2)).fill(null).map(() => ({ activeQuery: null, completedQueries: [] }));
+            this.handle = null;
+          } else {
+            if (props.count > 1) {
+              throw new Error("WebGL occlusion QuerySet can only have one value");
+            }
+            const handle = this.device.gl.createQuery();
+            if (!handle) {
+              throw new Error("WebGL query not supported");
+            }
+            this.handle = handle;
           }
-          this.handle = handle;
           Object.seal(this);
         }
         destroy() {
-          this.device.gl.deleteQuery(this.handle);
+          if (this.destroyed) {
+            return;
+          }
+          if (this.handle) {
+            this.device.gl.deleteQuery(this.handle);
+          }
+          for (const pair of this._timestampPairs) {
+            if (pair.activeQuery) {
+              this._cancelPendingQuery(pair.activeQuery);
+              this.device.gl.deleteQuery(pair.activeQuery.handle);
+            }
+            for (const query of pair.completedQueries) {
+              this._cancelPendingQuery(query);
+              this.device.gl.deleteQuery(query.handle);
+            }
+          }
+          if (this._occlusionQuery) {
+            this._cancelPendingQuery(this._occlusionQuery);
+            this.device.gl.deleteQuery(this._occlusionQuery.handle);
+          }
+          for (const query of Array.from(this._pendingReads)) {
+            this._cancelPendingQuery(query);
+          }
+          this.destroyResource();
         }
-        // FOR RENDER PASS AND COMMAND ENCODER
-        /**
-         * Shortcut for timer query (dependent on extension in both WebGL1 and 2)
-         * Measures GPU time delta between this call and a matching `end` call in the
-         * GPU instruction stream.
-         */
-        beginTimestampQuery() {
-          return this._begin(35007 /* TIME_ELAPSED_EXT */);
+        isResultAvailable(queryIndex) {
+          if (this.props.type === "timestamp") {
+            if (queryIndex === void 0) {
+              return this._timestampPairs.some(
+                (_, pairIndex) => this._isTimestampPairAvailable(pairIndex)
+              );
+            }
+            return this._isTimestampPairAvailable(this._getTimestampPairIndex(queryIndex));
+          }
+          if (!this._occlusionQuery) {
+            return false;
+          }
+          return this._pollQueryAvailability(this._occlusionQuery);
+        }
+        async readResults(options) {
+          const firstQuery = options?.firstQuery || 0;
+          const queryCount = options?.queryCount || this.props.count - firstQuery;
+          this._validateRange(firstQuery, queryCount);
+          if (this.props.type === "timestamp") {
+            const results = new Array(queryCount).fill(0n);
+            const startPairIndex = Math.floor(firstQuery / 2);
+            const endPairIndex = Math.floor((firstQuery + queryCount - 1) / 2);
+            for (let pairIndex = startPairIndex; pairIndex <= endPairIndex; pairIndex++) {
+              const duration = await this._consumeTimestampPairResult(pairIndex);
+              const beginSlot = pairIndex * 2;
+              const endSlot = beginSlot + 1;
+              if (beginSlot >= firstQuery && beginSlot < firstQuery + queryCount) {
+                results[beginSlot - firstQuery] = 0n;
+              }
+              if (endSlot >= firstQuery && endSlot < firstQuery + queryCount) {
+                results[endSlot - firstQuery] = duration;
+              }
+            }
+            return results;
+          }
+          if (!this._occlusionQuery) {
+            throw new Error("Occlusion query has not been started");
+          }
+          return [await this._consumeQueryResult(this._occlusionQuery)];
         }
-        endTimestampQuery() {
-          this._end();
+        async readTimestampDuration(beginIndex, endIndex) {
+          if (this.props.type !== "timestamp") {
+            throw new Error("Timestamp durations require a timestamp QuerySet");
+          }
+          if (beginIndex < 0 || endIndex >= this.props.count || endIndex <= beginIndex) {
+            throw new Error("Timestamp duration range is out of bounds");
+          }
+          if (beginIndex % 2 !== 0 || endIndex !== beginIndex + 1) {
+            throw new Error("WebGL timestamp durations require adjacent even/odd query indices");
+          }
+          const result = await this._consumeTimestampPairResult(this._getTimestampPairIndex(beginIndex));
+          return Number(result) / 1e6;
         }
-        // Shortcut for occlusion queries
-        beginOcclusionQuery(options) {
-          return this._begin(
-            options?.conservative ? 36202 /* ANY_SAMPLES_PASSED_CONSERVATIVE */ : 35887 /* ANY_SAMPLES_PASSED */
-          );
+        beginOcclusionQuery() {
+          if (this.props.type !== "occlusion") {
+            throw new Error("Occlusion queries require an occlusion QuerySet");
+          }
+          if (!this.handle) {
+            throw new Error("WebGL occlusion query is not available");
+          }
+          if (this._occlusionActive) {
+            throw new Error("Occlusion query is already active");
+          }
+          this.device.gl.beginQuery(35887 /* ANY_SAMPLES_PASSED */, this.handle);
+          this._occlusionQuery = {
+            handle: this.handle,
+            promise: null,
+            result: null,
+            disjoint: false,
+            cancelled: false,
+            pollRequestId: null,
+            resolve: null,
+            reject: null
+          };
+          this._occlusionActive = true;
         }
         endOcclusionQuery() {
-          this._end();
-        }
-        // Shortcut for transformFeedbackQuery
-        beginTransformFeedbackQuery() {
-          return this._begin(35976 /* TRANSFORM_FEEDBACK_PRIMITIVES_WRITTEN */);
-        }
-        endTransformFeedbackQuery() {
-          this._end();
-        }
-        async resolveQuery() {
-          const value = await this.pollQuery();
-          return [value];
+          if (!this._occlusionActive) {
+            throw new Error("Occlusion query is not active");
+          }
+          this.device.gl.endQuery(35887 /* ANY_SAMPLES_PASSED */);
+          this._occlusionActive = false;
         }
-        // PRIVATE METHODS
-        /**
-         * Due to OpenGL API limitations, after calling `begin()` on one Query
-         * instance, `end()` must be called on that same instance before
-         * calling `begin()` on another query. While there can be multiple
-         * outstanding queries representing disjoint `begin()`/`end()` intervals.
-         * It is not possible to interleave or overlap `begin` and `end` calls.
-         */
-        _begin(target2) {
-          if (this._queryPending) {
+        writeTimestamp(queryIndex) {
+          if (this.props.type !== "timestamp") {
+            throw new Error("Timestamp writes require a timestamp QuerySet");
+          }
+          const pairIndex = this._getTimestampPairIndex(queryIndex);
+          const pair = this._timestampPairs[pairIndex];
+          if (queryIndex % 2 === 0) {
+            if (pair.activeQuery) {
+              throw new Error("Timestamp query pair is already active");
+            }
+            const handle = this.device.gl.createQuery();
+            if (!handle) {
+              throw new Error("WebGL query not supported");
+            }
+            const query = {
+              handle,
+              promise: null,
+              result: null,
+              disjoint: false,
+              cancelled: false,
+              pollRequestId: null,
+              resolve: null,
+              reject: null
+            };
+            this.device.gl.beginQuery(35007 /* TIME_ELAPSED_EXT */, handle);
+            pair.activeQuery = query;
             return;
           }
-          this.target = target2;
-          this.device.gl.beginQuery(this.target, this.handle);
-          return;
+          if (!pair.activeQuery) {
+            throw new Error("Timestamp query pair was ended before it was started");
+          }
+          this.device.gl.endQuery(35007 /* TIME_ELAPSED_EXT */);
+          pair.completedQueries.push(pair.activeQuery);
+          pair.activeQuery = null;
         }
-        // ends the current query
-        _end() {
-          if (this._queryPending) {
-            return;
+        _validateRange(firstQuery, queryCount) {
+          if (firstQuery < 0 || queryCount < 0 || firstQuery + queryCount > this.props.count) {
+            throw new Error("Query read range is out of bounds");
           }
-          if (this.target) {
-            this.device.gl.endQuery(this.target);
-            this.target = null;
-            this._queryPending = true;
+        }
+        _getTimestampPairIndex(queryIndex) {
+          if (queryIndex < 0 || queryIndex >= this.props.count) {
+            throw new Error("Query index is out of bounds");
           }
-          return;
+          return Math.floor(queryIndex / 2);
         }
-        // Returns true if the query result is available
-        isResultAvailable() {
-          if (!this._queryPending) {
+        _isTimestampPairAvailable(pairIndex) {
+          const pair = this._timestampPairs[pairIndex];
+          if (!pair || pair.completedQueries.length === 0) {
             return false;
           }
+          return this._pollQueryAvailability(pair.completedQueries[0]);
+        }
+        _pollQueryAvailability(query) {
+          if (query.cancelled || this.destroyed) {
+            query.result = 0n;
+            return true;
+          }
+          if (query.result !== null || query.disjoint) {
+            return true;
+          }
           const resultAvailable = this.device.gl.getQueryParameter(
-            this.handle,
+            query.handle,
             34919 /* QUERY_RESULT_AVAILABLE */
           );
-          if (resultAvailable) {
-            this._queryPending = false;
+          if (!resultAvailable) {
+            return false;
+          }
+          const isDisjoint = Boolean(this.device.gl.getParameter(36795 /* GPU_DISJOINT_EXT */));
+          query.disjoint = isDisjoint;
+          query.result = isDisjoint ? 0n : BigInt(this.device.gl.getQueryParameter(query.handle, 34918 /* QUERY_RESULT */));
+          return true;
+        }
+        async _consumeTimestampPairResult(pairIndex) {
+          const pair = this._timestampPairs[pairIndex];
+          if (!pair || pair.completedQueries.length === 0) {
+            throw new Error("Timestamp query pair has no completed result");
+          }
+          const query = pair.completedQueries.shift();
+          try {
+            return await this._consumeQueryResult(query);
+          } finally {
+            this.device.gl.deleteQuery(query.handle);
           }
-          return resultAvailable;
         }
-        // Timing query is disjoint, i.e. results are invalid
-        isTimerDisjoint() {
-          return this.device.gl.getParameter(36795 /* GPU_DISJOINT_EXT */);
+        _consumeQueryResult(query) {
+          if (query.promise) {
+            return query.promise;
+          }
+          this._pendingReads.add(query);
+          query.promise = new Promise((resolve, reject) => {
+            query.resolve = resolve;
+            query.reject = reject;
+            const poll = () => {
+              query.pollRequestId = null;
+              if (query.cancelled || this.destroyed) {
+                this._pendingReads.delete(query);
+                query.promise = null;
+                query.resolve = null;
+                query.reject = null;
+                resolve(0n);
+                return;
+              }
+              if (!this._pollQueryAvailability(query)) {
+                query.pollRequestId = this._requestAnimationFrame(poll);
+                return;
+              }
+              this._pendingReads.delete(query);
+              query.promise = null;
+              query.resolve = null;
+              query.reject = null;
+              if (query.disjoint) {
+                reject(new Error("GPU timestamp query was invalidated by a disjoint event"));
+              } else {
+                resolve(query.result || 0n);
+              }
+            };
+            poll();
+          });
+          return query.promise;
+        }
+        _cancelPendingQuery(query) {
+          this._pendingReads.delete(query);
+          query.cancelled = true;
+          if (query.pollRequestId !== null) {
+            this._cancelAnimationFrame(query.pollRequestId);
+            query.pollRequestId = null;
+          }
+          if (query.resolve) {
+            const resolve = query.resolve;
+            query.promise = null;
+            query.resolve = null;
+            query.reject = null;
+            resolve(0n);
+          }
         }
-        // Returns query result.
-        getResult() {
-          return this.device.gl.getQueryParameter(this.handle, 34918 /* QUERY_RESULT */);
+        _requestAnimationFrame(callback) {
+          return requestAnimationFrame(callback);
         }
-        // Returns the query result, converted to milliseconds to match JavaScript conventions.
-        getTimerMilliseconds() {
-          return this.getResult() / 1e6;
+        _cancelAnimationFrame(requestId) {
+          cancelAnimationFrame(requestId);
         }
-        // Polls the query
-        pollQuery(limit = Number.POSITIVE_INFINITY) {
-          if (this._pollingPromise) {
-            return this._pollingPromise;
+      };
+    }
+  });
+
+  // src/adapter/resources/webgl-fence.ts
+  var import_core24, WEBGLFence;
+  var init_webgl_fence = __esm({
+    "src/adapter/resources/webgl-fence.ts"() {
+      "use strict";
+      import_core24 = __toESM(require_core(), 1);
+      WEBGLFence = class extends import_core24.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");
           }
-          let counter = 0;
-          this._pollingPromise = new Promise((resolve, reject) => {
+          this.handle = sync;
+          this.signaled = new Promise((resolve) => {
             const poll = () => {
-              if (this.isResultAvailable()) {
-                resolve(this.getResult());
-                this._pollingPromise = null;
-              } else if (counter++ > limit) {
-                reject("Timed out");
-                this._pollingPromise = null;
+              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 {
-                requestAnimationFrame(poll);
+                setTimeout(poll, 1);
               }
             };
-            requestAnimationFrame(poll);
+            poll();
           });
-          return this._pollingPromise;
+        }
+        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);
+          }
         }
       };
     }
@@ -5507,35 +6383,6 @@ ${source}`;
     }
   });
 
-  // src/adapter/converters/shader-formats.ts
-  function convertGLDataTypeToDataType(type) {
-    return GL_DATA_TYPE_MAP[type];
-  }
-  var GL_DATA_TYPE_MAP;
-  var init_shader_formats = __esm({
-    "src/adapter/converters/shader-formats.ts"() {
-      "use strict";
-      GL_DATA_TYPE_MAP = {
-        [5124 /* INT */]: "sint32",
-        [5125 /* UNSIGNED_INT */]: "uint32",
-        [5122 /* SHORT */]: "sint16",
-        [5123 /* UNSIGNED_SHORT */]: "uint16",
-        [5120 /* BYTE */]: "sint8",
-        [5121 /* UNSIGNED_BYTE */]: "uint8",
-        [5126 /* FLOAT */]: "float32",
-        [5131 /* HALF_FLOAT */]: "float16",
-        [33635 /* UNSIGNED_SHORT_5_6_5 */]: "uint16",
-        [32819 /* UNSIGNED_SHORT_4_4_4_4 */]: "uint16",
-        [32820 /* UNSIGNED_SHORT_5_5_5_1 */]: "uint16",
-        [33640 /* UNSIGNED_INT_2_10_10_10_REV */]: "uint32",
-        [35899 /* UNSIGNED_INT_10F_11F_11F_REV */]: "uint32",
-        [35902 /* UNSIGNED_INT_5_9_9_9_REV */]: "uint32",
-        [34042 /* UNSIGNED_INT_24_8 */]: "uint32",
-        [36269 /* FLOAT_32_UNSIGNED_INT_24_8_REV */]: "uint32"
-      };
-    }
-  });
-
   // src/adapter/helpers/webgl-texture-utils.ts
   function readPixelsToArray(source, options) {
     const {
@@ -5565,7 +6412,7 @@ ${source}`;
     sourceFormat ||= texture?.glFormat || 6408 /* RGBA */;
     sourceType ||= texture?.glType || 5121 /* UNSIGNED_BYTE */;
     target2 = getPixelArray(target2, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
-    const signedType = (0, import_core22.getDataType)(target2);
+    const signedType = import_core25.dataTypeDecoder.getDataType(target2);
     sourceType = sourceType || convertDataTypeToGLDataType(signedType);
     const prevHandle = gl.bindFramebuffer(
       36160 /* FRAMEBUFFER */,
@@ -5617,7 +6464,7 @@ ${source}`;
     return webglBufferTarget;
   }
   function getFramebuffer2(source) {
-    if (!(source instanceof import_core22.Framebuffer)) {
+    if (!(source instanceof import_core25.Framebuffer)) {
       return { framebuffer: toFramebuffer(source), deleteFramebuffer: true };
     }
     return { framebuffer: source, deleteFramebuffer: false };
@@ -5639,15 +6486,15 @@ ${source}`;
     }
     glType ||= 5121 /* UNSIGNED_BYTE */;
     const shaderType = convertGLDataTypeToDataType(glType);
-    const ArrayType = (0, import_core22.getTypedArrayConstructor)(shaderType);
+    const ArrayType = import_core25.dataTypeDecoder.getTypedArrayConstructor(shaderType);
     const components = glFormatToComponents(glFormat);
     return new ArrayType(width * height * components);
   }
-  var import_core22;
+  var import_core25;
   var init_webgl_texture_utils = __esm({
     "src/adapter/helpers/webgl-texture-utils.ts"() {
       "use strict";
-      import_core22 = __toESM(require_core(), 1);
+      import_core25 = __toESM(require_core(), 1);
       init_webgl_shadertypes();
       init_format_utils();
       init_shader_formats();
@@ -5693,17 +6540,19 @@ ${source}`;
     }
     return true;
   }
-  var import_core23, WebGLDevice;
+  var import_core26, WebGLDevice;
   var init_webgl_device = __esm({
     "src/adapter/webgl-device.ts"() {
       "use strict";
-      import_core23 = __toESM(require_core(), 1);
+      import_core26 = __toESM(require_core(), 1);
       init_webgl_state_tracker();
       init_create_browser_context();
+      init_webgl_context_data();
       init_webgl_device_info();
       init_webgl_device_features();
       init_webgl_device_limits();
       init_webgl_canvas_context();
+      init_webgl_presentation_context();
       init_spector();
       init_webgl_developer_tools();
       init_webgl_texture_table();
@@ -5714,15 +6563,23 @@ ${source}`;
       init_webgl_texture();
       init_webgl_framebuffer();
       init_webgl_render_pipeline();
+      init_webgl_shared_render_pipeline();
       init_webgl_command_encoder();
       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_core26.Device {
+        static getDeviceFromContext(gl) {
+          if (!gl) {
+            return null;
+          }
+          return gl.luma?.device ?? null;
+        }
         // Public `Device` API
         /** type of this device */
         type = "webgl";
@@ -5744,7 +6601,7 @@ ${source}`;
         // @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;
@@ -5767,11 +6624,12 @@ ${source}`;
         }
         constructor(props) {
           super({ ...props, id: props.id || uid("webgl-device") });
-          const canvasContextProps = import_core23.Device._getCanvasContextProps(props);
+          const canvasContextProps = import_core26.Device._getCanvasContextProps(props);
           if (!canvasContextProps) {
             throw new Error("WebGLDevice requires props.createCanvasContext to be set");
           }
-          let device = canvasContextProps.canvas?.gl?.device;
+          const existingContext = canvasContextProps.canvas?.gl ?? null;
+          let device = WebGLDevice.getDeviceFromContext(existingContext);
           if (device) {
             throw new Error(`WebGL context already attached to device ${device.id}`);
           }
@@ -5786,6 +6644,9 @@ ${source}`;
           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,
@@ -5802,14 +6663,15 @@ ${source}`;
           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(
+              import_core26.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;
             }
@@ -5818,32 +6680,31 @@ ${source}`;
           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;
+          if (!contextData.extensions) {
+            contextData.extensions = {};
+          }
+          this.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_core26.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_core26.log.warn("WebGL debug mode activated. Performance reduced.")();
+          }
+          if (props.debugWebGL) {
+            import_core26.log.level = Math.max(import_core26.log.level, 1);
           }
           this.commandEncoder = new WEBGLCommandEncoder(this, { id: `${this}-command-encoder` });
+          this.canvasContext._startObservers();
         }
         /**
          * Destroys the device
@@ -5856,20 +6717,22 @@ ${source}`;
          * browser API for destroying WebGL contexts.
          */
         destroy() {
+          this.commandEncoder?.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");
         }
+        createPresentationContext(props) {
+          return new WebGLPresentationContext(this, props || {});
+        }
         createBuffer(props) {
           const newProps = this._normalizeBufferProps(props);
           return new WEBGLBuffer(this, newProps);
@@ -5898,9 +6761,18 @@ ${source}`;
         createQuerySet(props) {
           return new WEBGLQuerySet(this, props);
         }
+        createFence() {
+          return new WEBGLFence(this);
+        }
         createRenderPipeline(props) {
           return new WEBGLRenderPipeline(this, props);
         }
+        _createSharedRenderPipelineWebGL(props) {
+          return new WEBGLSharedRenderPipeline(
+            this,
+            props
+          );
+        }
         createComputePipeline(props) {
           throw new Error("ComputePipeline not supported in WebGL");
         }
@@ -5913,12 +6785,31 @@ ${source}`;
          * Chrome's offscreen canvas does not require gl.commit
          */
         submit(commandBuffer) {
+          let submittedCommandEncoder = null;
           if (!commandBuffer) {
-            commandBuffer = this.commandEncoder.finish();
-            this.commandEncoder.destroy();
-            this.commandEncoder = this.createCommandEncoder({ id: `${this.id}-default-encoder` });
+            ({ submittedCommandEncoder, commandBuffer } = this._finalizeDefaultCommandEncoderForSubmit());
+          }
+          try {
+            commandBuffer._executeCommands();
+            if (submittedCommandEncoder) {
+              submittedCommandEncoder.resolveTimeProfilingQuerySet().then(() => {
+                this.commandEncoder._gpuTimeMs = submittedCommandEncoder._gpuTimeMs;
+              }).catch(() => {
+              });
+            }
+          } finally {
+            commandBuffer.destroy();
           }
-          commandBuffer._executeCommands();
+        }
+        _finalizeDefaultCommandEncoderForSubmit() {
+          const submittedCommandEncoder = this.commandEncoder;
+          const commandBuffer = submittedCommandEncoder.finish();
+          this.commandEncoder.destroy();
+          this.commandEncoder = this.createCommandEncoder({
+            id: submittedCommandEncoder.props.id,
+            timeProfilingQuerySet: submittedCommandEncoder.getTimeProfilingQuerySet()
+          });
+          return { submittedCommandEncoder, commandBuffer };
         }
         //
         // TEMPORARY HACKS - will be removed in v9.1
@@ -5941,11 +6832,11 @@ ${source}`;
           return withGLParameters(this.gl, parameters, func);
         }
         resetWebGL() {
-          import_core23.log.warn("WebGLDevice.resetWebGL is deprecated, use only for debugging")();
+          import_core26.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)
@@ -6013,7 +6904,7 @@ ${source}`;
           this._constants = this._constants || new Array(maxVertexAttributes).fill(null);
           const currentConstant = this._constants[location];
           if (currentConstant && compareConstantArrayValues2(currentConstant, constant)) {
-            import_core23.log.info(
+            import_core26.log.info(
               1,
               `setConstantAttributeWebGL(${location}) could have been skipped, value unchanged`
             )();
@@ -6035,8 +6926,8 @@ ${source}`;
         }
         /** 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
         /**
@@ -6057,23 +6948,23 @@ ${source}`;
     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_core27, LOG_LEVEL2, WebGLAdapter, webgl2Adapter;
   var init_webgl_adapter = __esm({
     "src/adapter/webgl-adapter.ts"() {
       "use strict";
-      import_core24 = __toESM(require_core(), 1);
+      import_core27 = __toESM(require_core(), 1);
       init_polyfill_webgl1_extensions();
       init_spector();
       init_webgl_developer_tools();
       LOG_LEVEL2 = 1;
-      WebGLAdapter = class extends import_core24.Adapter {
+      WebGLAdapter = class extends import_core27.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_core27.Device.defaultProps = { ...import_core27.Device.defaultProps, ...DEFAULT_SPECTOR_PROPS };
         }
         /** Force any created WebGL contexts to be WebGL2 contexts, polyfilled with WebGL1 extensions */
         enforceWebGL2(enable2) {
@@ -6088,7 +6979,7 @@ ${source}`;
             return true;
           }
           if (typeof WebGLRenderingContext !== "undefined" && handle instanceof WebGLRenderingContext) {
-            import_core24.log.warn("WebGL1 is not supported", handle)();
+            import_core27.log.warn("WebGL1 is not supported", handle)();
           }
           return false;
         }
@@ -6104,8 +6995,9 @@ ${source}`;
           if (gl instanceof WebGLDevice2) {
             return gl;
           }
-          if (gl?.device instanceof WebGLDevice2) {
-            return gl.device;
+          const existingDevice = WebGLDevice2.getDeviceFromContext(gl);
+          if (existingDevice) {
+            return existingDevice;
           }
           if (!isWebGL(gl)) {
             throw new Error("Invalid WebGL2RenderingContext");
@@ -6119,28 +7011,33 @@ ${source}`;
         }
         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_core27.log.error(`Failed to initialize debug libraries ${result.reason}`)();
             }
+          }
+          try {
             const device = new WebGLDevice2(props);
+            import_core27.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_core27.log.probe(LOG_LEVEL2, message2)();
+            import_core27.log.table(LOG_LEVEL2, device.info)();
             return device;
           } finally {
-            import_core24.log.groupEnd(LOG_LEVEL2)();
+            import_core27.log.groupEnd(LOG_LEVEL2)();
+            import_core27.log.info(
+              LOG_LEVEL2,
+              `%cWebGL call tracing: luma.log.set('debug-webgl') `,
+              "color: white; background: blue; padding: 2px 6px; border-radius: 3px;"
+            )();
           }
         }
       };
@@ -6149,9 +7046,10 @@ ${source}`;
   });
 
   // src/index.ts
-  var init_src2 = __esm({
+  var init_src = __esm({
     "src/index.ts"() {
       "use strict";
+      init_webgl_constants();
       init_webgl_adapter();
       init_webgl_device();
       init_webgl_canvas_context();
@@ -6160,6 +7058,7 @@ ${source}`;
       init_webgl_shader();
       init_webgl_sampler();
       init_webgl_framebuffer();
+      init_webgl_fence();
       init_webgl_render_pipeline();
       init_webgl_command_encoder();
       init_webgl_render_pass();
@@ -6176,8 +7075,10 @@ ${source}`;
   // bundle.ts
   var bundle_exports = {};
   __export(bundle_exports, {
+    GL: () => GLEnum,
     WEBGLBuffer: () => WEBGLBuffer,
     WEBGLCommandEncoder: () => WEBGLCommandEncoder,
+    WEBGLFence: () => WEBGLFence,
     WEBGLFramebuffer: () => WEBGLFramebuffer,
     WEBGLRenderPass: () => WEBGLRenderPass,
     WEBGLRenderPipeline: () => WEBGLRenderPipeline,
@@ -6199,7 +7100,7 @@ ${source}`;
     withGLParameters: () => withGLParameters
   });
   __reExport(bundle_exports, __toESM(require_core(), 1));
-  init_src2();
+  init_src();
   return __toCommonJS(bundle_exports);
 })();
       return __exports__;