@aura3d/rendering 1.0.6

package/src/WebGL2Device.ts

@@ -0,0 +1,2280 @@
+import {
+  type BufferUsage,
+  type DrawCommand,
+  type InstanceVertexAttribute,
+  type LdrPostprocessPresentationOptions,
+  type RenderBuffer,
+  type RenderDevice,
+  RenderDeviceError,
+  type RenderDeviceDiagnostics,
+  type RenderDeviceInfo,
+  type RenderShaderProgram,
+  type RenderTarget,
+  type RenderTargetDescriptor,
+  type ShaderReflection,
+  type ShaderSources,
+} from "./RenderDevice";
+import { Texture, isCompressedTextureFormat, type TextureCompressedFormat, type TextureCubeFace, type TexturePixelData } from "./Texture";
+import { TextureBinding } from "./TextureBinding";
+import type { Sampler, TextureMagFilter, TextureMinFilter } from "./Sampler";
+import { type VertexAttribute, type VertexFormat } from "./VertexFormat";
+import { WebGL2StateCache } from "./WebGL2StateCache";
+
+interface TextureFilterAnisotropicExtension {
+  readonly TEXTURE_MAX_ANISOTROPY_EXT: GLenum;
+  readonly MAX_TEXTURE_MAX_ANISOTROPY_EXT: GLenum;
+}
+
+const WEBGL_CUBE_FACES: readonly TextureCubeFace[] = ["px", "nx", "py", "ny", "pz", "nz"];
+
+export interface WebGL2DeviceOptions {
+  readonly canvas: HTMLCanvasElement | OffscreenCanvas;
+  readonly antialias?: boolean;
+  readonly alpha?: boolean;
+  readonly preserveDrawingBuffer?: boolean;
+  readonly errorCheckMode?: WebGL2ErrorCheckMode;
+}
+
+export type WebGL2ErrorCheckMode = "strict" | "frame";
+
+class WebGL2Buffer implements RenderBuffer {
+  public disposed = false;
+
+  constructor(
+    public readonly id: number,
+    public readonly usage: BufferUsage,
+    public readonly byteLength: number,
+    public readonly target: GLenum,
+    public readonly handle: WebGLBuffer,
+    private readonly gl: WebGL2RenderingContext
+  ) {}
+
+  dispose(): void {
+    if (!this.disposed) {
+      this.gl.deleteBuffer(this.handle);
+      this.disposed = true;
+    }
+  }
+}
+
+class WebGL2ShaderProgram implements RenderShaderProgram {
+  public disposed = false;
+
+  constructor(
+    public readonly id: number,
+    public readonly label: string,
+    public readonly marker: string,
+    public readonly reflection: ShaderReflection,
+    public readonly handle: WebGLProgram,
+    private readonly gl: WebGL2RenderingContext
+  ) {}
+
+  dispose(): void {
+    if (!this.disposed) {
+      this.gl.deleteProgram(this.handle);
+      this.disposed = true;
+    }
+  }
+}
+
+class WebGL2RenderTarget implements RenderTarget {
+  public disposed = false;
+
+  constructor(
+    public readonly id: number,
+    public readonly width: number,
+    public readonly height: number,
+    public readonly label: string,
+    public readonly colorTexture: Texture,
+    public readonly depthTexture: Texture | undefined,
+    public readonly framebuffer: WebGLFramebuffer,
+    public readonly colorHandle: WebGLTexture,
+    public readonly depthHandle: WebGLRenderbuffer | null,
+    public readonly depthTextureHandle: WebGLTexture | null,
+    private readonly gl: WebGL2RenderingContext
+  ) {}
+
+  dispose(): void {
+    if (!this.disposed) {
+      this.gl.deleteFramebuffer(this.framebuffer);
+      this.gl.deleteTexture(this.colorHandle);
+      if (this.depthHandle) this.gl.deleteRenderbuffer(this.depthHandle);
+      if (this.depthTextureHandle) this.gl.deleteTexture(this.depthTextureHandle);
+      this.colorTexture.dispose();
+      this.depthTexture?.dispose();
+      this.disposed = true;
+    }
+  }
+}
+
+interface WebGL2VertexArrayCacheEntry {
+  readonly key: string;
+  readonly handle: WebGLVertexArrayObject;
+  readonly boundLocations: ReadonlySet<number>;
+}
+
+interface WebGL2TextureUnit0Snapshot {
+  readonly activeTexture: GLenum;
+  readonly texture2d: WebGLTexture | null;
+  readonly sampler: WebGLSampler | null;
+}
+
+interface WebGL2FullscreenPresentationStateSnapshot {
+  readonly framebuffer: WebGLFramebuffer | null;
+  readonly program: WebGLProgram | null;
+  readonly textureUnit0: WebGL2TextureUnit0Snapshot;
+  readonly vertexArray: WebGLVertexArrayObject | null;
+  readonly viewport: Int32Array | readonly number[];
+  readonly colorMask: readonly boolean[];
+  readonly depthTestEnabled: boolean;
+  readonly cullFaceEnabled: boolean;
+  readonly blendEnabled: boolean;
+  readonly scissorTestEnabled: boolean;
+  readonly stencilTestEnabled: boolean;
+  readonly polygonOffsetFillEnabled: boolean;
+  readonly depthMask: boolean;
+}
+
+export class WebGL2Device implements RenderDevice {
+  public readonly kind = "webgl2";
+  public readonly info: RenderDeviceInfo;
+  public disposed = false;
+  public contextLost = false;
+  private readonly gl: WebGL2RenderingContext;
+  private nextId = 1;
+  private drawCalls = 0;
+  private buffers = new Set<WebGL2Buffer>();
+  private shaders = new Set<WebGL2ShaderProgram>();
+  private renderTargets = new Set<WebGL2RenderTarget>();
+  private activeRenderTarget: WebGL2RenderTarget | null = null;
+  private textures = new Map<Texture, WebGLTexture>();
+  private textureUploadModes = new Map<Texture, "compressed" | "cube" | "depth-render-target" | "fallback" | "rgba8" | "rgba16f" | "rgba32f">();
+  private fallbackTexture: WebGLTexture | null = null;
+  private fallbackCubeTexture: WebGLTexture | null = null;
+  private readonly samplerObjectCache = new Map<string, WebGLSampler>();
+  private presentationProgram: WebGLProgram | null = null;
+  private ldrPostprocessProgram: WebGLProgram | null = null;
+  private depthReadbackProgram: WebGLProgram | null = null;
+  private readonly uniformLocationCache = new WeakMap<WebGL2ShaderProgram, Map<string, WebGLUniformLocation | null>>();
+  private readonly textureSamplerParameterCache = new WeakMap<WebGLTexture, Map<GLenum, GLenum | number>>();
+  private readonly stateCache = new WebGL2StateCache({ label: "webgl2-device-state-cache" });
+  private readonly textureUnitBindings = new Map<string, WebGLTexture>();
+  private readonly vertexArrayCache = new Map<string, WebGL2VertexArrayCacheEntry>();
+  private readonly vertexFormatIds = new WeakMap<VertexFormat, number>();
+  private presentationVertexArray: WebGLVertexArrayObject | null = null;
+  private activeTextureUnitIndex = -1;
+  private shaderProgramCreateCount = 0;
+  private uniformLocationLookupCount = 0;
+  private bufferUpdateCount = 0;
+  private textureBindCount = 0;
+  private samplerParameterUploadCount = 0;
+  private samplerAnisotropyUploadCount = 0;
+  private vertexArrayCreateCount = 0;
+  private nativeInstancedSubmissions = 0;
+  private nextVertexFormatId = 1;
+  private releasedTextureHandles = 0;
+  private nativeEnvironmentBindings = 0;
+  private nativeShadowMapBindings = 0;
+  private lastError: string | null = null;
+  private frameActive = false;
+  private viewportWidth = 0;
+  private viewportHeight = 0;
+  private readonly maxVertexAttributes: number;
+  private readonly anisotropicFilteringExtension: TextureFilterAnisotropicExtension | null;
+  private readonly maxTextureAnisotropy: number;
+  private readonly contextLostListener?: EventListener;
+  private readonly contextRestoredListener?: EventListener;
+  private readonly canvas?: HTMLCanvasElement | OffscreenCanvas;
+
+  static create(options: WebGL2DeviceOptions): WebGL2Device {
+    const gl = options.canvas.getContext("webgl2", {
+      antialias: options.antialias ?? true,
+      alpha: options.alpha ?? false,
+      preserveDrawingBuffer: options.preserveDrawingBuffer ?? false
+    });
+    if (!gl) {
+      throw new RenderDeviceError("WebGL2 is not available for the provided canvas", "WEBGL2_UNAVAILABLE");
+    }
+    return new WebGL2Device(gl as WebGL2RenderingContext, options.canvas, options.errorCheckMode ?? "strict");
+  }
+
+  private constructor(
+    gl: WebGL2RenderingContext,
+    canvas: HTMLCanvasElement | OffscreenCanvas,
+    private readonly errorCheckMode: WebGL2ErrorCheckMode
+  ) {
+    this.gl = gl;
+    this.maxVertexAttributes = gl.getParameter(gl.MAX_VERTEX_ATTRIBS) as number;
+    this.anisotropicFilteringExtension = gl.getExtension("EXT_texture_filter_anisotropic") as TextureFilterAnisotropicExtension | null;
+    this.maxTextureAnisotropy = this.anisotropicFilteringExtension
+      ? Math.max(1, gl.getParameter(this.anisotropicFilteringExtension.MAX_TEXTURE_MAX_ANISOTROPY_EXT) as number)
+      : 1;
+    this.info = {
+      backend: "webgl2",
+      vendor: gl.getParameter(gl.VENDOR) as string,
+      renderer: gl.getParameter(gl.RENDERER) as string,
+      capabilities: [
+        "buffers",
+        "buffer-readback",
+        "shader-validation",
+        "render-targets",
+        "pixel-readback",
+        "postprocess-presentation",
+        "draw-validation",
+        "rasterization",
+        "depth-render-targets",
+        "depth-textures",
+        "spot-shadow-maps",
+        "point-shadow-maps",
+        "hdr-image-based-lighting",
+        ...(this.anisotropicFilteringExtension ? ["anisotropic-texture-filtering" as const] : []),
+        ...(gl.getExtension("EXT_color_buffer_float") ? ["hdr-render-targets" as const, "float-readback" as const] : [])
+      ]
+    };
+
+    this.canvas = canvas;
+    if ("addEventListener" in canvas) {
+      this.contextLostListener = ((event: Event) => {
+        event.preventDefault();
+        this.contextLost = true;
+        this.lastError = "CONTEXT_LOST";
+        this.frameActive = false;
+      }) as EventListener;
+      this.contextRestoredListener = (() => {
+        this.contextLost = false;
+        this.lastError = null;
+      }) as EventListener;
+      canvas.addEventListener("webglcontextlost", this.contextLostListener);
+      canvas.addEventListener("webglcontextrestored", this.contextRestoredListener);
+    }
+  }
+
+  createBuffer(usage: BufferUsage, byteLength: number, initialData?: ArrayBufferView): RenderBuffer {
+    this.assertAlive();
+    if (byteLength <= 0 || !Number.isInteger(byteLength)) {
+      throw new RenderDeviceError("Buffer byteLength must be a positive integer", "INVALID_BUFFER_SIZE", { byteLength });
+    }
+
+    const handle = this.gl.createBuffer();
+    if (!handle) {
+      throw new RenderDeviceError("Failed to allocate WebGL buffer", "WEBGL_ALLOCATION_FAILED");
+    }
+
+    const target = usage === "index" ? this.gl.ELEMENT_ARRAY_BUFFER : this.gl.ARRAY_BUFFER;
+    this.bindNoVertexArray();
+    this.stateCache.bindBuffer(target, handle, () => this.gl.bindBuffer(target, handle));
+    this.gl.bufferData(target, byteLength, this.gl.DYNAMIC_DRAW);
+    if (initialData) {
+      if (initialData.byteLength > byteLength) {
+        throw new RenderDeviceError("Initial data exceeds buffer size", "BUFFER_OVERFLOW", {
+          byteLength,
+          dataByteLength: initialData.byteLength
+        });
+      }
+      this.gl.bufferSubData(target, 0, initialData);
+    }
+
+    const buffer = new WebGL2Buffer(this.nextId++, usage, byteLength, target, handle, this.gl);
+    this.buffers.add(buffer);
+    return buffer;
+  }
+
+  updateBuffer(buffer: RenderBuffer, byteOffset: number, data: ArrayBufferView): void {
+    this.assertAlive();
+    const webglBuffer = this.requireBuffer(buffer);
+    if (byteOffset < 0 || byteOffset + data.byteLength > webglBuffer.byteLength) {
+      throw new RenderDeviceError("Buffer update range is out of bounds", "BUFFER_RANGE_OUT_OF_BOUNDS", {
+        byteOffset,
+        dataByteLength: data.byteLength,
+        byteLength: webglBuffer.byteLength
+      });
+    }
+    this.bindNoVertexArray();
+    this.stateCache.bindBuffer(webglBuffer.target, webglBuffer.handle, () => this.gl.bindBuffer(webglBuffer.target, webglBuffer.handle));
+    this.gl.bufferSubData(webglBuffer.target, byteOffset, data);
+    this.bufferUpdateCount += 1;
+  }
+
+  readBuffer(buffer: RenderBuffer, byteOffset = 0, byteLength = buffer.byteLength - byteOffset): Uint8Array {
+    this.assertAlive();
+    const webglBuffer = this.requireBuffer(buffer);
+    if (byteOffset < 0 || byteLength < 0 || byteOffset + byteLength > webglBuffer.byteLength) {
+      throw new RenderDeviceError("Buffer read range is out of bounds", "BUFFER_RANGE_OUT_OF_BOUNDS", {
+        byteOffset,
+        byteLength,
+        bufferByteLength: webglBuffer.byteLength
+      });
+    }
+    const output = new Uint8Array(byteLength);
+    this.bindNoVertexArray();
+    this.stateCache.bindBuffer(webglBuffer.target, webglBuffer.handle, () => this.gl.bindBuffer(webglBuffer.target, webglBuffer.handle));
+    this.gl.getBufferSubData(webglBuffer.target, byteOffset, output);
+    return output;
+  }
+
+  createShaderProgram(sources: ShaderSources): RenderShaderProgram {
+    this.assertAlive();
+    if (!sources.vertex.includes(sources.marker) || !sources.fragment.includes(sources.marker)) {
+      throw new RenderDeviceError("Shader source marker is missing from compiled sources", "SHADER_MARKER_MISSING", {
+        label: sources.label,
+        marker: sources.marker
+      });
+    }
+    const vertexShader = this.compileShader(this.gl.VERTEX_SHADER, sources.vertex, sources.label);
+    const fragmentShader = this.compileShader(this.gl.FRAGMENT_SHADER, sources.fragment, sources.label);
+    const program = this.gl.createProgram();
+    if (!program) {
+      throw new RenderDeviceError("Failed to allocate WebGL shader program", "WEBGL_ALLOCATION_FAILED");
+    }
+    this.shaderProgramCreateCount += 1;
+    this.gl.attachShader(program, vertexShader);
+    this.gl.attachShader(program, fragmentShader);
+    this.gl.linkProgram(program);
+    this.gl.deleteShader(vertexShader);
+    this.gl.deleteShader(fragmentShader);
+
+    if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
+      const log = this.gl.getProgramInfoLog(program) ?? "Unknown shader link error";
+      this.gl.deleteProgram(program);
+      throw new RenderDeviceError("WebGL shader link failed", "SHADER_LINK_FAILED", { label: sources.label, log });
+    }
+
+    const shader = new WebGL2ShaderProgram(
+      this.nextId++,
+      sources.label,
+      sources.marker,
+      this.reflectProgram(program),
+      program,
+      this.gl
+    );
+    this.shaders.add(shader);
+    return shader;
+  }
+
+  createRenderTarget(descriptor: RenderTargetDescriptor): RenderTarget {
+    this.assertAlive();
+    if (
+      !Number.isInteger(descriptor.width) ||
+      descriptor.width <= 0 ||
+      !Number.isInteger(descriptor.height) ||
+      descriptor.height <= 0
+    ) {
+      throw new RenderDeviceError("Render target dimensions must be positive integers", "INVALID_RENDER_TARGET_SIZE", {
+        width: descriptor.width,
+        height: descriptor.height,
+        label: descriptor.label
+      });
+    }
+    const colorHandle = this.gl.createTexture();
+    const framebuffer = this.gl.createFramebuffer();
+    const depthMode = descriptor.depth === "texture" ? "texture" : descriptor.depth === false ? "none" : "renderbuffer";
+    const depthHandle = depthMode === "renderbuffer" ? this.gl.createRenderbuffer() : null;
+    const depthTextureHandle = depthMode === "texture" ? this.gl.createTexture() : null;
+    if (!colorHandle || !framebuffer || (depthMode === "renderbuffer" && !depthHandle) || (depthMode === "texture" && !depthTextureHandle)) {
+      if (colorHandle) this.gl.deleteTexture(colorHandle);
+      if (framebuffer) this.gl.deleteFramebuffer(framebuffer);
+      if (depthHandle) this.gl.deleteRenderbuffer(depthHandle);
+      if (depthTextureHandle) this.gl.deleteTexture(depthTextureHandle);
+      throw new RenderDeviceError("Failed to allocate WebGL render target", "WEBGL_ALLOCATION_FAILED", {
+        width: descriptor.width,
+        height: descriptor.height,
+        label: descriptor.label
+      });
+    }
+    const previousActiveTexture = this.gl.getParameter(this.gl.ACTIVE_TEXTURE) as GLenum;
+    this.gl.activeTexture(this.gl.TEXTURE0);
+    const previousTexture = this.gl.getParameter(this.gl.TEXTURE_BINDING_2D) as WebGLTexture | null;
+    const previousFramebuffer = this.gl.getParameter(this.gl.FRAMEBUFFER_BINDING) as WebGLFramebuffer | null;
+    const previousRenderbuffer = this.gl.getParameter(this.gl.RENDERBUFFER_BINDING) as WebGLRenderbuffer | null;
+    this.gl.bindTexture(this.gl.TEXTURE_2D, colorHandle);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+    const format = descriptor.format ?? "rgba8";
+    const textureFormat = this.resolveRenderTargetFormat(format);
+    this.gl.texImage2D(
+      this.gl.TEXTURE_2D,
+      0,
+      textureFormat.internalFormat,
+      descriptor.width,
+      descriptor.height,
+      0,
+      this.gl.RGBA,
+      textureFormat.type,
+      null
+    );
+
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
+    this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_2D, colorHandle, 0);
+    if (depthHandle) {
+      this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, depthHandle);
+      this.gl.renderbufferStorage(this.gl.RENDERBUFFER, this.gl.DEPTH_COMPONENT16, descriptor.width, descriptor.height);
+      this.gl.framebufferRenderbuffer(this.gl.FRAMEBUFFER, this.gl.DEPTH_ATTACHMENT, this.gl.RENDERBUFFER, depthHandle);
+    }
+    if (depthTextureHandle) {
+      this.gl.bindTexture(this.gl.TEXTURE_2D, depthTextureHandle);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+      this.gl.texImage2D(
+        this.gl.TEXTURE_2D,
+        0,
+        this.gl.DEPTH_COMPONENT24,
+        descriptor.width,
+        descriptor.height,
+        0,
+        this.gl.DEPTH_COMPONENT,
+        this.gl.UNSIGNED_INT,
+        null
+      );
+      this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.DEPTH_ATTACHMENT, this.gl.TEXTURE_2D, depthTextureHandle, 0);
+    }
+    const status = this.gl.checkFramebufferStatus(this.gl.FRAMEBUFFER);
+    this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, previousRenderbuffer);
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, previousFramebuffer);
+    this.gl.bindTexture(this.gl.TEXTURE_2D, previousTexture);
+    this.gl.activeTexture(previousActiveTexture);
+    this.stateCache.invalidate();
+    if (status !== this.gl.FRAMEBUFFER_COMPLETE) {
+      this.gl.deleteTexture(colorHandle);
+      this.gl.deleteFramebuffer(framebuffer);
+      this.gl.deleteRenderbuffer(depthHandle);
+      if (depthTextureHandle) this.gl.deleteTexture(depthTextureHandle);
+      throw new RenderDeviceError("WebGL render target framebuffer status is invalid", "FRAMEBUFFER_INVALID", { status });
+    }
+
+    const depthTexture = depthTextureHandle
+      ? new Texture({ width: descriptor.width, height: descriptor.height, format: "depth24", label: `${descriptor.label ?? "render-target"}-depth` })
+      : undefined;
+    const target = new WebGL2RenderTarget(
+      this.nextId++,
+      descriptor.width,
+      descriptor.height,
+      descriptor.label ?? "render-target",
+      new Texture({ width: descriptor.width, height: descriptor.height, format, label: descriptor.label ?? "render-target-color" }),
+      depthTexture,
+      framebuffer,
+      colorHandle,
+      depthHandle,
+      depthTextureHandle,
+      this.gl
+    );
+    this.renderTargets.add(target);
+    this.textures.set(target.colorTexture, colorHandle);
+    this.textureUploadModes.set(target.colorTexture, "rgba8");
+    if (depthTexture && depthTextureHandle) {
+      this.textures.set(depthTexture, depthTextureHandle);
+      this.textureUploadModes.set(depthTexture, "depth-render-target");
+    }
+    return target;
+  }
+
+  setRenderTarget(target: RenderTarget | null): void {
+    this.assertAlive();
+    if (target === null) {
+      this.activeRenderTarget = null;
+      this.stateCache.bindFramebuffer(this.gl.FRAMEBUFFER, null, () => this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null));
+      this.stateCache.viewport(
+        0,
+        0,
+        this.viewportWidth || this.gl.drawingBufferWidth,
+        this.viewportHeight || this.gl.drawingBufferHeight,
+        () => this.gl.viewport(0, 0, this.viewportWidth || this.gl.drawingBufferWidth, this.viewportHeight || this.gl.drawingBufferHeight)
+      );
+      return;
+    }
+    if (!(target instanceof WebGL2RenderTarget) || !this.renderTargets.has(target) || target.disposed) {
+      throw new RenderDeviceError("Render target is not a live WebGL2 resource owned by this device", "INVALID_RESOURCE", {
+        targetId: target.id
+      });
+    }
+    this.activeRenderTarget = target;
+    this.stateCache.bindFramebuffer(this.gl.FRAMEBUFFER, target.framebuffer, () => this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, target.framebuffer));
+    this.stateCache.viewport(0, 0, target.width, target.height, () => this.gl.viewport(0, 0, target.width, target.height));
+  }
+
+  writeRenderTargetPixels(target: RenderTarget, pixels: Uint8Array): void {
+    this.assertAlive();
+    if (!(target instanceof WebGL2RenderTarget) || !this.renderTargets.has(target) || target.disposed) {
+      throw new RenderDeviceError("Render target is not a live WebGL2 resource owned by this device", "INVALID_RESOURCE", {
+        targetId: target.id
+      });
+    }
+    if (target.colorTexture.format !== "rgba8") {
+      throw new RenderDeviceError("Byte pixel uploads are only supported for rgba8 WebGL2 render targets", "INVALID_PIXEL_UPLOAD_FORMAT", {
+        targetId: target.id,
+        format: target.colorTexture.format
+      });
+    }
+    if (pixels.length !== target.width * target.height * 4) {
+      throw new RenderDeviceError("Render-target pixel upload must contain width * height * 4 bytes", "INVALID_PIXEL_UPLOAD_SIZE", {
+        targetId: target.id,
+        byteLength: pixels.length,
+        expectedByteLength: target.width * target.height * 4
+      });
+    }
+    const textureUnit0 = this.captureTextureUnit0();
+    try {
+      this.gl.bindTexture(this.gl.TEXTURE_2D, target.colorHandle);
+      this.gl.texSubImage2D(this.gl.TEXTURE_2D, 0, 0, 0, target.width, target.height, this.gl.RGBA, this.gl.UNSIGNED_BYTE, pixels);
+    } finally {
+      this.restoreTextureUnit0(textureUnit0);
+    }
+    this.lastError = this.readError();
+    if (this.lastError) {
+      throw new RenderDeviceError("WebGL2 render-target pixel upload failed", "WEBGL_PIXEL_UPLOAD_FAILED", {
+        targetId: target.id,
+        error: this.lastError
+      });
+    }
+  }
+
+  presentRenderTarget(source: RenderTarget): void {
+    this.assertAlive();
+    if (!(source instanceof WebGL2RenderTarget) || !this.renderTargets.has(source) || source.disposed) {
+      throw new RenderDeviceError("Render target is not a live WebGL2 resource owned by this device", "INVALID_RESOURCE", {
+        targetId: source.id
+      });
+    }
+    const outputWidth = this.viewportWidth || this.gl.drawingBufferWidth;
+    const outputHeight = this.viewportHeight || this.gl.drawingBufferHeight;
+    this.drawRenderTargetToBackbuffer(source, outputWidth, outputHeight);
+    this.activeRenderTarget = null;
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
+    this.lastError = this.readError();
+    if (this.lastError) {
+      throw new RenderDeviceError(`WebGL2 render-target presentation failed: ${this.lastError}`, "WEBGL_PRESENT_FAILED", {
+        targetId: source.id,
+        error: this.lastError
+      });
+    }
+  }
+
+  presentLdrPostprocess(source: RenderTarget, options: LdrPostprocessPresentationOptions): void {
+    this.assertAlive();
+    if (!(source instanceof WebGL2RenderTarget) || !this.renderTargets.has(source) || source.disposed) {
+      throw new RenderDeviceError("Render target is not a live WebGL2 resource owned by this device", "INVALID_RESOURCE", {
+        targetId: source.id
+      });
+    }
+    const tonePass = options.passes.find((pass) => pass.name === "tone-mapping");
+    if (source.colorTexture.format !== "rgba8" && !tonePass) {
+      throw new RenderDeviceError("WebGL2 HDR postprocess presentation requires a tone-mapping pass before LDR output.", "WEBGL_LDR_POSTPROCESS_FORMAT_UNSUPPORTED", {
+        targetId: source.id,
+        format: source.colorTexture.format
+      });
+    }
+    const outputTarget = options.outputTarget;
+    if (outputTarget && (!(outputTarget instanceof WebGL2RenderTarget) || !this.renderTargets.has(outputTarget) || outputTarget.disposed)) {
+      throw new RenderDeviceError("Output render target is not a live WebGL2 resource owned by this device", "INVALID_RESOURCE", {
+        targetId: outputTarget.id
+      });
+    }
+    if (outputTarget && outputTarget.colorTexture.format !== "rgba8") {
+      throw new RenderDeviceError("WebGL2 LDR postprocess output target must be rgba8.", "WEBGL_LDR_POSTPROCESS_OUTPUT_FORMAT_UNSUPPORTED", {
+        targetId: outputTarget.id,
+        format: outputTarget.colorTexture.format
+      });
+    }
+    if (outputTarget && (outputTarget.width !== source.width || outputTarget.height !== source.height)) {
+      throw new RenderDeviceError("WebGL2 LDR postprocess source and output dimensions must match.", "WEBGL_LDR_POSTPROCESS_SIZE_MISMATCH", {
+        sourceWidth: source.width,
+        sourceHeight: source.height,
+        targetWidth: outputTarget.width,
+        targetHeight: outputTarget.height
+      });
+    }
+    const webglOutputTarget = outputTarget as WebGL2RenderTarget | undefined;
+
+    const colorPass = options.passes.find((pass) => pass.name === "color-grade");
+    const fxaaPass = options.passes.find((pass) => pass.name === "fxaa");
+    const toneOptions = { ...(options.toneMappingDefaults ?? {}), ...(tonePass?.options ?? {}) };
+    const colorOptions = colorPass?.options ?? {};
+    const fxaaOptions = fxaaPass?.options ?? {};
+    const program = this.ensureLdrPostprocessProgram();
+    const vertexArray = this.ensurePresentationVertexArray();
+    const outputWidth = webglOutputTarget?.width ?? (this.viewportWidth || this.gl.drawingBufferWidth);
+    const outputHeight = webglOutputTarget?.height ?? (this.viewportHeight || this.gl.drawingBufferHeight);
+    const previousState = this.prepareFullscreenPresentation(webglOutputTarget?.framebuffer ?? null, outputWidth, outputHeight);
+    try {
+      this.gl.useProgram(program);
+      this.gl.bindVertexArray(vertexArray);
+      this.gl.activeTexture(this.gl.TEXTURE0);
+      this.gl.bindTexture(this.gl.TEXTURE_2D, source.colorHandle);
+      this.gl.bindSampler(0, null);
+      this.gl.uniform1i(this.gl.getUniformLocation(program, "u_source"), 0);
+      this.gl.uniform2f(this.gl.getUniformLocation(program, "u_texelSize"), 1 / source.width, 1 / source.height);
+      this.gl.uniform1i(this.gl.getUniformLocation(program, "u_hasToneMapping"), tonePass ? 1 : 0);
+      this.gl.uniform1i(this.gl.getUniformLocation(program, "u_toneOperator"), toneMappingOperatorId(stringOption(toneOptions, "operator", "reinhard")));
+      this.gl.uniform1i(this.gl.getUniformLocation(program, "u_inputColorSpace"), colorSpaceId(stringOption(toneOptions, "inputColorSpace", "linear")));
+      this.gl.uniform1i(this.gl.getUniformLocation(program, "u_outputColorSpace"), colorSpaceId(stringOption(toneOptions, "outputColorSpace", "linear")));
+      this.gl.uniform1f(this.gl.getUniformLocation(program, "u_exposure"), numberOption(toneOptions, "exposure", 1));
+      this.gl.uniform1f(this.gl.getUniformLocation(program, "u_whitePoint"), Math.max(0.0001, numberOption(toneOptions, "whitePoint", 1)));
+      this.gl.uniform1f(this.gl.getUniformLocation(program, "u_gamma"), Math.max(0.0001, numberOption(toneOptions, "gamma", 2.2)));
+      this.gl.uniform1i(this.gl.getUniformLocation(program, "u_hasColorGrade"), colorPass ? 1 : 0);
+      this.gl.uniform1f(this.gl.getUniformLocation(program, "u_contrast"), numberOption(colorOptions, "contrast", 1));
+      this.gl.uniform1f(this.gl.getUniformLocation(program, "u_temperature"), numberOption(colorOptions, "temperature", 0));
+      this.gl.uniform1f(this.gl.getUniformLocation(program, "u_tint"), numberOption(colorOptions, "tint", 0));
+      this.gl.uniform1f(this.gl.getUniformLocation(program, "u_saturation"), numberOption(colorOptions, "saturation", 1));
+      this.gl.uniform1f(this.gl.getUniformLocation(program, "u_vibrance"), numberOption(colorOptions, "vibrance", 0));
+      this.gl.uniform1f(this.gl.getUniformLocation(program, "u_vignette"), numberOption(colorOptions, "vignette", 0));
+      this.gl.uniform1f(this.gl.getUniformLocation(program, "u_sharpening"), numberOption(colorOptions, "sharpening", 0));
+      this.gl.uniform1i(this.gl.getUniformLocation(program, "u_hasFxaa"), fxaaPass ? 1 : 0);
+      this.gl.uniform1f(this.gl.getUniformLocation(program, "u_edgeThreshold"), numberOption(fxaaOptions, "edgeThreshold", 0.125));
+      this.gl.uniform1f(this.gl.getUniformLocation(program, "u_subpixelBlend"), numberOption(fxaaOptions, "subpixelBlend", 0.75));
+      this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
+      this.gl.flush();
+    } finally {
+      this.restoreFullscreenPresentationState(previousState, outputWidth, outputHeight);
+    }
+    this.lastError = this.readError();
+    if (this.lastError) {
+      throw new RenderDeviceError(`WebGL2 LDR postprocess presentation failed: ${this.lastError}`, "WEBGL_LDR_POSTPROCESS_FAILED", {
+        targetId: source.id,
+        error: this.lastError
+      });
+    }
+    this.setRenderTarget(webglOutputTarget ?? null);
+  }
+
+  readPixels(x: number, y: number, width: number, height: number): Uint8Array {
+    this.assertAlive();
+    if (![x, y, width, height].every(Number.isInteger) || x < 0 || y < 0 || width <= 0 || height <= 0) {
+      throw new RenderDeviceError("Readback rectangle must be positive and in bounds", "INVALID_READBACK_RECT", { x, y, width, height });
+    }
+    const boundsWidth = this.activeRenderTarget?.width ?? this.gl.drawingBufferWidth;
+    const boundsHeight = this.activeRenderTarget?.height ?? this.gl.drawingBufferHeight;
+    if (x + width > boundsWidth || y + height > boundsHeight) {
+      throw new RenderDeviceError("Readback rectangle exceeds framebuffer bounds", "READBACK_OUT_OF_BOUNDS", {
+        x,
+        y,
+        width,
+        height,
+        boundsWidth,
+        boundsHeight
+      });
+    }
+    const pixels = new Uint8Array(width * height * 4);
+    this.gl.readPixels(x, y, width, height, this.gl.RGBA, this.gl.UNSIGNED_BYTE, pixels);
+    return pixels;
+  }
+
+  readFloatPixels(x: number, y: number, width: number, height: number): Float32Array {
+    this.assertAlive();
+    if (![x, y, width, height].every(Number.isInteger) || x < 0 || y < 0 || width <= 0 || height <= 0) {
+      throw new RenderDeviceError("Float readback rectangle must be positive and in bounds", "INVALID_READBACK_RECT", { x, y, width, height });
+    }
+    const boundsWidth = this.activeRenderTarget?.width ?? this.gl.drawingBufferWidth;
+    const boundsHeight = this.activeRenderTarget?.height ?? this.gl.drawingBufferHeight;
+    if (x + width > boundsWidth || y + height > boundsHeight) {
+      throw new RenderDeviceError("Float readback rectangle exceeds framebuffer bounds", "READBACK_OUT_OF_BOUNDS", {
+        x,
+        y,
+        width,
+        height,
+        boundsWidth,
+        boundsHeight
+      });
+    }
+    const pixels = new Float32Array(width * height * 4);
+    this.gl.readPixels(x, y, width, height, this.gl.RGBA, this.gl.FLOAT, pixels);
+    return pixels;
+  }
+
+  readDepthPixels(x: number, y: number, width: number, height: number): Float32Array {
+    this.assertAlive();
+    if (![x, y, width, height].every(Number.isInteger) || x < 0 || y < 0 || width <= 0 || height <= 0) {
+      throw new RenderDeviceError("Depth readback rectangle must be positive and in bounds", "INVALID_READBACK_RECT", { x, y, width, height });
+    }
+    const target = this.activeRenderTarget;
+    if (!target?.depthTextureHandle) {
+      throw new RenderDeviceError("Depth readback requires an active WebGL2 render target with a sampleable depth texture.", "DEPTH_READBACK_UNAVAILABLE", {
+        renderTarget: target?.label ?? null
+      });
+    }
+    if (x + width > target.width || y + height > target.height) {
+      throw new RenderDeviceError("Depth readback rectangle exceeds framebuffer bounds", "READBACK_OUT_OF_BOUNDS", {
+        x,
+        y,
+        width,
+        height,
+        boundsWidth: target.width,
+        boundsHeight: target.height
+      });
+    }
+    const encoded = this.copyDepthTextureToBytes(target, x, y, width, height);
+    const pixels = new Float32Array(width * height);
+    for (let index = 0; index < pixels.length; index += 1) {
+      const byteIndex = index * 4;
+      const r = encoded[byteIndex] ?? 255;
+      const g = encoded[byteIndex + 1] ?? 255;
+      const b = encoded[byteIndex + 2] ?? 255;
+      pixels[index] = Math.max(0, Math.min(1, r / 255 + g / 65025 + b / 16581375));
+    }
+    return pixels;
+  }
+
+  beginFrame(width: number, height: number): void {
+    this.assertAlive();
+    if (this.frameActive) {
+      throw new RenderDeviceError("Frame is already active", "FRAME_ALREADY_ACTIVE");
+    }
+    if (width <= 0 || height <= 0) {
+      throw new RenderDeviceError("Frame dimensions must be positive", "INVALID_FRAME_SIZE", { width, height });
+    }
+    this.frameActive = true;
+    this.drawCalls = 0;
+    this.nativeEnvironmentBindings = 0;
+    this.nativeShadowMapBindings = 0;
+    this.activeTextureUnitIndex = -1;
+    this.textureUnitBindings.clear();
+    this.stateCache.invalidate();
+    this.viewportWidth = width;
+    this.viewportHeight = height;
+    this.stateCache.bindFramebuffer(this.gl.FRAMEBUFFER, this.activeRenderTarget?.framebuffer ?? null, () => this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.activeRenderTarget?.framebuffer ?? null));
+    this.stateCache.viewport(0, 0, width, height, () => this.gl.viewport(0, 0, width, height));
+    this.stateCache.setEnabled(this.gl.DEPTH_TEST, true, () => this.gl.enable(this.gl.DEPTH_TEST));
+    this.stateCache.depthFunc(this.gl.LEQUAL, () => this.gl.depthFunc(this.gl.LEQUAL));
+  }
+
+  clear(color: readonly [number, number, number, number]): void {
+    this.assertFrame();
+    this.gl.clearColor(color[0], color[1], color[2], color[3]);
+    this.stateCache.depthMask(true, () => this.gl.depthMask(true));
+    this.gl.clearDepth(1);
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+  }
+
+  clearRenderTarget(color: readonly [number, number, number, number]): void {
+    this.assertFrame();
+    this.gl.clearColor(color[0], color[1], color[2], color[3]);
+    this.stateCache.depthMask(true, () => this.gl.depthMask(true));
+    this.gl.clearDepth(1);
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+  }
+
+  draw(command: DrawCommand): void {
+    this.assertFrame();
+    const vertexBuffer = this.requireBuffer(command.vertexBuffer);
+    this.applyRenderState(command.renderState);
+    let shader: WebGL2ShaderProgram | undefined;
+    if (command.shader) {
+      const activeShader = this.requireShader(command.shader);
+      shader = activeShader;
+      this.stateCache.useProgram(activeShader.handle, () => this.gl.useProgram(activeShader.handle));
+      if (command.uniforms) {
+        this.uploadUniforms(activeShader, command.uniforms);
+        if (this.errorCheckMode === "strict") {
+          const uniformError = this.readError();
+          if (uniformError) {
+            throw new RenderDeviceError(`WebGL2 uniform upload failed for draw ${command.label ?? "unnamed"}: ${uniformError}`, "WEBGL_DRAW_FAILED", {
+              label: command.label,
+              stage: "uniforms",
+              error: uniformError
+            });
+          }
+        }
+      }
+    }
+
+    if (shader && command.vertexFormat) {
+      this.bindVertexArrayForCommand(command, shader, vertexBuffer);
+      if (this.errorCheckMode === "strict") {
+        const vertexFormatError = this.readError();
+        if (vertexFormatError) {
+          throw new RenderDeviceError(`WebGL2 vertex format binding failed for draw ${command.label ?? "unnamed"}: ${vertexFormatError}`, "WEBGL_DRAW_FAILED", {
+            label: command.label,
+            stage: "vertex-format",
+            error: vertexFormatError
+          });
+        }
+      }
+    } else {
+      this.bindNoVertexArray();
+      this.stateCache.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer.handle, () => this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer.handle));
+    }
+    if (command.indexBuffer) {
+      const indexBuffer = this.requireBuffer(command.indexBuffer);
+      if (!shader || !command.vertexFormat) {
+        this.stateCache.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, indexBuffer.handle, () => this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, indexBuffer.handle));
+      }
+      const type = command.indexType === "uint32" ? this.gl.UNSIGNED_INT : this.gl.UNSIGNED_SHORT;
+      const indexByteSize = command.indexType === "uint32" ? 4 : 2;
+      const indexOffset = (command.firstIndex ?? 0) * indexByteSize;
+      if ((command.instanceCount ?? 1) > 1) {
+        this.gl.drawElementsInstanced(this.primitive(command.topology), command.indexCount ?? 0, type, indexOffset, command.instanceCount ?? 1);
+        this.nativeInstancedSubmissions += 1;
+      } else {
+        this.gl.drawElements(this.primitive(command.topology), command.indexCount ?? 0, type, indexOffset);
+      }
+    } else {
+      if ((command.instanceCount ?? 1) > 1) {
+        this.gl.drawArraysInstanced(this.primitive(command.topology), command.firstVertex ?? 0, command.vertexCount, command.instanceCount ?? 1);
+        this.nativeInstancedSubmissions += 1;
+      } else {
+        this.gl.drawArrays(this.primitive(command.topology), command.firstVertex ?? 0, command.vertexCount);
+      }
+    }
+    this.drawCalls += 1;
+    if (this.errorCheckMode === "strict") {
+      const drawError = this.readError();
+      if (drawError) {
+        throw new RenderDeviceError(`WebGL2 draw failed for ${command.label ?? "unnamed"}: ${drawError}`, "WEBGL_DRAW_FAILED", {
+          label: command.label,
+          stage: "draw",
+          error: drawError
+        });
+      }
+    }
+  }
+
+  endFrame(): void {
+    this.assertFrame();
+    this.frameActive = false;
+    this.lastError = this.readError();
+  }
+
+  captureState(): ReadonlyMap<string, string | number | boolean | null> {
+    const viewport = this.gl.getParameter(this.gl.VIEWPORT) as Int32Array | readonly number[];
+    return new Map<string, string | number | boolean | null>([
+      ["backend", this.kind],
+      ["disposed", this.disposed],
+      ["contextLost", this.contextLost],
+      ["frameActive", this.frameActive],
+      ["depthTest", this.gl.isEnabled(this.gl.DEPTH_TEST)],
+      ["blend", this.gl.isEnabled(this.gl.BLEND)],
+      ["cullFace", this.gl.isEnabled(this.gl.CULL_FACE)],
+      ["program", this.gl.getParameter(this.gl.CURRENT_PROGRAM) ? "bound" : null],
+      ["arrayBuffer", this.gl.getParameter(this.gl.ARRAY_BUFFER_BINDING) ? "bound" : null],
+      ["elementArrayBuffer", this.gl.getParameter(this.gl.ELEMENT_ARRAY_BUFFER_BINDING) ? "bound" : null],
+      ["viewportWidth", this.viewportWidth],
+      ["viewportHeight", this.viewportHeight],
+      ["actualViewportWidth", viewport[2] ?? 0],
+      ["actualViewportHeight", viewport[3] ?? 0],
+      ["renderTarget", this.activeRenderTarget?.label ?? null],
+      ["drawCalls", this.drawCalls],
+      ["shaderProgramCreates", this.shaderProgramCreateCount],
+      ["uniformLocationLookups", this.uniformLocationLookupCount],
+      ["bufferUpdates", this.bufferUpdateCount],
+      ["textureBinds", this.textureBindCount],
+      ["samplerParameterUploads", this.samplerParameterUploadCount],
+      ["vertexArrayCreates", this.vertexArrayCreateCount],
+      ["samplerObjects", this.samplerObjectCache.size],
+      ["samplerAnisotropyUploads", this.samplerAnisotropyUploadCount],
+      ["maxTextureAnisotropy", this.maxTextureAnisotropy],
+      ["nativeEnvironmentBindings", this.nativeEnvironmentBindings],
+      ["nativeShadowMapBindings", this.nativeShadowMapBindings],
+      ["nativeInstancedSubmissions", this.nativeInstancedSubmissions],
+      ["stateCacheIssued", this.stateCache.stats().issued],
+      ["stateCacheSkipped", this.stateCache.stats().skipped]
+    ]);
+  }
+
+  getDiagnostics(): RenderDeviceDiagnostics {
+    this.releaseDisposedTextureHandles();
+    const liveRenderTargets = [...this.renderTargets].filter((target) => !target.disposed);
+    const liveTextures = new Set<Texture>([
+      ...liveRenderTargets.map((target) => target.colorTexture),
+      ...[...this.textures.keys()].filter((texture) => !texture.disposed)
+    ]);
+    const liveTextureList = [...liveTextures];
+    const compressedTextures = liveTextureList.filter((texture) => isCompressedTextureFormat(texture.format));
+    const fallbackTextures = liveTextureList.filter((texture) => this.textureUploadModes.get(texture) === "fallback");
+    const stateCacheStats = this.stateCache.stats();
+    const bufferBytes = [...this.buffers].filter((buffer) => !buffer.disposed).reduce((total, buffer) => total + buffer.byteLength, 0);
+    const textureBytes = liveTextureList.reduce((total, texture) => total + texture.byteLength, 0);
+    return {
+      drawCalls: this.drawCalls,
+      buffers: [...this.buffers].filter((buffer) => !buffer.disposed).length,
+      shaders: [...this.shaders].filter((shader) => !shader.disposed).length,
+      renderTargets: liveRenderTargets.length,
+      textures: liveTextures.size,
+      bufferBytes,
+      textureBytes,
+      approximateGpuMemoryBytes: bufferBytes + textureBytes,
+      compressedTextures: compressedTextures.length,
+      compressedTextureBytes: compressedTextures.reduce((total, texture) => total + texture.byteLength, 0),
+      textureFallbacks: fallbackTextures.length,
+      textureFallbackBytes: fallbackTextures.reduce((total, texture) => total + texture.fallbackByteLength, 0),
+      nativeEnvironmentBindings: this.nativeEnvironmentBindings,
+      nativeShadowMapBindings: this.nativeShadowMapBindings,
+      nativeInstancedSubmissions: this.nativeInstancedSubmissions,
+      samplerAnisotropyUploads: this.samplerAnisotropyUploadCount,
+      maxTextureAnisotropy: this.maxTextureAnisotropy,
+      stateCacheIssued: stateCacheStats.issued,
+      stateCacheSkipped: stateCacheStats.skipped,
+      stateCacheProgramSwitches: stateCacheStats.byOperation.useProgram?.issued ?? 0,
+      stateCacheTextureBinds: stateCacheStats.byOperation.bindTexture?.issued ?? 0,
+      stateCacheBufferBinds: stateCacheStats.byOperation.bindBuffer?.issued ?? 0,
+      stateCacheVertexArrayBinds: stateCacheStats.byOperation.bindVertexArray?.issued ?? 0,
+      stateCacheSamplerBinds: stateCacheStats.byOperation.bindSampler?.issued ?? 0,
+      disposedBuffers: [...this.buffers].filter((buffer) => buffer.disposed).length,
+      disposedShaders: [...this.shaders].filter((shader) => shader.disposed).length,
+      disposedRenderTargets: [...this.renderTargets].filter((target) => target.disposed).length,
+      disposedTextures: [...this.renderTargets].filter((target) => target.colorTexture.disposed).length + this.releasedTextureHandles,
+      lastError: this.lastError,
+      contextLost: this.contextLost
+    };
+  }
+
+  dispose(): void {
+    if (this.canvas && "removeEventListener" in this.canvas) {
+      if (this.contextLostListener) this.canvas.removeEventListener("webglcontextlost", this.contextLostListener);
+      if (this.contextRestoredListener) this.canvas.removeEventListener("webglcontextrestored", this.contextRestoredListener);
+    }
+    for (const buffer of this.buffers) {
+      buffer.dispose();
+    }
+    for (const shader of this.shaders) {
+      shader.dispose();
+    }
+    for (const target of this.renderTargets) {
+      target.dispose();
+    }
+    for (const entry of this.vertexArrayCache.values()) {
+      this.gl.deleteVertexArray(entry.handle);
+    }
+    this.vertexArrayCache.clear();
+    for (const sampler of this.samplerObjectCache.values()) {
+      this.gl.deleteSampler(sampler);
+    }
+    this.samplerObjectCache.clear();
+    for (const texture of this.textures.values()) {
+      this.gl.deleteTexture(texture);
+    }
+    this.textureUploadModes.clear();
+    if (this.fallbackTexture) {
+      this.gl.deleteTexture(this.fallbackTexture);
+      this.fallbackTexture = null;
+    }
+    if (this.fallbackCubeTexture) {
+      this.gl.deleteTexture(this.fallbackCubeTexture);
+      this.fallbackCubeTexture = null;
+    }
+    if (this.presentationProgram) {
+      this.gl.deleteProgram(this.presentationProgram);
+      this.presentationProgram = null;
+    }
+    if (this.ldrPostprocessProgram) {
+      this.gl.deleteProgram(this.ldrPostprocessProgram);
+      this.ldrPostprocessProgram = null;
+    }
+    if (this.presentationVertexArray) {
+      this.gl.deleteVertexArray(this.presentationVertexArray);
+      this.presentationVertexArray = null;
+    }
+    if (this.depthReadbackProgram) {
+      this.gl.deleteProgram(this.depthReadbackProgram);
+      this.depthReadbackProgram = null;
+    }
+    this.textures.clear();
+    this.disposed = true;
+  }
+
+  private copyDepthTextureToBytes(source: WebGL2RenderTarget, x: number, y: number, width: number, height: number): Uint8Array {
+    const colorHandle = this.gl.createTexture();
+    const framebuffer = this.gl.createFramebuffer();
+    if (!colorHandle || !framebuffer) {
+      if (colorHandle) this.gl.deleteTexture(colorHandle);
+      if (framebuffer) this.gl.deleteFramebuffer(framebuffer);
+      throw new RenderDeviceError("Failed to allocate WebGL2 depth readback target", "WEBGL_ALLOCATION_FAILED", {
+        renderTarget: source.label
+      });
+    }
+    const previousFramebuffer = this.gl.getParameter(this.gl.FRAMEBUFFER_BINDING) as WebGLFramebuffer | null;
+    const previousProgram = this.gl.getParameter(this.gl.CURRENT_PROGRAM) as WebGLProgram | null;
+    const textureUnit0 = this.captureTextureUnit0();
+    const viewport = this.gl.getParameter(this.gl.VIEWPORT) as Int32Array | readonly number[];
+    const depthTestEnabled = this.gl.isEnabled(this.gl.DEPTH_TEST);
+    const depthMask = this.gl.getParameter(this.gl.DEPTH_WRITEMASK) as boolean;
+    const cullFaceEnabled = this.gl.isEnabled(this.gl.CULL_FACE);
+    const blendEnabled = this.gl.isEnabled(this.gl.BLEND);
+    const pixels = new Uint8Array(width * height * 4);
+    try {
+      this.gl.activeTexture(this.gl.TEXTURE0);
+      this.gl.bindTexture(this.gl.TEXTURE_2D, colorHandle);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+      this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA8, width, height, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, null);
+      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
+      this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_2D, colorHandle, 0);
+      const status = this.gl.checkFramebufferStatus(this.gl.FRAMEBUFFER);
+      if (status !== this.gl.FRAMEBUFFER_COMPLETE) {
+        throw new RenderDeviceError("WebGL2 depth readback framebuffer status is invalid", "FRAMEBUFFER_INVALID", {
+          renderTarget: source.label,
+          status
+        });
+      }
+      this.gl.viewport(0, 0, width, height);
+      this.gl.disable(this.gl.DEPTH_TEST);
+      this.gl.disable(this.gl.CULL_FACE);
+      this.gl.disable(this.gl.BLEND);
+      this.gl.depthMask(false);
+      this.gl.useProgram(this.ensureDepthReadbackProgram());
+      this.gl.activeTexture(this.gl.TEXTURE0);
+      this.gl.bindTexture(this.gl.TEXTURE_2D, source.depthTextureHandle);
+      this.gl.bindSampler(0, null);
+      this.gl.uniform1i(this.gl.getUniformLocation(this.ensureDepthReadbackProgram(), "u_depth"), 0);
+      this.gl.uniform4f(this.gl.getUniformLocation(this.ensureDepthReadbackProgram(), "u_sourceRect"), x / source.width, y / source.height, width / source.width, height / source.height);
+      this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
+      this.gl.readPixels(0, 0, width, height, this.gl.RGBA, this.gl.UNSIGNED_BYTE, pixels);
+      const error = this.readError();
+      if (error) {
+        throw new RenderDeviceError("WebGL2 depth texture readback failed", "WEBGL_DEPTH_READBACK_FAILED", {
+          renderTarget: source.label,
+          error
+        });
+      }
+      return pixels;
+    } finally {
+      this.restoreTextureUnit0(textureUnit0);
+      this.gl.useProgram(previousProgram);
+      if (depthTestEnabled) this.gl.enable(this.gl.DEPTH_TEST);
+      else this.gl.disable(this.gl.DEPTH_TEST);
+      if (cullFaceEnabled) this.gl.enable(this.gl.CULL_FACE);
+      else this.gl.disable(this.gl.CULL_FACE);
+      if (blendEnabled) this.gl.enable(this.gl.BLEND);
+      else this.gl.disable(this.gl.BLEND);
+      this.gl.depthMask(depthMask);
+      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, previousFramebuffer);
+      this.gl.viewport(viewport[0] ?? 0, viewport[1] ?? 0, viewport[2] ?? this.viewportWidth, viewport[3] ?? this.viewportHeight);
+      this.gl.deleteTexture(colorHandle);
+      this.gl.deleteFramebuffer(framebuffer);
+      this.stateCache.invalidate();
+    }
+  }
+
+  private drawRenderTargetToBackbuffer(source: WebGL2RenderTarget, outputWidth: number, outputHeight: number): void {
+    const program = this.ensurePresentationProgram();
+    const vertexArray = this.ensurePresentationVertexArray();
+    const previousState = this.prepareFullscreenPresentation(null, outputWidth, outputHeight);
+    this.gl.useProgram(program);
+    this.gl.bindVertexArray(vertexArray);
+    this.gl.activeTexture(this.gl.TEXTURE0);
+    this.gl.bindTexture(this.gl.TEXTURE_2D, source.colorHandle);
+    this.gl.bindSampler(0, null);
+    try {
+      const uniformLocation = this.gl.getUniformLocation(program, "u_source");
+      this.gl.uniform1i(uniformLocation, 0);
+      this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
+      this.gl.flush();
+    } finally {
+      this.restoreFullscreenPresentationState(previousState, outputWidth, outputHeight);
+    }
+  }
+
+  private captureTextureUnit0(): WebGL2TextureUnit0Snapshot {
+    const activeTexture = this.gl.getParameter(this.gl.ACTIVE_TEXTURE) as GLenum;
+    this.gl.activeTexture(this.gl.TEXTURE0);
+    return {
+      activeTexture,
+      texture2d: this.gl.getParameter(this.gl.TEXTURE_BINDING_2D) as WebGLTexture | null,
+      sampler: this.gl.getParameter(this.gl.SAMPLER_BINDING) as WebGLSampler | null
+    };
+  }
+
+  private restoreTextureUnit0(snapshot: WebGL2TextureUnit0Snapshot): void {
+    this.gl.activeTexture(this.gl.TEXTURE0);
+    this.gl.bindTexture(this.gl.TEXTURE_2D, snapshot.texture2d);
+    this.gl.bindSampler(0, snapshot.sampler);
+    this.gl.activeTexture(snapshot.activeTexture);
+  }
+
+  private prepareFullscreenPresentation(framebuffer: WebGLFramebuffer | null, outputWidth: number, outputHeight: number): WebGL2FullscreenPresentationStateSnapshot {
+    const snapshot: WebGL2FullscreenPresentationStateSnapshot = {
+      framebuffer: this.gl.getParameter(this.gl.FRAMEBUFFER_BINDING) as WebGLFramebuffer | null,
+      program: this.gl.getParameter(this.gl.CURRENT_PROGRAM) as WebGLProgram | null,
+      textureUnit0: this.captureTextureUnit0(),
+      vertexArray: this.gl.getParameter(this.gl.VERTEX_ARRAY_BINDING) as WebGLVertexArrayObject | null,
+      viewport: this.gl.getParameter(this.gl.VIEWPORT) as Int32Array | readonly number[],
+      colorMask: this.gl.getParameter(this.gl.COLOR_WRITEMASK) as readonly boolean[],
+      depthTestEnabled: this.gl.isEnabled(this.gl.DEPTH_TEST),
+      cullFaceEnabled: this.gl.isEnabled(this.gl.CULL_FACE),
+      blendEnabled: this.gl.isEnabled(this.gl.BLEND),
+      scissorTestEnabled: this.gl.isEnabled(this.gl.SCISSOR_TEST),
+      stencilTestEnabled: this.gl.isEnabled(this.gl.STENCIL_TEST),
+      polygonOffsetFillEnabled: this.gl.isEnabled(this.gl.POLYGON_OFFSET_FILL),
+      depthMask: this.gl.getParameter(this.gl.DEPTH_WRITEMASK) as boolean
+    };
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
+    this.gl.viewport(0, 0, outputWidth, outputHeight);
+    this.gl.colorMask(true, true, true, true);
+    this.gl.disable(this.gl.SCISSOR_TEST);
+    this.gl.disable(this.gl.STENCIL_TEST);
+    this.gl.disable(this.gl.POLYGON_OFFSET_FILL);
+    this.gl.disable(this.gl.DEPTH_TEST);
+    this.gl.disable(this.gl.CULL_FACE);
+    this.gl.disable(this.gl.BLEND);
+    this.gl.depthMask(false);
+    return snapshot;
+  }
+
+  private restoreFullscreenPresentationState(snapshot: WebGL2FullscreenPresentationStateSnapshot, fallbackWidth: number, fallbackHeight: number): void {
+    this.gl.bindVertexArray(snapshot.vertexArray);
+    this.restoreTextureUnit0(snapshot.textureUnit0);
+    this.gl.useProgram(snapshot.program);
+    if (snapshot.depthTestEnabled) this.gl.enable(this.gl.DEPTH_TEST);
+    else this.gl.disable(this.gl.DEPTH_TEST);
+    if (snapshot.cullFaceEnabled) this.gl.enable(this.gl.CULL_FACE);
+    else this.gl.disable(this.gl.CULL_FACE);
+    if (snapshot.blendEnabled) this.gl.enable(this.gl.BLEND);
+    else this.gl.disable(this.gl.BLEND);
+    if (snapshot.scissorTestEnabled) this.gl.enable(this.gl.SCISSOR_TEST);
+    else this.gl.disable(this.gl.SCISSOR_TEST);
+    if (snapshot.stencilTestEnabled) this.gl.enable(this.gl.STENCIL_TEST);
+    else this.gl.disable(this.gl.STENCIL_TEST);
+    if (snapshot.polygonOffsetFillEnabled) this.gl.enable(this.gl.POLYGON_OFFSET_FILL);
+    else this.gl.disable(this.gl.POLYGON_OFFSET_FILL);
+    this.gl.colorMask(snapshot.colorMask[0] ?? true, snapshot.colorMask[1] ?? true, snapshot.colorMask[2] ?? true, snapshot.colorMask[3] ?? true);
+    this.gl.depthMask(snapshot.depthMask);
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, snapshot.framebuffer);
+    this.gl.viewport(snapshot.viewport[0] ?? 0, snapshot.viewport[1] ?? 0, snapshot.viewport[2] ?? fallbackWidth, snapshot.viewport[3] ?? fallbackHeight);
+    this.stateCache.invalidate();
+  }
+
+  private ensurePresentationVertexArray(): WebGLVertexArrayObject {
+    if (this.presentationVertexArray) return this.presentationVertexArray;
+    const vertexArray = this.gl.createVertexArray();
+    if (!vertexArray) {
+      throw new RenderDeviceError("Failed to allocate WebGL presentation vertex array", "WEBGL_ALLOCATION_FAILED");
+    }
+    this.presentationVertexArray = vertexArray;
+    return vertexArray;
+  }
+
+  private ensureDepthReadbackProgram(): WebGLProgram {
+    if (this.depthReadbackProgram) {
+      return this.depthReadbackProgram;
+    }
+    const vertex = this.compileShader(this.gl.VERTEX_SHADER, `#version 300 es
+precision highp float;
+out vec2 v_uv;
+void main() {
+  vec2 position = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+  v_uv = position;
+  gl_Position = vec4(position * 2.0 - 1.0, 0.0, 1.0);
+}
+`, "webgl2-depth-readback");
+    const fragment = this.compileShader(this.gl.FRAGMENT_SHADER, `#version 300 es
+precision highp float;
+uniform sampler2D u_depth;
+uniform vec4 u_sourceRect;
+in vec2 v_uv;
+out vec4 outColor;
+vec3 packDepth24(float value) {
+  value = clamp(value, 0.0, 1.0);
+  vec3 encoded = fract(value * vec3(1.0, 255.0, 65025.0));
+  encoded -= encoded.yzz * vec3(1.0 / 255.0, 1.0 / 255.0, 0.0);
+  return encoded;
+}
+void main() {
+  vec2 uv = u_sourceRect.xy + v_uv * u_sourceRect.zw;
+  outColor = vec4(packDepth24(texture(u_depth, uv).r), 1.0);
+}
+`, "webgl2-depth-readback");
+    const program = this.gl.createProgram();
+    if (!program) {
+      this.gl.deleteShader(vertex);
+      this.gl.deleteShader(fragment);
+      throw new RenderDeviceError("Failed to allocate WebGL2 depth readback shader", "WEBGL_ALLOCATION_FAILED");
+    }
+    this.gl.attachShader(program, vertex);
+    this.gl.attachShader(program, fragment);
+    this.gl.linkProgram(program);
+    this.gl.deleteShader(vertex);
+    this.gl.deleteShader(fragment);
+    if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
+      const log = this.gl.getProgramInfoLog(program) ?? "Unknown depth readback shader link error";
+      this.gl.deleteProgram(program);
+      throw new RenderDeviceError("WebGL2 depth readback shader link failed", "SHADER_LINK_FAILED", { log });
+    }
+    this.depthReadbackProgram = program;
+    return program;
+  }
+
+  private ensurePresentationProgram(): WebGLProgram {
+    if (this.presentationProgram) {
+      return this.presentationProgram;
+    }
+    const vertex = this.compileShader(this.gl.VERTEX_SHADER, `#version 300 es
+precision highp float;
+out vec2 v_uv;
+void main() {
+  vec2 position = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+  v_uv = position;
+  gl_Position = vec4(position * 2.0 - 1.0, 0.0, 1.0);
+}
+`, "webgl2-present-render-target");
+    const fragment = this.compileShader(this.gl.FRAGMENT_SHADER, `#version 300 es
+precision highp float;
+uniform sampler2D u_source;
+in vec2 v_uv;
+out vec4 outColor;
+void main() {
+  outColor = texture(u_source, v_uv);
+}
+`, "webgl2-present-render-target");
+    const program = this.gl.createProgram();
+    if (!program) {
+      this.gl.deleteShader(vertex);
+      this.gl.deleteShader(fragment);
+      throw new RenderDeviceError("Failed to allocate WebGL presentation shader", "WEBGL_ALLOCATION_FAILED");
+    }
+    this.gl.attachShader(program, vertex);
+    this.gl.attachShader(program, fragment);
+    this.gl.linkProgram(program);
+    this.gl.deleteShader(vertex);
+    this.gl.deleteShader(fragment);
+    if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
+      const log = this.gl.getProgramInfoLog(program) ?? "Unknown presentation shader link error";
+      this.gl.deleteProgram(program);
+      throw new RenderDeviceError("WebGL presentation shader link failed", "SHADER_LINK_FAILED", { log });
+    }
+    this.presentationProgram = program;
+    return program;
+  }
+
+  private ensureLdrPostprocessProgram(): WebGLProgram {
+    if (this.ldrPostprocessProgram) {
+      return this.ldrPostprocessProgram;
+    }
+    const vertex = this.compileShader(this.gl.VERTEX_SHADER, `#version 300 es
+precision highp float;
+out vec2 v_uv;
+void main() {
+  vec2 position = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+  v_uv = position;
+  gl_Position = vec4(position * 2.0 - 1.0, 0.0, 1.0);
+}
+`, "webgl2-ldr-postprocess");
+    const fragment = this.compileShader(this.gl.FRAGMENT_SHADER, `#version 300 es
+precision highp float;
+uniform sampler2D u_source;
+uniform vec2 u_texelSize;
+uniform int u_hasToneMapping;
+uniform int u_toneOperator;
+uniform int u_inputColorSpace;
+uniform int u_outputColorSpace;
+uniform float u_exposure;
+uniform float u_whitePoint;
+uniform float u_gamma;
+uniform int u_hasColorGrade;
+uniform float u_contrast;
+uniform float u_temperature;
+uniform float u_tint;
+uniform float u_saturation;
+uniform float u_vibrance;
+uniform float u_vignette;
+uniform float u_sharpening;
+uniform int u_hasFxaa;
+uniform float u_edgeThreshold;
+uniform float u_subpixelBlend;
+in vec2 v_uv;
+out vec4 outColor;
+
+float srgbToLinear(float value) {
+  return value <= 0.04045 ? value / 12.92 : pow((value + 0.055) / 1.055, 2.4);
+}
+
+float linearToSrgb(float value) {
+  return value <= 0.0031308 ? value * 12.92 : 1.055 * pow(value, 1.0 / 2.4) - 0.055;
+}
+
+vec3 decodeColor(vec3 color) {
+  return u_inputColorSpace == 1 ? vec3(srgbToLinear(color.r), srgbToLinear(color.g), srgbToLinear(color.b)) : color;
+}
+
+vec3 encodeColor(vec3 color) {
+  vec3 linear = clamp(color, 0.0, 1.0);
+  return u_outputColorSpace == 1 ? vec3(linearToSrgb(linear.r), linearToSrgb(linear.g), linearToSrgb(linear.b)) : linear;
+}
+
+float aces(float value) {
+  return (value * (2.51 * value + 0.03)) / (value * (2.43 * value + 0.59) + 0.14);
+}
+
+float filmic(float value) {
+  float x = max(0.0, value);
+  float toe = max(0.0, x - 0.004);
+  float curve = (toe * (6.2 * toe + 0.5)) / (toe * (6.2 * toe + 1.7) + 0.06);
+  return min(curve, x * 1.08);
+}
+
+float uncharted2(float value) {
+  float a = 0.15;
+  float b = 0.5;
+  float c = 0.1;
+  float d = 0.2;
+  float e = 0.02;
+  float f = 0.3;
+  float w = 11.2;
+  float x = value * 2.0;
+  float curve = ((x * (a * x + c * b) + d * e) / (x * (a * x + b) + d * f)) - e / f;
+  float wx = w;
+  float white = ((wx * (a * wx + c * b) + d * e) / (wx * (a * wx + b) + d * f)) - e / f;
+  return clamp(curve / white, 0.0, 1.0);
+}
+
+float agx(float value) {
+  float x = max(0.0, value);
+  float encoded = log2(1.0 + x) / log2(17.0);
+  return clamp(encoded * encoded * (3.0 - 2.0 * encoded), 0.0, 1.0);
+}
+
+float neutral(float value) {
+  float x = max(0.0, value);
+  return min(1.0, (x * (1.0 + x / 7.5)) / (1.0 + x));
+}
+
+float toneMapChannel(float value) {
+  float exposed = max(0.0, value * u_exposure) / max(0.0001, u_whitePoint);
+  if (u_toneOperator == 0) return min(1.0, exposed);
+  if (u_toneOperator == 1) return exposed / (1.0 + exposed);
+  if (u_toneOperator == 2) return aces(exposed);
+  if (u_toneOperator == 3) return filmic(exposed);
+  if (u_toneOperator == 4) return uncharted2(exposed);
+  if (u_toneOperator == 5) return agx(exposed);
+  return neutral(exposed);
+}
+
+vec3 applyToneMapping(vec3 color) {
+  if (u_hasToneMapping == 0) return color;
+  vec3 decoded = decodeColor(color);
+  vec3 mapped = vec3(toneMapChannel(decoded.r), toneMapChannel(decoded.g), toneMapChannel(decoded.b));
+  return encodeColor(mapped);
+}
+
+vec3 applyColorGrade(vec3 color, vec2 uv) {
+  if (u_hasColorGrade == 0) return color;
+  float contrastOffset = 0.5 - 0.5 * u_contrast;
+  float redShift = u_temperature * 0.08 - u_tint * 0.02;
+  float greenShift = u_tint * 0.06;
+  float blueShift = -u_temperature * 0.08 - u_tint * 0.02;
+  float luma = dot(color, vec3(0.2126, 0.7152, 0.0722));
+  vec3 graded = color * u_contrast + vec3(contrastOffset + redShift, contrastOffset + greenShift, contrastOffset + blueShift);
+  float distanceFromLuma = min(1.0, abs(graded.r - luma) + abs(graded.g - luma) + abs(graded.b - luma));
+  float vibranceBoost = u_vibrance == 0.0 ? 0.0 : u_vibrance * (1.0 - distanceFromLuma);
+  float saturation = u_saturation + vibranceBoost;
+  graded = vec3(luma) + (graded - vec3(luma)) * saturation;
+  vec2 centered = uv * 2.0 - 1.0;
+  float vignette = 1.0 - u_vignette * clamp((length(centered) - 0.28) / 1.12, 0.0, 1.0);
+  return clamp(graded * vignette, 0.0, 1.0);
+}
+
+vec3 baseColorAt(vec2 uv) {
+  vec2 clampedUv = clamp(uv, vec2(0.0), vec2(1.0));
+  vec3 color = texture(u_source, clampedUv).rgb;
+  return applyColorGrade(applyToneMapping(color), clampedUv);
+}
+
+vec3 finalColorAt(vec2 uv) {
+  vec3 center = baseColorAt(uv);
+  if (u_hasColorGrade == 0 || u_sharpening <= 0.0) return center;
+  vec3 blur = (
+    baseColorAt(uv + vec2(-u_texelSize.x, 0.0)) +
+    baseColorAt(uv + vec2(u_texelSize.x, 0.0)) +
+    baseColorAt(uv + vec2(0.0, -u_texelSize.y)) +
+    baseColorAt(uv + vec2(0.0, u_texelSize.y))
+  ) * 0.25;
+  return clamp(center + (center - blur) * u_sharpening, 0.0, 1.0);
+}
+
+float luma(vec3 color) {
+  return dot(color, vec3(0.2126, 0.7152, 0.0722));
+}
+
+void main() {
+  vec3 center = finalColorAt(v_uv);
+  float alpha = texture(u_source, clamp(v_uv, vec2(0.0), vec2(1.0))).a;
+  if (u_hasFxaa == 0) {
+    outColor = vec4(center, alpha);
+    return;
+  }
+  vec3 north = finalColorAt(v_uv + vec2(0.0, -u_texelSize.y));
+  vec3 south = finalColorAt(v_uv + vec2(0.0, u_texelSize.y));
+  vec3 west = finalColorAt(v_uv + vec2(-u_texelSize.x, 0.0));
+  vec3 east = finalColorAt(v_uv + vec2(u_texelSize.x, 0.0));
+  float centerLuma = luma(center);
+  float minLuma = min(centerLuma, min(min(luma(north), luma(south)), min(luma(west), luma(east))));
+  float maxLuma = max(centerLuma, max(max(luma(north), luma(south)), max(luma(west), luma(east))));
+  if (maxLuma - minLuma < u_edgeThreshold) {
+    outColor = vec4(center, alpha);
+    return;
+  }
+  vec3 average = (north + south + west + east) * 0.25;
+  outColor = vec4(mix(center, average, clamp(u_subpixelBlend, 0.0, 1.0)), alpha);
+}
+`, "webgl2-ldr-postprocess");
+    const program = this.gl.createProgram();
+    if (!program) {
+      this.gl.deleteShader(vertex);
+      this.gl.deleteShader(fragment);
+      throw new RenderDeviceError("Failed to allocate WebGL2 LDR postprocess shader", "WEBGL_ALLOCATION_FAILED");
+    }
+    this.gl.attachShader(program, vertex);
+    this.gl.attachShader(program, fragment);
+    this.gl.linkProgram(program);
+    this.gl.deleteShader(vertex);
+    this.gl.deleteShader(fragment);
+    if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
+      const log = this.gl.getProgramInfoLog(program) ?? "Unknown LDR postprocess shader link error";
+      this.gl.deleteProgram(program);
+      throw new RenderDeviceError("WebGL2 LDR postprocess shader link failed", "SHADER_LINK_FAILED", { log });
+    }
+    this.ldrPostprocessProgram = program;
+    return program;
+  }
+
+  private compileShader(type: GLenum, source: string, label: string): WebGLShader {
+    const shader = this.gl.createShader(type);
+    if (!shader) {
+      throw new RenderDeviceError("Failed to allocate WebGL shader", "WEBGL_ALLOCATION_FAILED", { label });
+    }
+    this.gl.shaderSource(shader, source);
+    this.gl.compileShader(shader);
+    if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+      const log = this.gl.getShaderInfoLog(shader) ?? "Unknown shader compile error";
+      this.gl.deleteShader(shader);
+      throw new RenderDeviceError("WebGL shader compile failed", "SHADER_COMPILE_FAILED", { label, log });
+    }
+    return shader;
+  }
+
+  private reflectProgram(program: WebGLProgram): ShaderReflection {
+    const attributes = new Map<string, number>();
+    const uniforms = new Set<string>();
+    const attributeDetails = new Map<string, ShaderReflection["attributeDetails"] extends ReadonlyMap<string, infer T> ? T : never>();
+    const uniformDetails = new Map<string, ShaderReflection["uniformDetails"] extends ReadonlyMap<string, infer T> ? T : never>();
+    const activeAttributes = this.gl.getProgramParameter(program, this.gl.ACTIVE_ATTRIBUTES) as number;
+    const activeUniforms = this.gl.getProgramParameter(program, this.gl.ACTIVE_UNIFORMS) as number;
+
+    for (let i = 0; i < activeAttributes; i += 1) {
+      const info = this.gl.getActiveAttrib(program, i);
+      if (info) {
+        const location = this.gl.getAttribLocation(program, info.name);
+        attributes.set(info.name, location);
+        attributeDetails.set(info.name, { name: info.name, type: String(info.type), location, source: "vertex", line: 0 });
+      }
+    }
+    for (let i = 0; i < activeUniforms; i += 1) {
+      const info = this.gl.getActiveUniform(program, i);
+      if (info) {
+        const name = info.name.replace(/\[0\]$/, "");
+        uniforms.add(name);
+        uniformDetails.set(name, { name, type: String(info.type), arraySize: info.size > 1 ? info.size : null, source: "fragment", line: 0 });
+      }
+    }
+    return { attributes, uniforms, attributeDetails, uniformDetails };
+  }
+
+  private uploadUniforms(shader: WebGL2ShaderProgram, uniforms: ReadonlyMap<string, unknown>): void {
+    let textureUnit = 0;
+    for (const [name, value] of uniforms) {
+      if (!shader.reflection.uniforms.has(name)) {
+        continue;
+      }
+      const location = this.getUniformLocation(shader, name);
+      if (location === null) {
+        throw new RenderDeviceError("Material tried to bind a missing shader uniform", "MISSING_UNIFORM", { name });
+      }
+      if (value instanceof TextureBinding) {
+        this.uploadTextureUniform(location, value, textureUnit);
+        textureUnit += 1;
+      } else if (typeof value === "number") {
+        this.gl.uniform1f(location, value);
+      } else if (Array.isArray(value) || ArrayBuffer.isView(value)) {
+        const length = (value as ArrayLike<number>).length;
+        const floatData = value as Float32List;
+        if (length === 16 || (length > 16 && length % 16 === 0 && /(?:Matrix|Matrices)$/.test(name))) {
+          this.gl.uniformMatrix4fv(location, false, floatData);
+        } else if (length > 16 && length % 4 === 0) {
+          this.gl.uniform4fv(location, floatData);
+        } else if (length === 4) {
+          this.gl.uniform4fv(location, floatData);
+        } else if (length === 3) {
+          this.gl.uniform3fv(location, floatData);
+        } else if (length === 2) {
+          this.gl.uniform2fv(location, floatData);
+        } else {
+          throw new RenderDeviceError("Unsupported uniform array length", "UNSUPPORTED_UNIFORM", { name, length });
+        }
+      } else {
+        throw new RenderDeviceError("Unsupported uniform value", "UNSUPPORTED_UNIFORM", { name, valueType: typeof value });
+      }
+    }
+  }
+
+  private getUniformLocation(shader: WebGL2ShaderProgram, name: string): WebGLUniformLocation | null {
+    let cache = this.uniformLocationCache.get(shader);
+    if (!cache) {
+      cache = new Map();
+      this.uniformLocationCache.set(shader, cache);
+    }
+    if (!cache.has(name)) {
+      this.uniformLocationLookupCount += 1;
+      cache.set(name, this.gl.getUniformLocation(shader.handle, name) ?? this.gl.getUniformLocation(shader.handle, `${name}[0]`));
+    }
+    return cache.get(name) ?? null;
+  }
+
+  private uploadTextureUniform(location: WebGLUniformLocation, binding: TextureBinding, textureUnit: number): void {
+    const validation = binding.validate();
+    if (!validation.ok) {
+      throw new RenderDeviceError("Texture binding validation failed", "INVALID_TEXTURE_BINDING", {
+        diagnostics: validation.diagnostics,
+        name: binding.name
+      });
+    }
+    this.activateTextureUnit(textureUnit);
+    const dimension = binding.texture?.dimension ?? (binding.name.toLowerCase().includes("cubemap") || binding.name.toLowerCase().includes("cube") ? "cube" : "2d");
+    const target = dimension === "cube" ? this.gl.TEXTURE_CUBE_MAP : this.gl.TEXTURE_2D;
+    const handle = binding.texture ? this.getTextureHandle(binding.texture) : dimension === "cube" ? this.getFallbackCubeTextureHandle() : this.getFallbackTextureHandle();
+    if (binding.texture) {
+      const lowerName = binding.name.toLowerCase();
+      if (lowerName.includes("environment")) this.nativeEnvironmentBindings += 1;
+      if (lowerName.includes("shadow")) this.nativeShadowMapBindings += 1;
+    }
+    this.bindTextureForUnit(textureUnit, target, handle);
+    const samplerHandle = this.getSamplerHandle(binding.sampler, target);
+    this.stateCache.bindSampler(textureUnit, samplerHandle, () => this.gl.bindSampler(textureUnit, samplerHandle));
+    this.gl.uniform1i(location, textureUnit);
+  }
+
+  private activateTextureUnit(textureUnit: number): void {
+    if (this.activeTextureUnitIndex === textureUnit) return;
+    this.stateCache.activeTexture(textureUnit, () => this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit));
+    this.activeTextureUnitIndex = textureUnit;
+  }
+
+  private bindTextureForUnit(textureUnit: number, target: GLenum, handle: WebGLTexture): void {
+    const key = `${textureUnit}:${target}`;
+    if (this.textureUnitBindings.get(key) === handle) return;
+    this.stateCache.bindTexture(target, handle, () => this.gl.bindTexture(target, handle));
+    this.textureUnitBindings.set(key, handle);
+    this.textureBindCount += 1;
+  }
+
+  private setTextureParameterIfNeeded(handle: WebGLTexture, target: GLenum, parameter: GLenum, value: GLenum | number): void {
+    let parameters = this.textureSamplerParameterCache.get(handle);
+    if (!parameters) {
+      parameters = new Map();
+      this.textureSamplerParameterCache.set(handle, parameters);
+    }
+    if (parameters.get(parameter) === value) return;
+    this.gl.texParameteri(target, parameter, value);
+    parameters.set(parameter, value);
+    this.samplerParameterUploadCount += 1;
+  }
+
+  private applySamplerAnisotropy(maxAnisotropy: number, target: GLenum = this.gl.TEXTURE_2D): void {
+    if (maxAnisotropy <= 1) return;
+    if (!this.anisotropicFilteringExtension) return;
+    this.gl.texParameterf(
+      target,
+      this.anisotropicFilteringExtension.TEXTURE_MAX_ANISOTROPY_EXT,
+      Math.min(Math.max(1, maxAnisotropy), this.maxTextureAnisotropy)
+    );
+    this.samplerAnisotropyUploadCount += 1;
+  }
+
+  private getSamplerHandle(sampler: Sampler, target: GLenum): WebGLSampler {
+    const key = this.samplerKey(sampler, target);
+    const cached = this.samplerObjectCache.get(key);
+    if (cached) return cached;
+    const handle = this.gl.createSampler();
+    if (!handle) {
+      throw new RenderDeviceError("Failed to allocate WebGL sampler", "WEBGL_ALLOCATION_FAILED");
+    }
+    this.gl.samplerParameteri(handle, this.gl.TEXTURE_MIN_FILTER, this.minFilter(sampler.minFilter));
+    this.gl.samplerParameteri(handle, this.gl.TEXTURE_MAG_FILTER, this.magFilter(sampler.magFilter));
+    this.gl.samplerParameteri(handle, this.gl.TEXTURE_WRAP_S, this.addressMode(sampler.addressU));
+    this.gl.samplerParameteri(handle, this.gl.TEXTURE_WRAP_T, this.addressMode(sampler.addressV));
+    this.samplerParameterUploadCount += 4;
+    if (target === this.gl.TEXTURE_CUBE_MAP) {
+      this.gl.samplerParameteri(handle, this.gl.TEXTURE_WRAP_R, this.addressMode(sampler.addressV));
+      this.samplerParameterUploadCount += 1;
+    }
+    if (sampler.maxAnisotropy > 1 && this.anisotropicFilteringExtension) {
+      this.gl.samplerParameterf(
+        handle,
+        this.anisotropicFilteringExtension.TEXTURE_MAX_ANISOTROPY_EXT,
+        Math.min(Math.max(1, sampler.maxAnisotropy), this.maxTextureAnisotropy)
+      );
+      this.samplerAnisotropyUploadCount += 1;
+    }
+    this.samplerObjectCache.set(key, handle);
+    return handle;
+  }
+
+  private samplerKey(sampler: Sampler, target: GLenum): string {
+    return [
+      sampler.minFilter,
+      sampler.magFilter,
+      sampler.addressU,
+      sampler.addressV,
+      sampler.maxAnisotropy,
+      target === this.gl.TEXTURE_CUBE_MAP ? "cube" : "2d"
+    ].join("|");
+  }
+
+  private getFallbackTextureHandle(): WebGLTexture {
+    if (this.fallbackTexture) {
+      return this.fallbackTexture;
+    }
+    const handle = this.gl.createTexture();
+    if (!handle) {
+      throw new RenderDeviceError("Failed to allocate WebGL fallback texture", "WEBGL_ALLOCATION_FAILED");
+    }
+    this.stateCache.invalidate();
+    this.gl.bindTexture(this.gl.TEXTURE_2D, handle);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+    this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, 1, 1, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, new Uint8Array([255, 255, 255, 255]));
+    this.fallbackTexture = handle;
+    return handle;
+  }
+
+  private getFallbackCubeTextureHandle(): WebGLTexture {
+    if (this.fallbackCubeTexture) {
+      return this.fallbackCubeTexture;
+    }
+    const handle = this.gl.createTexture();
+    if (!handle) {
+      throw new RenderDeviceError("Failed to allocate WebGL fallback cube texture", "WEBGL_ALLOCATION_FAILED");
+    }
+    this.stateCache.invalidate();
+    this.gl.bindTexture(this.gl.TEXTURE_CUBE_MAP, handle);
+    this.gl.texParameteri(this.gl.TEXTURE_CUBE_MAP, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
+    this.gl.texParameteri(this.gl.TEXTURE_CUBE_MAP, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+    this.gl.texParameteri(this.gl.TEXTURE_CUBE_MAP, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+    this.gl.texParameteri(this.gl.TEXTURE_CUBE_MAP, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+    this.gl.texParameteri(this.gl.TEXTURE_CUBE_MAP, this.gl.TEXTURE_WRAP_R, this.gl.CLAMP_TO_EDGE);
+    const pixel = new Uint8Array([255, 255, 255, 255]);
+    for (const face of WEBGL_CUBE_FACES) {
+      this.gl.texImage2D(this.cubeFaceTarget(face), 0, this.gl.RGBA, 1, 1, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, pixel);
+    }
+    this.fallbackCubeTexture = handle;
+    return handle;
+  }
+
+  private getTextureHandle(texture: Texture): WebGLTexture {
+    this.releaseDisposedTextureHandles();
+    if (texture.disposed) {
+      throw new RenderDeviceError("Texture is disposed", "DISPOSED_RESOURCE", { label: texture.label });
+    }
+    const cached = this.textures.get(texture);
+    if (cached) {
+      return cached;
+    }
+    const handle = this.gl.createTexture();
+    if (!handle) {
+      throw new RenderDeviceError("Failed to allocate WebGL texture", "WEBGL_ALLOCATION_FAILED", { label: texture.label });
+    }
+    this.stateCache.invalidate();
+    this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, false);
+    this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+    this.gl.pixelStorei(this.gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, this.gl.NONE);
+    if (texture.dimension === "cube") {
+      this.uploadCubeTexture(texture, handle);
+      this.textureUploadModes.set(texture, "cube");
+      this.textures.set(texture, handle);
+      return handle;
+    }
+    this.gl.bindTexture(this.gl.TEXTURE_2D, handle);
+    if (isCompressedTextureFormat(texture.format)) {
+      const compressed = this.resolveCompressedTextureFormat(texture.format);
+      if (compressed) {
+        const uploadLevels = completeUploadLevels(texture.textureLevels);
+        for (const [levelIndex, level] of uploadLevels.entries()) {
+          this.gl.compressedTexImage2D(this.gl.TEXTURE_2D, levelIndex, compressed.internalFormat, level.width, level.height, 0, level.data);
+        }
+        const compressedUploadError = this.readError();
+        if (!compressedUploadError) {
+          this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_BASE_LEVEL, 0);
+          this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAX_LEVEL, uploadLevels.length - 1);
+          this.textureUploadModes.set(texture, "compressed");
+          this.textures.set(texture, handle);
+          return handle;
+        }
+      }
+      const fallbackLevels = completeUploadLevels(texture.fallbackTextureLevels);
+      if (fallbackLevels.length === 0) {
+        this.gl.deleteTexture(handle);
+        throw new RenderDeviceError("Compressed texture format is not supported and no RGBA8 fallback data was provided", "COMPRESSED_TEXTURE_UNSUPPORTED", {
+          label: texture.label,
+          format: texture.format
+        });
+      }
+      this.uploadRgba8FallbackTexture(texture, fallbackLevels);
+      this.textureUploadModes.set(texture, "fallback");
+      this.textures.set(texture, handle);
+      return handle;
+    }
+    if (texture.format === "depth24") {
+      throw new RenderDeviceError("Depth textures cannot be uploaded to WebGL2 color samplers", "UNSUPPORTED_TEXTURE_FORMAT", {
+        label: texture.label,
+        format: texture.format
+      });
+    }
+    if (texture.source) {
+      this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.rgba8TextureInternalFormat(texture), this.gl.RGBA, this.gl.UNSIGNED_BYTE, texture.source);
+      this.gl.generateMipmap(this.gl.TEXTURE_2D);
+    } else if (texture.mipLevels.length > 0) {
+      const uploadFormat = this.textureUploadFormat(texture);
+      const uploadLevels = completeUploadLevels(texture.textureLevels);
+      for (const [levelIndex, level] of uploadLevels.entries()) {
+        this.gl.texImage2D(
+          this.gl.TEXTURE_2D,
+          levelIndex,
+          uploadFormat.internalFormat,
+          level.width,
+          level.height,
+          0,
+          uploadFormat.format,
+          uploadFormat.type,
+          texturePixelUploadData(level.data, texture.format)
+        );
+      }
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_BASE_LEVEL, 0);
+      this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAX_LEVEL, uploadLevels.length - 1);
+    } else {
+      const uploadFormat = this.textureUploadFormat(texture);
+      this.gl.texImage2D(
+        this.gl.TEXTURE_2D,
+        0,
+        uploadFormat.internalFormat,
+        texture.width,
+        texture.height,
+        0,
+        uploadFormat.format,
+        uploadFormat.type,
+        texture.data ? texturePixelUploadData(texture.data, texture.format) : null
+      );
+      this.gl.generateMipmap(this.gl.TEXTURE_2D);
+    }
+    this.textureUploadModes.set(texture, texture.format);
+    this.textures.set(texture, handle);
+    return handle;
+  }
+
+  private uploadCubeTexture(texture: Texture, handle: WebGLTexture): void {
+    this.gl.bindTexture(this.gl.TEXTURE_CUBE_MAP, handle);
+    const uploadFormat = this.textureUploadFormat(texture);
+    for (const face of texture.cubeFaces) {
+      const uploadLevels = completeUploadLevels(face.mipLevels);
+      for (const [levelIndex, level] of uploadLevels.entries()) {
+        this.gl.texImage2D(
+          this.cubeFaceTarget(face.face),
+          levelIndex,
+          uploadFormat.internalFormat,
+          level.width,
+          level.height,
+          0,
+          uploadFormat.format,
+          uploadFormat.type,
+          texturePixelUploadData(level.data, texture.format)
+        );
+      }
+    }
+    const firstFaceLevels = completeUploadLevels(texture.cubeFaces[0]?.mipLevels ?? []);
+    this.gl.texParameteri(this.gl.TEXTURE_CUBE_MAP, this.gl.TEXTURE_BASE_LEVEL, 0);
+    this.gl.texParameteri(this.gl.TEXTURE_CUBE_MAP, this.gl.TEXTURE_MAX_LEVEL, Math.max(0, firstFaceLevels.length - 1));
+    this.gl.texParameteri(this.gl.TEXTURE_CUBE_MAP, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+    this.gl.texParameteri(this.gl.TEXTURE_CUBE_MAP, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+    this.gl.texParameteri(this.gl.TEXTURE_CUBE_MAP, this.gl.TEXTURE_WRAP_R, this.gl.CLAMP_TO_EDGE);
+  }
+
+  private uploadRgba8FallbackTexture(texture: Texture, fallbackLevels: readonly { readonly width: number; readonly height: number; readonly data: TexturePixelData }[]): void {
+    const internalFormat = this.rgba8TextureInternalFormat(texture);
+    for (const [levelIndex, level] of fallbackLevels.entries()) {
+      this.gl.texImage2D(
+        this.gl.TEXTURE_2D,
+        levelIndex,
+        internalFormat,
+        level.width,
+        level.height,
+        0,
+        this.gl.RGBA,
+        this.gl.UNSIGNED_BYTE,
+        texturePixelUploadData(level.data, "rgba8")
+      );
+    }
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_BASE_LEVEL, 0);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAX_LEVEL, fallbackLevels.length - 1);
+  }
+
+  private cubeFaceTarget(face: TextureCubeFace): GLenum {
+    switch (face) {
+      case "px": return this.gl.TEXTURE_CUBE_MAP_POSITIVE_X;
+      case "nx": return this.gl.TEXTURE_CUBE_MAP_NEGATIVE_X;
+      case "py": return this.gl.TEXTURE_CUBE_MAP_POSITIVE_Y;
+      case "ny": return this.gl.TEXTURE_CUBE_MAP_NEGATIVE_Y;
+      case "pz": return this.gl.TEXTURE_CUBE_MAP_POSITIVE_Z;
+      case "nz": return this.gl.TEXTURE_CUBE_MAP_NEGATIVE_Z;
+    }
+  }
+
+  private rgba8TextureInternalFormat(texture: Texture): GLenum {
+    return texture.colorSpace === "srgb" ? this.gl.SRGB8_ALPHA8 : this.gl.RGBA;
+  }
+
+  private textureUploadFormat(texture: Texture): { readonly internalFormat: GLenum; readonly format: GLenum; readonly type: GLenum } {
+    if (texture.format === "rgba8") {
+      return { internalFormat: this.rgba8TextureInternalFormat(texture), format: this.gl.RGBA, type: this.gl.UNSIGNED_BYTE };
+    }
+    if (texture.colorSpace === "srgb") {
+      throw new RenderDeviceError("Floating-point texture uploads must use linear colorSpace", "UNSUPPORTED_TEXTURE_FORMAT", {
+        label: texture.label,
+        format: texture.format,
+        colorSpace: texture.colorSpace
+      });
+    }
+    if (texture.format === "rgba16f") {
+      return { internalFormat: this.gl.RGBA16F, format: this.gl.RGBA, type: this.gl.HALF_FLOAT };
+    }
+    if (texture.format === "rgba32f") {
+      return { internalFormat: this.gl.RGBA32F, format: this.gl.RGBA, type: this.gl.FLOAT };
+    }
+    throw new RenderDeviceError("Unsupported texture upload format", "UNSUPPORTED_TEXTURE_FORMAT", {
+      label: texture.label,
+      format: texture.format
+    });
+  }
+
+  private resolveRenderTargetFormat(format: "rgba8" | "rgba16f" | "rgba32f"): { readonly internalFormat: GLenum; readonly type: GLenum } {
+    if (format === "rgba8") {
+      return { internalFormat: this.gl.RGBA, type: this.gl.UNSIGNED_BYTE };
+    }
+    if (!this.gl.getExtension("EXT_color_buffer_float")) {
+      throw new RenderDeviceError("Floating-point color render targets require EXT_color_buffer_float", "HDR_RENDER_TARGET_UNSUPPORTED", { format });
+    }
+    if (format === "rgba16f") {
+      return { internalFormat: this.gl.RGBA16F, type: this.gl.HALF_FLOAT };
+    }
+    return { internalFormat: this.gl.RGBA32F, type: this.gl.FLOAT };
+  }
+
+  private releaseDisposedTextureHandles(): void {
+    for (const [texture, handle] of [...this.textures]) {
+      if (texture.disposed) {
+        this.gl.deleteTexture(handle);
+        this.textures.delete(texture);
+        this.textureUploadModes.delete(texture);
+        this.releasedTextureHandles += 1;
+      }
+    }
+  }
+
+  private resolveCompressedTextureFormat(format: TextureCompressedFormat): { readonly internalFormat: GLenum } | null {
+    switch (format) {
+      case "bc1-rgba-unorm": {
+        const extension = this.gl.getExtension("WEBGL_compressed_texture_s3tc");
+        return extension ? { internalFormat: extension.COMPRESSED_RGBA_S3TC_DXT1_EXT } : null;
+      }
+      case "bc3-rgba-unorm": {
+        const extension = this.gl.getExtension("WEBGL_compressed_texture_s3tc");
+        return extension ? { internalFormat: extension.COMPRESSED_RGBA_S3TC_DXT5_EXT } : null;
+      }
+      case "etc2-rgba8unorm":
+        return { internalFormat: 0x9278 };
+      case "astc-4x4-rgba-unorm": {
+        const extension = this.gl.getExtension("WEBGL_compressed_texture_astc");
+        return extension ? { internalFormat: extension.COMPRESSED_RGBA_ASTC_4x4_KHR } : null;
+      }
+    }
+  }
+
+  private magFilter(filter: TextureMagFilter): GLenum {
+    return filter === "nearest" ? this.gl.NEAREST : this.gl.LINEAR;
+  }
+
+  private minFilter(filter: TextureMinFilter): GLenum {
+    switch (filter) {
+      case "nearest":
+        return this.gl.NEAREST;
+      case "linear":
+        return this.gl.LINEAR;
+      case "nearest-mipmap-nearest":
+        return this.gl.NEAREST_MIPMAP_NEAREST;
+      case "linear-mipmap-nearest":
+        return this.gl.LINEAR_MIPMAP_NEAREST;
+      case "nearest-mipmap-linear":
+        return this.gl.NEAREST_MIPMAP_LINEAR;
+      case "linear-mipmap-linear":
+        return this.gl.LINEAR_MIPMAP_LINEAR;
+    }
+  }
+
+  private addressMode(mode: "clamp-to-edge" | "repeat" | "mirror-repeat"): GLenum {
+    if (mode === "repeat") return this.gl.REPEAT;
+    if (mode === "mirror-repeat") return this.gl.MIRRORED_REPEAT;
+    return this.gl.CLAMP_TO_EDGE;
+  }
+
+  private bindVertexFormat(shader: RenderShaderProgram, format: VertexFormat): Set<number> {
+    const boundLocations = new Set<number>();
+    for (const attribute of format.attributes) {
+      const location = this.resolveAttributeLocation(shader, attribute);
+      if (location < 0) {
+        continue;
+      }
+      if (attribute.type !== "float32") {
+        throw new RenderDeviceError("Unsupported vertex attribute type", "UNSUPPORTED_VERTEX_ATTRIBUTE", {
+          attribute: attribute.shaderName,
+          type: attribute.type
+        });
+      }
+      boundLocations.add(location);
+      this.gl.enableVertexAttribArray(location);
+      this.gl.vertexAttribDivisor(location, 0);
+      this.gl.vertexAttribPointer(
+        location,
+        attribute.components,
+        this.gl.FLOAT,
+        attribute.normalized,
+        format.stride,
+        attribute.offset
+      );
+    }
+    return boundLocations;
+  }
+
+  private bindVertexArrayForCommand(command: DrawCommand, shader: WebGL2ShaderProgram, vertexBuffer: WebGL2Buffer): WebGL2VertexArrayCacheEntry {
+    const indexBuffer = command.indexBuffer ? this.requireBuffer(command.indexBuffer) : undefined;
+    const key = this.vertexArrayCacheKey(command, shader, vertexBuffer, indexBuffer);
+    const cached = this.vertexArrayCache.get(key);
+    if (cached) {
+      this.stateCache.bindVertexArray(cached.handle, () => this.gl.bindVertexArray(cached.handle));
+      return cached;
+    }
+
+    const handle = this.gl.createVertexArray();
+    if (!handle) {
+      throw new RenderDeviceError("Failed to allocate WebGL vertex array", "WEBGL_ALLOCATION_FAILED");
+    }
+    this.vertexArrayCreateCount += 1;
+    this.stateCache.bindVertexArray(handle, () => this.gl.bindVertexArray(handle));
+    this.stateCache.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer.handle, () => this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer.handle));
+    const boundLocations = this.bindVertexFormat(shader, command.vertexFormat!);
+    if (command.instanceAttributes && command.instanceAttributes.length > 0) {
+      this.bindInstanceAttributes(shader, command.instanceAttributes, boundLocations);
+    }
+    if (indexBuffer) {
+      this.stateCache.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, indexBuffer.handle, () => this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, indexBuffer.handle));
+    }
+    this.disableUnboundVertexAttributes(boundLocations);
+    this.applyDefaultAttributes(shader, boundLocations);
+    const entry: WebGL2VertexArrayCacheEntry = { key, handle, boundLocations };
+    this.vertexArrayCache.set(key, entry);
+    return entry;
+  }
+
+  private bindNoVertexArray(): void {
+    this.stateCache.bindVertexArray(null, () => this.gl.bindVertexArray(null));
+  }
+
+  private vertexArrayCacheKey(command: DrawCommand, shader: WebGL2ShaderProgram, vertexBuffer: WebGL2Buffer, indexBuffer: WebGL2Buffer | undefined): string {
+    const instanceKey = (command.instanceAttributes ?? []).map((attribute) => {
+      const buffer = this.requireBuffer(attribute.buffer);
+      return `${attribute.shaderName}:${buffer.id}:${attribute.components}:${attribute.offset}:${attribute.stride}:${attribute.normalized === true ? 1 : 0}:${attribute.divisor ?? 1}`;
+    }).join(",");
+    return [
+      shader.id,
+      vertexBuffer.id,
+      this.vertexFormatId(command.vertexFormat!),
+      indexBuffer?.id ?? 0,
+      instanceKey
+    ].join("|");
+  }
+
+  private vertexFormatId(format: VertexFormat): number {
+    const existing = this.vertexFormatIds.get(format);
+    if (existing !== undefined) return existing;
+    const next = this.nextVertexFormatId;
+    this.nextVertexFormatId += 1;
+    this.vertexFormatIds.set(format, next);
+    return next;
+  }
+
+  private bindInstanceAttributes(shader: RenderShaderProgram, attributes: readonly InstanceVertexAttribute[], boundLocations: Set<number>): void {
+    for (const attribute of attributes) {
+      const location = shader.reflection.attributes.get(attribute.shaderName);
+      if (location === undefined || location < 0) {
+        continue;
+      }
+      if (![1, 2, 3, 4].includes(attribute.components)) {
+        throw new RenderDeviceError("Instance vertex attribute components must be 1, 2, 3, or 4", "INVALID_DRAW_COMMAND", {
+          attribute: attribute.shaderName,
+          components: attribute.components
+        });
+      }
+      if (!Number.isInteger(attribute.offset) || attribute.offset < 0 || attribute.offset % 4 !== 0) {
+        throw new RenderDeviceError("Instance vertex attribute offset must be non-negative and 4-byte aligned", "INVALID_DRAW_COMMAND", {
+          attribute: attribute.shaderName,
+          offset: attribute.offset
+        });
+      }
+      if (!Number.isInteger(attribute.stride) || attribute.stride <= 0 || attribute.stride % 4 !== 0) {
+        throw new RenderDeviceError("Instance vertex attribute stride must be positive and 4-byte aligned", "INVALID_DRAW_COMMAND", {
+          attribute: attribute.shaderName,
+          stride: attribute.stride
+        });
+      }
+      if (attribute.offset + attribute.components * 4 > attribute.stride) {
+        throw new RenderDeviceError("Instance vertex attribute range must fit inside its stride", "INVALID_DRAW_COMMAND", {
+          attribute: attribute.shaderName,
+          offset: attribute.offset,
+          components: attribute.components,
+          stride: attribute.stride
+        });
+      }
+      const buffer = this.requireBuffer(attribute.buffer);
+      boundLocations.add(location);
+      this.stateCache.bindBuffer(this.gl.ARRAY_BUFFER, buffer.handle, () => this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer.handle));
+      this.gl.enableVertexAttribArray(location);
+      this.gl.vertexAttribPointer(
+        location,
+        attribute.components,
+        this.gl.FLOAT,
+        attribute.normalized ?? false,
+        attribute.stride,
+        attribute.offset
+      );
+      this.gl.vertexAttribDivisor(location, attribute.divisor ?? 1);
+    }
+  }
+
+  private resolveAttributeLocation(shader: RenderShaderProgram, attribute: VertexAttribute): number {
+    const reflected = shader.reflection.attributes.get(attribute.shaderName);
+    if (reflected !== undefined) {
+      return reflected;
+    }
+    return shader.reflection.attributes.get(attribute.semantic) ?? -1;
+  }
+
+  private applyDefaultAttributes(shader: RenderShaderProgram, boundLocations: ReadonlySet<number>): void {
+    const colorLocation = shader.reflection.attributes.get("a_color") ?? shader.reflection.attributes.get("color");
+    if (colorLocation !== undefined && colorLocation >= 0 && !boundLocations.has(colorLocation)) {
+      this.gl.disableVertexAttribArray(colorLocation);
+      this.gl.vertexAttribDivisor(colorLocation, 0);
+      this.gl.vertexAttrib4f(colorLocation, 1, 1, 1, 1);
+    }
+    const tangentLocation = shader.reflection.attributes.get("a_tangent") ?? shader.reflection.attributes.get("tangent");
+    if (tangentLocation !== undefined && tangentLocation >= 0 && !boundLocations.has(tangentLocation)) {
+      this.gl.disableVertexAttribArray(tangentLocation);
+      this.gl.vertexAttribDivisor(tangentLocation, 0);
+      this.gl.vertexAttrib4f(tangentLocation, 1, 0, 0, 1);
+    }
+    const uv1Location = shader.reflection.attributes.get("a_uv1") ?? shader.reflection.attributes.get("uv1");
+    if (uv1Location !== undefined && uv1Location >= 0 && !boundLocations.has(uv1Location)) {
+      this.gl.disableVertexAttribArray(uv1Location);
+      this.gl.vertexAttribDivisor(uv1Location, 0);
+      this.gl.vertexAttrib2f(uv1Location, 0, 0);
+    }
+    const instanceColorLocation = shader.reflection.attributes.get("a_instanceColor") ?? shader.reflection.attributes.get("instanceColor");
+    if (instanceColorLocation !== undefined && instanceColorLocation >= 0 && !boundLocations.has(instanceColorLocation)) {
+      this.gl.disableVertexAttribArray(instanceColorLocation);
+      this.gl.vertexAttribDivisor(instanceColorLocation, 0);
+      this.gl.vertexAttrib4f(instanceColorLocation, 1, 1, 1, 1);
+    }
+  }
+
+  private disableUnboundVertexAttributes(boundLocations: ReadonlySet<number>): void {
+    for (let location = 0; location < this.maxVertexAttributes; location += 1) {
+      if (!boundLocations.has(location)) {
+        this.gl.disableVertexAttribArray(location);
+        this.gl.vertexAttribDivisor(location, 0);
+      }
+    }
+  }
+
+  private primitive(topology: DrawCommand["topology"]): GLenum {
+    if (topology === "lines") return this.gl.LINES;
+    if (topology === "points") return this.gl.POINTS;
+    return this.gl.TRIANGLES;
+  }
+
+  private applyRenderState(state: DrawCommand["renderState"]): void {
+    const renderState = state ?? {
+      depthTest: true,
+      depthWrite: true,
+      cullMode: "back" as const,
+      blend: false,
+      depthCompare: "less-equal" as const,
+      colorWrite: [true, true, true, true] as const,
+      scissor: null,
+      polygonOffset: null,
+      stencil: null
+    };
+    this.stateCache.setEnabled(this.gl.DEPTH_TEST, renderState.depthTest, () => {
+      if (renderState.depthTest) this.gl.enable(this.gl.DEPTH_TEST);
+      else this.gl.disable(this.gl.DEPTH_TEST);
+    });
+    this.stateCache.depthMask(renderState.depthWrite, () => this.gl.depthMask(renderState.depthWrite));
+    this.stateCache.depthFunc(renderState.depthCompare === "always" ? this.gl.ALWAYS : this.gl.LEQUAL, () => this.gl.depthFunc(renderState.depthCompare === "always" ? this.gl.ALWAYS : this.gl.LEQUAL));
+    const colorWrite = renderState.colorWrite ?? [true, true, true, true] as const;
+    this.stateCache.colorMask(colorWrite[0], colorWrite[1], colorWrite[2], colorWrite[3], () => this.gl.colorMask(colorWrite[0], colorWrite[1], colorWrite[2], colorWrite[3]));
+    if (renderState.scissor) {
+      this.stateCache.setEnabled(this.gl.SCISSOR_TEST, true, () => this.gl.enable(this.gl.SCISSOR_TEST));
+      this.stateCache.scissor(renderState.scissor.x, renderState.scissor.y, renderState.scissor.width, renderState.scissor.height, () => {
+        this.gl.scissor(renderState.scissor!.x, renderState.scissor!.y, renderState.scissor!.width, renderState.scissor!.height);
+      });
+    } else {
+      this.stateCache.setEnabled(this.gl.SCISSOR_TEST, false, () => this.gl.disable(this.gl.SCISSOR_TEST));
+    }
+    if (renderState.polygonOffset) {
+      this.stateCache.setEnabled(this.gl.POLYGON_OFFSET_FILL, true, () => this.gl.enable(this.gl.POLYGON_OFFSET_FILL));
+      this.stateCache.polygonOffset(renderState.polygonOffset.factor, renderState.polygonOffset.units, () => this.gl.polygonOffset(renderState.polygonOffset!.factor, renderState.polygonOffset!.units));
+    } else {
+      this.stateCache.setEnabled(this.gl.POLYGON_OFFSET_FILL, false, () => this.gl.disable(this.gl.POLYGON_OFFSET_FILL));
+    }
+    if (renderState.stencil) {
+      const stencil = renderState.stencil;
+      const compare = this.stencilCompare(stencil.compare ?? "always");
+      const reference = stencil.reference ?? 0;
+      const readMask = stencil.readMask ?? 0xff;
+      const writeMask = stencil.writeMask ?? 0xff;
+      const fail = this.stencilOperation(stencil.fail ?? "keep");
+      const depthFail = this.stencilOperation(stencil.depthFail ?? "keep");
+      const depthPass = this.stencilOperation(stencil.depthPass ?? "keep");
+      this.stateCache.setEnabled(this.gl.STENCIL_TEST, true, () => this.gl.enable(this.gl.STENCIL_TEST));
+      this.stateCache.stencilFunc(compare, reference, readMask, () => this.gl.stencilFunc(compare, reference, readMask));
+      this.stateCache.stencilMask(writeMask, () => this.gl.stencilMask(writeMask));
+      this.stateCache.stencilOp(fail, depthFail, depthPass, () => this.gl.stencilOp(fail, depthFail, depthPass));
+    } else {
+      this.stateCache.setEnabled(this.gl.STENCIL_TEST, false, () => this.gl.disable(this.gl.STENCIL_TEST));
+    }
+    if (renderState.cullMode === "none") {
+      this.stateCache.setEnabled(this.gl.CULL_FACE, false, () => this.gl.disable(this.gl.CULL_FACE));
+    } else {
+      this.stateCache.setEnabled(this.gl.CULL_FACE, true, () => this.gl.enable(this.gl.CULL_FACE));
+      this.stateCache.cullFace(renderState.cullMode === "front" ? this.gl.FRONT : this.gl.BACK, () => this.gl.cullFace(renderState.cullMode === "front" ? this.gl.FRONT : this.gl.BACK));
+    }
+    if (renderState.blend) {
+      this.stateCache.setEnabled(this.gl.BLEND, true, () => this.gl.enable(this.gl.BLEND));
+      this.stateCache.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA, () => this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA));
+    } else {
+      this.stateCache.setEnabled(this.gl.BLEND, false, () => this.gl.disable(this.gl.BLEND));
+    }
+  }
+
+  private requireBuffer(buffer: RenderBuffer): WebGL2Buffer {
+    if (!(buffer instanceof WebGL2Buffer) || !this.buffers.has(buffer) || buffer.disposed) {
+      throw new RenderDeviceError("Buffer is not a live WebGL2 resource owned by this device", "INVALID_RESOURCE", {
+        bufferId: buffer.id
+      });
+    }
+    return buffer;
+  }
+
+  private stencilCompare(compare: NonNullable<DrawCommand["renderState"]>["stencil"] extends infer Stencil ? Stencil extends { readonly compare?: infer Compare } ? NonNullable<Compare> : never : never): GLenum {
+    switch (compare) {
+      case "never": return this.gl.NEVER;
+      case "less": return this.gl.LESS;
+      case "less-equal": return this.gl.LEQUAL;
+      case "greater": return this.gl.GREATER;
+      case "greater-equal": return this.gl.GEQUAL;
+      case "equal": return this.gl.EQUAL;
+      case "not-equal": return this.gl.NOTEQUAL;
+      case "always": return this.gl.ALWAYS;
+    }
+  }
+
+  private stencilOperation(operation: NonNullable<DrawCommand["renderState"]>["stencil"] extends infer Stencil ? Stencil extends { readonly fail?: infer Operation } ? NonNullable<Operation> : never : never): GLenum {
+    switch (operation) {
+      case "keep": return this.gl.KEEP;
+      case "zero": return this.gl.ZERO;
+      case "replace": return this.gl.REPLACE;
+      case "increment": return this.gl.INCR;
+      case "decrement": return this.gl.DECR;
+      case "invert": return this.gl.INVERT;
+      case "increment-wrap": return this.gl.INCR_WRAP;
+      case "decrement-wrap": return this.gl.DECR_WRAP;
+    }
+  }
+
+  private requireShader(shader: RenderShaderProgram): WebGL2ShaderProgram {
+    if (!(shader instanceof WebGL2ShaderProgram) || !this.shaders.has(shader) || shader.disposed) {
+      throw new RenderDeviceError("Shader is not a live WebGL2 resource owned by this device", "INVALID_RESOURCE", {
+        shaderId: shader.id
+      });
+    }
+    return shader;
+  }
+
+  private assertAlive(): void {
+    if (this.disposed) {
+      throw new RenderDeviceError("Render device is disposed", "DISPOSED_DEVICE");
+    }
+    if (this.contextLost) {
+      throw new RenderDeviceError("Render context is lost", "CONTEXT_LOST");
+    }
+  }
+
+  private assertFrame(): void {
+    this.assertAlive();
+    if (!this.frameActive) {
+      throw new RenderDeviceError("No active frame", "NO_ACTIVE_FRAME");
+    }
+  }
+
+  private readError(): string | null {
+    const error = this.gl.getError();
+    return error === this.gl.NO_ERROR ? null : `0x${error.toString(16)}`;
+  }
+}
+
+function numberOption(options: Readonly<Record<string, unknown>>, key: string, fallback: number): number {
+  const value = options[key];
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function stringOption(options: Readonly<Record<string, unknown>>, key: string, fallback: string): string {
+  const value = options[key];
+  return typeof value === "string" ? value : fallback;
+}
+
+function colorSpaceId(value: string): number {
+  return value === "srgb" ? 1 : 0;
+}
+
+function toneMappingOperatorId(value: string): number {
+  if (value === "linear") return 0;
+  if (value === "reinhard") return 1;
+  if (value === "aces") return 2;
+  if (value === "filmic") return 3;
+  if (value === "uncharted2") return 4;
+  if (value === "agx") return 5;
+  return 6;
+}
+
+function completeUploadLevels<T extends { readonly width: number; readonly height: number }>(levels: readonly T[]): readonly T[] {
+  const uploadLevels: T[] = [];
+  for (const level of levels) {
+    if (uploadLevels.length === 0) {
+      uploadLevels.push(level);
+      continue;
+    }
+    const previous = uploadLevels[uploadLevels.length - 1]!;
+    const expectedWidth = Math.max(1, Math.floor(previous.width / 2));
+    const expectedHeight = Math.max(1, Math.floor(previous.height / 2));
+    if (level.width !== expectedWidth || level.height !== expectedHeight) {
+      break;
+    }
+    uploadLevels.push(level);
+  }
+  return uploadLevels;
+}
+
+function texturePixelUploadData(data: TexturePixelData, format: Texture["format"]): ArrayBufferView {
+  if (format === "rgba16f" && data instanceof Uint16Array) return data;
+  if (format === "rgba32f" && data instanceof Float32Array) return data;
+  if (format === "rgba8" && (data instanceof Uint8Array || data instanceof Uint8ClampedArray)) return data;
+  throw new RenderDeviceError("Texture pixel data type does not match texture format", "UNSUPPORTED_TEXTURE_FORMAT", { format });
+}