@luma.gl/webgl 9.3.0-alpha.2 → 9.3.0-alpha.6

package/dist/index.cjs

@@ -155,6 +155,24 @@ var init_load_script = __esm({
   }
 });
 
+// dist/context/helpers/webgl-context-data.js
+function getWebGLContextData(gl) {
+  const contextData = gl.luma || {
+    _polyfilled: false,
+    extensions: {},
+    softwareRenderer: false
+  };
+  contextData._polyfilled ??= false;
+  contextData.extensions ||= {};
+  gl.luma = contextData;
+  return contextData;
+}
+var init_webgl_context_data = __esm({
+  "dist/context/helpers/webgl-context-data.js"() {
+    "use strict";
+  }
+});
+
 // dist/context/debug/spector.js
 async function loadSpectorJS(props) {
   if (!globalThis.SPECTOR) {
@@ -195,9 +213,10 @@ function initializeSpectorJS(props) {
   }
   if (props.gl) {
     const gl = props.gl;
-    const device = gl.device;
+    const contextData = getWebGLContextData(gl);
+    const device = contextData.device;
     spector == null ? void 0 : spector.startCapture(props.gl, 500);
-    gl.device = device;
+    contextData.device = device;
     new Promise((resolve) => setTimeout(resolve, 2e3)).then((_) => {
       import_core.log.info("Spector capture stopped after 2 seconds")();
       spector == null ? void 0 : spector.stopCapture();
@@ -211,6 +230,7 @@ var init_spector = __esm({
     "use strict";
     import_core = require("@luma.gl/core");
     init_load_script();
+    init_webgl_context_data();
     LOG_LEVEL = 1;
     spector = null;
     initialized = false;
@@ -226,7 +246,7 @@ var init_spector = __esm({
 });
 
 // dist/context/debug/webgl-developer-tools.js
-function getWebGLContextData(gl) {
+function getWebGLContextData2(gl) {
   gl.luma = gl.luma || {};
   return gl.luma;
 }
@@ -241,7 +261,7 @@ function makeDebugContext(gl, props = {}) {
   return props.debugWebGL || props.traceWebGL ? getDebugContext(gl, props) : getRealContext(gl);
 }
 function getRealContext(gl) {
-  const data = getWebGLContextData(gl);
+  const data = getWebGLContextData2(gl);
   return data.realContext ? data.realContext : gl;
 }
 function getDebugContext(gl, props) {
@@ -249,7 +269,7 @@ function getDebugContext(gl, props) {
     import_core2.log.warn("webgl-debug not loaded")();
     return gl;
   }
-  const data = getWebGLContextData(gl);
+  const data = getWebGLContextData2(gl);
   if (data.debugContext) {
     return data.debugContext;
   }
@@ -267,6 +287,7 @@ function getDebugContext(gl, props) {
   const debugContext = Object.create(WebGLDebugContext);
   data.realContext = gl;
   data.debugContext = debugContext;
+  debugContext.luma = data;
   debugContext.debug = true;
   return debugContext;
 }
@@ -791,6 +812,7 @@ var init_webgl_parameter_tables = __esm({
 
 // dist/context/parameters/unified-parameter-api.js
 function setGLParameters(gl, parameters) {
+  var _a;
   if (isObjectEmpty(parameters)) {
     return;
   }
@@ -806,7 +828,7 @@ function setGLParameters(gl, parameters) {
       }
     }
   }
-  const cache = gl.state && gl.state.cache;
+  const cache = (_a = gl.lumaState) == null ? void 0 : _a.cache;
   if (cache) {
     for (const key in compositeSetters) {
       const compositeSetter = GL_COMPOSITE_PARAMETER_SETTERS[key];
@@ -929,7 +951,7 @@ var init_webgl_state_tracker = __esm({
     init_webgl_parameter_tables();
     WebGLStateTracker = class {
       static get(gl) {
-        return gl.state;
+        return gl.lumaState;
       }
       gl;
       program = null;
@@ -967,7 +989,7 @@ var init_webgl_state_tracker = __esm({
           throw new Error("WebGLStateTracker");
         }
         this.initialized = true;
-        this.gl.state = this;
+        this.gl.lumaState = this;
         installProgramSpy(gl);
         for (const key in GL_HOOKED_SETTERS) {
           const setter = GL_HOOKED_SETTERS[key];
@@ -1027,13 +1049,11 @@ function createBrowserContext(canvas, props, webglContextAttributes) {
     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);
-      if (gl) {
-        gl.luma ||= {};
-        gl.luma.softwareRenderer = true;
-      }
+      softwareRenderer = true;
     }
     if (!gl) {
       gl = canvas.getContext("webgl", {});
@@ -1046,10 +1066,11 @@ function createBrowserContext(canvas, props, webglContextAttributes) {
       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);
-    gl.luma ||= {};
     return gl;
   } finally {
     canvas.removeEventListener("webglcontextcreationerror", onCreateError, false);
@@ -1058,6 +1079,7 @@ function createBrowserContext(canvas, props, webglContextAttributes) {
 var init_create_browser_context = __esm({
   "dist/context/helpers/create-browser-context.js"() {
     "use strict";
+    init_webgl_context_data();
   }
 });
 
@@ -1135,6 +1157,8 @@ function identifyGPUType(vendor, renderer) {
   }
   const gpuVendor = identifyGPUVendor(vendor, renderer);
   switch (gpuVendor) {
+    case "apple":
+      return isAppleSiliconGPU(vendor, renderer) ? "integrated" : "unknown";
     case "intel":
       return "integrated";
     case "software":
@@ -1145,6 +1169,9 @@ function identifyGPUType(vendor, renderer) {
       return "discrete";
   }
 }
+function isAppleSiliconGPU(vendor, renderer) {
+  return /Apple (M\d|A\d|GPU)/i.test(`${vendor} ${renderer}`);
+}
 var import_constants4;
 var init_webgl_device_info = __esm({
   "dist/adapter/device-helpers/webgl-device-info.js"() {
@@ -1197,8 +1224,23 @@ function isTextureFeature(feature) {
   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;
@@ -1209,12 +1251,17 @@ function getTextureFormatCapabilitiesWebGL(gl, formatSupport, extensions) {
   if (webglFormatInfo == null ? void 0 : webglFormatInfo.x) {
     supported = supported && Boolean(getWebGLExtension(gl, webglFormatInfo.x, extensions));
   }
+  if (formatSupport.format === "stencil8") {
+    supported = false;
+  }
+  const renderFeatureSupported = (webglFormatInfo == null ? void 0 : webglFormatInfo.r) === false ? false : (webglFormatInfo == null ? void 0 : 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
@@ -1223,6 +1270,45 @@ function getTextureFormatCapabilitiesWebGL(gl, formatSupport, extensions) {
     store: supported && formatSupport.store
   };
 }
+function isColorRenderableTextureFormat(gl, format, extensions) {
+  const webglFormatInfo = WEBGL_TEXTURE_FORMATS[format];
+  const internalFormat = webglFormatInfo == null ? void 0 : webglFormatInfo.gl;
+  if (internalFormat === void 0) {
+    return false;
+  }
+  if ((webglFormatInfo == null ? void 0 : webglFormatInfo.x) && !getWebGLExtension(gl, webglFormatInfo.x, extensions)) {
+    return false;
+  }
+  const previousTexture = gl.getParameter(32873);
+  const previousFramebuffer = gl.getParameter(36006);
+  const texture = gl.createTexture();
+  const framebuffer = gl.createFramebuffer();
+  if (!texture || !framebuffer) {
+    return false;
+  }
+  const noError = Number(0);
+  let error = Number(gl.getError());
+  while (error !== noError) {
+    error = gl.getError();
+  }
+  let renderable = false;
+  try {
+    gl.bindTexture(3553, texture);
+    gl.texStorage2D(3553, 1, internalFormat, 1, 1);
+    if (Number(gl.getError()) !== noError) {
+      return false;
+    }
+    gl.bindFramebuffer(36160, framebuffer);
+    gl.framebufferTexture2D(36160, 36064, 3553, texture, 0);
+    renderable = Number(gl.checkFramebufferStatus(36160)) === Number(36053) && Number(gl.getError()) === noError;
+  } finally {
+    gl.bindFramebuffer(36160, previousFramebuffer);
+    gl.deleteFramebuffer(framebuffer);
+    gl.bindTexture(3553, previousTexture);
+    gl.deleteTexture(texture);
+  }
+  return renderable;
+}
 function getTextureFormatWebGL(format) {
   var _a;
   const formatData = WEBGL_TEXTURE_FORMATS[format];
@@ -1279,7 +1365,7 @@ function convertTextureFormatToGL(format) {
   }
   return webglFormat;
 }
-var import_core3, import_constants6, 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, import_constants6, 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({
   "dist/adapter/converters/webgl-texture-table.js"() {
     "use strict";
@@ -1299,44 +1385,51 @@ var init_webgl_texture_table = __esm({
     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, rb: true },
-      "r8snorm": { gl: 36756 },
+      "r8snorm": { gl: 36756, r: SNORM8_COLOR_RENDERABLE },
       "r8uint": { gl: 33330, rb: true },
       "r8sint": { gl: 33329, rb: true },
       // 16-bit formats
       "rg8unorm": { gl: 33323, rb: true },
-      "rg8snorm": { gl: 36757 },
+      "rg8snorm": { gl: 36757, r: SNORM8_COLOR_RENDERABLE },
       "rg8uint": { gl: 33336, rb: true },
       "rg8sint": { gl: 33335, rb: true },
       "r16uint": { gl: 33332, rb: true },
       "r16sint": { gl: 33331, rb: true },
-      "r16float": { gl: 33325, rb: true },
-      "r16unorm": { gl: 33322, rb: true },
-      "r16snorm": { gl: 36760 },
+      "r16float": { gl: 33325, rb: true, r: FLOAT16_COLOR_RENDERABLE },
+      "r16unorm": { gl: 33322, rb: true, r: NORM16_COLOR_RENDERABLE },
+      "r16snorm": { gl: 36760, r: SNORM16_COLOR_RENDERABLE },
       // Packed 16-bit formats
       "rgba4unorm-webgl": { gl: 32854, rb: true },
       "rgb565unorm-webgl": { gl: 36194, rb: true },
@@ -1347,7 +1440,7 @@ var init_webgl_texture_table = __esm({
       // 32-bit formats
       "rgba8unorm": { gl: 32856 },
       "rgba8unorm-srgb": { gl: 35907 },
-      "rgba8snorm": { gl: 36759 },
+      "rgba8snorm": { gl: 36759, r: SNORM8_COLOR_RENDERABLE },
       "rgba8uint": { gl: 36220 },
       "rgba8sint": { gl: 36238 },
       // reverse colors, webgpu only
@@ -1355,38 +1448,38 @@ var init_webgl_texture_table = __esm({
       "bgra8unorm-srgb": {},
       "rg16uint": { gl: 33338 },
       "rg16sint": { gl: 33337 },
-      "rg16float": { gl: 33327, rb: true },
-      "rg16unorm": { gl: 33324 },
-      "rg16snorm": { gl: 36761 },
+      "rg16float": { gl: 33327, rb: true, r: FLOAT16_COLOR_RENDERABLE },
+      "rg16unorm": { gl: 33324, r: NORM16_COLOR_RENDERABLE },
+      "rg16snorm": { gl: 36761, r: SNORM16_COLOR_RENDERABLE },
       "r32uint": { gl: 33334, rb: true },
       "r32sint": { gl: 33333, rb: true },
-      "r32float": { gl: 33326 },
+      "r32float": { gl: 33326, r: FLOAT32_COLOR_RENDERABLE },
       // Packed 32-bit formats
-      "rgb9e5ufloat": { gl: 35901 },
+      "rgb9e5ufloat": { gl: 35901, r: RGB9E5UFLOAT_COLOR_RENDERABLE },
       // , filter: true},
       "rg11b10ufloat": { gl: 35898, rb: true },
       "rgb10a2unorm": { gl: 32857, rb: true },
       "rgb10a2uint": { gl: 36975, rb: true },
       // 48-bit formats
-      "rgb16unorm-webgl": { gl: 32852 },
+      "rgb16unorm-webgl": { gl: 32852, r: false },
       // rgb not renderable
-      "rgb16snorm-webgl": { gl: 36762 },
+      "rgb16snorm-webgl": { gl: 36762, r: false },
       // rgb not renderable
       // 64-bit formats
       "rg32uint": { gl: 33340, rb: true },
       "rg32sint": { gl: 33339, rb: true },
-      "rg32float": { gl: 33328, rb: true },
+      "rg32float": { gl: 33328, rb: true, r: FLOAT32_COLOR_RENDERABLE },
       "rgba16uint": { gl: 36214, rb: true },
       "rgba16sint": { gl: 36232, rb: true },
-      "rgba16float": { gl: 34842 },
-      "rgba16unorm": { gl: 32859, rb: true },
-      "rgba16snorm": { gl: 36763 },
+      "rgba16float": { gl: 34842, r: FLOAT16_COLOR_RENDERABLE },
+      "rgba16unorm": { gl: 32859, rb: true, r: NORM16_COLOR_RENDERABLE },
+      "rgba16snorm": { gl: 36763, r: SNORM16_COLOR_RENDERABLE },
       // 96-bit formats (deprecated!)
-      "rgb32float-webgl": { gl: 34837, x: EXT_color_buffer_float, dataFormat: 6407, types: [5126] },
+      "rgb32float-webgl": { gl: 34837, x: EXT_color_buffer_float, r: FLOAT32_COLOR_RENDERABLE, dataFormat: 6407, types: [5126] },
       // 128-bit formats
       "rgba32uint": { gl: 36208, rb: true },
       "rgba32sint": { gl: 36226, rb: true },
-      "rgba32float": { gl: 34836, rb: true },
+      "rgba32float": { gl: 34836, rb: true, r: FLOAT32_COLOR_RENDERABLE },
       // Depth and stencil formats
       "stencil8": { gl: 36168, rb: true },
       // 8 stencil bits
@@ -1444,8 +1537,8 @@ var init_webgl_texture_table = __esm({
       "astc-8x6-unorm-srgb": { gl: 37846 },
       "astc-8x8-unorm": { gl: 37815 },
       "astc-8x8-unorm-srgb": { gl: 37847 },
-      "astc-10x5-unorm": { gl: 37819 },
-      "astc-10x5-unorm-srgb": { gl: 37851 },
+      "astc-10x5-unorm": { gl: 37816 },
+      "astc-10x5-unorm-srgb": { gl: 37848 },
       "astc-10x6-unorm": { gl: 37817 },
       "astc-10x6-unorm-srgb": { gl: 37849 },
       "astc-10x8-unorm": { gl: 37818 },
@@ -1459,7 +1552,7 @@ var init_webgl_texture_table = __esm({
       // WEBGL_compressed_texture_pvrtc
       "pvrtc-rgb4unorm-webgl": { gl: 35840 },
       "pvrtc-rgba4unorm-webgl": { gl: 35842 },
-      "pvrtc-rbg2unorm-webgl": { gl: 35841 },
+      "pvrtc-rgb2unorm-webgl": { gl: 35841 },
       "pvrtc-rgba2unorm-webgl": { gl: 35843 },
       // WEBGL_compressed_texture_etc1
       "etc1-rbg-unorm-webgl": { gl: 36196 },
@@ -1483,12 +1576,11 @@ var init_webgl_device_features = __esm({
       // 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",
@@ -1832,6 +1924,61 @@ var init_webgl_canvas_context = __esm({
   }
 });
 
+// dist/adapter/webgl-presentation-context.js
+var import_core8, WebGLPresentationContext;
+var init_webgl_presentation_context = __esm({
+  "dist/adapter/webgl-presentation-context.js"() {
+    "use strict";
+    import_core8 = require("@luma.gl/core");
+    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);
+      }
+    };
+  }
+});
+
 // dist/utils/uid.js
 function uid(id = "id") {
   uidCounters[id] = uidCounters[id] || 1;
@@ -1848,36 +1995,36 @@ var init_uid = __esm({
 
 // dist/adapter/resources/webgl-buffer.js
 function getWebGLTarget(usage) {
-  if (usage & import_core8.Buffer.INDEX) {
+  if (usage & import_core9.Buffer.INDEX) {
     return 34963;
   }
-  if (usage & import_core8.Buffer.VERTEX) {
+  if (usage & import_core9.Buffer.VERTEX) {
     return 34962;
   }
-  if (usage & import_core8.Buffer.UNIFORM) {
+  if (usage & import_core9.Buffer.UNIFORM) {
     return 35345;
   }
   return 34962;
 }
 function getWebGLUsage(usage) {
-  if (usage & import_core8.Buffer.INDEX) {
+  if (usage & import_core9.Buffer.INDEX) {
     return 35044;
   }
-  if (usage & import_core8.Buffer.VERTEX) {
+  if (usage & import_core9.Buffer.VERTEX) {
     return 35044;
   }
-  if (usage & import_core8.Buffer.UNIFORM) {
+  if (usage & import_core9.Buffer.UNIFORM) {
     return 35048;
   }
   return 35044;
 }
-var import_core8, import_constants9, WEBGLBuffer;
+var import_core9, import_constants9, WEBGLBuffer;
 var init_webgl_buffer = __esm({
   "dist/adapter/resources/webgl-buffer.js"() {
     "use strict";
-    import_core8 = require("@luma.gl/core");
+    import_core9 = require("@luma.gl/core");
     import_constants9 = require("@luma.gl/constants");
-    WEBGLBuffer = class extends import_core8.Buffer {
+    WEBGLBuffer = class extends import_core9.Buffer {
       device;
       gl;
       handle;
@@ -1912,8 +2059,12 @@ var init_webgl_buffer = __esm({
       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;
         }
@@ -1928,7 +2079,11 @@ var init_webgl_buffer = __esm({
         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) {
@@ -1943,7 +2098,11 @@ var init_webgl_buffer = __esm({
         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) {
@@ -1988,15 +2147,27 @@ var init_webgl_buffer = __esm({
 
 // dist/adapter/helpers/parse-shader-compiler-log.js
 function parseShaderCompilerLog(errLog) {
+  var _a;
   const lines = errLog.split(/\r?\n/);
   const messages = [];
   for (const line of lines) {
     if (line.length <= 1) {
       continue;
     }
+    const lineWithTrimmedWhitespace = line.trim();
     const segments = line.split(":");
+    const trimmedMessageType = (_a = segments[0]) == null ? void 0 : _a.trim();
     if (segments.length === 2) {
       const [messageType2, message2] = segments;
+      if (!messageType2 || !message2) {
+        messages.push({
+          message: lineWithTrimmedWhitespace,
+          type: getMessageType(trimmedMessageType || "info"),
+          lineNum: 0,
+          linePos: 0
+        });
+        continue;
+      }
       messages.push({
         message: message2.trim(),
         type: getMessageType(messageType2),
@@ -2006,6 +2177,15 @@ function parseShaderCompilerLog(errLog) {
       continue;
     }
     const [messageType, linePosition, lineNumber, ...rest] = segments;
+    if (!messageType || !linePosition || !lineNumber) {
+      messages.push({
+        message: segments.slice(1).join(":").trim() || lineWithTrimmedWhitespace,
+        type: getMessageType(trimmedMessageType || "info"),
+        lineNum: 0,
+        linePos: 0
+      });
+      continue;
+    }
     let lineNum = parseInt(lineNumber, 10);
     if (isNaN(lineNum)) {
       lineNum = 0;
@@ -2036,14 +2216,14 @@ var init_parse_shader_compiler_log = __esm({
 });
 
 // dist/adapter/resources/webgl-shader.js
-var import_core9, import_constants10, WEBGLShader;
+var import_core10, import_constants10, WEBGLShader;
 var init_webgl_shader = __esm({
   "dist/adapter/resources/webgl-shader.js"() {
     "use strict";
-    import_core9 = require("@luma.gl/core");
+    import_core10 = require("@luma.gl/core");
     import_constants10 = require("@luma.gl/constants");
     init_parse_shader_compiler_log();
-    WEBGLShader = class extends import_core9.Shader {
+    WEBGLShader = class extends import_core10.Shader {
       device;
       handle;
       constructor(device, props) {
@@ -2109,9 +2289,9 @@ ${source}`;
           }
           return;
         }
-        import_core9.log.once(1, "Shader compilation is asynchronous")();
+        import_core10.log.once(1, "Shader compilation is asynchronous")();
         await this._waitForCompilationComplete();
-        import_core9.log.info(2, `Shader ${this.id} - async compilation complete: ${this.compilationStatus}`)();
+        import_core10.log.info(2, `Shader ${this.id} - async compilation complete: ${this.compilationStatus}`)();
         this._getCompilationStatus();
         this.debugShader();
       }
@@ -2272,7 +2452,7 @@ function setDeviceParameters(device, parameters) {
     gl.stencilMaskSeparate(1029, 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;
@@ -2385,11 +2565,11 @@ function isObjectEmpty2(obj) {
   }
   return isEmpty;
 }
-var import_core10, import_constants11;
+var import_core11, import_constants11;
 var init_device_parameters = __esm({
   "dist/adapter/converters/device-parameters.js"() {
     "use strict";
-    import_core10 = require("@luma.gl/core");
+    import_core11 = require("@luma.gl/core");
     import_constants11 = require("@luma.gl/constants");
     init_unified_parameter_api();
   }
@@ -2482,14 +2662,14 @@ var init_sampler_parameters = __esm({
 });
 
 // dist/adapter/resources/webgl-sampler.js
-var import_core11, import_constants13, WEBGLSampler;
+var import_core12, import_constants13, WEBGLSampler;
 var init_webgl_sampler = __esm({
   "dist/adapter/resources/webgl-sampler.js"() {
     "use strict";
-    import_core11 = require("@luma.gl/core");
+    import_core12 = require("@luma.gl/core");
     import_constants13 = require("@luma.gl/constants");
     init_sampler_parameters();
-    WEBGLSampler = class extends import_core11.Sampler {
+    WEBGLSampler = class extends import_core12.Sampler {
       device;
       handle;
       parameters;
@@ -2565,19 +2745,19 @@ var init_with_parameters = __esm({
 });
 
 // dist/adapter/resources/webgl-texture-view.js
-var import_core12, WEBGLTextureView;
+var import_core13, WEBGLTextureView;
 var init_webgl_texture_view = __esm({
   "dist/adapter/resources/webgl-texture-view.js"() {
     "use strict";
-    import_core12 = require("@luma.gl/core");
-    WEBGLTextureView = class extends import_core12.TextureView {
+    import_core13 = require("@luma.gl/core");
+    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;
@@ -2587,98 +2767,15 @@ var init_webgl_texture_view = __esm({
   }
 });
 
-// dist/adapter/converters/webgl-shadertypes.js
-function convertDataTypeToGLDataType(normalizedType) {
-  return NORMALIZED_SHADER_TYPE_TO_WEBGL[normalizedType];
-}
-function convertGLUniformTypeToShaderVariableType(glUniformType) {
-  return WEBGL_SHADER_TYPES[glUniformType];
-}
-function isGLSamplerType(type) {
-  return Boolean(WEBGL_SAMPLER_TO_TEXTURE_BINDINGS[type]);
-}
-function getTextureBindingFromGLSamplerType(glSamplerType) {
-  return WEBGL_SAMPLER_TO_TEXTURE_BINDINGS[glSamplerType];
-}
-var import_constants14, WEBGL_SHADER_TYPES, WEBGL_SAMPLER_TO_TEXTURE_BINDINGS, NORMALIZED_SHADER_TYPE_TO_WEBGL;
-var init_webgl_shadertypes = __esm({
-  "dist/adapter/converters/webgl-shadertypes.js"() {
-    "use strict";
-    import_constants14 = require("@luma.gl/constants");
-    WEBGL_SHADER_TYPES = {
-      [5126]: "f32",
-      [35664]: "vec2<f32>",
-      [35665]: "vec3<f32>",
-      [35666]: "vec4<f32>",
-      [5124]: "i32",
-      [35667]: "vec2<i32>",
-      [35668]: "vec3<i32>",
-      [35669]: "vec4<i32>",
-      [5125]: "u32",
-      [36294]: "vec2<u32>",
-      [36295]: "vec3<u32>",
-      [36296]: "vec4<u32>",
-      [35670]: "f32",
-      [35671]: "vec2<f32>",
-      [35672]: "vec3<f32>",
-      [35673]: "vec4<f32>",
-      // TODO - are sizes/components below correct?
-      [35674]: "mat2x2<f32>",
-      [35685]: "mat2x3<f32>",
-      [35686]: "mat2x4<f32>",
-      [35687]: "mat3x2<f32>",
-      [35675]: "mat3x3<f32>",
-      [35688]: "mat3x4<f32>",
-      [35689]: "mat4x2<f32>",
-      [35690]: "mat4x3<f32>",
-      [35676]: "mat4x4<f32>"
-    };
-    WEBGL_SAMPLER_TO_TEXTURE_BINDINGS = {
-      [35678]: { viewDimension: "2d", sampleType: "float" },
-      [35680]: { viewDimension: "cube", sampleType: "float" },
-      [35679]: { viewDimension: "3d", sampleType: "float" },
-      [35682]: { viewDimension: "3d", sampleType: "depth" },
-      [36289]: { viewDimension: "2d-array", sampleType: "float" },
-      [36292]: { viewDimension: "2d-array", sampleType: "depth" },
-      [36293]: { viewDimension: "cube", sampleType: "float" },
-      [36298]: { viewDimension: "2d", sampleType: "sint" },
-      [36299]: { viewDimension: "3d", sampleType: "sint" },
-      [36300]: { viewDimension: "cube", sampleType: "sint" },
-      [36303]: { viewDimension: "2d-array", sampleType: "uint" },
-      [36306]: { viewDimension: "2d", sampleType: "uint" },
-      [36307]: { viewDimension: "3d", sampleType: "uint" },
-      [36308]: { viewDimension: "cube", sampleType: "uint" },
-      [36311]: { viewDimension: "2d-array", sampleType: "uint" }
-    };
-    NORMALIZED_SHADER_TYPE_TO_WEBGL = {
-      uint8: 5121,
-      sint8: 5120,
-      unorm8: 5121,
-      snorm8: 5120,
-      uint16: 5123,
-      sint16: 5122,
-      unorm16: 5123,
-      snorm16: 5122,
-      uint32: 5125,
-      sint32: 5124,
-      // WebGPU does not support normalized 32 bit integer attributes
-      //  'unorm32': GL.UNSIGNED_INT,
-      //  'snorm32': GL.INT,
-      float16: 5131,
-      float32: 5126
-    };
-  }
-});
-
 // dist/adapter/converters/shader-formats.js
 function convertGLDataTypeToDataType(type) {
   return GL_DATA_TYPE_MAP[type];
 }
-var import_constants15, GL_DATA_TYPE_MAP;
+var import_constants14, GL_DATA_TYPE_MAP;
 var init_shader_formats = __esm({
   "dist/adapter/converters/shader-formats.js"() {
     "use strict";
-    import_constants15 = require("@luma.gl/constants");
+    import_constants14 = require("@luma.gl/constants");
     GL_DATA_TYPE_MAP = {
       [5124]: "sint32",
       [5125]: "uint32",
@@ -2701,6 +2798,18 @@ var init_shader_formats = __esm({
 });
 
 // dist/adapter/resources/webgl-texture.js
+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":
@@ -2721,20 +2830,19 @@ function getWebGLTextureTarget(dimension) {
 function getWebGLCubeFaceTarget(glTarget, dimension, level) {
   return dimension === "cube" ? 34069 + level : glTarget;
 }
-var import_core13, import_constants16, import_core14, WEBGLTexture;
+var import_core14, import_constants15, import_core15, WEBGLTexture;
 var init_webgl_texture = __esm({
   "dist/adapter/resources/webgl-texture.js"() {
     "use strict";
-    import_core13 = require("@luma.gl/core");
-    import_constants16 = require("@luma.gl/constants");
+    import_core14 = require("@luma.gl/core");
+    import_constants15 = require("@luma.gl/constants");
     init_webgl_texture_table();
     init_sampler_parameters();
     init_with_parameters();
     init_webgl_texture_view();
-    init_webgl_shadertypes();
     init_shader_formats();
-    import_core14 = require("@luma.gl/core");
-    WEBGLTexture = class extends import_core13.Texture {
+    import_core15 = require("@luma.gl/core");
+    WEBGLTexture = class extends import_core14.Texture {
       // readonly MAX_ATTRIBUTES: number;
       device;
       gl;
@@ -2763,8 +2871,10 @@ var init_webgl_texture = __esm({
       // state
       /** Texture binding slot - TODO - move to texture view? */
       _textureUnit = 0;
-      /** Chached framebuffer */
+      /** 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, { byteAlignment: 1 });
         this.device = device;
@@ -2779,20 +2889,27 @@ var init_webgl_texture = __esm({
         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);
@@ -2802,9 +2919,14 @@ var init_webgl_texture = __esm({
         if (this.handle) {
           (_a = this._framebuffer) == null ? void 0 : _a.destroy();
           this._framebuffer = null;
-          this.gl.deleteTexture(this.handle);
+          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;
         }
       }
@@ -2843,97 +2965,128 @@ var init_webgl_texture = __esm({
         return { width: options.width, height: options.height };
       }
       copyImageData(options_) {
-        const options = this._normalizeCopyImageDataOptions(options_);
-        const typedArray = options.data;
-        const { width, height, depth, z = 0 } = options;
-        const { mipLevel = 0, byteOffset = 0, x = 0, y = 0 } = 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) {
+        const normalizedOptions = this._getSupportedColorReadOptions(options);
+        const memoryLayout = this.computeMemoryLayout(normalizedOptions);
+        const readBuffer = buffer || this.device.createBuffer({
+          byteLength: memoryLayout.byteLength,
+          usage: import_core14.Buffer.COPY_DST | import_core14.Buffer.MAP_READ
+        });
+        if (readBuffer.byteLength < memoryLayout.byteLength) {
+          throw new Error(`${this} readBuffer target is too small (${readBuffer.byteLength} < ${memoryLayout.byteLength})`);
+        }
+        const webglBuffer = readBuffer;
+        this.gl.bindBuffer(35051, webglBuffer.handle);
+        try {
+          this._readColorTextureLayers(normalizedOptions, memoryLayout, (destinationByteOffset) => {
+            this.gl.readPixels(normalizedOptions.x, normalizedOptions.y, normalizedOptions.width, normalizedOptions.height, this.glFormat, this.glType, destinationByteOffset);
+          });
+        } finally {
+          this.gl.bindBuffer(35051, null);
+        }
+        return readBuffer;
+      }
+      async readDataAsync(options = {}) {
+        const buffer = this.readBuffer(options);
+        const data = await buffer.readAsync();
+        buffer.destroy();
+        return data.buffer;
+      }
+      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);
-        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;
-          }
+        if (compressed) {
+          throw new Error("writeBuffer for compressed textures is not implemented in WebGL");
         }
-        const glParameters = !this.compressed ? {
+        const { bytesPerPixel } = this.device.getTextureFormatInfo(this.format);
+        const unpackRowLength = bytesPerPixel ? options.bytesPerRow / bytesPerPixel : void 0;
+        const glParameters = {
           [3317]: this.byteAlignment,
           ...unpackRowLength !== void 0 ? { [3314]: unpackRowLength } : {},
           [32878]: options.rowsPerImage
-        } : {};
+        };
         this.gl.bindTexture(this.glTarget, this.handle);
+        this.gl.bindBuffer(35052, buffer.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);
-              }
+              this.gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, 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);
-              }
+              this.gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depthOrArrayLayers, glFormat, glType, byteOffset);
               break;
             default:
           }
         });
+        this.gl.bindBuffer(35052, null);
         this.gl.bindTexture(this.glTarget, null);
       }
-      readBuffer(options = {}, buffer) {
-        throw new Error("readBuffer not implemented");
-      }
-      async readDataAsync(options = {}) {
-        return this.readDataSyncWebGL(options);
-      }
-      writeBuffer(buffer, options_ = {}) {
-      }
       writeData(data, options_ = {}) {
         const options = this._normalizeTextureWriteOptions(options_);
         const typedArray = ArrayBuffer.isView(data) ? data : new Uint8Array(data);
-        const {} = this;
-        const { width, height, mipLevel, x, y, z } = options;
+        const { width, height, depthOrArrayLayers, mipLevel, x, y, z, byteOffset } = options;
         const { glFormat, glType, compressed } = this;
-        const depth = 0;
-        const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, depth);
+        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 ? {
-          // WebGL does not require byte alignment, but allows it to be specified
-          [3317]: this.byteAlignment
-          // [GL.UNPACK_ROW_LENGTH]: bytesPerRow,
-          // [GL.UNPACK_IMAGE_HEIGHT]: rowsPerImage
+          [3317]: this.byteAlignment,
+          ...unpackRowLength !== void 0 ? { [3314]: unpackRowLength } : {},
+          [32878]: options.rowsPerImage
         } : {};
-        this.gl.bindTexture(glTarget, this.handle);
+        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, null);
         withGLParameters(this.gl, glParameters, () => {
           switch (this.dimension) {
             case "2d":
             case "cube":
               if (compressed) {
-                this.gl.compressedTexSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, typedArray);
+                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);
+                this.gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, typedArray, sourceElementOffset);
               }
               break;
             case "2d-array":
             case "3d":
               if (compressed) {
-                this.gl.compressedTexSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, typedArray);
+                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, depth, glFormat, glType, typedArray);
+                this.gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depthOrArrayLayers, glFormat, glType, typedArray, sourceElementOffset);
               }
               break;
             default:
           }
         });
-        this.gl.bindTexture(glTarget, null);
+        this.gl.bindTexture(this.glTarget, null);
       }
       // IMPLEMENTATION SPECIFIC
       /** @todo - for now we always use 1 for maximum compatibility, we can fine tune later */
@@ -2955,28 +3108,83 @@ var init_webgl_texture = __esm({
       }
       // WEBGL SPECIFIC
       readDataSyncWebGL(options_ = {}) {
-        const options = this._normalizeTextureReadOptions(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);
-        const signedType = (0, import_core14.getDataType)(targetArray);
-        const sourceType = convertDataTypeToGLDataType(signedType);
-        const framebuffer = this._getFramebuffer();
-        const prevHandle = this.gl.bindFramebuffer(36160, framebuffer.handle);
-        this.gl.readBuffer(36064);
-        this.gl.readPixels(options.x, options.y, options.width, options.height, this.glFormat, sourceType, targetArray);
-        this.gl.bindFramebuffer(36160, prevHandle || null);
+        const ArrayType = (0, import_core15.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;
       }
       /**
-       * @note - this is used by the DynamicTexture class to generate mipmaps on WebGL
+       * Iterates the requested mip/layer/slice range, reattaching the cached read framebuffer as
+       * needed before delegating the actual `readPixels()` call to the supplied callback.
        */
-      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 == null ? void 0 : options.force)) {
+      _readColorTextureLayers(options, memoryLayout, readLayer) {
+        const framebuffer = this._getFramebuffer();
+        const packRowLength = memoryLayout.bytesPerRow / memoryLayout.bytesPerPixel;
+        const glParameters = {
+          [3333]: this.byteAlignment,
+          ...packRowLength !== options.width ? { [3330]: packRowLength } : {}
+        };
+        const prevReadBuffer = this.gl.getParameter(3074);
+        const prevHandle = this.gl.bindFramebuffer(36160, framebuffer.handle);
+        try {
+          this.gl.readBuffer(36064);
+          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, 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, 36064, 3553, this.handle, mipLevel);
+            break;
+          case "cube":
+            this.gl.framebufferTexture2D(36160, 36064, getWebGLCubeFaceTarget(this.glTarget, this.dimension, layer), this.handle, mipLevel);
+            break;
+          case "2d-array":
+          case "3d":
+            this.gl.framebufferTextureLayer(36160, 36064, 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));
+          if (status !== Number(36053)) {
+            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 == null ? void 0 : options.force)) {
             return;
           }
         }
@@ -2984,7 +3192,7 @@ var init_webgl_texture = __esm({
           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}`)();
+          import_core14.log.warn(`Error generating mipmap for ${this}: ${error.message}`)();
         } finally {
           this.gl.bindTexture(this.glTarget, null);
         }
@@ -2994,7 +3202,7 @@ var init_webgl_texture = __esm({
        * Sets sampler parameters on texture
        */
       _setSamplerParameters(parameters) {
-        import_core13.log.log(2, `${this.id} sampler parameters`, this.device.getGLKeys(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);
@@ -3051,208 +3259,6 @@ var init_webgl_texture = __esm({
   }
 });
 
-// dist/adapter/helpers/get-shader-layout-from-glsl.js
-function getShaderLayoutFromGLSL(gl, program) {
-  const shaderLayout = {
-    attributes: [],
-    bindings: []
-  };
-  shaderLayout.attributes = readAttributeDeclarations(gl, program);
-  const uniformBlocks = readUniformBlocks(gl, program);
-  for (const uniformBlock of uniformBlocks) {
-    const uniforms2 = uniformBlock.uniforms.map((uniform) => ({
-      name: uniform.name,
-      format: uniform.format,
-      byteOffset: uniform.byteOffset,
-      byteStride: uniform.byteStride,
-      arrayLength: uniform.arrayLength
-    }));
-    shaderLayout.bindings.push({
-      type: "uniform",
-      name: uniformBlock.name,
-      group: 0,
-      location: uniformBlock.location,
-      visibility: (uniformBlock.vertex ? 1 : 0) & (uniformBlock.fragment ? 2 : 0),
-      minBindingSize: uniformBlock.byteLength,
-      uniforms: uniforms2
-    });
-  }
-  const uniforms = readUniformBindings(gl, program);
-  let textureUnit = 0;
-  for (const uniform of uniforms) {
-    if (isGLSamplerType(uniform.type)) {
-      const { viewDimension, sampleType } = getTextureBindingFromGLSamplerType(uniform.type);
-      shaderLayout.bindings.push({
-        type: "texture",
-        name: uniform.name,
-        group: 0,
-        location: textureUnit,
-        viewDimension,
-        sampleType
-      });
-      uniform.textureUnit = textureUnit;
-      textureUnit += 1;
-    }
-  }
-  if (uniforms.length) {
-    shaderLayout.uniforms = uniforms;
-  }
-  const varyings = readVaryings(gl, program);
-  if (varyings == null ? void 0 : varyings.length) {
-    shaderLayout.varyings = varyings;
-  }
-  return shaderLayout;
-}
-function readAttributeDeclarations(gl, program) {
-  const attributes = [];
-  const count = gl.getProgramParameter(program, 35721);
-  for (let index = 0; index < count; index++) {
-    const activeInfo = gl.getActiveAttrib(program, index);
-    if (!activeInfo) {
-      throw new Error("activeInfo");
-    }
-    const {
-      name,
-      type: compositeType
-      /* , size*/
-    } = activeInfo;
-    const location = gl.getAttribLocation(program, name);
-    if (location >= 0) {
-      const attributeType = convertGLUniformTypeToShaderVariableType(compositeType);
-      const stepMode = /instance/i.test(name) ? "instance" : "vertex";
-      attributes.push({
-        name,
-        location,
-        stepMode,
-        type: attributeType
-        // size - for arrays, size is the number of elements in the array
-      });
-    }
-  }
-  attributes.sort((a, b) => a.location - b.location);
-  return attributes;
-}
-function readVaryings(gl, program) {
-  const varyings = [];
-  const count = gl.getProgramParameter(program, 35971);
-  for (let location = 0; location < count; location++) {
-    const activeInfo = gl.getTransformFeedbackVarying(program, location);
-    if (!activeInfo) {
-      throw new Error("activeInfo");
-    }
-    const { name, type: glUniformType, size } = activeInfo;
-    const uniformType = convertGLUniformTypeToShaderVariableType(glUniformType);
-    const { type, components } = (0, import_core15.getVariableShaderTypeInfo)(uniformType);
-    varyings.push({ location, name, type, size: size * components });
-  }
-  varyings.sort((a, b) => a.location - b.location);
-  return varyings;
-}
-function readUniformBindings(gl, program) {
-  const uniforms = [];
-  const uniformCount = gl.getProgramParameter(program, 35718);
-  for (let i = 0; i < uniformCount; i++) {
-    const activeInfo = gl.getActiveUniform(program, i);
-    if (!activeInfo) {
-      throw new Error("activeInfo");
-    }
-    const { name: rawName, size, type } = activeInfo;
-    const { name, isArray: isArray3 } = parseUniformName(rawName);
-    let webglLocation = gl.getUniformLocation(program, name);
-    const uniformInfo = {
-      // WebGL locations are uniquely typed but just numbers
-      location: webglLocation,
-      name,
-      size,
-      type,
-      isArray: isArray3
-    };
-    uniforms.push(uniformInfo);
-    if (uniformInfo.size > 1) {
-      for (let j = 0; j < uniformInfo.size; j++) {
-        const elementName = `${name}[${j}]`;
-        webglLocation = gl.getUniformLocation(program, elementName);
-        const arrayElementUniformInfo = {
-          ...uniformInfo,
-          name: elementName,
-          location: webglLocation
-        };
-        uniforms.push(arrayElementUniformInfo);
-      }
-    }
-  }
-  return uniforms;
-}
-function readUniformBlocks(gl, program) {
-  const getBlockParameter = (blockIndex, pname) => gl.getActiveUniformBlockParameter(program, blockIndex, pname);
-  const uniformBlocks = [];
-  const blockCount = gl.getProgramParameter(program, 35382);
-  for (let blockIndex = 0; blockIndex < blockCount; blockIndex++) {
-    const blockInfo = {
-      name: gl.getActiveUniformBlockName(program, blockIndex) || "",
-      location: getBlockParameter(blockIndex, 35391),
-      byteLength: getBlockParameter(blockIndex, 35392),
-      vertex: getBlockParameter(blockIndex, 35396),
-      fragment: getBlockParameter(blockIndex, 35398),
-      uniformCount: getBlockParameter(blockIndex, 35394),
-      uniforms: []
-    };
-    const uniformIndices = getBlockParameter(blockIndex, 35395) || [];
-    const uniformType = gl.getActiveUniforms(program, uniformIndices, 35383);
-    const uniformArrayLength = gl.getActiveUniforms(program, uniformIndices, 35384);
-    const uniformOffset = gl.getActiveUniforms(program, uniformIndices, 35387);
-    const uniformStride = gl.getActiveUniforms(program, uniformIndices, 35388);
-    for (let i = 0; i < blockInfo.uniformCount; ++i) {
-      const activeInfo = gl.getActiveUniform(program, uniformIndices[i]);
-      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]
-      });
-    }
-    uniformBlocks.push(blockInfo);
-  }
-  uniformBlocks.sort((a, b) => a.location - b.location);
-  return uniformBlocks;
-}
-function parseUniformName(name) {
-  if (name[name.length - 1] !== "]") {
-    return {
-      name,
-      length: 1,
-      isArray: false
-    };
-  }
-  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}`);
-  }
-  return {
-    name: matches[1],
-    length: matches[2] ? 1 : 0,
-    isArray: Boolean(matches[2])
-  };
-}
-var import_core15, import_constants17;
-var init_get_shader_layout_from_glsl = __esm({
-  "dist/adapter/helpers/get-shader-layout-from-glsl.js"() {
-    "use strict";
-    import_core15 = require("@luma.gl/core");
-    import_constants17 = require("@luma.gl/constants");
-    init_webgl_shadertypes();
-  }
-});
-
 // dist/adapter/helpers/set-uniform.js
 function setUniform(gl, location, type, value) {
   const gl2 = gl;
@@ -3337,11 +3343,11 @@ function setUniform(gl, location, type, value) {
   }
   throw new Error("Illegal uniform");
 }
-var import_constants18;
+var import_constants16;
 var init_set_uniform = __esm({
   "dist/adapter/helpers/set-uniform.js"() {
     "use strict";
-    import_constants18 = require("@luma.gl/constants");
+    import_constants16 = require("@luma.gl/constants");
   }
 });
 
@@ -3378,11 +3384,11 @@ function getGLPrimitive(topology) {
       throw new Error(topology);
   }
 }
-var import_constants19;
+var import_constants17;
 var init_webgl_topology_utils = __esm({
   "dist/adapter/helpers/webgl-topology-utils.js"() {
     "use strict";
-    import_constants19 = require("@luma.gl/constants");
+    import_constants17 = require("@luma.gl/constants");
   }
 });
 
@@ -3403,13 +3409,12 @@ function mergeShaderLayout(baseLayout, overrideLayout) {
   }
   return mergedLayout;
 }
-var import_core16, import_constants20, LOG_PROGRAM_PERF_PRIORITY, WEBGLRenderPipeline;
+var import_core16, import_constants18, WEBGLRenderPipeline;
 var init_webgl_render_pipeline = __esm({
   "dist/adapter/resources/webgl-render-pipeline.js"() {
     "use strict";
     import_core16 = require("@luma.gl/core");
-    import_constants20 = require("@luma.gl/constants");
-    init_get_shader_layout_from_glsl();
+    import_constants18 = require("@luma.gl/constants");
     init_device_parameters();
     init_set_uniform();
     init_webgl_buffer();
@@ -3417,7 +3422,6 @@ var init_webgl_render_pipeline = __esm({
     init_webgl_texture();
     init_webgl_texture_view();
     init_webgl_topology_utils();
-    LOG_PROGRAM_PERF_PRIORITY = 4;
     WEBGLRenderPipeline = class extends import_core16.RenderPipeline {
       /** The WebGL device that created this render pipeline */
       device;
@@ -3429,10 +3433,10 @@ var init_webgl_render_pipeline = __esm({
       fs;
       /** The layout extracted from shader by WebGL introspection APIs */
       introspectedLayout;
-      /** Uniforms set on this model */
-      uniforms = {};
-      /** Bindings set on this model */
+      /** Compatibility path for direct pipeline.setBindings() usage */
       bindings = {};
+      /** Compatibility path for direct pipeline.uniforms usage */
+      uniforms = {};
       /** WebGL varyings */
       varyings = null;
       _uniformCount = 0;
@@ -3444,33 +3448,28 @@ var init_webgl_render_pipeline = __esm({
       constructor(device, props) {
         super(device, props);
         this.device = device;
-        this.handle = this.props.handle || this.device.gl.createProgram();
+        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.vs = props.vs;
-        this.fs = props.fs;
-        const { varyings, bufferMode = 35981 } = props;
-        if (varyings && varyings.length > 0) {
-          this.varyings = varyings;
-          this.device.gl.transformFeedbackVaryings(this.handle, varyings, bufferMode);
-        }
-        this._linkShaders();
-        import_core16.log.time(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
-        this.introspectedLayout = getShaderLayoutFromGLSL(this.device.gl, this.handle);
-        import_core16.log.timeEnd(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
         this.shaderLayout = props.shaderLayout ? mergeShaderLayout(this.introspectedLayout, props.shaderLayout) : this.introspectedLayout;
       }
       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;
+        if (this.destroyed) {
+          return;
+        }
+        if (this.sharedRenderPipeline && !this.props._sharedRenderPipeline) {
+          this.sharedRenderPipeline.destroy();
         }
+        this.destroyResource();
       }
       /**
-       * Bindings include: textures, samplers and uniform buffers
-       * @todo needed for portable model
+       * 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) {
         for (const [name, value] of Object.entries(bindings)) {
@@ -3511,6 +3510,7 @@ var init_webgl_render_pipeline = __esm({
        */
       draw(options) {
         var _a;
+        this._syncLinkStatus();
         const {
           renderPass,
           parameters = this.props.parameters,
@@ -3524,7 +3524,9 @@ var init_webgl_render_pipeline = __esm({
           // firstIndex,
           // firstInstance,
           // baseVertex,
-          transformFeedback
+          transformFeedback,
+          bindings = this.bindings,
+          uniforms = this.uniforms
         } = options;
         const glDrawMode = getGLDrawMode(topology);
         const isIndexed = Boolean(vertexArray.indexBuffer);
@@ -3533,7 +3535,7 @@ var init_webgl_render_pipeline = __esm({
           import_core16.log.info(2, `RenderPipeline:${this.id}.draw() aborted - waiting for shader linking`)();
           return false;
         }
-        if (!this._areTexturesRenderable()) {
+        if (!this._areTexturesRenderable(bindings)) {
           import_core16.log.info(2, `RenderPipeline:${this.id}.draw() aborted - textures not yet loaded`)();
           return false;
         }
@@ -3542,57 +3544,479 @@ var init_webgl_render_pipeline = __esm({
         if (transformFeedback) {
           transformFeedback.begin(this.props.topology);
         }
-        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._applyBindings(bindings, { 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 (!bindings[bindingInfo.name] && !bindings[bindingInfo.name.replace(/Uniforms$/, "")]) {
+            import_core16.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 = bindings[binding.name] || 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) {
+                throw new Error(`Invalid uniform block name ${name}`);
+              }
+              gl.uniformBlockBinding(this.handle, location, uniformBufferIndex);
+              if (value instanceof WEBGLBuffer) {
+                gl.bindBufferBase(35345, uniformBufferIndex, value.handle);
+              } else {
+                gl.bindBufferRange(
+                  35345,
+                  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_core16.log.warn("Passing framebuffer in texture binding may be deprecated. Use fbo.colorAttachments[0] instead")();
+                texture = value.colorAttachments[0].texture;
+              } else {
+                throw new Error("No texture");
+              }
+              gl.activeTexture(33984 + 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`);
+          }
+        }
+      }
+      /**
+       * 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);
+          }
+        }
+      }
+      _syncLinkStatus() {
+        this.linkStatus = this.sharedRenderPipeline.linkStatus;
+      }
+    };
+  }
+});
+
+// dist/adapter/converters/webgl-shadertypes.js
+function convertDataTypeToGLDataType(normalizedType) {
+  return NORMALIZED_SHADER_TYPE_TO_WEBGL[normalizedType];
+}
+function convertGLUniformTypeToShaderVariableType(glUniformType) {
+  return WEBGL_SHADER_TYPES[glUniformType];
+}
+function isGLSamplerType(type) {
+  return Boolean(WEBGL_SAMPLER_TO_TEXTURE_BINDINGS[type]);
+}
+function getTextureBindingFromGLSamplerType(glSamplerType) {
+  return WEBGL_SAMPLER_TO_TEXTURE_BINDINGS[glSamplerType];
+}
+var import_constants19, WEBGL_SHADER_TYPES, WEBGL_SAMPLER_TO_TEXTURE_BINDINGS, NORMALIZED_SHADER_TYPE_TO_WEBGL;
+var init_webgl_shadertypes = __esm({
+  "dist/adapter/converters/webgl-shadertypes.js"() {
+    "use strict";
+    import_constants19 = require("@luma.gl/constants");
+    WEBGL_SHADER_TYPES = {
+      [5126]: "f32",
+      [35664]: "vec2<f32>",
+      [35665]: "vec3<f32>",
+      [35666]: "vec4<f32>",
+      [5124]: "i32",
+      [35667]: "vec2<i32>",
+      [35668]: "vec3<i32>",
+      [35669]: "vec4<i32>",
+      [5125]: "u32",
+      [36294]: "vec2<u32>",
+      [36295]: "vec3<u32>",
+      [36296]: "vec4<u32>",
+      [35670]: "f32",
+      [35671]: "vec2<f32>",
+      [35672]: "vec3<f32>",
+      [35673]: "vec4<f32>",
+      // TODO - are sizes/components below correct?
+      [35674]: "mat2x2<f32>",
+      [35685]: "mat2x3<f32>",
+      [35686]: "mat2x4<f32>",
+      [35687]: "mat3x2<f32>",
+      [35675]: "mat3x3<f32>",
+      [35688]: "mat3x4<f32>",
+      [35689]: "mat4x2<f32>",
+      [35690]: "mat4x3<f32>",
+      [35676]: "mat4x4<f32>"
+    };
+    WEBGL_SAMPLER_TO_TEXTURE_BINDINGS = {
+      [35678]: { viewDimension: "2d", sampleType: "float" },
+      [35680]: { viewDimension: "cube", sampleType: "float" },
+      [35679]: { viewDimension: "3d", sampleType: "float" },
+      [35682]: { viewDimension: "3d", sampleType: "depth" },
+      [36289]: { viewDimension: "2d-array", sampleType: "float" },
+      [36292]: { viewDimension: "2d-array", sampleType: "depth" },
+      [36293]: { viewDimension: "cube", sampleType: "float" },
+      [36298]: { viewDimension: "2d", sampleType: "sint" },
+      [36299]: { viewDimension: "3d", sampleType: "sint" },
+      [36300]: { viewDimension: "cube", sampleType: "sint" },
+      [36303]: { viewDimension: "2d-array", sampleType: "uint" },
+      [36306]: { viewDimension: "2d", sampleType: "uint" },
+      [36307]: { viewDimension: "3d", sampleType: "uint" },
+      [36308]: { viewDimension: "cube", sampleType: "uint" },
+      [36311]: { viewDimension: "2d-array", sampleType: "uint" }
+    };
+    NORMALIZED_SHADER_TYPE_TO_WEBGL = {
+      uint8: 5121,
+      sint8: 5120,
+      unorm8: 5121,
+      snorm8: 5120,
+      uint16: 5123,
+      sint16: 5122,
+      unorm16: 5123,
+      snorm16: 5122,
+      uint32: 5125,
+      sint32: 5124,
+      // WebGPU does not support normalized 32 bit integer attributes
+      //  'unorm32': GL.UNSIGNED_INT,
+      //  'snorm32': GL.INT,
+      float16: 5131,
+      float32: 5126
+    };
+  }
+});
+
+// dist/adapter/helpers/get-shader-layout-from-glsl.js
+function getShaderLayoutFromGLSL(gl, program) {
+  const shaderLayout = {
+    attributes: [],
+    bindings: []
+  };
+  shaderLayout.attributes = readAttributeDeclarations(gl, program);
+  const uniformBlocks = readUniformBlocks(gl, program);
+  for (const uniformBlock of uniformBlocks) {
+    const uniforms2 = uniformBlock.uniforms.map((uniform) => ({
+      name: uniform.name,
+      format: uniform.format,
+      byteOffset: uniform.byteOffset,
+      byteStride: uniform.byteStride,
+      arrayLength: uniform.arrayLength
+    }));
+    shaderLayout.bindings.push({
+      type: "uniform",
+      name: uniformBlock.name,
+      group: 0,
+      location: uniformBlock.location,
+      visibility: (uniformBlock.vertex ? 1 : 0) & (uniformBlock.fragment ? 2 : 0),
+      minBindingSize: uniformBlock.byteLength,
+      uniforms: uniforms2
+    });
+  }
+  const uniforms = readUniformBindings(gl, program);
+  let textureUnit = 0;
+  for (const uniform of uniforms) {
+    if (isGLSamplerType(uniform.type)) {
+      const { viewDimension, sampleType } = getTextureBindingFromGLSamplerType(uniform.type);
+      shaderLayout.bindings.push({
+        type: "texture",
+        name: uniform.name,
+        group: 0,
+        location: textureUnit,
+        viewDimension,
+        sampleType
+      });
+      uniform.textureUnit = textureUnit;
+      textureUnit += 1;
+    }
+  }
+  if (uniforms.length) {
+    shaderLayout.uniforms = uniforms;
+  }
+  const varyings = readVaryings(gl, program);
+  if (varyings == null ? void 0 : varyings.length) {
+    shaderLayout.varyings = varyings;
+  }
+  return shaderLayout;
+}
+function readAttributeDeclarations(gl, program) {
+  const attributes = [];
+  const count = gl.getProgramParameter(program, 35721);
+  for (let index = 0; index < count; index++) {
+    const activeInfo = gl.getActiveAttrib(program, index);
+    if (!activeInfo) {
+      throw new Error("activeInfo");
+    }
+    const {
+      name,
+      type: compositeType
+      /* , size*/
+    } = activeInfo;
+    const location = gl.getAttribLocation(program, name);
+    if (location >= 0) {
+      const attributeType = convertGLUniformTypeToShaderVariableType(compositeType);
+      const stepMode = /instance/i.test(name) ? "instance" : "vertex";
+      attributes.push({
+        name,
+        location,
+        stepMode,
+        type: attributeType
+        // size - for arrays, size is the number of elements in the array
+      });
+    }
+  }
+  attributes.sort((a, b) => a.location - b.location);
+  return attributes;
+}
+function readVaryings(gl, program) {
+  const varyings = [];
+  const count = gl.getProgramParameter(program, 35971);
+  for (let location = 0; location < count; location++) {
+    const activeInfo = gl.getTransformFeedbackVarying(program, location);
+    if (!activeInfo) {
+      throw new Error("activeInfo");
+    }
+    const { name, type: glUniformType, size } = activeInfo;
+    const uniformType = convertGLUniformTypeToShaderVariableType(glUniformType);
+    const { type, components } = (0, import_core17.getVariableShaderTypeInfo)(uniformType);
+    varyings.push({ location, name, type, size: size * components });
+  }
+  varyings.sort((a, b) => a.location - b.location);
+  return varyings;
+}
+function readUniformBindings(gl, program) {
+  const uniforms = [];
+  const uniformCount = gl.getProgramParameter(program, 35718);
+  for (let i = 0; i < uniformCount; i++) {
+    const activeInfo = gl.getActiveUniform(program, i);
+    if (!activeInfo) {
+      throw new Error("activeInfo");
+    }
+    const { name: rawName, size, type } = activeInfo;
+    const { name, isArray: isArray3 } = parseUniformName(rawName);
+    let webglLocation = gl.getUniformLocation(program, name);
+    const uniformInfo = {
+      // WebGL locations are uniquely typed but just numbers
+      location: webglLocation,
+      name,
+      size,
+      type,
+      isArray: isArray3
+    };
+    uniforms.push(uniformInfo);
+    if (uniformInfo.size > 1) {
+      for (let j = 0; j < uniformInfo.size; j++) {
+        const elementName = `${name}[${j}]`;
+        webglLocation = gl.getUniformLocation(program, elementName);
+        const arrayElementUniformInfo = {
+          ...uniformInfo,
+          name: elementName,
+          location: webglLocation
+        };
+        uniforms.push(arrayElementUniformInfo);
+      }
+    }
+  }
+  return uniforms;
+}
+function readUniformBlocks(gl, program) {
+  const getBlockParameter = (blockIndex, pname) => gl.getActiveUniformBlockParameter(program, blockIndex, pname);
+  const uniformBlocks = [];
+  const blockCount = gl.getProgramParameter(program, 35382);
+  for (let blockIndex = 0; blockIndex < blockCount; blockIndex++) {
+    const blockInfo = {
+      name: gl.getActiveUniformBlockName(program, blockIndex) || "",
+      location: getBlockParameter(blockIndex, 35391),
+      byteLength: getBlockParameter(blockIndex, 35392),
+      vertex: getBlockParameter(blockIndex, 35396),
+      fragment: getBlockParameter(blockIndex, 35398),
+      uniformCount: getBlockParameter(blockIndex, 35394),
+      uniforms: []
+    };
+    const uniformIndices = getBlockParameter(blockIndex, 35395) || [];
+    const uniformType = gl.getActiveUniforms(program, uniformIndices, 35383);
+    const uniformArrayLength = gl.getActiveUniforms(program, uniformIndices, 35384);
+    const uniformOffset = gl.getActiveUniforms(program, uniformIndices, 35387);
+    const uniformStride = gl.getActiveUniforms(program, uniformIndices, 35388);
+    for (let i = 0; i < blockInfo.uniformCount; ++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]
+        });
+      }
+    }
+    uniformBlocks.push(blockInfo);
+  }
+  uniformBlocks.sort((a, b) => a.location - b.location);
+  return uniformBlocks;
+}
+function parseUniformName(name) {
+  if (name[name.length - 1] !== "]") {
+    return {
+      name,
+      length: 1,
+      isArray: false
+    };
+  }
+  const UNIFORM_NAME_REGEXP = /([^[]*)(\[[0-9]+\])?/;
+  const matches = UNIFORM_NAME_REGEXP.exec(name);
+  const uniformName = (0, import_core17.assertDefined)(matches == null ? void 0 : matches[1], `Failed to parse GLSL uniform name ${name}`);
+  return {
+    name: uniformName,
+    // TODO - is this a bug, shouldn't we return the value?
+    length: (matches == null ? void 0 : matches[2]) ? 1 : 0,
+    isArray: Boolean(matches == null ? void 0 : matches[2])
+  };
+}
+var import_core17, import_constants20;
+var init_get_shader_layout_from_glsl = __esm({
+  "dist/adapter/helpers/get-shader-layout-from-glsl.js"() {
+    "use strict";
+    import_core17 = require("@luma.gl/core");
+    import_constants20 = require("@luma.gl/constants");
+    init_webgl_shadertypes();
+  }
+});
+
+// dist/adapter/resources/webgl-shared-render-pipeline.js
+var import_constants21, import_core18, LOG_PROGRAM_PERF_PRIORITY, WEBGLSharedRenderPipeline;
+var init_webgl_shared_render_pipeline = __esm({
+  "dist/adapter/resources/webgl-shared-render-pipeline.js"() {
+    "use strict";
+    import_constants21 = require("@luma.gl/constants");
+    import_core18 = require("@luma.gl/core");
+    init_get_shader_layout_from_glsl();
+    init_webgl_shadertypes();
+    LOG_PROGRAM_PERF_PRIORITY = 4;
+    WEBGLSharedRenderPipeline = class extends import_core18.SharedRenderPipeline {
+      device;
+      handle;
+      vs;
+      fs;
+      introspectedLayout = { attributes: [], bindings: [], uniforms: [] };
+      linkStatus = "pending";
+      constructor(device, props) {
+        super(device, props);
+        this.device = device;
+        this.handle = props.handle || this.device.gl.createProgram();
+        this.vs = props.vs;
+        this.fs = props.fs;
+        if (props.varyings && props.varyings.length > 0) {
+          this.device.gl.transformFeedbackVaryings(this.handle, props.varyings, props.bufferMode || 35981);
+        }
+        this._linkShaders();
+        import_core18.log.time(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+        this.introspectedLayout = getShaderLayoutFromGLSL(this.device.gl, this.handle);
+        import_core18.log.timeEnd(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+      }
+      destroy() {
+        if (this.destroyed) {
+          return;
+        }
+        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_core16.log.time(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
+        import_core18.log.time(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
         gl.linkProgram(this.handle);
-        import_core16.log.timeEnd(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
-        if (import_core16.log.level === 0) {
-        }
+        import_core18.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_core16.log.once(1, "RenderPipeline linking is asynchronous")();
+        import_core18.log.once(1, "RenderPipeline linking is asynchronous")();
         await this._waitForLinkComplete();
-        import_core16.log.info(2, `RenderPipeline ${this.id} - async linking complete: ${this.linkStatus}`)();
+        import_core18.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) {
         var _a;
         switch (status) {
@@ -3627,11 +4051,6 @@ var init_webgl_render_pipeline = __esm({
             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);
@@ -3639,6 +4058,7 @@ var init_webgl_render_pipeline = __esm({
           this.linkStatus = "error";
           return "link-error";
         }
+        this._initializeSamplerUniforms();
         gl.validateProgram(this.handle);
         const validated = gl.getProgramParameter(this.handle, 35715);
         if (!validated) {
@@ -3648,7 +4068,33 @@ var init_webgl_render_pipeline = __esm({
         this.linkStatus = "success";
         return "success";
       }
-      /** Use KHR_parallel_shader_compile extension if available */
+      _initializeSamplerUniforms() {
+        const { gl } = this.device;
+        gl.useProgram(this.handle);
+        let textureUnit = 0;
+        const uniformCount = gl.getProgramParameter(this.handle, 35718);
+        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);
+            }
+          }
+        }
+      }
+      _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;
@@ -3665,99 +4111,6 @@ var init_webgl_render_pipeline = __esm({
           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_core16.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) {
-                throw new Error(`Invalid uniform block name ${name}`);
-              }
-              gl.uniformBlockBinding(this.handle, uniformBufferIndex, location);
-              if (value instanceof WEBGLBuffer) {
-                gl.bindBufferBase(35345, uniformBufferIndex, value.handle);
-              } else {
-                gl.bindBufferRange(
-                  35345,
-                  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_core16.log.warn("Passing framebuffer in texture binding may be deprecated. Use fbo.colorAttachments[0] instead")();
-                texture = value.colorAttachments[0].texture;
-              } else {
-                throw new Error("No texture");
-              }
-              gl.activeTexture(33984 + 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`);
-          }
-        }
-      }
-      /**
-       * 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);
-          }
-        }
-      }
     };
   }
 });
@@ -3789,7 +4142,7 @@ function _copyTextureToBuffer(device, options) {
     height = options.sourceTexture.height,
     depthOrArrayLayers = 0,
     /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
-    origin = [0, 0],
+    origin = [0, 0, 0],
     /** Destination buffer */
     destinationBuffer,
     /** Offset, in bytes, from the beginning of the buffer to the start of the image data (default 0) */
@@ -3818,7 +4171,8 @@ function _copyTextureToBuffer(device, options) {
     const webglBuffer = destinationBuffer;
     const sourceWidth = width || framebuffer.width;
     const sourceHeight = height || framebuffer.height;
-    const sourceParams = getTextureFormatWebGL(framebuffer.colorAttachments[0].texture.props.format);
+    const colorAttachment0 = (0, import_core19.assertDefined)(framebuffer.colorAttachments[0]);
+    const sourceParams = getTextureFormatWebGL(colorAttachment0.texture.props.format);
     const sourceFormat = sourceParams.format;
     const sourceType = sourceParams.type;
     device.gl.bindBuffer(35051, webglBuffer.handle);
@@ -3845,7 +4199,7 @@ function _copyTextureToTexture(device, options) {
     /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy from. */
     origin = [0, 0],
     /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to. */
-    destinationOrigin = [0, 0],
+    destinationOrigin = [0, 0, 0],
     /** Texture to copy to/from. */
     destinationTexture
     /**  Mip-map level of the texture to copy to/from. (Default 0) */
@@ -3861,7 +4215,7 @@ function _copyTextureToTexture(device, options) {
     // depthOrArrayLayers = 0
   } = options;
   const { framebuffer, destroyFramebuffer } = getFramebuffer(sourceTexture);
-  const [sourceX, sourceY] = origin;
+  const [sourceX = 0, sourceY = 0] = origin;
   const [destinationX, destinationY, destinationZ] = destinationOrigin;
   const prevHandle = device.gl.bindFramebuffer(36160, framebuffer.handle);
   let texture;
@@ -3895,7 +4249,7 @@ function _copyTextureToTexture(device, options) {
   }
 }
 function getFramebuffer(source) {
-  if (source instanceof import_core17.Texture) {
+  if (source instanceof import_core19.Texture) {
     const { width, height, id } = source;
     const framebuffer = source.device.createFramebuffer({
       id: `framebuffer-for-${id}`,
@@ -3907,20 +4261,20 @@ function getFramebuffer(source) {
   }
   return { framebuffer: source, destroyFramebuffer: false };
 }
-var import_core17, import_constants21, WEBGLCommandBuffer;
+var import_core19, import_constants22, WEBGLCommandBuffer;
 var init_webgl_command_buffer = __esm({
   "dist/adapter/resources/webgl-command-buffer.js"() {
     "use strict";
-    import_core17 = require("@luma.gl/core");
-    import_constants21 = require("@luma.gl/constants");
+    import_core19 = require("@luma.gl/core");
+    import_constants22 = require("@luma.gl/constants");
     init_webgl_texture();
     init_webgl_texture_table();
-    WEBGLCommandBuffer = class extends import_core17.CommandBuffer {
+    WEBGLCommandBuffer = class extends import_core19.CommandBuffer {
       device;
       handle = null;
       commands = [];
-      constructor(device) {
-        super(device, {});
+      constructor(device, props = {}) {
+        super(device, props);
         this.device = device;
       }
       _executeCommands(commands = this.commands) {
@@ -3948,16 +4302,16 @@ var init_webgl_command_buffer = __esm({
 });
 
 // dist/adapter/resources/webgl-render-pass.js
-var import_core18, import_constants22, COLOR_CHANNELS, WEBGLRenderPass;
+var import_core20, import_constants23, COLOR_CHANNELS, WEBGLRenderPass;
 var init_webgl_render_pass = __esm({
   "dist/adapter/resources/webgl-render-pass.js"() {
     "use strict";
-    import_core18 = require("@luma.gl/core");
-    import_constants22 = require("@luma.gl/constants");
+    import_core20 = require("@luma.gl/core");
+    import_constants23 = require("@luma.gl/constants");
     init_with_parameters();
     init_unified_parameter_api();
     COLOR_CHANNELS = [1, 2, 4, 8];
-    WEBGLRenderPass = class extends import_core18.RenderPass {
+    WEBGLRenderPass = class extends import_core20.RenderPass {
       device;
       handle = null;
       /** Parameters that should be applied before each draw call */
@@ -3966,6 +4320,9 @@ var init_webgl_render_pass = __esm({
         var _a;
         super(device, props);
         this.device = device;
+        if (!(props == null ? void 0 : props.framebuffer)) {
+          device.getDefaultCanvasContext()._resizeDrawingBufferIfNeeded();
+        }
         let viewport;
         if (!((_a = props == null ? void 0 : props.parameters) == null ? void 0 : _a.viewport)) {
           if (props == null ? void 0 : props.framebuffer) {
@@ -3986,9 +4343,21 @@ var init_webgl_render_pass = __esm({
           this.device.gl.drawBuffers([1029]);
         }
         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) {
       }
@@ -4108,31 +4477,39 @@ var init_webgl_render_pass = __esm({
 });
 
 // dist/adapter/resources/webgl-command-encoder.js
-var import_core19, WEBGLCommandEncoder;
+var import_core21, WEBGLCommandEncoder;
 var init_webgl_command_encoder = __esm({
   "dist/adapter/resources/webgl-command-encoder.js"() {
     "use strict";
-    import_core19 = require("@luma.gl/core");
+    import_core21 = require("@luma.gl/core");
     init_webgl_command_buffer();
     init_webgl_render_pass();
-    WEBGLCommandEncoder = class extends import_core19.CommandEncoder {
+    WEBGLCommandEncoder = class extends import_core21.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 == null ? void 0 : 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) {
@@ -4158,6 +4535,10 @@ var init_webgl_command_encoder = __esm({
       }
       resolveQuerySet(querySet, destination, options) {
       }
+      writeTimestamp(querySet, queryIndex) {
+        const webglQuerySet = querySet;
+        webglQuerySet.writeTimestamp(queryIndex);
+      }
     };
   }
 });
@@ -4169,7 +4550,7 @@ function fillArray(options) {
   const total = count * length;
   let copied = 0;
   for (let i = start; copied < length; copied++) {
-    target2[i++] = source[copied];
+    target2[i++] = source[copied] ?? 0;
   }
   while (copied < total) {
     if (copied < total - copied) {
@@ -4206,16 +4587,16 @@ function compareConstantArrayValues(v1, v2) {
   }
   return true;
 }
-var import_core20, import_constants23, import_env2, WEBGLVertexArray;
+var import_core22, import_constants24, import_env2, WEBGLVertexArray;
 var init_webgl_vertex_array = __esm({
   "dist/adapter/resources/webgl-vertex-array.js"() {
     "use strict";
-    import_core20 = require("@luma.gl/core");
-    import_constants23 = require("@luma.gl/constants");
+    import_core22 = require("@luma.gl/core");
+    import_constants24 = require("@luma.gl/constants");
     import_env2 = require("@probe.gl/env");
     init_webgl_vertex_formats();
     init_fill_array();
-    WEBGLVertexArray = class extends import_core20.VertexArray {
+    WEBGLVertexArray = class extends import_core22.VertexArray {
       get [Symbol.toStringTag]() {
         return "VertexArray";
       }
@@ -4382,7 +4763,7 @@ var init_webgl_vertex_array = __esm({
         this.buffer = this.buffer || this.device.createBuffer({ byteLength });
         updateNeeded ||= !compareConstantArrayValues(constantValue, this.bufferValue);
         if (updateNeeded) {
-          const typedArray = (0, import_core20.getScratchArray)(value.constructor, length);
+          const typedArray = (0, import_core22.getScratchArray)(value.constructor, length);
           fillArray({ target: typedArray, source: constantValue, start: 0, count: length });
           this.buffer.write(typedArray);
           this.bufferValue = value;
@@ -4400,15 +4781,15 @@ function isIndex(value) {
   }
   return /^\d+$/.test(value);
 }
-var import_core21, import_constants24, WEBGLTransformFeedback;
+var import_core23, import_constants25, WEBGLTransformFeedback;
 var init_webgl_transform_feedback = __esm({
   "dist/adapter/resources/webgl-transform-feedback.js"() {
     "use strict";
-    import_core21 = require("@luma.gl/core");
-    import_constants24 = require("@luma.gl/constants");
+    import_core23 = require("@luma.gl/core");
+    import_constants25 = require("@luma.gl/constants");
     init_dist();
     init_webgl_topology_utils();
-    WEBGLTransformFeedback = class extends import_core21.TransformFeedback {
+    WEBGLTransformFeedback = class extends import_core23.TransformFeedback {
       device;
       gl;
       handle;
@@ -4461,8 +4842,8 @@ var init_webgl_transform_feedback = __esm({
         this.buffers = {};
         this.unusedBuffers = {};
         this.bind(() => {
-          for (const bufferName in buffers) {
-            this.setBuffer(bufferName, buffers[bufferName]);
+          for (const [bufferName, buffer] of Object.entries(buffers)) {
+            this.setBuffer(bufferName, buffer);
           }
         });
       }
@@ -4471,7 +4852,7 @@ var init_webgl_transform_feedback = __esm({
         const { buffer, byteLength, byteOffset } = this._getBufferRange(bufferOrRange);
         if (location < 0) {
           this.unusedBuffers[locationOrName] = buffer;
-          import_core21.log.warn(`${this.id} unusedBuffers varying buffer ${locationOrName}`)();
+          import_core23.log.warn(`${this.id} unusedBuffers varying buffer ${locationOrName}`)();
           return;
         }
         this.buffers[location] = { buffer, byteLength, byteOffset };
@@ -4484,7 +4865,7 @@ var init_webgl_transform_feedback = __esm({
           return this.buffers[locationOrName] || null;
         }
         const location = this._getVaryingIndex(locationOrName);
-        return location >= 0 ? this.buffers[location] : null;
+        return this.buffers[location] ?? null;
       }
       bind(funcOrHandle = this.handle) {
         if (typeof funcOrHandle !== "function") {
@@ -4531,8 +4912,8 @@ var init_webgl_transform_feedback = __esm({
        * cannot be bound to 'TRANSFORM_FEEDBACK_BUFFER' target.
        */
       _bindBuffers() {
-        for (const bufferIndex in this.buffers) {
-          const { buffer, byteLength, byteOffset } = this._getBufferRange(this.buffers[bufferIndex]);
+        for (const [bufferIndex, bufferEntry] of Object.entries(this.buffers)) {
+          const { buffer, byteLength, byteOffset } = this._getBufferRange(bufferEntry);
           this._bindBuffer(Number(bufferIndex), buffer, byteOffset, byteLength);
         }
       }
@@ -4554,152 +4935,245 @@ var init_webgl_transform_feedback = __esm({
 });
 
 // dist/adapter/resources/webgl-query-set.js
-var import_core22, import_constants25, WEBGLQuerySet;
+var import_core24, import_constants26, WEBGLQuerySet;
 var init_webgl_query_set = __esm({
   "dist/adapter/resources/webgl-query-set.js"() {
     "use strict";
-    import_core22 = require("@luma.gl/core");
-    import_constants25 = require("@luma.gl/constants");
-    WEBGLQuerySet = class extends import_core22.QuerySet {
+    import_core24 = require("@luma.gl/core");
+    import_constants26 = require("@luma.gl/constants");
+    WEBGLQuerySet = class extends import_core24.QuerySet {
       device;
       handle;
-      target = null;
-      _queryPending = false;
-      _pollingPromise = null;
+      _timestampPairs = [];
+      _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.device.gl.deleteQuery(pair.activeQuery.handle);
+          }
+          for (const query of pair.completedQueries) {
+            this.device.gl.deleteQuery(query.handle);
+          }
+        }
+        if (this._occlusionQuery) {
+          this.device.gl.deleteQuery(this._occlusionQuery.handle);
+        }
+        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);
+      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 == null ? void 0 : options.firstQuery) || 0;
+        const queryCount = (options == null ? void 0 : 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 == null ? void 0 : options.conservative) ? 36202 : 35887);
+      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, this.handle);
+        this._occlusionQuery = {
+          handle: this.handle,
+          promise: null,
+          result: null,
+          disjoint: false
+        };
+        this._occlusionActive = true;
       }
       endOcclusionQuery() {
-        this._end();
-      }
-      // Shortcut for transformFeedbackQuery
-      beginTransformFeedbackQuery() {
-        return this._begin(35976);
-      }
-      endTransformFeedbackQuery() {
-        this._end();
-      }
-      async resolveQuery() {
-        const value = await this.pollQuery();
-        return [value];
-      }
-      // 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) {
-          return;
+        if (!this._occlusionActive) {
+          throw new Error("Occlusion query is not active");
         }
-        this.target = target2;
-        this.device.gl.beginQuery(this.target, this.handle);
-        return;
+        this.device.gl.endQuery(35887);
+        this._occlusionActive = false;
       }
-      // ends the current query
-      _end() {
-        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
+          };
+          this.device.gl.beginQuery(35007, handle);
+          pair.activeQuery = query;
           return;
         }
-        if (this.target) {
-          this.device.gl.endQuery(this.target);
-          this.target = null;
-          this._queryPending = true;
+        if (!pair.activeQuery) {
+          throw new Error("Timestamp query pair was ended before it was started");
         }
-        return;
+        this.device.gl.endQuery(35007);
+        pair.completedQueries.push(pair.activeQuery);
+        pair.activeQuery = null;
       }
-      // Returns true if the query result is available
-      isResultAvailable() {
-        if (!this._queryPending) {
-          return false;
+      _validateRange(firstQuery, queryCount) {
+        if (firstQuery < 0 || queryCount < 0 || firstQuery + queryCount > this.props.count) {
+          throw new Error("Query read range is out of bounds");
         }
-        const resultAvailable = this.device.gl.getQueryParameter(this.handle, 34919);
-        if (resultAvailable) {
-          this._queryPending = false;
+      }
+      _getTimestampPairIndex(queryIndex) {
+        if (queryIndex < 0 || queryIndex >= this.props.count) {
+          throw new Error("Query index is out of bounds");
         }
-        return resultAvailable;
+        return Math.floor(queryIndex / 2);
       }
-      // Timing query is disjoint, i.e. results are invalid
-      isTimerDisjoint() {
-        return this.device.gl.getParameter(36795);
+      _isTimestampPairAvailable(pairIndex) {
+        const pair = this._timestampPairs[pairIndex];
+        if (!pair || pair.completedQueries.length === 0) {
+          return false;
+        }
+        return this._pollQueryAvailability(pair.completedQueries[0]);
       }
-      // Returns query result.
-      getResult() {
-        return this.device.gl.getQueryParameter(this.handle, 34918);
+      _pollQueryAvailability(query) {
+        if (query.result !== null || query.disjoint) {
+          return true;
+        }
+        const resultAvailable = this.device.gl.getQueryParameter(query.handle, 34919);
+        if (!resultAvailable) {
+          return false;
+        }
+        const isDisjoint = Boolean(this.device.gl.getParameter(36795));
+        query.disjoint = isDisjoint;
+        query.result = isDisjoint ? 0n : BigInt(this.device.gl.getQueryParameter(query.handle, 34918));
+        return true;
       }
-      // Returns the query result, converted to milliseconds to match JavaScript conventions.
-      getTimerMilliseconds() {
-        return this.getResult() / 1e6;
+      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);
+        }
       }
-      // Polls the query
-      pollQuery(limit = Number.POSITIVE_INFINITY) {
-        if (this._pollingPromise) {
-          return this._pollingPromise;
+      _consumeQueryResult(query) {
+        if (query.promise) {
+          return query.promise;
         }
-        let counter = 0;
-        this._pollingPromise = new Promise((resolve, reject) => {
+        query.promise = new Promise((resolve, reject) => {
           const poll = () => {
-            if (this.isResultAvailable()) {
-              resolve(this.getResult());
-              this._pollingPromise = null;
-            } else if (counter++ > limit) {
-              reject("Timed out");
-              this._pollingPromise = null;
-            } else {
+            if (!this._pollQueryAvailability(query)) {
               requestAnimationFrame(poll);
+              return;
+            }
+            query.promise = null;
+            if (query.disjoint) {
+              reject(new Error("GPU timestamp query was invalidated by a disjoint event"));
+            } else {
+              resolve(query.result || 0n);
             }
           };
-          requestAnimationFrame(poll);
+          poll();
         });
-        return this._pollingPromise;
+        return query.promise;
       }
     };
   }
 });
 
 // dist/adapter/resources/webgl-fence.js
-var import_core23, WEBGLFence;
+var import_core25, WEBGLFence;
 var init_webgl_fence = __esm({
   "dist/adapter/resources/webgl-fence.js"() {
     "use strict";
-    import_core23 = require("@luma.gl/core");
-    WEBGLFence = class extends import_core23.Fence {
+    import_core25 = require("@luma.gl/core");
+    WEBGLFence = class extends import_core25.Fence {
       device;
       gl;
       handle;
@@ -4784,11 +5258,11 @@ function glTypeToBytes(type) {
       return 0;
   }
 }
-var import_constants26;
+var import_constants27;
 var init_format_utils = __esm({
   "dist/adapter/helpers/format-utils.js"() {
     "use strict";
-    import_constants26 = require("@luma.gl/constants");
+    import_constants27 = require("@luma.gl/constants");
   }
 });
 
@@ -4822,7 +5296,7 @@ function readPixelsToArray(source, options) {
   sourceFormat ||= (texture == null ? void 0 : texture.glFormat) || 6408;
   sourceType ||= (texture == null ? void 0 : texture.glType) || 5121;
   target2 = getPixelArray(target2, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
-  const signedType = (0, import_core24.getDataType)(target2);
+  const signedType = (0, import_core26.getDataType)(target2);
   sourceType = sourceType || convertDataTypeToGLDataType(signedType);
   const prevHandle = gl.bindFramebuffer(36160, handle);
   gl.readBuffer(36064 + sourceAttachment);
@@ -4865,7 +5339,7 @@ function readPixelsToBuffer(source, options) {
   return webglBufferTarget;
 }
 function getFramebuffer2(source) {
-  if (!(source instanceof import_core24.Framebuffer)) {
+  if (!(source instanceof import_core26.Framebuffer)) {
     return { framebuffer: toFramebuffer(source), deleteFramebuffer: true };
   }
   return { framebuffer: source, deleteFramebuffer: false };
@@ -4887,16 +5361,16 @@ function getPixelArray(pixelArray, glType, glFormat, width, height, depth) {
   }
   glType ||= 5121;
   const shaderType = convertGLDataTypeToDataType(glType);
-  const ArrayType = (0, import_core24.getTypedArrayConstructor)(shaderType);
+  const ArrayType = (0, import_core26.getTypedArrayConstructor)(shaderType);
   const components = glFormatToComponents(glFormat);
   return new ArrayType(width * height * components);
 }
-var import_core24, import_constants27;
+var import_core26, import_constants28;
 var init_webgl_texture_utils = __esm({
   "dist/adapter/helpers/webgl-texture-utils.js"() {
     "use strict";
-    import_core24 = require("@luma.gl/core");
-    import_constants27 = require("@luma.gl/constants");
+    import_core26 = require("@luma.gl/core");
+    import_constants28 = require("@luma.gl/constants");
     init_webgl_shadertypes();
     init_format_utils();
     init_shader_formats();
@@ -4942,17 +5416,19 @@ function compareConstantArrayValues2(v1, v2) {
   }
   return true;
 }
-var import_core25, WebGLDevice;
+var import_core27, WebGLDevice;
 var init_webgl_device = __esm({
   "dist/adapter/webgl-device.js"() {
     "use strict";
-    import_core25 = require("@luma.gl/core");
+    import_core27 = require("@luma.gl/core");
     init_webgl_state_tracker();
     init_create_browser_context();
+    init_webgl_context_data();
     init_webgl_device_info();
     init_webgl_device_features();
     init_webgl_device_limits();
     init_webgl_canvas_context();
+    init_webgl_presentation_context();
     init_spector();
     init_webgl_developer_tools();
     init_webgl_texture_table();
@@ -4963,6 +5439,7 @@ var init_webgl_device = __esm({
     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();
@@ -4972,7 +5449,14 @@ var init_webgl_device = __esm({
     init_unified_parameter_api();
     init_with_parameters();
     init_webgl_extensions();
-    WebGLDevice = class extends import_core25.Device {
+    WebGLDevice = class extends import_core27.Device {
+      static getDeviceFromContext(gl) {
+        var _a;
+        if (!gl) {
+          return null;
+        }
+        return ((_a = gl.luma) == null ? void 0 : _a.device) ?? null;
+      }
       // Public `Device` API
       /** type of this device */
       type = "webgl";
@@ -4994,7 +5478,7 @@ var init_webgl_device = __esm({
       // @ts-ignore TODO fix
       _constants;
       /** State used by luma.gl classes - TODO - not used? */
-      _extensions = {};
+      extensions;
       _polyfilled = false;
       /** Instance of Spector.js (if initialized) */
       spectorJS;
@@ -5016,13 +5500,14 @@ var init_webgl_device = __esm({
         }
       }
       constructor(props) {
-        var _a, _b;
+        var _a;
         super({ ...props, id: props.id || uid("webgl-device") });
-        const canvasContextProps = import_core25.Device._getCanvasContextProps(props);
+        const canvasContextProps = import_core27.Device._getCanvasContextProps(props);
         if (!canvasContextProps) {
           throw new Error("WebGLDevice requires props.createCanvasContext to be set");
         }
-        let device = (_b = (_a = canvasContextProps.canvas) == null ? void 0 : _a.gl) == null ? void 0 : _b.device;
+        const existingContext = ((_a = canvasContextProps.canvas) == null ? void 0 : _a.gl) ?? null;
+        let device = WebGLDevice.getDeviceFromContext(existingContext);
         if (device) {
           throw new Error(`WebGL context already attached to device ${device.id}`);
         }
@@ -5055,10 +5540,11 @@ var init_webgl_device = __esm({
         if (!gl) {
           throw new Error("WebGL context creation failed");
         }
-        device = gl.device;
+        device = WebGLDevice.getDeviceFromContext(gl);
         if (device) {
           if (props._reuseDevices) {
-            import_core25.log.log(1, `Not creating a new Device, instead returning a reference to Device ${device.id} already attached to WebGL context`, device)();
+            import_core27.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;
           }
@@ -5067,25 +5553,28 @@ var init_webgl_device = __esm({
         this.handle = gl;
         this.gl = gl;
         this.spectorJS = initializeSpectorJS({ ...this.props, gl: this.handle });
-        this.gl.device = this;
-        this.info = getDeviceInfo(this.gl, this._extensions);
+        const contextData = getWebGLContextData(this.handle);
+        contextData.device = this;
+        this.extensions = contextData.extensions || (contextData.extensions = {});
+        this.info = getDeviceInfo(this.gl, this.extensions);
         this.limits = new WebGLDeviceLimits(this.gl);
-        this.features = new WebGLDeviceFeatures(this.gl, this._extensions, this.props._disabledFeatures);
+        this.features = new WebGLDeviceFeatures(this.gl, this.extensions, this.props._disabledFeatures);
         if (this.props._initializeFeatures) {
           this.features.initializeFeatures();
         }
         const glState = new WebGLStateTracker(this.gl, {
-          log: (...args) => import_core25.log.log(1, ...args)()
+          log: (...args) => import_core27.log.log(1, ...args)()
         });
         glState.trackState(this.gl, { copyState: false });
         if (props.debug || props.debugWebGL) {
           this.gl = makeDebugContext(this.gl, { debugWebGL: true, traceWebGL: props.debugWebGL });
-          import_core25.log.warn("WebGL debug mode activated. Performance reduced.")();
+          import_core27.log.warn("WebGL debug mode activated. Performance reduced.")();
         }
         if (props.debugWebGL) {
-          import_core25.log.level = Math.max(import_core25.log.level, 1);
+          import_core27.log.level = Math.max(import_core27.log.level, 1);
         }
         this.commandEncoder = new WEBGLCommandEncoder(this, { id: `${this}-command-encoder` });
+        this.canvasContext._startObservers();
       }
       /**
        * Destroys the device
@@ -5098,8 +5587,11 @@ var init_webgl_device = __esm({
        * browser API for destroying WebGL contexts.
        */
       destroy() {
+        var _a;
+        (_a = this.commandEncoder) == null ? void 0 : _a.destroy();
         if (!this.props._reuseDevices && !this._reused) {
-          delete this.gl.device;
+          const contextData = getWebGLContextData(this.handle);
+          contextData.device = null;
         }
       }
       get isLost() {
@@ -5109,6 +5601,9 @@ var init_webgl_device = __esm({
       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);
@@ -5143,6 +5638,9 @@ var init_webgl_device = __esm({
       createRenderPipeline(props) {
         return new WEBGLRenderPipeline(this, props);
       }
+      _createSharedRenderPipelineWebGL(props) {
+        return new WEBGLSharedRenderPipeline(this, props);
+      }
       createComputePipeline(props) {
         throw new Error("ComputePipeline not supported in WebGL");
       }
@@ -5155,12 +5653,27 @@ var init_webgl_device = __esm({
        * Chrome's offscreen canvas does not require gl.commit
        */
       submit(commandBuffer) {
+        let submittedCommandEncoder = null;
         if (!commandBuffer) {
-          commandBuffer = this.commandEncoder.finish();
+          submittedCommandEncoder = this.commandEncoder;
+          commandBuffer = submittedCommandEncoder.finish();
           this.commandEncoder.destroy();
-          this.commandEncoder = this.createCommandEncoder({ id: `${this.id}-default-encoder` });
+          this.commandEncoder = this.createCommandEncoder({
+            id: submittedCommandEncoder.props.id,
+            timeProfilingQuerySet: submittedCommandEncoder.getTimeProfilingQuerySet()
+          });
+        }
+        try {
+          commandBuffer._executeCommands();
+          if (submittedCommandEncoder) {
+            submittedCommandEncoder.resolveTimeProfilingQuerySet().then(() => {
+              this.commandEncoder._gpuTimeMs = submittedCommandEncoder._gpuTimeMs;
+            }).catch(() => {
+            });
+          }
+        } finally {
+          commandBuffer.destroy();
         }
-        commandBuffer._executeCommands();
       }
       //
       // TEMPORARY HACKS - will be removed in v9.1
@@ -5183,11 +5696,11 @@ var init_webgl_device = __esm({
         return withGLParameters(this.gl, parameters, func);
       }
       resetWebGL() {
-        import_core25.log.warn("WebGLDevice.resetWebGL is deprecated, use only for debugging")();
+        import_core27.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)
@@ -5256,7 +5769,7 @@ var init_webgl_device = __esm({
         this._constants = this._constants || new Array(maxVertexAttributes).fill(null);
         const currentConstant = this._constants[location];
         if (currentConstant && compareConstantArrayValues2(currentConstant, constant)) {
-          import_core25.log.info(1, `setConstantAttributeWebGL(${location}) could have been skipped, value unchanged`)();
+          import_core27.log.info(1, `setConstantAttributeWebGL(${location}) could have been skipped, value unchanged`)();
         }
         this._constants[location] = constant;
         switch (constant.constructor) {
@@ -5275,8 +5788,8 @@ var init_webgl_device = __esm({
       }
       /** Ensure extensions are only requested once */
       getExtension(name) {
-        getWebGLExtension(this.gl, name, this._extensions);
-        return this._extensions;
+        getWebGLExtension(this.gl, name, this.extensions);
+        return this.extensions;
       }
       // INTERNAL SUPPORT METHODS FOR WEBGL RESOURCES
       /**
@@ -5299,21 +5812,21 @@ function isWebGL(gl) {
   }
   return Boolean(gl && typeof gl.createVertexArray === "function");
 }
-var import_core26, LOG_LEVEL2, WebGLAdapter, webgl2Adapter;
+var import_core28, LOG_LEVEL2, WebGLAdapter, webgl2Adapter;
 var init_webgl_adapter = __esm({
   "dist/adapter/webgl-adapter.js"() {
     "use strict";
-    import_core26 = require("@luma.gl/core");
+    import_core28 = require("@luma.gl/core");
     init_polyfill_webgl1_extensions();
     init_spector();
     init_webgl_developer_tools();
     LOG_LEVEL2 = 1;
-    WebGLAdapter = class extends import_core26.Adapter {
+    WebGLAdapter = class extends import_core28.Adapter {
       /** type of device's created by this adapter */
       type = "webgl";
       constructor() {
         super();
-        import_core26.Device.defaultProps = { ...import_core26.Device.defaultProps, ...DEFAULT_SPECTOR_PROPS };
+        import_core28.Device.defaultProps = { ...import_core28.Device.defaultProps, ...DEFAULT_SPECTOR_PROPS };
       }
       /** Force any created WebGL contexts to be WebGL2 contexts, polyfilled with WebGL1 extensions */
       enforceWebGL2(enable2) {
@@ -5328,7 +5841,7 @@ var init_webgl_adapter = __esm({
           return true;
         }
         if (typeof WebGLRenderingContext !== "undefined" && handle instanceof WebGLRenderingContext) {
-          import_core26.log.warn("WebGL1 is not supported", handle)();
+          import_core28.log.warn("WebGL1 is not supported", handle)();
         }
         return false;
       }
@@ -5344,8 +5857,9 @@ var init_webgl_adapter = __esm({
         if (gl instanceof WebGLDevice2) {
           return gl;
         }
-        if ((gl == null ? void 0 : gl.device) instanceof WebGLDevice2) {
-          return gl.device;
+        const existingDevice = WebGLDevice2.getDeviceFromContext(gl);
+        if (existingDevice) {
+          return existingDevice;
         }
         if (!isWebGL(gl)) {
           throw new Error("Invalid WebGL2RenderingContext");
@@ -5369,19 +5883,19 @@ var init_webgl_adapter = __esm({
         const results = await Promise.allSettled(promises);
         for (const result of results) {
           if (result.status === "rejected") {
-            import_core26.log.error(`Failed to initialize debug libraries ${result.reason}`)();
+            import_core28.log.error(`Failed to initialize debug libraries ${result.reason}`)();
           }
         }
         try {
           const device = new WebGLDevice2(props);
-          import_core26.log.groupCollapsed(LOG_LEVEL2, `WebGLDevice ${device.id} created`)();
+          import_core28.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_core26.log.probe(LOG_LEVEL2, message2)();
-          import_core26.log.table(LOG_LEVEL2, device.info)();
+          import_core28.log.probe(LOG_LEVEL2, message2)();
+          import_core28.log.table(LOG_LEVEL2, device.info)();
           return device;
         } finally {
-          import_core26.log.groupEnd(LOG_LEVEL2)();
-          import_core26.log.info(LOG_LEVEL2, `%cWebGL call tracing: luma.log.set('debug-webgl') `, "color: white; background: blue; padding: 2px 6px; border-radius: 3px;")();
+          import_core28.log.groupEnd(LOG_LEVEL2)();
+          import_core28.log.info(LOG_LEVEL2, `%cWebGL call tracing: luma.log.set('debug-webgl') `, "color: white; background: blue; padding: 2px 6px; border-radius: 3px;")();
         }
       }
     };