@vector-display/beam-fx 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rick Segrest
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,53 @@
+# @vector-display/beam-fx
+
+Vector-monitor effects for [**vector-display**](https://www.npmjs.com/package/@vector-display/core): phosphor trails that fade over time, bloom, and flicker, layered on top of [`@vector-display/webgl`](https://www.npmjs.com/package/@vector-display/webgl).
+
+> **Status:** early (0.x). The API may change between minor versions.
+
+## Install
+
+```sh
+npm install @vector-display/core @vector-display/webgl @vector-display/beam-fx
+```
+
+ES modules only, with TypeScript declarations. Requires a browser with WebGL2.
+
+## Usage
+
+```ts
+import { WebGLVectorRenderer } from "@vector-display/webgl";
+import { PhosphorPipeline } from "@vector-display/beam-fx";
+
+const renderer = WebGLVectorRenderer.fromCanvas(canvas, { width: 1024, height: 768 });
+const phosphor = new PhosphorPipeline(renderer, { persistenceHalfLifeMilliseconds: 30, bloomStrength: 0.25 });
+
+let previousTime = performance.now();
+function drawFrame(time: number) {
+  // ...fill displayList for this frame...
+  phosphor.renderFrame(displayList, time - previousTime);
+  previousTime = time;
+  requestAnimationFrame(drawFrame);
+}
+requestAnimationFrame(drawFrame);
+```
+
+`renderFrame` replaces `renderer.clear()` + `renderer.drawDisplayList()`: it draws the beams, fades the previous frame, adds bloom, and writes the result to the canvas.
+
+## Settings
+
+Pass to the constructor or to `phosphor.setSettings({...})` at any time:
+
+| Setting | Default | Effect |
+| --- | --- | --- |
+| `persistenceHalfLifeMilliseconds` | 40 | How long trails take to fade to half brightness |
+| `bloomStrength` / `bloomBlurIterations` | 1.2 / 2 | Wide glow around bright lines (lower values look crisper) |
+| `exposure` | 1.6 | Highlight rolloff |
+| `flickerAmount` / `flickerFrequencyHz` | 0.08 / 15 | Smooth random brightness dips: depth (0–1) and how often the level changes |
+
+Effects are time-based, so they look the same at 60 Hz and 120 Hz. Content that doesn't move keeps its true brightness; only movement leaves trails.
+
+**Photosensitivity:** strong full-screen flicker around 3–30 Hz can trigger photosensitive seizures. Keep `flickerAmount` modest, or let users turn flicker off.
+
+## License
+
+MIT © Rick Segrest

package/dist/FlickerGenerator.d.ts

@@ -0,0 +1,10 @@
+export declare class FlickerGenerator {
+    private readonly randomSource;
+    private millisecondsIntoPeriod;
+    private startLevel;
+    private targetLevel;
+    constructor(randomSource?: () => number);
+    advance(elapsedMilliseconds: number, frequencyHz: number): number;
+}
+export default FlickerGenerator;
+//# sourceMappingURL=FlickerGenerator.d.ts.map

package/dist/FlickerGenerator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlickerGenerator.d.ts","sourceRoot":"","sources":["../src/FlickerGenerator.ts"],"names":[],"mappings":"AAEA,qBAAa,gBAAgB;IACzB,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAe;IAC5C,OAAO,CAAC,sBAAsB,CAAK;IACnC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,WAAW,CAAS;IAE5B,YAAY,YAAY,GAAE,MAAM,MAAoB,EAInD;IAEM,OAAO,CAAC,mBAAmB,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAYvE;CACJ;eAEc,gBAAgB"}

package/dist/FlickerGenerator.js

@@ -0,0 +1,29 @@
+// Smoothly interpolated random levels in [0, 1], changing target once per flicker period.
+// Changes slower than the display refresh rate are visible; per-frame noise blurs into a steady image.
+export class FlickerGenerator {
+    randomSource;
+    millisecondsIntoPeriod = 0;
+    startLevel;
+    targetLevel;
+    constructor(randomSource = Math.random) {
+        this.randomSource = randomSource;
+        this.startLevel = randomSource();
+        this.targetLevel = randomSource();
+    }
+    advance(elapsedMilliseconds, frequencyHz) {
+        if (frequencyHz <= 0)
+            return this.startLevel;
+        const periodMilliseconds = 1000 / frequencyHz;
+        this.millisecondsIntoPeriod += Math.max(elapsedMilliseconds, 0);
+        while (this.millisecondsIntoPeriod >= periodMilliseconds) {
+            this.millisecondsIntoPeriod -= periodMilliseconds;
+            this.startLevel = this.targetLevel;
+            this.targetLevel = this.randomSource();
+        }
+        const progress = this.millisecondsIntoPeriod / periodMilliseconds;
+        const easedProgress = progress * progress * (3 - 2 * progress);
+        return this.startLevel + (this.targetLevel - this.startLevel) * easedProgress;
+    }
+}
+export default FlickerGenerator;
+//# sourceMappingURL=FlickerGenerator.js.map

package/dist/FlickerGenerator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlickerGenerator.js","sourceRoot":"","sources":["../src/FlickerGenerator.ts"],"names":[],"mappings":"AAAA,0FAA0F;AAC1F,uGAAuG;AACvG,MAAM,OAAO,gBAAgB;IACR,YAAY,CAAe;IACpC,sBAAsB,GAAG,CAAC,CAAC;IAC3B,UAAU,CAAS;IACnB,WAAW,CAAS;IAE5B,YAAY,YAAY,GAAiB,IAAI,CAAC,MAAM;QAChD,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IAAI,CAAC,UAAU,GAAG,YAAY,EAAE,CAAC;QACjC,IAAI,CAAC,WAAW,GAAG,YAAY,EAAE,CAAC;IACtC,CAAC;IAEM,OAAO,CAAC,mBAA2B,EAAE,WAAmB;QAC3D,IAAI,WAAW,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC,UAAU,CAAC;QAC7C,MAAM,kBAAkB,GAAG,IAAI,GAAG,WAAW,CAAC;QAC9C,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC;QAChE,OAAO,IAAI,CAAC,sBAAsB,IAAI,kBAAkB,EAAE,CAAC;YACvD,IAAI,CAAC,sBAAsB,IAAI,kBAAkB,CAAC;YAClD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;YACnC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QAC3C,CAAC;QACD,MAAM,QAAQ,GAAG,IAAI,CAAC,sBAAsB,GAAG,kBAAkB,CAAC;QAClE,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;QAC/D,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,aAAa,CAAC;IAClF,CAAC;CACJ;AAED,eAAe,gBAAgB,CAAC"}

package/dist/FullscreenPass.d.ts

@@ -0,0 +1,13 @@
+export declare class FullscreenPass {
+    readonly program: WebGLProgram;
+    private readonly gl;
+    private readonly emptyVertexArray;
+    private readonly uniformLocations;
+    constructor(gl: WebGL2RenderingContext, fragmentSource: string);
+    use(): void;
+    getUniformLocation(uniformName: string): WebGLUniformLocation | null;
+    draw(): void;
+    dispose(): void;
+}
+export default FullscreenPass;
+//# sourceMappingURL=FullscreenPass.d.ts.map

package/dist/FullscreenPass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullscreenPass.d.ts","sourceRoot":"","sources":["../src/FullscreenPass.ts"],"names":[],"mappings":"AAYA,qBAAa,cAAc;IACvB,SAAgB,OAAO,EAAE,YAAY,CAAC;IACtC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAyB;IAC5C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAyB;IAC1D,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAkD;IAEnF,YAAY,EAAE,EAAE,sBAAsB,EAAE,cAAc,EAAE,MAAM,EAI7D;IAEM,GAAG,IAAI,IAAI,CAEjB;IAEM,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,oBAAoB,GAAG,IAAI,CAK1E;IAEM,IAAI,IAAI,IAAI,CAKlB;IAEM,OAAO,IAAI,IAAI,CAGrB;CACJ;eAEc,cAAc"}

package/dist/FullscreenPass.js

@@ -0,0 +1,42 @@
+import { createShaderProgram } from "@vector-display/webgl";
+// One oversized triangle generated from gl_VertexID, so no vertex buffer is needed.
+const FULLSCREEN_VERTEX_SHADER = `#version 300 es
+out vec2 v_textureCoordinate;
+void main() {
+    vec2 position = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+    v_textureCoordinate = position;
+    gl_Position = vec4(position * 2.0 - 1.0, 0.0, 1.0);
+}
+`;
+export class FullscreenPass {
+    program;
+    gl;
+    emptyVertexArray;
+    uniformLocations = new Map();
+    constructor(gl, fragmentSource) {
+        this.gl = gl;
+        this.program = createShaderProgram(gl, { vertexSource: FULLSCREEN_VERTEX_SHADER, fragmentSource });
+        this.emptyVertexArray = gl.createVertexArray();
+    }
+    use() {
+        this.gl.useProgram(this.program);
+    }
+    getUniformLocation(uniformName) {
+        if (!this.uniformLocations.has(uniformName)) {
+            this.uniformLocations.set(uniformName, this.gl.getUniformLocation(this.program, uniformName));
+        }
+        return this.uniformLocations.get(uniformName) ?? null;
+    }
+    draw() {
+        const gl = this.gl;
+        gl.bindVertexArray(this.emptyVertexArray);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+        gl.bindVertexArray(null);
+    }
+    dispose() {
+        this.gl.deleteVertexArray(this.emptyVertexArray);
+        this.gl.deleteProgram(this.program);
+    }
+}
+export default FullscreenPass;
+//# sourceMappingURL=FullscreenPass.js.map

package/dist/FullscreenPass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullscreenPass.js","sourceRoot":"","sources":["../src/FullscreenPass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,oFAAoF;AACpF,MAAM,wBAAwB,GAAG;;;;;;;CAOhC,CAAC;AAEF,MAAM,OAAO,cAAc;IACP,OAAO,CAAe;IACrB,EAAE,CAAyB;IAC3B,gBAAgB,CAAyB;IACzC,gBAAgB,GAAG,IAAI,GAAG,EAAuC,CAAC;IAEnF,YAAY,EAA0B,EAAE,cAAsB;QAC1D,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,OAAO,GAAG,mBAAmB,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,wBAAwB,EAAE,cAAc,EAAE,CAAC,CAAC;QACnG,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC;IACnD,CAAC;IAEM,GAAG;QACN,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAEM,kBAAkB,CAAC,WAAmB;QACzC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YAC1C,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;QAClG,CAAC;QACD,OAAO,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC;IAC1D,CAAC;IAEM,IAAI;QACP,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC1C,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAClC,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAEM,OAAO;QACV,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACjD,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC;CACJ;AAED,eAAe,cAAc,CAAC"}

package/dist/PhosphorPipeline.d.ts

@@ -0,0 +1,42 @@
+import type { DisplayList } from "@vector-display/core";
+import type { WebGLVectorRenderer } from "@vector-display/webgl";
+export interface PhosphorSettings {
+    readonly persistenceHalfLifeMilliseconds: number;
+    readonly bloomStrength: number;
+    readonly bloomBlurIterations: number;
+    readonly exposure: number;
+    readonly flickerAmount: number;
+    readonly flickerFrequencyHz: number;
+}
+export declare const DEFAULT_PHOSPHOR_SETTINGS: PhosphorSettings;
+export declare class PhosphorPipeline {
+    private readonly gl;
+    private readonly renderer;
+    private readonly usesFloatStorage;
+    private readonly persistencePass;
+    private readonly blurPass;
+    private readonly compositePass;
+    private readonly flickerGenerator;
+    private settings;
+    private latestPhosphor;
+    private scratchPhosphor;
+    private currentBeams;
+    private bloomTargets;
+    constructor(renderer: WebGLVectorRenderer, settings?: Partial<PhosphorSettings>);
+    get isUsingFloatStorage(): boolean;
+    setSettings(settings: Partial<PhosphorSettings>): void;
+    renderFrame(displayList: DisplayList, elapsedMilliseconds: number): void;
+    dispose(): void;
+    private resizeTargetsToDrawingBuffer;
+    private createTarget;
+    private drawBeamsIntoCurrentFrame;
+    private combineWithFadedPreviousFrame;
+    private blurIntoBloom;
+    private runBlurStep;
+    private calculateFlickerBrightness;
+    private compositeToCanvas;
+    private bindTexture;
+    private disposeTargets;
+}
+export default PhosphorPipeline;
+//# sourceMappingURL=PhosphorPipeline.d.ts.map

package/dist/PhosphorPipeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhosphorPipeline.d.ts","sourceRoot":"","sources":["../src/PhosphorPipeline.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAMjE,MAAM,WAAW,gBAAgB;IAE7B,QAAQ,CAAC,+BAA+B,EAAE,MAAM,CAAC;IACjD,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,mBAAmB,EAAE,MAAM,CAAC;IACrC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAG1B,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAE/B,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC;CACvC;AAED,eAAO,MAAM,yBAAyB,EAAE,gBAOvC,CAAC;AAWF,qBAAa,gBAAgB;IACzB,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAyB;IAC5C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAsB;IAC/C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAU;IAC3C,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAiB;IACjD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAiB;IAC1C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;IAC/C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAA0B;IAC3D,OAAO,CAAC,QAAQ,CAA+C;IAC/D,OAAO,CAAC,cAAc,CAA6B;IACnD,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAO,CAAC,YAAY,CAA6B;IACjD,OAAO,CAAC,YAAY,CAA6C;IAEjE,YAAY,QAAQ,EAAE,mBAAmB,EAAE,QAAQ,GAAE,OAAO,CAAC,gBAAgB,CAAM,EAQlF;IAED,IAAW,mBAAmB,IAAI,OAAO,CAExC;IAEM,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAE5D;IAEM,WAAW,CAAC,WAAW,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAO9E;IAEM,OAAO,IAAI,IAAI,CAKrB;IAED,OAAO,CAAC,4BAA4B;IAYpC,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,yBAAyB;IAUjC,OAAO,CAAC,6BAA6B;IAoBrC,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,0BAA0B;IAMlC,OAAO,CAAC,iBAAiB;IAmBzB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,cAAc;CAUzB;eAEc,gBAAgB"}

package/dist/PhosphorPipeline.js

@@ -0,0 +1,162 @@
+import { BLUR_FRAGMENT_SHADER, COMPOSITE_FRAGMENT_SHADER, PERSISTENCE_FRAGMENT_SHADER } from "./effectShaders.js";
+import { FlickerGenerator } from "./FlickerGenerator.js";
+import { FullscreenPass } from "./FullscreenPass.js";
+import { RenderTarget } from "./RenderTarget.js";
+export const DEFAULT_PHOSPHOR_SETTINGS = {
+    persistenceHalfLifeMilliseconds: 40,
+    bloomStrength: 1.2,
+    bloomBlurIterations: 2,
+    exposure: 1.6,
+    flickerAmount: 0.08,
+    flickerFrequencyHz: 15,
+};
+const MAXIMUM_FRAME_GAP_MILLISECONDS = 100;
+// 8-bit targets can't store tiny values, so without a floor faint trails would never fully fade.
+const EIGHT_BIT_DECAY_FLOOR = 1.5 / 255;
+export class PhosphorPipeline {
+    gl;
+    renderer;
+    usesFloatStorage;
+    persistencePass;
+    blurPass;
+    compositePass;
+    flickerGenerator = new FlickerGenerator();
+    settings = DEFAULT_PHOSPHOR_SETTINGS;
+    latestPhosphor = null;
+    scratchPhosphor = null;
+    currentBeams = null;
+    bloomTargets = null;
+    constructor(renderer, settings = {}) {
+        this.renderer = renderer;
+        this.gl = renderer.gl;
+        this.usesFloatStorage = this.gl.getExtension("EXT_color_buffer_float") !== null;
+        this.persistencePass = new FullscreenPass(this.gl, PERSISTENCE_FRAGMENT_SHADER);
+        this.blurPass = new FullscreenPass(this.gl, BLUR_FRAGMENT_SHADER);
+        this.compositePass = new FullscreenPass(this.gl, COMPOSITE_FRAGMENT_SHADER);
+        this.setSettings(settings);
+    }
+    get isUsingFloatStorage() {
+        return this.usesFloatStorage;
+    }
+    setSettings(settings) {
+        this.settings = { ...this.settings, ...settings };
+    }
+    renderFrame(displayList, elapsedMilliseconds) {
+        const frameMilliseconds = Math.min(Math.max(elapsedMilliseconds, 0), MAXIMUM_FRAME_GAP_MILLISECONDS);
+        this.resizeTargetsToDrawingBuffer();
+        this.drawBeamsIntoCurrentFrame(displayList);
+        this.combineWithFadedPreviousFrame(frameMilliseconds);
+        this.blurIntoBloom();
+        this.compositeToCanvas(this.calculateFlickerBrightness(frameMilliseconds));
+    }
+    dispose() {
+        this.disposeTargets();
+        this.persistencePass.dispose();
+        this.blurPass.dispose();
+        this.compositePass.dispose();
+    }
+    resizeTargetsToDrawingBuffer() {
+        const width = this.gl.drawingBufferWidth;
+        const height = this.gl.drawingBufferHeight;
+        if (this.latestPhosphor?.width === width && this.latestPhosphor.height === height)
+            return;
+        this.disposeTargets();
+        this.latestPhosphor = this.createTarget({ width, height });
+        this.scratchPhosphor = this.createTarget({ width, height });
+        this.currentBeams = this.createTarget({ width, height });
+        const bloomSize = { width: Math.max(1, width >> 1), height: Math.max(1, height >> 1) };
+        this.bloomTargets = [this.createTarget(bloomSize), this.createTarget(bloomSize)];
+    }
+    createTarget(size) {
+        return new RenderTarget(this.gl, { ...size, usesFloatStorage: this.usesFloatStorage });
+    }
+    drawBeamsIntoCurrentFrame(displayList) {
+        const gl = this.gl;
+        this.currentBeams.bindForDrawing();
+        gl.clearColor(0, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        this.renderer.drawDisplayList(displayList);
+    }
+    // Keeps the brighter of this frame's beams and the faded trail. Adding them instead would make anything that
+    // stays still build up to 1 / (1 - decay) times its brightness, which grows with refresh rate and persistence.
+    combineWithFadedPreviousFrame(frameMilliseconds) {
+        const gl = this.gl;
+        const previous = this.latestPhosphor;
+        const next = this.scratchPhosphor;
+        const decay = Math.pow(0.5, frameMilliseconds / this.settings.persistenceHalfLifeMilliseconds);
+        next.bindForDrawing();
+        gl.disable(gl.BLEND);
+        this.persistencePass.use();
+        this.bindTexture(previous.texture, 0);
+        this.bindTexture(this.currentBeams.texture, 1);
+        gl.uniform1i(this.persistencePass.getUniformLocation("u_previousFrame"), 0);
+        gl.uniform1i(this.persistencePass.getUniformLocation("u_currentBeams"), 1);
+        gl.uniform1f(this.persistencePass.getUniformLocation("u_decay"), decay);
+        gl.uniform1f(this.persistencePass.getUniformLocation("u_decayFloor"), this.usesFloatStorage ? 0 : EIGHT_BIT_DECAY_FLOOR);
+        this.persistencePass.draw();
+        this.bindTexture(null, 1);
+        this.latestPhosphor = next;
+        this.scratchPhosphor = previous;
+    }
+    blurIntoBloom() {
+        const gl = this.gl;
+        const [horizontalTarget, verticalTarget] = this.bloomTargets;
+        gl.disable(gl.BLEND);
+        this.blurPass.use();
+        gl.uniform1i(this.blurPass.getUniformLocation("u_source"), 0);
+        let sourceTexture = this.latestPhosphor.texture;
+        for (let iteration = 0; iteration < this.settings.bloomBlurIterations; iteration++) {
+            this.runBlurStep(sourceTexture, { target: horizontalTarget, isHorizontal: true });
+            this.runBlurStep(horizontalTarget.texture, { target: verticalTarget, isHorizontal: false });
+            sourceTexture = verticalTarget.texture;
+        }
+    }
+    runBlurStep(sourceTexture, step) {
+        const { target, isHorizontal } = step;
+        target.bindForDrawing();
+        this.bindTexture(sourceTexture, 0);
+        const texelStepX = isHorizontal ? 1 / target.width : 0;
+        const texelStepY = isHorizontal ? 0 : 1 / target.height;
+        this.gl.uniform2f(this.blurPass.getUniformLocation("u_texelStep"), texelStepX, texelStepY);
+        this.blurPass.draw();
+    }
+    calculateFlickerBrightness(frameMilliseconds) {
+        const flickerLevel = this.flickerGenerator.advance(frameMilliseconds, this.settings.flickerFrequencyHz);
+        const flickerDepth = Math.min(Math.max(this.settings.flickerAmount, 0), 1);
+        return 1 - flickerDepth * flickerLevel;
+    }
+    compositeToCanvas(flickerBrightness) {
+        const gl = this.gl;
+        const hasBloom = this.settings.bloomBlurIterations > 0;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+        gl.disable(gl.BLEND);
+        this.compositePass.use();
+        this.bindTexture(this.latestPhosphor.texture, 0);
+        this.bindTexture(this.bloomTargets[1].texture, 1);
+        gl.uniform1i(this.compositePass.getUniformLocation("u_phosphor"), 0);
+        gl.uniform1i(this.compositePass.getUniformLocation("u_bloom"), 1);
+        gl.uniform1f(this.compositePass.getUniformLocation("u_bloomStrength"), hasBloom ? this.settings.bloomStrength : 0);
+        gl.uniform1f(this.compositePass.getUniformLocation("u_exposure"), this.settings.exposure);
+        gl.uniform1f(this.compositePass.getUniformLocation("u_flickerBrightness"), flickerBrightness);
+        this.compositePass.draw();
+        this.bindTexture(null, 1);
+        this.bindTexture(null, 0);
+    }
+    bindTexture(texture, textureUnit) {
+        this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);
+        this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+    }
+    disposeTargets() {
+        this.latestPhosphor?.dispose();
+        this.scratchPhosphor?.dispose();
+        this.currentBeams?.dispose();
+        this.bloomTargets?.forEach((target) => target.dispose());
+        this.latestPhosphor = null;
+        this.scratchPhosphor = null;
+        this.currentBeams = null;
+        this.bloomTargets = null;
+    }
+}
+export default PhosphorPipeline;
+//# sourceMappingURL=PhosphorPipeline.js.map

package/dist/PhosphorPipeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhosphorPipeline.js","sourceRoot":"","sources":["../src/PhosphorPipeline.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,yBAAyB,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AAClH,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAejD,MAAM,CAAC,MAAM,yBAAyB,GAAqB;IACvD,+BAA+B,EAAE,EAAE;IACnC,aAAa,EAAE,GAAG;IAClB,mBAAmB,EAAE,CAAC;IACtB,QAAQ,EAAE,GAAG;IACb,aAAa,EAAE,IAAI;IACnB,kBAAkB,EAAE,EAAE;CACzB,CAAC;AAEF,MAAM,8BAA8B,GAAG,GAAG,CAAC;AAC3C,iGAAiG;AACjG,MAAM,qBAAqB,GAAG,GAAG,GAAG,GAAG,CAAC;AAOxC,MAAM,OAAO,gBAAgB;IACR,EAAE,CAAyB;IAC3B,QAAQ,CAAsB;IAC9B,gBAAgB,CAAU;IAC1B,eAAe,CAAiB;IAChC,QAAQ,CAAiB;IACzB,aAAa,CAAiB;IAC9B,gBAAgB,GAAG,IAAI,gBAAgB,EAAE,CAAC;IACnD,QAAQ,GAAqB,yBAAyB,CAAC;IACvD,cAAc,GAAwB,IAAI,CAAC;IAC3C,eAAe,GAAwB,IAAI,CAAC;IAC5C,YAAY,GAAwB,IAAI,CAAC;IACzC,YAAY,GAAwC,IAAI,CAAC;IAEjE,YAAY,QAA6B,EAAE,QAAQ,GAA8B,EAAE;QAC/E,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,EAAE,CAAC;QACtB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,wBAAwB,CAAC,KAAK,IAAI,CAAC;QAChF,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,2BAA2B,CAAC,CAAC;QAChF,IAAI,CAAC,QAAQ,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,oBAAoB,CAAC,CAAC;QAClE,IAAI,CAAC,aAAa,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,yBAAyB,CAAC,CAAC;QAC5E,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;IAED,IAAW,mBAAmB;QAC1B,OAAO,IAAI,CAAC,gBAAgB,CAAC;IACjC,CAAC;IAEM,WAAW,CAAC,QAAmC;QAClD,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;IACtD,CAAC;IAEM,WAAW,CAAC,WAAwB,EAAE,mBAA2B;QACpE,MAAM,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC,CAAC,EAAE,8BAA8B,CAAC,CAAC;QACrG,IAAI,CAAC,4BAA4B,EAAE,CAAC;QACpC,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,CAAC;QAC5C,IAAI,CAAC,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;QACtD,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,0BAA0B,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAC/E,CAAC;IAEM,OAAO;QACV,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC;QAC/B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;IACjC,CAAC;IAEO,4BAA4B;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,kBAAkB,CAAC;QACzC,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC;QAC3C,IAAI,IAAI,CAAC,cAAc,EAAE,KAAK,KAAK,KAAK,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,MAAM;YAAE,OAAO;QAC1F,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;QAC3D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;QAC5D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;QACzD,MAAM,SAAS,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC,EAAE,CAAC;QACvF,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;IACrF,CAAC;IAEO,YAAY,CAAC,IAAgB;QACjC,OAAO,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAC3F,CAAC;IAEO,yBAAyB,CAAC,WAAwB;QACtD,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,IAAI,CAAC,YAAa,CAAC,cAAc,EAAE,CAAC;QACpC,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAC1B,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAC/C,CAAC;IAED,6GAA6G;IAC7G,+GAA+G;IACvG,6BAA6B,CAAC,iBAAyB;QAC3D,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAe,CAAC;QACtC,MAAM,IAAI,GAAG,IAAI,CAAC,eAAgB,CAAC;QACnC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,+BAA+B,CAAC,CAAC;QAC/F,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,CAAC,eAAe,CAAC,GAAG,EAAE,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QACtC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAa,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAChD,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC;QAC5E,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3E,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,CAAC;QACxE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC;QACzH,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;QAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;IACpC,CAAC;IAEO,aAAa;QACjB,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,MAAM,CAAC,gBAAgB,EAAE,cAAc,CAAC,GAAG,IAAI,CAAC,YAAa,CAAC;QAC9D,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC;QACpB,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;QAC9D,IAAI,aAAa,GAAG,IAAI,CAAC,cAAe,CAAC,OAAO,CAAC;QACjD,KAAK,IAAI,SAAS,GAAG,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,mBAAmB,EAAE,SAAS,EAAE,EAAE,CAAC;YACjF,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;YAClF,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC;YAC5F,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC;QAC3C,CAAC;IACL,CAAC;IAEO,WAAW,CAAC,aAA2B,EAAE,IAAqD;QAClG,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;QACtC,MAAM,CAAC,cAAc,EAAE,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QACnC,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACvD,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC;QACxD,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,aAAa,CAAC,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;QAC3F,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC;IAEO,0BAA0B,CAAC,iBAAyB;QACxD,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;QACxG,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3E,OAAO,CAAC,GAAG,YAAY,GAAG,YAAY,CAAC;IAC3C,CAAC;IAEO,iBAAiB,CAAC,iBAAyB;QAC/C,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,mBAAmB,GAAG,CAAC,CAAC;QACvD,EAAE,CAAC,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QACzC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,kBAAkB,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC;QACjE,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,GAAG,EAAE,CAAC;QACzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,cAAe,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAClD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAa,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QACnD,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC;QACrE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC;QAClE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACnH,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC1F,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,EAAE,iBAAiB,CAAC,CAAC;QAC9F,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAC9B,CAAC;IAEO,WAAW,CAAC,OAA4B,EAAE,WAAmB;QACjE,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,CAAC;QACtD,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IACrD,CAAC;IAEO,cAAc;QAClB,IAAI,CAAC,cAAc,EAAE,OAAO,EAAE,CAAC;QAC/B,IAAI,CAAC,eAAe,EAAE,OAAO,EAAE,CAAC;QAChC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,CAAC;QAC7B,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;QACzD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC7B,CAAC;CACJ;AAED,eAAe,gBAAgB,CAAC"}

package/dist/RenderTarget.d.ts

@@ -0,0 +1,17 @@
+export interface RenderTargetSpec {
+    readonly width: number;
+    readonly height: number;
+    readonly usesFloatStorage: boolean;
+}
+export declare class RenderTarget {
+    readonly texture: WebGLTexture;
+    readonly framebuffer: WebGLFramebuffer;
+    readonly width: number;
+    readonly height: number;
+    private readonly gl;
+    constructor(gl: WebGL2RenderingContext, spec: RenderTargetSpec);
+    bindForDrawing(): void;
+    dispose(): void;
+}
+export default RenderTarget;
+//# sourceMappingURL=RenderTarget.d.ts.map

package/dist/RenderTarget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderTarget.d.ts","sourceRoot":"","sources":["../src/RenderTarget.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAC;CACtC;AAED,qBAAa,YAAY;IACrB,SAAgB,OAAO,EAAE,YAAY,CAAC;IACtC,SAAgB,WAAW,EAAE,gBAAgB,CAAC;IAC9C,SAAgB,KAAK,EAAE,MAAM,CAAC;IAC9B,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAyB;IAE5C,YAAY,EAAE,EAAE,sBAAsB,EAAE,IAAI,EAAE,gBAAgB,EAS7D;IAEM,cAAc,IAAI,IAAI,CAG5B;IAEM,OAAO,IAAI,IAAI,CAGrB;CACJ;eAgBc,YAAY"}

package/dist/RenderTarget.js

@@ -0,0 +1,40 @@
+export class RenderTarget {
+    texture;
+    framebuffer;
+    width;
+    height;
+    gl;
+    constructor(gl, spec) {
+        this.gl = gl;
+        this.width = spec.width;
+        this.height = spec.height;
+        this.texture = createTargetTexture(gl, spec);
+        this.framebuffer = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    }
+    bindForDrawing() {
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);
+        this.gl.viewport(0, 0, this.width, this.height);
+    }
+    dispose() {
+        this.gl.deleteFramebuffer(this.framebuffer);
+        this.gl.deleteTexture(this.texture);
+    }
+}
+function createTargetTexture(gl, spec) {
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    const internalFormat = spec.usesFloatStorage ? gl.RGBA16F : gl.RGBA8;
+    const dataType = spec.usesFloatStorage ? gl.HALF_FLOAT : gl.UNSIGNED_BYTE;
+    gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, spec.width, spec.height, 0, gl.RGBA, dataType, null);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    return texture;
+}
+export default RenderTarget;
+//# sourceMappingURL=RenderTarget.js.map

package/dist/RenderTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderTarget.js","sourceRoot":"","sources":["../src/RenderTarget.ts"],"names":[],"mappings":"AAMA,MAAM,OAAO,YAAY;IACL,OAAO,CAAe;IACtB,WAAW,CAAmB;IAC9B,KAAK,CAAS;IACd,MAAM,CAAS;IACd,EAAE,CAAyB;IAE5C,YAAY,EAA0B,EAAE,IAAsB;QAC1D,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC1B,IAAI,CAAC,OAAO,GAAG,mBAAmB,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;QAC7C,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC;QAC1C,EAAE,CAAC,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACrD,EAAE,CAAC,oBAAoB,CAAC,EAAE,CAAC,WAAW,EAAE,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAC9F,EAAE,CAAC,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAC7C,CAAC;IAEM,cAAc;QACjB,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC/D,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACpD,CAAC;IAEM,OAAO;QACV,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5C,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC;CACJ;AAED,SAAS,mBAAmB,CAAC,EAA0B,EAAE,IAAsB;IAC3E,MAAM,OAAO,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC;IACnC,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IACvC,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IACrE,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC;IAC1E,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;IACrG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,kBAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;IAClE,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,kBAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;IAClE,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,cAAc,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC;IACrE,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,cAAc,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC;IACrE,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IACpC,OAAO,OAAO,CAAC;AACnB,CAAC;AAED,eAAe,YAAY,CAAC"}

package/dist/effectShaders.d.ts

@@ -0,0 +1,4 @@
+export declare const PERSISTENCE_FRAGMENT_SHADER = "#version 300 es\nprecision highp float;\nuniform sampler2D u_previousFrame;\nuniform sampler2D u_currentBeams;\nuniform float u_decay;\nuniform float u_decayFloor;\nin vec2 v_textureCoordinate;\nout vec4 outColor;\nvoid main() {\n    vec3 fadedTrail = max(texture(u_previousFrame, v_textureCoordinate).rgb * u_decay - u_decayFloor, 0.0);\n    vec3 currentBeams = texture(u_currentBeams, v_textureCoordinate).rgb;\n    outColor = vec4(max(fadedTrail, currentBeams), 1.0);\n}\n";
+export declare const BLUR_FRAGMENT_SHADER = "#version 300 es\nprecision highp float;\nuniform sampler2D u_source;\nuniform vec2 u_texelStep;\nin vec2 v_textureCoordinate;\nout vec4 outColor;\nvoid main() {\n    vec3 color = texture(u_source, v_textureCoordinate).rgb * 0.2270270270;\n    color += texture(u_source, v_textureCoordinate + u_texelStep * 1.3846153846).rgb * 0.3162162162;\n    color += texture(u_source, v_textureCoordinate - u_texelStep * 1.3846153846).rgb * 0.3162162162;\n    color += texture(u_source, v_textureCoordinate + u_texelStep * 3.2307692308).rgb * 0.0702702703;\n    color += texture(u_source, v_textureCoordinate - u_texelStep * 3.2307692308).rgb * 0.0702702703;\n    outColor = vec4(color, 1.0);\n}\n";
+export declare const COMPOSITE_FRAGMENT_SHADER = "#version 300 es\nprecision highp float;\nuniform sampler2D u_phosphor;\nuniform sampler2D u_bloom;\nuniform float u_bloomStrength;\nuniform float u_exposure;\nuniform float u_flickerBrightness;\nin vec2 v_textureCoordinate;\nout vec4 outColor;\nvoid main() {\n    vec3 color = texture(u_phosphor, v_textureCoordinate).rgb\n        + texture(u_bloom, v_textureCoordinate).rgb * u_bloomStrength;\n    // Flicker scales the tone-mapped result, so its depth matches what the viewer sees.\n    outColor = vec4((1.0 - exp(-color * u_exposure)) * u_flickerBrightness, 1.0);\n}\n";
+//# sourceMappingURL=effectShaders.d.ts.map

package/dist/effectShaders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"effectShaders.d.ts","sourceRoot":"","sources":["../src/effectShaders.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,2BAA2B,geAavC,CAAC;AAGF,eAAO,MAAM,oBAAoB,irBAchC,CAAC;AAEF,eAAO,MAAM,yBAAyB,gkBAerC,CAAC"}

package/dist/effectShaders.js

@@ -0,0 +1,47 @@
+export const PERSISTENCE_FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+uniform sampler2D u_previousFrame;
+uniform sampler2D u_currentBeams;
+uniform float u_decay;
+uniform float u_decayFloor;
+in vec2 v_textureCoordinate;
+out vec4 outColor;
+void main() {
+    vec3 fadedTrail = max(texture(u_previousFrame, v_textureCoordinate).rgb * u_decay - u_decayFloor, 0.0);
+    vec3 currentBeams = texture(u_currentBeams, v_textureCoordinate).rgb;
+    outColor = vec4(max(fadedTrail, currentBeams), 1.0);
+}
+`;
+// 9-tap Gaussian blur using 5 bilinear samples.
+export const BLUR_FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+uniform sampler2D u_source;
+uniform vec2 u_texelStep;
+in vec2 v_textureCoordinate;
+out vec4 outColor;
+void main() {
+    vec3 color = texture(u_source, v_textureCoordinate).rgb * 0.2270270270;
+    color += texture(u_source, v_textureCoordinate + u_texelStep * 1.3846153846).rgb * 0.3162162162;
+    color += texture(u_source, v_textureCoordinate - u_texelStep * 1.3846153846).rgb * 0.3162162162;
+    color += texture(u_source, v_textureCoordinate + u_texelStep * 3.2307692308).rgb * 0.0702702703;
+    color += texture(u_source, v_textureCoordinate - u_texelStep * 3.2307692308).rgb * 0.0702702703;
+    outColor = vec4(color, 1.0);
+}
+`;
+export const COMPOSITE_FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+uniform sampler2D u_phosphor;
+uniform sampler2D u_bloom;
+uniform float u_bloomStrength;
+uniform float u_exposure;
+uniform float u_flickerBrightness;
+in vec2 v_textureCoordinate;
+out vec4 outColor;
+void main() {
+    vec3 color = texture(u_phosphor, v_textureCoordinate).rgb
+        + texture(u_bloom, v_textureCoordinate).rgb * u_bloomStrength;
+    // Flicker scales the tone-mapped result, so its depth matches what the viewer sees.
+    outColor = vec4((1.0 - exp(-color * u_exposure)) * u_flickerBrightness, 1.0);
+}
+`;
+//# sourceMappingURL=effectShaders.js.map

package/dist/effectShaders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"effectShaders.js","sourceRoot":"","sources":["../src/effectShaders.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,2BAA2B,GAAG;;;;;;;;;;;;;CAa1C,CAAC;AAEF,gDAAgD;AAChD,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;CAcnC,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;;;;;;;;;;;;;;;CAexC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { PhosphorPipeline, DEFAULT_PHOSPHOR_SETTINGS } from "./PhosphorPipeline.js";
+export type { PhosphorSettings } from "./PhosphorPipeline.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AACpF,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { PhosphorPipeline, DEFAULT_PHOSPHOR_SETTINGS } from "./PhosphorPipeline.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@vector-display/beam-fx",
+  "version": "0.1.0",
+  "description": "Phosphor persistence, bloom, and flicker effects for the vector-display WebGL renderer.",
+  "license": "MIT",
+  "author": {
+    "name": "Rick Segrest",
+    "email": "rsegrest77@gmail.com",
+    "url": "https://www.ricksegrest.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rsegrest/vector-display.git",
+    "directory": "packages/beam-fx"
+  },
+  "homepage": "https://github.com/rsegrest/vector-display/tree/main/packages/beam-fx#readme",
+  "bugs": {
+    "url": "https://github.com/rsegrest/vector-display/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "@vector-display/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "prepublishOnly": "tsc -b"
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@vector-display/core": "0.1.0",
+    "@vector-display/webgl": "0.1.0"
+  }
+}

package/src/FlickerGenerator.ts

@@ -0,0 +1,30 @@
+// Smoothly interpolated random levels in [0, 1], changing target once per flicker period.
+// Changes slower than the display refresh rate are visible; per-frame noise blurs into a steady image.
+export class FlickerGenerator {
+    private readonly randomSource: () => number;
+    private millisecondsIntoPeriod = 0;
+    private startLevel: number;
+    private targetLevel: number;
+
+    constructor(randomSource: () => number = Math.random) {
+        this.randomSource = randomSource;
+        this.startLevel = randomSource();
+        this.targetLevel = randomSource();
+    }
+
+    public advance(elapsedMilliseconds: number, frequencyHz: number): number {
+        if (frequencyHz <= 0) return this.startLevel;
+        const periodMilliseconds = 1000 / frequencyHz;
+        this.millisecondsIntoPeriod += Math.max(elapsedMilliseconds, 0);
+        while (this.millisecondsIntoPeriod >= periodMilliseconds) {
+            this.millisecondsIntoPeriod -= periodMilliseconds;
+            this.startLevel = this.targetLevel;
+            this.targetLevel = this.randomSource();
+        }
+        const progress = this.millisecondsIntoPeriod / periodMilliseconds;
+        const easedProgress = progress * progress * (3 - 2 * progress);
+        return this.startLevel + (this.targetLevel - this.startLevel) * easedProgress;
+    }
+}
+
+export default FlickerGenerator;

package/src/FullscreenPass.ts

@@ -0,0 +1,49 @@
+import { createShaderProgram } from "@vector-display/webgl";
+
+// One oversized triangle generated from gl_VertexID, so no vertex buffer is needed.
+const FULLSCREEN_VERTEX_SHADER = `#version 300 es
+out vec2 v_textureCoordinate;
+void main() {
+    vec2 position = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+    v_textureCoordinate = position;
+    gl_Position = vec4(position * 2.0 - 1.0, 0.0, 1.0);
+}
+`;
+
+export class FullscreenPass {
+    public readonly program: WebGLProgram;
+    private readonly gl: WebGL2RenderingContext;
+    private readonly emptyVertexArray: WebGLVertexArrayObject;
+    private readonly uniformLocations = new Map<string, WebGLUniformLocation | null>();
+
+    constructor(gl: WebGL2RenderingContext, fragmentSource: string) {
+        this.gl = gl;
+        this.program = createShaderProgram(gl, { vertexSource: FULLSCREEN_VERTEX_SHADER, fragmentSource });
+        this.emptyVertexArray = gl.createVertexArray();
+    }
+
+    public use(): void {
+        this.gl.useProgram(this.program);
+    }
+
+    public getUniformLocation(uniformName: string): WebGLUniformLocation | null {
+        if (!this.uniformLocations.has(uniformName)) {
+            this.uniformLocations.set(uniformName, this.gl.getUniformLocation(this.program, uniformName));
+        }
+        return this.uniformLocations.get(uniformName) ?? null;
+    }
+
+    public draw(): void {
+        const gl = this.gl;
+        gl.bindVertexArray(this.emptyVertexArray);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+        gl.bindVertexArray(null);
+    }
+
+    public dispose(): void {
+        this.gl.deleteVertexArray(this.emptyVertexArray);
+        this.gl.deleteProgram(this.program);
+    }
+}
+
+export default FullscreenPass;

package/src/PhosphorPipeline.ts

@@ -0,0 +1,199 @@
+import type { DisplayList } from "@vector-display/core";
+import type { WebGLVectorRenderer } from "@vector-display/webgl";
+import { BLUR_FRAGMENT_SHADER, COMPOSITE_FRAGMENT_SHADER, PERSISTENCE_FRAGMENT_SHADER } from "./effectShaders.js";
+import { FlickerGenerator } from "./FlickerGenerator.js";
+import { FullscreenPass } from "./FullscreenPass.js";
+import { RenderTarget } from "./RenderTarget.js";
+
+export interface PhosphorSettings {
+    // Time for a trail to fade to half brightness.
+    readonly persistenceHalfLifeMilliseconds: number;
+    readonly bloomStrength: number;
+    readonly bloomBlurIterations: number;
+    readonly exposure: number;
+    // Deepest brightness dip as a fraction of the displayed image: 0 disables flicker, 0.3 dims by up to 30%.
+    // Strong full-screen flicker around 3–30 Hz can trigger photosensitive seizures; keep it subtle by default.
+    readonly flickerAmount: number;
+    // How often the flicker moves to a new random brightness level.
+    readonly flickerFrequencyHz: number;
+}
+
+export const DEFAULT_PHOSPHOR_SETTINGS: PhosphorSettings = {
+    persistenceHalfLifeMilliseconds: 40,
+    bloomStrength: 1.2,
+    bloomBlurIterations: 2,
+    exposure: 1.6,
+    flickerAmount: 0.08,
+    flickerFrequencyHz: 15,
+};
+
+const MAXIMUM_FRAME_GAP_MILLISECONDS = 100;
+// 8-bit targets can't store tiny values, so without a floor faint trails would never fully fade.
+const EIGHT_BIT_DECAY_FLOOR = 1.5 / 255;
+
+interface TargetSize {
+    readonly width: number;
+    readonly height: number;
+}
+
+export class PhosphorPipeline {
+    private readonly gl: WebGL2RenderingContext;
+    private readonly renderer: WebGLVectorRenderer;
+    private readonly usesFloatStorage: boolean;
+    private readonly persistencePass: FullscreenPass;
+    private readonly blurPass: FullscreenPass;
+    private readonly compositePass: FullscreenPass;
+    private readonly flickerGenerator = new FlickerGenerator();
+    private settings: PhosphorSettings = DEFAULT_PHOSPHOR_SETTINGS;
+    private latestPhosphor: RenderTarget | null = null;
+    private scratchPhosphor: RenderTarget | null = null;
+    private currentBeams: RenderTarget | null = null;
+    private bloomTargets: [RenderTarget, RenderTarget] | null = null;
+
+    constructor(renderer: WebGLVectorRenderer, settings: Partial<PhosphorSettings> = {}) {
+        this.renderer = renderer;
+        this.gl = renderer.gl;
+        this.usesFloatStorage = this.gl.getExtension("EXT_color_buffer_float") !== null;
+        this.persistencePass = new FullscreenPass(this.gl, PERSISTENCE_FRAGMENT_SHADER);
+        this.blurPass = new FullscreenPass(this.gl, BLUR_FRAGMENT_SHADER);
+        this.compositePass = new FullscreenPass(this.gl, COMPOSITE_FRAGMENT_SHADER);
+        this.setSettings(settings);
+    }
+
+    public get isUsingFloatStorage(): boolean {
+        return this.usesFloatStorage;
+    }
+
+    public setSettings(settings: Partial<PhosphorSettings>): void {
+        this.settings = { ...this.settings, ...settings };
+    }
+
+    public renderFrame(displayList: DisplayList, elapsedMilliseconds: number): void {
+        const frameMilliseconds = Math.min(Math.max(elapsedMilliseconds, 0), MAXIMUM_FRAME_GAP_MILLISECONDS);
+        this.resizeTargetsToDrawingBuffer();
+        this.drawBeamsIntoCurrentFrame(displayList);
+        this.combineWithFadedPreviousFrame(frameMilliseconds);
+        this.blurIntoBloom();
+        this.compositeToCanvas(this.calculateFlickerBrightness(frameMilliseconds));
+    }
+
+    public dispose(): void {
+        this.disposeTargets();
+        this.persistencePass.dispose();
+        this.blurPass.dispose();
+        this.compositePass.dispose();
+    }
+
+    private resizeTargetsToDrawingBuffer(): void {
+        const width = this.gl.drawingBufferWidth;
+        const height = this.gl.drawingBufferHeight;
+        if (this.latestPhosphor?.width === width && this.latestPhosphor.height === height) return;
+        this.disposeTargets();
+        this.latestPhosphor = this.createTarget({ width, height });
+        this.scratchPhosphor = this.createTarget({ width, height });
+        this.currentBeams = this.createTarget({ width, height });
+        const bloomSize = { width: Math.max(1, width >> 1), height: Math.max(1, height >> 1) };
+        this.bloomTargets = [this.createTarget(bloomSize), this.createTarget(bloomSize)];
+    }
+
+    private createTarget(size: TargetSize): RenderTarget {
+        return new RenderTarget(this.gl, { ...size, usesFloatStorage: this.usesFloatStorage });
+    }
+
+    private drawBeamsIntoCurrentFrame(displayList: DisplayList): void {
+        const gl = this.gl;
+        this.currentBeams!.bindForDrawing();
+        gl.clearColor(0, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        this.renderer.drawDisplayList(displayList);
+    }
+
+    // Keeps the brighter of this frame's beams and the faded trail. Adding them instead would make anything that
+    // stays still build up to 1 / (1 - decay) times its brightness, which grows with refresh rate and persistence.
+    private combineWithFadedPreviousFrame(frameMilliseconds: number): void {
+        const gl = this.gl;
+        const previous = this.latestPhosphor!;
+        const next = this.scratchPhosphor!;
+        const decay = Math.pow(0.5, frameMilliseconds / this.settings.persistenceHalfLifeMilliseconds);
+        next.bindForDrawing();
+        gl.disable(gl.BLEND);
+        this.persistencePass.use();
+        this.bindTexture(previous.texture, 0);
+        this.bindTexture(this.currentBeams!.texture, 1);
+        gl.uniform1i(this.persistencePass.getUniformLocation("u_previousFrame"), 0);
+        gl.uniform1i(this.persistencePass.getUniformLocation("u_currentBeams"), 1);
+        gl.uniform1f(this.persistencePass.getUniformLocation("u_decay"), decay);
+        gl.uniform1f(this.persistencePass.getUniformLocation("u_decayFloor"), this.usesFloatStorage ? 0 : EIGHT_BIT_DECAY_FLOOR);
+        this.persistencePass.draw();
+        this.bindTexture(null, 1);
+        this.latestPhosphor = next;
+        this.scratchPhosphor = previous;
+    }
+
+    private blurIntoBloom(): void {
+        const gl = this.gl;
+        const [horizontalTarget, verticalTarget] = this.bloomTargets!;
+        gl.disable(gl.BLEND);
+        this.blurPass.use();
+        gl.uniform1i(this.blurPass.getUniformLocation("u_source"), 0);
+        let sourceTexture = this.latestPhosphor!.texture;
+        for (let iteration = 0; iteration < this.settings.bloomBlurIterations; iteration++) {
+            this.runBlurStep(sourceTexture, { target: horizontalTarget, isHorizontal: true });
+            this.runBlurStep(horizontalTarget.texture, { target: verticalTarget, isHorizontal: false });
+            sourceTexture = verticalTarget.texture;
+        }
+    }
+
+    private runBlurStep(sourceTexture: WebGLTexture, step: { target: RenderTarget; isHorizontal: boolean }): void {
+        const { target, isHorizontal } = step;
+        target.bindForDrawing();
+        this.bindTexture(sourceTexture, 0);
+        const texelStepX = isHorizontal ? 1 / target.width : 0;
+        const texelStepY = isHorizontal ? 0 : 1 / target.height;
+        this.gl.uniform2f(this.blurPass.getUniformLocation("u_texelStep"), texelStepX, texelStepY);
+        this.blurPass.draw();
+    }
+
+    private calculateFlickerBrightness(frameMilliseconds: number): number {
+        const flickerLevel = this.flickerGenerator.advance(frameMilliseconds, this.settings.flickerFrequencyHz);
+        const flickerDepth = Math.min(Math.max(this.settings.flickerAmount, 0), 1);
+        return 1 - flickerDepth * flickerLevel;
+    }
+
+    private compositeToCanvas(flickerBrightness: number): void {
+        const gl = this.gl;
+        const hasBloom = this.settings.bloomBlurIterations > 0;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+        gl.disable(gl.BLEND);
+        this.compositePass.use();
+        this.bindTexture(this.latestPhosphor!.texture, 0);
+        this.bindTexture(this.bloomTargets![1].texture, 1);
+        gl.uniform1i(this.compositePass.getUniformLocation("u_phosphor"), 0);
+        gl.uniform1i(this.compositePass.getUniformLocation("u_bloom"), 1);
+        gl.uniform1f(this.compositePass.getUniformLocation("u_bloomStrength"), hasBloom ? this.settings.bloomStrength : 0);
+        gl.uniform1f(this.compositePass.getUniformLocation("u_exposure"), this.settings.exposure);
+        gl.uniform1f(this.compositePass.getUniformLocation("u_flickerBrightness"), flickerBrightness);
+        this.compositePass.draw();
+        this.bindTexture(null, 1);
+        this.bindTexture(null, 0);
+    }
+
+    private bindTexture(texture: WebGLTexture | null, textureUnit: number): void {
+        this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);
+        this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+    }
+
+    private disposeTargets(): void {
+        this.latestPhosphor?.dispose();
+        this.scratchPhosphor?.dispose();
+        this.currentBeams?.dispose();
+        this.bloomTargets?.forEach((target) => target.dispose());
+        this.latestPhosphor = null;
+        this.scratchPhosphor = null;
+        this.currentBeams = null;
+        this.bloomTargets = null;
+    }
+}
+
+export default PhosphorPipeline;

package/src/RenderTarget.ts

@@ -0,0 +1,50 @@
+export interface RenderTargetSpec {
+    readonly width: number;
+    readonly height: number;
+    readonly usesFloatStorage: boolean;
+}
+
+export class RenderTarget {
+    public readonly texture: WebGLTexture;
+    public readonly framebuffer: WebGLFramebuffer;
+    public readonly width: number;
+    public readonly height: number;
+    private readonly gl: WebGL2RenderingContext;
+
+    constructor(gl: WebGL2RenderingContext, spec: RenderTargetSpec) {
+        this.gl = gl;
+        this.width = spec.width;
+        this.height = spec.height;
+        this.texture = createTargetTexture(gl, spec);
+        this.framebuffer = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    }
+
+    public bindForDrawing(): void {
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.framebuffer);
+        this.gl.viewport(0, 0, this.width, this.height);
+    }
+
+    public dispose(): void {
+        this.gl.deleteFramebuffer(this.framebuffer);
+        this.gl.deleteTexture(this.texture);
+    }
+}
+
+function createTargetTexture(gl: WebGL2RenderingContext, spec: RenderTargetSpec): WebGLTexture {
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    const internalFormat = spec.usesFloatStorage ? gl.RGBA16F : gl.RGBA8;
+    const dataType = spec.usesFloatStorage ? gl.HALF_FLOAT : gl.UNSIGNED_BYTE;
+    gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, spec.width, spec.height, 0, gl.RGBA, dataType, null);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    return texture;
+}
+
+export default RenderTarget;

package/src/effectShaders.ts

@@ -0,0 +1,48 @@
+export const PERSISTENCE_FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+uniform sampler2D u_previousFrame;
+uniform sampler2D u_currentBeams;
+uniform float u_decay;
+uniform float u_decayFloor;
+in vec2 v_textureCoordinate;
+out vec4 outColor;
+void main() {
+    vec3 fadedTrail = max(texture(u_previousFrame, v_textureCoordinate).rgb * u_decay - u_decayFloor, 0.0);
+    vec3 currentBeams = texture(u_currentBeams, v_textureCoordinate).rgb;
+    outColor = vec4(max(fadedTrail, currentBeams), 1.0);
+}
+`;
+
+// 9-tap Gaussian blur using 5 bilinear samples.
+export const BLUR_FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+uniform sampler2D u_source;
+uniform vec2 u_texelStep;
+in vec2 v_textureCoordinate;
+out vec4 outColor;
+void main() {
+    vec3 color = texture(u_source, v_textureCoordinate).rgb * 0.2270270270;
+    color += texture(u_source, v_textureCoordinate + u_texelStep * 1.3846153846).rgb * 0.3162162162;
+    color += texture(u_source, v_textureCoordinate - u_texelStep * 1.3846153846).rgb * 0.3162162162;
+    color += texture(u_source, v_textureCoordinate + u_texelStep * 3.2307692308).rgb * 0.0702702703;
+    color += texture(u_source, v_textureCoordinate - u_texelStep * 3.2307692308).rgb * 0.0702702703;
+    outColor = vec4(color, 1.0);
+}
+`;
+
+export const COMPOSITE_FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+uniform sampler2D u_phosphor;
+uniform sampler2D u_bloom;
+uniform float u_bloomStrength;
+uniform float u_exposure;
+uniform float u_flickerBrightness;
+in vec2 v_textureCoordinate;
+out vec4 outColor;
+void main() {
+    vec3 color = texture(u_phosphor, v_textureCoordinate).rgb
+        + texture(u_bloom, v_textureCoordinate).rgb * u_bloomStrength;
+    // Flicker scales the tone-mapped result, so its depth matches what the viewer sees.
+    outColor = vec4((1.0 - exp(-color * u_exposure)) * u_flickerBrightness, 1.0);
+}
+`;

package/src/index.ts

@@ -0,0 +1,2 @@
+export { PhosphorPipeline, DEFAULT_PHOSPHOR_SETTINGS } from "./PhosphorPipeline.js";
+export type { PhosphorSettings } from "./PhosphorPipeline.js";