@swf2es/context3d 0.1.19 → 0.1.21

package/dist/webgl/context.js

@@ -1,20 +1,38 @@
-import { MOST_BACK_BUFFER, SAMPLER_FILTERS, SAMPLER_MIPS, SAMPLER_WRAPS, ScissorBoundsError, screenPixels, TextureBindingError, VERTEX_FORMATS, VertexOffsetError, } from "../backend.js";
+import { INDIRECT_BANK } from "../agal.js";
+import { compressedFormat, FRAGMENT_CONSTANTS, MOST_CUBE, profileLimits, SAMPLER_FILTERS, SAMPLER_MIPS, SAMPLER_SLOTS, SAMPLER_WRAPS, ScissorBoundsError, screenPixels, TEXEL_BYTES, TextureBindingError, VERTEX_CONSTANTS, VERTEX_FORMATS, VERTEX_SLOTS, VertexOffsetError, } from "../backend.js";
 import { GlState } from "../device/state.js";
 import { blockBytes } from "../dxt.js";
 import { Context3DError } from "../errors.js";
-import { uploadBuffer, uploadBufferBytes, } from "./buffers.js";
+import { configureBackBuffer, presentBackBuffer, unconfigureBackBuffer } from "./back-buffer.js";
+import { allocateBuffer } from "./buffers.js";
 import { resourceLimits } from "./limits.js";
 import { createCopyProgram, uploadProgram, } from "./programs.js";
+import { readBackBuffer } from "./readback.js";
 import { BLEND_FUNCTIONS, DEPTH_FUNCTIONS, range, STENCIL_FUNCTIONS, StencilState, } from "./state.js";
 import { allocateMultisample, deleteMultisample, resolveTarget, selectSamples, targetFramebuffer, } from "./targets.js";
-import { uploadCompressedLevel, uploadTexture, uploadTextureBytes, } from "./textures.js";
+import { storageFormat, uploadCompressedLevel, uploadTexture, uploadTextureBytes, } from "./textures.js";
 import { validateIndices, validateVertices } from "./validation.js";
 /** What AGAL's sampler must name to read each texture format: RGBA, DXT1 or DXT5. */
 const SAMPLER_FORMATS = {
     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) {
+    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];
 function constants(registers) {
     const data = new Float32Array(registers * 4);
     return {
@@ -25,9 +43,14 @@ function constants(registers) {
         writing: 0,
     };
 }
-/** 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 {
     gl;
+    /** @internal */
     drawState;
     width = 0;
     height = 0;
@@ -35,14 +58,22 @@ export class WebGLContext3D {
      * 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.
      */
+    /** @internal */
     drawnWidth = 0;
+    /** @internal */
     drawnHeight = 0;
+    /** @internal */
     gpuMost = null;
     disposed = false;
     samplerFormats = true;
+    profile = "baseline";
+    /** @internal */
     buffers = new Map();
+    /** @internal */
     vertexBuffers = 0;
+    /** @internal */
     bufferBytes = 0;
+    /** @internal */
     vertexBufferBytes = 0;
     programs = new Map();
     textures = new Map();
@@ -55,10 +86,18 @@ export class WebGLContext3D {
     copy2D = null;
     copyCube = null;
     targetSamples = new Int8Array(10).fill(-1);
+    /** @internal */
     renderTexture = null;
     renderDepth = false;
     renderFace = 0;
-    textureSlots = new Array(8).fill(null);
+    /** Colour outputs 1 to 3, drawn into with renderTexture, and their cube faces. */
+    outputs = [null, null, null];
+    outputFaces = new Uint8Array(3);
+    outputsChanged = false;
+    /** Whether any of outputs is bound, so that a draw alone into its target looks at none. */
+    outputsBound = false;
+    floatTargets;
+    textureSlots = new Array(SAMPLER_SLOTS).fill(null);
     textureMask = 0;
     samplers = new Array(96).fill(null);
     // Two wrap bits, three filter bits and two mip bits fit each slot in one byte.
@@ -66,19 +105,30 @@ export class WebGLContext3D {
     anisotropy;
     s3tc;
     maxAnisotropy = 1;
-    vertices = new Array(8).fill(null);
+    /** @internal */
+    vertices = new Array(VERTEX_SLOTS).fill(null);
     enabledAttributes = 0;
+    /** @internal */
     indexBuffer = null;
-    texturesApplied = new Uint8Array(8);
+    /** @internal */
+    texturesApplied = new Uint8Array(SAMPLER_SLOTS);
     selected = null;
+    /** @internal */
     framebuffer = null;
+    /** @internal */
     texture = null;
+    /** @internal */
     resolveFramebuffer = null;
+    /** @internal */
     colorBuffer = null;
+    /** @internal */
     resolveDirty = false;
+    /** @internal */
     depthBuffer = null;
+    /** @internal */
     antiAlias = 0;
     /** The back buffer's pixels to a CSS pixel and to a scissor rectangle's unit. */
+    /** @internal */
     scale = 1;
     depthWrite = true;
     depthCompare = "less";
@@ -93,17 +143,22 @@ export class WebGLContext3D {
     stencilReference = 0;
     stencilRead = 255;
     stencilWrite = 255;
+    /** @internal */
     scissor = false;
     scissorLeft = 0;
     scissorTop = 0;
     scissorRight = 0;
     scissorBottom = 0;
     scissorOutside = false;
-    vertexConstants = constants(128);
-    fragmentConstants = constants(28);
+    vertexConstants = constants(VERTEX_CONSTANTS);
+    fragmentConstants = constants(FRAGMENT_CONSTANTS);
+    /** @internal */
     pixels = new Uint8Array(0);
+    /** @internal */
     topDown = new Uint8Array(0);
+    /** @internal */
     vao;
+    /** @internal */
     limits;
     dxtEncoder = null;
     /** The host's whole-level encoder; a refusal retains the TypeScript path. */
@@ -138,11 +193,13 @@ export class WebGLContext3D {
         gl.frontFace(gl.CW);
         gl.disable(gl.DITHER);
     }
+    /** @internal */
     alive() {
         if (this.disposed || this.gl.isContextLost()) {
             throw new Context3DError("disposed", "Context3D experiment: context disposed or lost");
         }
     }
+    /** @internal */
     target(back = false, discardColor = false) {
         this.alive();
         if (!this.framebuffer) {
@@ -159,174 +216,30 @@ export class WebGLContext3D {
             }
         }
         this.drawState.bindFramebuffer(state ? targetFramebuffer(state) : this.framebuffer);
+        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. */
+    /** @internal */
     bindFramebuffer(target, framebuffer) {
         this.drawState.forget();
         this.gl.bindFramebuffer(target, framebuffer);
     }
     configure(width, height, depth = false, antiAlias = 0, scale = 1) {
-        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.
-     */
-    showAt() {
-        const style = this.gl.canvas.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. */
-    storageLimit() {
-        if (!this.gpuMost) {
-            const gl = this.gl;
-            const viewport = gl.getParameter(gl.MAX_VIEWPORT_DIMS);
-            const side = Math.min(gl.getParameter(gl.MAX_TEXTURE_SIZE), gl.getParameter(gl.MAX_RENDERBUFFER_SIZE));
-            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() {
-        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(red, green, blue, alpha, depth = 1, mask = 0xffffffff, stencil = 0) {
         this.target(false, (mask & 1) !== 0);
         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();
         }
@@ -464,6 +377,7 @@ export class WebGLContext3D {
         }
         this.applyScissor();
     }
+    /** @internal */
     applyScissor() {
         const gl = this.gl;
         if (!this.scissor) {
@@ -549,107 +463,9 @@ export class WebGLContext3D {
         }
     }
     createBuffer(count, stride, dynamic = false) {
-        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 = {
-            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 = {
-            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);
     }
+    /** @internal */
     buffer(buffer) {
         const state = this.buffers.get(buffer);
         if (!state) {
@@ -670,6 +486,7 @@ export class WebGLContext3D {
             attributeMask: 0,
             vertex: [],
             vertexBank: null,
+            outputs: 1,
             fragment: [],
             samplers: [],
             samplerMask: 0,
@@ -681,11 +498,17 @@ export class WebGLContext3D {
             vertexVersion: -1,
         };
         const program = {
+            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);
                 }
@@ -731,15 +554,15 @@ export class WebGLContext3D {
     createTexture(width, height, cube = false, format = "bgra", streaming = 0) {
         return this.allocateTexture(width, height, cube, false, format, streaming);
     }
-    createRectangleTexture(width, height) {
-        return this.allocateTexture(width, height, false, true, "bgra");
+    createRectangleTexture(width, height, format = "bgra") {
+        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. */
     s3tcFormat(format) {
         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;
         }
         // AIR's DXT1 has DXT1's one bit of alpha: a block of three colours has transparent black.
@@ -757,18 +580,22 @@ export class WebGLContext3D {
         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;
     }
     allocateTexture(width, height, cube, rectangle, format, streaming = 0) {
         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;
@@ -777,14 +604,14 @@ export class WebGLContext3D {
         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
@@ -799,7 +626,8 @@ export class WebGLContext3D {
                 : this.limits.max2DTextureBytes;
         // 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)) /
+        const quotaBytes = (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 ||
             this.textureCounts[kind] >= countLimit ||
@@ -830,6 +658,7 @@ export class WebGLContext3D {
             multisample: null,
             samples: 0,
             antiAlias: 0,
+            outputs: 0,
             base: 0,
         };
         const texture = {
@@ -864,8 +693,8 @@ export class WebGLContext3D {
             uploadCompressed: (blocks, level = 0, face = 0) => {
                 this.alive();
                 this.textureState(texture);
-                if (format === "bgra") {
-                    throw new Context3DError("textureUpload", "Context3D experiment: BGRA texture given blocks");
+                if (!compressedFormat(format)) {
+                    throw new Context3DError("textureUpload", "Context3D experiment: uncompressed texture given blocks");
                 }
                 try {
                     uploadCompressedLevel(gl, texture, state, blocks, level, face);
@@ -901,6 +730,13 @@ export class WebGLContext3D {
                 state.framebuffer = null;
                 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;
@@ -1023,7 +859,7 @@ export class WebGLContext3D {
         this.sampler(0);
         this.drawState.forget();
         this.texturesApplied[0] = 0;
-        const target = allocateMultisample(this.gl, texture, old, samples, depth, this.depthWrite, this.stencilWrite);
+        const target = allocateMultisample(this.gl, texture, old, samples, depth, this.depthWrite, this.stencilWrite, state.storage);
         if (same) {
             if (newDepth) {
                 this.targetDepthBytes += bytes;
@@ -1055,9 +891,10 @@ export class WebGLContext3D {
         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();
@@ -1155,6 +992,12 @@ export class WebGLContext3D {
         this.applyScissor();
     }
     changedTarget() {
+        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;
@@ -1172,22 +1015,33 @@ export class WebGLContext3D {
         }
     }
     finishTarget() {
-        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. */
+    finishTexture(texture, renderFace) {
         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) {
@@ -1211,13 +1065,81 @@ export class WebGLContext3D {
                 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. */
+    renderFormat(format) {
+        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, texture, face = 0) {
+        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.
+     */
+    attachOutputs(state) {
+        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 = [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. */
+    outputMask() {
+        let mask = 0;
+        for (let i = 0; i < this.outputs.length; i++) {
+            if (this.outputs[i]) {
+                mask |= 1 << i;
+            }
+        }
+        return mask;
+    }
     setTexture(index, texture) {
         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");
         }
@@ -1302,13 +1224,13 @@ export class WebGLContext3D {
         for (let i = 0; i < state.samplers.length; i++) {
             const source = state.samplers[i].source;
             if (!source.ignore) {
-                this.setSamplerState(source.index, (source.repeat ? 3 : 0) | (source.filter << 2) | (source.mip << 5));
+                this.setSamplerState(source.index, WRAPS[source.wrap] | (source.filter << 2) | (source.mip << 5));
             }
         }
     }
     setVertex(index, buffer, offset, format) {
         this.alive();
-        range(index, 1, 8);
+        range(index, 1, VERTEX_SLOTS);
         if (buffer === null) {
             this.vertices[index] = null;
             return;
@@ -1414,13 +1336,14 @@ export class WebGLContext3D {
         const maximum = validateIndices(index, first, count);
         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];
             const binding = this.vertices[slot];
@@ -1453,7 +1376,12 @@ export class WebGLContext3D {
             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);
@@ -1515,11 +1443,12 @@ export class WebGLContext3D {
         state.samplersSet = true;
         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(state.fragment, this.fragmentConstants, state.fragmentVersions, state.fragmentValues);
@@ -1593,77 +1522,11 @@ export class WebGLContext3D {
             }
         }
     }
-    resolve() {
-        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) {
-        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() {
-        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() {
         if (this.disposed) {