jsbeeb 1.15.0 → 1.17.0

package/README.md

@@ -240,10 +240,16 @@ sudo rpm -i out/dist/jsbeeb-1.0.1.x86_64.rpm
 ## URL Parameters
 
 - `autoboot` - fakes a shift break
-- `disc1=XXX` - loads disc XXX (from the `discs/` directory) into drive 1
-- `disc2=XXX` - as above
+- `disc1=XXX` - loads disc XXX (from the `discs/` directory) into drive 0
+- `disc2=XXX` - as above, into drive 1
 - `disc1=local:YYY` - creates a local disk YYY which will be kept in browser local storage
 - `disc1=sth:ZZZ` - loads disc ZZZ from the Stairway to Hell archive
+- `drive0Tracks=40` / `drive0Tracks=80` - fixes drive 0's 40/80 track switch, as the switch on the back of a real
+  drive did. `drive1Tracks` does the same for drive 1. Left alone, each drive follows whatever disc is loaded into it:
+  a 40 track image is laid out the way a 40 track drive wrote it, on every other track of the surface, and the drive
+  double steps to read it. `40` reads an 80 track disc through a double stepping head, which is as much of a mess as it
+  was in 1985. `80` turns all of this off for that drive, loading every image the way jsbeeb did before it could tell
+  them apart. [docs/disc-track-layouts.md](docs/disc-track-layouts.md) explains how an image's layout is worked out.
 - `tape=XXX` - loads tape XXX (from the `tapes/` directory)
 - `tape=sth:ZZZ` - loads tape ZZZ from the Stairway to Hell archive
 - `KEY.X=Y` - makes host key `X` press BBC key `Y`, e.g. `KEY.ENTER=COPY`. See

package/package.json

@@ -7,7 +7,7 @@
   "name": "jsbeeb",
   "description": "Emulate a BBC Micro",
   "repository": "git@github.com:mattgodbolt/jsbeeb.git",
-  "version": "1.15.0",
+  "version": "1.17.0",
   "//engines": "If you change the version of Node, it must also be updated at the top of the Dockerfile.",
   "engines": {
     "node": ">=24.15.0"
@@ -44,6 +44,7 @@
     "jsdom": "^30.0.1",
     "lint-staged": "^17.1.1",
     "npm-run-all2": "^9.0.2",
+    "papaparse": "^5.5.4",
     "pixelmatch": "^7.2.0",
     "prettier": "^3.9.6",
     "vite": "^8.1.5",
@@ -54,10 +55,6 @@
     "electron-builder": "^26.15.3",
     "electron-store": "^11.0.2"
   },
-  "//overrides": "brace-expansion forced to the patched version for GHSA-mh99-v99m-4gvg; the electron-builder dependency chain still pins vulnerable versions. Remove once `npm audit` is clean without it.",
-  "overrides": {
-    "brace-expansion": "^5.0.8"
-  },
   "license": "GPL-3.0-or-later",
   "build": {
     "appId": "org.godbolt.bbc",
@@ -99,15 +96,27 @@
     "test:unit": "vitest run --silent=true tests/unit",
     "test:integration": "vitest run --silent=true tests/integration",
     "test:cpu": "node tests/test-suite.js",
+    "test:shader": "vitest run --silent=true tests/shader",
     "coverage:unit": "vitest run tests/unit --coverage",
     "coverage:all-tests": "vitest run --coverage",
     "benchmark": "node src/app-bench.js",
+    "mirror-sth": "node tools/mirror-sth.js --out .sth-mirror",
+    "mirror-sth:check": "node tools/mirror-sth.js --index-only",
+    "mirror-sth:upload": "npm-run-all mirror-sth:upload:*",
+    "mirror-sth:upload:blobs": "aws s3 sync .sth-mirror s3://bbc.xania.org/archive/sth/ --no-progress --exclude '*manifest.json' --exclude 'meta/*' --cache-control 'public, max-age=31536000, immutable'",
+    "mirror-sth:upload:index": "aws s3 sync .sth-mirror s3://bbc.xania.org/archive/sth/ --no-progress --exclude '*' --include '*manifest.json' --include 'meta/*' --cache-control 'public, max-age=300'",
+    "mirror-bbcdiscs": "node tools/mirror-bbcdiscs.js --csv .bbcdiscs-sheet.csv --out .bbcdiscs-mirror",
+    "mirror-bbcdiscs:check": "node tools/mirror-bbcdiscs.js --csv .bbcdiscs-sheet.csv --check-only",
+    "mirror-bbcdiscs:seed": "aws s3 sync s3://bbc.xania.org/archive/bbcdiscs/hfe/ .bbcdiscs-mirror/hfe/ --no-progress",
+    "mirror-bbcdiscs:upload": "npm-run-all mirror-bbcdiscs:upload:*",
+    "mirror-bbcdiscs:upload:blobs": "aws s3 sync .bbcdiscs-mirror/hfe s3://bbc.xania.org/archive/bbcdiscs/hfe/ --no-progress --exclude 'manifest.json' --delete --content-encoding br --cache-control 'public, max-age=31536000, immutable'",
+    "mirror-bbcdiscs:upload:index": "aws s3 cp .bbcdiscs-mirror/hfe/manifest.json s3://bbc.xania.org/archive/bbcdiscs/hfe/manifest.json --cache-control 'public, max-age=300' && aws s3 cp .bbcdiscs-mirror/manifest.json s3://bbc.xania.org/archive/bbcdiscs/manifest.json --cache-control 'public, max-age=300'",
     "electron": "npm run build && ELECTRON_DISABLE_SANDBOX=1 electron .",
     "electron:build": "electron-builder"
   },
   "lint-staged": {
     "*.js": [
-      "vitest related --run --exclude tests/integration --no-file-parallelism",
+      "vitest related --run --exclude tests/integration --exclude tests/shader --no-file-parallelism",
       "eslint --cache --fix",
       "prettier --write"
     ],

package/src/6502.js

@@ -213,6 +213,9 @@ class Base6502 {
         if (this._nmiLevel && !prevLevel) this._nmiEdge = true;
     }
 
+    /** Called as the NMI vector is taken, for devices that withdraw their request at that point. */
+    nmiAcknowledged() {}
+
     polltime() {
         throw new Error("Must be overridden");
     }
@@ -239,6 +242,7 @@ class Base6502 {
         if ((this.model.nmos || isIrq) && this._nmiEdge) {
             vector = 0xfffa;
             this._nmiEdge = false;
+            this.nmiAcknowledged();
         }
         this.takeInt = false;
         this.pc = this.readmem(vector) | (this.readmem(vector + 1) << 8);
@@ -451,6 +455,10 @@ class Tube6502 extends Base6502 {
         return this.memory[offset & 0xffff];
     }
 
+    nmiAcknowledged() {
+        this.tube.acknowledgeNmi();
+    }
+
     writemem(addr, b) {
         if ((addr & 0xfff8) === 0xfef8) {
             return this.tube.parasiteWrite(addr, b);
@@ -666,7 +674,7 @@ export class Cpu6502 extends Base6502 {
         this.resetLine = true;
         this.cpuMultiplier = this.config.cpuMultiplier;
         this.videoCyclesBatch = this.config.videoCyclesBatch | 0;
-        this.peripheralCyclesPerSecond = 2 * 1000 * 1000;
+        this.peripheralCyclesPerSecond = model.cyclesPerSecond;
         this.hasTube = !!this.config.tube;
         this.hasMusic5000 = !!this.config.hasMusic5000;
         this.hasTeletextAdaptor = !!this.config.hasTeletextAdaptor;
@@ -1361,7 +1369,7 @@ export class Cpu6502 extends Base6502 {
         this.fdc.powerOnReset();
         this.adconverter.reset();
 
-        this.touchScreen = new TouchScreen(this.scheduler);
+        this.touchScreen = new TouchScreen(this.scheduler, this.model.cyclesPerSecond);
         if (this.econet) this.filestore = new Filestore(this, this.econet);
     }
 
@@ -1478,9 +1486,10 @@ export class Cpu6502 extends Base6502 {
         // that from both, to keep the domain low (while accumulating seconds). Take care to preserve the bottom
         // bit though; as that encodes whether we're on an even or odd bus cycle.
         const smaller = Math.min(this.targetCycles, this.currentCycles) & 0xfffffffe;
-        if (smaller >= 2 * 1000 * 1000) {
-            this.targetCycles -= 2 * 1000 * 1000;
-            this.currentCycles -= 2 * 1000 * 1000;
+        const cyclesPerSecond = this.model.cyclesPerSecond;
+        if (smaller >= cyclesPerSecond) {
+            this.targetCycles -= cyclesPerSecond;
+            this.currentCycles -= cyclesPerSecond;
             this.cycleSeconds++;
         }
         // Any tracing or debugging means we need to run the potentially slower version: the debug read or
@@ -1614,8 +1623,6 @@ export class AtomCpu6502 extends Cpu6502 {
             this.ramRomOs = expanded;
         }
 
-        // Atom runs at 1 MHz
-        this.peripheralCyclesPerSecond = 1 * 1000 * 1000;
         // reset() and debugger.setCpu() are called by initialise() after loadOs().
     }
 

package/src/6847.js

@@ -1,6 +1,7 @@
 "use strict";
 import * as utils from "./utils.js";
 import * as fontData from "./6847_fontdata.js";
+import { encodeLineGrid } from "./video-filters/pixel-grid.js";
 
 const VDISPENABLE = 1 << 0,
     HDISPENABLE = 1 << 1,
@@ -111,6 +112,11 @@ only 1 bit is used of SG6 - to get yellow/red, cyan/orange
 // constant for the graphics mode
 const MODE_AG = 0x10; // graphics mode
 
+// The MC6847 datasheet specifies 3.579545 MHz, but 3.638004 is used here as an
+// empirical correction to align VSync/interrupt timing with the CPU clock.
+// TODO: revisit once full integration is testable.
+const VdgClockMhz = 3.638004;
+
 export class Video6847 {
     constructor(video) {
         this.video = video;
@@ -175,6 +181,7 @@ export class Video6847 {
         this.bitmapPxPerPixel = 2; // each pixel is 2 bitmap pixels wide and high
         this.pixelsPerBit = this.bitmapPxPerPixel;
         this.bpp = 1;
+        this.updateLineGrid();
 
         this.cpuAddr = 0;
         this.dispEnabled = 0;
@@ -225,6 +232,9 @@ export class Video6847 {
     reset(cpu, ppia) {
         this.cpu = cpu;
         this.ppia = ppia;
+        // polltime() is handed CPU cycles, so how far the VDG advances per
+        // cycle depends on how fast the CPU it's attached to runs.
+        this.vdgCyclesPerCpuCycle = cpu ? VdgClockMhz / cpu.model.clockMhz : 0;
     }
 
     // USE PAINT from VIDEO
@@ -315,6 +325,7 @@ export class Video6847 {
         this.pixelsPerBit = this.bitmapPxPerPixel * this.modes[mode][1];
         let linesPerRow = this.modes[mode][2]; // move to reg9
         this.bpp = this.modes[mode][3];
+        this.updateLineGrid();
 
         this.charLinesreg9 = linesPerRow - 1; //2  - scanlines per char
 
@@ -344,11 +355,7 @@ export class Video6847 {
         // it doesn't draw the whole frame.  It regularly gives control back to the CPU.
 
         const vdgcharclock = this.pixelsPerChar / 2; // 4 or 8
-        // The MC6847 datasheet specifies 3.579545 MHz, but 3.638004 is used here
-        // as an empirical correction to align VSync/interrupt timing with the Atom's
-        // 1 MHz CPU clock. TODO: revisit once full integration is testable.
-        const vdgclock = 3.638004;
-        this.vdg_cycles += clocks * vdgclock;
+        this.vdg_cycles += clocks * this.vdgCyclesPerCpuCycle;
 
         const vdgframelines = 262; //  312 PAL (but no pal on standard atom)  262; // NTSC
         const vdglinetime = 228; // vdg cycles to do a line; not 227.5
@@ -491,9 +498,9 @@ export class Video6847 {
                         {
                             // TODO: Add in the INTEXT modifiers to mode (if necessary)
                             // blit into the fb32 buffer which is painted by VIDEO
-                            if ((mode & MODE_AG) === 0)
-                                // MODE_AG - bit 4; 0x10 is the AG bit
-                                this.blitChar(this.video.fb32, dat, offset, this.pixelsPerChar, css);
+                            const textMode = (mode & MODE_AG) === 0; // 0x10 is the AG bit
+                            this.recordLineGrid(textMode);
+                            if (textMode) this.blitChar(this.video.fb32, dat, offset, this.pixelsPerChar, css);
                             else this.blitPixels(this.video.fb32, dat, offset, css);
                         }
                     }
@@ -619,6 +626,41 @@ export class Video6847 {
         }
     }
 
+    /**
+     * Precompute this mode's grid descriptors, one per blitter.
+     *
+     * The two blitters derive their widths differently and cannot be unified:
+     * `blitChar` splits the character's texels across eight glyph bits, while
+     * `blitPixels` takes the bit width from the mode table — which for text
+     * mode holds -1, since it does not blit pixels at all.
+     *
+     * `pixelsPerBit` is right for graphics at 2bpp as well as 1bpp: the blitter
+     * steps its bit groups by `pixelsPerBit / bpp`, but reads the colour with
+     * `j & 0xe`, so pairs of groups share one and each pixel is twice as wide.
+     */
+    updateLineGrid() {
+        // Every 6847 blitter writes each pixel row into two framebuffer lines.
+        // Text mode's entry is only reachable through blitChar, which is just
+        // as well: the mode table holds -1 for it and would not encode.
+        this.lineGridText = encodeLineGrid((this.pixelsPerChar * this.bitmapPxPerPixel) / 8, true);
+        this.lineGridGraphics = this.pixelsPerBit > 0 ? encodeLineGrid(this.pixelsPerBit, true) : this.lineGridText;
+    }
+
+    /**
+     * Note the logical pixel size of the two rows about to be written, so
+     * display filters can see the picture as pixels rather than as raster
+     * samples (see video-filters/pixel-grid.js). Only the picture records a
+     * grid: the border is a solid colour, and letting it write here would
+     * leave the row describing the border rather than the picture on it.
+     *
+     * @param {boolean} textMode whether the character blitter is about to run
+     */
+    recordLineGrid(textMode) {
+        const grid = textMode ? this.lineGridText : this.lineGridGraphics;
+        this.video.lineGrid[this.bitmapY] = grid;
+        this.video.lineGrid[this.bitmapY + 1] = grid;
+    }
+
     blitChar(buf, data, destOffset, numPixels, css) {
         const scanline = this.scanlineCounter;
         const chr = data & 0x7f;

package/src/acia.js

@@ -265,8 +265,9 @@ export class Acia {
         }
     }
 
+    // Byte times are held in CPU cycles because that's what the scheduler counts.
     secondsToCycles(sec) {
-        return Math.floor(2 * 1000 * 1000 * sec) | 0;
+        return Math.floor(this.cpu.model.cyclesPerSecond * sec) | 0;
     }
 
     numBitsPerByte() {

package/src/app/app.js

@@ -172,6 +172,10 @@ const template = [
                 label: "Browse STH Disc Archive...",
                 click: showModal("sth", { sthType: "discs" }),
             },
+            {
+                label: "Browse HFE Disc Archive...",
+                click: showModal("hfe"),
+            },
             {
                 label: "Browse Example Discs...",
                 click: showModal("discs"),

package/src/bbcdiscs.js

@@ -0,0 +1,84 @@
+"use strict";
+
+const mirrorBase = "https://bbc.xania.org/archive/bbcdiscs";
+
+// Numeric so a "Disc 2" would sort before a "Disc 10" rather than after it,
+// and case-insensitive so a lower-cased title stays with its neighbours.
+const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
+
+/**
+ * Order the picker by what someone is looking for, which is the disc's name.
+ * The catalogue arrives grouped by publisher, so it has to be sorted here; the
+ * remaining keys only settle ties, keeping a title's variants together and in
+ * a stable order rather than the one the catalogue happens to list them in.
+ */
+export const byTitle = (a, b) =>
+    collator.compare(a.title || a.path, b.title || b.path) ||
+    collator.compare(a.publisher || "", b.publisher || "") ||
+    collator.compare(a.disc || "", b.disc || "") ||
+    collator.compare(a.variant || "", b.variant || "");
+
+/**
+ * How a disc reads in the picker. Several fingerprinted variants of one title
+ * sit next to each other, so the title alone doesn't identify a disc.
+ *
+ * @param {object} file manifest entry
+ * @returns {{title: string, publisher: string, detail: string}}
+ */
+export function describe(file) {
+    const detail = [file.disc, file.tracks?.join(", "), file.variant && `v${file.variant}`].filter(Boolean);
+    return {
+        title: file.title || file.path,
+        publisher: file.publisher ?? "",
+        detail: detail.join(" · "),
+    };
+}
+
+export class BbcDiscArchive {
+    /** @param {string} [baseUrl] where the mirror lives, to point at a test prefix */
+    constructor(onStart, onCat, onError, baseUrl = mirrorBase) {
+        this._baseUrl = `${baseUrl}/hfe/`;
+        this._catalogue = [];
+        this._loaded = false;
+        this._onStart = onStart;
+        this._onCat = onCat;
+        this._onError = onError;
+    }
+
+    async populate() {
+        this._onStart();
+        // Tracked separately from the catalogue: an archive can legitimately be
+        // empty, and an empty array would mean "fetch it again" every time.
+        if (!this._loaded) {
+            try {
+                const response = await fetch(`${this._baseUrl}manifest.json`);
+                if (!response.ok) throw new Error(`Network response was not ok (${response.status})`);
+                const data = await response.json();
+                if (!Array.isArray(data?.files)) throw new Error("Invalid manifest: missing files array");
+                this._catalogue = [...data.files].sort(byTitle);
+                this._loaded = true;
+            } catch (error) {
+                console.error("Failed to fetch HFE archive catalogue:", error);
+                if (this._onError) this._onError();
+                return;
+            }
+        }
+        if (this._onCat) this._onCat(this._catalogue);
+    }
+
+    /**
+     * Nothing to unzip, unlike sth.js: blobs are stored compressed and served
+     * with `Content-Encoding: br`, which the browser has undone by the time
+     * this resolves.
+     *
+     * @param {string} path a manifest entry's `path`
+     * @returns {Promise<Uint8Array>} the HFE image
+     */
+    async fetch(path) {
+        const url = this._baseUrl + encodeURIComponent(path);
+        console.log("Loading HFE from " + url);
+        const response = await fetch(url);
+        if (!response.ok) throw new Error(`Network response was not ok (${response.status})`);
+        return new Uint8Array(await response.arrayBuffer());
+    }
+}

package/src/canvas.js

@@ -2,10 +2,12 @@
 import webglDebug from "./lib/webgl-debug.js";
 import { PALCompositeFilter } from "./video-filters/pal-composite.js";
 import { PassthroughFilter } from "./video-filters/passthrough-filter.js";
+import { XbrFilter } from "./video-filters/xbr-filter.js";
 
 const DISPLAY_MODE_FILTERS = {
     pal: PALCompositeFilter,
     rgb: PassthroughFilter,
+    xbr: XbrFilter,
 };
 
 export function getFilterForMode(mode) {
@@ -13,8 +15,9 @@ export function getFilterForMode(mode) {
 }
 
 export class Canvas {
-    isWebGl() {
-        return false;
+    /** The 2D canvas draws the framebuffer as-is, which is what this filter is. */
+    get filterClass() {
+        return PassthroughFilter;
     }
 
     constructor(canvas) {
@@ -27,24 +30,29 @@ export class Canvas {
         this.backBuffer.height = 625;
         this.backCtx = this.backBuffer.getContext("2d", { alpha: false });
         this.imageData = this.backCtx.createImageData(this.backBuffer.width, this.backBuffer.height);
-        this.canvasWidth = canvas.width;
-        this.canvasHeight = canvas.height;
+        this.canvas = canvas;
 
         this.fb32 = new Uint32Array(this.imageData.data.buffer);
     }
-    paint(minx, miny, maxx, maxy, _frameCount) {
+
+    /** Nothing to release: the 2D context owns no objects of ours. */
+    dispose() {}
+
+    paint(minx, miny, maxx, maxy, _frame) {
         const width = maxx - minx;
         const height = maxy - miny;
         this.backCtx.putImageData(this.imageData, 0, 0, minx, miny, width, height);
-        this.ctx.drawImage(this.backBuffer, minx, miny, width, height, 0, 0, this.canvasWidth, this.canvasHeight);
+        // Read the size each time: it can change when the window is resized.
+        this.ctx.drawImage(this.backBuffer, minx, miny, width, height, 0, 0, this.canvas.width, this.canvas.height);
     }
 }
 
 const width = 1024;
 const height = 1024;
 export class GlCanvas {
-    isWebGl() {
-        return true;
+    /** The filter actually built, which may not be the one that was asked for. */
+    get filterClass() {
+        return this.filter.constructor;
     }
 
     constructor(canvas, filterClass) {
@@ -74,6 +82,10 @@ export class GlCanvas {
         const program = this.filter.program;
         checkedGl.useProgram(program);
 
+        // Filters that pick their own samples want the texels they asked for,
+        // not a hardware blend of the ones either side.
+        const sampling = filterClass.getDisplayConfig().nearestSampling ? checkedGl.NEAREST : checkedGl.LINEAR;
+
         this.fb8 = new Uint8Array(width * height * 4);
         this.fb32 = new Uint32Array(this.fb8.buffer);
         this.texture = checkedGl.createTexture();
@@ -81,8 +93,8 @@ export class GlCanvas {
         checkedGl.pixelStorei(checkedGl.UNPACK_ALIGNMENT, 4);
         checkedGl.texParameteri(checkedGl.TEXTURE_2D, checkedGl.TEXTURE_WRAP_S, checkedGl.CLAMP_TO_EDGE);
         checkedGl.texParameteri(checkedGl.TEXTURE_2D, checkedGl.TEXTURE_WRAP_T, checkedGl.CLAMP_TO_EDGE);
-        checkedGl.texParameteri(checkedGl.TEXTURE_2D, checkedGl.TEXTURE_MAG_FILTER, checkedGl.LINEAR);
-        checkedGl.texParameteri(checkedGl.TEXTURE_2D, checkedGl.TEXTURE_MIN_FILTER, checkedGl.LINEAR);
+        checkedGl.texParameteri(checkedGl.TEXTURE_2D, checkedGl.TEXTURE_MAG_FILTER, sampling);
+        checkedGl.texParameteri(checkedGl.TEXTURE_2D, checkedGl.TEXTURE_MIN_FILTER, sampling);
         checkedGl.texImage2D(
             checkedGl.TEXTURE_2D,
             0,
@@ -98,8 +110,8 @@ export class GlCanvas {
 
         const vertexPositionAttrLoc = checkedGl.getAttribLocation(program, "pos");
         checkedGl.enableVertexAttribArray(vertexPositionAttrLoc);
-        const vertexPositionBuffer = checkedGl.createBuffer();
-        checkedGl.bindBuffer(checkedGl.ARRAY_BUFFER, vertexPositionBuffer);
+        this.vertexPositionBuffer = checkedGl.createBuffer();
+        checkedGl.bindBuffer(checkedGl.ARRAY_BUFFER, this.vertexPositionBuffer);
         checkedGl.bufferData(checkedGl.ARRAY_BUFFER, new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]), checkedGl.STATIC_DRAW);
         checkedGl.vertexAttribPointer(vertexPositionAttrLoc, 2, checkedGl.FLOAT, false, 0, 0);
 
@@ -112,14 +124,42 @@ export class GlCanvas {
         checkedGl.activeTexture(gl.TEXTURE0);
         checkedGl.bindTexture(gl.TEXTURE_2D, this.texture);
 
+        this.checkedGl = checkedGl;
+        this.viewportWidth = this.viewportHeight = 0;
         this.uvFloatArray = new Float32Array(8);
         this.lastExtent = {};
 
         console.log("GL Canvas set up");
     }
 
-    paint(minx, miny, maxx, maxy, frameCount) {
+    /**
+     * Release the GL objects this canvas owns.
+     *
+     * Switching display mode builds a new canvas over the same element, and a
+     * canvas only ever hands out one WebGL context — so the new one inherits
+     * the old one's context and the old one's objects stay resident unless
+     * they are deleted here. That is a megabytes-per-switch leak: the
+     * framebuffer texture alone is 1024x1024 RGBA.
+     */
+    dispose() {
+        const gl = this.checkedGl;
+        this.filter.dispose();
+        gl.deleteTexture(this.texture);
+        gl.deleteBuffer(this.vertexPositionBuffer);
+        gl.deleteBuffer(this.uvBuffer);
+        this.texture = this.vertexPositionBuffer = this.uvBuffer = null;
+    }
+
+    paint(minx, miny, maxx, maxy, frame) {
         const gl = this.gl;
+        // The drawing buffer can be resized under us — modes that scale to the
+        // display do it on every window resize — and the viewport does not
+        // follow it.
+        if (gl.drawingBufferWidth !== this.viewportWidth || gl.drawingBufferHeight !== this.viewportHeight) {
+            this.viewportWidth = gl.drawingBufferWidth;
+            this.viewportHeight = gl.drawingBufferHeight;
+            gl.viewport(0, 0, this.viewportWidth, this.viewportHeight);
+        }
         // We can't specify a stride for the source, so have to use the full width.
         gl.texSubImage2D(
             gl.TEXTURE_2D,
@@ -157,21 +197,47 @@ export class GlCanvas {
             gl.bufferData(gl.ARRAY_BUFFER, this.uvFloatArray, gl.DYNAMIC_DRAW);
         }
 
-        this.filter.setUniforms({ width, height, frameCount });
+        this.filter.setUniforms({
+            width,
+            height,
+            frameCount: frame.frameCount,
+            lineGrid: frame.lineGrid,
+            // How much of the framebuffer each output pixel covers, which sets
+            // how wide an edge-smoothing ramp should be. `extent` holds texel
+            // counts; the scaling into texture coordinates above applies only
+            // to the local copies that go into the UV buffer.
+            texelsPerOutputPixel: (extent.maxx - extent.minx) / gl.drawingBufferWidth,
+        });
 
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
     }
 }
 
+function fellBackBecause(canvas, reason) {
+    canvas.fallbackReason = reason;
+    return canvas;
+}
+
 export function bestCanvas(canvas, filterClass) {
+    let reason;
     try {
         return new GlCanvas(canvas, filterClass);
     } catch (e) {
-        console.log("Unable to use OpenGL: " + e);
-        if (filterClass.requiresGl()) {
-            const config = filterClass.getDisplayConfig();
-            console.warn(`${config.name} requires WebGL. Falling back to standard 2D canvas.`);
+        // Either WebGL is unavailable or this particular filter declined it.
+        reason = e?.message ?? e;
+        console.log(`Unable to use ${filterClass.getDisplayConfig().name} with WebGL: ${e}`);
+    }
+
+    // A canvas that has handed out a WebGL context can never hand out a 2D one,
+    // so if the failure came from the filter rather than from WebGL itself, the
+    // 2D fallback below would throw and take the emulator with it.
+    if (filterClass !== PassthroughFilter) {
+        try {
+            return fellBackBecause(new GlCanvas(canvas, PassthroughFilter), reason);
+        } catch (e) {
+            console.log("Unable to fall back to the passthrough filter: " + e);
         }
     }
-    return new Canvas(canvas);
+
+    return fellBackBecause(new Canvas(canvas), reason);
 }