@swf2es/context3d 0.1.18 → 0.1.20

package/src/webgl/context.ts

@@ -1,23 +1,34 @@
-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,
+  compressedFormat,
+  FRAGMENT_CONSTANTS,
+  MOST_BACK_BUFFER,
+  MOST_CUBE,
+  type Profile,
   type Program3D,
+  profileLimits,
   SAMPLER_FILTERS,
   SAMPLER_MIPS,
+  SAMPLER_SLOTS,
   SAMPLER_WRAPS,
   type SamplerFilter,
   type SamplerMip,
   type SamplerWrap,
   ScissorBoundsError,
   type StencilAction,
+  screenPixels,
+  TEXEL_BYTES,
   type Texture3D,
   TextureBindingError,
   type TextureFormat,
+  VERTEX_CONSTANTS,
   VERTEX_FORMATS,
+  VERTEX_SLOTS,
   type VertexFormat,
   VertexOffsetError,
 } from "../backend.js";
@@ -54,6 +65,7 @@ import {
   targetFramebuffer,
 } from "./targets.js";
 import {
+  storageFormat,
   type TextureState,
   uploadCompressedLevel,
   uploadTexture,
@@ -66,8 +78,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;
@@ -94,8 +124,16 @@ export class WebGLContext3D implements Context3D {
   private 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;
   disposed = false;
   samplerFormats = true;
+  profile: Profile = "baseline";
   private readonly buffers = new Map<Buffer3D, BufferState>();
   private vertexBuffers = 0;
   private bufferBytes = 0;
@@ -114,7 +152,14 @@ export class WebGLContext3D implements Context3D {
   private 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.
@@ -122,10 +167,10 @@ 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);
+  private readonly vertices: (VertexBinding | null)[] = new Array(VERTEX_SLOTS).fill(null);
   private enabledAttributes = 0;
   private indexBuffer: WebGLBuffer | null = null;
-  private readonly texturesApplied = new Uint8Array(8);
+  private readonly texturesApplied = new Uint8Array(SAMPLER_SLOTS);
   private selected: Program3D | null = null;
   private framebuffer: WebGLFramebuffer | null = null;
   private texture: WebGLTexture | null = null;
@@ -134,6 +179,8 @@ export class WebGLContext3D implements Context3D {
   private resolveDirty = false;
   private depthBuffer: WebGLRenderbuffer | null = null;
   private antiAlias = 0;
+  /** The back buffer's pixels to a CSS pixel and to a scissor rectangle's unit. */
+  private scale = 1;
   private depthWrite = true;
   private depthCompare: CompareMode = "less";
   private blendEnabled = false;
@@ -153,8 +200,8 @@ export class WebGLContext3D implements Context3D {
   private scissorRight = 0;
   private scissorBottom = 0;
   private scissorOutside = false;
-  private readonly vertexConstants = constants(128);
-  private readonly fragmentConstants = constants(28);
+  private readonly vertexConstants = constants(VERTEX_CONSTANTS);
+  private readonly fragmentConstants = constants(FRAGMENT_CONSTANTS);
   private pixels = new Uint8Array(0);
   private topDown = new Uint8Array(0);
   private readonly vao: WebGLVertexArrayObject;
@@ -225,7 +272,15 @@ export class WebGLContext3D implements Context3D {
       }
     }
     this.drawState.bindFramebuffer(state ? targetFramebuffer(state) : this.framebuffer);
-    this.drawState.viewport(0, 0, texture?.width ?? this.width, texture?.height ?? this.height);
+    if (this.outputsChanged || state?.outputs) {
+      this.attachOutputs(state);
+    }
+    this.drawState.viewport(
+      0,
+      0,
+      texture?.width ?? this.drawnWidth,
+      texture?.height ?? this.drawnHeight,
+    );
   }
 
   /** Temporary attachments and separate READ/DRAW bindings bypass the hot target cache. */
@@ -234,10 +289,10 @@ export class WebGLContext3D implements Context3D {
     this.gl.bindFramebuffer(target, framebuffer);
   }
 
-  configure(width: number, height: number, depth = false, antiAlias = 0): void {
+  configure(width: number, height: number, depth = false, antiAlias = 0, scale = 1): void {
     this.alive();
-    range(32, width - 32, 2048);
-    range(32, height - 32, 2048);
+    range(32, width - 32, MOST_BACK_BUFFER);
+    range(32, height - 32, MOST_BACK_BUFFER);
     if (this.renderTexture) {
       throw new Context3DError(
         "operation",
@@ -254,11 +309,20 @@ export class WebGLContext3D implements Context3D {
       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;
@@ -279,7 +343,17 @@ export class WebGLContext3D implements Context3D {
       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, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+      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) {
@@ -289,7 +363,13 @@ export class WebGLContext3D implements Context3D {
 
         this.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
         gl.bindRenderbuffer(gl.RENDERBUFFER, colorBuffer);
-        gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.RGBA8, width, height);
+        gl.renderbufferStorageMultisample(
+          gl.RENDERBUFFER,
+          samples,
+          gl.RGBA8,
+          drawnWidth,
+          drawnHeight,
+        );
         gl.framebufferRenderbuffer(
           gl.FRAMEBUFFER,
           gl.COLOR_ATTACHMENT0,
@@ -304,11 +384,11 @@ export class WebGLContext3D implements Context3D {
             gl.RENDERBUFFER,
             samples,
             gl.DEPTH24_STENCIL8,
-            width,
-            height,
+            drawnWidth,
+            drawnHeight,
           );
         } else {
-          gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH24_STENCIL8, width, height);
+          gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH24_STENCIL8, drawnWidth, drawnHeight);
         }
         gl.framebufferRenderbuffer(
           gl.FRAMEBUFFER,
@@ -345,14 +425,81 @@ export class WebGLContext3D implements Context3D {
     this.antiAlias = antiAlias;
     this.width = width;
     this.height = height;
-    gl.canvas.width = width;
-    gl.canvas.height = height;
-    this.pixels = new Uint8Array(width * height * 4);
-    this.topDown = new Uint8Array(this.pixels.length);
+    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;
+  }
+
+  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);
+  }
+
   clear(
     red: number,
     green: number,
@@ -366,7 +513,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();
     }
@@ -565,15 +718,36 @@ export class WebGLContext3D implements Context3D {
 
     const width = this.renderTexture?.width ?? this.width;
     const height = this.renderTexture?.height ?? this.height;
-    const left = Math.max(0, Math.min(width, this.scissorLeft));
-    const top = Math.max(0, Math.min(height, this.scissorTop));
-    const right = Math.max(0, Math.min(width, this.scissorRight));
-    const bottom = Math.max(0, Math.min(height, this.scissorBottom));
+    let left = Math.max(0, Math.min(width, this.scissorLeft));
+    let top = Math.max(0, Math.min(height, this.scissorTop));
+    let right = Math.max(0, Math.min(width, this.scissorRight));
+    let bottom = Math.max(0, Math.min(height, this.scissorBottom));
+    // AIR tells a rectangle outside from its own unit, then scales it to a back buffer
+    // configured for best resolution, whose pixels are the screen's.
     this.scissorOutside = right <= left || bottom <= top;
+    if (!this.renderTexture && this.scale !== 1) {
+      const scale = this.scale;
+      left = Math.max(0, Math.min(width, screenPixels(this.scissorLeft, scale)));
+      top = Math.max(0, Math.min(height, screenPixels(this.scissorTop, scale)));
+      right = Math.max(0, Math.min(width, screenPixels(this.scissorRight, scale)));
+      bottom = Math.max(0, Math.min(height, screenPixels(this.scissorBottom, scale)));
+    }
+    let drawnHeight = height;
+    if (!this.renderTexture && (this.drawnWidth !== width || this.drawnHeight !== height)) {
+      // The back buffer's storage is smaller than its size: the rectangle shrinks with it.
+      const x = this.drawnWidth / width;
+      const y = this.drawnHeight / height;
+      left = Math.round(left * x);
+      right = Math.round(right * x);
+      top = Math.round(top * y);
+      bottom = Math.round(bottom * y);
+      drawnHeight = this.drawnHeight;
+    }
+
     gl.enable(gl.SCISSOR_TEST);
     gl.scissor(
       left,
-      this.renderTexture ? top : height - bottom,
+      this.renderTexture ? top : drawnHeight - bottom,
       Math.max(0, right - left),
       Math.max(0, bottom - top),
     );
@@ -630,7 +804,7 @@ export class WebGLContext3D implements Context3D {
     }
   }
 
-  createBuffer(count: number, stride: number): Buffer3D {
+  createBuffer(count: number, stride: number, dynamic = false): Buffer3D {
     this.alive();
     range(1, count - 1, stride === 0 ? 524287 : 65535);
     range(0, stride, 64);
@@ -661,7 +835,7 @@ export class WebGLContext3D implements Context3D {
     }
     gl.bindVertexArray(this.vao);
     gl.bindBuffer(target, handle);
-    gl.bufferData(target, bytes, gl.STATIC_DRAW);
+    gl.bufferData(target, bytes, dynamic ? gl.DYNAMIC_DRAW : gl.STATIC_DRAW);
     const state: BufferState = {
       handle,
       indices: stride === 0 ? new Uint16Array(count) : null,
@@ -762,6 +936,7 @@ export class WebGLContext3D implements Context3D {
       attributeMask: 0,
       vertex: [],
       vertexBank: null,
+      outputs: 1,
       fragment: [],
       samplers: [],
       samplerMask: 0,
@@ -773,11 +948,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);
@@ -834,12 +1015,13 @@ export class WebGLContext3D implements Context3D {
     height: number,
     cube = false,
     format: TextureFormat = "bgra",
+    streaming = 0,
   ): Texture3D {
-    return this.allocateTexture(width, height, cube, false, format);
+    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. */
@@ -847,7 +1029,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;
     }
 
@@ -873,7 +1055,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;
@@ -885,34 +1069,38 @@ export class WebGLContext3D implements Context3D {
     cube: boolean,
     rectangle: boolean,
     format: TextureFormat,
+    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");
     }
 
     const faces = cube ? 6 : 1;
     const levels = rectangle ? 1 : 1 + Math.floor(Math.log2(Math.max(width, height)));
+    range(streaming, 1, levels);
     if (!rectangle && ((width & (width - 1)) !== 0 || (height & (height - 1)) !== 0)) {
       throw new Context3DError(
         "texturePowerOfTwo",
         "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
@@ -928,7 +1116,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 ||
@@ -963,6 +1152,8 @@ export class WebGLContext3D implements Context3D {
       multisample: null,
       samples: 0,
       antiAlias: 0,
+      outputs: 0,
+      base: 0,
     };
     const texture: Texture3D = {
       width,
@@ -971,6 +1162,7 @@ export class WebGLContext3D implements Context3D {
       cube,
       rectangle,
       format,
+      streaming,
       upload: (pixels, level = 0, face = 0, sourceWidth, sourceHeight) => {
         this.alive();
         this.textureState(texture);
@@ -1003,10 +1195,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",
           );
         }
 
@@ -1046,6 +1238,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;
@@ -1201,6 +1400,7 @@ export class WebGLContext3D implements Context3D {
       depth,
       this.depthWrite,
       this.stencilWrite,
+      state.storage,
     );
     if (same) {
       if (newDepth) {
@@ -1236,12 +1436,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();
@@ -1387,6 +1588,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;
@@ -1403,22 +1610,34 @@ export class WebGLContext3D implements Context3D {
   }
 
   private finishTarget(): void {
-    if (!this.renderTexture) {
-      return;
+    if (this.renderTexture) {
+      this.finishTexture(this.renderTexture, this.renderFace);
     }
-    const texture = this.renderTexture;
+    for (let i = 0; i < this.outputs.length; i++) {
+      const output = this.outputs[i];
+      if (output) {
+        this.finishTexture(output, this.outputFaces[i]);
+      }
+    }
+  }
+
+  /** 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) {
@@ -1480,14 +1699,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");
     }
@@ -1592,7 +1896,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),
         );
       }
     }
@@ -1600,7 +1904,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;
@@ -1723,13 +2027,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];
@@ -1775,7 +2080,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);
@@ -1800,7 +2112,10 @@ export class WebGLContext3D implements Context3D {
           throw new TextureBindingError("unuploaded");
         }
       }
-      for (let face = 0; face < resource.uploaded.length; face++) {
+      const base = texture.streaming
+        ? this.streamingBase(texture, resource, this.samplerStates[slot] >>> 5 !== 0)
+        : 0;
+      for (let face = 0; !texture.streaming && face < resource.uploaded.length; face++) {
         if (!texture.cube && !(resource.uploaded[face] & 1)) {
           throw new TextureBindingError("unuploaded");
         }
@@ -1823,6 +2138,13 @@ export class WebGLContext3D implements Context3D {
         gl.bindSampler(slot, this.sampler(this.samplerStates[slot]));
         this.texturesApplied[slot] = 1;
       }
+      if (resource.base !== base) {
+        const target = texture.cube ? gl.TEXTURE_CUBE_MAP : gl.TEXTURE_2D;
+        gl.activeTexture(gl.TEXTURE0 + slot);
+        gl.bindTexture(target, resource.handle);
+        gl.texParameteri(target, gl.TEXTURE_BASE_LEVEL, base);
+        resource.base = base;
+      }
       if (!state.samplersSet) {
         gl.uniform1i(binding.location, slot);
       }
@@ -1832,10 +2154,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(
@@ -1852,6 +2176,50 @@ export class WebGLContext3D implements Context3D {
     this.changedTarget();
   }
 
+  /**
+   * The level a streaming texture is drawn from, as AIR 51 draws one: with mip filtering, the
+   * finest whose levels down to the smallest are uploaded on every face, which must reach its
+   * streaming level (#3700 before); without, its level 0 alone (#3713), as a texture that
+   * does not stream.
+   */
+  private streamingBase(texture: Texture3D, resource: TextureState, mip: boolean): number {
+    const faces = resource.uploaded.length;
+    let uploaded = 0;
+    for (let face = 0; face < faces; face++) {
+      uploaded |= resource.uploaded[face];
+    }
+    if (!uploaded) {
+      throw new TextureBindingError("unuploaded");
+    }
+    if (!mip) {
+      for (let face = 0; face < faces; face++) {
+        if (!(resource.uploaded[face] & 1)) {
+          throw new TextureBindingError("streaming");
+        }
+      }
+
+      return 0;
+    }
+
+    let base = texture.levels;
+    while (base > 0) {
+      let whole = true;
+      for (let face = 0; face < faces; face++) {
+        whole &&= (resource.uploaded[face] & (1 << (base - 1))) !== 0;
+      }
+      if (!whole) {
+        break;
+      }
+
+      base--;
+    }
+    if (base > texture.streaming) {
+      throw new TextureBindingError("mipmaps");
+    }
+
+    return base;
+  }
+
   private uniforms(
     locations: (WebGLUniformLocation | null)[],
     bank: Constants,
@@ -1899,12 +2267,12 @@ export class WebGLContext3D implements Context3D {
       gl.blitFramebuffer(
         0,
         0,
-        this.width,
-        this.height,
+        this.drawnWidth,
+        this.drawnHeight,
         0,
         0,
-        this.width,
-        this.height,
+        this.drawnWidth,
+        this.drawnHeight,
         gl.COLOR_BUFFER_BIT,
         gl.NEAREST,
       );
@@ -1922,12 +2290,46 @@ export class WebGLContext3D implements Context3D {
     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.height - height, width, height, gl.RGBA, gl.UNSIGNED_BYTE, this.pixels);
+    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 = (height - y - 1) * row;
-      this.topDown.set(this.pixels.subarray(from, from + row), y * row);
+      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;
@@ -1942,15 +2344,16 @@ export class WebGLContext3D implements Context3D {
     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.width,
-      this.height,
+      this.drawnWidth,
+      this.drawnHeight,
       0,
       0,
-      this.width,
-      this.height,
+      gl.drawingBufferWidth,
+      gl.drawingBufferHeight,
       gl.COLOR_BUFFER_BIT,
       gl.NEAREST,
     );