@swf2es/context3d 0.1.19 → 0.1.21

package/src/webgl/context.ts

@@ -1,14 +1,19 @@
-import type { ProgramType } from "../agal.js";
+import { INDIRECT_BANK, type ProgramType } from "../agal.js";
 import {
   type BlendFactor,
   type Buffer3D,
   type CompareMode,
   type Context3D,
   type CullFace,
-  MOST_BACK_BUFFER,
+  compressedFormat,
+  FRAGMENT_CONSTANTS,
+  MOST_CUBE,
+  type Profile,
   type Program3D,
+  profileLimits,
   SAMPLER_FILTERS,
   SAMPLER_MIPS,
+  SAMPLER_SLOTS,
   SAMPLER_WRAPS,
   type SamplerFilter,
   type SamplerMip,
@@ -16,10 +21,13 @@ import {
   ScissorBoundsError,
   type StencilAction,
   screenPixels,
+  TEXEL_BYTES,
   type Texture3D,
   TextureBindingError,
   type TextureFormat,
+  VERTEX_CONSTANTS,
   VERTEX_FORMATS,
+  VERTEX_SLOTS,
   type VertexFormat,
   VertexOffsetError,
 } from "../backend.js";
@@ -27,12 +35,8 @@ import { GlState } from "../device/state.js";
 import { blockBytes, type DxtEncoder } from "../dxt.js";
 import { Context3DError } from "../errors.js";
 
-import {
-  type BufferState,
-  uploadBuffer,
-  uploadBufferBytes,
-  type VertexBinding,
-} from "./buffers.js";
+import { configureBackBuffer, presentBackBuffer, unconfigureBackBuffer } from "./back-buffer.js";
+import { allocateBuffer, type BufferState, type VertexBinding } from "./buffers.js";
 import { resourceLimits, type WebGLContext3DLimits } from "./limits.js";
 import {
   type CopyProgram,
@@ -40,6 +44,7 @@ import {
   type ProgramState,
   uploadProgram,
 } from "./programs.js";
+import { readBackBuffer } from "./readback.js";
 import {
   BLEND_FUNCTIONS,
   DEPTH_FUNCTIONS,
@@ -56,6 +61,7 @@ import {
   targetFramebuffer,
 } from "./targets.js";
 import {
+  storageFormat,
   type TextureState,
   uploadCompressedLevel,
   uploadTexture,
@@ -68,8 +74,26 @@ const SAMPLER_FORMATS: Record<TextureFormat, number> = {
   bgra: 0,
   compressed: 1,
   compressedAlpha: 2,
+  bgrPacked565: 0,
+  bgraPacked4444: 0,
+  rgbaHalfFloat: 0,
 };
 
+/**
+ * A clear colour's channel as Direct3D's 8-bit clear colour holds it, which AIR fills by
+ * truncation (0.5 clears to 127): within 0 to 1 and cut to its byte, NaN kept.
+ */
+function clearChannel(value: number): number {
+  if (!(value > 0)) {
+    return value < 0 ? 0 : value;
+  }
+
+  return value >= 1 ? 1 : Math.floor(value * 255 + 1e-3) / 255;
+}
+
+/** AGAL's wraps (clamp, repeat, clamp_u_repeat_v, repeat_u_clamp_v) as SAMPLER_WRAPS indices. */
+const WRAPS = [0, 3, 2, 1];
+
 interface Constants {
   data: Float32Array;
   bits: Uint32Array;
@@ -90,25 +114,38 @@ function constants(registers: number): Constants {
   };
 }
 
-/** An owned WebGL2 context, deliberately independent of the 2D renderer. */
+/**
+ * An owned WebGL2 context, deliberately independent of the 2D renderer. Its members that are
+ * neither private nor Context3D's are for back-buffer.ts, buffers.ts and readback.ts, which
+ * hold parts of it as functions over it.
+ */
 export class WebGLContext3D implements Context3D {
   readonly gl: WebGL2RenderingContext;
-  private readonly drawState: GlState;
+  /** @internal */
+  readonly drawState: GlState;
   width = 0;
   height = 0;
   /**
    * The back buffer's storage: its size, or less where the GPU allows less. The SWF still
    * sees the size it asked for, drawn at this one and stretched to it when presented.
    */
-  private drawnWidth = 0;
-  private drawnHeight = 0;
-  private gpuMost: Int32Array | null = null;
+  /** @internal */
+  drawnWidth = 0;
+  /** @internal */
+  drawnHeight = 0;
+  /** @internal */
+  gpuMost: Int32Array | null = null;
   disposed = false;
   samplerFormats = true;
-  private readonly buffers = new Map<Buffer3D, BufferState>();
-  private vertexBuffers = 0;
-  private bufferBytes = 0;
-  private vertexBufferBytes = 0;
+  profile: Profile = "baseline";
+  /** @internal */
+  readonly buffers = new Map<Buffer3D, BufferState>();
+  /** @internal */
+  vertexBuffers = 0;
+  /** @internal */
+  bufferBytes = 0;
+  /** @internal */
+  vertexBufferBytes = 0;
   private readonly programs = new Map<Program3D, ProgramState>();
   private readonly textures = new Map<Texture3D, TextureState>();
   private readonly textureCounts = new Float64Array(3);
@@ -120,10 +157,18 @@ export class WebGLContext3D implements Context3D {
   private copy2D: CopyProgram | null = null;
   private copyCube: CopyProgram | null = null;
   private readonly targetSamples = new Int8Array(10).fill(-1);
-  private renderTexture: Texture3D | null = null;
+  /** @internal */
+  renderTexture: Texture3D | null = null;
   private renderDepth = false;
   private renderFace = 0;
-  private readonly textureSlots: (Texture3D | null)[] = new Array(8).fill(null);
+  /** Colour outputs 1 to 3, drawn into with renderTexture, and their cube faces. */
+  private readonly outputs: (Texture3D | null)[] = [null, null, null];
+  private readonly outputFaces = new Uint8Array(3);
+  private outputsChanged = false;
+  /** Whether any of outputs is bound, so that a draw alone into its target looks at none. */
+  private outputsBound = false;
+  private floatTargets: boolean | undefined;
+  private readonly textureSlots: (Texture3D | null)[] = new Array(SAMPLER_SLOTS).fill(null);
   private textureMask = 0;
   private readonly samplers: (WebGLSampler | null)[] = new Array(96).fill(null);
   // Two wrap bits, three filter bits and two mip bits fit each slot in one byte.
@@ -131,20 +176,31 @@ export class WebGLContext3D implements Context3D {
   private anisotropy: EXT_texture_filter_anisotropic | null | undefined;
   private s3tc: WEBGL_compressed_texture_s3tc | null | undefined;
   private maxAnisotropy = 1;
-  private readonly vertices: (VertexBinding | null)[] = new Array(8).fill(null);
+  /** @internal */
+  readonly vertices: (VertexBinding | null)[] = new Array(VERTEX_SLOTS).fill(null);
   private enabledAttributes = 0;
-  private indexBuffer: WebGLBuffer | null = null;
-  private readonly texturesApplied = new Uint8Array(8);
+  /** @internal */
+  indexBuffer: WebGLBuffer | null = null;
+  /** @internal */
+  readonly texturesApplied = new Uint8Array(SAMPLER_SLOTS);
   private selected: Program3D | null = null;
-  private framebuffer: WebGLFramebuffer | null = null;
-  private texture: WebGLTexture | null = null;
-  private resolveFramebuffer: WebGLFramebuffer | null = null;
-  private colorBuffer: WebGLRenderbuffer | null = null;
-  private resolveDirty = false;
-  private depthBuffer: WebGLRenderbuffer | null = null;
-  private antiAlias = 0;
+  /** @internal */
+  framebuffer: WebGLFramebuffer | null = null;
+  /** @internal */
+  texture: WebGLTexture | null = null;
+  /** @internal */
+  resolveFramebuffer: WebGLFramebuffer | null = null;
+  /** @internal */
+  colorBuffer: WebGLRenderbuffer | null = null;
+  /** @internal */
+  resolveDirty = false;
+  /** @internal */
+  depthBuffer: WebGLRenderbuffer | null = null;
+  /** @internal */
+  antiAlias = 0;
   /** The back buffer's pixels to a CSS pixel and to a scissor rectangle's unit. */
-  private scale = 1;
+  /** @internal */
+  scale = 1;
   private depthWrite = true;
   private depthCompare: CompareMode = "less";
   private blendEnabled = false;
@@ -158,18 +214,23 @@ export class WebGLContext3D implements Context3D {
   private stencilReference = 0;
   private stencilRead = 255;
   private stencilWrite = 255;
-  private scissor = false;
+  /** @internal */
+  scissor = false;
   private scissorLeft = 0;
   private scissorTop = 0;
   private scissorRight = 0;
   private scissorBottom = 0;
   private scissorOutside = false;
-  private readonly vertexConstants = constants(128);
-  private readonly fragmentConstants = constants(28);
-  private pixels = new Uint8Array(0);
-  private topDown = new Uint8Array(0);
-  private readonly vao: WebGLVertexArrayObject;
-  private readonly limits: Readonly<WebGLContext3DLimits>;
+  private readonly vertexConstants = constants(VERTEX_CONSTANTS);
+  private readonly fragmentConstants = constants(FRAGMENT_CONSTANTS);
+  /** @internal */
+  pixels = new Uint8Array(0);
+  /** @internal */
+  topDown = new Uint8Array(0);
+  /** @internal */
+  readonly vao: WebGLVertexArrayObject;
+  /** @internal */
+  readonly limits: Readonly<WebGLContext3DLimits>;
   private dxtEncoder: DxtEncoder | null = null;
 
   /** The host's whole-level encoder; a refusal retains the TypeScript path. */
@@ -211,13 +272,15 @@ export class WebGLContext3D implements Context3D {
     gl.disable(gl.DITHER);
   }
 
-  private alive(): void {
+  /** @internal */
+  alive(): void {
     if (this.disposed || this.gl.isContextLost()) {
       throw new Context3DError("disposed", "Context3D experiment: context disposed or lost");
     }
   }
 
-  private target(back = false, discardColor = false): void {
+  /** @internal */
+  target(back = false, discardColor = false): void {
     this.alive();
     if (!this.framebuffer) {
       throw new Context3DError(
@@ -236,6 +299,9 @@ export class WebGLContext3D implements Context3D {
       }
     }
     this.drawState.bindFramebuffer(state ? targetFramebuffer(state) : this.framebuffer);
+    if (this.outputsChanged || state?.outputs) {
+      this.attachOutputs(state);
+    }
     this.drawState.viewport(
       0,
       0,
@@ -245,220 +311,18 @@ export class WebGLContext3D implements Context3D {
   }
 
   /** Temporary attachments and separate READ/DRAW bindings bypass the hot target cache. */
-  private bindFramebuffer(target: number, framebuffer: WebGLFramebuffer | null): void {
+  /** @internal */
+  bindFramebuffer(target: number, framebuffer: WebGLFramebuffer | null): void {
     this.drawState.forget();
     this.gl.bindFramebuffer(target, framebuffer);
   }
 
   configure(width: number, height: number, depth = false, antiAlias = 0, scale = 1): void {
-    this.alive();
-    range(32, width - 32, MOST_BACK_BUFFER);
-    range(32, height - 32, MOST_BACK_BUFFER);
-    if (this.renderTexture) {
-      throw new Context3DError(
-        "operation",
-        "Context3D experiment: resize while rendering to texture",
-      );
-    }
-
-    // AIR preserves color, depth and bindings when the request is unchanged.
-    // Shadow passes can issue this every frame when returning to the back buffer.
-    if (
-      this.framebuffer &&
-      width === this.width &&
-      height === this.height &&
-      depth === (this.depthBuffer !== null) &&
-      antiAlias === this.antiAlias
-    ) {
-      if (scale !== this.scale) {
-        this.scale = scale;
-        this.showAt();
-        this.applyScissor();
-      }
-
-      return;
-    }
-
-    const samples = selectSamples(this.gl, antiAlias, depth);
-    const gl = this.gl;
-    const most = this.storageLimit();
-    const drawnWidth = Math.min(width, most[0]);
-    const drawnHeight = Math.min(height, most[1]);
-    const texture = gl.createTexture();
-    const framebuffer = gl.createFramebuffer();
-    const depthBuffer = depth ? gl.createRenderbuffer() : null;
-    const resolveFramebuffer = samples ? gl.createFramebuffer() : null;
-    const colorBuffer = samples ? gl.createRenderbuffer() : null;
-    try {
-      if (
-        !texture ||
-        !framebuffer ||
-        (depth && !depthBuffer) ||
-        (samples && (!resolveFramebuffer || !colorBuffer))
-      ) {
-        throw new Context3DError("operation", "Context3D experiment: cannot allocate back buffer");
-      }
-
-      this.texturesApplied[0] = 0;
-      gl.activeTexture(gl.TEXTURE0);
-      gl.bindTexture(gl.TEXTURE_2D, texture);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-      gl.texImage2D(
-        gl.TEXTURE_2D,
-        0,
-        gl.RGBA8,
-        drawnWidth,
-        drawnHeight,
-        0,
-        gl.RGBA,
-        gl.UNSIGNED_BYTE,
-        null,
-      );
-      this.bindFramebuffer(gl.FRAMEBUFFER, resolveFramebuffer ?? framebuffer);
-      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
-      if (resolveFramebuffer) {
-        if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
-          throw new Context3DError("operation", "Context3D experiment: incomplete resolve buffer");
-        }
-
-        this.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
-        gl.bindRenderbuffer(gl.RENDERBUFFER, colorBuffer);
-        gl.renderbufferStorageMultisample(
-          gl.RENDERBUFFER,
-          samples,
-          gl.RGBA8,
-          drawnWidth,
-          drawnHeight,
-        );
-        gl.framebufferRenderbuffer(
-          gl.FRAMEBUFFER,
-          gl.COLOR_ATTACHMENT0,
-          gl.RENDERBUFFER,
-          colorBuffer,
-        );
-      }
-      if (depthBuffer) {
-        gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
-        if (samples) {
-          gl.renderbufferStorageMultisample(
-            gl.RENDERBUFFER,
-            samples,
-            gl.DEPTH24_STENCIL8,
-            drawnWidth,
-            drawnHeight,
-          );
-        } else {
-          gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH24_STENCIL8, drawnWidth, drawnHeight);
-        }
-        gl.framebufferRenderbuffer(
-          gl.FRAMEBUFFER,
-          gl.DEPTH_STENCIL_ATTACHMENT,
-          gl.RENDERBUFFER,
-          depthBuffer,
-        );
-      }
-      gl.bindRenderbuffer(gl.RENDERBUFFER, null);
-      if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
-        throw new Context3DError("operation", "Context3D experiment: incomplete back buffer");
-      }
-    } catch (error) {
-      gl.deleteTexture(texture);
-      gl.deleteFramebuffer(framebuffer);
-      gl.deleteFramebuffer(resolveFramebuffer);
-      gl.deleteRenderbuffer(depthBuffer);
-      gl.deleteRenderbuffer(colorBuffer);
-      gl.bindRenderbuffer(gl.RENDERBUFFER, null);
-      this.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
-      throw error;
-    }
-
-    gl.deleteTexture(this.texture);
-    gl.deleteFramebuffer(this.framebuffer);
-    gl.deleteFramebuffer(this.resolveFramebuffer);
-    gl.deleteRenderbuffer(this.depthBuffer);
-    gl.deleteRenderbuffer(this.colorBuffer);
-    this.texture = texture;
-    this.framebuffer = framebuffer;
-    this.resolveFramebuffer = resolveFramebuffer;
-    this.colorBuffer = colorBuffer;
-    this.depthBuffer = depthBuffer;
-    this.antiAlias = antiAlias;
-    this.width = width;
-    this.height = height;
-    this.drawnWidth = drawnWidth;
-    this.drawnHeight = drawnHeight;
-    this.scale = scale;
-    gl.canvas.width = drawnWidth;
-    gl.canvas.height = drawnHeight;
-    this.showAt();
-    // Readback's storage waits for a read: a back buffer as large as a 4K screen is 33 MB each.
-    this.pixels = new Uint8Array(0);
-    this.topDown = new Uint8Array(0);
-    this.applyScissor();
-    this.clear(0, 0, 0, 1);
-  }
-
-  /**
-   * Shown at the size asked for, in CSS pixels, as an unstyled canvas of that size would be,
-   * divided by its scale: a best-resolution back buffer shows its pixels at the screen's.
-   */
-  private showAt(): void {
-    const style = (this.gl.canvas as Partial<HTMLCanvasElement>).style;
-    if (!style) {
-      return;
-    }
-
-    const plain = this.scale === 1;
-    style.width = plain && this.drawnWidth === this.width ? "" : `${this.width / this.scale}px`;
-    style.height = plain && this.drawnHeight === this.height ? "" : `${this.height / this.scale}px`;
-  }
-
-  /** The largest back buffer storage the GPU gives: a texture, a renderbuffer and a viewport. */
-  private storageLimit(): Int32Array {
-    if (!this.gpuMost) {
-      const gl = this.gl;
-      const viewport = gl.getParameter(gl.MAX_VIEWPORT_DIMS) as Int32Array;
-      const side = Math.min(
-        gl.getParameter(gl.MAX_TEXTURE_SIZE) as number,
-        gl.getParameter(gl.MAX_RENDERBUFFER_SIZE) as number,
-      );
-      this.gpuMost = Int32Array.of(Math.min(side, viewport[0]), Math.min(side, viewport[1]));
-    }
-
-    return this.gpuMost;
+    configureBackBuffer(this, width, height, depth, antiAlias, scale);
   }
 
   unconfigure(): void {
-    this.alive();
-    if (this.renderTexture) {
-      throw new Context3DError(
-        "operation",
-        "Context3D experiment: resize while rendering to texture",
-      );
-    }
-
-    const gl = this.gl;
-    gl.deleteTexture(this.texture);
-    gl.deleteFramebuffer(this.framebuffer);
-    gl.deleteFramebuffer(this.resolveFramebuffer);
-    gl.deleteRenderbuffer(this.depthBuffer);
-    gl.deleteRenderbuffer(this.colorBuffer);
-    this.drawState.forget();
-    this.texture = null;
-    this.framebuffer = null;
-    this.resolveFramebuffer = null;
-    this.colorBuffer = null;
-    this.depthBuffer = null;
-    this.resolveDirty = false;
-    this.antiAlias = 0;
-    this.scale = 1;
-    this.width = 0;
-    this.height = 0;
-    this.drawnWidth = 0;
-    this.drawnHeight = 0;
-    this.pixels = new Uint8Array(0);
-    this.topDown = new Uint8Array(0);
+    unconfigureBackBuffer(this);
   }
 
   clear(
@@ -474,7 +338,13 @@ export class WebGLContext3D implements Context3D {
     const gl = this.gl;
     let bits = 0;
     if (mask & 1) {
-      gl.clearColor(red, green, blue, alpha);
+      // A float target too: AIR clears through Direct3D's 8-bit colour.
+      gl.clearColor(
+        clearChannel(red),
+        clearChannel(green),
+        clearChannel(blue),
+        clearChannel(alpha),
+      );
       bits |= gl.COLOR_BUFFER_BIT;
       this.changedTarget();
     }
@@ -663,7 +533,8 @@ export class WebGLContext3D implements Context3D {
     this.applyScissor();
   }
 
-  private applyScissor(): void {
+  /** @internal */
+  applyScissor(): void {
     const gl = this.gl;
     if (!this.scissor) {
       this.scissorOutside = false;
@@ -760,112 +631,11 @@ export class WebGLContext3D implements Context3D {
   }
 
   createBuffer(count: number, stride: number, dynamic = false): Buffer3D {
-    this.alive();
-    range(1, count - 1, stride === 0 ? 524287 : 65535);
-    range(0, stride, 64);
-    const countLimit = stride === 0 ? this.limits.maxIndexBuffers : this.limits.maxVertexBuffers;
-    const used = stride === 0 ? this.buffers.size - this.vertexBuffers : this.vertexBuffers;
-    if (this.buffers.size >= this.limits.maxBuffers || used >= countLimit) {
-      throw new Context3DError("limit", "Context3D experiment: buffer limit");
-    }
-
-    const bytes = count * (stride === 0 ? 2 : stride * 4);
-    const usedBytes =
-      stride === 0 ? this.bufferBytes - this.vertexBufferBytes : this.vertexBufferBytes;
-    const byteLimit =
-      stride === 0 ? this.limits.maxIndexBufferBytes : this.limits.maxVertexBufferBytes;
-    if (this.bufferBytes + bytes > this.limits.maxBufferBytes || usedBytes + bytes > byteLimit) {
-      throw new Context3DError("limit", "Context3D experiment: buffer memory limit");
-    }
-
-    const gl = this.gl;
-    const handle = gl.createBuffer();
-    if (!handle) {
-      throw new Context3DError("bufferAllocation", "Context3D experiment: cannot allocate buffer");
-    }
-
-    const target = stride === 0 ? gl.ELEMENT_ARRAY_BUFFER : gl.ARRAY_BUFFER;
-    if (stride === 0) {
-      this.indexBuffer = null;
-    }
-    gl.bindVertexArray(this.vao);
-    gl.bindBuffer(target, handle);
-    gl.bufferData(target, bytes, dynamic ? gl.DYNAMIC_DRAW : gl.STATIC_DRAW);
-    const state: BufferState = {
-      handle,
-      indices: stride === 0 ? new Uint16Array(count) : null,
-      uploaded: new Uint8Array(count),
-      prefix: 0,
-      version: 0,
-      checkedVersion: -1,
-      checkedFirst: 0,
-      checkedCount: 0,
-      maximum: -1,
-      ranges: null,
-    };
-    const buffer: Buffer3D = {
-      count,
-      stride,
-      upload: (values, start, amount) => {
-        this.alive();
-        this.buffer(buffer);
-        try {
-          uploadBuffer(gl, this.vao, buffer, state, values, start, amount);
-        } finally {
-          // Source getters can draw before the upload replaces the VAO's index binding.
-          if (stride === 0) {
-            this.indexBuffer = null;
-          }
-        }
-      },
-      uploadBytes: (data, offset, start, amount) => {
-        this.alive();
-        this.buffer(buffer);
-        try {
-          uploadBufferBytes(gl, this.vao, buffer, state, data, offset, start, amount);
-        } finally {
-          if (stride === 0) {
-            this.indexBuffer = null;
-          }
-        }
-      },
-      dispose: () => {
-        if (!this.buffers.delete(buffer)) {
-          return;
-        }
-
-        if (this.indexBuffer === handle) {
-          this.indexBuffer = null;
-        }
-        gl.deleteBuffer(handle);
-        this.bufferBytes -= bytes;
-        if (stride !== 0) {
-          this.vertexBuffers--;
-          this.vertexBufferBytes -= bytes;
-        }
-        state.indices = null;
-        state.ranges = null;
-        state.uploaded = new Uint8Array(0);
-        for (let i = 0; i < this.vertices.length; i++) {
-          const binding = this.vertices[i];
-          if (binding?.buffer === buffer) {
-            this.vertices[i] = null;
-          } else if (binding?.checkedIndex === state) {
-            binding.checkedIndex = null;
-          }
-        }
-      },
-    };
-    this.buffers.set(buffer, state);
-    if (stride !== 0) {
-      this.vertexBuffers++;
-      this.vertexBufferBytes += bytes;
-    }
-    this.bufferBytes += bytes;
-    return buffer;
+    return allocateBuffer(this, count, stride, dynamic);
   }
 
-  private buffer(buffer: Buffer3D): BufferState {
+  /** @internal */
+  buffer(buffer: Buffer3D): BufferState {
     const state = this.buffers.get(buffer);
     if (!state) {
       throw new Context3DError(
@@ -891,6 +661,7 @@ export class WebGLContext3D implements Context3D {
       attributeMask: 0,
       vertex: [],
       vertexBank: null,
+      outputs: 1,
       fragment: [],
       samplers: [],
       samplerMask: 0,
@@ -902,11 +673,17 @@ export class WebGLContext3D implements Context3D {
       vertexVersion: -1,
     };
     const program: Program3D = {
+      get outputs() {
+        return state.outputs;
+      },
+      get attributes() {
+        return state.attributeMask;
+      },
       upload: (vertex, fragment) => {
         this.alive();
         this.program(program);
         this.drawState.forget();
-        uploadProgram(this.gl, state, vertex, fragment);
+        uploadProgram(this.gl, state, vertex, fragment, this.profile);
 
         if (this.selected === program) {
           this.setProgram(program);
@@ -968,8 +745,8 @@ export class WebGLContext3D implements Context3D {
     return this.allocateTexture(width, height, cube, false, format, streaming);
   }
 
-  createRectangleTexture(width: number, height: number): Texture3D {
-    return this.allocateTexture(width, height, false, true, "bgra");
+  createRectangleTexture(width: number, height: number, format: TextureFormat = "bgra"): Texture3D {
+    return this.allocateTexture(width, height, false, true, format);
   }
 
   /** GL's internal format for a compressed texture's S3TC, or 0 where the context takes none. */
@@ -977,7 +754,7 @@ export class WebGLContext3D implements Context3D {
     if (this.s3tc === undefined) {
       this.s3tc = this.gl.getExtension("WEBGL_compressed_texture_s3tc");
     }
-    if (!this.s3tc || format === "bgra") {
+    if (!this.s3tc || !compressedFormat(format)) {
       return 0;
     }
 
@@ -1003,7 +780,9 @@ export class WebGLContext3D implements Context3D {
     for (let level = 0; level < levels; level++) {
       const w = Math.max(1, width >> level);
       const h = Math.max(1, height >> level);
-      size += format === "bgra" ? w * h * 4 : blockBytes(w, h, format === "compressedAlpha");
+      size += compressedFormat(format)
+        ? blockBytes(w, h, format === "compressedAlpha")
+        : w * h * (TEXEL_BYTES[format] ?? 4);
     }
 
     return size * faces;
@@ -1018,12 +797,14 @@ export class WebGLContext3D implements Context3D {
     streaming = 0,
   ): Texture3D {
     this.alive();
-    range(1, width - 1, 2048);
-    range(1, height - 1, 2048);
+    const limits = profileLimits(this.profile);
+    const most = rectangle ? limits.rectangleSize : limits.textureSize;
+    range(1, width - 1, most);
+    range(1, height - 1, most);
     if (cube && width !== height) {
       throw new Context3DError("textureShape", "Context3D cube faces must be square");
     }
-    if (cube && width > 1024) {
+    if (cube && width > MOST_CUBE) {
       throw new Context3DError("textureSize", "Context3D cube faces must be at most 1024");
     }
 
@@ -1036,15 +817,15 @@ export class WebGLContext3D implements Context3D {
         "Context3D texture size must be a power of two",
       );
     }
-    if (format !== "bgra" && rectangle) {
+    if (compressedFormat(format) && rectangle) {
       throw new Context3DError("unsupported", "Context3D rectangle textures are not compressed");
     }
-    if (format !== "bgra" && (width < 4 || height < 4)) {
+    if (compressedFormat(format) && (width < 4 || height < 4)) {
       throw new Context3DError("compressedSize", "Context3D compressed textures are at least 4x4");
     }
 
     const gl = this.gl;
-    const storage = this.s3tcFormat(format) || gl.RGBA8;
+    const storage = this.s3tcFormat(format) || storageFormat(gl, format);
     const size = this.chainBytes(width, height, levels, faces, format);
     const kind = cube ? 2 : rectangle ? 1 : 0;
     const countLimit = cube
@@ -1060,7 +841,8 @@ export class WebGLContext3D implements Context3D {
     // AIR reserves half the base size for mips, independently of the exact
     // chain storage, and charges DXT1 an eighth of BGRA and DXT5 a quarter.
     const quotaBytes =
-      (width * height * faces * (rectangle ? 4 : 6)) /
+      (width * height * faces * (rectangle ? 4 : 6) * (TEXEL_BYTES[format] ?? 4)) /
+      4 /
       (format === "compressed" ? 8 : format === "compressedAlpha" ? 4 : 1);
     if (
       this.textures.size >= this.limits.maxTextures ||
@@ -1095,6 +877,7 @@ export class WebGLContext3D implements Context3D {
       multisample: null,
       samples: 0,
       antiAlias: 0,
+      outputs: 0,
       base: 0,
     };
     const texture: Texture3D = {
@@ -1137,10 +920,10 @@ export class WebGLContext3D implements Context3D {
       uploadCompressed: (blocks, level = 0, face = 0) => {
         this.alive();
         this.textureState(texture);
-        if (format === "bgra") {
+        if (!compressedFormat(format)) {
           throw new Context3DError(
             "textureUpload",
-            "Context3D experiment: BGRA texture given blocks",
+            "Context3D experiment: uncompressed texture given blocks",
           );
         }
 
@@ -1180,6 +963,13 @@ export class WebGLContext3D implements Context3D {
         state.mipFramebuffer = null;
         state.depthBuffer = null;
 
+        for (let i = 0; i < this.outputs.length; i++) {
+          if (this.outputs[i] === texture) {
+            this.outputs[i] = null;
+            this.outputsChanged = true;
+            this.outputsBound = this.outputMask() !== 0;
+          }
+        }
         for (let i = 0; i < this.textureSlots.length; i++) {
           if (this.textureSlots[i] === texture) {
             this.texturesApplied[i] = 0;
@@ -1335,6 +1125,7 @@ export class WebGLContext3D implements Context3D {
       depth,
       this.depthWrite,
       this.stencilWrite,
+      state.storage,
     );
     if (same) {
       if (newDepth) {
@@ -1370,12 +1161,13 @@ export class WebGLContext3D implements Context3D {
     const gl = this.gl;
     if (texture) {
       this.textureState(texture);
-      if (texture.format !== "bgra") {
+      if (compressedFormat(texture.format)) {
         throw new Context3DError(
           "operation",
           "Context3D experiment: compressed textures are no render targets",
         );
       }
+      this.renderFormat(texture.format);
     }
     const samples = texture ? this.multisamples(antiAlias, depth) : 0;
     this.finishTarget();
@@ -1521,6 +1313,12 @@ export class WebGLContext3D implements Context3D {
   }
 
   private changedTarget(): void {
+    for (let i = 0; this.outputsBound && i < this.outputs.length; i++) {
+      const output = this.outputs[i];
+      if (output) {
+        this.textureState(output).dirty = true;
+      }
+    }
     if (this.renderTexture) {
       const state = this.textureState(this.renderTexture);
       state.dirty = true;
@@ -1537,22 +1335,34 @@ export class WebGLContext3D implements Context3D {
   }
 
   private finishTarget(): void {
-    if (!this.renderTexture) {
-      return;
+    if (this.renderTexture) {
+      this.finishTexture(this.renderTexture, this.renderFace);
+    }
+    for (let i = 0; i < this.outputs.length; i++) {
+      const output = this.outputs[i];
+      if (output) {
+        this.finishTexture(output, this.outputFaces[i]);
+      }
     }
-    const texture = this.renderTexture;
+  }
+
+  /** A texture drawn into made whole again: resolved, and its mips regenerated. */
+  private finishTexture(texture: Texture3D, renderFace: number): void {
     const state = this.textureState(texture);
     if (state.dirty) {
       const gl = this.gl;
       this.drawState.forget();
       this.texturesApplied[0] = 0;
-      resolveTarget(this.gl, texture, state, this.renderFace, this.scissor);
+      resolveTarget(this.gl, texture, state, renderFace, this.scissor);
       gl.activeTexture(gl.TEXTURE0);
       if (texture.cube) {
+        // An extra colour output may never have been a target of its own.
+        state.framebuffer ??= gl.createFramebuffer();
+        state.mipFramebuffer ??= gl.createFramebuffer();
         // generateMipmap(CUBE_MAP) would overwrite manually uploaded mips on
         // untouched faces. AIR regenerates only the face just rendered.
         gl.disable(gl.SCISSOR_TEST);
-        const face = gl.TEXTURE_CUBE_MAP_POSITIVE_X + this.renderFace;
+        const face = gl.TEXTURE_CUBE_MAP_POSITIVE_X + renderFace;
         // The base-size depth attachment cannot accompany smaller mip images.
         this.bindFramebuffer(gl.FRAMEBUFFER, state.framebuffer);
         if (state.depthAttached) {
@@ -1614,14 +1424,99 @@ export class WebGLContext3D implements Context3D {
         gl.bindTexture(gl.TEXTURE_2D, state.handle);
         gl.generateMipmap(gl.TEXTURE_2D);
       }
-      state.uploaded[this.renderFace] = (1 << texture.levels) - 1;
+      state.uploaded[renderFace] = (1 << texture.levels) - 1;
       state.dirty = false;
     }
   }
 
+  /** Half floats are drawn into where the GPU's WebGL renders float colour, as every desktop one does. */
+  private renderFormat(format: TextureFormat): void {
+    if (format !== "rgbaHalfFloat") {
+      return;
+    }
+
+    this.floatTargets ??= this.gl.getExtension("EXT_color_buffer_float") !== null;
+    if (!this.floatTargets) {
+      throw new Context3DError("unsupported", "Context3D: this GPU draws into no half floats");
+    }
+  }
+
+  setColorOutput(index: number, texture: Texture3D | null, face = 0): void {
+    this.alive();
+    range(index - 1, 1, this.outputs.length);
+    if (texture) {
+      this.textureState(texture);
+      range(face, 1, texture.cube ? 6 : 1);
+      if (compressedFormat(texture.format)) {
+        throw new Context3DError(
+          "operation",
+          "Context3D experiment: compressed textures are no render targets",
+        );
+      }
+      this.renderFormat(texture.format);
+    }
+    if (this.outputs[index - 1] === texture && this.outputFaces[index - 1] === face) {
+      return;
+    }
+
+    const previous = this.outputs[index - 1];
+    if (previous) {
+      this.finishTexture(previous, this.outputFaces[index - 1]);
+    }
+    this.outputs[index - 1] = texture;
+    this.outputFaces[index - 1] = texture ? face : 0;
+    this.outputsChanged = true;
+    this.outputsBound = this.outputMask() !== 0;
+  }
+
+  /**
+   * The current target's framebuffer with the extra colour outputs attached, or without
+   * them: its draws write every output bound, and a program's unwritten ones are refused
+   * before they draw.
+   */
+  private attachOutputs(state: TextureState | null): void {
+    const want = state ? this.outputMask() : 0;
+    if (!state || (!this.outputsChanged && state.outputs === want)) {
+      return;
+    }
+    if (want && state.samples) {
+      throw new Context3DError("unsupported", "Context3D: antialiased colour outputs");
+    }
+
+    const gl = this.gl;
+    const buffers: number[] = [gl.COLOR_ATTACHMENT0];
+    for (let i = 0; i < this.outputs.length; i++) {
+      const output = this.outputs[i];
+      const handle = output ? this.textureState(output).handle : null;
+      gl.framebufferTexture2D(
+        gl.FRAMEBUFFER,
+        gl.COLOR_ATTACHMENT1 + i,
+        output?.cube ? gl.TEXTURE_CUBE_MAP_POSITIVE_X + this.outputFaces[i] : gl.TEXTURE_2D,
+        handle,
+        0,
+      );
+      buffers.push(output ? gl.COLOR_ATTACHMENT1 + i : gl.NONE);
+    }
+    gl.drawBuffers(buffers);
+    state.outputs = want;
+    this.outputsChanged = false;
+  }
+
+  /** The extra colour outputs bound, a bit each from output 1. */
+  private outputMask(): number {
+    let mask = 0;
+    for (let i = 0; i < this.outputs.length; i++) {
+      if (this.outputs[i]) {
+        mask |= 1 << i;
+      }
+    }
+
+    return mask;
+  }
+
   setTexture(index: number, texture: Texture3D | null): void {
     this.alive();
-    range(index, 1, 8);
+    range(index, 1, SAMPLER_SLOTS);
     if (texture && !this.textureOwners.has(texture)) {
       throw new Context3DError("disposed", "Context3D experiment: texture from another context");
     }
@@ -1726,7 +1621,7 @@ export class WebGLContext3D implements Context3D {
       if (!source.ignore) {
         this.setSamplerState(
           source.index,
-          (source.repeat ? 3 : 0) | (source.filter << 2) | (source.mip << 5),
+          WRAPS[source.wrap] | (source.filter << 2) | (source.mip << 5),
         );
       }
     }
@@ -1734,7 +1629,7 @@ export class WebGLContext3D implements Context3D {
 
   setVertex(index: number, buffer: Buffer3D | null, offset: number, format: VertexFormat): void {
     this.alive();
-    range(index, 1, 8);
+    range(index, 1, VERTEX_SLOTS);
     if (buffer === null) {
       this.vertices[index] = null;
       return;
@@ -1857,13 +1752,14 @@ export class WebGLContext3D implements Context3D {
 
     const gl = this.gl;
     this.drawState.bindVertexArray(this.vao);
-    for (let i = 0; i < 8; i++) {
-      const bit = 1 << i;
-      if (this.enabledAttributes & bit & ~state.attributeMask) {
-        gl.disableVertexAttribArray(i);
-        this.enabledAttributes &= ~bit;
-      }
+    // The streams enabled that the program does not read, highest first.
+    let stale = this.enabledAttributes & ~state.attributeMask;
+    while (stale) {
+      const i = 31 - Math.clz32(stale);
+      gl.disableVertexAttribArray(i);
+      stale &= ~(1 << i);
     }
+    this.enabledAttributes &= state.attributeMask;
 
     for (let i = 0; i < state.attributes.length; i++) {
       const slot = state.attributes[i];
@@ -1909,7 +1805,14 @@ export class WebGLContext3D implements Context3D {
       const binding = state.samplers[i];
       const slot = binding.source.index;
       const texture = this.textureSlots[slot];
-      if (texture && texture === this.renderTexture) {
+      if (
+        texture &&
+        (texture === this.renderTexture ||
+          (this.outputsBound &&
+            (texture === this.outputs[0] ||
+              texture === this.outputs[1] ||
+              texture === this.outputs[2])))
+      ) {
         throw new TextureBindingError("feedback");
       }
       const resource = texture && this.textures.get(texture);
@@ -1976,10 +1879,12 @@ export class WebGLContext3D implements Context3D {
 
     if (state.vertexBank) {
       if (this.vertexConstants.writing || state.vertexVersion !== this.vertexConstants.version) {
-        gl.uniform4fv(state.vertexBank, this.vertexConstants.data);
+        gl.uniform4fv(state.vertexBank, this.vertexConstants.data, 0, INDIRECT_BANK * 4);
         state.vertexVersion = this.vertexConstants.version;
       }
-    } else {
+    }
+    // An indirect program's own uniforms are only the registers past its bank.
+    if (state.vertex.length) {
       this.uniforms(state.vertex, this.vertexConstants, state.vertexVersions, state.vertexValues);
     }
     this.uniforms(
@@ -2072,115 +1977,12 @@ export class WebGLContext3D implements Context3D {
     }
   }
 
-  private resolve(): void {
-    if (!this.resolveFramebuffer) {
-      return;
-    }
-
-    const gl = this.gl;
-    if (this.resolveDirty) {
-      this.bindFramebuffer(gl.READ_FRAMEBUFFER, this.framebuffer);
-      this.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.resolveFramebuffer);
-      if (this.scissor) {
-        gl.disable(gl.SCISSOR_TEST);
-      }
-      gl.blitFramebuffer(
-        0,
-        0,
-        this.drawnWidth,
-        this.drawnHeight,
-        0,
-        0,
-        this.drawnWidth,
-        this.drawnHeight,
-        gl.COLOR_BUFFER_BIT,
-        gl.NEAREST,
-      );
-      if (this.scissor) {
-        gl.enable(gl.SCISSOR_TEST);
-      }
-      this.resolveDirty = false;
-    }
-    this.bindFramebuffer(gl.READ_FRAMEBUFFER, this.resolveFramebuffer);
-  }
-
   read(width = this.width, height = this.height): Uint8Array {
-    width = Math.max(0, Math.min(this.width, Math.floor(width) || 0));
-    height = Math.max(0, Math.min(this.height, Math.floor(height) || 0));
-    this.target(true);
-    this.resolve();
-    const gl = this.gl;
-    const scaleX = this.drawnWidth / this.width;
-    const scaleY = this.drawnHeight / this.height;
-    const drawnWidth = Math.min(this.drawnWidth, Math.ceil(width * scaleX));
-    const drawnHeight = Math.min(this.drawnHeight, Math.ceil(height * scaleY));
-    if (this.pixels.length < drawnWidth * drawnHeight * 4) {
-      this.pixels = new Uint8Array(drawnWidth * drawnHeight * 4);
-    }
-    if (this.topDown.length < width * height * 4) {
-      this.topDown = new Uint8Array(width * height * 4);
-    }
-
-    // GL's rows run bottom-up, so the top-left region starts height rows below the top.
-    gl.readPixels(
-      0,
-      this.drawnHeight - drawnHeight,
-      drawnWidth,
-      drawnHeight,
-      gl.RGBA,
-      gl.UNSIGNED_BYTE,
-      this.pixels,
-    );
-    const row = width * 4;
-    if (drawnWidth === width && drawnHeight === height) {
-      for (let y = 0; y < height; y++) {
-        const from = (height - y - 1) * row;
-        this.topDown.set(this.pixels.subarray(from, from + row), y * row);
-      }
-
-      return this.topDown;
-    }
-
-    // Storage smaller than the back buffer: each pixel is the stored one it falls on.
-    const source = new Uint32Array(this.pixels.buffer, 0, drawnWidth * drawnHeight);
-    const target = new Uint32Array(this.topDown.buffer, 0, width * height);
-    for (let y = 0; y < height; y++) {
-      const from =
-        (drawnHeight - 1 - Math.min(drawnHeight - 1, Math.floor(y * scaleY))) * drawnWidth;
-      for (let x = 0; x < width; x++) {
-        target[y * width + x] = source[from + Math.min(drawnWidth - 1, Math.floor(x * scaleX))];
-      }
-    }
-
-    return this.topDown;
+    return readBackBuffer(this, width, height);
   }
 
   present(): void {
-    this.setRenderTarget(null);
-    this.target();
-    this.resolve();
-    const gl = this.gl;
-    this.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
-    if (this.scissor) {
-      gl.disable(gl.SCISSOR_TEST);
-    }
-    // To the drawing buffer the browser gave, which it may have made smaller than the canvas.
-    gl.blitFramebuffer(
-      0,
-      0,
-      this.drawnWidth,
-      this.drawnHeight,
-      0,
-      0,
-      gl.drawingBufferWidth,
-      gl.drawingBufferHeight,
-      gl.COLOR_BUFFER_BIT,
-      gl.NEAREST,
-    );
-    if (this.scissor) {
-      gl.enable(gl.SCISSOR_TEST);
-    }
-    gl.flush();
+    presentBackBuffer(this);
   }
 
   dispose(): void {