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

package/dist/dist.dev.js

@@ -46,6 +46,7 @@ var __exports__ = (() => {
     PlaneGeometry: () => PlaneGeometry,
     SphereGeometry: () => SphereGeometry,
     Timeline: () => Timeline,
+    Transform: () => Transform,
     TruncatedConeGeometry: () => TruncatedConeGeometry,
     makeAnimationLoop: () => makeAnimationLoop
   });
@@ -1047,7 +1048,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) {
@@ -1068,8 +1069,7 @@ var __exports__ = (() => {
     }
     return VERSION3;
   }
-  var VERSION2 = init();
-  var init_default = globalThis.luma;
+  var VERSION2 = initializeLuma();
 
   // ../api/src/lib/utils/utils.ts
   var uidCounters = {};
@@ -1094,14 +1094,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
      */
@@ -1121,7 +1124,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() {
@@ -1138,14 +1141,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() {
@@ -1167,7 +1197,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
@@ -1195,6 +1235,7 @@ var __exports__ = (() => {
     get [Symbol.toStringTag]() {
       return "Buffer";
     }
+    /** Length of buffer in bytes */
     constructor(device, props) {
       const deducedProps = {
         ...props
@@ -1315,34 +1356,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") {
@@ -1357,9 +1394,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);
 
@@ -1505,13 +1564,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.
@@ -1704,8 +1765,8 @@ var __exports__ = (() => {
     data: null,
     dimension: "2d",
     format: "rgba8unorm",
-    // width: undefined,
-    // height: undefined,
+    width: void 0,
+    height: void 0,
     depth: 1,
     mipmaps: true,
     sampler: {},
@@ -1713,20 +1774,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);
@@ -1795,6 +1864,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;
@@ -1805,16 +1878,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
@@ -1859,18 +2078,14 @@ var __exports__ = (() => {
   __publicField(RenderPipeline, "_DEFAULT_PROPS", DEFAULT_RENDER_PIPELINE_PROPS);
 
   // ../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;
@@ -1901,6 +2116,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) {
@@ -1989,7 +2261,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
@@ -2067,54 +2462,14 @@ var __exports__ = (() => {
     const script = document.createElement("script");
     script.setAttribute("type", "text/javascript");
     script.setAttribute("src", scriptUrl);
-    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 += " ";
+    if (scriptId) {
+      script.id = scriptId;
     }
-    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);
+    });
   }
 
   // ../api/src/lib/request-animation-frame.ts
@@ -2313,7 +2668,7 @@ var __exports__ = (() => {
     }
     _setDisplay(display) {
       if (this.display) {
-        this.display.delete();
+        this.display.destroy();
         this.display.animationLoop = null;
       }
       if (display) {
@@ -2366,6 +2721,7 @@ var __exports__ = (() => {
         animationLoop: this,
         device: this.device,
         canvas: this.device?.canvasContext?.canvas,
+        renderPass: this.device.getDefaultRenderPass(),
         timeline: this.timeline,
         // Initial values
         useDevicePixels: this.props.useDevicePixels,
@@ -2396,6 +2752,7 @@ var __exports__ = (() => {
       if (!this.animationProps) {
         return;
       }
+      this.animationProps.renderPass = this.device.getDefaultRenderPass();
       const {
         width,
         height,
@@ -2531,7 +2888,7 @@ var __exports__ = (() => {
     return animationLoop;
   }
 
-  // src/lib/model-utils.ts
+  // src/model/model-utils.ts
   var GLTF_TO_LUMA_ATTRIBUTE_MAP = {
     POSITION: "positions",
     NORMAL: "normals",
@@ -2665,6 +3022,19 @@ var __exports__ = (() => {
   // ../shadertools/src/lib/shader-module/shader-module-instance.ts
   var ShaderModuleInstance = class {
     uniforms = {};
+    uniformFormats = {};
+    static instantiateModules(modules) {
+      return modules.map((module) => {
+        if (module instanceof ShaderModuleInstance) {
+          return module;
+        }
+        assert3(typeof module !== "string", `Shader module use by name is deprecated. Import shader module '${module}' and use it directly.`);
+        assert3(module.name, "shader module has no name");
+        const moduleObject = new ShaderModuleInstance(module);
+        moduleObject.dependencies = ShaderModuleInstance.instantiateModules(module.dependencies || []);
+        return moduleObject;
+      });
+    }
     constructor(props) {
       const {
         name,
@@ -2682,7 +3052,7 @@ var __exports__ = (() => {
       this.vs = vs;
       this.fs = fs;
       this.getModuleUniforms = getUniforms;
-      this.dependencies = dependencies;
+      this.dependencies = ShaderModuleInstance.instantiateModules(dependencies);
       this.deprecations = this._parseDeprecationDefinitions(deprecations);
       this.defines = defines;
       this.injections = normalizeInjections(inject);
@@ -2782,19 +3152,8 @@ ${moduleSource}// END MODULE_${this.name}
 
   // ../shadertools/src/lib/shader-assembler/resolve-modules.ts
   function resolveModules(modules) {
-    return getShaderDependencies(instantiateModules(modules));
-  }
-  function instantiateModules(modules) {
-    return modules.map((module) => {
-      if (module instanceof ShaderModuleInstance) {
-        return module;
-      }
-      assert3(typeof module !== "string", `Shader module use by name is deprecated. Import shader module '${module}' and use it directly.`);
-      assert3(module.name, "shader module has no name");
-      const moduleObject = new ShaderModuleInstance(module);
-      moduleObject.dependencies = instantiateModules(module.dependencies || []);
-      return moduleObject;
-    });
+    const instances = ShaderModuleInstance.instantiateModules(modules);
+    return getShaderDependencies(instances);
   }
   function getShaderDependencies(modules) {
     const moduleMap = {};
@@ -3344,6 +3703,88 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
     return result;
   }
 
+  // ../shadertools/src/lib/glsl-utils/get-shader-info.ts
+  function getShaderInfo(source, defaultName) {
+    return {
+      name: getShaderName(source, defaultName),
+      language: "glsl",
+      version: getShaderVersion(source)
+    };
+  }
+  function getShaderName(shader, defaultName = "unnamed") {
+    const SHADER_NAME_REGEXP = /#define[\s*]SHADER_NAME[\s*]([A-Za-z0-9_-]+)[\s*]/;
+    const match = SHADER_NAME_REGEXP.exec(shader);
+    return match ? match[1] : defaultName;
+  }
+  function getShaderVersion(source) {
+    let version = 100;
+    const words = source.match(/[^\s]+/g);
+    if (words && words.length >= 2 && words[0] === "#version") {
+      const v = parseInt(words[1], 10);
+      if (Number.isFinite(v)) {
+        version = v;
+      }
+    }
+    return version;
+  }
+
+  // ../shadertools/src/lib/glsl-utils/shader-utils.ts
+  var FS100 = glsl2`void main() {gl_FragColor = vec4(0);}`;
+  var FS_GLES = glsl2`\
+out vec4 transform_output;
+void main() {
+  transform_output = vec4(0);
+}`;
+  var FS300 = `#version 300 es
+${FS_GLES}`;
+  function getPassthroughFS(options) {
+    const {
+      version = 100,
+      input,
+      inputType,
+      output
+    } = options || {};
+    if (!input) {
+      if (version === 300) {
+        return FS300;
+      } else if (version > 300) {
+        return `#version ${version}
+${FS_GLES}`;
+      }
+      return FS100;
+    }
+    if (!inputType) {
+      throw new Error("inputType");
+    }
+    const outputValue = convertToVec4(input, inputType);
+    if (version >= 300) {
+      return `#version ${version} ${version === 300 ? "es" : ""}
+in ${inputType} ${input};
+out vec4 ${output};
+void main() {
+  ${output} = ${outputValue};
+}`;
+    }
+    return `varying ${inputType} ${input};
+void main() {
+  gl_FragColor = ${outputValue};
+}`;
+  }
+  function convertToVec4(variable, type) {
+    switch (type) {
+      case "float":
+        return `vec4(${variable}, 0.0, 0.0, 1.0)`;
+      case "vec2":
+        return `vec4(${variable}, 0.0, 1.0)`;
+      case "vec3":
+        return `vec4(${variable}, 1.0)`;
+      case "vec4":
+        return variable;
+      default:
+        throw new Error(type);
+    }
+  }
+
   // ../../node_modules/@math.gl/core/dist/lib/common.js
   var RADIANS_TO_DEGREES = 1 / Math.PI * 180;
   var DEGREES_TO_RADIANS = 1 / 180 * Math.PI;
@@ -4214,7 +4655,7 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
     }
   };
 
-  // src/lib/model.ts
+  // src/model/model.ts
   var DEFAULT_MODEL_PROPS = {
     ...RenderPipeline._DEFAULT_PROPS,
     vs: null,
@@ -4222,9 +4663,11 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
     id: "unnamed",
     handle: void 0,
     userData: {},
+    defines: {},
     modules: [],
     moduleSettings: {},
-    geometry: null
+    geometry: null,
+    pipelineFactory: void 0
   };
   var Model = class {
     fs = null;
@@ -4249,15 +4692,16 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
         this.vertexCount = this.props.geometry.vertexCount;
         this.topology = this.props.geometry.topology || "triangle-list";
       }
-      const pipelineFactory = PipelineFactory.getDefaultPipelineFactory(this.device);
+      this.pipelineFactory = this.props.pipelineFactory || PipelineFactory.getDefaultPipelineFactory(this.device);
       const {
         pipeline,
         getUniforms
-      } = pipelineFactory.createRenderPipeline({
+      } = this.pipelineFactory.createRenderPipeline({
         ...this.props,
         vs: this.vs,
         fs: this.fs,
         topology: this.topology,
+        defines: props.defines,
         parameters: props.parameters,
         layout: props.layout
       });
@@ -4270,7 +4714,7 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
       this.setProps(this.props);
     }
     destroy() {
-      this.pipeline.destroy();
+      this.pipelineFactory.release(this.pipeline);
     }
     draw(renderPass) {
       this.pipeline.draw({
@@ -4519,13 +4963,13 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
     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";
@@ -5017,135 +5461,6 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
     return GL2;
   }({});
 
-  // src/geometry/geometry.ts
-  var Geometry = class {
-    userData = {};
-    /** Determines how vertices are read from the 'vertex' attributes */
-    /** @deprecated */
-    drawMode = GL.TRIANGLES;
-    constructor(props = {}) {
-      const {
-        id = uid("geometry"),
-        drawMode = GL.TRIANGLES,
-        attributes = {},
-        indices = null,
-        vertexCount = null
-      } = props;
-      this.id = id;
-      this.drawMode = drawMode;
-      this.topology = props.topology || convertToTopology(drawMode);
-      if (indices) {
-        this.indices = ArrayBuffer.isView(indices) ? {
-          value: indices,
-          size: 1
-        } : indices;
-      }
-      this.attributes = {};
-      for (const [attributeName, attributeValue] of Object.entries(attributes)) {
-        const attribute = ArrayBuffer.isView(attributeValue) ? {
-          value: attributeValue
-        } : attributeValue;
-        assert2(ArrayBuffer.isView(attribute.value), `${this._print(attributeName)}: must be typed array or object with value as typed array`);
-        if ((attributeName === "POSITION" || attributeName === "positions") && !attribute.size) {
-          attribute.size = 3;
-        }
-        if (attributeName === "indices") {
-          assert2(!this.indices);
-          this.indices = attribute;
-        } else {
-          this.attributes[attributeName] = attribute;
-        }
-      }
-      if (this.indices && this.indices.isIndexed !== void 0) {
-        this.indices = Object.assign({}, this.indices);
-        delete this.indices.isIndexed;
-      }
-      this.vertexCount = vertexCount || this._calculateVertexCount(this.attributes, this.indices);
-    }
-    /** @deprecated Use string topology constants instead */
-    get mode() {
-      return this.drawMode;
-    }
-    getVertexCount() {
-      return this.vertexCount;
-    }
-    // Return an object with all attributes plus indices added as a field.
-    getAttributes() {
-      return this.indices ? {
-        indices: this.indices,
-        ...this.attributes
-      } : this.attributes;
-    }
-    // PRIVATE
-    _print(attributeName) {
-      return `Geometry ${this.id} attribute ${attributeName}`;
-    }
-    // GeometryAttribute
-    // value: typed array
-    // type: indices, vertices, uvs
-    // size: elements per vertex
-    // target: WebGL buffer type (string or constant)
-    _setAttributes(attributes, indices) {
-      return this;
-    }
-    _calculateVertexCount(attributes, indices) {
-      if (indices) {
-        return indices.value.length;
-      }
-      let vertexCount = Infinity;
-      for (const attributeName in attributes) {
-        const attribute = attributes[attributeName];
-        const {
-          value,
-          size,
-          constant
-        } = attribute;
-        if (!constant && value && size >= 1) {
-          vertexCount = Math.min(vertexCount, value.length / size);
-        }
-      }
-      assert2(Number.isFinite(vertexCount));
-      return vertexCount;
-    }
-  };
-  /** @deprecated */
-  __publicField(Geometry, "DRAW_MODE", {
-    POINTS: GL.POINTS,
-    // draw single points.
-    LINES: GL.LINES,
-    // draw lines. Each vertex connects to the one after it.
-    LINE_LOOP: GL.LINE_LOOP,
-    // draw lines. Each set of two vertices is treated as a separate line segment.
-    LINE_STRIP: GL.LINE_STRIP,
-    // draw a connected group of line segments from the first vertex to the last
-    TRIANGLES: GL.TRIANGLES,
-    // draw triangles. Each set of three vertices creates a separate triangle.
-    TRIANGLE_STRIP: GL.TRIANGLE_STRIP,
-    // draw a connected group of triangles.
-    TRIANGLE_FAN: GL.TRIANGLE_FAN
-    // draw a connected group of triangles.
-  });
-  function convertToTopology(drawMode) {
-    switch (drawMode) {
-      case GL.POINTS:
-        return "point-list";
-      case GL.LINES:
-        return "line-list";
-      case GL.LINE_STRIP:
-        return "line-strip";
-      case GL.TRIANGLES:
-        return "triangle-list";
-      case GL.TRIANGLE_STRIP:
-        return "triangle-strip";
-      case GL.TRIANGLE_FAN:
-        return "triangle-fan";
-      case GL.LINE_LOOP:
-        return "line-loop";
-      default:
-        throw new Error(String(drawMode));
-    }
-  }
-
   // ../webgl/src/context/context/create-headless-context.ts
   var ERR_HEADLESSGL_FAILED = "Failed to create WebGL context in Node.js, headless gl returned null";
   var ERR_HEADLESSGL_LOAD = "  luma.gl: loaded under Node.js without headless gl installed, meaning that WebGL   contexts can not be created. This may not be an error. For example, this is a   typical configuration for isorender applications running on the server.";
@@ -6707,7 +7022,8 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
     "r8unorm": {
       gl: GL.R8,
       b: 1,
-      c: 1
+      c: 1,
+      renderbuffer: true
     },
     "r8snorm": {
       gl: GL.R8_SNORM,
@@ -6717,18 +7033,21 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
     "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,
@@ -6738,69 +7057,80 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
     "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,
@@ -6867,31 +7197,36 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
       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,
@@ -6915,13 +7250,15 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
       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": {
@@ -6930,48 +7267,56 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
       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,
@@ -6985,13 +7330,16 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
       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": {
@@ -7009,27 +7357,31 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
     "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": {
@@ -7037,7 +7389,8 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
       gl1: GL.DEPTH_COMPONENT16,
       b: 2,
       c: 1,
-      attachment: GL.DEPTH_ATTACHMENT
+      attachment: GL.DEPTH_ATTACHMENT,
+      renderbuffer: true
     },
     // 16 depth bits
     "depth24plus": {
@@ -7050,15 +7403,19 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
       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": {
@@ -7066,7 +7423,8 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
       b: 4,
       c: 2,
       p: 1,
-      attachment: GL.DEPTH_STENCIL_ATTACHMENT
+      attachment: GL.DEPTH_STENCIL_ATTACHMENT,
+      renderbuffer: true
     },
     // "depth32float-stencil8" feature
     "depth32float-stencil8": {
@@ -7074,7 +7432,8 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
       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": {
@@ -7348,18 +7707,33 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
       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;
@@ -7373,8 +7747,29 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
     }
     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;
     }
@@ -7395,7 +7790,7 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
     return true;
   }
   function isTextureFormatRenderable(gl, formatOrGL) {
-    const format = getTextureFormat(formatOrGL);
+    const format = convertGLToTextureFormat(formatOrGL);
     if (!isTextureFormatSupported(gl, format)) {
       return false;
     }
@@ -7404,21 +7799,9 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
     }
     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,
@@ -7428,17 +7811,12 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
       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;
@@ -7463,34 +7841,9 @@ ${isVertex ? "" : FRAGMENT_SHADER_PROLOGUE}
       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;
@@ -7895,22 +8248,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,
@@ -8068,16 +8421,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);
       }
@@ -8167,11 +8521,21 @@ void main(void) {}`;
   };
 
   // ../webgl/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;
@@ -8185,8 +8549,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
@@ -8195,7 +8557,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);
@@ -8206,6 +8569,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") {
@@ -8251,7 +8615,6 @@ void main(void) {}`;
       } = props;
       const {
         pixels = null,
-        recreate = false,
         pixelStore = {},
         textureUnit = void 0
       } = props;
@@ -8269,6 +8632,7 @@ void main(void) {}`;
       const {
         depth = 0
       } = props;
+      const glFormat = convertTextureFormatToGL(props.format, this.device.isWebGL2);
       ({
         width,
         height,
@@ -8284,11 +8648,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;
@@ -8306,7 +8668,7 @@ void main(void) {}`;
         width,
         height,
         depth,
-        format,
+        format: glFormat,
         type,
         dataFormat,
         // @ts-expect-error 
@@ -8318,9 +8680,6 @@ void main(void) {}`;
       if (mipmaps) {
         this.generateMipmap();
       }
-      if (recreate) {
-        this.data = data;
-      }
       if (isVideo) {
         this._video = {
           video: data,
@@ -8438,7 +8797,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");
@@ -8446,7 +8805,7 @@ void main(void) {}`;
         target = this.target,
         pixels = null,
         level = 0,
-        format = this.format,
+        glFormat = this.glFormat,
         offset = 0,
         parameters = {}
       } = options;
@@ -8492,13 +8851,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,
@@ -8513,14 +8872,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":
@@ -8535,7 +8894,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;
@@ -8555,7 +8914,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,
@@ -8593,7 +8952,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)) {
@@ -8702,7 +9061,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;
@@ -8845,7 +9204,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(
@@ -8870,7 +9229,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;
@@ -8969,16 +9328,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);
-  }
 
   // ../webgl/src/adapter/objects/webgl-resource.ts
   var ERR_RESOURCE_METHOD_UNDEFINED = "Resource subclass must define virtual methods";
@@ -9009,9 +9358,6 @@ void main(void) {}`;
     get handle() {
       return this._handle;
     }
-    destroy() {
-      this.delete();
-    }
     delete({
       deleteChildren = false
     } = {}) {
@@ -9021,7 +9367,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;
     }
@@ -9084,10 +9430,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]);
           }
         }
       }
@@ -9185,204 +9531,8 @@ void main(void) {}`;
     */
   };
 
-  // ../webgl/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
-    }
-  };
-
   // ../webgl/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";
     }
@@ -9398,11 +9548,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) {
@@ -9414,7 +9572,6 @@ void main(void) {}`;
         });
         this._initialize(this.props);
       }
-      return this;
     }
     // PRIVATE METHODS
     /** Creates and initializes a renderbuffer object's data store */
@@ -9429,13 +9586,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() {
@@ -9449,51 +9605,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
+  });
 
   // ../webgl/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
@@ -9502,84 +9664,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;
@@ -9591,25 +9698,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;
@@ -9621,13 +9727,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) {
@@ -10109,12 +10215,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));
@@ -10410,19 +10513,19 @@ void main(void) {}`;
   };
 
   // ../webgl/src/adapter/helpers/get-shader-info.ts
-  function getShaderInfo(source, defaultName) {
+  function getShaderInfo2(source, defaultName) {
     return {
-      name: getShaderName(source, defaultName),
+      name: getShaderName2(source, defaultName),
       language: "glsl",
-      version: getShaderVersion(source)
+      version: getShaderVersion2(source)
     };
   }
-  function getShaderName(shader, defaultName = "unnamed") {
+  function getShaderName2(shader, defaultName = "unnamed") {
     const SHADER_NAME_REGEXP = /#define[\s*]SHADER_NAME[\s*]([A-Za-z0-9_-]+)[\s*]/;
     const match = SHADER_NAME_REGEXP.exec(shader);
     return match ? match[1] : defaultName;
   }
-  function getShaderVersion(source) {
+  function getShaderVersion2(source) {
     let version = 100;
     const words = source.match(/[^\s]+/g);
     if (words && words.length >= 2 && words[0] === "#version") {
@@ -10513,7 +10616,7 @@ ${source2}`;
         const parsedLog = shaderLog ? parseShaderCompilerLog(shaderLog) : [];
         const messages = parsedLog.filter((message2) => message2.type === "error");
         const formattedLog = formatCompilerLog(messages, source);
-        const shaderName = getShaderInfo(source).name;
+        const shaderName = getShaderInfo2(source).name;
         const shaderDescription = `${this.stage} shader ${shaderName}`;
         log.error(`GLSL compilation errors in ${shaderDescription}
 ${formattedLog}`)();
@@ -10522,14 +10625,21 @@ ${formattedLog}`)();
     }
   };
   function getShaderIdFromProps(props) {
-    return getShaderInfo(props.source).name || props.id || uid(`unnamed ${props.stage}-shader`);
+    return getShaderInfo2(props.source).name || props.id || uid(`unnamed ${props.stage}-shader`);
   }
 
   // ../webgl/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() {
     }
@@ -10543,6 +10653,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);
+    //   }
+    // });
   };
 
   // ../webgl/src/adapter/helpers/uniforms.ts
@@ -11198,7 +11404,7 @@ ${formattedLog}`)();
      */
     draw(options) {
       const {
-        renderPass = this.device.getDefaultRenderPass(),
+        renderPass,
         vertexCount,
         // indexCount,
         instanceCount,
@@ -11223,10 +11429,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,
@@ -11402,6 +11607,257 @@ ${formattedLog}`)();
     return layout.attributes.find((binding) => binding.name === name) || null;
   }
 
+  // ../webgl/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
+    };
+  }
+
+  // ../webgl/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;
+  };
+
   // ../webgl/src/adapter/webgl-device.ts
   var LOG_LEVEL2 = 1;
   var _WebGLDevice = class extends Device {
@@ -11565,8 +12021,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);
@@ -11602,6 +12059,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
@@ -11636,19 +12096,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() {
@@ -11665,6 +12127,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;
   //
@@ -11687,6 +12164,216 @@ ${formattedLog}`)();
     return Boolean(gl && gl._version === 2);
   }
 
+  // src/transform/transform.ts
+  var Transform = class {
+    /**
+     * Check if Transforms are supported (they are not under WebGL1)
+     * @todo differentiate writing to buffer vs not
+     */
+    static isSupported(device) {
+      return false;
+    }
+    // model: Model;
+    elementCount = 0;
+    // bufferTransform: BufferTransform | null = null;
+    // textureTransform: TextureTransform | null = null;
+    elementIDBuffer = null;
+    constructor(device, props = {}) {
+      this.device = WebGLDevice.attach(device);
+      this.gl = this.device.gl2;
+      this._buildResourceTransforms(props);
+      props = this._updateModelProps(props);
+      this.model = new Model(this.device, {
+        ...props,
+        fs: props.fs || getPassthroughFS({
+          version: getShaderInfo(props.vs).version
+        }),
+        id: props.id || "transform-model",
+        // @ts-expect-error
+        drawMode: props.drawMode || GL.POINTS,
+        vertexCount: props.elementCount
+      });
+      Object.seal(this);
+    }
+    /** Delete owned resources. */
+    destroy() {
+    }
+    /** @deprecated Use destroy*() */
+    delete() {
+      this.destroy();
+    }
+    /** Run one transform loop. */
+    run(options) {
+      const {
+        clearRenderTarget = true
+      } = options || {};
+      const updatedOpts = this._updateDrawOptions(options);
+      if (clearRenderTarget && updatedOpts.framebuffer) {
+      }
+    }
+    /** swap resources if a map is provided */
+    swap() {
+    }
+    /** Return Buffer object for given varying name. */
+    getBuffer(varyingName) {
+      return null;
+    }
+    /** Return data either from Buffer or from Texture */
+    getData(options = {}) {
+    }
+    /** Return framebuffer object if rendering to textures */
+    getFramebuffer() {
+      return null;
+    }
+    /** Update some or all buffer/texture bindings. */
+    update(props) {
+    }
+    // Private
+    _updateModelProps(props) {
+      const updatedProps = {
+        ...props
+      };
+      return updatedProps;
+    }
+    _buildResourceTransforms(props) {
+    }
+    _updateDrawOptions(options) {
+      const updatedOpts = {
+        ...options
+      };
+      return updatedOpts;
+    }
+  };
+
+  // src/geometry/geometry.ts
+  var Geometry = class {
+    userData = {};
+    /** Determines how vertices are read from the 'vertex' attributes */
+    /** @deprecated */
+    drawMode = GL.TRIANGLES;
+    constructor(props = {}) {
+      const {
+        id = uid("geometry"),
+        drawMode = GL.TRIANGLES,
+        attributes = {},
+        indices = null,
+        vertexCount = null
+      } = props;
+      this.id = id;
+      this.drawMode = drawMode;
+      this.topology = props.topology || convertToTopology(drawMode);
+      if (indices) {
+        this.indices = ArrayBuffer.isView(indices) ? {
+          value: indices,
+          size: 1
+        } : indices;
+      }
+      this.attributes = {};
+      for (const [attributeName, attributeValue] of Object.entries(attributes)) {
+        const attribute = ArrayBuffer.isView(attributeValue) ? {
+          value: attributeValue
+        } : attributeValue;
+        assert2(ArrayBuffer.isView(attribute.value), `${this._print(attributeName)}: must be typed array or object with value as typed array`);
+        if ((attributeName === "POSITION" || attributeName === "positions") && !attribute.size) {
+          attribute.size = 3;
+        }
+        if (attributeName === "indices") {
+          assert2(!this.indices);
+          this.indices = attribute;
+        } else {
+          this.attributes[attributeName] = attribute;
+        }
+      }
+      if (this.indices && this.indices.isIndexed !== void 0) {
+        this.indices = Object.assign({}, this.indices);
+        delete this.indices.isIndexed;
+      }
+      this.vertexCount = vertexCount || this._calculateVertexCount(this.attributes, this.indices);
+    }
+    /** @deprecated Use string topology constants instead */
+    get mode() {
+      return this.drawMode;
+    }
+    getVertexCount() {
+      return this.vertexCount;
+    }
+    // Return an object with all attributes plus indices added as a field.
+    getAttributes() {
+      return this.indices ? {
+        indices: this.indices,
+        ...this.attributes
+      } : this.attributes;
+    }
+    // PRIVATE
+    _print(attributeName) {
+      return `Geometry ${this.id} attribute ${attributeName}`;
+    }
+    // GeometryAttribute
+    // value: typed array
+    // type: indices, vertices, uvs
+    // size: elements per vertex
+    // target: WebGL buffer type (string or constant)
+    _setAttributes(attributes, indices) {
+      return this;
+    }
+    _calculateVertexCount(attributes, indices) {
+      if (indices) {
+        return indices.value.length;
+      }
+      let vertexCount = Infinity;
+      for (const attributeName in attributes) {
+        const attribute = attributes[attributeName];
+        const {
+          value,
+          size,
+          constant
+        } = attribute;
+        if (!constant && value && size >= 1) {
+          vertexCount = Math.min(vertexCount, value.length / size);
+        }
+      }
+      assert2(Number.isFinite(vertexCount));
+      return vertexCount;
+    }
+  };
+  /** @deprecated */
+  __publicField(Geometry, "DRAW_MODE", {
+    POINTS: GL.POINTS,
+    // draw single points.
+    LINES: GL.LINES,
+    // draw lines. Each vertex connects to the one after it.
+    LINE_LOOP: GL.LINE_LOOP,
+    // draw lines. Each set of two vertices is treated as a separate line segment.
+    LINE_STRIP: GL.LINE_STRIP,
+    // draw a connected group of line segments from the first vertex to the last
+    TRIANGLES: GL.TRIANGLES,
+    // draw triangles. Each set of three vertices creates a separate triangle.
+    TRIANGLE_STRIP: GL.TRIANGLE_STRIP,
+    // draw a connected group of triangles.
+    TRIANGLE_FAN: GL.TRIANGLE_FAN
+    // draw a connected group of triangles.
+  });
+  function convertToTopology(drawMode) {
+    switch (drawMode) {
+      case GL.POINTS:
+        return "point-list";
+      case GL.LINES:
+        return "line-list";
+      case GL.LINE_STRIP:
+        return "line-strip";
+      case GL.TRIANGLES:
+        return "triangle-list";
+      case GL.TRIANGLE_STRIP:
+        return "triangle-strip";
+      case GL.TRIANGLE_FAN:
+        return "triangle-fan";
+      case GL.LINE_LOOP:
+        return "line-loop";
+      default:
+        throw new Error(String(drawMode));
+    }
+  }
+
   // src/lib/clip-space.ts
   var CLIPSPACE_VERTEX_SHADER = glsl`\
 attribute vec2 aClipSpacePosition;