@luma.gl/webgl 9.0.0-beta.5 → 9.0.0-beta.6

package/dist/dist.dev.js

@@ -856,7 +856,9 @@ var __exports__ = (() => {
     const VERSION3 = typeof __VERSION__ !== "undefined" ? __VERSION__ : "running from source";
     const STARTUP_MESSAGE = "set luma.log.level=1 (or higher) to trace rendering";
     if (globalThis.luma && globalThis.luma.VERSION !== VERSION3) {
-      throw new Error(`luma.gl - multiple VERSIONs detected: ${globalThis.luma.VERSION} vs ${VERSION3}`);
+      throw new Error(
+        `luma.gl - multiple VERSIONs detected: ${globalThis.luma.VERSION} vs ${VERSION3}`
+      );
     }
     if (!globalThis.luma) {
       if (isBrowser()) {
@@ -952,20 +954,20 @@ var __exports__ = (() => {
       return this.props;
     }
     // ATTACHED RESOURCES
-    /** 
+    /**
      * Attaches a resource. Attached resources are auto destroyed when this resource is destroyed
      * Called automatically when sub resources are auto created but can be called by application
      */
     attachResource(resource) {
       this._attachedResources.add(resource);
     }
-    /** 
+    /**
      * Detach an attached resource. The resource will no longer be auto-destroyed when this resource is destroyed.
      */
     detachResource(resource) {
       this._attachedResources.delete(resource);
     }
-    /** 
+    /**
      * Destroys a resource (only if owned), and removes from the owned (auto-destroy) list for this resource.
      */
     destroyAttachedResource(resource) {
@@ -1063,7 +1065,10 @@ var __exports__ = (() => {
     /** This doesn't handle partial non-zero offset updates correctly */
     _setDebugData(data, byteOffset, byteLength) {
       const buffer = ArrayBuffer.isView(data) ? data.buffer : data;
-      const debugDataLength = Math.min(data ? data.byteLength : byteLength, _Buffer.DEBUG_DATA_MAX_LENGTH);
+      const debugDataLength = Math.min(
+        data ? data.byteLength : byteLength,
+        _Buffer.DEBUG_DATA_MAX_LENGTH
+      );
       if (data === null) {
         this.debugData = new ArrayBuffer(debugDataLength);
       } else if (byteOffset === 0 && byteLength === data.byteLength) {
@@ -1103,7 +1108,140 @@ var __exports__ = (() => {
   /** Max amount of debug data saved. Two vec4's */
   __publicField(Buffer2, "DEBUG_DATA_MAX_LENGTH", 32);
 
+  // ../core/src/adapter/type-utils/decode-data-type.ts
+  function decodeVertexType(type) {
+    const dataType = TYPE_MAP[type];
+    const bytes = getDataTypeBytes(dataType);
+    const normalized = type.includes("norm");
+    const integer = !normalized && !type.startsWith("float");
+    const signed = type.startsWith("s");
+    return {
+      dataType: TYPE_MAP[type],
+      byteLength: bytes,
+      integer,
+      signed,
+      normalized
+    };
+  }
+  function getDataTypeBytes(type) {
+    const bytes = TYPE_SIZES[type];
+    return bytes;
+  }
+  var TYPE_MAP = {
+    uint8: "uint8",
+    sint8: "sint8",
+    unorm8: "uint8",
+    snorm8: "sint8",
+    uint16: "uint16",
+    sint16: "sint16",
+    unorm16: "uint16",
+    snorm16: "sint16",
+    float16: "float16",
+    float32: "float32",
+    uint32: "uint32",
+    sint32: "sint32"
+  };
+  var TYPE_SIZES = {
+    uint8: 1,
+    sint8: 1,
+    uint16: 2,
+    sint16: 2,
+    float16: 2,
+    float32: 4,
+    uint32: 4,
+    sint32: 4
+  };
+
+  // ../core/src/adapter/type-utils/decode-texture-format.ts
+  var COMPRESSED_TEXTURE_FORMAT_PREFIXES = [
+    "bc1",
+    "bc2",
+    "bc3",
+    "bc4",
+    "bc5",
+    "bc6",
+    "bc7",
+    "etc1",
+    "etc2",
+    "eac",
+    "atc",
+    "astc",
+    "pvrtc"
+  ];
+  var REGEX = /^(rg?b?a?)([0-9]*)([a-z]*)(-srgb)?(-webgl|-unsized)?$/;
+  function isTextureFormatCompressed(textureFormat) {
+    return COMPRESSED_TEXTURE_FORMAT_PREFIXES.some((prefix) => textureFormat.startsWith(prefix));
+  }
+  function decodeTextureFormat(format) {
+    const matches = REGEX.exec(format);
+    if (matches) {
+      const [, format2, length, type, srgb, suffix] = matches;
+      if (format2) {
+        const dataType = `${type}${length}`;
+        const decodedType = decodeVertexType(dataType);
+        return {
+          format: format2,
+          components: format2.length,
+          // dataType - overwritten by decodedType
+          srgb: srgb === "-srgb",
+          unsized: suffix === "-unsized",
+          webgl: suffix === "-webgl",
+          ...decodedType
+        };
+      }
+    }
+    return decodeNonStandardFormat(format);
+  }
+  var EXCEPTIONS = {
+    // Packed 16 bit formats
+    "rgba4unorm-webgl": { format: "rgba", bpp: 2 },
+    "rgb565unorm-webgl": { format: "rgb", bpp: 2 },
+    "rgb5a1unorm-webgl": { format: "rgba", bbp: 2 },
+    // Packed 32 bit formats
+    rgb9e5ufloat: { format: "rgb", bbp: 4 },
+    rg11b10ufloat: { format: "rgb", bbp: 4 },
+    rgb10a2unorm: { format: "rgba", bbp: 4 },
+    "rgb10a2uint-webgl": { format: "rgba", bbp: 4 },
+    // Depth/stencil
+    stencil8: { components: 1, bpp: 1, a: "stencil" },
+    depth16unorm: { components: 1, bpp: 2, a: "depth" },
+    depth24plus: { components: 1, bpp: 3, a: "depth" },
+    depth32float: { components: 1, bpp: 4, a: "depth" },
+    "depth24plus-stencil8": { components: 2, bpp: 4, a: "depth-stencil" },
+    // "depth24unorm-stencil8" feature
+    "depth24unorm-stencil8": { components: 2, bpp: 4, a: "depth-stencil" },
+    // "depth32float-stencil8" feature
+    "depth32float-stencil8": { components: 2, bpp: 4, a: "depth-stencil" }
+  };
+  function decodeNonStandardFormat(format) {
+    const data = EXCEPTIONS[format];
+    if (!data) {
+      throw new Error(`Unknown format ${format}`);
+    }
+    return {
+      format: data.format || "",
+      components: data.components || data.format?.length || 1,
+      byteLength: data.bpp || 1,
+      srgb: false,
+      unsized: false
+    };
+  }
+
   // ../core/src/adapter/device.ts
+  var DeviceLimits = class {
+  };
+  var DeviceFeatures = class {
+    features;
+    constructor(features = []) {
+      this.features = new Set(features);
+    }
+    *[Symbol.iterator]() {
+      yield* this.features;
+    }
+    has(feature) {
+      return this.features.has(feature);
+    }
+  };
   var _Device = class {
     get [Symbol.toStringTag]() {
       return "Device";
@@ -1122,6 +1260,10 @@ var __exports__ = (() => {
     userData = {};
     /** Used by other luma.gl modules to store data on the device */
     _lumaData = {};
+    /** Check if a specific texture format is GPU compressed */
+    isTextureFormatCompressed(format) {
+      return isTextureFormatCompressed(format);
+    }
     /**
      * Trigger device loss.
      * @returns `true` if context loss could actually be triggered.
@@ -1172,7 +1314,12 @@ var __exports__ = (() => {
     clearWebGL(options) {
       throw new Error("not implemented");
     }
-    // Implementation
+    // IMPLEMENTATION
+    // Error Handling
+    /** Report unhandled device errors */
+    onError(error) {
+      this.props.onError(error);
+    }
     _getBufferProps(props) {
       if (props instanceof ArrayBuffer || ArrayBuffer.isView(props)) {
         props = { data: props };
@@ -1200,8 +1347,11 @@ var __exports__ = (() => {
     width: 800,
     // width are height are only used by headless gl
     height: 600,
+    requestMaximalLimits: true,
     debug: Boolean(log.get("debug")),
     // Instrument context (at the expense of performance)
+    spector: Boolean(log.get("spector")),
+    // Initialize the SpectorJS WebGL debugger
     break: [],
     // alpha: undefined,
     // depth: undefined,
@@ -1210,7 +1360,9 @@ var __exports__ = (() => {
     // premultipliedAlpha: undefined,
     // preserveDrawingBuffer: undefined,
     // failIfMajorPerformanceCaveat: undefined
-    gl: null
+    gl: null,
+    // Callbacks
+    onError: (error) => log.error(error.message)
   });
   __publicField(Device, "VERSION", VERSION2);
 
@@ -1530,7 +1682,6 @@ var __exports__ = (() => {
     height: void 0,
     depth: 1,
     mipmaps: true,
-    sampler: {},
     // type: undefined,
     compressed: false,
     // mipLevels: 1,
@@ -1538,7 +1689,9 @@ var __exports__ = (() => {
     // usage: GPUTextureUsage.COPY_DST
     mipLevels: void 0,
     samples: void 0,
-    type: void 0
+    type: void 0,
+    sampler: {},
+    view: void 0
   });
   __publicField(Texture, "COPY_SRC", 1);
   __publicField(Texture, "COPY_DST", 2);
@@ -1546,6 +1699,28 @@ var __exports__ = (() => {
   __publicField(Texture, "STORAGE_BINDING", 8);
   __publicField(Texture, "RENDER_ATTACHMENT", 16);
 
+  // ../core/src/adapter/resources/texture-view.ts
+  var _TextureView = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "TextureView";
+    }
+    /** Should not be constructed directly. Use `texture.createView(props)` */
+    constructor(device, props) {
+      super(device, props, _TextureView.defaultProps);
+    }
+  };
+  var TextureView = _TextureView;
+  __publicField(TextureView, "defaultProps", {
+    ...Resource.defaultProps,
+    format: void 0,
+    dimension: void 0,
+    aspect: "all",
+    baseMipLevel: 0,
+    mipLevelCount: void 0,
+    baseArrayLayer: 0,
+    arrayLayerCount: void 0
+  });
+
   // ../core/src/lib/compiler-log/format-compiler-log.ts
   function formatCompilerLog(shaderLog, source, options) {
     let formattedLog = "";
@@ -1658,10 +1833,14 @@ ${numberedLines}${positionIndicator}${message2.type.toUpperCase()}: ${message2.m
     getCompilationInfoSync() {
       return null;
     }
+    /** Get translated shader source in host platform's native language (HLSL, GLSL, and even GLSL ES), if available */
+    getTranslatedSource() {
+      return null;
+    }
     // PORTABLE HELPERS
     /** In browser logging of errors */
-    async debugShader() {
-      switch (this.props.debug) {
+    async debugShader(trigger = this.props.debug) {
+      switch (trigger) {
         case "never":
           return;
         case "errors":
@@ -1687,7 +1866,11 @@ ${numberedLines}${positionIndicator}${message2.type.toUpperCase()}: ${message2.m
       }
       const shaderName = getShaderInfo(this.source).name;
       const shaderTitle = `${this.stage} ${shaderName}`;
-      const htmlLog = formatCompilerLog(messages, this.source, { showSourceCode: "all", html: true });
+      let htmlLog = formatCompilerLog(messages, this.source, { showSourceCode: "all", html: true });
+      const translatedSource = this.getTranslatedSource();
+      if (translatedSource) {
+        htmlLog += `<br /><br /><h1>Translated Source</h1><br /><br /><code style="user-select:text;"><pre>${translatedSource}</pre></code>`;
+      }
       const button = document.createElement("Button");
       button.innerHTML = `
 <h1>Shader Compilation Error in ${shaderTitle}</h1><br /><br />
@@ -1782,67 +1965,29 @@ ${htmlLog}
         this.resizeAttachments(this.width, this.height);
       }
     }
-    // /** Returns fully populated attachment object. */
-    // protected normalizeColorAttachment(
-    //   attachment: Texture | ColorTextureFormat
-    // ): Required<ColorAttachment> {
-    //   const COLOR_ATTACHMENT_DEFAULTS: Required<ColorAttachment> = {
-    //     texture: undefined!,
-    //     format: undefined!,
-    //     clearValue: [0.0, 0.0, 0.0, 0.0],
-    //     loadOp: 'clear',
-    //     storeOp: 'store'
-    //   };
-    //   if (attachment instanceof Texture) {
-    //     return {...COLOR_ATTACHMENT_DEFAULTS, texture: attachment};
-    //   }
-    //   if (typeof attachment === 'string') {
-    //     return {...COLOR_ATTACHMENT_DEFAULTS, format: attachment};
-    //   }
-    //   return {...COLOR_ATTACHMENT_DEFAULTS, ...attachment};
-    // }
-    // /** Wraps texture inside fully populated attachment object. */
-    // protected normalizeDepthStencilAttachment(
-    //   attachment: DepthStencilAttachment | Texture | DepthStencilTextureFormat
-    // ): Required<DepthStencilAttachment> {
-    //   const DEPTH_STENCIL_ATTACHMENT_DEFAULTS: Required<DepthStencilAttachment> = {
-    //     texture: undefined!,
-    //     format: undefined!,
-    //     depthClearValue: 1.0,
-    //     depthLoadOp: 'clear',
-    //     depthStoreOp: 'store',
-    //     depthReadOnly: false,
-    //     stencilClearValue: 0,
-    //     stencilLoadOp: 'clear',
-    //     stencilStoreOp: 'store',
-    //     stencilReadOnly: false
-    //   };
-    //   if (typeof attachment === 'string') {
-    //     return {...DEPTH_STENCIL_ATTACHMENT_DEFAULTS, format: attachment};
-    //   }
-    //   // @ts-expect-error attachment instanceof Texture doesn't cover Renderbuffer
-    //   if (attachment.handle || attachment instanceof Texture) {
-    //     return {...DEPTH_STENCIL_ATTACHMENT_DEFAULTS, texture: attachment as Texture};
-    //   }
-    //   return {...DEPTH_STENCIL_ATTACHMENT_DEFAULTS, ...attachment};
-    // }
     /** Auto creates any textures */
     autoCreateAttachmentTextures() {
-      this.colorAttachments = this.props.colorAttachments.map((attachment) => {
-        if (typeof attachment === "string") {
-          const texture = this.createColorTexture(attachment);
+      this.colorAttachments = this.props.colorAttachments.map((attachment2) => {
+        if (typeof attachment2 === "string") {
+          const texture = this.createColorTexture(attachment2);
           this.attachResource(texture);
-          return texture;
+          return texture.view;
         }
-        return attachment;
+        if (attachment2 instanceof Texture) {
+          return attachment2.view;
+        }
+        return attachment2;
       });
-      if (this.props.depthStencilAttachment) {
-        if (typeof this.props.depthStencilAttachment === "string") {
-          const texture = this.createDepthStencilTexture(this.props.depthStencilAttachment);
+      const attachment = this.props.depthStencilAttachment;
+      if (attachment) {
+        if (typeof attachment === "string") {
+          const texture = this.createDepthStencilTexture(attachment);
           this.attachResource(texture);
-          this.depthStencilAttachment = texture;
+          this.depthStencilAttachment = texture.view;
+        } else if (attachment instanceof Texture) {
+          this.depthStencilAttachment = attachment.view;
         } else {
-          this.depthStencilAttachment = this.props.depthStencilAttachment;
+          this.depthStencilAttachment = attachment;
         }
       }
     }
@@ -1880,8 +2025,8 @@ ${htmlLog}
             height
           });
           this.destroyAttachedResource(this.colorAttachments[i]);
-          this.colorAttachments[i] = resizedTexture;
-          this.attachResource(resizedTexture);
+          this.colorAttachments[i] = resizedTexture.view;
+          this.attachResource(resizedTexture.view);
         }
       }
       if (this.depthStencilAttachment) {
@@ -1891,41 +2036,10 @@ ${htmlLog}
           height
         });
         this.destroyAttachedResource(this.depthStencilAttachment);
-        this.depthStencilAttachment = resizedTexture;
+        this.depthStencilAttachment = resizedTexture.view;
         this.attachResource(resizedTexture);
       }
     }
-    /** Create a color attachment for WebGL *
-    protected override createColorTexture(colorAttachment: Required<ColorAttachment>): Required<ColorAttachment> {
-      return this.device._createTexture({
-        id: `${this.id}-color`,
-        data: null, // reserves texture memory, but texels are undefined
-        format,
-        // type: GL.UNSIGNED_BYTE,
-        width: this.width,
-        height: this.height,
-        // Note: Mipmapping can be disabled by texture resource when we resize the texture
-        // to a non-power-of-two dimenstion (NPOT texture) under WebGL1. To have consistant
-        // behavior we always disable mipmaps.
-        mipmaps: false,
-        // Set MIN and MAG filtering parameters so mipmaps are not used in sampling.
-        // Use LINEAR so subpixel algos like fxaa work.
-        // Set WRAP modes that support NPOT textures too.
-        sampler: {
-          minFilter: 'linear',
-          magFilter: 'linear',
-          addressModeU: 'clamp-to-edge',
-          addressModeV: 'clamp-to-edge'
-        }
-        // parameters: {
-        //   [GL.TEXTURE_MIN_FILTER]: GL.LINEAR,
-        //   [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
-        //   [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
-        //   [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
-        // }
-      });
-    }
-    */
   };
   var Framebuffer = _Framebuffer;
   __publicField(Framebuffer, "defaultProps", {
@@ -1943,18 +2057,29 @@ ${htmlLog}
     get [Symbol.toStringTag]() {
       return "RenderPipeline";
     }
-    hash = "";
     /** The merged layout */
     shaderLayout;
     /** Buffer map describing buffer interleaving etc */
     bufferLayout;
     /** The linking status of the pipeline. 'pending' if linking is asynchronous, and on production */
     linkStatus = "pending";
+    /** The hash of the pipeline */
+    hash = "";
     constructor(device, props) {
       super(device, props, _RenderPipeline.defaultProps);
       this.shaderLayout = this.props.shaderLayout;
       this.bufferLayout = this.props.bufferLayout || [];
     }
+    // DEPRECATED METHODS
+    /**
+     * Uniforms
+     * @deprecated Use uniforms buffers
+     * @note textures, samplers and uniform buffers should be set via `setBindings()`, these are not considered uniforms.
+     * @note In WebGL uniforms have a performance penalty, they are reset before each call to enable pipeline sharing.
+     */
+    setUniformsWebGL(uniforms) {
+      throw new Error("Use uniform blocks");
+    }
   };
   var RenderPipeline = _RenderPipeline;
   __publicField(RenderPipeline, "defaultProps", {
@@ -1985,41 +2110,17 @@ ${htmlLog}
     constructor(device, props) {
       super(device, props, _RenderPass.defaultProps);
     }
-    // writeTimestamp(querySet: GPUQuerySet, queryIndex: number): void;
-    // beginOcclusionQuery(queryIndex: number): void;
-    // endOcclusionQuery(): void;
-    // executeBundles(bundles: Iterable<GPURenderBundle>): void;
-    // In WebGPU the following methods are on the renderpass.
-    // luma.gl keeps them on the pipeline for now
-    /*
-      setPipeline(pipeline: RenderPipeline): void {}
-    
-      setIndexBuffer(
-        buffer: Buffer,
-        indexFormat: 'uint16' | 'uint32',
-        offset?: number,
-        size?: number
-      ): void {}
-    
-      abstract setVertexBuffer(slot: number, buffer: Buffer, offset: number): void;
-    
-      abstract setBindings(bindings: Record<string, Binding>): void;
-    
-      abstract setParameters(parameters: RenderPassParameters);
-    
-      draw(options: {
-        vertexCount?: number; // Either vertexCount or indexCount must be provided
-        indexCount?: number;  // Activates indexed drawing (call setIndexBuffer())
-        instanceCount?: number; //
-        firstVertex?: number;
-        firstIndex?: number; // requires device.features.has('indirect-first-instance')?
-        firstInstance?: number;
-        baseVertex?: number;
-      }): void {}
-    
-      drawIndirect(indirectBuffer: GPUBuffer, indirectOffset: number): void;
-      drawIndexedIndirect(indirectBuffer: GPUBuffer, indirectOffset: number): void;
-      */
+    // In WebGPU the following methods are on the renderpass instead of the renderpipeline
+    // luma.gl keeps them on the pipeline for now.
+    // TODO - Can we align WebGL implementation with WebGPU API?
+    // abstract setPipeline(pipeline: RenderPipeline): void {}
+    // abstract setIndexBuffer()
+    // abstract setVertexBuffer(slot: number, buffer: Buffer, offset: number): void;
+    // abstract setBindings(bindings: Record<string, Binding>): void;
+    // abstract setParameters(parameters: RenderPassParameters);
+    // abstract draw(options: {
+    // abstract drawIndirect(indirectBuffer: GPUBuffer, indirectOffset: number): void;
+    // abstract drawIndexedIndirect(indirectBuffer: GPUBuffer, indirectOffset: number): void;
   };
   var RenderPass = _RenderPass;
   /** Default properties for RenderPass */
@@ -2032,7 +2133,11 @@ ${htmlLog}
     clearStencil: 0,
     depthReadOnly: false,
     stencilReadOnly: false,
-    discard: false
+    discard: false,
+    occlusionQuerySet: void 0,
+    timestampQuerySet: void 0,
+    beginTimestampIndex: void 0,
+    endTimestampIndex: void 0
   });
 
   // ../core/src/adapter/resources/command-encoder.ts
@@ -2043,20 +2148,9 @@ ${htmlLog}
     constructor(device, props) {
       super(device, props, _CommandEncoder.defaultProps);
     }
-    pushDebugGroup(groupLabel) {
-    }
-    popDebugGroup() {
-    }
-    insertDebugMarker(markerLabel) {
-    }
-    // writeTimestamp(querySet: Query, queryIndex: number): void;
-    // resolveQuerySet(options: {
-    //   querySet: GPUQuerySet,
-    //   firstQuery: number,
-    //   queryCount: number,
-    //   destination: Buffer,
-    //   destinationOffset?: number;
-    // }): void;
+    // TODO - luma.gl has these on the device, should we align with WebGPU API?
+    // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
+    // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
   };
   var CommandEncoder = _CommandEncoder;
   __publicField(CommandEncoder, "defaultProps", {
@@ -2083,7 +2177,7 @@ ${htmlLog}
     const [dataType, components] = TYPE_INFO[attributeType];
     const integer = dataType === "i32" || dataType === "u32";
     const signed = dataType !== "u32";
-    const byteLength = TYPE_SIZES[dataType] * components;
+    const byteLength = TYPE_SIZES2[dataType] * components;
     const defaultVertexFormat = getCompatibleVertexFormat(dataType, components);
     return {
       dataType,
@@ -2132,56 +2226,12 @@ ${htmlLog}
     "vec3<u32>": ["u32", 3],
     "vec4<u32>": ["u32", 4]
   };
-  var TYPE_SIZES = {
+  var TYPE_SIZES2 = {
     f32: 4,
     f16: 2,
     i32: 4,
     u32: 4
-    // 'bool-webgl': 4,  
-  };
-
-  // ../core/src/adapter/type-utils/decode-data-type.ts
-  function decodeVertexType(type) {
-    const dataType = TYPE_MAP[type];
-    const bytes = getDataTypeBytes(dataType);
-    const normalized = type.includes("norm");
-    const integer = !normalized && !type.startsWith("float");
-    const signed = type.startsWith("s");
-    return {
-      dataType: TYPE_MAP[type],
-      byteLength: bytes,
-      integer,
-      signed,
-      normalized
-    };
-  }
-  function getDataTypeBytes(type) {
-    const bytes = TYPE_SIZES2[type];
-    return bytes;
-  }
-  var TYPE_MAP = {
-    uint8: "uint8",
-    sint8: "sint8",
-    unorm8: "uint8",
-    snorm8: "sint8",
-    uint16: "uint16",
-    sint16: "sint16",
-    unorm16: "uint16",
-    snorm16: "sint16",
-    float16: "float16",
-    float32: "float32",
-    uint32: "uint32",
-    sint32: "sint32"
-  };
-  var TYPE_SIZES2 = {
-    uint8: 1,
-    sint8: 1,
-    uint16: 2,
-    sint16: 2,
-    float16: 2,
-    float32: 4,
-    uint32: 4,
-    sint32: 4
+    // 'bool-webgl': 4,
   };
 
   // ../core/src/adapter/type-utils/decode-vertex-format.ts
@@ -2363,6 +2413,11 @@ ${htmlLog}
         this.maxVertexAttributes
       );
     }
+    // DEPRECATED METHODS
+    /** @deprecated Set constant attributes (WebGL only) */
+    setConstantWebGL(location, value) {
+      throw new Error("constant attributes not supported");
+    }
   };
   var VertexArray = _VertexArray;
   __publicField(VertexArray, "defaultProps", {
@@ -2386,6 +2441,22 @@ ${htmlLog}
     buffers: {}
   });
 
+  // ../core/src/adapter/resources/query-set.ts
+  var _QuerySet = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "QuerySet";
+    }
+    constructor(device, props) {
+      super(device, props, _QuerySet.defaultProps);
+    }
+  };
+  var QuerySet = _QuerySet;
+  __publicField(QuerySet, "defaultProps", {
+    ...Resource.defaultProps,
+    type: void 0,
+    count: void 0
+  });
+
   // ../core/src/utils/array-utils-flat.ts
   var arrayBuffer;
   function getScratchArrayBuffer(byteLength) {
@@ -2418,63 +2489,6 @@ ${htmlLog}
     return options.target;
   }
 
-  // ../core/src/adapter/type-utils/decode-texture-format.ts
-  var REGEX = /^(rg?b?a?)([0-9]*)([a-z]*)(-srgb)?(-webgl|-unsized)?$/;
-  function decodeTextureFormat(format) {
-    const matches = REGEX.exec(format);
-    if (matches) {
-      const [, format2, length, type, srgb, suffix] = matches;
-      if (format2) {
-        const dataType = `${type}${length}`;
-        const decodedType = decodeVertexType(dataType);
-        return {
-          format: format2,
-          components: format2.length,
-          // dataType - overwritten by decodedType
-          srgb: srgb === "-srgb",
-          unsized: suffix === "-unsized",
-          webgl: suffix === "-webgl",
-          ...decodedType
-        };
-      }
-    }
-    return decodeNonStandardFormat(format);
-  }
-  var EXCEPTIONS = {
-    // Packed 16 bit formats
-    "rgba4unorm-webgl": { format: "rgba", bpp: 2 },
-    "rgb565unorm-webgl": { format: "rgb", bpp: 2 },
-    "rgb5a1unorm-webgl": { format: "rgba", bbp: 2 },
-    // Packed 32 bit formats
-    "rgb9e5ufloat": { format: "rgb", bbp: 4 },
-    "rg11b10ufloat": { format: "rgb", bbp: 4 },
-    "rgb10a2unorm": { format: "rgba", bbp: 4 },
-    "rgb10a2unorm-webgl": { format: "rgba", bbp: 4 },
-    // Depth/stencil
-    "stencil8": { components: 1, bpp: 1, a: "stencil" },
-    "depth16unorm": { components: 1, bpp: 2, a: "depth" },
-    "depth24plus": { components: 1, bpp: 3, a: "depth" },
-    "depth32float": { components: 1, bpp: 4, a: "depth" },
-    "depth24plus-stencil8": { components: 2, bpp: 4, a: "depth-stencil" },
-    // "depth24unorm-stencil8" feature
-    "depth24unorm-stencil8": { components: 2, bpp: 4, a: "depth-stencil" },
-    // "depth32float-stencil8" feature
-    "depth32float-stencil8": { components: 2, bpp: 4, a: "depth-stencil" }
-  };
-  function decodeNonStandardFormat(format) {
-    const data = EXCEPTIONS[format];
-    if (!data) {
-      throw new Error(`Unknown format ${format}`);
-    }
-    return {
-      format: data.format || "",
-      components: data.components || data.format?.length || 1,
-      byteLength: data.bpp || 1,
-      srgb: false,
-      unsized: false
-    };
-  }
-
   // ../core/src/utils/cast.ts
   function cast(value) {
     return value;
@@ -2543,7 +2557,7 @@ ${htmlLog}
   // ../core/src/utils/load-file.ts
   var pathPrefix = "";
   async function loadImage(url, opts) {
-    return new Promise((resolve, reject) => {
+    return await new Promise((resolve, reject) => {
       try {
         const image = new Image();
         image.onload = () => resolve(image);
@@ -2633,14 +2647,6 @@ ${htmlLog}
     [import_constants.GL.STENCIL_BACK_PASS_DEPTH_PASS]: import_constants.GL.KEEP,
     // Dynamic value: We use [0, 0, 1024, 1024] as default, but usually this is updated in each frame.
     [import_constants.GL.VIEWPORT]: [0, 0, 1024, 1024],
-    // WEBGL1 PIXEL PACK/UNPACK MODES
-    [import_constants.GL.PACK_ALIGNMENT]: 4,
-    [import_constants.GL.UNPACK_ALIGNMENT]: 4,
-    [import_constants.GL.UNPACK_FLIP_Y_WEBGL]: false,
-    [import_constants.GL.UNPACK_PREMULTIPLY_ALPHA_WEBGL]: false,
-    [import_constants.GL.UNPACK_COLORSPACE_CONVERSION_WEBGL]: import_constants.GL.BROWSER_DEFAULT_WEBGL,
-    // WEBGL2 / EXTENSIONS
-    // gl1: 'OES_standard_derivatives'
     [import_constants.GL.TRANSFORM_FEEDBACK_BINDING]: null,
     [import_constants.GL.COPY_READ_BUFFER_BINDING]: null,
     [import_constants.GL.COPY_WRITE_BUFFER_BINDING]: null,
@@ -2649,6 +2655,11 @@ ${htmlLog}
     [import_constants.GL.FRAGMENT_SHADER_DERIVATIVE_HINT]: import_constants.GL.DONT_CARE,
     [import_constants.GL.READ_FRAMEBUFFER_BINDING]: null,
     [import_constants.GL.RASTERIZER_DISCARD]: false,
+    [import_constants.GL.PACK_ALIGNMENT]: 4,
+    [import_constants.GL.UNPACK_ALIGNMENT]: 4,
+    [import_constants.GL.UNPACK_FLIP_Y_WEBGL]: false,
+    [import_constants.GL.UNPACK_PREMULTIPLY_ALPHA_WEBGL]: false,
+    [import_constants.GL.UNPACK_COLORSPACE_CONVERSION_WEBGL]: import_constants.GL.BROWSER_DEFAULT_WEBGL,
     [import_constants.GL.PACK_ROW_LENGTH]: 0,
     [import_constants.GL.PACK_SKIP_PIXELS]: 0,
     [import_constants.GL.PACK_SKIP_ROWS]: 0,
@@ -2742,14 +2753,29 @@ ${htmlLog}
     [import_constants.GL.STENCIL_BACK_PASS_DEPTH_FAIL]: "stencilOpBack",
     [import_constants.GL.STENCIL_BACK_PASS_DEPTH_PASS]: "stencilOpBack",
     [import_constants.GL.VIEWPORT]: (gl, value) => gl.viewport(...value),
-    // WEBGL1 PIXEL PACK/UNPACK MODES
+    // WEBGL2 EXTENSIONS
+    // EXT_depth_clamp https://registry.khronos.org/webgl/extensions/EXT_depth_clamp/
+    [import_constants.GL.DEPTH_CLAMP_EXT]: enable,
+    // WEBGL_provoking_vertex https://registry.khronos.org/webgl/extensions/WEBGL_provoking_vertex/
+    // [GL.PROVOKING_VERTEX_WEBL]: TODO - extension function needed
+    // WEBGL_polygon_mode https://registry.khronos.org/webgl/extensions/WEBGL_polygon_mode/
+    // POLYGON_MODE_WEBGL  TODO - extension function needed
+    [import_constants.GL.POLYGON_OFFSET_LINE_WEBGL]: enable,
+    // WEBGL_clip_cull_distance https://registry.khronos.org/webgl/extensions/WEBGL_clip_cull_distance/
+    [import_constants.GL.CLIP_DISTANCE0_WEBGL]: enable,
+    [import_constants.GL.CLIP_DISTANCE1_WEBGL]: enable,
+    [import_constants.GL.CLIP_DISTANCE2_WEBGL]: enable,
+    [import_constants.GL.CLIP_DISTANCE3_WEBGL]: enable,
+    [import_constants.GL.CLIP_DISTANCE4_WEBGL]: enable,
+    [import_constants.GL.CLIP_DISTANCE5_WEBGL]: enable,
+    [import_constants.GL.CLIP_DISTANCE6_WEBGL]: enable,
+    [import_constants.GL.CLIP_DISTANCE7_WEBGL]: enable,
+    // PIXEL PACK/UNPACK MODES
     [import_constants.GL.PACK_ALIGNMENT]: pixelStorei,
     [import_constants.GL.UNPACK_ALIGNMENT]: pixelStorei,
     [import_constants.GL.UNPACK_FLIP_Y_WEBGL]: pixelStorei,
     [import_constants.GL.UNPACK_PREMULTIPLY_ALPHA_WEBGL]: pixelStorei,
     [import_constants.GL.UNPACK_COLORSPACE_CONVERSION_WEBGL]: pixelStorei,
-    // WEBGL2 PIXEL PACK/UNPACK MODES
-    // RASTERIZER_DISCARD ...
     [import_constants.GL.PACK_ROW_LENGTH]: pixelStorei,
     [import_constants.GL.PACK_SKIP_PIXELS]: pixelStorei,
     [import_constants.GL.PACK_SKIP_ROWS]: pixelStorei,
@@ -3283,7 +3309,7 @@ ${htmlLog}
     };
   }
 
-  // src/context/context/create-browser-context.ts
+  // src/context/helpers/create-browser-context.ts
   var DEFAULT_CONTEXT_PROPS = {
     powerPreference: "high-performance",
     // After all, most apps are using WebGL for performance reasons
@@ -3320,10 +3346,21 @@ ${htmlLog}
 
   // src/adapter/device-helpers/webgl-device-info.ts
   var import_constants2 = __toESM(require_constants(), 1);
-  function getDeviceInfo(gl) {
+
+  // src/context/helpers/webgl-extensions.ts
+  function getWebGLExtension(gl, name2, extensions) {
+    if (extensions[name2] === void 0) {
+      extensions[name2] = gl.getExtension(name2) || null;
+    }
+    return extensions[name2];
+  }
+
+  // src/adapter/device-helpers/webgl-device-info.ts
+  function getDeviceInfo(gl, extensions) {
     const vendorMasked = gl.getParameter(import_constants2.GL.VENDOR);
     const rendererMasked = gl.getParameter(import_constants2.GL.RENDERER);
-    const ext = gl.getExtension("WEBGL_debug_renderer_info");
+    getWebGLExtension(gl, "WEBGL_debug_renderer_info", extensions);
+    const ext = extensions.WEBGL_debug_renderer_info;
     const vendorUnmasked = gl.getParameter(ext ? ext.UNMASKED_VENDOR_WEBGL : import_constants2.GL.VENDOR);
     const rendererUnmasked = gl.getParameter(ext ? ext.UNMASKED_RENDERER_WEBGL : import_constants2.GL.RENDERER);
     const vendor = vendorUnmasked || vendorMasked;
@@ -3432,6 +3469,14 @@ ${htmlLog}
   var texture_compression_etc1_webgl = "texture-compression-etc1-webgl";
   var texture_compression_pvrtc_webgl = "texture-compression-pvrtc-webgl";
   var texture_compression_atc_webgl = "texture-compression-atc-webgl";
+  var float32_renderable = "float32-renderable-webgl";
+  var float16_renderable = "float16-renderable-webgl";
+  var rgb9e5ufloat_renderable = "rgb9e5ufloat_renderable-webgl";
+  var snorm8_renderable = "snorm8-renderable-webgl";
+  var norm16_renderable = "norm16-renderable-webgl";
+  var snorm16_renderable = "snorm16-renderable-webgl";
+  var float32_filterable = "float32-filterable";
+  var float16_filterable = "float16-filterable-webgl";
   var X_S3TC = "WEBGL_compressed_texture_s3tc";
   var X_S3TC_SRGB = "WEBGL_compressed_texture_s3tc_srgb";
   var X_RGTC = "EXT_texture_compression_rgtc";
@@ -3441,15 +3486,18 @@ ${htmlLog}
   var X_ETC1 = "WEBGL_compressed_texture_etc1";
   var X_PVRTC = "WEBGL_compressed_texture_pvrtc";
   var X_ATC = "WEBGL_compressed_texture_atc";
-  var EXT_TEXTURE_NORM16 = "EXT_texture_norm16";
-  var EXT_FLOAT_RENDER_WEBGL2 = "EXT_color_buffer_float";
-  var TEXTURE_FEATURE_CHECKS = {
+  var EXT_texture_norm16 = "EXT_texture_norm16";
+  var EXT_render_snorm = "EXT_render_snorm";
+  var EXT_color_buffer_float = "EXT_color_buffer_float";
+  var TEXTURE_FEATURES = {
     "float32-renderable-webgl": ["EXT_color_buffer_float"],
-    // [false, 'EXT_color_buffer_float'],
     "float16-renderable-webgl": ["EXT_color_buffer_half_float"],
-    "norm16-renderable-webgl": [EXT_TEXTURE_NORM16],
-    "float32-filterable-linear-webgl": ["OES_texture_float_linear"],
-    "float16-filterable-linear-webgl": ["OES_texture_half_float_linear"],
+    "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],
@@ -3463,13 +3511,12 @@ ${htmlLog}
     "texture-compression-pvrtc-webgl": [X_PVRTC],
     "texture-compression-atc-webgl": [X_ATC]
   };
-  function checkTextureFeature(gl, feature) {
-    const extensions = TEXTURE_FEATURE_CHECKS[feature] || [];
-    return extensions.every((extension) => gl.getExtension(extension));
+  function isTextureFeature(feature) {
+    return feature in TEXTURE_FEATURES;
   }
-  function getTextureFeatures(gl) {
-    const textureFeatures = Object.keys(TEXTURE_FEATURE_CHECKS);
-    return textureFeatures.filter((feature) => checkTextureFeature(gl, feature));
+  function checkTextureFeature(gl, feature, extensions) {
+    const textureExtensions = TEXTURE_FEATURES[feature] || [];
+    return textureExtensions.every((extension) => getWebGLExtension(gl, extension, extensions));
   }
   var TEXTURE_FORMATS = {
     // Unsized formats that leave the precision up to the driver.
@@ -3495,19 +3542,19 @@ ${htmlLog}
     // 'rgba8unorm-srgb-unsized': {gl: GL.SRGB_ALPHA_EXT, b: 4, c: 2, bpp: 4, gl1Ext: SRGB},
     // 8-bit formats
     "r8unorm": { gl: import_constants4.GL.R8, b: 1, c: 1, renderbuffer: true },
-    "r8snorm": { gl: import_constants4.GL.R8_SNORM, b: 1, c: 1 },
+    "r8snorm": { gl: import_constants4.GL.R8_SNORM, b: 1, c: 1, render: snorm8_renderable },
     "r8uint": { gl: import_constants4.GL.R8UI, b: 1, c: 1, renderbuffer: true },
     "r8sint": { gl: import_constants4.GL.R8I, b: 1, c: 1, renderbuffer: true },
     // 16-bit formats
     "rg8unorm": { gl: import_constants4.GL.RG8, b: 2, c: 2, renderbuffer: true },
-    "rg8snorm": { gl: import_constants4.GL.RG8_SNORM, b: 2, c: 2 },
+    "rg8snorm": { gl: import_constants4.GL.RG8_SNORM, b: 2, c: 2, render: snorm8_renderable },
     "rg8uint": { gl: import_constants4.GL.RG8UI, b: 2, c: 2, renderbuffer: true },
     "rg8sint": { gl: import_constants4.GL.RG8I, b: 2, c: 2, renderbuffer: true },
     "r16uint": { gl: import_constants4.GL.R16UI, b: 2, c: 1, renderbuffer: true },
     "r16sint": { gl: import_constants4.GL.R16I, b: 2, c: 1, renderbuffer: true },
-    "r16float": { gl: import_constants4.GL.R16F, b: 2, c: 1, render: "float16-renderable-webgl", filter: "float16-filterable-linear-webgl", renderbuffer: true },
-    "r16unorm-webgl": { gl: import_constants4.GL.R16_EXT, b: 2, c: 1, f: "norm16-renderable-webgl", renderbuffer: true, x: EXT_TEXTURE_NORM16 },
-    "r16snorm-webgl": { gl: import_constants4.GL.R16_SNORM_EXT, b: 2, c: 1, f: "norm16-renderable-webgl", x: EXT_TEXTURE_NORM16 },
+    "r16float": { gl: import_constants4.GL.R16F, b: 2, c: 1, render: float16_renderable, filter: "float16-filterable-webgl", renderbuffer: true },
+    "r16unorm-webgl": { gl: import_constants4.GL.R16_EXT, b: 2, c: 1, f: norm16_renderable, renderbuffer: true },
+    "r16snorm-webgl": { gl: import_constants4.GL.R16_SNORM_EXT, b: 2, c: 1, f: snorm16_renderable },
     // Packed 16-bit formats
     "rgba4unorm-webgl": { gl: import_constants4.GL.RGBA4, b: 2, c: 4, wgpu: false, renderbuffer: true },
     "rgb565unorm-webgl": { gl: import_constants4.GL.RGB565, b: 2, c: 4, wgpu: false, renderbuffer: true },
@@ -3518,7 +3565,7 @@ ${htmlLog}
     // 32-bit formats  
     "rgba8unorm": { gl: import_constants4.GL.RGBA8, b: 4, c: 2, bpp: 4 },
     "rgba8unorm-srgb": { gl: import_constants4.GL.SRGB8_ALPHA8, b: 4, c: 4, bpp: 4 },
-    "rgba8snorm": { gl: import_constants4.GL.RGBA8_SNORM, b: 4, c: 4 },
+    "rgba8snorm": { gl: import_constants4.GL.RGBA8_SNORM, b: 4, c: 4, render: snorm8_renderable },
     "rgba8uint": { gl: import_constants4.GL.RGBA8UI, b: 4, c: 4, bpp: 4 },
     "rgba8sint": { gl: import_constants4.GL.RGBA8I, b: 4, c: 4, bpp: 4 },
     // reverse colors, webgpu only
@@ -3527,42 +3574,45 @@ ${htmlLog}
     "rg16uint": { gl: import_constants4.GL.RG16UI, b: 4, c: 1, bpp: 4 },
     "rg16sint": { gl: import_constants4.GL.RG16I, b: 4, c: 2, bpp: 4 },
     // When using a WebGL 2 context and the EXT_color_buffer_float WebGL2 extension
-    "rg16float": { gl: import_constants4.GL.RG16F, bpp: 4, b: 4, c: 2, render: "float16-renderable-webgl", filter: "float16-filterable-linear-webgl", renderbuffer: true },
-    "rg16unorm-webgl": { gl: import_constants4.GL.RG16_EXT, b: 2, c: 2, f: "norm16-renderable-webgl", x: EXT_TEXTURE_NORM16 },
-    "rg16snorm-webgl": { gl: import_constants4.GL.RG16_SNORM_EXT, b: 2, c: 2, f: "norm16-renderable-webgl", x: EXT_TEXTURE_NORM16 },
+    "rg16float": { gl: import_constants4.GL.RG16F, bpp: 4, b: 4, c: 2, render: float16_renderable, filter: float16_filterable, renderbuffer: true },
+    "rg16unorm-webgl": { gl: import_constants4.GL.RG16_EXT, b: 2, c: 2, render: norm16_renderable },
+    "rg16snorm-webgl": { gl: import_constants4.GL.RG16_SNORM_EXT, b: 2, c: 2, render: snorm16_renderable },
     "r32uint": { gl: import_constants4.GL.R32UI, b: 4, c: 1, bpp: 4, renderbuffer: true },
     "r32sint": { gl: import_constants4.GL.R32I, b: 4, c: 1, bpp: 4, renderbuffer: true },
-    "r32float": { gl: import_constants4.GL.R32F, bpp: 4, b: 4, c: 1, render: "float32-renderable-webgl", filter: "float32-filterable-linear-webgl" },
+    "r32float": { gl: import_constants4.GL.R32F, bpp: 4, b: 4, c: 1, render: float32_renderable, filter: float32_filterable },
     // Packed 32-bit formats
-    "rgb9e5ufloat": { gl: import_constants4.GL.RGB9_E5, b: 4, c: 3, p: 1, render: "float16-renderable-webgl", filter: "float16-filterable-linear-webgl" },
-    "rg11b10ufloat": { gl: import_constants4.GL.R11F_G11F_B10F, b: 4, c: 3, p: 1, render: "float32-renderable-webgl", renderbuffer: true },
+    "rgb9e5ufloat": { gl: import_constants4.GL.RGB9_E5, b: 4, c: 3, p: 1, render: rgb9e5ufloat_renderable },
+    // , filter: true},
+    "rg11b10ufloat": { gl: import_constants4.GL.R11F_G11F_B10F, b: 4, c: 3, p: 1, render: float32_renderable, renderbuffer: true },
     "rgb10a2unorm": { gl: import_constants4.GL.RGB10_A2, b: 4, c: 4, p: 1, renderbuffer: true },
-    "rgb10a2unorm-webgl": { b: 4, c: 4, gl: import_constants4.GL.RGB10_A2UI, p: 1, wgpu: false, bpp: 4, renderbuffer: true },
+    "rgb10a2uint-webgl": { b: 4, c: 4, gl: import_constants4.GL.RGB10_A2UI, p: 1, wgpu: false, bpp: 4, renderbuffer: true },
     // 48-bit formats
-    "rgb16unorm-webgl": { gl: import_constants4.GL.RGB16_EXT, b: 2, c: 3, f: "norm16-renderable-webgl", x: EXT_TEXTURE_NORM16 },
-    "rgb16snorm-webgl": { gl: import_constants4.GL.RGB16_SNORM_EXT, b: 2, c: 3, f: "norm16-renderable-webgl", x: EXT_TEXTURE_NORM16 },
+    "rgb16unorm-webgl": { gl: import_constants4.GL.RGB16_EXT, b: 2, c: 3, f: norm16_renderable },
+    // rgb not renderable
+    "rgb16snorm-webgl": { gl: import_constants4.GL.RGB16_SNORM_EXT, b: 2, c: 3, f: norm16_renderable },
+    // rgb not renderable
     // 64-bit formats
     "rg32uint": { gl: import_constants4.GL.RG32UI, b: 8, c: 2, renderbuffer: true },
     "rg32sint": { gl: import_constants4.GL.RG32I, b: 8, c: 2, renderbuffer: true },
-    "rg32float": { gl: import_constants4.GL.RG32F, b: 8, c: 2, render: "float32-renderable-webgl", filter: "float32-filterable-linear-webgl", renderbuffer: true },
+    "rg32float": { gl: import_constants4.GL.RG32F, b: 8, c: 2, render: float32_renderable, filter: float32_filterable, renderbuffer: true },
     "rgba16uint": { gl: import_constants4.GL.RGBA16UI, b: 8, c: 4, renderbuffer: true },
     "rgba16sint": { gl: import_constants4.GL.RGBA16I, b: 8, c: 4, renderbuffer: true },
-    "rgba16float": { gl: import_constants4.GL.RGBA16F, b: 8, c: 4, render: "float16-renderable-webgl", filter: "float16-filterable-linear-webgl" },
-    "rgba16unorm-webgl": { gl: import_constants4.GL.RGBA16_EXT, b: 2, c: 4, f: "norm16-renderable-webgl", renderbuffer: true, x: EXT_TEXTURE_NORM16 },
-    "rgba16snorm-webgl": { gl: import_constants4.GL.RGBA16_SNORM_EXT, b: 2, c: 4, f: "norm16-renderable-webgl", x: EXT_TEXTURE_NORM16 },
+    "rgba16float": { gl: import_constants4.GL.RGBA16F, b: 8, c: 4, render: float16_renderable, filter: float16_filterable },
+    "rgba16unorm-webgl": { gl: import_constants4.GL.RGBA16_EXT, b: 2, c: 4, render: norm16_renderable, renderbuffer: true },
+    "rgba16snorm-webgl": { gl: import_constants4.GL.RGBA16_SNORM_EXT, b: 2, c: 4, render: snorm16_renderable },
     // 96-bit formats (deprecated!)
     "rgb32float-webgl": {
       gl: import_constants4.GL.RGB32F,
-      render: "float32-renderable-webgl",
-      filter: "float32-filterable-linear-webgl",
-      gl2ext: EXT_FLOAT_RENDER_WEBGL2,
+      render: float32_renderable,
+      filter: float32_filterable,
+      gl2ext: EXT_color_buffer_float,
       dataFormat: import_constants4.GL.RGB,
       types: [import_constants4.GL.FLOAT]
     },
     // 128-bit formats
     "rgba32uint": { gl: import_constants4.GL.RGBA32UI, b: 16, c: 4, renderbuffer: true },
     "rgba32sint": { gl: import_constants4.GL.RGBA32I, b: 16, c: 4, renderbuffer: true },
-    "rgba32float": { gl: import_constants4.GL.RGBA32F, b: 16, c: 4, render: "float32-renderable-webgl", filter: "float32-filterable-linear-webgl", renderbuffer: true },
+    "rgba32float": { gl: import_constants4.GL.RGBA32F, b: 16, c: 4, render: float32_renderable, filter: float32_filterable, renderbuffer: true },
     // Depth and stencil formats
     "stencil8": { gl: import_constants4.GL.STENCIL_INDEX8, b: 1, c: 1, attachment: import_constants4.GL.STENCIL_ATTACHMENT, renderbuffer: true },
     // 8 stencil bits
@@ -3671,7 +3721,7 @@ ${htmlLog}
     [import_constants4.GL.BYTE]: 1,
     [import_constants4.GL.UNSIGNED_BYTE]: 1
   };
-  function isTextureFormatSupported(gl, formatOrGL) {
+  function isTextureFormatSupported(gl, formatOrGL, extensions) {
     const format = convertGLToTextureFormat(formatOrGL);
     const info = TEXTURE_FORMATS[format];
     if (!info) {
@@ -3682,12 +3732,12 @@ ${htmlLog}
     }
     const extension = info.x || info.gl2ext;
     if (extension) {
-      return Boolean(gl.getExtension(extension));
+      return Boolean(getWebGLExtension(gl, extension, extensions));
     }
     return true;
   }
-  function isRenderbufferFormatSupported(gl, format) {
-    return isTextureFormatSupported(gl, format) && TEXTURE_FORMATS[format]?.renderbuffer;
+  function isRenderbufferFormatSupported(gl, format, extensions) {
+    return isTextureFormatSupported(gl, format, extensions) && TEXTURE_FORMATS[format]?.renderbuffer;
   }
   function convertGLToTextureFormat(format) {
     if (typeof format === "string") {
@@ -3707,9 +3757,9 @@ ${htmlLog}
     }
     return webglFormat;
   }
-  function isTextureFormatFilterable(gl, formatOrGL) {
+  function isTextureFormatFilterable(gl, formatOrGL, extensions) {
     const format = convertGLToTextureFormat(formatOrGL);
-    if (!isTextureFormatSupported(gl, format)) {
+    if (!isTextureFormatSupported(gl, format, extensions)) {
       return false;
     }
     try {
@@ -3721,16 +3771,16 @@ ${htmlLog}
       return false;
     }
     if (format.endsWith("32float")) {
-      return Boolean(gl.getExtension("OES_texture_float_linear"));
+      return Boolean(getWebGLExtension(gl, "OES_texture_float_linear, extensions", extensions));
     }
     if (format.endsWith("16float")) {
-      return Boolean(gl.getExtension("OES_texture_half_float_linear"));
+      return Boolean(getWebGLExtension(gl, "OES_texture_half_float_linear, extensions", extensions));
     }
     return true;
   }
-  function isTextureFormatRenderable(gl, formatOrGL) {
+  function isTextureFormatRenderable(gl, formatOrGL, extensions) {
     const format = convertGLToTextureFormat(formatOrGL);
-    if (!isTextureFormatSupported(gl, format)) {
+    if (!isTextureFormatSupported(gl, format, extensions)) {
       return false;
     }
     if (typeof format === "number") {
@@ -3789,183 +3839,177 @@ ${htmlLog}
   }
 
   // src/adapter/device-helpers/webgl-device-features.ts
-  function getDeviceFeatures(gl) {
-    const features = getWebGLFeatures(gl);
-    for (const textureFeature of getTextureFeatures(gl)) {
-      features.add(textureFeature);
+  var WEBGL_FEATURES = {
+    // optional WebGPU features
+    "depth-clip-control": "EXT_depth_clamp",
+    // TODO these seem subtly different
+    // 'timestamp-query' // GPUQueryType "timestamp-query"
+    // "indirect-first-instance"
+    // Textures are handled by getTextureFeatures()
+    // 'depth24unorm-stencil8' // GPUTextureFormat 'depth24unorm-stencil8'
+    // 'depth32float-stencil8' // GPUTextureFormat 'depth32float-stencil8'
+    // optional WebGL features
+    "timer-query-webgl": "EXT_disjoint_timer_query_webgl2",
+    "compilation-status-async-webgl": "KHR_parallel_shader_compile",
+    "polygon-mode-webgl": "WEBGL_polygon_mode",
+    "provoking-vertex-webgl": "WEBGL_provoking_vertex",
+    "shader-clip-cull-distance-webgl": "WEBGL_clip_cull_distance",
+    "shader-noperspective-interpolation-webgl": "NV_shader_noperspective_interpolation",
+    "shader-conservative-depth-webgl": "EXT_conservative_depth"
+    // Textures are handled by getTextureFeatures()
+  };
+  var WebGLDeviceFeatures = class extends DeviceFeatures {
+    gl;
+    extensions;
+    testedFeatures = /* @__PURE__ */ new Set();
+    constructor(gl, extensions) {
+      super();
+      this.gl = gl;
+      this.extensions = extensions;
+      getWebGLExtension(gl, "EXT_color_buffer_float", extensions);
     }
-    return features;
-  }
-  function getWebGLFeatures(gl) {
-    gl.getExtension("EXT_color_buffer_float");
-    const features = /* @__PURE__ */ new Set();
-    for (const feature of Object.keys(WEBGL_FEATURES)) {
-      if (isFeatureSupported(gl, feature)) {
-        features.add(feature);
+    *[Symbol.iterator]() {
+      for (const feature of Object.keys(WEBGL_FEATURES)) {
+        if (this.has(feature)) {
+          yield feature;
+        }
+      }
+      for (const feature of Object.keys(TEXTURE_FEATURES)) {
+        if (this.has(feature)) {
+          yield feature;
+        }
       }
+      return [];
+    }
+    has(feature) {
+      if (!this.testedFeatures.has(feature)) {
+        this.testedFeatures.add(feature);
+        if (isTextureFeature(feature) && checkTextureFeature(this.gl, feature, this.extensions)) {
+          this.features.add(feature);
+        }
+        if (this.getWebGLFeature(feature)) {
+          this.features.add(feature);
+        }
+      }
+      return this.features.has(feature);
+    }
+    /** Extract all WebGL features */
+    getWebGLFeature(feature) {
+      const featureInfo = WEBGL_FEATURES[feature];
+      const isSupported = typeof featureInfo === "string" ? Boolean(getWebGLExtension(this.gl, featureInfo, this.extensions)) : Boolean(featureInfo);
+      return isSupported;
     }
-    return features;
-  }
-  function isFeatureSupported(gl, feature) {
-    const featureInfo = WEBGL_FEATURES[feature];
-    return typeof featureInfo === "string" ? Boolean(gl.getExtension(featureInfo)) : Boolean(featureInfo);
-  }
-  var WEBGL_FEATURES = {
-    webgl: true,
-    glsl: true,
-    "uniforms-webgl": true,
-    "transform-feedback-webgl": true,
-    "constant-attributes-webgl": true,
-    "timer-query-webgl": "EXT_disjoint_timer_query_webgl2",
-    "shader-status-async-webgl": "KHR_parallel_shader_compile"
-    // Textures are handled by getTextureFeatures()
   };
 
   // src/adapter/device-helpers/webgl-device-limits.ts
   var import_constants5 = __toESM(require_constants(), 1);
-  function getDeviceLimits(gl) {
-    return {
-      maxTextureDimension1D: 0,
-      // WebGL does not support 1D textures
-      maxTextureDimension2D: gl.getParameter(import_constants5.GL.MAX_TEXTURE_SIZE),
-      maxTextureDimension3D: gl.getParameter(import_constants5.GL.MAX_3D_TEXTURE_SIZE),
-      maxTextureArrayLayers: gl.getParameter(import_constants5.GL.MAX_ARRAY_TEXTURE_LAYERS),
-      maxBindGroups: 1,
-      // TBD - if we emulate bind groups we could support any number...
-      maxDynamicUniformBuffersPerPipelineLayout: 0,
-      // TBD
-      maxDynamicStorageBuffersPerPipelineLayout: 0,
-      // TBD
-      maxSampledTexturesPerShaderStage: gl.getParameter(import_constants5.GL.MAX_VERTEX_TEXTURE_IMAGE_UNITS),
-      // TBD
-      maxSamplersPerShaderStage: gl.getParameter(import_constants5.GL.MAX_COMBINED_TEXTURE_IMAGE_UNITS),
-      maxStorageBuffersPerShaderStage: 0,
-      // TBD
-      maxStorageTexturesPerShaderStage: 0,
-      // TBD
-      maxUniformBuffersPerShaderStage: gl.getParameter(import_constants5.GL.MAX_UNIFORM_BUFFER_BINDINGS),
-      maxUniformBufferBindingSize: gl.getParameter(import_constants5.GL.MAX_UNIFORM_BLOCK_SIZE),
-      maxStorageBufferBindingSize: 0,
-      minUniformBufferOffsetAlignment: gl.getParameter(import_constants5.GL.UNIFORM_BUFFER_OFFSET_ALIGNMENT),
-      minStorageBufferOffsetAlignment: 0,
-      // TBD
-      maxVertexBuffers: 0,
-      maxVertexAttributes: gl.getParameter(import_constants5.GL.MAX_VERTEX_ATTRIBS),
-      maxVertexBufferArrayStride: 2048,
-      // TBD, this is just the default value from WebGPU
-      maxInterStageShaderComponents: gl.getParameter(import_constants5.GL.MAX_VARYING_COMPONENTS),
-      maxComputeWorkgroupStorageSize: 0,
-      // WebGL does not support compute shaders
-      maxComputeInvocationsPerWorkgroup: 0,
-      // WebGL does not support compute shaders
-      maxComputeWorkgroupSizeX: 0,
-      // WebGL does not support compute shaders
-      maxComputeWorkgroupSizeY: 0,
-      // WebGL does not support compute shaders
-      maxComputeWorkgroupSizeZ: 0,
-      // WebGL does not support compute shaders
-      maxComputeWorkgroupsPerDimension: 0
-      // WebGL does not support compute shaders
-    };
-  }
-  function getWebGLLimits(gl) {
-    function get(pname) {
-      return gl.getParameter(pname);
+  var WebGLDeviceLimits = class extends DeviceLimits {
+    get maxTextureDimension1D() {
+      return 0;
     }
-    function get2(pname, defaultValue) {
-      return gl.getParameter(pname) || defaultValue;
+    // WebGL does not support 1D textures
+    get maxTextureDimension2D() {
+      return this.getParameter(import_constants5.GL.MAX_TEXTURE_SIZE);
     }
-    return {
-      [import_constants5.GL.ALIASED_LINE_WIDTH_RANGE]: get(import_constants5.GL.ALIASED_LINE_WIDTH_RANGE),
-      [import_constants5.GL.ALIASED_POINT_SIZE_RANGE]: get(import_constants5.GL.ALIASED_POINT_SIZE_RANGE),
-      [import_constants5.GL.MAX_TEXTURE_SIZE]: get(import_constants5.GL.MAX_TEXTURE_SIZE),
-      [import_constants5.GL.MAX_CUBE_MAP_TEXTURE_SIZE]: get(import_constants5.GL.MAX_CUBE_MAP_TEXTURE_SIZE),
-      // GLint
-      [import_constants5.GL.MAX_TEXTURE_IMAGE_UNITS]: get(import_constants5.GL.MAX_TEXTURE_IMAGE_UNITS),
-      // GLint
-      [import_constants5.GL.MAX_COMBINED_TEXTURE_IMAGE_UNITS]: get(import_constants5.GL.MAX_COMBINED_TEXTURE_IMAGE_UNITS),
-      // GLint
-      [import_constants5.GL.MAX_VERTEX_TEXTURE_IMAGE_UNITS]: get(import_constants5.GL.MAX_VERTEX_TEXTURE_IMAGE_UNITS),
-      // GLint
-      [import_constants5.GL.MAX_RENDERBUFFER_SIZE]: get(import_constants5.GL.MAX_RENDERBUFFER_SIZE),
-      // GLint
-      [import_constants5.GL.MAX_VARYING_VECTORS]: get(import_constants5.GL.MAX_VARYING_VECTORS),
-      // GLint
-      [import_constants5.GL.MAX_VERTEX_ATTRIBS]: get(import_constants5.GL.MAX_VERTEX_ATTRIBS),
-      // GLint
-      [import_constants5.GL.MAX_VERTEX_UNIFORM_VECTORS]: get(import_constants5.GL.MAX_VERTEX_UNIFORM_VECTORS),
-      // GLint
-      [import_constants5.GL.MAX_FRAGMENT_UNIFORM_VECTORS]: get(import_constants5.GL.MAX_FRAGMENT_UNIFORM_VECTORS),
-      // GLint
-      [import_constants5.GL.MAX_VIEWPORT_DIMS]: get(import_constants5.GL.MAX_VIEWPORT_DIMS),
-      // Extensions
-      [import_constants5.GL.MAX_TEXTURE_MAX_ANISOTROPY_EXT]: get(import_constants5.GL.MAX_TEXTURE_MAX_ANISOTROPY_EXT),
-      // getMaxAnistropy(),
-      // WebGL2 Limits
-      [import_constants5.GL.MAX_3D_TEXTURE_SIZE]: get2(import_constants5.GL.MAX_3D_TEXTURE_SIZE),
-      //  GLint
-      [import_constants5.GL.MAX_ARRAY_TEXTURE_LAYERS]: get2(import_constants5.GL.MAX_ARRAY_TEXTURE_LAYERS),
-      // GLint
-      // [GL.MAX_CLIENT_WAIT_TIMEOUT_WEBGL]: get2(GL.MAX_CLIENT_WAIT_TIMEOUT_WEBGL), //  GLint64
-      [import_constants5.GL.MAX_COLOR_ATTACHMENTS]: get2(import_constants5.GL.MAX_COLOR_ATTACHMENTS),
-      //  GLint
-      [import_constants5.GL.MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTS]: get2(
-        import_constants5.GL.MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTS
-      ),
-      // GLint64
-      [import_constants5.GL.MAX_COMBINED_UNIFORM_BLOCKS]: get2(import_constants5.GL.MAX_COMBINED_UNIFORM_BLOCKS),
-      //  GLint
-      [import_constants5.GL.MAX_COMBINED_VERTEX_UNIFORM_COMPONENTS]: get2(import_constants5.GL.MAX_COMBINED_VERTEX_UNIFORM_COMPONENTS),
-      // GLint64
-      [import_constants5.GL.MAX_DRAW_BUFFERS]: get2(import_constants5.GL.MAX_DRAW_BUFFERS),
-      // GLint
-      [import_constants5.GL.MAX_ELEMENT_INDEX]: get2(import_constants5.GL.MAX_ELEMENT_INDEX),
-      //  GLint64
-      [import_constants5.GL.MAX_ELEMENTS_INDICES]: get2(import_constants5.GL.MAX_ELEMENTS_INDICES),
-      // GLint
-      [import_constants5.GL.MAX_ELEMENTS_VERTICES]: get2(import_constants5.GL.MAX_ELEMENTS_VERTICES),
-      //  GLint
-      [import_constants5.GL.MAX_FRAGMENT_INPUT_COMPONENTS]: get2(import_constants5.GL.MAX_FRAGMENT_INPUT_COMPONENTS),
-      //  GLint
-      [import_constants5.GL.MAX_FRAGMENT_UNIFORM_BLOCKS]: get2(import_constants5.GL.MAX_FRAGMENT_UNIFORM_BLOCKS),
-      //  GLint
-      [import_constants5.GL.MAX_FRAGMENT_UNIFORM_COMPONENTS]: get2(import_constants5.GL.MAX_FRAGMENT_UNIFORM_COMPONENTS),
-      //  GLint
-      [import_constants5.GL.MAX_SAMPLES]: get2(import_constants5.GL.MAX_SAMPLES),
-      //  GLint
-      // [GL.MAX_SERVER_WAIT_TIMEOUT]: get2(GL.MAX_SERVER_WAIT_TIMEOUT), //  GLint64
-      [import_constants5.GL.MAX_TEXTURE_LOD_BIAS]: get2(import_constants5.GL.MAX_TEXTURE_LOD_BIAS),
-      // GLfloat
-      [import_constants5.GL.MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS]: get2(
-        import_constants5.GL.MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS
-      ),
-      //  GLint
-      [import_constants5.GL.MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS]: get2(import_constants5.GL.MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS),
-      //  GLint
-      [import_constants5.GL.MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTS]: get2(
-        import_constants5.GL.MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTS
-      ),
-      // GLint
-      [import_constants5.GL.MAX_UNIFORM_BLOCK_SIZE]: get2(import_constants5.GL.MAX_UNIFORM_BLOCK_SIZE),
-      // GLint64
-      [import_constants5.GL.MAX_UNIFORM_BUFFER_BINDINGS]: get2(import_constants5.GL.MAX_UNIFORM_BUFFER_BINDINGS),
-      //  GLint
-      [import_constants5.GL.MAX_VARYING_COMPONENTS]: get2(import_constants5.GL.MAX_VARYING_COMPONENTS),
-      // GLint
-      [import_constants5.GL.MAX_VERTEX_OUTPUT_COMPONENTS]: get2(import_constants5.GL.MAX_VERTEX_OUTPUT_COMPONENTS),
-      // GLint
-      [import_constants5.GL.MAX_VERTEX_UNIFORM_BLOCKS]: get2(import_constants5.GL.MAX_VERTEX_UNIFORM_BLOCKS),
-      //  GLint
-      [import_constants5.GL.MAX_VERTEX_UNIFORM_COMPONENTS]: get2(import_constants5.GL.MAX_VERTEX_UNIFORM_COMPONENTS),
-      //  GLint
-      [import_constants5.GL.MIN_PROGRAM_TEXEL_OFFSET]: get2(import_constants5.GL.MIN_PROGRAM_TEXEL_OFFSET),
-      // GLint
-      [import_constants5.GL.MAX_PROGRAM_TEXEL_OFFSET]: get2(import_constants5.GL.MAX_PROGRAM_TEXEL_OFFSET),
-      // GLint
-      [import_constants5.GL.UNIFORM_BUFFER_OFFSET_ALIGNMENT]: get2(import_constants5.GL.UNIFORM_BUFFER_OFFSET_ALIGNMENT)
-      // GLint
-    };
-  }
+    get maxTextureDimension3D() {
+      return this.getParameter(import_constants5.GL.MAX_3D_TEXTURE_SIZE);
+    }
+    get maxTextureArrayLayers() {
+      return this.getParameter(import_constants5.GL.MAX_ARRAY_TEXTURE_LAYERS);
+    }
+    get maxBindGroups() {
+      return 0;
+    }
+    get maxDynamicUniformBuffersPerPipelineLayout() {
+      return 0;
+    }
+    // TBD
+    get maxDynamicStorageBuffersPerPipelineLayout() {
+      return 0;
+    }
+    // TBD
+    get maxSampledTexturesPerShaderStage() {
+      return this.getParameter(import_constants5.GL.MAX_VERTEX_TEXTURE_IMAGE_UNITS);
+    }
+    // ) TBD
+    get maxSamplersPerShaderStage() {
+      return this.getParameter(import_constants5.GL.MAX_COMBINED_TEXTURE_IMAGE_UNITS);
+    }
+    get maxStorageBuffersPerShaderStage() {
+      return 0;
+    }
+    // TBD
+    get maxStorageTexturesPerShaderStage() {
+      return 0;
+    }
+    // TBD
+    get maxUniformBuffersPerShaderStage() {
+      return this.getParameter(import_constants5.GL.MAX_UNIFORM_BUFFER_BINDINGS);
+    }
+    get maxUniformBufferBindingSize() {
+      return this.getParameter(import_constants5.GL.MAX_UNIFORM_BLOCK_SIZE);
+    }
+    get maxStorageBufferBindingSize() {
+      return 0;
+    }
+    get minUniformBufferOffsetAlignment() {
+      return this.getParameter(import_constants5.GL.UNIFORM_BUFFER_OFFSET_ALIGNMENT);
+    }
+    get minStorageBufferOffsetAlignment() {
+      return 0;
+    }
+    get maxVertexBuffers() {
+      return 16;
+    }
+    // WebGL 2 supports 16 buffers, see https://github.com/gpuweb/gpuweb/issues/4284
+    get maxVertexAttributes() {
+      return this.getParameter(import_constants5.GL.MAX_VERTEX_ATTRIBS);
+    }
+    get maxVertexBufferArrayStride() {
+      return 2048;
+    }
+    // TBD, this is just the default value from WebGPU
+    get maxInterStageShaderComponents() {
+      return this.getParameter(import_constants5.GL.MAX_VARYING_COMPONENTS);
+    }
+    get maxComputeWorkgroupStorageSize() {
+      return 0;
+    }
+    // WebGL does not support compute shaders
+    get maxComputeInvocationsPerWorkgroup() {
+      return 0;
+    }
+    // WebGL does not support compute shaders
+    get maxComputeWorkgroupSizeX() {
+      return 0;
+    }
+    // WebGL does not support compute shaders
+    get maxComputeWorkgroupSizeY() {
+      return 0;
+    }
+    // WebGL does not support compute shaders
+    get maxComputeWorkgroupSizeZ() {
+      return 0;
+    }
+    // WebGL does not support compute shaders
+    get maxComputeWorkgroupsPerDimension() {
+      return 0;
+    }
+    // WebGL does not support compute shaders
+    // PRIVATE
+    gl;
+    limits = {};
+    constructor(gl) {
+      super();
+      this.gl = gl;
+    }
+    getParameter(parameter) {
+      if (this.limits[parameter] === void 0) {
+        this.limits[parameter] = this.gl.getParameter(parameter);
+      }
+      return this.limits[parameter];
+    }
+  };
 
   // src/adapter/resources/webgl-framebuffer.ts
   var import_constants12 = __toESM(require_constants(), 1);
@@ -4059,9 +4103,66 @@ ${htmlLog}
         })
       );
     }
+    if (parameters.unclippedDepth) {
+      if (device.features.has("depth-clip-control")) {
+        gl.enable(import_constants6.GL.DEPTH_CLAMP_EXT);
+      }
+    }
     if (parameters.depthBias !== void 0) {
       gl.polygonOffset(parameters.depthBias, parameters.depthBiasSlopeScale || 0);
     }
+    if (device.features.has("provoking-vertex-webgl")) {
+      const extensions = webglDevice.getExtension("WEBGL_provoking_vertex");
+      const ext = extensions.WEBGL_provoking_vertex;
+      if (parameters.provokingVertex) {
+        const vertex = map("provokingVertex", parameters.provokingVertex, {
+          first: import_constants6.GL.FIRST_VERTEX_CONVENTION_WEBGL,
+          last: import_constants6.GL.LAST_VERTEX_CONVENTION_WEBGL
+        });
+        ext?.provokingVertexWEBGL(vertex);
+      }
+    }
+    if (device.features.has("polygon-mode-webgl")) {
+      const extensions = webglDevice.getExtension("WEBGL_polygon_mode");
+      const ext = extensions.WEBGL_polygon_mode;
+      if (parameters.polygonMode) {
+        const mode = map("polygonMode", parameters.provokingVertex, {
+          fill: import_constants6.GL.FILL_WEBGL,
+          lint: import_constants6.GL.LINE_WEBGL
+        });
+        ext?.polygonModeWEBGL(import_constants6.GL.FRONT, mode);
+        ext?.polygonModeWEBGL(import_constants6.GL.BACK, mode);
+      }
+      if (parameters.polygonOffsetLine) {
+        gl.enable(import_constants6.GL.POLYGON_OFFSET_LINE_WEBGL);
+      }
+    }
+    if (device.features.has("shader-clip-cull-distance-webgl")) {
+      if (parameters.clipDistance0) {
+        gl.enable(import_constants6.GL.CLIP_DISTANCE0_WEBGL);
+      }
+      if (parameters.clipDistance1) {
+        gl.enable(import_constants6.GL.CLIP_DISTANCE1_WEBGL);
+      }
+      if (parameters.clipDistance2) {
+        gl.enable(import_constants6.GL.CLIP_DISTANCE2_WEBGL);
+      }
+      if (parameters.clipDistance3) {
+        gl.enable(import_constants6.GL.CLIP_DISTANCE3_WEBGL);
+      }
+      if (parameters.clipDistance4) {
+        gl.enable(import_constants6.GL.CLIP_DISTANCE4_WEBGL);
+      }
+      if (parameters.clipDistance5) {
+        gl.enable(import_constants6.GL.CLIP_DISTANCE5_WEBGL);
+      }
+      if (parameters.clipDistance6) {
+        gl.enable(import_constants6.GL.CLIP_DISTANCE6_WEBGL);
+      }
+      if (parameters.clipDistance7) {
+        gl.enable(import_constants6.GL.CLIP_DISTANCE7_WEBGL);
+      }
+    }
     if (parameters.depthWriteEnabled !== void 0) {
       gl.depthMask(mapBoolean("depthWriteEnabled", parameters.depthWriteEnabled));
     }
@@ -4096,13 +4197,31 @@ ${htmlLog}
     }
     if (parameters.blendColorOperation || parameters.blendAlphaOperation) {
       gl.enable(import_constants6.GL.BLEND);
-      const colorEquation = convertBlendOperationToEquation("blendColorOperation", parameters.blendColorOperation || "add");
-      const alphaEquation = convertBlendOperationToEquation("blendAlphaOperation", parameters.blendAlphaOperation || "add");
+      const colorEquation = convertBlendOperationToEquation(
+        "blendColorOperation",
+        parameters.blendColorOperation || "add"
+      );
+      const alphaEquation = convertBlendOperationToEquation(
+        "blendAlphaOperation",
+        parameters.blendAlphaOperation || "add"
+      );
       gl.blendEquationSeparate(colorEquation, alphaEquation);
-      const colorSrcFactor = convertBlendFactorToFunction("blendColorSrcFactor", parameters.blendColorSrcFactor || "one");
-      const colorDstFactor = convertBlendFactorToFunction("blendColorDstFactor", parameters.blendColorDstFactor || "zero");
-      const alphaSrcFactor = convertBlendFactorToFunction("blendAlphaSrcFactor", parameters.blendAlphaSrcFactor || "one");
-      const alphaDstFactor = convertBlendFactorToFunction("blendAlphaDstFactor", parameters.blendAlphaDstFactor || "zero");
+      const colorSrcFactor = convertBlendFactorToFunction(
+        "blendColorSrcFactor",
+        parameters.blendColorSrcFactor || "one"
+      );
+      const colorDstFactor = convertBlendFactorToFunction(
+        "blendColorDstFactor",
+        parameters.blendColorDstFactor || "zero"
+      );
+      const alphaSrcFactor = convertBlendFactorToFunction(
+        "blendAlphaSrcFactor",
+        parameters.blendAlphaSrcFactor || "one"
+      );
+      const alphaDstFactor = convertBlendFactorToFunction(
+        "blendAlphaDstFactor",
+        parameters.blendAlphaDstFactor || "zero"
+      );
       gl.blendFuncSeparate(colorSrcFactor, colorDstFactor, alphaSrcFactor, alphaDstFactor);
     }
   }
@@ -4132,17 +4251,17 @@ ${htmlLog}
   }
   function convertBlendOperationToEquation(parameter, value) {
     return map(parameter, value, {
-      "add": import_constants6.GL.FUNC_ADD,
-      "subtract": import_constants6.GL.FUNC_SUBTRACT,
+      add: import_constants6.GL.FUNC_ADD,
+      subtract: import_constants6.GL.FUNC_SUBTRACT,
       "reverse-subtract": import_constants6.GL.FUNC_REVERSE_SUBTRACT,
-      "min": import_constants6.GL.MIN,
-      "max": import_constants6.GL.MAX
+      min: import_constants6.GL.MIN,
+      max: import_constants6.GL.MAX
     });
   }
   function convertBlendFactorToFunction(parameter, value) {
     return map(parameter, value, {
-      "one": import_constants6.GL.ONE,
-      "zero": import_constants6.GL.ZERO,
+      one: import_constants6.GL.ONE,
+      zero: import_constants6.GL.ZERO,
       "src-color": import_constants6.GL.SRC_COLOR,
       "one-minus-src-color": import_constants6.GL.ONE_MINUS_SRC_COLOR,
       "dst-color": import_constants6.GL.DST_COLOR,
@@ -4398,6 +4517,21 @@ ${htmlLog}
     }
   };
 
+  // src/adapter/resources/webgl-texture-view.ts
+  var WEBGLTextureView = class extends TextureView {
+    device;
+    gl;
+    handle;
+    texture;
+    constructor(device, props) {
+      super(device, { ...Texture.defaultProps, ...props });
+      this.device = device;
+      this.gl = this.device.gl;
+      this.handle = null;
+      this.texture = props.texture;
+    }
+  };
+
   // src/adapter/resources/webgl-texture.ts
   var DEFAULT_WEBGL_TEXTURE_PROPS = {
     // deprecated
@@ -4414,8 +4548,9 @@ ${htmlLog}
     device;
     gl;
     handle;
-    /** Sampler object (currently unused) */
+    // (TODO - currently unused in WebGL, but WebGL 2 does support sampler objects) */
     sampler = void 0;
+    view = void 0;
     // data;
     glFormat = void 0;
     type = void 0;
@@ -4530,6 +4665,7 @@ ${htmlLog}
       });
       this.setSampler(props.sampler);
       this._setSamplerParameters(parameters);
+      this.view = new WEBGLTextureView(this.device, { ...this.props, texture: this });
       if (mipmaps) {
         this.generateMipmap();
       }
@@ -5088,21 +5224,6 @@ ${htmlLog}
   // src/adapter/objects/webgl-renderbuffer.ts
   var import_constants11 = __toESM(require_constants(), 1);
 
-  // src/adapter/objects/constants-to-keys.ts
-  function getKeyValue(gl, name2) {
-    if (typeof name2 !== "string") {
-      return name2;
-    }
-    const number = Number(name2);
-    if (!isNaN(number)) {
-      return number;
-    }
-    name2 = name2.replace(/^.*\./, "");
-    const value = gl[name2];
-    assert2(value !== void 0, `Accessing undefined constant GL.${name2}`);
-    return value;
-  }
-
   // src/adapter/objects/webgl-resource.ts
   var ERR_RESOURCE_METHOD_UNDEFINED = "Resource subclass must define virtual methods";
   var WebGLResource = class extends Resource {
@@ -5164,82 +5285,6 @@ ${htmlLog}
     unbind() {
       this.bind(null);
     }
-    /**
-     * Query a Resource parameter
-     *
-     * @param name
-     * @return param
-     */
-    getParameter(pname, props = {}) {
-      pname = getKeyValue(this.gl, pname);
-      assert2(pname);
-      const parameters = this.constructor.PARAMETERS || {};
-      const parameter = parameters[pname];
-      if (parameter) {
-        const parameterAvailable = !("extension" in parameter) || this.gl.getExtension(parameter.extension);
-        if (!parameterAvailable) {
-          return parameter.webgl2;
-        }
-      }
-      return this._getParameter(pname, props);
-    }
-    // Many resources support a getParameter call -
-    // getParameters will get all parameters - slow but useful for debugging
-    // eslint-disable-next-line complexity
-    getParameters(options = {}) {
-      const { parameters, keys } = options;
-      const PARAMETERS = this.constructor.PARAMETERS || {};
-      const values = {};
-      const parameterKeys = parameters || Object.keys(PARAMETERS);
-      for (const pname of parameterKeys) {
-        const parameter = PARAMETERS[pname];
-        const parameterAvailable = parameter && (!("extension" in parameter) || this.gl.getExtension(parameter.extension));
-        if (parameterAvailable) {
-          const key = keys ? this.device.getGLKey(pname) : pname;
-          values[key] = this.getParameter(pname, options);
-          if (keys && parameter.type === "GLenum") {
-            values[key] = this.device.getGLKey(values[key]);
-          }
-        }
-      }
-      return values;
-    }
-    /**
-     * Update a Resource setting
-     *
-     * @todo - cache parameter to avoid issuing WebGL calls?
-     *
-     * @param pname - parameter (GL constant, value or key)
-     * @param value {GLint|GLfloat|GLenum} 
-     * @return returns self to enable chaining
-     */
-    setParameter(pname, value) {
-      pname = getKeyValue(this.gl, pname);
-      assert2(pname);
-      const parameters = this.constructor.PARAMETERS || {};
-      const parameter = parameters[pname];
-      if (parameter) {
-        const parameterAvailable = !("extension" in parameter) || this.gl.getExtension(parameter.extension);
-        if (!parameterAvailable) {
-          throw new Error("Parameter not available on this platform");
-        }
-        if (parameter.type === "GLenum") {
-          value = getKeyValue(value);
-        }
-      }
-      this._setParameter(pname, value);
-      return this;
-    }
-    /*
-     * Batch update resource parameters
-     * Assumes the subclass supports a setParameter call
-     */
-    setParameters(parameters) {
-      for (const pname in parameters) {
-        this.setParameter(pname, parameters[pname]);
-      }
-      return this;
-    }
     // Install stubs for removed methods
     stubRemovedMethods(className, version, methodNames) {
       return stubRemovedMethods(this, className, version, methodNames);
@@ -5325,7 +5370,7 @@ ${htmlLog}
     /** WebGL format constant */
     glFormat;
     static isTextureFormatSupported(device, format) {
-      return isRenderbufferFormatSupported(device.gl, format);
+      return isRenderbufferFormatSupported(device.gl, format, device._extensions);
     }
     constructor(device, props) {
       if (typeof props.format === "number") {
@@ -5349,7 +5394,13 @@ ${htmlLog}
       this.trackDeallocatedMemory();
       this.gl.bindRenderbuffer(import_constants11.GL.RENDERBUFFER, this.handle);
       if (samples !== 0) {
-        this.gl.renderbufferStorageMultisample(import_constants11.GL.RENDERBUFFER, samples, this.glFormat, width, height);
+        this.gl.renderbufferStorageMultisample(
+          import_constants11.GL.RENDERBUFFER,
+          samples,
+          this.glFormat,
+          width,
+          height
+        );
       } else {
         this.gl.renderbufferStorage(import_constants11.GL.RENDERBUFFER, this.glFormat, width, height);
       }
@@ -5409,15 +5460,18 @@ ${htmlLog}
         }
         if (this.depthStencilAttachment) {
           this._attachOne(
-            getDepthStencilAttachmentWebGL(this.depthStencilAttachment.format),
+            getDepthStencilAttachmentWebGL(this.depthStencilAttachment.props.format),
             this.depthStencilAttachment
           );
         }
+        if (props.check !== false) {
+          const status = this.gl.checkFramebufferStatus(import_constants12.GL.FRAMEBUFFER);
+          if (status !== import_constants12.GL.FRAMEBUFFER_COMPLETE) {
+            throw new Error(`Framebuffer ${_getFrameBufferStatus(status)}`);
+          }
+        }
         this.gl.bindFramebuffer(import_constants12.GL.FRAMEBUFFER, null);
       }
-      if (props.check !== false) {
-        this._checkStatus();
-      }
     }
     /** destroys any auto created resources etc. */
     destroy() {
@@ -5427,16 +5481,6 @@ ${htmlLog}
       }
     }
     // PRIVATE
-    /** Check the status */
-    _checkStatus() {
-      const { gl } = this;
-      const prevHandle = gl.bindFramebuffer(import_constants12.GL.FRAMEBUFFER, this.handle);
-      const status = gl.checkFramebufferStatus(import_constants12.GL.FRAMEBUFFER);
-      gl.bindFramebuffer(import_constants12.GL.FRAMEBUFFER, prevHandle || null);
-      if (status !== gl.FRAMEBUFFER_COMPLETE) {
-        throw new Error(`Framebuffer ${_getFrameBufferStatus(status)}`);
-      }
-    }
     /** In WebGL we must use renderbuffers for depth/stencil attachments (unless we have extensions) */
     createDepthStencilTexture(format) {
       return new WEBGLRenderbuffer(this.device, {
@@ -5449,8 +5493,8 @@ ${htmlLog}
         height: this.height
       });
     }
-    /** 
-     * Attachment resize is expected to be a noop if size is same 
+    /**
+     * Attachment resize is expected to be a noop if size is same
      */
     resizeAttachments(width, height) {
       if (this.handle === null) {
@@ -5465,10 +5509,10 @@ ${htmlLog}
         height = this.gl.drawingBufferHeight;
       }
       for (const colorAttachment of this.colorAttachments) {
-        colorAttachment.resize({ width, height });
+        colorAttachment.texture.resize({ width, height });
       }
       if (this.depthStencilAttachment) {
-        this.depthStencilAttachment.resize({ width, height });
+        this.depthStencilAttachment.texture.resize({ width, height });
       }
       return this;
     }
@@ -5484,6 +5528,15 @@ ${htmlLog}
       } else if (attachment instanceof WEBGLTexture) {
         this._attachTexture(attachmentPoint, attachment, 0, 0);
         return attachment;
+      } else if (attachment instanceof WEBGLTextureView) {
+        const textureView = attachment;
+        this._attachTexture(
+          attachmentPoint,
+          textureView.texture,
+          textureView.props.baseMipLevel,
+          textureView.props.baseArrayLayer
+        );
+        return attachment.texture;
       }
       throw new Error("attach");
     }
@@ -5630,7 +5683,9 @@ ${htmlLog}
     if (!initialized) {
       initialized = true;
       spector.spyCanvases();
-      spector?.onCaptureStarted.add((capture) => log.info("Spector capture started:", capture)());
+      spector?.onCaptureStarted.add(
+        (capture) => log.info("Spector capture started:", capture)()
+      );
       spector?.onCapture.add((capture) => {
         log.info("Spector capture complete:", capture)();
         spector?.getResultUI();
@@ -5654,7 +5709,7 @@ ${htmlLog}
   // src/context/debug/webgl-developer-tools.ts
   var import_constants13 = __toESM(require_constants(), 1);
   var WEBGL_DEBUG_CDN_URL = "https://unpkg.com/webgl-debug@2.0.1/index.js";
-  function getContextData(gl) {
+  function getWebGLContextData(gl) {
     gl.luma = gl.luma || {};
     return gl.luma;
   }
@@ -5672,7 +5727,7 @@ ${htmlLog}
     return props.debug ? getDebugContext(gl, props) : getRealContext(gl);
   }
   function getRealContext(gl) {
-    const data = getContextData(gl);
+    const data = getWebGLContextData(gl);
     return data.realContext ? data.realContext : gl;
   }
   function getDebugContext(gl, props) {
@@ -5680,7 +5735,7 @@ ${htmlLog}
       log.warn("webgl-debug not loaded")();
       return gl;
     }
-    const data = getContextData(gl);
+    const data = getWebGLContextData(gl);
     if (data.debugContext) {
       return data.debugContext;
     }
@@ -5730,7 +5785,9 @@ ${htmlLog}
     }
     if (props.break && props.break.length > 0) {
       functionString = functionString || getFunctionString(functionName, functionArgs);
-      const isBreakpoint = props.break.every((breakOn) => functionString.indexOf(breakOn) !== -1);
+      const isBreakpoint = props.break.every(
+        (breakOn) => functionString.indexOf(breakOn) !== -1
+      );
       if (isBreakpoint) {
         debugger;
       }
@@ -5829,6 +5886,11 @@ ${htmlLog}
       const log2 = this.device.gl.getShaderInfoLog(this.handle);
       return parseShaderCompilerLog(log2);
     }
+    getTranslatedSource() {
+      const extensions = this.device.getExtension("WEBGL_debug_shaders");
+      const ext = extensions.WEBGL_debug_shaders;
+      return ext?.getTranslatedShaderSource(this.handle);
+    }
     // PRIVATE METHODS
     /** Compile a shader and get compilation status */
     async _compile(source) {
@@ -5842,7 +5904,7 @@ ${source2}`;
         this.compilationStatus = "pending";
         return;
       }
-      if (!this.device.features.has("shader-status-async-webgl")) {
+      if (!this.device.features.has("compilation-status-async-webgl")) {
         this._getCompilationStatus();
         if (this.compilationStatus === "error") {
           throw new Error(`GLSL compilation errors in ${this.props.stage} shader ${this.props.id}`);
@@ -5860,13 +5922,13 @@ ${source2}`;
     async _waitForCompilationComplete() {
       const waitMs = async (ms) => await new Promise((resolve) => setTimeout(resolve, ms));
       const DELAY_MS = 10;
-      if (!this.device.features.has("shader-status-async-webgl")) {
+      if (!this.device.features.has("compilation-status-async-webgl")) {
         await waitMs(DELAY_MS);
         return;
       }
       const { gl } = this.device;
       for (; ; ) {
-        const complete = gl.getShaderParameter(this.handle, import_constants14.GL.COMPLETION_STATUS);
+        const complete = gl.getShaderParameter(this.handle, import_constants14.GL.COMPLETION_STATUS_KHR);
         if (complete) {
           return;
         }
@@ -5877,7 +5939,7 @@ ${source2}`;
      * 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
-    */
+     */
     _getCompilationStatus() {
       this.compilationStatus = this.device.gl.getShaderParameter(this.handle, import_constants14.GL.COMPILE_STATUS) ? "success" : "error";
     }
@@ -5912,7 +5974,6 @@ ${source2}`;
     }
     insertDebugMarker(markerLabel) {
     }
-    // writeTimestamp(querySet: GPUQuerySet, queryIndex: number): void;
     // beginOcclusionQuery(queryIndex: number): void;
     // endOcclusionQuery(): void;
     // executeBundles(bundles: Iterable<GPURenderBundle>): void;
@@ -5951,7 +6012,15 @@ ${source2}`;
       this.glParameters = glParameters;
       setGLParameters(this.device, glParameters);
     }
-    // Internal
+    beginOcclusionQuery(queryIndex) {
+      const webglQuerySet = this.props.occlusionQuerySet;
+      webglQuerySet?.beginOcclusionQuery();
+    }
+    endOcclusionQuery() {
+      const webglQuerySet = this.props.occlusionQuerySet;
+      webglQuerySet?.endOcclusionQuery();
+    }
+    // PRIVATE
     /**
      * Optionally clears depth, color and stencil buffers based on parameters
      */
@@ -5976,8 +6045,8 @@ ${source2}`;
         });
       }
     }
-    /** 
-     * WebGL2 - clear a specific color buffer 
+    /**
+     * WebGL2 - clear a specific color buffer
      */
     clearColorBuffer(drawBuffer = 0, value = [0, 0, 0, 0]) {
       withGLParameters(this.device.gl, { framebuffer: this.props.framebuffer }, () => {
@@ -6658,7 +6727,9 @@ ${source2}`;
         this.device.gl.transformFeedbackVaryings(this.handle, varyings, bufferMode);
       }
       this._linkShaders();
+      log.time(0, `RenderPipeline ${this.id} - shaderLayout introspection`)();
       this.introspectedLayout = getShaderLayout(this.device.gl, this.handle);
+      log.timeEnd(0, `RenderPipeline ${this.id} - shaderLayout introspection`)();
       this.shaderLayout = mergeShaderLayout(this.introspectedLayout, props.shaderLayout);
       switch (this.props.topology) {
         case "triangle-fan-webgl":
@@ -6700,7 +6771,7 @@ ${source2}`;
             }
             break;
           case "texture":
-            if (!(value instanceof WEBGLTexture || value instanceof WEBGLFramebuffer)) {
+            if (!(value instanceof WEBGLTextureView || value instanceof WEBGLTexture || value instanceof WEBGLFramebuffer)) {
               throw new Error("texture value");
             }
             break;
@@ -6713,18 +6784,6 @@ ${source2}`;
         this.bindings[name2] = value;
       }
     }
-    /** This function is @deprecated, use uniform buffers */
-    setUniforms(uniforms) {
-      const { bindings } = splitUniformsAndBindings(uniforms);
-      Object.keys(bindings).forEach((name2) => {
-        log.warn(
-          `Unsupported value "${JSON.stringify(
-            bindings[name2]
-          )}" used in setUniforms() for key ${name2}. Use setBindings() instead?`
-        )();
-      });
-      Object.assign(this.uniforms, uniforms);
-    }
     /** @todo needed for portable model
      * @note The WebGL API is offers many ways to draw things
      * This function unifies those ways into a single call using common parameters with sane defaults
@@ -6794,6 +6853,18 @@ ${source2}`;
       vertexArray.unbindAfterRender(renderPass);
       return true;
     }
+    // DEPRECATED METHODS
+    setUniformsWebGL(uniforms) {
+      const { bindings } = splitUniformsAndBindings(uniforms);
+      Object.keys(bindings).forEach((name2) => {
+        log.warn(
+          `Unsupported value "${JSON.stringify(
+            bindings[name2]
+          )}" used in setUniforms() for key ${name2}. Use setBindings() instead?`
+        )();
+      });
+      Object.assign(this.uniforms, uniforms);
+    }
     // PRIVATE METHODS
     // setAttributes(attributes: Record<string, Buffer>): void {}
     // setBindings(bindings: Record<string, Binding>): void {}
@@ -6806,7 +6877,7 @@ ${source2}`;
       log.timeEnd(LOG_PROGRAM_PERF_PRIORITY, `linkProgram for ${this.id}`)();
       if (log.level === 0) {
       }
-      if (!this.device.features.has("shader-status-async-webgl")) {
+      if (!this.device.features.has("compilation-status-async-webgl")) {
         const status2 = this._getLinkStatus();
         this._reportLinkStatus(status2);
         return;
@@ -6859,13 +6930,13 @@ ${source2}`;
     async _waitForLinkComplete() {
       const waitMs = async (ms) => await new Promise((resolve) => setTimeout(resolve, ms));
       const DELAY_MS = 10;
-      if (!this.device.features.has("shader-status-async-webgl")) {
+      if (!this.device.features.has("compilation-status-async-webgl")) {
         await waitMs(DELAY_MS);
         return;
       }
       const { gl } = this.device;
       for (; ; ) {
-        const complete = gl.getProgramParameter(this.handle, import_constants22.GL.COMPLETION_STATUS);
+        const complete = gl.getProgramParameter(this.handle, import_constants22.GL.COMPLETION_STATUS_KHR);
         if (complete) {
           return;
         }
@@ -6926,11 +6997,13 @@ ${source2}`;
             uniformBufferIndex += 1;
             break;
           case "texture":
-            if (!(value instanceof WEBGLTexture || value instanceof WEBGLFramebuffer)) {
+            if (!(value instanceof WEBGLTextureView || value instanceof WEBGLTexture || value instanceof WEBGLFramebuffer)) {
               throw new Error("texture");
             }
             let texture;
-            if (value instanceof WEBGLTexture) {
+            if (value instanceof WEBGLTextureView) {
+              texture = value.texture;
+            } else if (value instanceof WEBGLTexture) {
               texture = value;
             } else if (value instanceof WEBGLFramebuffer && value.colorAttachments[0] instanceof WEBGLTexture) {
               log.warn(
@@ -7058,7 +7131,7 @@ ${source2}`;
       const webglBuffer = destination;
       const sourceWidth = width || framebuffer.width;
       const sourceHeight = height || framebuffer.height;
-      const sourceParams = getWebGLTextureParameters(framebuffer.texture.format);
+      const sourceParams = getWebGLTextureParameters(framebuffer.texture.props.format);
       const sourceFormat = sourceParams.dataFormat;
       const sourceType = sourceParams.type;
       device.gl.bindBuffer(import_constants23.GL.PIXEL_PACK_BUFFER, webglBuffer.handle);
@@ -7192,14 +7265,8 @@ ${source2}`;
     }
     insertDebugMarker(markerLabel) {
     }
-    // writeTimestamp(querySet: Query, queryIndex: number): void {}
-    // resolveQuerySet(options: {
-    //   querySet: GPUQuerySet,
-    //   firstQuery: number,
-    //   queryCount: number,
-    //   destination: Buffer,
-    //   destinationOffset?: number;
-    // }): void;
+    resolveQuerySet(querySet, destination, options) {
+    }
   };
 
   // src/adapter/resources/webgl-vertex-array.ts
@@ -7267,7 +7334,7 @@ ${source2}`;
       this.attributes[location] = buffer;
     }
     /** Set a location in vertex attributes array to a constant value, disables the location */
-    setConstant(location, value) {
+    setConstantWebGL(location, value) {
       this._enable(location, false);
       this.attributes[location] = value;
     }
@@ -7295,7 +7362,7 @@ ${source2}`;
       for (let location = 0; location < this.maxVertexAttributes; ++location) {
         const constant = this.attributes[location];
         if (ArrayBuffer.isView(constant)) {
-          this.device.setConstantAttribute(location, constant);
+          this.device.setConstantAttributeWebGL(location, constant);
         }
       }
     }
@@ -7552,25 +7619,159 @@ ${source2}`;
     return /^\d+$/.test(value);
   }
 
+  // src/adapter/resources/webgl-query-set.ts
+  var import_constants26 = __toESM(require_constants(), 1);
+  var WEBGLQuerySet = class extends QuerySet {
+    device;
+    handle;
+    target = null;
+    _queryPending = false;
+    _pollingPromise = null;
+    get [Symbol.toStringTag]() {
+      return "Query";
+    }
+    // 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");
+      }
+      this.handle = this.device.gl.createQuery();
+      Object.seal(this);
+    }
+    destroy() {
+      this.device.gl.deleteQuery(this.handle);
+    }
+    // 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(import_constants26.GL.TIME_ELAPSED_EXT);
+    }
+    endTimestampQuery() {
+      this._end();
+    }
+    // Shortcut for occlusion queries
+    beginOcclusionQuery(options) {
+      return this._begin(
+        options?.conservative ? import_constants26.GL.ANY_SAMPLES_PASSED_CONSERVATIVE : import_constants26.GL.ANY_SAMPLES_PASSED
+      );
+    }
+    endOcclusionQuery() {
+      this._end();
+    }
+    // Shortcut for transformFeedbackQuery
+    beginTransformFeedbackQuery() {
+      return this._begin(import_constants26.GL.TRANSFORM_FEEDBACK_PRIMITIVES_WRITTEN);
+    }
+    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(target) {
+      if (this._queryPending) {
+        return;
+      }
+      this.target = target;
+      this.device.gl.beginQuery(this.target, this.handle);
+      return;
+    }
+    // ends the current query
+    _end() {
+      if (this._queryPending) {
+        return;
+      }
+      if (this.target) {
+        this.device.gl.endQuery(this.target);
+        this.target = null;
+        this._queryPending = true;
+      }
+      return;
+    }
+    // Returns true if the query result is available
+    isResultAvailable() {
+      if (!this._queryPending) {
+        return false;
+      }
+      const resultAvailable = this.device.gl.getQueryParameter(
+        this.handle,
+        import_constants26.GL.QUERY_RESULT_AVAILABLE
+      );
+      if (resultAvailable) {
+        this._queryPending = false;
+      }
+      return resultAvailable;
+    }
+    // Timing query is disjoint, i.e. results are invalid
+    isTimerDisjoint() {
+      return this.device.gl.getParameter(import_constants26.GL.GPU_DISJOINT_EXT);
+    }
+    // Returns query result.
+    getResult() {
+      return this.device.gl.getQueryParameter(this.handle, import_constants26.GL.QUERY_RESULT);
+    }
+    // Returns the query result, converted to milliseconds to match JavaScript conventions.
+    getTimerMilliseconds() {
+      return this.getResult() / 1e6;
+    }
+    // Polls the query
+    pollQuery(limit = Number.POSITIVE_INFINITY) {
+      if (this._pollingPromise) {
+        return this._pollingPromise;
+      }
+      let counter = 0;
+      this._pollingPromise = 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 {
+            requestAnimationFrame(poll);
+          }
+        };
+        requestAnimationFrame(poll);
+      });
+      return this._pollingPromise;
+    }
+  };
+
   // src/classic/copy-and-blit.ts
-  var import_constants27 = __toESM(require_constants(), 1);
+  var import_constants28 = __toESM(require_constants(), 1);
 
   // src/classic/format-utils.ts
-  var import_constants26 = __toESM(require_constants(), 1);
+  var import_constants27 = __toESM(require_constants(), 1);
   function glFormatToComponents(format) {
     switch (format) {
-      case import_constants26.GL.ALPHA:
-      case import_constants26.GL.R32F:
-      case import_constants26.GL.RED:
+      case import_constants27.GL.ALPHA:
+      case import_constants27.GL.R32F:
+      case import_constants27.GL.RED:
         return 1;
-      case import_constants26.GL.RG32F:
-      case import_constants26.GL.RG:
+      case import_constants27.GL.RG32F:
+      case import_constants27.GL.RG:
         return 2;
-      case import_constants26.GL.RGB:
-      case import_constants26.GL.RGB32F:
+      case import_constants27.GL.RGB:
+      case import_constants27.GL.RGB32F:
         return 3;
-      case import_constants26.GL.RGBA:
-      case import_constants26.GL.RGBA32F:
+      case import_constants27.GL.RGBA:
+      case import_constants27.GL.RGBA32F:
         return 4;
       default:
         assert2(false);
@@ -7579,13 +7780,13 @@ ${source2}`;
   }
   function glTypeToBytes(type) {
     switch (type) {
-      case import_constants26.GL.UNSIGNED_BYTE:
+      case import_constants27.GL.UNSIGNED_BYTE:
         return 1;
-      case import_constants26.GL.UNSIGNED_SHORT_5_6_5:
-      case import_constants26.GL.UNSIGNED_SHORT_4_4_4_4:
-      case import_constants26.GL.UNSIGNED_SHORT_5_5_5_1:
+      case import_constants27.GL.UNSIGNED_SHORT_5_6_5:
+      case import_constants27.GL.UNSIGNED_SHORT_4_4_4_4:
+      case import_constants27.GL.UNSIGNED_SHORT_5_5_5_1:
         return 2;
-      case import_constants26.GL.FLOAT:
+      case import_constants27.GL.FLOAT:
         return 4;
       default:
         assert2(false);
@@ -7598,8 +7799,8 @@ ${source2}`;
     const {
       sourceX = 0,
       sourceY = 0,
-      sourceFormat = import_constants27.GL.RGBA,
-      sourceAttachment = import_constants27.GL.COLOR_ATTACHMENT0
+      sourceFormat = import_constants28.GL.RGBA,
+      sourceAttachment = import_constants28.GL.COLOR_ATTACHMENT0
       // TODO - support gl.readBuffer
     } = options || {};
     let {
@@ -7614,27 +7815,33 @@ ${source2}`;
     const { gl, handle } = framebuffer;
     sourceWidth = sourceWidth || framebuffer.width;
     sourceHeight = sourceHeight || framebuffer.height;
-    const attachment = sourceAttachment - import_constants27.GL.COLOR_ATTACHMENT0;
-    sourceType = sourceType || framebuffer.colorAttachments[attachment]?.type || import_constants27.GL.UNSIGNED_BYTE;
+    const attachment = sourceAttachment - import_constants28.GL.COLOR_ATTACHMENT0;
+    sourceType = sourceType || framebuffer.colorAttachments[attachment]?.texture?.type || import_constants28.GL.UNSIGNED_BYTE;
     target = getPixelArray(target, sourceType, sourceFormat, sourceWidth, sourceHeight);
     sourceType = sourceType || getGLTypeFromTypedArray(target);
-    const prevHandle = gl.bindFramebuffer(import_constants27.GL.FRAMEBUFFER, handle);
+    const prevHandle = gl.bindFramebuffer(import_constants28.GL.FRAMEBUFFER, handle);
     gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target);
-    gl.bindFramebuffer(import_constants27.GL.FRAMEBUFFER, prevHandle || null);
+    gl.bindFramebuffer(import_constants28.GL.FRAMEBUFFER, prevHandle || null);
     if (deleteFramebuffer) {
       framebuffer.destroy();
     }
     return target;
   }
   function readPixelsToBuffer(source, options) {
-    const { target, sourceX = 0, sourceY = 0, sourceFormat = import_constants27.GL.RGBA, targetByteOffset = 0 } = options || {};
+    const {
+      target,
+      sourceX = 0,
+      sourceY = 0,
+      sourceFormat = import_constants28.GL.RGBA,
+      targetByteOffset = 0
+    } = options || {};
     let { sourceWidth, sourceHeight, sourceType } = options || {};
     const { framebuffer, deleteFramebuffer } = getFramebuffer2(source);
     assert2(framebuffer);
     sourceWidth = sourceWidth || framebuffer.width;
     sourceHeight = sourceHeight || framebuffer.height;
     const webglFramebuffer = framebuffer;
-    sourceType = sourceType || import_constants27.GL.UNSIGNED_BYTE;
+    sourceType = sourceType || import_constants28.GL.UNSIGNED_BYTE;
     let webglBufferTarget = target;
     if (!webglBufferTarget) {
       const components = glFormatToComponents(sourceFormat);
@@ -7678,7 +7885,7 @@ ${source2}`;
     if (pixelArray) {
       return pixelArray;
     }
-    type = type || import_constants27.GL.UNSIGNED_BYTE;
+    type = type || import_constants28.GL.UNSIGNED_BYTE;
     const ArrayType = getTypedArrayFromGLType(type, { clamped: false });
     const components = glFormatToComponents(format);
     return new ArrayType(width * height * components);
@@ -7727,21 +7934,14 @@ ${source2}`;
     static isSupported() {
       return typeof WebGL2RenderingContext !== "undefined";
     }
+    /** The underlying WebGL context */
+    handle;
+    features;
+    limits;
     info;
     canvasContext;
-    handle;
-    get features() {
-      this._features = this._features || getDeviceFeatures(this.gl);
-      return this._features;
-    }
-    get limits() {
-      this._limits = this._limits || getDeviceLimits(this.gl);
-      return this._limits;
-    }
     lost;
     _resolveContextLost;
-    _features;
-    _limits;
     //
     // Static methods, expected to be present by `luma.createDevice()`
     //
@@ -7765,18 +7965,19 @@ ${source2}`;
     }
     static async create(props = {}) {
       log.groupCollapsed(LOG_LEVEL2, "WebGLDevice created")();
-      if (typeof props.canvas === "string") {
-        await CanvasContext.pageLoaded;
+      const promises = [];
+      if (props.debug) {
+        promises.push(loadWebGLDeveloperTools());
       }
-      if (log.get("debug") || props.debug) {
-        await loadWebGLDeveloperTools();
+      if (props.spector) {
+        promises.push(loadSpectorJS());
       }
-      const { spector: spector2 } = props;
-      if (log.get("spector") || spector2) {
-        await loadSpectorJS();
+      if (typeof props.canvas === "string") {
+        promises.push(CanvasContext.pageLoaded);
       }
+      await Promise.all(promises);
       log.probe(LOG_LEVEL2 + 1, "DOM is loaded")();
-      if (props.gl && props.gl.device) {
+      if (props.gl?.device) {
         return _WebGLDevice.attach(props.gl);
       }
       const device = new _WebGLDevice(props);
@@ -7795,46 +7996,49 @@ ${source2}`;
       if (device) {
         throw new Error(`WebGL context already attached to device ${device.id}`);
       }
-      const canvas = props.canvas || props.gl?.canvas;
+      const canvas = props.gl?.canvas || props.canvas;
       this.canvasContext = new WebGLCanvasContext(this, { ...props, canvas });
       this.lost = new Promise((resolve) => {
         this._resolveContextLost = resolve;
       });
-      const onContextLost = (event) => this._resolveContextLost?.({
-        reason: "destroyed",
-        message: "Computer entered sleep mode, or too many apps or browser tabs are using the GPU."
-      });
       let gl = props.gl || null;
-      gl = gl || (isBrowser() ? createBrowserContext(this.canvasContext.canvas, { ...props, onContextLost }) : null);
+      gl ||= createBrowserContext(this.canvasContext.canvas, {
+        ...props,
+        onContextLost: (event) => this._resolveContextLost?.({
+          reason: "destroyed",
+          message: "Entered sleep mode, or too many apps or browser tabs are using the GPU."
+        })
+      });
       if (!gl) {
         throw new Error("WebGL context creation failed");
       }
       this.handle = gl;
-      this.gl = this.handle;
-      this.canvasContext.resize();
-      this.info = getDeviceInfo(this.gl);
+      this.gl = gl;
       this.gl.device = this;
-      this.gl._version = this.isWebGL2 ? 2 : 1;
+      this.gl._version = 2;
+      this.info = getDeviceInfo(this.gl, this._extensions);
+      this.features = new WebGLDeviceFeatures(this.gl, this._extensions);
+      this.limits = new WebGLDeviceLimits(this.gl);
+      this.canvasContext.resize();
       const { enable: enable2 = true, copyState = false } = props;
       trackContextState(this.gl, {
         enable: enable2,
         copyState,
         log: (...args) => log.log(1, ...args)()
       });
-      if (isBrowser() && props.debug) {
+      if (props.debug) {
         this.gl = makeDebugContext(this.gl, { ...props, throwOnError: true });
         this.debug = true;
         log.level = Math.max(log.level, 1);
         log.warn("WebGL debug mode activated. Performance reduced.")();
       }
-      if (isBrowser() && props.spector) {
-        const canvas2 = this.handle.canvas || props.canvas;
-        this.spector = initializeSpectorJS({ ...this.props, canvas: canvas2 });
+      if (props.spector) {
+        this.spectorJS = initializeSpectorJS({ ...this.props, canvas: this.handle.canvas });
       }
     }
     /**
      * Destroys the context
-     * @note Has no effect for browser contexts, there is no browser API for destroying contexts
+     * @note Has no effect for WebGL browser contexts, there is no browser API for destroying contexts
      */
     destroy() {
     }
@@ -7845,13 +8049,13 @@ ${source2}`;
       return [this.gl.drawingBufferWidth, this.gl.drawingBufferHeight];
     }
     isTextureFormatSupported(format) {
-      return isTextureFormatSupported(this.gl, format);
+      return isTextureFormatSupported(this.gl, format, this._extensions);
     }
     isTextureFormatFilterable(format) {
-      return isTextureFormatFilterable(this.gl, format);
+      return isTextureFormatFilterable(this.gl, format, this._extensions);
     }
     isTextureFormatRenderable(format) {
-      return isTextureFormatRenderable(this.gl, format);
+      return isTextureFormatRenderable(this.gl, format, this._extensions);
     }
     // IMPLEMENTATION OF ABSTRACT DEVICE
     createCanvasContext(props) {
@@ -7876,12 +8080,18 @@ ${source2}`;
     createFramebuffer(props) {
       return new WEBGLFramebuffer(this, props);
     }
-    createRenderPipeline(props) {
-      return new WEBGLRenderPipeline(this, props);
-    }
     createVertexArray(props) {
       return new WEBGLVertexArray(this, props);
     }
+    createTransformFeedback(props) {
+      return new WEBGLTransformFeedback(this, props);
+    }
+    createQuerySet(props) {
+      return new WEBGLQuerySet(this, props);
+    }
+    createRenderPipeline(props) {
+      return new WEBGLRenderPipeline(this, props);
+    }
     beginRenderPass(props) {
       return new WEBGLRenderPass(this, props);
     }
@@ -7891,9 +8101,6 @@ ${source2}`;
     beginComputePass(props) {
       throw new Error("ComputePass not supported in WebGL");
     }
-    createTransformFeedback(props) {
-      return new WEBGLTransformFeedback(this, props);
-    }
     renderPass = null;
     getDefaultRenderPass() {
       this.renderPass = this.renderPass || this.beginRenderPass({
@@ -7915,7 +8122,7 @@ ${source2}`;
     }
     //
     // TEMPORARY HACKS - will be removed in v9.1
-    // 
+    //
     /** @deprecated - should use command encoder */
     readPixelsToArrayWebGL(source, options) {
       return readPixelsToArray(source, options);
@@ -7948,20 +8155,15 @@ ${source2}`;
     _extensions = {};
     _polyfilled = false;
     /** Instance of Spector.js (if initialized) */
-    spector;
-    _webglLimits;
-    /** Return WebGL specific limits */
-    get webglLimits() {
-      this._webglLimits = this._webglLimits || getWebGLLimits(this.gl);
-      return this._webglLimits;
-    }
+    spectorJS;
     /**
      * Triggers device (or WebGL context) loss.
      * @note primarily intended for testing how application reacts to device loss
      */
     loseDevice() {
       let deviceLossTriggered = false;
-      const ext = this.gl.getExtension("WEBGL_lose_context");
+      const extensions = this.getExtension("WEBGL_lose_context");
+      const ext = extensions.WEBGL_lose_context;
       if (ext) {
         deviceLossTriggered = true;
         ext.loseContext();
@@ -8010,11 +8212,15 @@ ${source2}`;
      * so they need to be updated before every render
      * @todo - remember/cache values to avoid setting them unnecessarily?
      */
-    setConstantAttribute(location, constant) {
-      this._constants = this._constants || new Array(this.limits.maxVertexAttributes).fill(null);
+    setConstantAttributeWebGL(location, constant) {
+      const maxVertexAttributes = this.limits.maxVertexAttributes;
+      this._constants = this._constants || new Array(maxVertexAttributes).fill(null);
       const currentConstant = this._constants[location];
       if (currentConstant && compareConstantArrayValues2(currentConstant, constant)) {
-        log.info(1, `setConstantAttribute(${location}) could have been skipped, value unchanged`)();
+        log.info(
+          1,
+          `setConstantAttributeWebGL(${location}) could have been skipped, value unchanged`
+        )();
       }
       this._constants[location] = constant;
       switch (constant.constructor) {
@@ -8031,6 +8237,11 @@ ${source2}`;
           assert2(false);
       }
     }
+    /** Ensure extensions are only requested once */
+    getExtension(name2) {
+      getWebGLExtension(this.gl, name2, this._extensions);
+      return this._extensions;
+    }
   };
   var WebGLDevice = _WebGLDevice;
   //