supervision 0.1.7 → 0.2.0-next.1

package/dist/mask-preparation.worker.js

@@ -17,6 +17,12 @@
     (function (DetectionBufferStatus) {
         DetectionBufferStatus["Idle"] = "idle";
         DetectionBufferStatus["Loading"] = "loading";
+        /**
+         * The playback gate is holding playback until the source produces detections
+         * for the requested range. {@link DetectionBufferStatus.Loading} fetches
+         * detections the source already has; this one waits on a producer.
+         */
+        DetectionBufferStatus["AwaitingCoverage"] = "awaitingCoverage";
         DetectionBufferStatus["Ready"] = "ready";
         DetectionBufferStatus["Error"] = "error";
         DetectionBufferStatus["Destroyed"] = "destroyed";
@@ -29,12 +35,30 @@
         /**
          * Select the frame whose `[mediaTime, endTime)` interval contains the media
          * time. This is the default for interval annotations and timestamped sources.
+         *
+         * Frame times must come from the media itself. Times reconstructed from a
+         * nominal frame rate drift against a clip whose real rate differs, and once
+         * that drift passes the half-millisecond selection tolerance a playhead
+         * landing on a frame boundary selects the previous frame's detections.
+         *
+         * A frame that carries no `endTime` stays active until the next frame starts,
+         * which bridges an index the source never produced.
+         * {@link DetectionFrameSelectionMode.NearestFrameIndex} bounds each frame to
+         * one grid step instead, so a missing index reads as no detections.
          */
         DetectionFrameSelectionMode["Interval"] = "interval";
         /**
-         * Select from a known inference frame grid using `frameIndex`, `frameRate`,
-         * and optional `frameIndexOriginTime`. This is useful when inference was run
-         * on normalized frames and playback should snap detections to that grid.
+         * Select from a known inference frame grid using `frameIndex` and
+         * `frameRate`. This is useful when inference was run on normalized frames and
+         * playback should snap detections to that grid.
+         *
+         * A frame speaks for one grid step starting at its own media time, and an
+         * index the source never produced selects nothing rather than a neighbour.
+         *
+         * A frame carrying no `frameIndex` speaks for its step on the same terms,
+         * reached by the time it starts at rather than by an index that names it. Its
+         * `endTime` does not widen it past that step, so a source that labels only
+         * part of what it writes cannot bridge the indexes it never produced.
          */
         DetectionFrameSelectionMode["NearestFrameIndex"] = "nearestFrameIndex";
     })(DetectionFrameSelectionMode || (DetectionFrameSelectionMode = {}));
@@ -177,13 +201,16 @@
             width,
         };
     }
-    function assertMaskDimensions(data, width, height) {
+    function assertMaskSize(width, height) {
         if (!Number.isInteger(width) || width <= 0) {
             throw new Error("Mask width must be a positive integer.");
         }
         if (!Number.isInteger(height) || height <= 0) {
             throw new Error("Mask height must be a positive integer.");
         }
+    }
+    function assertMaskDimensions(data, width, height) {
+        assertMaskSize(width, height);
         if (data.length !== width * height) {
             throw new Error("Mask data length must equal width * height.");
         }
@@ -362,9 +389,9 @@
             }
             intersections.sort((left, right) => left - right);
             for (let index = 0; index < intersections.length - 1; index += 2) {
-                const left = Math.max(0, Math.ceil(intersections[index]));
-                const right = Math.min(dimensions.width - 1, Math.floor(intersections[index + 1]));
-                for (let x = left; x <= right; x += 1) {
+                const left = Math.max(0, Math.round(intersections[index]));
+                const right = Math.min(dimensions.width, Math.round(intersections[index + 1]));
+                for (let x = left; x < right; x += 1) {
                     data[y * dimensions.width + x] = 1;
                 }
             }
@@ -381,14 +408,27 @@
         return new Uint8Array(dimensions.width * dimensions.height);
     }
 
-    const MAX_ID_MASK_PALETTE_ENTRIES = 64;
+    /**
+     * Palette slots an id raster can name, one of them the background. A GLSL
+     * fragment stage is guaranteed only 224 uniform vectors, and a palette entry
+     * costs 2.25 of them, so this stays a multiple of four and well inside that
+     * budget; past it a frame draws from the RGBA composite instead.
+     */
+    const MAX_ID_MASK_PALETTE_ENTRIES = 80;
     const MAX_ID_MASK_STROKE_WIDTH = 16;
-    function createIdMaskFrame(instructions) {
+    function createIdMaskFrame(instructions, options = {}) {
         if (instructions.length === 0) {
             return undefined;
         }
-        const width = Math.max(...instructions.map(({ mask }) => mask.width));
-        const height = Math.max(...instructions.map(({ mask }) => mask.height));
+        const maskWidth = Math.max(...instructions.map(({ mask }) => mask.width));
+        const maskHeight = Math.max(...instructions.map(({ mask }) => mask.height));
+        const width = resolveRasterWidth(maskWidth, options.maxWidth);
+        const height = width === maskWidth
+            ? maskHeight
+            : Math.max(1, Math.round((width * maskHeight) / maskWidth));
+        const scaledAxes = width === maskWidth
+            ? undefined
+            : createScaledMaskAxes({ height, maskHeight, maskWidth, width });
         const data = new Uint8Array(new ArrayBuffer(width * height));
         const fillPalette = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4 * 4));
         const strokePalette = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4 * 4));
@@ -396,27 +436,23 @@
         let hasStroke = false;
         let maxStrokeWidth = 0;
         for (const instruction of instructions) {
-            const detectionMaskId = instruction.detectionIndex + 1;
-            if (detectionMaskId <= 0 ||
-                detectionMaskId >= MAX_ID_MASK_PALETTE_ENTRIES) {
+            const detectionMaskId = resolveIdMaskPaletteId(instruction.detectionIndex);
+            if (detectionMaskId === undefined) {
                 return undefined;
             }
-            writePaletteEntry(fillPalette, detectionMaskId, instruction.color, instruction.alpha);
+            writeIdMaskPaletteEntry(fillPalette, detectionMaskId, instruction.color, instruction.alpha);
             if (instruction.stroke && instruction.stroke.width > 0) {
-                const strokeWidth = Math.min(Math.max(0, instruction.stroke.width), MAX_ID_MASK_STROKE_WIDTH);
+                const strokeWidth = resolveIdMaskStrokeTexels(instruction.stroke.width, maskWidth, width);
                 hasStroke = true;
                 strokeWidths[detectionMaskId] = strokeWidth;
                 maxStrokeWidth = Math.max(maxStrokeWidth, strokeWidth);
-                writePaletteEntry(strokePalette, detectionMaskId, instruction.stroke.color, instruction.stroke.alpha);
+                writeIdMaskPaletteEntry(strokePalette, detectionMaskId, instruction.stroke.color, instruction.stroke.alpha);
             }
-            const decodedMask = decodeCompressedRleMask(instruction.mask);
-            for (let y = 0; y < decodedMask.height; y += 1) {
-                for (let x = 0; x < decodedMask.width; x += 1) {
-                    const maskOffset = y * decodedMask.width + x;
-                    if (decodedMask.data[maskOffset]) {
-                        data[y * width + x] = detectionMaskId;
-                    }
-                }
+            if (scaledAxes) {
+                writeScaledMaskRuns(data, scaledAxes, instruction.mask, detectionMaskId);
+            }
+            else {
+                writeMaskRuns(data, width, instruction.mask, detectionMaskId);
             }
         }
         return {
@@ -425,13 +461,126 @@
             hasStroke,
             height,
             maxStrokeWidth,
+            sourceWidth: maskWidth,
             strokePalette,
             strokeWidths,
             width,
         };
     }
-    function writePaletteEntry(palette, id, color, alpha) {
-        const offset = id * 4;
+    /**
+     * Compressed RLE counts runs down each column in turn, so a foreground run is
+     * a contiguous walk down one column that wraps into the next.
+     */
+    function writeMaskRuns(data, frameWidth, mask, detectionMaskId) {
+        const counts = decodeCompressedRleCounts(mask.counts);
+        const maskWidth = mask.width;
+        const maskHeight = mask.height;
+        let maskOffset = 0;
+        for (let index = 0; index < counts.length; index += 1) {
+            const runLength = counts[index] ?? 0;
+            if (index % 2 === 0 || runLength <= 0) {
+                maskOffset += runLength;
+                continue;
+            }
+            let x = Math.floor(maskOffset / maskHeight);
+            let y = maskOffset - x * maskHeight;
+            let frameOffset = y * frameWidth + x;
+            for (let step = 0; step < runLength; step += 1) {
+                if (x >= maskWidth) {
+                    break;
+                }
+                data[frameOffset] = detectionMaskId;
+                y += 1;
+                frameOffset += frameWidth;
+                if (y === maskHeight) {
+                    y = 0;
+                    x += 1;
+                    frameOffset = x;
+                }
+            }
+            maskOffset += runLength;
+        }
+    }
+    /**
+     * The scaled twin of writeMaskRuns. Every source pixel marks the texel it lands
+     * in, so a mask keeps every part of itself the smaller raster can hold and
+     * gains up to a texel at its edges.
+     */
+    function writeScaledMaskRuns(data, axes, mask, detectionMaskId) {
+        const counts = decodeCompressedRleCounts(mask.counts);
+        const maskWidth = mask.width;
+        const maskHeight = mask.height;
+        let maskOffset = 0;
+        for (let index = 0; index < counts.length; index += 1) {
+            const runLength = counts[index] ?? 0;
+            if (index % 2 === 0 || runLength <= 0) {
+                maskOffset += runLength;
+                continue;
+            }
+            let x = Math.floor(maskOffset / maskHeight);
+            let y = maskOffset - x * maskHeight;
+            let column = axes.columns[x];
+            for (let step = 0; step < runLength; step += 1) {
+                if (x >= maskWidth) {
+                    break;
+                }
+                data[axes.rows[y] + column] = detectionMaskId;
+                y += 1;
+                if (y === maskHeight) {
+                    y = 0;
+                    x += 1;
+                    column = axes.columns[x];
+                }
+            }
+            maskOffset += runLength;
+        }
+    }
+    function resolveRasterWidth(maskWidth, maxWidth) {
+        return maxWidth !== undefined && maxWidth > 0 && maxWidth < maskWidth
+            ? Math.max(1, Math.floor(maxWidth))
+            : maskWidth;
+    }
+    /**
+     * A stroke is measured in texels of the raster it is drawn on, so a coarser
+     * raster measures it in coarser texels. A stroke of a texel or more keeps at
+     * least one, the thinnest line the shader can draw; a narrower one keeps its
+     * own width, which the shader draws as an inner boundary at any scale. The
+     * ceiling is the widest neighbourhood the shaders scan, so a wider stroke would
+     * be drawn at the ceiling anyway and every layer drawing the same annotation
+     * has to arrive at the same width.
+     */
+    function resolveIdMaskStrokeTexels(strokeWidth, maskWidth, rasterWidth) {
+        const scale = maskWidth > 0 ? rasterWidth / maskWidth : 1;
+        return Math.min(Math.max(strokeWidth * scale, Math.min(strokeWidth, 1)), MAX_ID_MASK_STROKE_WIDTH);
+    }
+    function createScaledMaskAxes(frame) {
+        return {
+            columns: createMaskAxisMap(frame.maskWidth, frame.width, 1),
+            rows: createMaskAxisMap(frame.maskHeight, frame.height, frame.width),
+        };
+    }
+    /** Rows hold their destination offset, so writing a run is two lookups. */
+    function createMaskAxisMap(sourceLength, targetLength, stride) {
+        const map = new Int32Array(sourceLength);
+        const scale = targetLength / sourceLength;
+        for (let index = 0; index < sourceLength; index += 1) {
+            map[index] = Math.min(targetLength - 1, Math.floor(index * scale)) * stride;
+        }
+        return map;
+    }
+    /**
+     * The palette slot a detection index names, or undefined when the palette has
+     * no slot for it. Slot zero is the background, so the ids start at one and the
+     * last detection the palette can name sits one index below the last slot.
+     */
+    function resolveIdMaskPaletteId(detectionIndex) {
+        const detectionMaskId = detectionIndex + 1;
+        return detectionMaskId > 0 && detectionMaskId < MAX_ID_MASK_PALETTE_ENTRIES
+            ? detectionMaskId
+            : undefined;
+    }
+    function writeIdMaskPaletteEntry(palette, detectionMaskId, color, alpha) {
+        const offset = detectionMaskId * 4;
         palette[offset] = ((color >> 16) & 0xff) / 255;
         palette[offset + 1] = ((color >> 8) & 0xff) / 255;
         palette[offset + 2] = (color & 0xff) / 255;
@@ -471,7 +620,7 @@
      */
     var MediaErrorKind;
     (function (MediaErrorKind) {
-        /** The media could not be opened or read at all. */
+        /** The media could not be opened or read, or was refused before any read. */
         MediaErrorKind["Unreadable"] = "unreadable";
         /** The container or codec is not supported by this platform. */
         MediaErrorKind["UnsupportedFormat"] = "unsupportedFormat";
@@ -496,6 +645,28 @@
         MediaSourceStatus["Error"] = "error";
         MediaSourceStatus["Destroyed"] = "destroyed";
     })(MediaSourceStatus || (MediaSourceStatus = {}));
+    /**
+     * Current renderer state.
+     */
+    /**
+     * What a playback gate holds back.
+     *
+     * A source the renderer pulls samples from can be held between any two frames,
+     * because the renderer decides when each one is drawn. A source that presents
+     * its own frames owns the playhead, so holding it means stopping the producer
+     * and starting it again, and a gate that stops one has to bound its own wait
+     * or a producer nothing answers for never runs again.
+     */
+    var PlaybackGateReach;
+    (function (PlaybackGateReach) {
+        /** No gate: the picture moves and unprepared layers are absent from it. */
+        PlaybackGateReach["Off"] = "off";
+        /**
+         * Playback waits to begin, and stops again at any frame whose artifacts are
+         * missing, until they arrive or the gate's own wait bound gives up on them.
+         */
+        PlaybackGateReach["EveryFrame"] = "everyFrame";
+    })(PlaybackGateReach || (PlaybackGateReach = {}));
 
     /**
      * Media-session operating mode.
@@ -536,12 +707,35 @@
      */
     var MediaSessionActivityKind;
     (function (MediaSessionActivityKind) {
+        /**
+         * Playback is held waiting for a producer to emit detections for the frame
+         * about to be shown, which is a wait on inference rather than on transfer or
+         * decode. `DetectionsBuffering` is the transfer of detections that already
+         * exist, and `PlaybackBuffering` is the wait for media bytes.
+         */
+        MediaSessionActivityKind["DetectionsAwaitingCoverage"] = "detectionsAwaitingCoverage";
         MediaSessionActivityKind["DetectionsBuffering"] = "detectionsBuffering";
         MediaSessionActivityKind["DetectionsLoading"] = "detectionsLoading";
         MediaSessionActivityKind["Error"] = "error";
         MediaSessionActivityKind["MediaNormalizing"] = "mediaNormalizing";
         MediaSessionActivityKind["MediaOpening"] = "mediaOpening";
+        /**
+         * The picture is waiting on media the source has not handed over yet, which
+         * is the bytes and their decode rather than anything downstream of them.
+         * `PlaybackBuffering` is what a transport reports once it has already
+         * stopped; this is reported from the read itself, including the reads a seek
+         * makes while the transport still reads as paused.
+         */
+        MediaSessionActivityKind["MediaSourceReading"] = "mediaSourceReading";
         MediaSessionActivityKind["PlaybackBuffering"] = "playbackBuffering";
+        /**
+         * The render-preparation gate held the picture for artifacts that never
+         * arrived and let it go. Nothing is blocked: the frames reaching the screen
+         * are the ones whose artifacts were given up on. What is waited on is
+         * preparation finishing another frame, which is what lets the gate hold the
+         * picture again; `RenderPreparing` covers the holds that are running.
+         */
+        MediaSessionActivityKind["RenderPreparationAbandoned"] = "renderPreparationAbandoned";
         MediaSessionActivityKind["RenderPreparing"] = "renderPreparing";
     })(MediaSessionActivityKind || (MediaSessionActivityKind = {}));
     /**
@@ -554,9 +748,52 @@
         MediaSessionActivityStatus["Waiting"] = "waiting";
     })(MediaSessionActivityStatus || (MediaSessionActivityStatus = {}));
 
-    const PNG_SIGNATURE = new Uint8Array([
-        0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a,
-    ]);
+    /** Builds compact, independent alpha crops so overlapping masks stay exact. */
+    function createRegionMaskCoverageFrame(instructions) {
+        const entries = [];
+        for (const instruction of instructions) {
+            if (!instruction.regionCoverageMask) {
+                continue;
+            }
+            const entry = cropCoverageMask(instruction.detectionIndex, decodeCompressedRleMask(instruction.regionCoverageMask));
+            if (entry) {
+                entries.push(entry);
+            }
+        }
+        return entries.length > 0 ? { entries } : undefined;
+    }
+    function cropCoverageMask(detectionIndex, decodedMask) {
+        let minX = decodedMask.width;
+        let minY = decodedMask.height;
+        let maxX = -1;
+        let maxY = -1;
+        for (let y = 0; y < decodedMask.height; y += 1) {
+            for (let x = 0; x < decodedMask.width; x += 1) {
+                if (!decodedMask.data[y * decodedMask.width + x]) {
+                    continue;
+                }
+                minX = Math.min(minX, x);
+                minY = Math.min(minY, y);
+                maxX = Math.max(maxX, x);
+                maxY = Math.max(maxY, y);
+            }
+        }
+        if (maxX < minX || maxY < minY) {
+            return undefined;
+        }
+        const width = maxX - minX + 1;
+        const height = maxY - minY + 1;
+        const data = new Uint8Array(new ArrayBuffer(width * height));
+        for (let y = minY; y <= maxY; y += 1) {
+            for (let x = minX; x <= maxX; x += 1) {
+                if (!decodedMask.data[y * decodedMask.width + x]) {
+                    continue;
+                }
+                data[(y - minY) * width + (x - minX)] = 255;
+            }
+        }
+        return { data, detectionIndex, height, width, x: minX, y: minY };
+    }
     function compositeMaskFrame(instructions) {
         const maskInstructions = materializeMaskInstructions(instructions);
         if (maskInstructions.length === 0) {
@@ -570,33 +807,51 @@
         }
         return { data, height, width };
     }
-    function createMaskIdFrame(instructions) {
-        return createIdMaskFrame(materializeMaskInstructions(instructions));
+    function createIdMaskRasterFrame(instructions, maxRasterWidth) {
+        try {
+            return createIdMaskFrame(materializeMaskInstructions(instructions), {
+                maxWidth: maxRasterWidth,
+            });
+        }
+        catch {
+            // The id raster is the fast path, not the only one: answering with nothing
+            // puts the caller on the RGBA composite, which draws the same picture.
+            return undefined;
+        }
     }
-    async function createPngIdMaskFrame(instructions) {
-        const frame = createMaskIdFrame(instructions);
-        if (!frame) {
+    /**
+     * Whether the palette has a slot for every detection this frame masks. An id
+     * names a detection by its index in the frame, so one masked detection past the
+     * last slot leaves the whole frame without an id raster however few masks it
+     * carries.
+     */
+    function canIdMaskPaletteNameFrame(instructions) {
+        return instructions.every((instruction) => instruction.visible === false ||
+            resolveIdMaskPaletteId(instruction.detectionIndex) !== undefined);
+    }
+    function createIdMaskPlane(instructions, maxRasterWidth) {
+        // The plane carries the ids a failed cook could not. A frame the palette
+        // cannot name has none to carry, and cooking it again reaches the same
+        // refusal after rasterizing every mask a second time.
+        if (!canIdMaskPaletteNameFrame(instructions)) {
             return undefined;
         }
-        return {
-            ...frame,
-            png: await encodeGrayscalePng({
-                height: frame.height,
-                pixels: frame.data,
-                width: frame.width,
-            }),
-        };
+        const frame = createIdMaskRasterFrame(instructions, maxRasterWidth);
+        return frame
+            ? { data: frame.data, height: frame.height, width: frame.width }
+            : undefined;
     }
     function compositeInstruction(rgba, canvasWidth, instruction) {
-        const decodedMask = decodeCompressedRleMask(instruction.mask);
         const fill = resolveRgbaColor(instruction.color, instruction.alpha);
-        compositeMaskFill(rgba, canvasWidth, decodedMask, fill);
-        if (instruction.stroke) {
-            compositeMaskStroke(rgba, canvasWidth, decodedMask, instruction.stroke);
+        const bounds = compositeMaskFill(rgba, canvasWidth, instruction.mask, fill);
+        if (instruction.stroke && bounds) {
+            compositeMaskStroke(rgba, canvasWidth, decodeCompressedRleMask(instruction.mask), bounds, instruction.stroke);
         }
     }
     function materializeMaskInstructions(instructions) {
-        return instructions.map((instruction) => {
+        return instructions
+            .filter((instruction) => instruction.visible !== false)
+            .map((instruction) => {
             if (instruction.mask) {
                 return instruction;
             }
@@ -610,25 +865,59 @@
             };
         });
     }
-    function compositeMaskFill(rgba, canvasWidth, decodedMask, fill) {
-        for (let y = 0; y < decodedMask.height; y += 1) {
-            for (let x = 0; x < decodedMask.width; x += 1) {
-                const maskOffset = y * decodedMask.width + x;
-                if (!decodedMask.data[maskOffset]) {
-                    continue;
+    /**
+     * Compressed RLE counts runs down each column in turn, so a foreground run is
+     * a contiguous walk down one column that wraps into the next.
+     */
+    function compositeMaskFill(rgba, canvasWidth, mask, fill) {
+        const counts = decodeCompressedRleCounts(mask.counts);
+        const maskWidth = mask.width;
+        const maskHeight = mask.height;
+        const maskArea = maskWidth * maskHeight;
+        let maskOffset = 0;
+        let minX = maskWidth;
+        let minY = maskHeight;
+        let maxX = -1;
+        let maxY = -1;
+        for (let index = 0; index < counts.length; index += 1) {
+            const runLength = counts[index] ?? 0;
+            if (index % 2 === 0 || runLength <= 0) {
+                maskOffset += runLength;
+                continue;
+            }
+            let columnX = Math.floor(maskOffset / maskHeight);
+            let columnY = maskOffset - columnX * maskHeight;
+            for (let step = 0; step < runLength; step += 1) {
+                // A run can outlast the columns the mask has; the pixel it then names
+                // is wherever that column-major offset lands when read back row-major.
+                const rowMajorOffset = columnY * maskWidth + columnX;
+                if (rowMajorOffset < maskArea) {
+                    const x = rowMajorOffset % maskWidth;
+                    const y = (rowMajorOffset - x) / maskWidth;
+                    writePixel(rgba, canvasWidth, x, y, fill);
+                    minX = Math.min(minX, x);
+                    minY = Math.min(minY, y);
+                    maxX = Math.max(maxX, x);
+                    maxY = Math.max(maxY, y);
+                }
+                columnY += 1;
+                if (columnY === maskHeight) {
+                    columnY = 0;
+                    columnX += 1;
                 }
-                writePixel(rgba, canvasWidth, x, y, fill);
             }
+            maskOffset += runLength;
         }
+        return maxX < minX || maxY < minY ? undefined : { maxX, maxY, minX, minY };
     }
-    function compositeMaskStroke(rgba, canvasWidth, decodedMask, stroke) {
+    function compositeMaskStroke(rgba, canvasWidth, decodedMask, bounds, stroke) {
         const width = Math.round(stroke.width);
         if (width <= 0) {
             return;
         }
         const strokeColor = resolveRgbaColor(stroke.color, stroke.alpha);
-        for (let y = 0; y < decodedMask.height; y += 1) {
-            for (let x = 0; x < decodedMask.width; x += 1) {
+        for (let y = bounds.minY; y <= bounds.maxY; y += 1) {
+            for (let x = bounds.minX; x <= bounds.maxX; x += 1) {
                 if (!isMaskPixel(decodedMask, x, y) ||
                     !isBoundaryPixel(decodedMask, x, y)) {
                     continue;
@@ -684,86 +973,23 @@
         rgba[rgbaOffset + 2] = color.blue;
         rgba[rgbaOffset + 3] = color.alpha;
     }
-    async function encodeGrayscalePng(options) {
-        if (typeof CompressionStream === "undefined") {
-            throw new Error("CompressionStream is required to encode PNG ID masks.");
-        }
-        const rawScanlines = createFilterlessPngScanlines(options);
-        const ihdr = new Uint8Array(13);
-        const ihdrView = new DataView(ihdr.buffer);
-        ihdrView.setUint32(0, options.width);
-        ihdrView.setUint32(4, options.height);
-        ihdr[8] = 8;
-        ihdr[9] = 0;
-        ihdr[10] = 0;
-        ihdr[11] = 0;
-        ihdr[12] = 0;
-        const compressed = new Uint8Array(await new Response(new Blob([rawScanlines])
-            .stream()
-            .pipeThrough(new CompressionStream("deflate"))).arrayBuffer());
-        return concatUint8Arrays([
-            PNG_SIGNATURE,
-            createPngChunk("IHDR", ihdr),
-            createPngChunk("IDAT", compressed),
-            createPngChunk("IEND", new Uint8Array(0)),
-        ]);
-    }
-    function createFilterlessPngScanlines(options) {
-        const rowStride = options.width + 1;
-        const scanlines = new Uint8Array(rowStride * options.height);
-        for (let y = 0; y < options.height; y += 1) {
-            const sourceOffset = y * options.width;
-            const targetOffset = y * rowStride;
-            scanlines[targetOffset] = 0;
-            scanlines.set(options.pixels.subarray(sourceOffset, sourceOffset + options.width), targetOffset + 1);
-        }
-        return scanlines;
-    }
-    function createPngChunk(type, data) {
-        const typeBytes = new TextEncoder().encode(type);
-        const chunk = new Uint8Array(12 + data.length);
-        const view = new DataView(chunk.buffer);
-        view.setUint32(0, data.length);
-        chunk.set(typeBytes, 4);
-        chunk.set(data, 8);
-        view.setUint32(8 + data.length, crc32(concatUint8Arrays([typeBytes, data])));
-        return chunk;
-    }
-    const crc32Table = createCrc32Table();
-    function createCrc32Table() {
-        const table = new Uint32Array(256);
-        for (let index = 0; index < table.length; index += 1) {
-            let value = index;
-            for (let bit = 0; bit < 8; bit += 1) {
-                value = value & 1 ? 0xedb88320 ^ (value >>> 1) : value >>> 1;
-            }
-            table[index] = value >>> 0;
-        }
-        return table;
-    }
-    function crc32(bytes) {
-        let crc = 0xffffffff;
-        for (const byte of bytes) {
-            crc = crc32Table[(crc ^ byte) & 0xff] ^ (crc >>> 8);
-        }
-        return (crc ^ 0xffffffff) >>> 0;
-    }
-    function concatUint8Arrays(chunks) {
-        const totalLength = chunks.reduce((total, chunk) => total + chunk.length, 0);
-        const result = new Uint8Array(totalLength);
-        let offset = 0;
-        for (const chunk of chunks) {
-            result.set(chunk, offset);
-            offset += chunk.length;
-        }
-        return result;
-    }
 
     var PreparedMaskFrameKind;
     (function (PreparedMaskFrameKind) {
-        PreparedMaskFrameKind["PngIdMask"] = "pngIdMask";
+        PreparedMaskFrameKind["IdMask"] = "idMask";
         PreparedMaskFrameKind["RgbaImage"] = "rgbaImage";
     })(PreparedMaskFrameKind || (PreparedMaskFrameKind = {}));
+    /**
+     * How an id raster is laid out for the texture it is uploaded into. WebGPU
+     * takes any bytesPerRow, so ids go up one byte per pixel. WebGL aligns every
+     * uploaded row to four bytes and rejects a single-channel upload whose width
+     * is not a multiple of four, which is what the four-channel layout is for.
+     */
+    var IdMaskTextureFormat;
+    (function (IdMaskTextureFormat) {
+        IdMaskTextureFormat["R8"] = "r8unorm";
+        IdMaskTextureFormat["Rgba8"] = "rgba8unorm";
+    })(IdMaskTextureFormat || (IdMaskTextureFormat = {}));
 
     var MaskPreparationWorkerMessageType;
     (function (MaskPreparationWorkerMessageType) {
@@ -779,23 +1005,40 @@
         if (message.type !== MaskPreparationWorkerMessageType.Prepare) {
             return;
         }
-        void prepareMaskFrame(message);
+        prepareMaskFrame(message);
     });
-    async function prepareMaskFrame(message) {
+    function prepareMaskFrame(message) {
         try {
-            const pngIdMaskFrame = await createPngIdMaskWorkerResponse(message);
-            if (pngIdMaskFrame) {
-                workerScope.postMessage(pngIdMaskFrame, [
-                    pngIdMaskFrame.imageBitmap,
-                    pngIdMaskFrame.png.buffer,
-                    pngIdMaskFrame.fillPalette.buffer,
-                    pngIdMaskFrame.strokePalette.buffer,
-                    pngIdMaskFrame.strokeWidths.buffer,
+            const regionMaskCoverage = createRegionMaskCoverageFrame(message.job.instructions);
+            const coverageTransfers = getRegionMaskCoverageTransfers(regionMaskCoverage);
+            const idMaskFrame = createIdMaskRasterFrame(message.job.instructions, message.job.maxRasterWidth);
+            if (idMaskFrame) {
+                workerScope.postMessage({
+                    artifactKind: PreparedMaskFrameKind.IdMask,
+                    fillPalette: idMaskFrame.fillPalette,
+                    hasStroke: idMaskFrame.hasStroke,
+                    height: idMaskFrame.height,
+                    key: message.job.key,
+                    maxStrokeWidth: idMaskFrame.maxStrokeWidth,
+                    raster: idMaskFrame.data,
+                    regionMaskCoverage,
+                    requestId: message.requestId,
+                    sourceWidth: idMaskFrame.sourceWidth,
+                    strokePalette: idMaskFrame.strokePalette,
+                    strokeWidths: idMaskFrame.strokeWidths,
+                    type: MaskPreparationWorkerMessageType.Complete,
+                    width: idMaskFrame.width,
+                }, [
+                    idMaskFrame.data.buffer,
+                    idMaskFrame.fillPalette.buffer,
+                    idMaskFrame.strokePalette.buffer,
+                    idMaskFrame.strokeWidths.buffer,
+                    ...coverageTransfers,
                 ]);
                 return;
             }
             const compositedFrame = compositeMaskFrame(message.job.instructions);
-            if (!compositedFrame) {
+            if (!compositedFrame && !regionMaskCoverage) {
                 workerScope.postMessage({
                     key: message.job.key,
                     requestId: message.requestId,
@@ -803,26 +1046,30 @@
                 });
                 return;
             }
-            const imageData = new ImageData(compositedFrame.data, compositedFrame.width, compositedFrame.height);
+            const preparedPixels = compositedFrame ?? createTransparentCoverageCarrier();
+            const imageData = new ImageData(preparedPixels.data, preparedPixels.width, preparedPixels.height);
             const imageBitmap = createImageBitmapFromImageData(imageData);
-            const idMaskData = createMaskIdFrame(message.job.instructions)?.data;
+            const idMaskPlane = createIdMaskPlane(message.job.instructions, message.job.maxRasterWidth);
+            const idMaskTransfers = idMaskPlane ? [idMaskPlane.data.buffer] : [];
             if (imageBitmap) {
                 workerScope.postMessage({
+                    idMaskPlane,
                     imageBitmap,
-                    idMaskData,
                     key: message.job.key,
+                    regionMaskCoverage,
                     requestId: message.requestId,
                     type: MaskPreparationWorkerMessageType.Complete,
-                }, [...(idMaskData ? [idMaskData.buffer] : []), imageBitmap]);
+                }, [imageBitmap, ...idMaskTransfers, ...coverageTransfers]);
                 return;
             }
             workerScope.postMessage({
-                idMaskData,
+                idMaskPlane,
                 imageData,
                 key: message.job.key,
+                regionMaskCoverage,
                 requestId: message.requestId,
                 type: MaskPreparationWorkerMessageType.Complete,
-            }, [...(idMaskData ? [idMaskData.buffer] : []), imageData.data.buffer]);
+            }, [imageData.data.buffer, ...idMaskTransfers, ...coverageTransfers]);
         }
         catch (error) {
             workerScope.postMessage({
@@ -835,43 +1082,20 @@
             });
         }
     }
-    async function createPngIdMaskWorkerResponse(message) {
-        if (typeof Blob === "undefined" ||
-            typeof createImageBitmap === "undefined" ||
-            typeof CompressionStream === "undefined") {
-            return undefined;
-        }
-        let frame;
-        try {
-            frame = await createPngIdMaskFrame(message.job.instructions);
-        }
-        catch {
-            return undefined;
-        }
-        if (!frame) {
-            return undefined;
-        }
-        let imageBitmap;
-        try {
-            imageBitmap = await createImageBitmap(new Blob([frame.png], { type: "image/png" }));
-        }
-        catch {
-            return undefined;
-        }
+    /**
+     * A frame that carries only region coverage has nothing to composite, and the
+     * RGBA branch still has to produce an artifact for the coverage to ride on.
+     */
+    function createTransparentCoverageCarrier() {
         return {
-            artifactKind: PreparedMaskFrameKind.PngIdMask,
-            fillPalette: frame.fillPalette,
-            hasStroke: frame.hasStroke,
-            imageBitmap,
-            key: message.job.key,
-            maxStrokeWidth: frame.maxStrokeWidth,
-            png: frame.png,
-            requestId: message.requestId,
-            strokePalette: frame.strokePalette,
-            strokeWidths: frame.strokeWidths,
-            type: MaskPreparationWorkerMessageType.Complete,
+            data: new Uint8ClampedArray(new ArrayBuffer(4)),
+            height: 1,
+            width: 1,
         };
     }
+    function getRegionMaskCoverageTransfers(coverage) {
+        return coverage?.entries.map(({ data }) => data.buffer) ?? [];
+    }
     function createImageBitmapFromImageData(imageData) {
         if (typeof OffscreenCanvas === "undefined") {
             return null;