interactive-bg 0.0.0-stage → 0.1.1

package/dist/core/surface.cjs

@@ -0,0 +1,25 @@
+// src/core/surface.ts
+/** Whether any side fades. */
+function fades(fade) {
+	return fade.top > 0 || fade.right > 0 || fade.bottom > 0 || fade.left > 0;
+}
+/**
+* Set up the first renderer that works here, trying them in the style's order,
+* with `preference` (if the style has it) first. `null` if none works.
+*
+* A canvas keeps the first kind of context it hands out, so after a renderer
+* fails, `replaceCanvas` (if given) swaps in a fresh canvas for the next one.
+*/
+function createSurface(canvas, renderers, options, preference, invalidate, replaceCanvas) {
+	const ordered = preference === "auto" ? renderers : [...renderers.filter((r) => r.name === preference), ...renderers.filter((r) => r.name !== preference)];
+	for (const [k, renderer] of ordered.entries()) {
+		if (k > 0) replaceCanvas?.();
+		const surface = renderer.create(canvas(), options, invalidate);
+		if (surface) return surface;
+	}
+	return null;
+}
+exports.createSurface = createSurface;
+exports.fades = fades;
+
+//# sourceMappingURL=surface.cjs.map

package/dist/core/surface.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.cjs","names":[],"sources":["../../src/core/surface.ts"],"sourcesContent":["import type { Frame, RendererName } from './style';\n\n/** How far in from each edge the style's drawing fades out, in CSS pixels. `0` = no fade on that side. */\nexport interface Fade {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\n\n/** Whether any side fades. */\nexport function fades(fade: Fade): boolean {\n  return fade.top > 0 || fade.right > 0 || fade.bottom > 0 || fade.left > 0;\n}\n\n/** A canvas context plus the style renderer drawing into it. */\nexport interface Surface<O> {\n  readonly name: RendererName;\n  update(options: O): void;\n  /**\n   * Clear to `backgroundColor` (`null` = transparent) and let the style draw, then fade the\n   * style's drawing out towards the edges as `fade` says, keeping the background colour solid.\n   * Fades on several sides multiply. Returns `true` while the style has a short-lived effect playing.\n   */\n  render(frame: Frame, backgroundColor: string | null, fade: Fade): boolean;\n  /** Leave the canvas blank. */\n  clear(): void;\n  destroy(): void;\n}\n\n/**\n * One way to draw a style: a kind of canvas context plus the style's renderer\n * for it. Made with `webglRenderer()` or `canvas2dRenderer()`, each in its own\n * module, so a style only bundles the backends it lists.\n */\nexport interface Renderer<O> {\n  readonly name: RendererName;\n  /** Set up on `canvas`, or return `null` if this kind of context isn't available. */\n  create(canvas: HTMLCanvasElement, options: O, invalidate: () => void): Surface<O> | null;\n}\n\n/**\n * Set up the first renderer that works here, trying them in the style's order,\n * with `preference` (if the style has it) first. `null` if none works.\n *\n * A canvas keeps the first kind of context it hands out, so after a renderer\n * fails, `replaceCanvas` (if given) swaps in a fresh canvas for the next one.\n */\nexport function createSurface<O>(\n  canvas: () => HTMLCanvasElement,\n  renderers: readonly Renderer<O>[],\n  options: O,\n  preference: 'auto' | RendererName,\n  invalidate: () => void,\n  replaceCanvas?: () => void,\n): Surface<O> | null {\n  const ordered =\n    preference === 'auto'\n      ? renderers\n      : [...renderers.filter((r) => r.name === preference), ...renderers.filter((r) => r.name !== preference)];\n  for (const [k, renderer] of ordered.entries()) {\n    if (k > 0) replaceCanvas?.();\n    const surface = renderer.create(canvas(), options, invalidate);\n    if (surface) return surface;\n  }\n  return null;\n}\n"],"mappings":";;AAWA,SAAgB,MAAM,MAAqB;CACzC,OAAO,KAAK,MAAM,KAAK,KAAK,QAAQ,KAAK,KAAK,SAAS,KAAK,KAAK,OAAO;AAC1E;;;;;;;;AAmCA,SAAgB,cACd,QACA,WACA,SACA,YACA,YACA,eACmB;CACnB,MAAM,UACJ,eAAe,SACX,YACA,CAAC,GAAG,UAAU,QAAQ,MAAM,EAAE,SAAS,UAAU,GAAG,GAAG,UAAU,QAAQ,MAAM,EAAE,SAAS,UAAU,CAAC;CAC3G,KAAK,MAAM,CAAC,GAAG,aAAa,QAAQ,QAAQ,GAAG;EAC7C,IAAI,IAAI,GAAG,gBAAgB;EAC3B,MAAM,UAAU,SAAS,OAAO,OAAO,GAAG,SAAS,UAAU;EAC7D,IAAI,SAAS,OAAO;CACtB;CACA,OAAO;AACT"}

package/dist/core/surface.d.cts

@@ -0,0 +1,42 @@
+import type { Frame, RendererName } from './style.cjs';
+/** How far in from each edge the style's drawing fades out, in CSS pixels. `0` = no fade on that side. */
+export interface Fade {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/** Whether any side fades. */
+export declare function fades(fade: Fade): boolean;
+/** A canvas context plus the style renderer drawing into it. */
+export interface Surface<O> {
+    readonly name: RendererName;
+    update(options: O): void;
+    /**
+     * Clear to `backgroundColor` (`null` = transparent) and let the style draw, then fade the
+     * style's drawing out towards the edges as `fade` says, keeping the background colour solid.
+     * Fades on several sides multiply. Returns `true` while the style has a short-lived effect playing.
+     */
+    render(frame: Frame, backgroundColor: string | null, fade: Fade): boolean;
+    /** Leave the canvas blank. */
+    clear(): void;
+    destroy(): void;
+}
+/**
+ * One way to draw a style: a kind of canvas context plus the style's renderer
+ * for it. Made with `webglRenderer()` or `canvas2dRenderer()`, each in its own
+ * module, so a style only bundles the backends it lists.
+ */
+export interface Renderer<O> {
+    readonly name: RendererName;
+    /** Set up on `canvas`, or return `null` if this kind of context isn't available. */
+    create(canvas: HTMLCanvasElement, options: O, invalidate: () => void): Surface<O> | null;
+}
+/**
+ * Set up the first renderer that works here, trying them in the style's order,
+ * with `preference` (if the style has it) first. `null` if none works.
+ *
+ * A canvas keeps the first kind of context it hands out, so after a renderer
+ * fails, `replaceCanvas` (if given) swaps in a fresh canvas for the next one.
+ */
+export declare function createSurface<O>(canvas: () => HTMLCanvasElement, renderers: readonly Renderer<O>[], options: O, preference: 'auto' | RendererName, invalidate: () => void, replaceCanvas?: () => void): Surface<O> | null;

package/dist/core/surface.d.ts

@@ -0,0 +1,42 @@
+import type { Frame, RendererName } from './style.js';
+/** How far in from each edge the style's drawing fades out, in CSS pixels. `0` = no fade on that side. */
+export interface Fade {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/** Whether any side fades. */
+export declare function fades(fade: Fade): boolean;
+/** A canvas context plus the style renderer drawing into it. */
+export interface Surface<O> {
+    readonly name: RendererName;
+    update(options: O): void;
+    /**
+     * Clear to `backgroundColor` (`null` = transparent) and let the style draw, then fade the
+     * style's drawing out towards the edges as `fade` says, keeping the background colour solid.
+     * Fades on several sides multiply. Returns `true` while the style has a short-lived effect playing.
+     */
+    render(frame: Frame, backgroundColor: string | null, fade: Fade): boolean;
+    /** Leave the canvas blank. */
+    clear(): void;
+    destroy(): void;
+}
+/**
+ * One way to draw a style: a kind of canvas context plus the style's renderer
+ * for it. Made with `webglRenderer()` or `canvas2dRenderer()`, each in its own
+ * module, so a style only bundles the backends it lists.
+ */
+export interface Renderer<O> {
+    readonly name: RendererName;
+    /** Set up on `canvas`, or return `null` if this kind of context isn't available. */
+    create(canvas: HTMLCanvasElement, options: O, invalidate: () => void): Surface<O> | null;
+}
+/**
+ * Set up the first renderer that works here, trying them in the style's order,
+ * with `preference` (if the style has it) first. `null` if none works.
+ *
+ * A canvas keeps the first kind of context it hands out, so after a renderer
+ * fails, `replaceCanvas` (if given) swaps in a fresh canvas for the next one.
+ */
+export declare function createSurface<O>(canvas: () => HTMLCanvasElement, renderers: readonly Renderer<O>[], options: O, preference: 'auto' | RendererName, invalidate: () => void, replaceCanvas?: () => void): Surface<O> | null;

package/dist/core/surface.js

@@ -0,0 +1,24 @@
+// src/core/surface.ts
+/** Whether any side fades. */
+function fades(fade) {
+	return fade.top > 0 || fade.right > 0 || fade.bottom > 0 || fade.left > 0;
+}
+/**
+* Set up the first renderer that works here, trying them in the style's order,
+* with `preference` (if the style has it) first. `null` if none works.
+*
+* A canvas keeps the first kind of context it hands out, so after a renderer
+* fails, `replaceCanvas` (if given) swaps in a fresh canvas for the next one.
+*/
+function createSurface(canvas, renderers, options, preference, invalidate, replaceCanvas) {
+	const ordered = preference === "auto" ? renderers : [...renderers.filter((r) => r.name === preference), ...renderers.filter((r) => r.name !== preference)];
+	for (const [k, renderer] of ordered.entries()) {
+		if (k > 0) replaceCanvas?.();
+		const surface = renderer.create(canvas(), options, invalidate);
+		if (surface) return surface;
+	}
+	return null;
+}
+export { createSurface, fades };
+
+//# sourceMappingURL=surface.js.map

package/dist/core/surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.js","names":[],"sources":["../../src/core/surface.ts"],"sourcesContent":["import type { Frame, RendererName } from './style';\n\n/** How far in from each edge the style's drawing fades out, in CSS pixels. `0` = no fade on that side. */\nexport interface Fade {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\n\n/** Whether any side fades. */\nexport function fades(fade: Fade): boolean {\n  return fade.top > 0 || fade.right > 0 || fade.bottom > 0 || fade.left > 0;\n}\n\n/** A canvas context plus the style renderer drawing into it. */\nexport interface Surface<O> {\n  readonly name: RendererName;\n  update(options: O): void;\n  /**\n   * Clear to `backgroundColor` (`null` = transparent) and let the style draw, then fade the\n   * style's drawing out towards the edges as `fade` says, keeping the background colour solid.\n   * Fades on several sides multiply. Returns `true` while the style has a short-lived effect playing.\n   */\n  render(frame: Frame, backgroundColor: string | null, fade: Fade): boolean;\n  /** Leave the canvas blank. */\n  clear(): void;\n  destroy(): void;\n}\n\n/**\n * One way to draw a style: a kind of canvas context plus the style's renderer\n * for it. Made with `webglRenderer()` or `canvas2dRenderer()`, each in its own\n * module, so a style only bundles the backends it lists.\n */\nexport interface Renderer<O> {\n  readonly name: RendererName;\n  /** Set up on `canvas`, or return `null` if this kind of context isn't available. */\n  create(canvas: HTMLCanvasElement, options: O, invalidate: () => void): Surface<O> | null;\n}\n\n/**\n * Set up the first renderer that works here, trying them in the style's order,\n * with `preference` (if the style has it) first. `null` if none works.\n *\n * A canvas keeps the first kind of context it hands out, so after a renderer\n * fails, `replaceCanvas` (if given) swaps in a fresh canvas for the next one.\n */\nexport function createSurface<O>(\n  canvas: () => HTMLCanvasElement,\n  renderers: readonly Renderer<O>[],\n  options: O,\n  preference: 'auto' | RendererName,\n  invalidate: () => void,\n  replaceCanvas?: () => void,\n): Surface<O> | null {\n  const ordered =\n    preference === 'auto'\n      ? renderers\n      : [...renderers.filter((r) => r.name === preference), ...renderers.filter((r) => r.name !== preference)];\n  for (const [k, renderer] of ordered.entries()) {\n    if (k > 0) replaceCanvas?.();\n    const surface = renderer.create(canvas(), options, invalidate);\n    if (surface) return surface;\n  }\n  return null;\n}\n"],"mappings":";;AAWA,SAAgB,MAAM,MAAqB;CACzC,OAAO,KAAK,MAAM,KAAK,KAAK,QAAQ,KAAK,KAAK,SAAS,KAAK,KAAK,OAAO;AAC1E;;;;;;;;AAmCA,SAAgB,cACd,QACA,WACA,SACA,YACA,YACA,eACmB;CACnB,MAAM,UACJ,eAAe,SACX,YACA,CAAC,GAAG,UAAU,QAAQ,MAAM,EAAE,SAAS,UAAU,GAAG,GAAG,UAAU,QAAQ,MAAM,EAAE,SAAS,UAAU,CAAC;CAC3G,KAAK,MAAM,CAAC,GAAG,aAAa,QAAQ,QAAQ,GAAG;EAC7C,IAAI,IAAI,GAAG,gBAAgB;EAC3B,MAAM,UAAU,SAAS,OAAO,OAAO,GAAG,SAAS,UAAU;EAC7D,IAAI,SAAS,OAAO;CACtB;CACA,OAAO;AACT"}

package/dist/core/webgl-renderer.cjs

@@ -0,0 +1,137 @@
+const require_surface = require("./surface.cjs");
+const require_color = require("./color.cjs");
+const require_webgl = require("./webgl.cjs");
+// src/core/webgl-renderer.ts
+var WEBGL_ATTRIBUTES = {
+	alpha: true,
+	premultipliedAlpha: true,
+	antialias: false,
+	depth: false,
+	stencil: false,
+	preserveDrawingBuffer: false,
+	powerPreference: "low-power"
+};
+var FADE_FRAGMENT = `#version 300 es
+precision highp float;
+uniform float uMode;
+uniform vec4 uFade;    // top, right, bottom, left, device px (0 = no fade)
+uniform vec2 uSize;    // drawing buffer size, device px
+uniform vec4 uColor;   // premultiplied background colour
+out vec4 outColor;
+
+float keep(float distance, float length) {
+  return length > 0.0 ? clamp(distance / length, 0.0, 1.0) : 1.0;
+}
+
+void main() {
+  if (uMode > 0.5) {
+    outColor = uColor;
+    return;
+  }
+  vec2 p = gl_FragCoord.xy; // origin at the bottom left
+  float kept = keep(uSize.y - p.y, uFade.x) * keep(uSize.x - p.x, uFade.y) * keep(p.y, uFade.z) * keep(p.x, uFade.w);
+  outColor = vec4(0.0, 0.0, 0.0, 1.0 - kept);
+}`;
+/**
+* Draw a style with WebGL2. The engine clears to the background colour, sets
+* the viewport and premultiplied-alpha blending, and recreates the renderer
+* after a lost context is restored.
+*/
+function webglRenderer(createRenderer) {
+	return {
+		name: "webgl",
+		create(canvas, initial, invalidate) {
+			const gl = canvas.getContext("webgl2", WEBGL_ATTRIBUTES);
+			if (!gl) return null;
+			let options = initial;
+			let renderer;
+			try {
+				renderer = createRenderer(gl, options);
+			} catch (error) {
+				console.warn("interactive-bg: WebGL setup failed, trying the next renderer", error);
+				gl.getExtension("WEBGL_lose_context")?.loseContext();
+				return null;
+			}
+			let fadePass = null;
+			const onLost = (event) => {
+				event.preventDefault();
+				renderer = null;
+				fadePass = null;
+			};
+			/** Fade the drawing out towards the edges (`fade` in CSS px), then put `background` (RGBA) behind it. */
+			const fadeEdges = (fade, dpr, background) => {
+				if (!fadePass) {
+					const program = require_webgl.createProgram(gl, require_webgl.FULLSCREEN_VERTEX_SHADER, FADE_FRAGMENT);
+					if (!program) return;
+					fadePass = {
+						program,
+						uniforms: require_webgl.getUniforms(gl, program, [
+							"uMode",
+							"uFade",
+							"uSize",
+							"uColor"
+						])
+					};
+				}
+				const { uniforms } = fadePass;
+				gl.useProgram(fadePass.program);
+				gl.uniform1f(uniforms.uMode, 0);
+				gl.uniform4f(uniforms.uFade, fade.top * dpr, fade.right * dpr, fade.bottom * dpr, fade.left * dpr);
+				gl.uniform2f(uniforms.uSize, gl.drawingBufferWidth, gl.drawingBufferHeight);
+				gl.blendFunc(gl.ZERO, gl.ONE_MINUS_SRC_ALPHA);
+				gl.drawArrays(gl.TRIANGLES, 0, 3);
+				const [r, g, b, a] = background;
+				if (a > 0) {
+					gl.uniform1f(uniforms.uMode, 1);
+					gl.uniform4f(uniforms.uColor, r * a, g * a, b * a, a);
+					gl.blendFunc(gl.ONE_MINUS_DST_ALPHA, gl.ONE);
+					gl.drawArrays(gl.TRIANGLES, 0, 3);
+				}
+			};
+			const onRestored = () => {
+				renderer = createRenderer(gl, options);
+				invalidate();
+			};
+			canvas.addEventListener("webglcontextlost", onLost);
+			canvas.addEventListener("webglcontextrestored", onRestored);
+			return {
+				name: "webgl",
+				update(next) {
+					options = next;
+					renderer?.update(next);
+				},
+				render(frame, backgroundColor, fade) {
+					if (!renderer) return false;
+					const background = require_color.parseColor(backgroundColor);
+					const [r, g, b, a] = background;
+					gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+					const fading = require_surface.fades(fade);
+					if (fading) gl.clearColor(0, 0, 0, 0);
+					else gl.clearColor(r * a, g * a, b * a, a);
+					gl.clear(gl.COLOR_BUFFER_BIT);
+					gl.enable(gl.BLEND);
+					gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+					const busy = renderer.render(frame) === true;
+					if (fading) fadeEdges(fade, frame.dpr, background);
+					return busy;
+				},
+				clear() {
+					if (!renderer) return;
+					gl.clearColor(0, 0, 0, 0);
+					gl.clear(gl.COLOR_BUFFER_BIT);
+				},
+				destroy() {
+					canvas.removeEventListener("webglcontextlost", onLost);
+					canvas.removeEventListener("webglcontextrestored", onRestored);
+					renderer?.destroy?.();
+					renderer = null;
+					if (fadePass) gl.deleteProgram(fadePass.program);
+					fadePass = null;
+				}
+			};
+		}
+	};
+}
+exports.webglRenderer = webglRenderer;
+
+//# sourceMappingURL=webgl-renderer.cjs.map

package/dist/core/webgl-renderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgl-renderer.cjs","names":["createProgram","FULLSCREEN_VERTEX_SHADER","getUniforms","parseColor","fades"],"sources":["../../src/core/webgl-renderer.ts"],"sourcesContent":["import { parseColor, type RGBA } from './color';\nimport type { StyleRenderer } from './style';\nimport { fades, type Fade, type Renderer } from './surface';\nimport { createProgram, FULLSCREEN_VERTEX_SHADER, getUniforms } from './webgl';\n\nconst WEBGL_ATTRIBUTES: WebGLContextAttributes = {\n  alpha: true,\n  premultipliedAlpha: true,\n  antialias: false, // styles antialias in their shaders; MSAA would only cost memory\n  depth: false,\n  stencil: false,\n  preserveDrawingBuffer: false,\n  powerPreference: 'low-power',\n};\n\n// The edge fades, drawn after the style. Mode 0 scales what's there by how much of it each side\n// keeps (1 inside, down to 0 at a fading edge, multiplied over the sides) with blend\n// ZERO, ONE_MINUS_SRC_ALPHA. Mode 1 paints the premultiplied background colour behind it, where\n// the drawing is transparent (blend ONE_MINUS_DST_ALPHA, ONE).\nconst FADE_FRAGMENT = `#version 300 es\nprecision highp float;\nuniform float uMode;\nuniform vec4 uFade;    // top, right, bottom, left, device px (0 = no fade)\nuniform vec2 uSize;    // drawing buffer size, device px\nuniform vec4 uColor;   // premultiplied background colour\nout vec4 outColor;\n\nfloat keep(float distance, float length) {\n  return length > 0.0 ? clamp(distance / length, 0.0, 1.0) : 1.0;\n}\n\nvoid main() {\n  if (uMode > 0.5) {\n    outColor = uColor;\n    return;\n  }\n  vec2 p = gl_FragCoord.xy; // origin at the bottom left\n  float kept = keep(uSize.y - p.y, uFade.x) * keep(uSize.x - p.x, uFade.y) * keep(p.y, uFade.z) * keep(p.x, uFade.w);\n  outColor = vec4(0.0, 0.0, 0.0, 1.0 - kept);\n}`;\n\n/**\n * Draw a style with WebGL2. The engine clears to the background colour, sets\n * the viewport and premultiplied-alpha blending, and recreates the renderer\n * after a lost context is restored.\n */\nexport function webglRenderer<O>(createRenderer: (gl: WebGL2RenderingContext, options: O) => StyleRenderer<O>): Renderer<O> {\n  return {\n    name: 'webgl',\n    create(canvas, initial, invalidate) {\n      const gl = canvas.getContext('webgl2', WEBGL_ATTRIBUTES);\n      if (!gl) return null;\n\n      let options = initial;\n      // `null` while the context is lost: its GPU resources are gone.\n      let renderer: StyleRenderer<O> | null;\n      try {\n        renderer = createRenderer(gl, options);\n      } catch (error) {\n        // E.g. a shader this GPU's driver rejects: let the engine try the next renderer.\n        console.warn('interactive-bg: WebGL setup failed, trying the next renderer', error);\n        gl.getExtension('WEBGL_lose_context')?.loseContext();\n        return null;\n      }\n      // Compiled the first time a fade is drawn, and again after a lost context.\n      let fadePass: {\n        program: WebGLProgram;\n        uniforms: Record<'uMode' | 'uFade' | 'uSize' | 'uColor', WebGLUniformLocation | null>;\n      } | null = null;\n\n      const onLost = (event: Event): void => {\n        event.preventDefault(); // allow the context to be restored\n        renderer = null;\n        fadePass = null;\n      };\n\n      /** Fade the drawing out towards the edges (`fade` in CSS px), then put `background` (RGBA) behind it. */\n      const fadeEdges = (fade: Fade, dpr: number, background: RGBA): void => {\n        if (!fadePass) {\n          const program = createProgram(gl, FULLSCREEN_VERTEX_SHADER, FADE_FRAGMENT);\n          if (!program) return; // context lost\n          fadePass = { program, uniforms: getUniforms(gl, program, ['uMode', 'uFade', 'uSize', 'uColor'] as const) };\n        }\n        const { uniforms } = fadePass;\n        gl.useProgram(fadePass.program);\n        gl.uniform1f(uniforms.uMode, 0);\n        gl.uniform4f(uniforms.uFade, fade.top * dpr, fade.right * dpr, fade.bottom * dpr, fade.left * dpr);\n        gl.uniform2f(uniforms.uSize, gl.drawingBufferWidth, gl.drawingBufferHeight);\n        gl.blendFunc(gl.ZERO, gl.ONE_MINUS_SRC_ALPHA);\n        gl.drawArrays(gl.TRIANGLES, 0, 3);\n        const [r, g, b, a] = background;\n        if (a > 0) {\n          gl.uniform1f(uniforms.uMode, 1);\n          gl.uniform4f(uniforms.uColor, r * a, g * a, b * a, a);\n          gl.blendFunc(gl.ONE_MINUS_DST_ALPHA, gl.ONE);\n          gl.drawArrays(gl.TRIANGLES, 0, 3);\n        }\n      };\n\n      const onRestored = (): void => {\n        renderer = createRenderer(gl, options);\n        invalidate();\n      };\n\n      canvas.addEventListener('webglcontextlost', onLost);\n      canvas.addEventListener('webglcontextrestored', onRestored);\n\n      return {\n        name: 'webgl',\n        update(next) {\n          options = next;\n          renderer?.update(next);\n        },\n        render(frame, backgroundColor, fade) {\n          if (!renderer) return false;\n          const background = parseColor(backgroundColor);\n          const [r, g, b, a] = background;\n          gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);\n          // With a fade, the background goes in last, behind the faded drawing, so it stays solid.\n          const fading = fades(fade);\n          if (fading) gl.clearColor(0, 0, 0, 0);\n          else gl.clearColor(r * a, g * a, b * a, a);\n          gl.clear(gl.COLOR_BUFFER_BIT);\n          gl.enable(gl.BLEND);\n          gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);\n          const busy = renderer.render(frame) === true;\n          if (fading) fadeEdges(fade, frame.dpr, background);\n          return busy;\n        },\n        clear() {\n          if (!renderer) return;\n          gl.clearColor(0, 0, 0, 0);\n          gl.clear(gl.COLOR_BUFFER_BIT);\n        },\n        destroy() {\n          canvas.removeEventListener('webglcontextlost', onLost);\n          canvas.removeEventListener('webglcontextrestored', onRestored);\n          renderer?.destroy?.();\n          renderer = null;\n          if (fadePass) gl.deleteProgram(fadePass.program);\n          fadePass = null;\n        },\n      };\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/core/webgl-renderer.d.cts

@@ -0,0 +1,8 @@
+import type { StyleRenderer } from './style.cjs';
+import { type Renderer } from './surface.cjs';
+/**
+ * Draw a style with WebGL2. The engine clears to the background colour, sets
+ * the viewport and premultiplied-alpha blending, and recreates the renderer
+ * after a lost context is restored.
+ */
+export declare function webglRenderer<O>(createRenderer: (gl: WebGL2RenderingContext, options: O) => StyleRenderer<O>): Renderer<O>;

package/dist/core/webgl-renderer.d.ts

@@ -0,0 +1,8 @@
+import type { StyleRenderer } from './style.js';
+import { type Renderer } from './surface.js';
+/**
+ * Draw a style with WebGL2. The engine clears to the background colour, sets
+ * the viewport and premultiplied-alpha blending, and recreates the renderer
+ * after a lost context is restored.
+ */
+export declare function webglRenderer<O>(createRenderer: (gl: WebGL2RenderingContext, options: O) => StyleRenderer<O>): Renderer<O>;

package/dist/core/webgl-renderer.js

@@ -0,0 +1,137 @@
+import { fades } from "./surface.js";
+import { parseColor } from "./color.js";
+import { FULLSCREEN_VERTEX_SHADER, createProgram, getUniforms } from "./webgl.js";
+// src/core/webgl-renderer.ts
+var WEBGL_ATTRIBUTES = {
+	alpha: true,
+	premultipliedAlpha: true,
+	antialias: false,
+	depth: false,
+	stencil: false,
+	preserveDrawingBuffer: false,
+	powerPreference: "low-power"
+};
+var FADE_FRAGMENT = `#version 300 es
+precision highp float;
+uniform float uMode;
+uniform vec4 uFade;    // top, right, bottom, left, device px (0 = no fade)
+uniform vec2 uSize;    // drawing buffer size, device px
+uniform vec4 uColor;   // premultiplied background colour
+out vec4 outColor;
+
+float keep(float distance, float length) {
+  return length > 0.0 ? clamp(distance / length, 0.0, 1.0) : 1.0;
+}
+
+void main() {
+  if (uMode > 0.5) {
+    outColor = uColor;
+    return;
+  }
+  vec2 p = gl_FragCoord.xy; // origin at the bottom left
+  float kept = keep(uSize.y - p.y, uFade.x) * keep(uSize.x - p.x, uFade.y) * keep(p.y, uFade.z) * keep(p.x, uFade.w);
+  outColor = vec4(0.0, 0.0, 0.0, 1.0 - kept);
+}`;
+/**
+* Draw a style with WebGL2. The engine clears to the background colour, sets
+* the viewport and premultiplied-alpha blending, and recreates the renderer
+* after a lost context is restored.
+*/
+function webglRenderer(createRenderer) {
+	return {
+		name: "webgl",
+		create(canvas, initial, invalidate) {
+			const gl = canvas.getContext("webgl2", WEBGL_ATTRIBUTES);
+			if (!gl) return null;
+			let options = initial;
+			let renderer;
+			try {
+				renderer = createRenderer(gl, options);
+			} catch (error) {
+				console.warn("interactive-bg: WebGL setup failed, trying the next renderer", error);
+				gl.getExtension("WEBGL_lose_context")?.loseContext();
+				return null;
+			}
+			let fadePass = null;
+			const onLost = (event) => {
+				event.preventDefault();
+				renderer = null;
+				fadePass = null;
+			};
+			/** Fade the drawing out towards the edges (`fade` in CSS px), then put `background` (RGBA) behind it. */
+			const fadeEdges = (fade, dpr, background) => {
+				if (!fadePass) {
+					const program = createProgram(gl, FULLSCREEN_VERTEX_SHADER, FADE_FRAGMENT);
+					if (!program) return;
+					fadePass = {
+						program,
+						uniforms: getUniforms(gl, program, [
+							"uMode",
+							"uFade",
+							"uSize",
+							"uColor"
+						])
+					};
+				}
+				const { uniforms } = fadePass;
+				gl.useProgram(fadePass.program);
+				gl.uniform1f(uniforms.uMode, 0);
+				gl.uniform4f(uniforms.uFade, fade.top * dpr, fade.right * dpr, fade.bottom * dpr, fade.left * dpr);
+				gl.uniform2f(uniforms.uSize, gl.drawingBufferWidth, gl.drawingBufferHeight);
+				gl.blendFunc(gl.ZERO, gl.ONE_MINUS_SRC_ALPHA);
+				gl.drawArrays(gl.TRIANGLES, 0, 3);
+				const [r, g, b, a] = background;
+				if (a > 0) {
+					gl.uniform1f(uniforms.uMode, 1);
+					gl.uniform4f(uniforms.uColor, r * a, g * a, b * a, a);
+					gl.blendFunc(gl.ONE_MINUS_DST_ALPHA, gl.ONE);
+					gl.drawArrays(gl.TRIANGLES, 0, 3);
+				}
+			};
+			const onRestored = () => {
+				renderer = createRenderer(gl, options);
+				invalidate();
+			};
+			canvas.addEventListener("webglcontextlost", onLost);
+			canvas.addEventListener("webglcontextrestored", onRestored);
+			return {
+				name: "webgl",
+				update(next) {
+					options = next;
+					renderer?.update(next);
+				},
+				render(frame, backgroundColor, fade) {
+					if (!renderer) return false;
+					const background = parseColor(backgroundColor);
+					const [r, g, b, a] = background;
+					gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+					const fading = fades(fade);
+					if (fading) gl.clearColor(0, 0, 0, 0);
+					else gl.clearColor(r * a, g * a, b * a, a);
+					gl.clear(gl.COLOR_BUFFER_BIT);
+					gl.enable(gl.BLEND);
+					gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+					const busy = renderer.render(frame) === true;
+					if (fading) fadeEdges(fade, frame.dpr, background);
+					return busy;
+				},
+				clear() {
+					if (!renderer) return;
+					gl.clearColor(0, 0, 0, 0);
+					gl.clear(gl.COLOR_BUFFER_BIT);
+				},
+				destroy() {
+					canvas.removeEventListener("webglcontextlost", onLost);
+					canvas.removeEventListener("webglcontextrestored", onRestored);
+					renderer?.destroy?.();
+					renderer = null;
+					if (fadePass) gl.deleteProgram(fadePass.program);
+					fadePass = null;
+				}
+			};
+		}
+	};
+}
+export { webglRenderer };
+
+//# sourceMappingURL=webgl-renderer.js.map

package/dist/core/webgl-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgl-renderer.js","names":[],"sources":["../../src/core/webgl-renderer.ts"],"sourcesContent":["import { parseColor, type RGBA } from './color';\nimport type { StyleRenderer } from './style';\nimport { fades, type Fade, type Renderer } from './surface';\nimport { createProgram, FULLSCREEN_VERTEX_SHADER, getUniforms } from './webgl';\n\nconst WEBGL_ATTRIBUTES: WebGLContextAttributes = {\n  alpha: true,\n  premultipliedAlpha: true,\n  antialias: false, // styles antialias in their shaders; MSAA would only cost memory\n  depth: false,\n  stencil: false,\n  preserveDrawingBuffer: false,\n  powerPreference: 'low-power',\n};\n\n// The edge fades, drawn after the style. Mode 0 scales what's there by how much of it each side\n// keeps (1 inside, down to 0 at a fading edge, multiplied over the sides) with blend\n// ZERO, ONE_MINUS_SRC_ALPHA. Mode 1 paints the premultiplied background colour behind it, where\n// the drawing is transparent (blend ONE_MINUS_DST_ALPHA, ONE).\nconst FADE_FRAGMENT = `#version 300 es\nprecision highp float;\nuniform float uMode;\nuniform vec4 uFade;    // top, right, bottom, left, device px (0 = no fade)\nuniform vec2 uSize;    // drawing buffer size, device px\nuniform vec4 uColor;   // premultiplied background colour\nout vec4 outColor;\n\nfloat keep(float distance, float length) {\n  return length > 0.0 ? clamp(distance / length, 0.0, 1.0) : 1.0;\n}\n\nvoid main() {\n  if (uMode > 0.5) {\n    outColor = uColor;\n    return;\n  }\n  vec2 p = gl_FragCoord.xy; // origin at the bottom left\n  float kept = keep(uSize.y - p.y, uFade.x) * keep(uSize.x - p.x, uFade.y) * keep(p.y, uFade.z) * keep(p.x, uFade.w);\n  outColor = vec4(0.0, 0.0, 0.0, 1.0 - kept);\n}`;\n\n/**\n * Draw a style with WebGL2. The engine clears to the background colour, sets\n * the viewport and premultiplied-alpha blending, and recreates the renderer\n * after a lost context is restored.\n */\nexport function webglRenderer<O>(createRenderer: (gl: WebGL2RenderingContext, options: O) => StyleRenderer<O>): Renderer<O> {\n  return {\n    name: 'webgl',\n    create(canvas, initial, invalidate) {\n      const gl = canvas.getContext('webgl2', WEBGL_ATTRIBUTES);\n      if (!gl) return null;\n\n      let options = initial;\n      // `null` while the context is lost: its GPU resources are gone.\n      let renderer: StyleRenderer<O> | null;\n      try {\n        renderer = createRenderer(gl, options);\n      } catch (error) {\n        // E.g. a shader this GPU's driver rejects: let the engine try the next renderer.\n        console.warn('interactive-bg: WebGL setup failed, trying the next renderer', error);\n        gl.getExtension('WEBGL_lose_context')?.loseContext();\n        return null;\n      }\n      // Compiled the first time a fade is drawn, and again after a lost context.\n      let fadePass: {\n        program: WebGLProgram;\n        uniforms: Record<'uMode' | 'uFade' | 'uSize' | 'uColor', WebGLUniformLocation | null>;\n      } | null = null;\n\n      const onLost = (event: Event): void => {\n        event.preventDefault(); // allow the context to be restored\n        renderer = null;\n        fadePass = null;\n      };\n\n      /** Fade the drawing out towards the edges (`fade` in CSS px), then put `background` (RGBA) behind it. */\n      const fadeEdges = (fade: Fade, dpr: number, background: RGBA): void => {\n        if (!fadePass) {\n          const program = createProgram(gl, FULLSCREEN_VERTEX_SHADER, FADE_FRAGMENT);\n          if (!program) return; // context lost\n          fadePass = { program, uniforms: getUniforms(gl, program, ['uMode', 'uFade', 'uSize', 'uColor'] as const) };\n        }\n        const { uniforms } = fadePass;\n        gl.useProgram(fadePass.program);\n        gl.uniform1f(uniforms.uMode, 0);\n        gl.uniform4f(uniforms.uFade, fade.top * dpr, fade.right * dpr, fade.bottom * dpr, fade.left * dpr);\n        gl.uniform2f(uniforms.uSize, gl.drawingBufferWidth, gl.drawingBufferHeight);\n        gl.blendFunc(gl.ZERO, gl.ONE_MINUS_SRC_ALPHA);\n        gl.drawArrays(gl.TRIANGLES, 0, 3);\n        const [r, g, b, a] = background;\n        if (a > 0) {\n          gl.uniform1f(uniforms.uMode, 1);\n          gl.uniform4f(uniforms.uColor, r * a, g * a, b * a, a);\n          gl.blendFunc(gl.ONE_MINUS_DST_ALPHA, gl.ONE);\n          gl.drawArrays(gl.TRIANGLES, 0, 3);\n        }\n      };\n\n      const onRestored = (): void => {\n        renderer = createRenderer(gl, options);\n        invalidate();\n      };\n\n      canvas.addEventListener('webglcontextlost', onLost);\n      canvas.addEventListener('webglcontextrestored', onRestored);\n\n      return {\n        name: 'webgl',\n        update(next) {\n          options = next;\n          renderer?.update(next);\n        },\n        render(frame, backgroundColor, fade) {\n          if (!renderer) return false;\n          const background = parseColor(backgroundColor);\n          const [r, g, b, a] = background;\n          gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);\n          // With a fade, the background goes in last, behind the faded drawing, so it stays solid.\n          const fading = fades(fade);\n          if (fading) gl.clearColor(0, 0, 0, 0);\n          else gl.clearColor(r * a, g * a, b * a, a);\n          gl.clear(gl.COLOR_BUFFER_BIT);\n          gl.enable(gl.BLEND);\n          gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);\n          const busy = renderer.render(frame) === true;\n          if (fading) fadeEdges(fade, frame.dpr, background);\n          return busy;\n        },\n        clear() {\n          if (!renderer) return;\n          gl.clearColor(0, 0, 0, 0);\n          gl.clear(gl.COLOR_BUFFER_BIT);\n        },\n        destroy() {\n          canvas.removeEventListener('webglcontextlost', onLost);\n          canvas.removeEventListener('webglcontextrestored', onRestored);\n          renderer?.destroy?.();\n          renderer = null;\n          if (fadePass) gl.deleteProgram(fadePass.program);\n          fadePass = null;\n        },\n      };\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/core/webgl.cjs

@@ -0,0 +1,62 @@
+// src/core/webgl.ts
+/**
+* Vertex shader for one triangle that covers the whole viewport, drawn with
+* `gl.drawArrays(gl.TRIANGLES, 0, 3)` and no vertex buffers. Pair it with a
+* fragment shader that works per pixel from `gl_FragCoord`.
+*/
+var FULLSCREEN_VERTEX_SHADER = `#version 300 es
+void main() {
+  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
+}`;
+/**
+* Compile and link a shader program. Returns `null` if the context is lost, and
+* throws with the driver's message if a shader doesn't compile or link (the
+* engine then falls back to the style's next renderer). Nothing is left behind
+* on failure.
+*/
+function createProgram(gl, vertexSource, fragmentSource) {
+	const program = gl.createProgram();
+	let vertex = null;
+	let fragment = null;
+	try {
+		vertex = compile(gl, gl.VERTEX_SHADER, vertexSource);
+		fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource);
+		if (!program || !vertex || !fragment) {
+			gl.deleteProgram(program);
+			return null;
+		}
+		gl.attachShader(program, vertex);
+		gl.attachShader(program, fragment);
+		gl.linkProgram(program);
+		if (!gl.getProgramParameter(program, gl.LINK_STATUS) && !gl.isContextLost()) throw new Error(`interactive-bg: shader link error: ${gl.getProgramInfoLog(program)}`);
+		return program;
+	} catch (error) {
+		gl.deleteProgram(program);
+		throw error;
+	} finally {
+		gl.deleteShader(vertex);
+		gl.deleteShader(fragment);
+	}
+}
+/** Look up uniform locations by name. */
+function getUniforms(gl, program, names) {
+	return Object.fromEntries(names.map((name) => [name, gl.getUniformLocation(program, name)]));
+}
+function compile(gl, type, source) {
+	const shader = gl.createShader(type);
+	if (!shader) return null;
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS) && !gl.isContextLost()) {
+		const log = gl.getShaderInfoLog(shader);
+		gl.deleteShader(shader);
+		throw new Error(`interactive-bg: shader error: ${log}`);
+	}
+	return shader;
+}
+exports.FULLSCREEN_VERTEX_SHADER = FULLSCREEN_VERTEX_SHADER;
+exports.createProgram = createProgram;
+exports.getUniforms = getUniforms;
+
+//# sourceMappingURL=webgl.cjs.map

package/dist/core/webgl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgl.cjs","names":[],"sources":["../../src/core/webgl.ts"],"sourcesContent":["/**\n * Vertex shader for one triangle that covers the whole viewport, drawn with\n * `gl.drawArrays(gl.TRIANGLES, 0, 3)` and no vertex buffers. Pair it with a\n * fragment shader that works per pixel from `gl_FragCoord`.\n */\nexport const FULLSCREEN_VERTEX_SHADER = `#version 300 es\nvoid main() {\n  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));\n  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);\n}`;\n\n/**\n * Compile and link a shader program. Returns `null` if the context is lost, and\n * throws with the driver's message if a shader doesn't compile or link (the\n * engine then falls back to the style's next renderer). Nothing is left behind\n * on failure.\n */\nexport function createProgram(\n  gl: WebGL2RenderingContext,\n  vertexSource: string,\n  fragmentSource: string,\n): WebGLProgram | null {\n  const program = gl.createProgram();\n  let vertex: WebGLShader | null = null;\n  let fragment: WebGLShader | null = null;\n  try {\n    vertex = compile(gl, gl.VERTEX_SHADER, vertexSource);\n    fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource);\n    if (!program || !vertex || !fragment) {\n      gl.deleteProgram(program);\n      return null;\n    }\n    gl.attachShader(program, vertex);\n    gl.attachShader(program, fragment);\n    gl.linkProgram(program);\n    if (!gl.getProgramParameter(program, gl.LINK_STATUS) && !gl.isContextLost()) {\n      throw new Error(`interactive-bg: shader link error: ${gl.getProgramInfoLog(program)}`);\n    }\n    return program;\n  } catch (error) {\n    gl.deleteProgram(program);\n    throw error;\n  } finally {\n    // Linked programs keep their own copy; the shader objects aren't needed either way.\n    gl.deleteShader(vertex);\n    gl.deleteShader(fragment);\n  }\n}\n\n/** Look up uniform locations by name. */\nexport function getUniforms<N extends string>(\n  gl: WebGL2RenderingContext,\n  program: WebGLProgram,\n  names: readonly N[],\n): Record<N, WebGLUniformLocation | null> {\n  return Object.fromEntries(names.map((name) => [name, gl.getUniformLocation(program, name)])) as Record<\n    N,\n    WebGLUniformLocation | null\n  >;\n}\n\nfunction compile(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader | null {\n  const shader = gl.createShader(type);\n  if (!shader) return null;\n  gl.shaderSource(shader, source);\n  gl.compileShader(shader);\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS) && !gl.isContextLost()) {\n    const log = gl.getShaderInfoLog(shader);\n    gl.deleteShader(shader);\n    throw new Error(`interactive-bg: shader error: ${log}`);\n  }\n  return shader;\n}\n"],"mappings":";;;;;;AAKA,IAAa,2BAA2B;;;;;;;;;;;AAYxC,SAAgB,cACd,IACA,cACA,gBACqB;CACrB,MAAM,UAAU,GAAG,cAAc;CACjC,IAAI,SAA6B;CACjC,IAAI,WAA+B;CACnC,IAAI;EACF,SAAS,QAAQ,IAAI,GAAG,eAAe,YAAY;EACnD,WAAW,QAAQ,IAAI,GAAG,iBAAiB,cAAc;EACzD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,UAAU;GACpC,GAAG,cAAc,OAAO;GACxB,OAAO;EACT;EACA,GAAG,aAAa,SAAS,MAAM;EAC/B,GAAG,aAAa,SAAS,QAAQ;EACjC,GAAG,YAAY,OAAO;EACtB,IAAI,CAAC,GAAG,oBAAoB,SAAS,GAAG,WAAW,KAAK,CAAC,GAAG,cAAc,GACxE,MAAM,IAAI,MAAM,sCAAsC,GAAG,kBAAkB,OAAO,GAAG;EAEvF,OAAO;CACT,SAAS,OAAO;EACd,GAAG,cAAc,OAAO;EACxB,MAAM;CACR,UAAU;EAER,GAAG,aAAa,MAAM;EACtB,GAAG,aAAa,QAAQ;CAC1B;AACF;;AAGA,SAAgB,YACd,IACA,SACA,OACwC;CACxC,OAAO,OAAO,YAAY,MAAM,KAAK,SAAS,CAAC,MAAM,GAAG,mBAAmB,SAAS,IAAI,CAAC,CAAC,CAAC;AAI7F;AAEA,SAAS,QAAQ,IAA4B,MAAc,QAAoC;CAC7F,MAAM,SAAS,GAAG,aAAa,IAAI;CACnC,IAAI,CAAC,QAAQ,OAAO;CACpB,GAAG,aAAa,QAAQ,MAAM;CAC9B,GAAG,cAAc,MAAM;CACvB,IAAI,CAAC,GAAG,mBAAmB,QAAQ,GAAG,cAAc,KAAK,CAAC,GAAG,cAAc,GAAG;EAC5E,MAAM,MAAM,GAAG,iBAAiB,MAAM;EACtC,GAAG,aAAa,MAAM;EACtB,MAAM,IAAI,MAAM,iCAAiC,KAAK;CACxD;CACA,OAAO;AACT"}

package/dist/core/webgl.d.cts

@@ -0,0 +1,15 @@
+/**
+ * Vertex shader for one triangle that covers the whole viewport, drawn with
+ * `gl.drawArrays(gl.TRIANGLES, 0, 3)` and no vertex buffers. Pair it with a
+ * fragment shader that works per pixel from `gl_FragCoord`.
+ */
+export declare const FULLSCREEN_VERTEX_SHADER = "#version 300 es\nvoid main() {\n  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));\n  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);\n}";
+/**
+ * Compile and link a shader program. Returns `null` if the context is lost, and
+ * throws with the driver's message if a shader doesn't compile or link (the
+ * engine then falls back to the style's next renderer). Nothing is left behind
+ * on failure.
+ */
+export declare function createProgram(gl: WebGL2RenderingContext, vertexSource: string, fragmentSource: string): WebGLProgram | null;
+/** Look up uniform locations by name. */
+export declare function getUniforms<N extends string>(gl: WebGL2RenderingContext, program: WebGLProgram, names: readonly N[]): Record<N, WebGLUniformLocation | null>;

package/dist/core/webgl.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Vertex shader for one triangle that covers the whole viewport, drawn with
+ * `gl.drawArrays(gl.TRIANGLES, 0, 3)` and no vertex buffers. Pair it with a
+ * fragment shader that works per pixel from `gl_FragCoord`.
+ */
+export declare const FULLSCREEN_VERTEX_SHADER = "#version 300 es\nvoid main() {\n  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));\n  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);\n}";
+/**
+ * Compile and link a shader program. Returns `null` if the context is lost, and
+ * throws with the driver's message if a shader doesn't compile or link (the
+ * engine then falls back to the style's next renderer). Nothing is left behind
+ * on failure.
+ */
+export declare function createProgram(gl: WebGL2RenderingContext, vertexSource: string, fragmentSource: string): WebGLProgram | null;
+/** Look up uniform locations by name. */
+export declare function getUniforms<N extends string>(gl: WebGL2RenderingContext, program: WebGLProgram, names: readonly N[]): Record<N, WebGLUniformLocation | null>;

package/dist/core/webgl.js

@@ -0,0 +1,60 @@
+// src/core/webgl.ts
+/**
+* Vertex shader for one triangle that covers the whole viewport, drawn with
+* `gl.drawArrays(gl.TRIANGLES, 0, 3)` and no vertex buffers. Pair it with a
+* fragment shader that works per pixel from `gl_FragCoord`.
+*/
+var FULLSCREEN_VERTEX_SHADER = `#version 300 es
+void main() {
+  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
+}`;
+/**
+* Compile and link a shader program. Returns `null` if the context is lost, and
+* throws with the driver's message if a shader doesn't compile or link (the
+* engine then falls back to the style's next renderer). Nothing is left behind
+* on failure.
+*/
+function createProgram(gl, vertexSource, fragmentSource) {
+	const program = gl.createProgram();
+	let vertex = null;
+	let fragment = null;
+	try {
+		vertex = compile(gl, gl.VERTEX_SHADER, vertexSource);
+		fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource);
+		if (!program || !vertex || !fragment) {
+			gl.deleteProgram(program);
+			return null;
+		}
+		gl.attachShader(program, vertex);
+		gl.attachShader(program, fragment);
+		gl.linkProgram(program);
+		if (!gl.getProgramParameter(program, gl.LINK_STATUS) && !gl.isContextLost()) throw new Error(`interactive-bg: shader link error: ${gl.getProgramInfoLog(program)}`);
+		return program;
+	} catch (error) {
+		gl.deleteProgram(program);
+		throw error;
+	} finally {
+		gl.deleteShader(vertex);
+		gl.deleteShader(fragment);
+	}
+}
+/** Look up uniform locations by name. */
+function getUniforms(gl, program, names) {
+	return Object.fromEntries(names.map((name) => [name, gl.getUniformLocation(program, name)]));
+}
+function compile(gl, type, source) {
+	const shader = gl.createShader(type);
+	if (!shader) return null;
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS) && !gl.isContextLost()) {
+		const log = gl.getShaderInfoLog(shader);
+		gl.deleteShader(shader);
+		throw new Error(`interactive-bg: shader error: ${log}`);
+	}
+	return shader;
+}
+export { FULLSCREEN_VERTEX_SHADER, createProgram, getUniforms };
+
+//# sourceMappingURL=webgl.js.map