@luma.gl/webgl 9.0.0-alpha.20 → 9.0.0-alpha.23

package/dist/dist.dev.js

@@ -48,9 +48,11 @@ var __exports__ = (() => {
     WebGLCanvasContext: () => WebGLCanvasContext,
     WebGLDevice: () => WebGLDevice,
     WebGLResource: () => WebGLResource,
+    _TEXTURE_FORMATS: () => TEXTURE_FORMATS,
     _checkFloat32ColorAttachment: () => _checkFloat32ColorAttachment,
     assertWebGL2Context: () => assertWebGL2Context,
     assertWebGLContext: () => assertWebGLContext,
+    convertGLToTextureFormat: () => convertGLToTextureFormat,
     getParameters: () => getParameters,
     getProgramBindings: () => getProgramBindings,
     getShaderLayout: () => getShaderLayout,
@@ -927,7 +929,7 @@ var __exports__ = (() => {
   var lumaStats = new StatsManager();
 
   // ../api/src/init.ts
-  function init() {
+  function initializeLuma() {
     const VERSION3 = typeof __VERSION__ !== "undefined" ? __VERSION__ : "untranspiled source";
     const STARTUP_MESSAGE = "set luma.log.level=1 (or higher) to trace rendering";
     if (globalThis.luma && globalThis.luma.VERSION !== VERSION3) {
@@ -948,8 +950,7 @@ var __exports__ = (() => {
     }
     return VERSION3;
   }
-  var VERSION2 = init();
-  var init_default = globalThis.luma;
+  var VERSION2 = initializeLuma();
 
   // ../api/src/lib/utils/utils.ts
   var uidCounters = {};
@@ -974,14 +975,17 @@ var __exports__ = (() => {
   var DEFAULT_RESOURCE_PROPS = {
     id: "undefined",
     handle: void 0,
-    userData: {}
+    userData: void 0
   };
   var Resource = class {
     /** props.id, for debugging. */
     userData = {};
+    /** Whether this resource has been destroyed */
     destroyed = false;
     /** For resources that allocate GPU memory */
     allocatedBytes = 0;
+    /** Attached resources will be destroyed when this resource is destroyed. Tracks auto-created "sub" resources. */
+    _attachedResources = /* @__PURE__ */ new Set();
     /**
      * Create a new Resource. Called from Subclass
      */
@@ -1001,7 +1005,7 @@ var __exports__ = (() => {
      * destroy can be called on any resource to release it before it is garbage collected.
      */
     destroy() {
-      this.removeStats();
+      this.destroyResource();
     }
     /** @deprecated Use destroy() */
     delete() {
@@ -1018,14 +1022,41 @@ var __exports__ = (() => {
     getProps() {
       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) {
+      if (this._attachedResources.delete(resource)) {
+        resource.destroy();
+      }
+    }
+    /** Destroy all owned resources. Make sure the resources are no longer needed before calling. */
+    destroyAttachedResources() {
+      for (const resource of Object.values(this._attachedResources)) {
+        resource.destroy();
+      }
+      this._attachedResources = /* @__PURE__ */ new Set();
+    }
     // PROTECTED METHODS
-    /** Called by resource constructor to track object creation */
-    addStats() {
-      const stats = this._device.statsManager.getStats("Resource Counts");
-      const name = this[Symbol.toStringTag];
-      stats.get("Resources Created").incrementCount();
-      stats.get(`${name}s Created`).incrementCount();
-      stats.get(`${name}s Active`).incrementCount();
+    /** Perform all destroy steps. Can be called by derived resources when overriding destroy() */
+    destroyResource() {
+      this.destroyAttachedResources();
+      this.removeStats();
+      this.destroyed = true;
     }
     /** Called by .destroy() to track object destruction. Subclass must call if overriding destroy() */
     removeStats() {
@@ -1047,7 +1078,17 @@ var __exports__ = (() => {
       stats.get(`${name} Memory`).subtractCount(this.allocatedBytes);
       this.allocatedBytes = 0;
     }
+    /** Called by resource constructor to track object creation */
+    addStats() {
+      const stats = this._device.statsManager.getStats("Resource Counts");
+      const name = this[Symbol.toStringTag];
+      stats.get("Resources Created").incrementCount();
+      stats.get(`${name}s Created`).incrementCount();
+      stats.get(`${name}s Active`).incrementCount();
+    }
   };
+  /** Default properties for resource */
+  __publicField(Resource, "defaultProps", DEFAULT_RESOURCE_PROPS);
   function selectivelyMerge(props, defaultProps) {
     const mergedProps = {
       ...defaultProps
@@ -1075,6 +1116,7 @@ var __exports__ = (() => {
     get [Symbol.toStringTag]() {
       return "Buffer";
     }
+    /** Length of buffer in bytes */
     constructor(device, props) {
       const deducedProps = {
         ...props
@@ -1195,34 +1237,30 @@ var __exports__ = (() => {
     }
     statsManager = lumaStats;
     userData = {};
+    // Capabilities
     /** Information about the device (vendor, versions etc) */
     /** Optional capability discovery */
     /** WebGPU style device limits */
     /** Check if device supports a specific texture format (creation and `nearest` sampling) */
     /** Check if linear filtering (sampler interpolation) is supported for a specific texture format */
     /** Check if device supports rendering to a specific texture format */
-    /** True context is already lost */
-    /** Promise that resolves when context is lost */
-    /** default canvas context */
+    // Device loss
+    /** `true` if device is already lost */
+    /** Promise that resolves when device is lost */
+    /** 
+     * Trigger device loss. 
+     * @returns `true` if context loss could actually be triggered. 
+     * @note primarily intended for testing how application reacts to device loss 
+     */
+    loseDevice() {
+      return false;
+    }
+    // Canvas context
+    /** Default / primary canvas context. Can be null as WebGPU devices can be created without a CanvasContext */
     /** Creates a new CanvasContext (WebGPU only) */
     /** Call after rendering a frame (necessary e.g. on WebGL OffscreenCanvas) */
     // Resource creation
     /** Create a buffer */
-    createBuffer(props) {
-      if (props instanceof ArrayBuffer || ArrayBuffer.isView(props)) {
-        return this._createBuffer({
-          data: props
-        });
-      }
-      if ((props.usage || 0) & Buffer2.INDEX && !props.indexType) {
-        if (props.data instanceof Uint32Array) {
-          props.indexType = "uint32";
-        } else if (props.data instanceof Uint16Array) {
-          props.indexType = "uint16";
-        }
-      }
-      return this._createBuffer(props);
-    }
     /** Create a texture */
     createTexture(props) {
       if (props instanceof Promise || typeof props === "string") {
@@ -1237,9 +1275,31 @@ var __exports__ = (() => {
     /** Create a shader */
     /** Create a render pipeline (aka program) */
     /** Create a compute pipeline (aka program) */
+    createCommandEncoder(props = {}) {
+      throw new Error("not implemented");
+    }
     /** Create a RenderPass */
     /** Create a ComputePass */
-    // Implementation
+    /** Get a renderpass that is set up to render to the primary CanvasContext */
+    // Resource creation helpers
+    _getBufferProps(props) {
+      if (props instanceof ArrayBuffer || ArrayBuffer.isView(props)) {
+        return {
+          data: props
+        };
+      }
+      const newProps = {
+        ...props
+      };
+      if ((props.usage || 0) & Buffer2.INDEX && !props.indexType) {
+        if (props.data instanceof Uint32Array) {
+          props.indexType = "uint32";
+        } else if (props.data instanceof Uint16Array) {
+          props.indexType = "uint16";
+        }
+      }
+      return newProps;
+    }
   };
   __publicField(Device, "VERSION", VERSION2);
 
@@ -1327,13 +1387,15 @@ var __exports__ = (() => {
       if (typeof OffscreenCanvas !== "undefined" && this.canvas instanceof OffscreenCanvas) {
         return 1;
       }
-      if (typeof useDevicePixels === "number") {
-        return useDevicePixels > 0 ? useDevicePixels : 1;
+      useDevicePixels = useDevicePixels === void 0 ? this.props.useDevicePixels : useDevicePixels;
+      if (!useDevicePixels || useDevicePixels <= 0) {
+        return 1;
       }
-      if (typeof this.props.useDevicePixels === "number") {
-        return this.props.useDevicePixels > 0 ? this.props.useDevicePixels : 1;
+      if (useDevicePixels === true) {
+        const dpr = typeof window !== "undefined" && window.devicePixelRatio;
+        return dpr || 1;
       }
-      return useDevicePixels || this.props.useDevicePixels ? typeof window !== "undefined" && window.devicePixelRatio || 1 : 1;
+      return useDevicePixels;
     }
     /**
      * Returns the size of drawing buffer in device pixels.
@@ -1526,8 +1588,8 @@ var __exports__ = (() => {
     data: null,
     dimension: "2d",
     format: "rgba8unorm",
-    // width: undefined,
-    // height: undefined,
+    width: void 0,
+    height: void 0,
     depth: 1,
     mipmaps: true,
     sampler: {},
@@ -1535,20 +1597,28 @@ var __exports__ = (() => {
     compressed: false,
     // mipLevels: 1,
     usage: 0,
-    parameters: {},
-    pixelStore: {},
-    pixels: null,
-    border: 0,
-    recreate: false
+    mipLevels: void 0,
+    samples: void 0,
+    type: void 0
   };
   var Texture = class extends Resource {
     get [Symbol.toStringTag]() {
       return "Texture";
     }
-    constructor(device, props) {
-      super(device, props, DEFAULT_TEXTURE_PROPS);
+    /** dimension of this texture */
+    /** format of this texture */
+    /** width in pixels of this texture */
+    /** height in pixels of this texture */
+    /** depth of this texture */
+    /** Default sampler for this texture */
+    constructor(device, props, defaultProps = DEFAULT_TEXTURE_PROPS) {
+      super(device, props, defaultProps);
+      this.dimension = this.props.dimension;
+      this.format = this.props.format;
+      this.width = this.props.width;
+      this.height = this.props.height;
+      this.depth = this.props.depth;
     }
-    /** Default sampler for this device */
   };
   __publicField(Texture, "COPY_SRC", 1);
   __publicField(Texture, "COPY_DST", 2);
@@ -1617,6 +1687,10 @@ var __exports__ = (() => {
     }
     /** Width of all attachments in this framebuffer */
     /** Height of all attachments in this framebuffer */
+    /** Color attachments */
+    colorAttachments = [];
+    /** Depth-stencil attachment, if provided */
+    depthStencilAttachment = null;
     constructor(device, props = {}) {
       super(device, props, DEFAULT_FRAMEBUFFER_PROPS);
       this.width = this.props.width;
@@ -1627,16 +1701,162 @@ var __exports__ = (() => {
      * @note resize() destroys existing textures (if size has changed).
      */
     resize(size) {
-      const updateSize = !size || size.height !== this.height || size.width !== this.width;
+      let updateSize = !size;
       if (size) {
-        this.width = size?.width;
-        this.height = size?.height;
+        const [width, height] = Array.isArray(size) ? size : [size.width, size.height];
+        updateSize = updateSize || height !== this.height || width !== this.width;
+        this.width = width;
+        this.height = height;
       }
       if (updateSize) {
-        this._resizeAttachments(this.width, this.height);
+        log.log(2, `Resizing framebuffer ${this.id} to ${this.width}x${this.height}`)();
+        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.attachResource(texture);
+          return texture;
+        }
+        return attachment;
+      });
+      if (this.props.depthStencilAttachment) {
+        if (typeof this.props.depthStencilAttachment === "string") {
+          const texture = this.createDepthStencilTexture(this.props.depthStencilAttachment);
+          this.attachResource(texture);
+          this.depthStencilAttachment = texture;
+        } else {
+          this.depthStencilAttachment = this.props.depthStencilAttachment;
+        }
       }
     }
-    /** Implementation of resize */
+    /** Create a color texture */
+    createColorTexture(format) {
+      return this.device.createTexture({
+        id: "color-attachment",
+        usage: Texture.RENDER_ATTACHMENT,
+        format,
+        width: this.width,
+        height: this.height
+      });
+    }
+    /** Create depth stencil texture */
+    createDepthStencilTexture(format) {
+      return this.device.createTexture({
+        id: "depth-stencil-attachment",
+        usage: Texture.RENDER_ATTACHMENT,
+        format,
+        width: this.width,
+        height: this.height
+      });
+    }
+    /**
+     * Default implementation of resize
+     * Creates new textures with correct size for all attachments.
+     * and destroys existing textures if owned
+     */
+    resizeAttachments(width, height) {
+      for (let i = 0; i < this.colorAttachments.length; ++i) {
+        if (this.colorAttachments[i]) {
+          const resizedTexture = this.device._createTexture({
+            ...this.colorAttachments[i].props,
+            width,
+            height
+          });
+          this.destroyAttachedResource(this.colorAttachments[i]);
+          this.colorAttachments[i] = resizedTexture;
+          this.attachResource(resizedTexture);
+        }
+      }
+      if (this.depthStencilAttachment) {
+        const resizedTexture = this.device._createTexture({
+          ...this.depthStencilAttachment.props,
+          width,
+          height
+        });
+        this.destroyAttachedResource(this.depthStencilAttachment);
+        this.depthStencilAttachment = resizedTexture;
+        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
+        // }
+      });
+    }
+    */
   };
 
   // ../api/src/adapter/resources/render-pipeline.ts
@@ -1680,49 +1900,15 @@ var __exports__ = (() => {
   /** Private "export" for Model class */
   __publicField(RenderPipeline, "_DEFAULT_PROPS", DEFAULT_RENDER_PIPELINE_PROPS);
 
-  // ../api/src/adapter/resources/command-encoder.ts
-  var DEFAULT_COMMAND_ENCODER_PROPS = {
-    ...DEFAULT_RESOURCE_PROPS
-  };
-  var CommandEncoder = class extends Resource {
-    get [Symbol.toStringTag]() {
-      return "CommandEncoder";
-    }
-    constructor(props) {
-      super(props, DEFAULT_COMMAND_ENCODER_PROPS);
-    }
-    // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
-    // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
-    // finish(options?: {id?: string}): GPUCommandBuffer;
-    pushDebugGroup(groupLabel) {
-    }
-    popDebugGroup() {
-    }
-    insertDebugMarker(markerLabel) {
-    }
-    // writeTimestamp(querySet: Query, queryIndex: number): void;
-    // resolveQuerySet(options: {
-    //   querySet: GPUQuerySet,
-    //   firstQuery: number,
-    //   queryCount: number,
-    //   destination: Buffer,
-    //   destinationOffset?: number;
-    // }): void;
-  };
-
   // ../api/src/adapter/resources/render-pass.ts
-  var DEFAULT_RENDERPASS_PROPS = {
-    ...DEFAULT_RESOURCE_PROPS,
-    framebuffer: null,
-    parameters: null
-  };
-  var RenderPass = class extends Resource {
+  var _RenderPass = class extends Resource {
     get [Symbol.toStringTag]() {
       return "RenderPass";
     }
     constructor(device, props) {
-      super(device, props, DEFAULT_RENDERPASS_PROPS);
+      super(device, props, _RenderPass.defaultProps);
     }
+    /** A small set of parameters can be changed between every draw call (viewport, scissorRect, blendColor, stencilReference) */
     // writeTimestamp(querySet: GPUQuerySet, queryIndex: number): void;
     // beginOcclusionQuery(queryIndex: number): void;
     // endOcclusionQuery(): void;
@@ -1753,6 +1939,63 @@ var __exports__ = (() => {
     drawIndexedIndirect(indirectBuffer: GPUBuffer, indirectOffset: number): void;
     */
   };
+  var RenderPass = _RenderPass;
+  /** Default properties for RenderPass */
+  __publicField(RenderPass, "defaultProps", {
+    ...Resource.defaultProps,
+    framebuffer: null,
+    parameters: void 0,
+    clearColor: [0, 0, 0, 0],
+    clearDepth: 1,
+    clearStencil: 0,
+    depthReadOnly: false,
+    stencilReadOnly: false,
+    discard: false
+  });
+
+  // ../api/src/adapter/resources/command-encoder.ts
+  var DEFAULT_COMMAND_ENCODER_PROPS = {
+    ...DEFAULT_RESOURCE_PROPS
+  };
+  var CommandEncoder = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "CommandEncoder";
+    }
+    constructor(props) {
+      super(props, DEFAULT_COMMAND_ENCODER_PROPS);
+    }
+    // TODO - return the CommandBuffer?
+    // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
+    // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
+    // finish(options?: {id?: string}): GPUCommandBuffer;
+    pushDebugGroup(groupLabel) {
+    }
+    popDebugGroup() {
+    }
+    insertDebugMarker(markerLabel) {
+    }
+    // writeTimestamp(querySet: Query, queryIndex: number): void;
+    // resolveQuerySet(options: {
+    //   querySet: GPUQuerySet,
+    //   firstQuery: number,
+    //   queryCount: number,
+    //   destination: Buffer,
+    //   destinationOffset?: number;
+    // }): void;
+  };
+
+  // ../api/src/adapter/resources/command-buffer.ts
+  var DEFAULT_COMMAND_ENCODER_PROPS2 = {
+    ...DEFAULT_RESOURCE_PROPS
+  };
+  var CommandBuffer = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "CommandBuffer";
+    }
+    constructor(props) {
+      super(props, DEFAULT_COMMAND_ENCODER_PROPS2);
+    }
+  };
 
   // ../api/src/lib/utils/assert.ts
   function assert2(condition, message2) {
@@ -1841,7 +2084,130 @@ var __exports__ = (() => {
         };
       }
     }
-    throw new Error(`Unknown format ${format}`);
+    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 || 1,
+      byteLength: data.bpp || 1,
+      srgb: false,
+      unsized: false
+    };
+  }
+
+  // ../api/src/lib/compiler-log/format-compiler-log.ts
+  function formatCompilerLog(shaderLog, source, options) {
+    const lines = source.split(/\r?\n/);
+    let formattedLog = "";
+    for (const message2 of shaderLog) {
+      formattedLog += formatCompilerMessage(message2, lines, message2.lineNum, options);
+    }
+    return formattedLog;
+  }
+  function formatCompilerMessage(message2, lines, lineNum, options) {
+    if (options?.showSourceCode) {
+      const positionIndicator = message2.linePos > 0 ? `${" ".repeat(message2.linePos + 5)}^^^
+` : "";
+      const numberedLines = getNumberedLines(lines, lineNum);
+      return `${numberedLines}${positionIndicator}${message2.type.toUpperCase()}: ${message2.message}
+
+`;
+    }
+    return `${message2.type.toUpperCase()}: ${message2.message}
+`;
+  }
+  function getNumberedLines(lines, lineNum) {
+    let numberedLines = "";
+    for (let line = lineNum - 2; line <= lineNum; line++) {
+      const sourceLine = lines[line];
+      if (sourceLine !== void 0) {
+        numberedLines += `${padLeft(String(line), 4)}: ${sourceLine}
+`;
+      }
+    }
+    return numberedLines;
+  }
+  function padLeft(string, paddedLength) {
+    let result = "";
+    for (let i = string.length; i < paddedLength; ++i) {
+      result += " ";
+    }
+    return result + string;
   }
 
   // ../api/src/lib/utils/cast.ts
@@ -1922,51 +2288,11 @@ var __exports__ = (() => {
     if (scriptId) {
       script.id = scriptId;
     }
-    return new Promise((resolve, reject) => {
-      script.onload = resolve;
-      script.onerror = (error2) => reject(new Error(`Unable to load script '${scriptUrl}': ${error2}`));
-      head.appendChild(script);
-    });
-  }
-
-  // ../api/src/lib/compiler-log/format-compiler-log.ts
-  function formatCompilerLog(shaderLog, source, options) {
-    const lines = source.split(/\r?\n/);
-    let formattedLog = "";
-    for (const message2 of shaderLog) {
-      formattedLog += formatCompilerMessage(message2, lines, message2.lineNum, options);
-    }
-    return formattedLog;
-  }
-  function formatCompilerMessage(message2, lines, lineNum, options) {
-    if (options?.showSourceCode) {
-      const positionIndicator = message2.linePos > 0 ? `${" ".repeat(message2.linePos + 5)}^^^
-` : "";
-      const numberedLines = getNumberedLines(lines, lineNum);
-      return `${numberedLines}${positionIndicator}${message2.type.toUpperCase()}: ${message2.message}
-
-`;
-    }
-    return `${message2.type.toUpperCase()}: ${message2.message}
-`;
-  }
-  function getNumberedLines(lines, lineNum) {
-    let numberedLines = "";
-    for (let line = lineNum - 2; line <= lineNum; line++) {
-      const sourceLine = lines[line];
-      if (sourceLine !== void 0) {
-        numberedLines += `${padLeft(String(line), 4)}: ${sourceLine}
-`;
-      }
-    }
-    return numberedLines;
-  }
-  function padLeft(string, paddedLength) {
-    let result = "";
-    for (let i = string.length; i < paddedLength; ++i) {
-      result += " ";
-    }
-    return result + string;
+    return new Promise((resolve, reject) => {
+      script.onload = resolve;
+      script.onerror = (error2) => reject(new Error(`Unable to load script '${scriptUrl}': ${error2}`));
+      head.appendChild(script);
+    });
   }
 
   // src/context/polyfill/polyfill-vertex-array-object.ts
@@ -2404,13 +2730,13 @@ var __exports__ = (() => {
     GL2[GL2["SHADING_LANGUAGE_VERSION"] = 35724] = "SHADING_LANGUAGE_VERSION";
     GL2[GL2["CURRENT_PROGRAM"] = 35725] = "CURRENT_PROGRAM";
     GL2[GL2["NEVER"] = 512] = "NEVER";
-    GL2[GL2["ALWAYS"] = 519] = "ALWAYS";
     GL2[GL2["LESS"] = 513] = "LESS";
     GL2[GL2["EQUAL"] = 514] = "EQUAL";
     GL2[GL2["LEQUAL"] = 515] = "LEQUAL";
     GL2[GL2["GREATER"] = 516] = "GREATER";
-    GL2[GL2["GEQUAL"] = 518] = "GEQUAL";
     GL2[GL2["NOTEQUAL"] = 517] = "NOTEQUAL";
+    GL2[GL2["GEQUAL"] = 518] = "GEQUAL";
+    GL2[GL2["ALWAYS"] = 519] = "ALWAYS";
     GL2[GL2["KEEP"] = 7680] = "KEEP";
     GL2[GL2["REPLACE"] = 7681] = "REPLACE";
     GL2[GL2["INCR"] = 7682] = "INCR";
@@ -4163,7 +4489,8 @@ var __exports__ = (() => {
     "r8unorm": {
       gl: GL.R8,
       b: 1,
-      c: 1
+      c: 1,
+      renderbuffer: true
     },
     "r8snorm": {
       gl: GL.R8_SNORM,
@@ -4173,18 +4500,21 @@ var __exports__ = (() => {
     "r8uint": {
       gl: GL.R8UI,
       b: 1,
-      c: 1
+      c: 1,
+      renderbuffer: true
     },
     "r8sint": {
       gl: GL.R8I,
       b: 1,
-      c: 1
+      c: 1,
+      renderbuffer: true
     },
     // 16-bit formats
     "rg8unorm": {
       gl: GL.RG8,
       b: 2,
-      c: 2
+      c: 2,
+      renderbuffer: true
     },
     "rg8snorm": {
       gl: GL.RG8_SNORM,
@@ -4194,69 +4524,80 @@ var __exports__ = (() => {
     "rg8uint": {
       gl: GL.RG8UI,
       b: 2,
-      c: 2
+      c: 2,
+      renderbuffer: true
     },
     "rg8sint": {
       gl: GL.RG8I,
       b: 2,
-      c: 2
+      c: 2,
+      renderbuffer: true
     },
     "r16uint": {
       gl: GL.R16UI,
       b: 2,
-      c: 1
+      c: 1,
+      renderbuffer: true
     },
     "r16sint": {
       gl: GL.R16I,
       b: 2,
-      c: 1
+      c: 1,
+      renderbuffer: true
     },
     "r16float": {
       gl: GL.R16F,
       b: 2,
       c: 1,
       render: "texture-renderable-float16-webgl",
-      filter: "texture-filter-linear-float16-webgl"
+      filter: "texture-filter-linear-float16-webgl",
+      renderbuffer: true
     },
     "r16unorm-webgl": {
       gl: GL.R16_EXT,
       b: 2,
       c: 1,
-      f: "texture-formats-norm16-webgl"
+      f: "texture-formats-norm16-webgl",
+      renderbuffer: true,
+      x: EXT_TEXTURE_NORM16
     },
     "r16snorm-webgl": {
       gl: GL.R16_SNORM_EXT,
       b: 2,
       c: 1,
-      f: "texture-formats-norm16-webgl"
+      f: "texture-formats-norm16-webgl",
+      x: EXT_TEXTURE_NORM16
     },
     // Packed 16-bit formats
     "rgba4unorm-webgl": {
       gl: GL.RGBA4,
       b: 2,
       c: 4,
-      wgpu: false
+      wgpu: false,
+      renderbuffer: true
     },
     "rgb565unorm-webgl": {
       gl: GL.RGB565,
       b: 2,
       c: 4,
-      wgpu: false
+      wgpu: false,
+      renderbuffer: true
     },
     "rgb5a1unorm-webgl": {
       gl: GL.RGB5_A1,
       b: 2,
       c: 4,
-      wgpu: false
+      wgpu: false,
+      renderbuffer: true
     },
     // 24-bit formats
-    "rbg8unorm-webgl": {
+    "rgb8unorm-webgl": {
       gl: GL.RGB8,
       b: 3,
       c: 3,
       wgpu: false
     },
-    "rbg8snorm-webgl": {
+    "rgb8snorm-webgl": {
       gl: GL.RGB8_SNORM,
       b: 3,
       c: 3,
@@ -4323,31 +4664,36 @@ var __exports__ = (() => {
       b: 4,
       c: 2,
       render: "texture-renderable-float16-webgl",
-      filter: "texture-filter-linear-float16-webgl"
+      filter: "texture-filter-linear-float16-webgl",
+      renderbuffer: true
     },
     "rg16unorm-webgl": {
       gl: GL.RG16_EXT,
       b: 2,
       c: 2,
-      f: "texture-formats-norm16-webgl"
+      f: "texture-formats-norm16-webgl",
+      x: EXT_TEXTURE_NORM16
     },
     "rg16snorm-webgl": {
       gl: GL.RG16_SNORM_EXT,
       b: 2,
       c: 2,
-      f: "texture-formats-norm16-webgl"
+      f: "texture-formats-norm16-webgl",
+      x: EXT_TEXTURE_NORM16
     },
     "r32uint": {
       gl: GL.R32UI,
       b: 4,
       c: 1,
-      bpp: 4
+      bpp: 4,
+      renderbuffer: true
     },
     "r32sint": {
       gl: GL.R32I,
       b: 4,
       c: 1,
-      bpp: 4
+      bpp: 4,
+      renderbuffer: true
     },
     "r32float": {
       gl: GL.R32F,
@@ -4371,13 +4717,15 @@ var __exports__ = (() => {
       b: 4,
       c: 3,
       p: 1,
-      render: "texture-renderable-float32-webgl"
+      render: "texture-renderable-float32-webgl",
+      renderbuffer: true
     },
     "rgb10a2unorm": {
       gl: GL.RGB10_A2,
       b: 4,
       c: 4,
-      p: 1
+      p: 1,
+      renderbuffer: true
     },
     // webgl2 only
     "rgb10a2unorm-webgl": {
@@ -4386,48 +4734,56 @@ var __exports__ = (() => {
       gl: GL.RGB10_A2UI,
       p: 1,
       wgpu: false,
-      bpp: 4
+      bpp: 4,
+      renderbuffer: true
     },
     // 48-bit formats
     "rgb16unorm-webgl": {
       gl: GL.RGB16_EXT,
       b: 2,
       c: 3,
-      f: "texture-formats-norm16-webgl"
+      f: "texture-formats-norm16-webgl",
+      x: EXT_TEXTURE_NORM16
     },
     "rgb16snorm-webgl": {
       gl: GL.RGB16_SNORM_EXT,
       b: 2,
       c: 3,
-      f: "texture-formats-norm16-webgl"
+      f: "texture-formats-norm16-webgl",
+      x: EXT_TEXTURE_NORM16
     },
     // 64-bit formats
     "rg32uint": {
       gl: GL.RG32UI,
       b: 8,
-      c: 2
+      c: 2,
+      renderbuffer: true
     },
     "rg32sint": {
       gl: GL.RG32I,
       b: 8,
-      c: 2
+      c: 2,
+      renderbuffer: true
     },
     "rg32float": {
       gl: GL.RG32F,
       b: 8,
       c: 2,
       render: "texture-renderable-float32-webgl",
-      filter: "texture-filter-linear-float32-webgl"
+      filter: "texture-filter-linear-float32-webgl",
+      renderbuffer: true
     },
     "rgba16uint": {
       gl: GL.RGBA16UI,
       b: 8,
-      c: 4
+      c: 4,
+      renderbuffer: true
     },
     "rgba16sint": {
       gl: GL.RGBA16I,
       b: 8,
-      c: 4
+      c: 4,
+      renderbuffer: true
     },
     "rgba16float": {
       gl: GL.RGBA16F,
@@ -4441,13 +4797,16 @@ var __exports__ = (() => {
       gl: GL.RGBA16_EXT,
       b: 2,
       c: 4,
-      f: "texture-formats-norm16-webgl"
+      f: "texture-formats-norm16-webgl",
+      renderbuffer: true,
+      x: EXT_TEXTURE_NORM16
     },
     "rgba16snorm-webgl": {
       gl: GL.RGBA16_SNORM_EXT,
       b: 2,
       c: 4,
-      f: "texture-formats-norm16-webgl"
+      f: "texture-formats-norm16-webgl",
+      x: EXT_TEXTURE_NORM16
     },
     // 96-bit formats (deprecated!)
     "rgb32float-webgl": {
@@ -4465,27 +4824,31 @@ var __exports__ = (() => {
     "rgba32uint": {
       gl: GL.RGBA32UI,
       b: 16,
-      c: 4
+      c: 4,
+      renderbuffer: true
     },
     "rgba32sint": {
       gl: GL.RGBA32I,
       b: 16,
-      c: 4
+      c: 4,
+      renderbuffer: true
     },
     "rgba32float": {
       gl: GL.RGBA32F,
-      gl1: GL.RGBA,
       b: 16,
       c: 4,
       render: "texture-renderable-float32-webgl",
-      filter: "texture-filter-linear-float32-webgl"
+      filter: "texture-filter-linear-float32-webgl",
+      renderbuffer: true
     },
     // Depth and stencil formats
     "stencil8": {
       gl: GL.STENCIL_INDEX8,
+      gl1: GL.STENCIL_INDEX8,
       b: 1,
       c: 1,
-      attachment: GL.STENCIL_ATTACHMENT
+      attachment: GL.STENCIL_ATTACHMENT,
+      renderbuffer: true
     },
     // 8 stencil bits
     "depth16unorm": {
@@ -4493,7 +4856,8 @@ var __exports__ = (() => {
       gl1: GL.DEPTH_COMPONENT16,
       b: 2,
       c: 1,
-      attachment: GL.DEPTH_ATTACHMENT
+      attachment: GL.DEPTH_ATTACHMENT,
+      renderbuffer: true
     },
     // 16 depth bits
     "depth24plus": {
@@ -4506,15 +4870,19 @@ var __exports__ = (() => {
       gl: GL.DEPTH_COMPONENT32F,
       b: 4,
       c: 1,
-      attachment: GL.DEPTH_ATTACHMENT
+      attachment: GL.DEPTH_ATTACHMENT,
+      renderbuffer: true
     },
+    // The depth component of the "depth24plus" and "depth24plus-stencil8" formats may be implemented as either a 24-bit depth value or a "depth32float" value.
     "depth24plus-stencil8": {
-      b: 4,
-      gl: GL.UNSIGNED_INT_24_8,
+      gl: GL.DEPTH_STENCIL,
       gl1: GL.DEPTH_STENCIL,
+      b: 4,
       c: 2,
       p: 1,
-      attachment: GL.DEPTH_STENCIL_ATTACHMENT
+      attachment: GL.DEPTH_STENCIL_ATTACHMENT,
+      renderbuffer: true,
+      depthTexture: true
     },
     // "depth24unorm-stencil8" feature
     "depth24unorm-stencil8": {
@@ -4522,7 +4890,8 @@ var __exports__ = (() => {
       b: 4,
       c: 2,
       p: 1,
-      attachment: GL.DEPTH_STENCIL_ATTACHMENT
+      attachment: GL.DEPTH_STENCIL_ATTACHMENT,
+      renderbuffer: true
     },
     // "depth32float-stencil8" feature
     "depth32float-stencil8": {
@@ -4530,7 +4899,8 @@ var __exports__ = (() => {
       b: 5,
       c: 2,
       p: 1,
-      attachment: GL.DEPTH_STENCIL_ATTACHMENT
+      attachment: GL.DEPTH_STENCIL_ATTACHMENT,
+      renderbuffer: true
     },
     // BC compressed formats: check device.features.has("texture-compression-bc");
     "bc1-rgb-unorm-webgl": {
@@ -4804,18 +5174,33 @@ var __exports__ = (() => {
       f: texture_compression_atc_webgl
     }
   };
-  function getTextureFormat(format) {
-    if (typeof format === "string") {
-      return format;
-    }
-    const entry = Object.entries(TEXTURE_FORMATS).find(([, entry2]) => entry2.gl === format || entry2.gl1 === format);
-    if (!entry) {
-      throw new Error(`Unknown texture format ${format}`);
-    }
-    return entry[0];
-  }
+  var DATA_FORMAT_CHANNELS = {
+    [GL.RED]: 1,
+    [GL.RED_INTEGER]: 1,
+    [GL.RG]: 2,
+    [GL.RG_INTEGER]: 2,
+    [GL.RGB]: 3,
+    [GL.RGB_INTEGER]: 3,
+    [GL.RGBA]: 4,
+    [GL.RGBA_INTEGER]: 4,
+    [GL.DEPTH_COMPONENT]: 1,
+    [GL.DEPTH_STENCIL]: 1,
+    [GL.ALPHA]: 1,
+    [GL.LUMINANCE]: 1,
+    [GL.LUMINANCE_ALPHA]: 2
+  };
+  var TYPE_SIZES2 = {
+    [GL.FLOAT]: 4,
+    [GL.UNSIGNED_INT]: 4,
+    [GL.INT]: 4,
+    [GL.UNSIGNED_SHORT]: 2,
+    [GL.SHORT]: 2,
+    [GL.HALF_FLOAT]: 2,
+    [GL.BYTE]: 1,
+    [GL.UNSIGNED_BYTE]: 1
+  };
   function isTextureFormatSupported(gl, formatOrGL) {
-    const format = getTextureFormat(formatOrGL);
+    const format = convertGLToTextureFormat(formatOrGL);
     const info = TEXTURE_FORMATS[format];
     if (!info) {
       return false;
@@ -4829,8 +5214,29 @@ var __exports__ = (() => {
     }
     return true;
   }
+  function isRenderbufferFormatSupported(gl, format) {
+    return isTextureFormatSupported(gl, format) && TEXTURE_FORMATS[format]?.renderbuffer;
+  }
+  function convertGLToTextureFormat(format) {
+    if (typeof format === "string") {
+      return format;
+    }
+    const entry = Object.entries(TEXTURE_FORMATS).find(([, entry2]) => entry2.gl === format || entry2.gl1 === format);
+    if (!entry) {
+      throw new Error(`Unknown texture format ${format}`);
+    }
+    return entry[0];
+  }
+  function convertTextureFormatToGL(format, isWebGL23) {
+    const formatInfo = TEXTURE_FORMATS[format];
+    const webglFormat = isWebGL23 ? formatInfo?.gl : formatInfo?.gl1;
+    if (webglFormat === void 0) {
+      throw new Error(`Unsupported texture format ${format}`);
+    }
+    return webglFormat;
+  }
   function isTextureFormatFilterable(gl, formatOrGL) {
-    const format = getTextureFormat(formatOrGL);
+    const format = convertGLToTextureFormat(formatOrGL);
     if (!isTextureFormatSupported(gl, format)) {
       return false;
     }
@@ -4851,7 +5257,7 @@ var __exports__ = (() => {
     return true;
   }
   function isTextureFormatRenderable(gl, formatOrGL) {
-    const format = getTextureFormat(formatOrGL);
+    const format = convertGLToTextureFormat(formatOrGL);
     if (!isTextureFormatSupported(gl, format)) {
       return false;
     }
@@ -4860,21 +5266,9 @@ var __exports__ = (() => {
     }
     return true;
   }
-  function getWebGLTextureFormat(gl, formatOrGL) {
-    const format = getTextureFormat(formatOrGL);
-    const formatInfo = TEXTURE_FORMATS[format];
-    const webglFormat = isWebGL2(gl) ? formatInfo?.gl : formatInfo?.gl1;
-    if (typeof format === "number") {
-      return webglFormat || format;
-    }
-    if (webglFormat === void 0) {
-      throw new Error(`Unsupported texture format ${format}`);
-    }
-    return webglFormat;
-  }
-  function getWebGLTextureParameters(gl, formatOrGL) {
-    const format = getTextureFormat(formatOrGL);
-    const webglFormat = getWebGLTextureFormat(gl, format);
+  function getWebGLTextureParameters(formatOrGL, isWebGL23) {
+    const format = convertGLToTextureFormat(formatOrGL);
+    const webglFormat = convertTextureFormatToGL(format, isWebGL23);
     const decoded = decodeTextureFormat(format);
     return {
       format: webglFormat,
@@ -4884,17 +5278,12 @@ var __exports__ = (() => {
       compressed: decoded.compressed
     };
   }
-  function getWebGLDepthStencilAttachment(formatOrGL) {
-    const format = getTextureFormat(formatOrGL);
-    if (typeof format === "number") {
-      throw new Error("unsupported depth stencil format");
-    }
+  function getDepthStencilAttachmentWebGL(format) {
     const info = TEXTURE_FORMATS[format];
-    const attachment = info.attachment;
-    if (!attachment) {
-      throw new Error("not a depth stencil format");
+    if (!info?.attachment) {
+      throw new Error(`${format} is not a depth stencil format`);
     }
-    return attachment;
+    return info.attachment;
   }
   function _checkFloat32ColorAttachment(gl, internalFormat = gl.RGBA, srcFormat = GL.RGBA, srcType = GL.UNSIGNED_BYTE) {
     let texture = null;
@@ -4919,34 +5308,9 @@ var __exports__ = (() => {
       gl.deleteFramebuffer(framebuffer);
     }
   }
-  var DATA_FORMAT_CHANNELS = {
-    [GL.RED]: 1,
-    [GL.RED_INTEGER]: 1,
-    [GL.RG]: 2,
-    [GL.RG_INTEGER]: 2,
-    [GL.RGB]: 3,
-    [GL.RGB_INTEGER]: 3,
-    [GL.RGBA]: 4,
-    [GL.RGBA_INTEGER]: 4,
-    [GL.DEPTH_COMPONENT]: 1,
-    [GL.DEPTH_STENCIL]: 1,
-    [GL.ALPHA]: 1,
-    [GL.LUMINANCE]: 1,
-    [GL.LUMINANCE_ALPHA]: 2
-  };
-  var TYPE_SIZES2 = {
-    [GL.FLOAT]: 4,
-    [GL.UNSIGNED_INT]: 4,
-    [GL.INT]: 4,
-    [GL.UNSIGNED_SHORT]: 2,
-    [GL.SHORT]: 2,
-    [GL.HALF_FLOAT]: 2,
-    [GL.BYTE]: 1,
-    [GL.UNSIGNED_BYTE]: 1
-  };
-  function getTextureFormatBytesPerPixel(gl, formatOrGL) {
-    const format = getTextureFormat(formatOrGL);
-    const params = getWebGLTextureParameters(gl, format);
+  function getTextureFormatBytesPerPixel(formatOrGL, isWebGL23) {
+    const format = convertGLToTextureFormat(formatOrGL);
+    const params = getWebGLTextureParameters(format, isWebGL23);
     const channels = DATA_FORMAT_CHANNELS[params.dataFormat] || 4;
     const channelSize = TYPE_SIZES2[params.type] || 1;
     return channels * channelSize;
@@ -5351,22 +5715,22 @@ void main(void) {}`;
   }
   function convertCompareFunction(parameter, value) {
     return map(parameter, value, {
-      "never": GL.NEVER,
-      "less": GL.LESS,
-      "equal": GL.EQUAL,
+      never: GL.NEVER,
+      less: GL.LESS,
+      equal: GL.EQUAL,
       "less-equal": GL.LEQUAL,
-      "greater": GL.GREATER,
+      greater: GL.GREATER,
       "not-equal": GL.NOTEQUAL,
       "greater-equal": GL.GEQUAL,
-      "always": GL.ALWAYS
+      always: GL.ALWAYS
     });
   }
   function convertStencilOperation(parameter, value) {
     return map(parameter, value, {
-      "keep": GL.KEEP,
-      "zero": GL.ZERO,
-      "replace": GL.REPLACE,
-      "invert": GL.INVERT,
+      keep: GL.KEEP,
+      zero: GL.ZERO,
+      replace: GL.REPLACE,
+      invert: GL.INVERT,
       "increment-clamp": GL.INCR,
       "decrement-clamp": GL.DECR,
       "increment-wrap": GL.INCR_WRAP,
@@ -5524,16 +5888,17 @@ void main(void) {}`;
         this.trackDeallocatedMemory();
         this.gl.deleteBuffer(this.handle);
         this.destroyed = true;
+        this.handle = null;
       }
     }
     write(data, byteOffset = 0) {
       const srcOffset = 0;
-      const byteLength = data.byteLength;
+      const byteLength = void 0;
       const target = this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.target;
       this.gl.bindBuffer(target, this.handle);
       if (srcOffset !== 0 || byteLength !== void 0) {
         this.device.assertWebGL2();
-        this.gl.bufferSubData(this.target, byteOffset, data, srcOffset, byteLength);
+        this.gl2.bufferSubData(target, byteOffset, data, srcOffset, byteLength);
       } else {
         this.gl.bufferSubData(target, byteOffset, data);
       }
@@ -5623,11 +5988,21 @@ void main(void) {}`;
   };
 
   // src/adapter/resources/webgl-texture.ts
+  var DEFAULT_WEBGL_TEXTURE_PROPS = {
+    // deprecated
+    parameters: {},
+    pixelStore: {},
+    pixels: null,
+    border: 0,
+    dataFormat: void 0,
+    textureUnit: void 0,
+    target: void 0
+  };
   var _WEBGLTexture = class extends Texture {
-    width = void 0;
-    height = void 0;
-    depth = void 0;
-    format = void 0;
+    /** Sampler object (currently unused) */
+    sampler = void 0;
+    // data;
+    glFormat = void 0;
     type = void 0;
     dataFormat = void 0;
     mipmaps = void 0;
@@ -5641,8 +6016,6 @@ void main(void) {}`;
      * attempting to bind it as GL_TEXTURE_3D will give rise to a run-time error
      * */
     textureUnit = void 0;
-    /** Sampler object (currently unused) */
-    sampler = void 0;
     /**
      * Program.draw() checks the loaded flag of all textures to avoid
      * Textures that are still loading from promises
@@ -5651,7 +6024,8 @@ void main(void) {}`;
     loaded = false;
     constructor(device, props) {
       super(device, {
-        format: GL.RGBA,
+        ...DEFAULT_WEBGL_TEXTURE_PROPS,
+        format: "rgba8unorm",
         ...props
       });
       this.device = cast(device);
@@ -5662,6 +6036,7 @@ void main(void) {}`;
         ...this.props,
         data: typeof this.props.data
       });
+      this.glFormat = GL.RGBA;
       this.target = getWebGLTextureTarget(this.props);
       this.loaded = false;
       if (typeof this.props?.data === "string") {
@@ -5707,7 +6082,6 @@ void main(void) {}`;
       } = props;
       const {
         pixels = null,
-        recreate = false,
         pixelStore = {},
         textureUnit = void 0
       } = props;
@@ -5725,6 +6099,7 @@ void main(void) {}`;
       const {
         depth = 0
       } = props;
+      const glFormat = convertTextureFormatToGL(props.format, this.device.isWebGL2);
       ({
         width,
         height,
@@ -5740,11 +6115,9 @@ void main(void) {}`;
         width,
         height
       }));
-      const format = getWebGLTextureFormat(this.gl, props.format);
       this.width = width;
       this.height = height;
-      this.depth = depth;
-      this.format = format;
+      this.glFormat = glFormat;
       this.type = type;
       this.dataFormat = dataFormat;
       this.textureUnit = textureUnit;
@@ -5762,7 +6135,7 @@ void main(void) {}`;
         width,
         height,
         depth,
-        format,
+        format: glFormat,
         type,
         dataFormat,
         // @ts-expect-error 
@@ -5774,9 +6147,6 @@ void main(void) {}`;
       if (mipmaps) {
         this.generateMipmap();
       }
-      if (recreate) {
-        this.data = data;
-      }
       if (isVideo) {
         this._video = {
           video: data,
@@ -5894,7 +6264,7 @@ void main(void) {}`;
      */
     // eslint-disable-next-line max-statements, complexity
     setImageData(options) {
-      if (this.props.dimension === "3d") {
+      if (this.props.dimension === "3d" || this.props.dimension === "2d-array") {
         return this.setImageData3D(options);
       }
       this.trackDeallocatedMemory("Texture");
@@ -5902,7 +6272,7 @@ void main(void) {}`;
         target = this.target,
         pixels = null,
         level = 0,
-        format = this.format,
+        glFormat = this.glFormat,
         offset = 0,
         parameters = {}
       } = options;
@@ -5948,13 +6318,13 @@ void main(void) {}`;
       withParameters(this.gl, parameters, () => {
         switch (dataType) {
           case "null":
-            gl.texImage2D(target, level, format, width, height, 0, dataFormat, type, data);
+            gl.texImage2D(target, level, glFormat, width, height, 0, dataFormat, type, data);
             break;
           case "typed-array":
             gl.texImage2D(
               target,
               level,
-              format,
+              glFormat,
               width,
               height,
               0,
@@ -5969,14 +6339,14 @@ void main(void) {}`;
           case "buffer":
             gl2 = this.device.assertWebGL2();
             gl2.bindBuffer(GL.PIXEL_UNPACK_BUFFER, data.handle || data);
-            gl2.texImage2D(target, level, format, width, height, 0, dataFormat, type, offset);
+            gl2.texImage2D(target, level, glFormat, width, height, 0, dataFormat, type, offset);
             gl2.bindBuffer(GL.PIXEL_UNPACK_BUFFER, null);
             break;
           case "browser-object":
             if (this.device.isWebGL2) {
-              gl.texImage2D(target, level, format, width, height, 0, dataFormat, type, data);
+              gl.texImage2D(target, level, glFormat, width, height, 0, dataFormat, type, data);
             } else {
-              gl.texImage2D(target, level, format, dataFormat, type, data);
+              gl.texImage2D(target, level, glFormat, dataFormat, type, data);
             }
             break;
           case "compressed":
@@ -5991,7 +6361,7 @@ void main(void) {}`;
       if (data && data.byteLength) {
         this.trackAllocatedMemory(data.byteLength, "Texture");
       } else {
-        const bytesPerPixel = getTextureFormatBytesPerPixel(this.gl, this.props.format);
+        const bytesPerPixel = getTextureFormatBytesPerPixel(this.props.format, this.device.isWebGL2);
         this.trackAllocatedMemory(this.width * this.height * bytesPerPixel, "Texture");
       }
       this.loaded = true;
@@ -6011,7 +6381,7 @@ void main(void) {}`;
       width = this.width,
       height = this.height,
       level = 0,
-      format = this.format,
+      glFormat = this.glFormat,
       type = this.type,
       dataFormat = this.dataFormat,
       compressed = false,
@@ -6049,7 +6419,7 @@ void main(void) {}`;
       this.gl.bindTexture(this.target, this.handle);
       withParameters(this.gl, parameters, () => {
         if (compressed) {
-          this.gl.compressedTexSubImage2D(target, level, x, y, width, height, format, data);
+          this.gl.compressedTexSubImage2D(target, level, x, y, width, height, glFormat, data);
         } else if (data === null) {
           this.gl.texSubImage2D(target, level, x, y, width, height, dataFormat, type, null);
         } else if (ArrayBuffer.isView(data)) {
@@ -6158,7 +6528,7 @@ void main(void) {}`;
         type,
         compressed
       } = opts;
-      const parameters = getWebGLTextureParameters(this.gl, format);
+      const parameters = getWebGLTextureParameters(format, this.device.isWebGL2);
       dataFormat = dataFormat || parameters.dataFormat;
       type = type || parameters.type;
       compressed = compressed || parameters.compressed;
@@ -6301,7 +6671,7 @@ void main(void) {}`;
       } = options;
       this.trackDeallocatedMemory("Texture");
       this.gl.bindTexture(this.target, this.handle);
-      const webglTextureFormat = getWebGLTextureParameters(this.gl, format);
+      const webglTextureFormat = getWebGLTextureParameters(format, this.device.isWebGL2);
       withParameters(this.gl, parameters, () => {
         if (ArrayBuffer.isView(data)) {
           this.gl.texImage3D(
@@ -6326,7 +6696,7 @@ void main(void) {}`;
       if (data && data.byteLength) {
         this.trackAllocatedMemory(data.byteLength, "Texture");
       } else {
-        const bytesPerPixel = getTextureFormatBytesPerPixel(this.gl, this.props.format);
+        const bytesPerPixel = getTextureFormatBytesPerPixel(this.props.format, this.device.isWebGL2);
         this.trackAllocatedMemory(this.width * this.height * this.depth * bytesPerPixel, "Texture");
       }
       this.loaded = true;
@@ -6425,16 +6795,6 @@ void main(void) {}`;
     assert2(value !== void 0, `Accessing undefined constant GL.${name}`);
     return value;
   }
-  function getKey(gl, value) {
-    gl = gl.gl || gl;
-    value = Number(value);
-    for (const key in gl) {
-      if (gl[key] === value) {
-        return `GL.${key}`;
-      }
-    }
-    return String(value);
-  }
 
   // src/adapter/objects/webgl-resource.ts
   var ERR_RESOURCE_METHOD_UNDEFINED = "Resource subclass must define virtual methods";
@@ -6465,9 +6825,6 @@ void main(void) {}`;
     get handle() {
       return this._handle;
     }
-    destroy() {
-      this.delete();
-    }
     delete({
       deleteChildren = false
     } = {}) {
@@ -6477,7 +6834,7 @@ void main(void) {}`;
       }
       this._handle = null;
       if (children && deleteChildren) {
-        children.filter(Boolean).forEach((child) => child.delete());
+        children.filter(Boolean).forEach((child) => child.destroy());
       }
       return this;
     }
@@ -6540,10 +6897,10 @@ void main(void) {}`;
         const parameter = PARAMETERS[pname];
         const parameterAvailable = parameter && (!("webgl2" in parameter) || isWebgl2) && (!("extension" in parameter) || this.gl.getExtension(parameter.extension));
         if (parameterAvailable) {
-          const key = keys ? getKey(this.gl, pname) : pname;
+          const key = keys ? this.device.getGLKey(pname) : pname;
           values[key] = this.getParameter(pname, options);
           if (keys && parameter.type === "GLenum") {
-            values[key] = getKey(this.gl, values[key]);
+            values[key] = this.device.getGLKey(values[key]);
           }
         }
       }
@@ -6641,204 +6998,8 @@ void main(void) {}`;
     */
   };
 
-  // src/adapter/converters/renderbuffer-formats.ts
-  function isRenderbufferFormatSupported(gl, format) {
-    const info = RENDERBUFFER_FORMATS[format];
-    if (!info) {
-      return false;
-    }
-    if (info.ext) {
-      return Boolean(gl.getExtension(info.ext));
-    }
-    if (info.gl2) {
-      return isWebGL2(gl);
-    }
-    return true;
-  }
-  function getRenderbufferFormatBytesPerPixel(format) {
-    return RENDERBUFFER_FORMATS[format].bpp;
-  }
-  var EXT_FLOAT_WEBGL2 = "EXT_color_buffer_float";
-  var RENDERBUFFER_FORMATS = {
-    [GL.DEPTH_COMPONENT16]: {
-      bpp: 2
-    },
-    // 16 depth bits.
-    [GL.DEPTH_COMPONENT24]: {
-      gl2: true,
-      bpp: 3
-    },
-    [GL.DEPTH_COMPONENT32F]: {
-      gl2: true,
-      bpp: 4
-    },
-    [GL.STENCIL_INDEX8]: {
-      bpp: 1
-    },
-    // 8 stencil bits.
-    [GL.DEPTH_STENCIL]: {
-      bpp: 4
-    },
-    [GL.DEPTH24_STENCIL8]: {
-      gl2: true,
-      bpp: 4
-    },
-    [GL.DEPTH32F_STENCIL8]: {
-      gl2: true,
-      bpp: 5
-    },
-    // When using a WebGL 1 context, color renderbuffer formats are limited
-    [GL.RGBA4]: {
-      bpp: 2
-    },
-    [GL.RGB565]: {
-      bpp: 2
-    },
-    [GL.RGB5_A1]: {
-      bpp: 2
-    },
-    // When using a WebGL 2 context, the following values are available additionally:
-    [GL.R8]: {
-      gl2: true,
-      bpp: 1
-    },
-    [GL.R8UI]: {
-      gl2: true,
-      bpp: 1
-    },
-    [GL.R8I]: {
-      gl2: true,
-      bpp: 1
-    },
-    [GL.R16UI]: {
-      gl2: true,
-      bpp: 2
-    },
-    [GL.R16I]: {
-      gl2: true,
-      bpp: 2
-    },
-    [GL.R32UI]: {
-      gl2: true,
-      bpp: 4
-    },
-    [GL.R32I]: {
-      gl2: true,
-      bpp: 4
-    },
-    [GL.RG8]: {
-      gl2: true,
-      bpp: 2
-    },
-    [GL.RG8UI]: {
-      gl2: true,
-      bpp: 2
-    },
-    [GL.RG8I]: {
-      gl2: true,
-      bpp: 2
-    },
-    [GL.RG16UI]: {
-      gl2: true,
-      bpp: 4
-    },
-    [GL.RG16I]: {
-      gl2: true,
-      bpp: 4
-    },
-    [GL.RG32UI]: {
-      gl2: true,
-      bpp: 8
-    },
-    [GL.RG32I]: {
-      gl2: true,
-      bpp: 8
-    },
-    [GL.RGB8]: {
-      gl2: true,
-      bpp: 3
-    },
-    [GL.RGBA8]: {
-      gl2: true,
-      bpp: 4
-    },
-    // [GL.SRGB8_ALPHA8]: {gl2: true, gl1: SRGB}, // When using the EXT_sRGB WebGL1 extension
-    [GL.RGB10_A2]: {
-      gl2: true,
-      bpp: 4
-    },
-    [GL.RGBA8UI]: {
-      gl2: true,
-      bpp: 4
-    },
-    [GL.RGBA8I]: {
-      gl2: true,
-      bpp: 4
-    },
-    [GL.RGB10_A2UI]: {
-      gl2: true,
-      bpp: 4
-    },
-    [GL.RGBA16UI]: {
-      gl2: true,
-      bpp: 8
-    },
-    [GL.RGBA16I]: {
-      gl2: true,
-      bpp: 8
-    },
-    [GL.RGBA32I]: {
-      gl2: true,
-      bpp: 16
-    },
-    [GL.RGBA32UI]: {
-      gl2: true,
-      bpp: 16
-    },
-    // When using a WebGL 2 context and the EXT_color_buffer_float WebGL2 extension
-    [GL.R16F]: {
-      ext: EXT_FLOAT_WEBGL2,
-      bpp: 2
-    },
-    [GL.RG16F]: {
-      ext: EXT_FLOAT_WEBGL2,
-      bpp: 4
-    },
-    [GL.RGBA16F]: {
-      ext: EXT_FLOAT_WEBGL2,
-      bpp: 8
-    },
-    [GL.R32F]: {
-      ext: EXT_FLOAT_WEBGL2,
-      bpp: 4
-    },
-    [GL.RG32F]: {
-      ext: EXT_FLOAT_WEBGL2,
-      bpp: 8
-    },
-    // TODO - can't get WEBGL_color_buffer_float to work on renderbuffers
-    [GL.RGBA32F]: {
-      ext: EXT_FLOAT_WEBGL2,
-      bpp: 16
-    },
-    // [GL.RGBA32F]: {ext: EXT_FLOAT_WEBGL2, gl1: EXT_FLOAT_WEBGL1},
-    [GL.R11F_G11F_B10F]: {
-      ext: EXT_FLOAT_WEBGL2,
-      bpp: 4
-    }
-  };
-
   // src/adapter/objects/webgl-renderbuffer.ts
-  var DEFAULT_RENDERBUFFER_PROPS = {
-    id: void 0,
-    handle: void 0,
-    userData: void 0,
-    format: 0,
-    width: 1,
-    height: 1,
-    samples: 0
-  };
-  var WEBGLRenderbuffer = class extends WebGLResource {
+  var _WEBGLRenderbuffer = class extends WebGLResource {
     get [Symbol.toStringTag]() {
       return "Renderbuffer";
     }
@@ -6854,11 +7015,19 @@ void main(void) {}`;
     get samples() {
       return this.props.samples;
     }
-    static isSupported(gl, options) {
-      return !options?.format || isRenderbufferFormatSupported(gl, options.format);
+    get attachment() {
+      return;
+    }
+    /** WebGL format constant */
+    static isTextureFormatSupported(device, format) {
+      return isRenderbufferFormatSupported(device.gl, format);
     }
     constructor(device, props) {
-      super(device, props, DEFAULT_RENDERBUFFER_PROPS);
+      if (typeof props.format === "number") {
+        throw new Error("Renderbuffer");
+      }
+      super(device, props, _WEBGLRenderbuffer.defaultProps);
+      this.glFormat = convertTextureFormatToGL(this.props.format, device.isWebGL2);
       this._initialize(this.props);
     }
     resize(size) {
@@ -6870,7 +7039,6 @@ void main(void) {}`;
         });
         this._initialize(this.props);
       }
-      return this;
     }
     // PRIVATE METHODS
     /** Creates and initializes a renderbuffer object's data store */
@@ -6885,13 +7053,12 @@ void main(void) {}`;
       this.trackDeallocatedMemory();
       this.gl.bindRenderbuffer(GL.RENDERBUFFER, this.handle);
       if (samples !== 0 && this.device.isWebGL2) {
-        this.gl.renderbufferStorageMultisample(GL.RENDERBUFFER, samples, format, width, height);
+        this.gl2.renderbufferStorageMultisample(GL.RENDERBUFFER, samples, this.glFormat, width, height);
       } else {
-        this.gl.renderbufferStorage(GL.RENDERBUFFER, format, width, height);
+        this.gl.renderbufferStorage(GL.RENDERBUFFER, this.glFormat, width, height);
       }
       this.gl.bindRenderbuffer(GL.RENDERBUFFER, null);
-      this.trackAllocatedMemory(width * height * (samples || 1) * getRenderbufferFormatBytesPerPixel(format));
-      return this;
+      this.trackAllocatedMemory(width * height * (samples || 1) * getTextureFormatBytesPerPixel(this.glFormat, this.device.isWebGL2));
     }
     // RESOURCE IMPLEMENTATION
     _createHandle() {
@@ -6905,51 +7072,57 @@ void main(void) {}`;
       this.gl.bindRenderbuffer(GL.RENDERBUFFER, handle);
     }
   };
+  var WEBGLRenderbuffer = _WEBGLRenderbuffer;
+  __publicField(WEBGLRenderbuffer, "defaultProps", {
+    id: void 0,
+    handle: void 0,
+    userData: void 0,
+    format: void 0,
+    // 'depth16unorm'
+    width: 1,
+    height: 1,
+    samples: 0
+  });
 
   // src/adapter/resources/webgl-framebuffer.ts
   var WEBGLFramebuffer = class extends Framebuffer {
     get texture() {
       return this.colorAttachments[0];
     }
-    colorAttachments = [];
-    depthStencilAttachment = null;
-    _ownResources = [];
     constructor(device, props) {
       super(device, props);
+      const isDefaultFramebuffer = props.handle === null;
       this.device = device;
       this.gl = device.gl;
-      this.handle = this.props.handle !== void 0 ? this.props.handle : this.gl.createFramebuffer();
-      if (this.handle) {
+      this.handle = this.props.handle || isDefaultFramebuffer ? this.props.handle : this.gl.createFramebuffer();
+      if (!isDefaultFramebuffer) {
         device.setSpectorMetadata(this.handle, {
           id: this.props.id,
           props: this.props
         });
-      }
-      this.colorAttachments = this._createColorAttachments();
-      this.depthStencilAttachment = this._createDepthStencilAttachment();
-      const prevHandle = this.gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
-      for (let i = 0; i < this.colorAttachments.length; ++i) {
-        const attachment = this.colorAttachments[i];
-        const attachmentPoint = GL.COLOR_ATTACHMENT0 + i;
-        if (attachment) {
-          this._attachOne(attachmentPoint, attachment);
+        this.autoCreateAttachmentTextures();
+        this.gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
+        for (let i = 0; i < this.colorAttachments.length; ++i) {
+          const attachment = this.colorAttachments[i];
+          const attachmentPoint = GL.COLOR_ATTACHMENT0 + i;
+          if (attachment) {
+            this._attachOne(attachmentPoint, attachment);
+          }
         }
+        if (this.depthStencilAttachment) {
+          this._attachOne(getDepthStencilAttachmentWebGL(this.depthStencilAttachment.format), this.depthStencilAttachment);
+        }
+        this.gl.bindFramebuffer(GL.FRAMEBUFFER, null);
       }
-      if (this.props.depthStencilAttachment) {
-        this._attachOne(getWebGLDepthStencilAttachment(this.depthStencilAttachment.format), this.depthStencilAttachment);
-      }
-      this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
       if (props.check !== false) {
         this._checkStatus();
       }
     }
+    /** destroys any auto created resources etc. */
     destroy() {
-      if (this.handle !== null) {
-        for (const resource of this._ownResources) {
-          resource.destroy();
-        }
+      super.destroy();
+      if (!this.destroyed && this.handle !== null) {
         this.gl.deleteFramebuffer(this.handle);
-        this.destroyed = true;
       }
     }
     // PRIVATE
@@ -6958,84 +7131,29 @@ void main(void) {}`;
       const {
         gl
       } = this;
-      const prevHandle = gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
+      const prevHandle2 = gl.bindFramebuffer(GL.FRAMEBUFFER, this.handle);
       const status = gl.checkFramebufferStatus(GL.FRAMEBUFFER);
-      gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+      gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle2 || null);
       if (status !== gl.FRAMEBUFFER_COMPLETE) {
         throw new Error(`Framebuffer ${_getFrameBufferStatus(status)}`);
       }
     }
-    _createColorAttachments() {
-      return this.props.colorAttachments.map((colorAttachment) => {
-        if (!colorAttachment) {
-          return void 0;
-        }
-        if (colorAttachment instanceof WEBGLTexture) {
-          return colorAttachment;
-        }
-        return this._createColorAttachment(colorAttachment, this.width, this.height);
-      });
-    }
-    /** Create a color attachment */
-    _createColorAttachment(format, width, height) {
-      const texture = this.device._createTexture({
-        id: `${this.id}-color`,
-        data: null,
-        // reserves texture memory, but texels are undefined
-        format,
-        // type: GL.UNSIGNED_BYTE,
-        width,
-        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
-        // }
-      });
-      this._ownResources.push(texture);
-      return texture;
-    }
-    /** Create a depth stencil attachment GL.DEPTH24_STENCIL8 */
-    _createDepthStencilAttachment() {
-      if (!this.props.depthStencilAttachment) {
-        return void 0;
-      }
-      if (this.props.depthStencilAttachment instanceof WEBGLRenderbuffer) {
-        return this.props.depthStencilAttachment;
-      }
-      if (this.props.depthStencilAttachment instanceof Texture) {
-        return this.props.depthStencilAttachment;
-      }
-      const format = this.props.depthStencilAttachment;
-      const webglFormat = getWebGLTextureFormat(this.gl, format);
-      const texture = new WEBGLRenderbuffer(this.device, {
+    /** In WebGL we must use renderbuffers for depth/stencil attachments (unless we have extensions) */
+    createDepthStencilTexture(format) {
+      return new WEBGLRenderbuffer(this.device, {
         id: `${this.id}-depth-stencil`,
         // TODO misleading if not depth and stencil?
-        format: webglFormat,
+        format,
         // dataFormat: GL.DEPTH_STENCIL,
         // type: GL.UNSIGNED_INT_24_8,
         width: this.width,
         height: this.height
       });
-      this._ownResources.push(texture);
-      return texture;
     }
-    /** Attachment resize is expected to be a noop if size is same */
-    _resizeAttachments(width, height) {
+    /** 
+     * Attachment resize is expected to be a noop if size is same 
+     */
+    resizeAttachments(width, height) {
       if (this.handle === null) {
         this.width = this.gl.drawingBufferWidth;
         this.height = this.gl.drawingBufferHeight;
@@ -7047,25 +7165,24 @@ void main(void) {}`;
       if (height === void 0) {
         height = this.gl.drawingBufferHeight;
       }
-      if (width !== this.width && height !== this.height) {
-        log.log(2, `Resizing framebuffer ${this.id} to ${width}x${height}`)();
-      }
       for (const colorAttachment of this.colorAttachments) {
         colorAttachment.resize({
           width,
           height
         });
       }
-      this.depthStencilAttachment?.resize({
-        width,
-        height
-      });
+      if (this.depthStencilAttachment) {
+        this.depthStencilAttachment.resize({
+          width,
+          height
+        });
+      }
       return this;
     }
     /** Attach one attachment */
     _attachOne(attachmentPoint, attachment) {
       if (attachment instanceof WEBGLRenderbuffer) {
-        this._attachRenderbuffer(attachmentPoint, attachment);
+        this._attachWEBGLRenderbuffer(attachmentPoint, attachment);
         return attachment;
       } else if (Array.isArray(attachment)) {
         const [texture, layer = 0, level = 0] = attachment;
@@ -7077,13 +7194,13 @@ void main(void) {}`;
       }
       throw new Error("attach");
     }
-    _attachRenderbuffer(attachment, renderbuffer) {
+    _attachWEBGLRenderbuffer(attachment, renderbuffer) {
       this.gl.framebufferRenderbuffer(GL.FRAMEBUFFER, attachment, GL.RENDERBUFFER, renderbuffer.handle);
     }
     /**
      * @param attachment
      * @param texture
-     * @param layer = 0 - index into WebGLTextureArray and Texture3D or face for `TextureCubeMap`
+     * @param layer = 0 - index into WEBGLTextureArray and Texture3D or face for `TextureCubeMap`
      * @param level  = 0 - mipmapLevel (must be 0 in WebGL1)
      */
     _attachTexture(attachment, texture, layer, level) {
@@ -7565,12 +7682,9 @@ void main(void) {}`;
       }
       Object.seal(this);
     }
-    write(data, byteOffset) {
-      this.subData({
-        data,
-        offset: byteOffset
-      });
-    }
+    // override write(data: TypedArray, byteOffset: number = 0): void {
+    //   this.subData({data, offset: byteOffset});
+    // }
     // returns number of elements in the buffer (assuming that the full buffer is used)
     getElementCount(accessor = this.accessor) {
       return Math.round(this.byteLength / Accessor.getBytesPerElement(accessor));
@@ -7982,10 +8096,17 @@ ${formattedLog}`)();
   }
 
   // src/adapter/resources/webgl-render-pass.ts
+  var GL_DEPTH_BUFFER_BIT = 256;
+  var GL_STENCIL_BUFFER_BIT = 1024;
+  var GL_COLOR_BUFFER_BIT = 16384;
+  var GL_COLOR = 6144;
   var WEBGLRenderPass = class extends RenderPass {
+    /** Parameters that should be applied before each draw call */
     constructor(device, props) {
       super(device, props);
       this.device = device;
+      this.setParameters(this.props.parameters);
+      this.clear();
     }
     end() {
     }
@@ -7999,6 +8120,102 @@ ${formattedLog}`)();
     // beginOcclusionQuery(queryIndex: number): void;
     // endOcclusionQuery(): void;
     // executeBundles(bundles: Iterable<GPURenderBundle>): void;
+    /**
+     * Maps RenderPass parameters to GL parameters
+     */
+    setParameters(parameters = {}) {
+      const glParameters = {};
+      if (this.props.framebuffer) {
+        glParameters.framebuffer = this.props.framebuffer;
+      }
+      if (this.props.depthReadOnly) {
+        glParameters.depthMask = !this.props.depthReadOnly;
+      }
+      glParameters.stencilMask = this.props.stencilReadOnly ? 0 : 1;
+      glParameters[GL.RASTERIZER_DISCARD] = this.props.discard;
+      if (parameters.viewport) {
+        glParameters.viewport = parameters.viewport;
+        glParameters.depthRange = [parameters.viewport[4], parameters.viewport[5]];
+      }
+      glParameters.scissorTest = Boolean(parameters.scissorRect);
+      if (parameters.scissorRect) {
+        glParameters.scissor = parameters.scissorRect;
+      }
+      if (parameters.blendConstant) {
+        glParameters.blendColor = parameters.blendConstant;
+      }
+      if (parameters.stencilReference) {
+        console.warn("RenderPassParameters.stencilReference not yet implemented in WebGL");
+        parameters[GL.STENCIL_REF] = parameters.stencilReference;
+      }
+      this.glParameters = glParameters;
+    }
+    // Internal
+    /**
+     * Optionally clears depth, color and stencil buffers based on parameters
+     */
+    clear() {
+      const glParameters = {
+        ...this.glParameters
+      };
+      let clearMask = 0;
+      if (this.props.clearColor !== false) {
+        clearMask |= GL_COLOR_BUFFER_BIT;
+        glParameters.clearColor = this.props.clearColor;
+      }
+      if (this.props.clearDepth !== false) {
+        clearMask |= GL_DEPTH_BUFFER_BIT;
+        glParameters.clearDepth = this.props.clearDepth;
+      }
+      if (this.props.clearStencil !== false) {
+        clearMask |= GL_STENCIL_BUFFER_BIT;
+        glParameters.clearStencil = this.props.clearStencil;
+      }
+      if (clearMask !== 0) {
+        withParameters(this.device, glParameters, () => {
+          this.device.gl.clear(clearMask);
+        });
+      }
+    }
+    /** 
+     * WebGL2 - clear a specific color buffer 
+     */
+    clearColorBuffer(drawBuffer = 0, value = [0, 0, 0, 0]) {
+      withParameters(this.device.gl2, {
+        framebuffer: this.props.framebuffer
+      }, () => {
+        switch (value.constructor) {
+          case Int32Array:
+            this.device.gl2.clearBufferiv(GL_COLOR, drawBuffer, value);
+            break;
+          case Uint32Array:
+            this.device.gl2.clearBufferuiv(GL_COLOR, drawBuffer, value);
+            break;
+          case Float32Array:
+          default:
+            this.device.gl2.clearBufferfv(GL_COLOR, drawBuffer, value);
+            break;
+        }
+      });
+    }
+    // clearDepthStencil() {
+    // const GL_DEPTH = 0x1801;
+    // const GL_STENCIL = 0x1802;
+    // const GL_DEPTH_STENCIL = 0x84f9;
+    //     case GL_DEPTH:
+    //       this.device.gl2.clearBufferfv(GL_DEPTH, 0, [value]);
+    //       break;
+    //     case GL_STENCIL:
+    //       this.device.gl2.clearBufferiv(GL_STENCIL, 0, [value]);
+    //       break;
+    //     case GL_DEPTH_STENCIL:
+    //       const [depth, stencil] = value;
+    //       this.device.gl2.clearBufferfi(GL_DEPTH_STENCIL, 0, depth, stencil);
+    //       break;
+    //     default:
+    //       assert(false, ERR_ARGUMENTS);
+    //   }
+    // });
   };
 
   // src/adapter/helpers/uniforms.ts
@@ -8654,7 +8871,7 @@ ${formattedLog}`)();
      */
     draw(options) {
       const {
-        renderPass = this.device.getDefaultRenderPass(),
+        renderPass,
         vertexCount,
         // indexCount,
         instanceCount,
@@ -8679,10 +8896,9 @@ ${formattedLog}`)();
         }
         this._applyBindings();
         this._applyUniforms();
+        const webglRenderPass = renderPass;
         withDeviceParameters(this.device, this.props.parameters, () => {
-          withGLParameters(this.device, {
-            framebuffer: renderPass.props.framebuffer
-          }, () => {
+          withGLParameters(this.device, webglRenderPass.glParameters, () => {
             if (isIndexed && isInstanced) {
               this.device.gl2?.drawElementsInstanced(
                 drawMode,
@@ -8858,6 +9074,257 @@ ${formattedLog}`)();
     return layout.attributes.find((binding) => binding.name === name) || null;
   }
 
+  // src/adapter/resources/webgl-command-buffer.ts
+  function cast2(value) {
+    return value;
+  }
+  var WEBGLCommandBuffer = class extends CommandBuffer {
+    commands = [];
+    constructor(device) {
+      super({});
+      this.device = device;
+    }
+    submitCommands(commands = this.commands) {
+      for (const command of commands) {
+        switch (command.name) {
+          case "copy-buffer-to-buffer":
+            _copyBufferToBuffer(this.device, command.options);
+            break;
+          case "copy-buffer-to-texture":
+            _copyBufferToTexture(this.device, command.options);
+            break;
+          case "copy-texture-to-buffer":
+            _copyTextureToBuffer(this.device, command.options);
+            break;
+          case "copy-texture-to-texture":
+            _copyTextureToTexture(this.device, command.options);
+            break;
+        }
+      }
+    }
+  };
+  function _copyBufferToBuffer(device, options) {
+    const source = cast2(options.source);
+    const destination = cast2(options.destination);
+    const gl2 = device.assertWebGL2();
+    if (gl2) {
+      gl2.bindBuffer(GL.COPY_READ_BUFFER, source.handle);
+      gl2.bindBuffer(GL.COPY_WRITE_BUFFER, destination.handle);
+      gl2.copyBufferSubData(GL.COPY_READ_BUFFER, GL.COPY_WRITE_BUFFER, options.sourceOffset ?? 0, options.destinationOffset ?? 0, options.size);
+      gl2.bindBuffer(GL.COPY_READ_BUFFER, null);
+      gl2.bindBuffer(GL.COPY_WRITE_BUFFER, null);
+    } else {
+      throw new Error("copyBufferToBuffer not implemented in WebGL1");
+    }
+  }
+  function _copyBufferToTexture(device, options) {
+    throw new Error("Not implemented");
+  }
+  function _copyTextureToBuffer(device, options) {
+    const {
+      /** Texture to copy to/from. */
+      source,
+      /**  Mip-map level of the texture to copy to/from. (Default 0) */
+      mipLevel = 0,
+      /** Defines which aspects of the texture to copy to/from. */
+      aspect = "all",
+      /** Width to copy */
+      width = options.source.width,
+      /** Height to copy */
+      height = options.source.height,
+      depthOrArrayLayers = 0,
+      /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
+      origin = [0, 0],
+      /** Destination buffer */
+      destination,
+      /** Offset, in bytes, from the beginning of the buffer to the start of the image data (default 0) */
+      byteOffset = 0,
+      /**
+       * The stride, in bytes, between the beginning of each block row and the subsequent block row.
+       * Required if there are multiple block rows (i.e. the copy height or depth is more than one block).
+       */
+      bytesPerRow,
+      /**
+       * Number of block rows per single image of the texture.
+       * rowsPerImage &times; bytesPerRow is the stride, in bytes, between the beginning of each image of data and the subsequent image.
+       * Required if there are multiple images (i.e. the copy depth is more than one).
+       */
+      rowsPerImage
+    } = options;
+    if (aspect !== "all") {
+      throw new Error("not supported");
+    }
+    if (mipLevel !== 0 || depthOrArrayLayers !== void 0 || bytesPerRow || rowsPerImage) {
+      throw new Error("not implemented");
+    }
+    const gl2 = device.assertWebGL2();
+    const {
+      framebuffer,
+      destroyFramebuffer
+    } = getFramebuffer(source);
+    try {
+      const webglBuffer = destination;
+      const sourceWidth = width || framebuffer.width;
+      const sourceHeight = height || framebuffer.height;
+      const sourceFormat = GL.RGBA;
+      const sourceType = GL.UNSIGNED_BYTE;
+      gl2.bindBuffer(GL.PIXEL_PACK_BUFFER, webglBuffer.handle);
+      gl2.bindFramebuffer(GL.FRAMEBUFFER, framebuffer.handle);
+      gl2.readPixels(origin[0], origin[1], sourceWidth, sourceHeight, sourceFormat, sourceType, byteOffset);
+    } finally {
+      gl2.bindBuffer(GL.PIXEL_PACK_BUFFER, null);
+      gl2.bindFramebuffer(GL.FRAMEBUFFER, null);
+      if (destroyFramebuffer) {
+        framebuffer.destroy();
+      }
+    }
+  }
+  function _copyTextureToTexture(device, options) {
+    const {
+      /** Texture to copy to/from. */
+      source,
+      /**  Mip-map level of the texture to copy to/from. (Default 0) */
+      // mipLevel = 0,
+      /** Defines which aspects of the texture to copy to/from. */
+      // aspect = 'all',
+      /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
+      origin = [0, 0],
+      /** Texture to copy to/from. */
+      destination
+      /**  Mip-map level of the texture to copy to/from. (Default 0) */
+      // destinationMipLevel = options.mipLevel,
+      /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
+      // destinationOrigin = [0, 0],
+      /** Defines which aspects of the texture to copy to/from. */
+      // destinationAspect = options.aspect,
+    } = options;
+    let {
+      width = options.destination.width,
+      height = options.destination.width
+      // depthOrArrayLayers = 0
+    } = options;
+    const destinationMipmaplevel = 0;
+    const destinationInternalFormat = GL.RGBA;
+    const {
+      framebuffer,
+      destroyFramebuffer
+    } = getFramebuffer(source);
+    const [sourceX, sourceY] = origin;
+    const isSubCopy = false;
+    device.gl.bindFramebuffer(GL.FRAMEBUFFER, framebuffer.handle);
+    let texture = null;
+    let textureTarget;
+    if (destination instanceof WEBGLTexture) {
+      texture = destination;
+      width = Number.isFinite(width) ? width : texture.width;
+      height = Number.isFinite(height) ? height : texture.height;
+      texture.bind(0);
+      textureTarget = texture.destination;
+    } else {
+      throw new Error("whoops");
+    }
+    if (!isSubCopy) {
+      device.gl.copyTexImage2D(
+        textureTarget,
+        destinationMipmaplevel,
+        destinationInternalFormat,
+        sourceX,
+        sourceY,
+        width,
+        height,
+        0
+        /* border must be 0 */
+      );
+    } else {
+    }
+    if (texture) {
+      texture.unbind();
+    }
+    device.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+    if (destroyFramebuffer) {
+      framebuffer.destroy();
+    }
+    return texture;
+  }
+  function getFramebuffer(source) {
+    if (source instanceof Texture) {
+      const {
+        width,
+        height,
+        id
+      } = source;
+      const framebuffer = source.device.createFramebuffer({
+        id: `framebuffer-for-${id}`,
+        width,
+        height,
+        colorAttachments: [source]
+      });
+      return {
+        framebuffer,
+        destroyFramebuffer: true
+      };
+    }
+    return {
+      framebuffer: source,
+      destroyFramebuffer: false
+    };
+  }
+
+  // src/adapter/resources/webgl-command-encoder.ts
+  var WEBGLCommandEncoder = class extends CommandEncoder {
+    constructor(device, props) {
+      super(props);
+      this.device = device;
+      this.commandBuffer = new WEBGLCommandBuffer(device);
+    }
+    destroy() {
+    }
+    finish() {
+      this.commandBuffer.submitCommands();
+    }
+    // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
+    // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
+    // finish(options?: {id?: string}): GPUCommandBuffer;
+    copyBufferToBuffer(options) {
+      this.commandBuffer.commands.push({
+        name: "copy-buffer-to-buffer",
+        options
+      });
+    }
+    copyBufferToTexture(options) {
+      this.commandBuffer.commands.push({
+        name: "copy-buffer-to-texture",
+        options
+      });
+    }
+    copyTextureToBuffer(options) {
+      this.commandBuffer.commands.push({
+        name: "copy-texture-to-buffer",
+        options
+      });
+    }
+    copyTextureToTexture(options) {
+      this.commandBuffer.commands.push({
+        name: "copy-texture-to-texture",
+        options
+      });
+    }
+    pushDebugGroup(groupLabel) {
+    }
+    popDebugGroup() {
+    }
+    insertDebugMarker(markerLabel) {
+    }
+    // writeTimestamp(querySet: Query, queryIndex: number): void {}
+    // resolveQuerySet(options: {
+    //   querySet: GPUQuerySet,
+    //   firstQuery: number,
+    //   queryCount: number,
+    //   destination: Buffer,
+    //   destinationOffset?: number;
+    // }): void;
+  };
+
   // src/adapter/webgl-device.ts
   var LOG_LEVEL2 = 1;
   var _WebGLDevice = class extends Device {
@@ -9021,8 +9488,9 @@ ${formattedLog}`)();
     createCanvasContext(props) {
       throw new Error("WebGL only supports a single canvas");
     }
-    _createBuffer(props) {
-      return new ClassicBuffer(this, props);
+    createBuffer(props) {
+      const newProps = this._getBufferProps(props);
+      return new ClassicBuffer(this, newProps);
     }
     _createTexture(props) {
       return new WEBGLTexture(this, props);
@@ -9058,6 +9526,9 @@ ${formattedLog}`)();
       });
       return this.renderPass;
     }
+    createCommandEncoder(props) {
+      return new WEBGLCommandEncoder(this, props);
+    }
     /**
      * Offscreen Canvas Support: Commit the frame
      * https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/commit
@@ -9092,19 +9563,21 @@ ${formattedLog}`)();
       return this._webglLimits;
     }
     /**
-     * Loses the context
-     * @note Triggers context loss, mainly for testing
-     * @todo Promote to `Device` API?
+     * 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");
       if (ext) {
+        deviceLossTriggered = true;
         ext.loseContext();
       }
       this._resolveContextLost?.({
         reason: "destroyed",
         message: "Application triggered context loss"
       });
+      return deviceLossTriggered;
     }
     /** Save current WebGL context state onto an internal stack */
     pushState() {
@@ -9121,6 +9594,21 @@ ${formattedLog}`)();
     setSpectorMetadata(handle, props) {
       handle.__SPECTOR_Metadata = props;
     }
+    /** 
+     * Returns the GL.<KEY> constant that corresponds to a numeric value of a GL constant
+     * Be aware that there are some duplicates especially for constants that are 0,
+     * so this isn't guaranteed to return the right key in all cases.
+     */
+    getGLKey(value, gl) {
+      gl = gl || this.gl2 || this.gl;
+      const number = Number(value);
+      for (const key in gl) {
+        if (gl[key] === number) {
+          return `GL.${key}`;
+        }
+      }
+      return String(value);
+    }
   };
   var WebGLDevice = _WebGLDevice;
   //
@@ -9142,63 +9630,6 @@ ${formattedLog}`)();
     }
     return Boolean(gl && gl._version === 2);
   }
-
-  // src/adapter/resources/webgl-command-buffer.ts
-  var CommandBuffer = class {
-    commands = [];
-  };
-
-  // src/adapter/resources/webgl-command-encoder.ts
-  var WEBGLCommandEncoder = class extends CommandEncoder {
-    commandBuffer = new CommandBuffer();
-    constructor(device, props) {
-      super(props);
-      this.device = device;
-    }
-    destroy() {
-    }
-    // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
-    // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
-    // finish(options?: {id?: string}): GPUCommandBuffer;
-    copyBufferToBuffer(options) {
-      this.commandBuffer.commands.push({
-        name: "copy-buffer-to-buffer",
-        options
-      });
-    }
-    copyBufferToTexture(options) {
-      this.commandBuffer.commands.push({
-        name: "copy-buffer-to-texture",
-        options
-      });
-    }
-    copyTextureToBuffer(options) {
-      this.commandBuffer.commands.push({
-        name: "copy-texture-to-buffer",
-        options
-      });
-    }
-    copyTextureToTexture(options) {
-      this.commandBuffer.commands.push({
-        name: "copy-texture-to-texture",
-        options
-      });
-    }
-    pushDebugGroup(groupLabel) {
-    }
-    popDebugGroup() {
-    }
-    insertDebugMarker(markerLabel) {
-    }
-    // writeTimestamp(querySet: Query, queryIndex: number): void {}
-    // resolveQuerySet(options: {
-    //   querySet: GPUQuerySet,
-    //   firstQuery: number,
-    //   queryCount: number,
-    //   destination: Buffer,
-    //   destinationOffset?: number;
-    // }): void;
-  };
   return __toCommonJS(src_exports);
 })();
       return __exports__;