@edinstvo/glass 0.0.0-stage → 0.1.0-beta.1

package/dist/geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.js","sourceRoot":"","sources":["../src/geometry.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { EdinstvoGlass, EdinstvoGlassGroup, defineGlass } from "./element.js";
+export { GlassSurface, attachGlass, type GlassOptions } from "./surface.js";
+export { type Material, defaults, ranges, resolveMaterial } from "./material.js";
+export { type Motion, motionDefaults, motionRanges, resolveMotion } from "./interaction.js";
+export type { GlassImage, GlassSource } from "./backdrop.js";

package/dist/index.js

@@ -0,0 +1,5 @@
+export { EdinstvoGlass, EdinstvoGlassGroup, defineGlass } from "./element.js";
+export { GlassSurface, attachGlass } from "./surface.js";
+export { defaults, ranges, resolveMaterial } from "./material.js";
+export { motionDefaults, motionRanges, resolveMotion } from "./interaction.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,aAAa,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,WAAW,EAAqB,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAiB,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAe,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/interaction.d.ts

@@ -0,0 +1,61 @@
+export interface Motion {
+    follow: number;
+    press: number;
+    jelly: number;
+    glow: number;
+    morph: number;
+    merge: number;
+}
+export declare const motionRanges: Record<keyof Motion, readonly [number, number]>;
+export declare const motionKeys: (keyof Motion)[];
+export declare const motionDefaults: Motion;
+export declare const still: Motion;
+export declare function resolveMotion(...layers: (Partial<Motion> | undefined)[]): Motion;
+export declare class Spring {
+    private stiffness;
+    private damping;
+    value: number;
+    target: number;
+    velocity: number;
+    constructor(value?: number, stiffness?: number, damping?: number);
+    step(dt: number): void;
+    tune(stiffness: number): void;
+    snap(value: number): void;
+    shift(delta: number): void;
+    get settled(): boolean;
+}
+export interface ShapeBox {
+    x: number;
+    y: number;
+    halfW: number;
+    halfH: number;
+    radius: number;
+    join: number;
+}
+export declare class Shape {
+    readonly element: HTMLElement;
+    private wake;
+    x: Spring;
+    y: Spring;
+    w: Spring;
+    h: Spring;
+    pointerX: Spring;
+    pointerY: Spring;
+    held: Spring;
+    glow: Spring;
+    touchX: number;
+    touchY: number;
+    radius: number;
+    placed: boolean;
+    motion: Motion;
+    private springs;
+    private cleanup;
+    constructor(element: HTMLElement, wake: () => void);
+    get moving(): boolean;
+    get pressed(): boolean;
+    attach(): void;
+    detach(): void;
+    read(rect: DOMRect, scrolled: boolean, grow: boolean): void;
+    step(dt: number): void;
+    box(scale: number): ShapeBox;
+}

package/dist/interaction.js

@@ -0,0 +1,184 @@
+export const motionRanges = {
+    follow: [0, 1],
+    press: [0, 1],
+    jelly: [0, 1],
+    glow: [0, 1],
+    morph: [0, 1],
+    merge: [0, 64],
+};
+export const motionKeys = Object.keys(motionRanges);
+export const motionDefaults = { follow: 0.5, press: 0.5, jelly: 0.6, glow: 0.5, morph: 0.6, merge: 0 };
+export const still = { follow: 0, press: 0, jelly: 0, glow: 0, morph: 0, merge: 0 };
+export function resolveMotion(...layers) {
+    const result = { ...motionDefaults };
+    for (const layer of layers) {
+        for (const key of motionKeys) {
+            const value = layer?.[key];
+            if (typeof value === "number" && Number.isFinite(value))
+                result[key] = Math.min(motionRanges[key][1], Math.max(motionRanges[key][0], value));
+        }
+    }
+    return result;
+}
+export class Spring {
+    stiffness;
+    damping;
+    value;
+    target;
+    velocity = 0;
+    constructor(value = 0, stiffness = 260, damping = 20) {
+        this.stiffness = stiffness;
+        this.damping = damping;
+        this.value = this.target = value;
+    }
+    step(dt) {
+        this.velocity += ((this.target - this.value) * this.stiffness - this.velocity * this.damping) * dt;
+        this.value += this.velocity * dt;
+        if (this.settled)
+            this.snap(this.target);
+    }
+    tune(stiffness) {
+        this.stiffness = stiffness;
+        this.damping = Math.sqrt(stiffness) * 1.1;
+    }
+    snap(value) {
+        this.value = this.target = value;
+        this.velocity = 0;
+    }
+    shift(delta) {
+        this.value += delta;
+        this.target += delta;
+    }
+    get settled() {
+        return Math.abs(this.target - this.value) < 0.01 && Math.abs(this.velocity) < 0.05;
+    }
+}
+const liquid = () => new Spring(0, 190, 15);
+const clamp = (value, limit) => Math.max(-limit, Math.min(limit, value));
+export class Shape {
+    element;
+    wake;
+    x = liquid();
+    y = liquid();
+    w = liquid();
+    h = liquid();
+    pointerX = new Spring();
+    pointerY = new Spring();
+    held = new Spring(0, 320, 22);
+    glow = new Spring(0, 60, 14);
+    touchX = 0;
+    touchY = 0;
+    radius = 0;
+    placed = false;
+    motion = motionDefaults;
+    springs = [this.x, this.y, this.w, this.h, this.pointerX, this.pointerY, this.held, this.glow];
+    cleanup = null;
+    constructor(element, wake) {
+        this.element = element;
+        this.wake = wake;
+    }
+    get moving() {
+        return this.springs.some((spring) => !spring.settled);
+    }
+    get pressed() {
+        return this.held.target === 1;
+    }
+    attach() {
+        const { element } = this;
+        const aim = (event) => {
+            const rect = element.getBoundingClientRect();
+            this.pointerX.target = clamp(((event.clientX - rect.left) / rect.width) * 2 - 1, 1);
+            this.pointerY.target = clamp(((event.clientY - rect.top) / rect.height) * 2 - 1, 1);
+            this.touchX = event.clientX;
+            this.touchY = event.clientY;
+            this.wake();
+        };
+        const leave = () => {
+            if (this.pressed)
+                return;
+            this.pointerX.target = this.pointerY.target = 0;
+            this.wake();
+        };
+        const down = (event) => {
+            aim(event);
+            this.held.target = 1;
+            this.glow.target = 1;
+            this.wake();
+            addEventListener("pointermove", aim);
+        };
+        const up = () => {
+            if (!this.pressed)
+                return;
+            removeEventListener("pointermove", aim);
+            this.held.target = this.glow.target = 0;
+            this.pointerX.target = this.pointerY.target = 0;
+            this.wake();
+        };
+        element.addEventListener("pointermove", aim);
+        element.addEventListener("pointerleave", leave);
+        element.addEventListener("pointerdown", down);
+        addEventListener("pointerup", up);
+        addEventListener("pointercancel", up);
+        this.cleanup = () => {
+            element.removeEventListener("pointermove", aim);
+            element.removeEventListener("pointerleave", leave);
+            element.removeEventListener("pointerdown", down);
+            removeEventListener("pointerup", up);
+            removeEventListener("pointercancel", up);
+            removeEventListener("pointermove", aim);
+        };
+    }
+    detach() {
+        this.cleanup?.();
+        this.cleanup = null;
+        this.element.style.removeProperty("--glass-scale");
+    }
+    read(rect, scrolled, grow) {
+        const animate = this.motion.morph > 0;
+        const { x, y, w, h } = this;
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        if (!this.placed || !animate) {
+            x.snap(cx);
+            y.snap(cy);
+            if (this.placed || !grow || !animate) {
+                w.snap(rect.width);
+                h.snap(rect.height);
+            }
+            else {
+                w.target = rect.width;
+                h.target = rect.height;
+            }
+            this.placed = true;
+            return;
+        }
+        if (scrolled) {
+            x.shift(cx - x.target);
+            y.shift(cy - y.target);
+        }
+        x.target = cx;
+        y.target = cy;
+        w.target = rect.width;
+        h.target = rect.height;
+    }
+    step(dt) {
+        const stiffness = 420 - 300 * this.motion.morph;
+        for (const spring of [this.x, this.y, this.w, this.h])
+            spring.tune(stiffness);
+        for (const spring of this.springs)
+            spring.step(dt);
+    }
+    box(scale) {
+        const { press, jelly, merge } = this.motion;
+        const swell = 1 + this.held.value * press * 0.12;
+        const pull = this.held.value * jelly * 0.1 * (Math.abs(this.pointerX.value) - Math.abs(this.pointerY.value));
+        const speedX = clamp(this.x.velocity / 2400, 0.22) * jelly * 1.6;
+        const speedY = clamp(this.y.velocity / 2400, 0.22) * jelly * 1.6;
+        const squash = Math.abs(speedX) - Math.abs(speedY);
+        const halfW = Math.max(this.w.value, 0) / 2 * swell * (1 + pull + squash) * scale;
+        const halfH = Math.max(this.h.value, 0) / 2 * swell * (1 - pull - squash) * scale;
+        this.element.style.setProperty("--glass-scale", swell.toFixed(4));
+        return { x: this.x.value, y: this.y.value, halfW, halfH, radius: Math.min(this.radius, halfW, halfH), join: merge };
+    }
+}
+//# sourceMappingURL=interaction.js.map

package/dist/interaction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interaction.js","sourceRoot":"","sources":["../src/interaction.ts"],"names":[],"mappings":"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"}

package/dist/material.d.ts

@@ -0,0 +1,22 @@
+export interface Material {
+    bloom: number;
+    light: number;
+    glint: number;
+    rim: number;
+    lift: number;
+    lightAngle: number;
+    transparency: number;
+    refraction: number;
+    depth: number;
+    dispersion: number;
+    frost: number;
+    splay: number;
+    tint: string;
+}
+export type NumericKey = Exclude<keyof Material, "tint">;
+export declare const ranges: Record<NumericKey, readonly [number, number]>;
+export declare const numericKeys: NumericKey[];
+export declare const defaults: Material;
+export declare const clampValue: (key: NumericKey, value: number) => number;
+export declare function resolveMaterial(...layers: (Partial<Material> | undefined)[]): Material;
+export declare const kebab: (key: string) => string;

package/dist/material.js

@@ -0,0 +1,37 @@
+export const ranges = {
+    bloom: [0, 1],
+    light: [0, 1],
+    glint: [0, 1],
+    rim: [0, 1],
+    lift: [0, 1],
+    lightAngle: [-180, 180],
+    transparency: [0, 1],
+    refraction: [0, 1],
+    depth: [0, 96],
+    dispersion: [0, 1],
+    frost: [0, 1],
+    splay: [0, 1],
+};
+export const numericKeys = Object.keys(ranges);
+export const defaults = { bloom: 0.2, light: 0.3, glint: 0, rim: 0.35, lift: 0.15, lightAngle: -45, transparency: 0.85, refraction: 0.3, depth: 6, dispersion: 0.2, frost: 0.7, splay: 0, tint: "auto" };
+export const clampValue = (key, value) => {
+    const [min, max] = ranges[key];
+    return Math.min(max, Math.max(min, value));
+};
+export function resolveMaterial(...layers) {
+    const result = { ...defaults };
+    for (const layer of layers) {
+        if (!layer)
+            continue;
+        for (const key of numericKeys) {
+            const value = layer[key];
+            if (typeof value === "number" && Number.isFinite(value))
+                result[key] = clampValue(key, value);
+        }
+        if (layer.tint)
+            result.tint = layer.tint;
+    }
+    return result;
+}
+export const kebab = (key) => key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+//# sourceMappingURL=material.js.map

package/dist/material.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"material.js","sourceRoot":"","sources":["../src/material.ts"],"names":[],"mappings":"AAkBA,MAAM,CAAC,MAAM,MAAM,GAAkD;IACnE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IACb,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IACb,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IACb,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IACX,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IACZ,UAAU,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC;IACvB,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IACpB,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IAClB,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;IACd,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IAClB,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IACb,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAiB,CAAC;AAE/D,MAAM,CAAC,MAAM,QAAQ,GAAa,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAEnN,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,GAAe,EAAE,KAAa,EAAE,EAAE;IAC3D,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC/B,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7C,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,GAAG,MAAyC;IAC1E,MAAM,MAAM,GAAa,EAAE,GAAG,QAAQ,EAAE,CAAC;IACzC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,IAAI,CAAC,KAAK;YAAE,SAAS;QACrB,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;YAC9B,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;YACzB,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;gBAAE,MAAM,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAChG,CAAC;QACD,IAAI,KAAK,CAAC,IAAI;YAAE,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;IAC3C,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC"}

package/dist/renderer.d.ts

@@ -0,0 +1,49 @@
+import type { Backdrop } from "./backdrop.js";
+import type { Material } from "./material.js";
+export declare const maxShapes = 8;
+export interface DrawJob {
+    target: CanvasRenderingContext2D;
+    backdrop: Backdrop;
+    width: number;
+    height: number;
+    pad: number;
+    boxes: Float32Array;
+    radii: Float32Array;
+    count: number;
+    joins: Float32Array;
+    peak: number;
+    appear: number;
+    touch: readonly [number, number, number];
+    dpr: number;
+    uvOrigin: readonly [number, number];
+    uvPerPixel: readonly [number, number];
+    lightDir: readonly [number, number];
+    tint: readonly [number, number, number];
+    material: Material;
+}
+export declare class Renderer {
+    private static instance;
+    static get shared(): Renderer | null;
+    onRestore: (() => void) | null;
+    private canvas;
+    private gl;
+    private uniforms;
+    private textures;
+    private frame;
+    private lens;
+    private blurProgram;
+    private frameBuffer;
+    private lost;
+    private setup;
+    private link;
+    private compile;
+    private target;
+    private pass;
+    /** Gaussian at a size where sigma is 3 texels, so any strength costs the same 17 taps per axis. */
+    private blurred;
+    nextFrame(): void;
+    private shrink;
+    private bind;
+    /** Throws on a tainted source: a cross-origin image without CORS headers can't reach the GPU. */
+    draw(job: DrawJob): void;
+}

package/dist/renderer.js

@@ -0,0 +1,237 @@
+import { blurFragment, fragment, vertex } from "./shader.js";
+export const maxShapes = 8;
+const uniformNames = ["uBoxes", "uRadii", "uCount", "uCanvas", "uUvOrigin", "uUvPerPx", "uTexSize", "uLightDir", "uTint", "uTouch", "uViewY", "uPad", "uDpr", "uJoin", "uPeak", "uAppear", "uLight", "uTransparency", "uRefraction", "uDepth", "uDispersion", "uFrost", "uSplay", "uBloom", "uGlint", "uRim", "uLift"];
+const maxTextures = 8;
+const maxTextureSide = 4096;
+export class Renderer {
+    static instance;
+    static get shared() {
+        if (Renderer.instance === undefined) {
+            const renderer = new Renderer();
+            Renderer.instance = renderer.setup() ? renderer : null;
+        }
+        return Renderer.instance;
+    }
+    onRestore = null;
+    canvas = document.createElement("canvas");
+    gl;
+    uniforms = {};
+    textures = new Map();
+    frame = 0;
+    lens;
+    blurProgram;
+    frameBuffer = null;
+    lost = false;
+    setup() {
+        const gl = this.canvas.getContext("webgl2", { alpha: true, premultipliedAlpha: true, antialias: false, depth: false, stencil: false });
+        if (!gl)
+            return false;
+        this.gl = gl;
+        this.canvas.addEventListener("webglcontextlost", (event) => {
+            event.preventDefault();
+            this.lost = true;
+        });
+        this.canvas.addEventListener("webglcontextrestored", () => {
+            this.lost = false;
+            this.textures.clear();
+            this.compile();
+            this.onRestore?.();
+        });
+        return this.compile();
+    }
+    link(source) {
+        const { gl } = this;
+        const program = gl.createProgram();
+        for (const [type, code] of [[gl.VERTEX_SHADER, vertex], [gl.FRAGMENT_SHADER, source]]) {
+            const shader = gl.createShader(type);
+            if (!shader || !program)
+                return null;
+            gl.shaderSource(shader, code);
+            gl.compileShader(shader);
+            gl.attachShader(program, shader);
+        }
+        gl.linkProgram(program);
+        if (gl.getProgramParameter(program, gl.LINK_STATUS))
+            return program;
+        console.warn("@edinstvo/glass:", gl.getProgramInfoLog(program));
+        return null;
+    }
+    compile() {
+        const { gl } = this;
+        const lens = this.link(fragment);
+        const blur = this.link(blurFragment);
+        if (!lens || !blur)
+            return false;
+        this.lens = lens;
+        this.blurProgram = blur;
+        this.frameBuffer = gl.createFramebuffer();
+        gl.bindVertexArray(gl.createVertexArray());
+        gl.enable(gl.SCISSOR_TEST);
+        gl.useProgram(blur);
+        gl.uniform1i(gl.getUniformLocation(blur, "uSource"), 0);
+        gl.useProgram(lens);
+        gl.uniform1i(gl.getUniformLocation(lens, "uBackdrop"), 0);
+        gl.uniform1i(gl.getUniformLocation(lens, "uFrosted"), 1);
+        for (const name of uniformNames)
+            this.uniforms[name] = gl.getUniformLocation(lens, name);
+        return true;
+    }
+    target(width, height) {
+        const { gl } = this;
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, 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.MIRRORED_REPEAT);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
+        return texture;
+    }
+    pass(source, destination, width, height, step, lod) {
+        const { gl, blurProgram: program } = this;
+        const u = (name) => gl.getUniformLocation(program, name);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, destination, 0);
+        gl.viewport(0, 0, width, height);
+        gl.scissor(0, 0, width, height);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, source);
+        gl.uniform2f(u("uStep"), step[0], step[1]);
+        gl.uniform2f(u("uInvSize"), 1 / width, 1 / height);
+        gl.uniform1f(u("uLod"), lod);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+    }
+    /** Gaussian at a size where sigma is 3 texels, so any strength costs the same 17 taps per axis. */
+    blurred(entry, sigma) {
+        const { gl } = this;
+        const key = Math.round(sigma * 4) / 4;
+        const cached = entry.blurs.get(key);
+        if (cached && cached.frame === entry.frame)
+            return cached.texture;
+        if (cached)
+            gl.deleteTexture(cached.texture);
+        if (entry.blurs.size >= 4 && !cached) {
+            const [oldest, stale] = entry.blurs.entries().next().value;
+            gl.deleteTexture(stale.texture);
+            entry.blurs.delete(oldest);
+        }
+        const scale = Math.min(1, 3 / Math.max(key, 0.25));
+        const width = Math.max(4, Math.ceil(entry.width * scale));
+        const height = Math.max(4, Math.ceil(entry.height * scale));
+        const across = this.target(width, height);
+        const result = this.target(width, height);
+        gl.useProgram(this.blurProgram);
+        this.pass(entry.texture, across, width, height, [1 / width, 0], Math.log2(1 / scale));
+        this.pass(across, result, width, height, [0, 1 / height], 0);
+        gl.deleteTexture(across);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.useProgram(this.lens);
+        entry.blurs.set(key, { texture: result, frame: entry.frame });
+        return result;
+    }
+    nextFrame() {
+        this.frame++;
+    }
+    shrink(backdrop) {
+        const limit = Math.min(maxTextureSide, this.gl.getParameter(this.gl.MAX_TEXTURE_SIZE));
+        const scale = limit / Math.max(backdrop.width, backdrop.height);
+        if (scale >= 1)
+            return backdrop.image;
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.round(backdrop.width * scale);
+        canvas.height = Math.round(backdrop.height * scale);
+        canvas.getContext("2d").drawImage(backdrop.image, 0, 0, canvas.width, canvas.height);
+        return canvas;
+    }
+    bind(backdrop) {
+        const { gl } = this;
+        let entry = this.textures.get(backdrop.image);
+        if (entry) {
+            gl.bindTexture(gl.TEXTURE_2D, entry.texture);
+            if (!backdrop.live || entry.frame === this.frame)
+                return entry;
+        }
+        else {
+            const texture = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
+            entry = { texture, width: 0, height: 0, frame: -1, blurs: new Map() };
+            this.textures.set(backdrop.image, entry);
+            if (this.textures.size > maxTextures) {
+                const [oldest, stale] = this.textures.entries().next().value;
+                gl.deleteTexture(stale.texture);
+                for (const blur of stale.blurs.values())
+                    gl.deleteTexture(blur.texture);
+                this.textures.delete(oldest);
+            }
+        }
+        const pixels = this.shrink(backdrop);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+        gl.generateMipmap(gl.TEXTURE_2D);
+        entry.width = backdrop.width;
+        entry.height = backdrop.height;
+        entry.frame = this.frame;
+        return entry;
+    }
+    /** Throws on a tainted source: a cross-origin image without CORS headers can't reach the GPU. */
+    draw(job) {
+        if (this.lost)
+            return;
+        const { gl, canvas, uniforms: u } = this;
+        const { width, height, material: m } = job;
+        if (canvas.width < width || canvas.height < height) {
+            canvas.width = Math.max(canvas.width, width);
+            canvas.height = Math.max(canvas.height, height);
+        }
+        gl.activeTexture(gl.TEXTURE0);
+        const texture = this.bind(job.backdrop);
+        if (m.frost > 0) {
+            const texels = Math.max(job.uvPerPixel[0] * texture.width, job.uvPerPixel[1] * texture.height);
+            const frosted = this.blurred(texture, m.frost * 20 * job.dpr * texels);
+            gl.activeTexture(gl.TEXTURE1);
+            gl.bindTexture(gl.TEXTURE_2D, frosted);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, texture.texture);
+        }
+        const viewY = canvas.height - height;
+        gl.viewport(0, viewY, width, height);
+        gl.scissor(0, viewY, width, height);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.uniform2f(u.uCanvas, width, height);
+        gl.uniform4fv(u.uBoxes, job.boxes);
+        gl.uniform1fv(u.uRadii, job.radii);
+        gl.uniform1i(u.uCount, job.count);
+        gl.uniform1fv(u.uJoin, job.joins);
+        gl.uniform1f(u.uPeak, job.peak);
+        gl.uniform1f(u.uAppear, job.appear);
+        gl.uniform3f(u.uTouch, job.touch[0], job.touch[1], job.touch[2]);
+        gl.uniform2f(u.uUvOrigin, job.uvOrigin[0], job.uvOrigin[1]);
+        gl.uniform2f(u.uUvPerPx, job.uvPerPixel[0], job.uvPerPixel[1]);
+        gl.uniform2f(u.uTexSize, texture.width, texture.height);
+        gl.uniform2f(u.uLightDir, job.lightDir[0], job.lightDir[1]);
+        gl.uniform3f(u.uTint, job.tint[0], job.tint[1], job.tint[2]);
+        gl.uniform1f(u.uViewY, viewY);
+        gl.uniform1f(u.uPad, job.pad);
+        gl.uniform1f(u.uDpr, job.dpr);
+        gl.uniform1f(u.uLight, m.light);
+        gl.uniform1f(u.uTransparency, m.transparency);
+        gl.uniform1f(u.uRefraction, m.refraction);
+        gl.uniform1f(u.uDepth, m.depth);
+        gl.uniform1f(u.uDispersion, m.dispersion);
+        gl.uniform1f(u.uFrost, m.frost);
+        gl.uniform1f(u.uSplay, m.splay);
+        gl.uniform1f(u.uBloom, m.bloom);
+        gl.uniform1f(u.uGlint, m.glint);
+        gl.uniform1f(u.uRim, m.rim);
+        gl.uniform1f(u.uLift, m.lift);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+        // ── the drawing buffer is only valid until this task ends, so copy out right here
+        job.target.clearRect(0, 0, width, height);
+        job.target.drawImage(canvas, 0, 0, width, height, 0, 0, width, height);
+    }
+}
+//# sourceMappingURL=renderer.js.map