@swf2es/context3d 0.1.18 → 0.1.20

package/dist/webgl/context.js

@@ -1,4 +1,5 @@
-import { SAMPLER_FILTERS, SAMPLER_MIPS, SAMPLER_WRAPS, ScissorBoundsError, TextureBindingError, VERTEX_FORMATS, VertexOffsetError, } from "../backend.js";
+import { INDIRECT_BANK } from "../agal.js";
+import { compressedFormat, FRAGMENT_CONSTANTS, MOST_BACK_BUFFER, 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";
@@ -7,14 +8,29 @@ import { resourceLimits } from "./limits.js";
 import { createCopyProgram, uploadProgram, } from "./programs.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 {
@@ -31,8 +47,16 @@ export class WebGLContext3D {
     drawState;
     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.
+     */
+    drawnWidth = 0;
+    drawnHeight = 0;
+    gpuMost = null;
     disposed = false;
     samplerFormats = true;
+    profile = "baseline";
     buffers = new Map();
     vertexBuffers = 0;
     bufferBytes = 0;
@@ -51,7 +75,14 @@ export class WebGLContext3D {
     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.
@@ -59,10 +90,10 @@ export class WebGLContext3D {
     anisotropy;
     s3tc;
     maxAnisotropy = 1;
-    vertices = new Array(8).fill(null);
+    vertices = new Array(VERTEX_SLOTS).fill(null);
     enabledAttributes = 0;
     indexBuffer = null;
-    texturesApplied = new Uint8Array(8);
+    texturesApplied = new Uint8Array(SAMPLER_SLOTS);
     selected = null;
     framebuffer = null;
     texture = null;
@@ -71,6 +102,8 @@ export class WebGLContext3D {
     resolveDirty = false;
     depthBuffer = null;
     antiAlias = 0;
+    /** The back buffer's pixels to a CSS pixel and to a scissor rectangle's unit. */
+    scale = 1;
     depthWrite = true;
     depthCompare = "less";
     blendEnabled = false;
@@ -90,8 +123,8 @@ export class WebGLContext3D {
     scissorRight = 0;
     scissorBottom = 0;
     scissorOutside = false;
-    vertexConstants = constants(128);
-    fragmentConstants = constants(28);
+    vertexConstants = constants(VERTEX_CONSTANTS);
+    fragmentConstants = constants(FRAGMENT_CONSTANTS);
     pixels = new Uint8Array(0);
     topDown = new Uint8Array(0);
     vao;
@@ -150,17 +183,20 @@ export class WebGLContext3D {
             }
         }
         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. */
     bindFramebuffer(target, framebuffer) {
         this.drawState.forget();
         this.gl.bindFramebuffer(target, framebuffer);
     }
-    configure(width, height, depth = false, antiAlias = 0) {
+    configure(width, height, depth = false, antiAlias = 0, scale = 1) {
         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", "Context3D experiment: resize while rendering to texture");
         }
@@ -171,10 +207,18 @@ export class WebGLContext3D {
             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;
@@ -192,7 +236,7 @@ export class WebGLContext3D {
             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) {
@@ -201,16 +245,16 @@ export class WebGLContext3D {
                 }
                 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, gl.RENDERBUFFER, colorBuffer);
             }
             if (depthBuffer) {
                 gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
                 if (samples) {
-                    gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.DEPTH24_STENCIL8, width, height);
+                    gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.DEPTH24_STENCIL8, 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, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);
             }
@@ -242,19 +286,75 @@ export class WebGLContext3D {
         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.
+     */
+    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;
+    }
+    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);
+    }
     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();
         }
@@ -401,13 +501,33 @@ export class WebGLContext3D {
         }
         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, Math.max(0, right - left), Math.max(0, bottom - top));
+        gl.scissor(left, this.renderTexture ? top : drawnHeight - bottom, Math.max(0, right - left), Math.max(0, bottom - top));
     }
     setBlend(source, destination) {
         this.alive();
@@ -456,7 +576,7 @@ export class WebGLContext3D {
                 break;
         }
     }
-    createBuffer(count, stride) {
+    createBuffer(count, stride, dynamic = false) {
         this.alive();
         range(1, count - 1, stride === 0 ? 524287 : 65535);
         range(0, stride, 64);
@@ -482,7 +602,7 @@ export class WebGLContext3D {
         }
         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 = {
             handle,
             indices: stride === 0 ? new Uint16Array(count) : null,
@@ -578,6 +698,7 @@ export class WebGLContext3D {
             attributeMask: 0,
             vertex: [],
             vertexBank: null,
+            outputs: 1,
             fragment: [],
             samplers: [],
             samplerMask: 0,
@@ -589,11 +710,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);
                 }
@@ -636,18 +763,18 @@ export class WebGLContext3D {
         }
         return state;
     }
-    createTexture(width, height, cube = false, format = "bgra") {
-        return this.allocateTexture(width, height, cube, false, format);
+    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.
@@ -665,33 +792,38 @@ 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) {
+    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;
         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
@@ -706,7 +838,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 ||
@@ -737,6 +870,8 @@ export class WebGLContext3D {
             multisample: null,
             samples: 0,
             antiAlias: 0,
+            outputs: 0,
+            base: 0,
         };
         const texture = {
             width,
@@ -745,6 +880,7 @@ export class WebGLContext3D {
             cube,
             rectangle,
             format,
+            streaming,
             upload: (pixels, level = 0, face = 0, sourceWidth, sourceHeight) => {
                 this.alive();
                 this.textureState(texture);
@@ -769,8 +905,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);
@@ -806,6 +942,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;
@@ -928,7 +1071,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;
@@ -960,9 +1103,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();
@@ -1060,6 +1204,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;
@@ -1077,22 +1227,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) {
@@ -1116,13 +1277,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");
         }
@@ -1207,13 +1436,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;
@@ -1319,13 +1548,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];
@@ -1358,7 +1588,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);
@@ -1383,7 +1618,10 @@ export class WebGLContext3D {
                     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");
                 }
@@ -1403,6 +1641,13 @@ export class WebGLContext3D {
                 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);
             }
@@ -1410,11 +1655,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);
@@ -1425,6 +1671,45 @@ export class WebGLContext3D {
         gl.drawElements(gl.TRIANGLES, count, gl.UNSIGNED_SHORT, first * 2);
         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.
+     */
+    streamingBase(texture, resource, mip) {
+        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;
+    }
     uniforms(locations, bank, previous, values) {
         for (let i = 0; i < locations.length; i++) {
             if (locations[i] && (bank.writing || previous[i] !== bank.versions[i])) {
@@ -1460,7 +1745,7 @@ export class WebGLContext3D {
             if (this.scissor) {
                 gl.disable(gl.SCISSOR_TEST);
             }
-            gl.blitFramebuffer(0, 0, this.width, this.height, 0, 0, this.width, this.height, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+            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);
             }
@@ -1474,12 +1759,34 @@ export class WebGLContext3D {
         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;
     }
@@ -1492,7 +1799,8 @@ export class WebGLContext3D {
         if (this.scissor) {
             gl.disable(gl.SCISSOR_TEST);
         }
-        gl.blitFramebuffer(0, 0, this.width, this.height, 0, 0, this.width, this.height, gl.COLOR_BUFFER_BIT, gl.NEAREST);
+        // 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);
         }