fundus 0.0.2

package/dist/runtime/chroma-key-gl.d.ts

@@ -0,0 +1,23 @@
+import { ChromaKeyParameters } from "#fundus/core";
+
+//#region src/chroma-key-gl.d.ts
+declare class ChromaKeyGl {
+  #private;
+  /** Returns null when WebGL2 is unavailable or the shader fails to compile. */
+  static create(canvas: HTMLCanvasElement): ChromaKeyGl | null;
+  private constructor();
+  /**
+   * Set (or clear) the grayscale shape mask multiplied onto the output alpha. The
+   * mask is stretched over the full video frame, so author it at the video's aspect
+   * ratio. Pass null to remove the mask.
+   */
+  setMask(image: TexImageSource | null): void;
+  /**
+   * Upload the video's current frame and render it keyed. Sizes the drawing buffer to
+   * the video's intrinsic size on first draw (and after a size change).
+   */
+  draw(video: HTMLVideoElement, parameters: ChromaKeyParameters): void;
+  dispose(): void;
+}
+//#endregion
+export { ChromaKeyGl };

package/dist/runtime/chroma-key-gl.js

@@ -0,0 +1,290 @@
+//#region src/chroma-key-gl.ts
+const VERTEX_SHADER = `#version 300 es
+in vec2 a_pos;
+out vec2 v_uv;
+void main() {
+	// Fullscreen clip-space triangle pair; v flipped so the video isn't mirrored on Y
+	// (GL texture rows are bottom-up, and flipping here beats a per-frame UNPACK flip).
+	v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);
+	gl_Position = vec4(a_pos, 0.0, 1.0);
+}`;
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+in vec2 v_uv;
+out vec4 fragColor;
+
+uniform sampler2D u_texture;
+uniform sampler2D u_mask;
+uniform vec2 u_texelSize;
+uniform vec3 u_keyColor;
+uniform vec4 u_tintColor;
+uniform float u_colorCutoff;
+uniform float u_colorFeathering;
+uniform float u_maskFeathering;
+uniform float u_sharpening;
+uniform float u_despill;
+uniform float u_despillLuminanceAdd;
+
+float rgb2y(vec3 c) {
+	return 0.299 * c.r + 0.587 * c.g + 0.114 * c.b;
+}
+
+float rgb2cb(vec3 c) {
+	return 0.5 - 0.168736 * c.r - 0.331264 * c.g + 0.5 * c.b;
+}
+
+float rgb2cr(vec3 c) {
+	return 0.5 + 0.5 * c.r - 0.418688 * c.g - 0.081312 * c.b;
+}
+
+float colorclose(float Cb_p, float Cr_p, float Cb_key, float Cr_key, float tola, float tolb) {
+	float temp = (Cb_key - Cb_p) * (Cb_key - Cb_p) + (Cr_key - Cr_p) * (Cr_key - Cr_p);
+	float tola2 = tola * tola;
+	float tolb2 = tolb * tolb;
+	if (temp < tola2) return 0.0;
+	if (temp < tolb2) return (temp - tola2) / (tolb2 - tola2);
+	return 1.0;
+}
+
+float maskedTex2D(sampler2D tex, vec2 uv) {
+	vec4 color = texture(tex, uv);
+
+	float key_cb = rgb2cb(u_keyColor);
+	float key_cr = rgb2cr(u_keyColor);
+	float pix_cb = rgb2cb(color.rgb);
+	float pix_cr = rgb2cr(color.rgb);
+
+	return colorclose(pix_cb, pix_cr, key_cb, key_cr, u_colorCutoff, u_colorFeathering);
+}
+
+void main() {
+	vec2 pixelWidth = vec2(u_texelSize.x, 0.0);
+	vec2 pixelHeight = vec2(0.0, u_texelSize.y);
+
+	// Unmodified MainTex
+	vec4 color = texture(u_texture, v_uv);
+
+	// Unfeathered mask
+	float mask = maskedTex2D(u_texture, v_uv);
+
+	// Feathering & smoothing
+	float c = mask;
+	float r = maskedTex2D(u_texture, v_uv + pixelWidth);
+	float l = maskedTex2D(u_texture, v_uv - pixelWidth);
+	float d = maskedTex2D(u_texture, v_uv + pixelHeight);
+	float u = maskedTex2D(u_texture, v_uv - pixelHeight);
+	float rd = maskedTex2D(u_texture, v_uv + pixelWidth + pixelHeight) * 0.707;
+	float dl = maskedTex2D(u_texture, v_uv - pixelWidth + pixelHeight) * 0.707;
+	float lu = maskedTex2D(u_texture, v_uv - pixelHeight - pixelWidth) * 0.707;
+	float ur = maskedTex2D(u_texture, v_uv + pixelWidth - pixelHeight) * 0.707;
+	float blurContribution = (r + l + d + u + rd + dl + lu + ur + c) * 0.12774655;
+	float smoothedMask = smoothstep(u_sharpening, 1.0, mix(c, blurContribution, u_maskFeathering));
+	vec4 result = color * smoothedMask;
+
+	// Despill
+	float v = (2.0 * result.b + result.r) / 4.0;
+	if (result.g > v) result.g = mix(result.g, v, u_despill);
+	vec4 dif = color - result;
+	float desaturatedDif = rgb2y(dif.xyz);
+	result += mix(0.0, desaturatedDif, u_despillLuminanceAdd);
+
+	// Fundus mask pass: a grayscale shape mask multiplies
+	// the keyed alpha.
+	float shapeMask = texture(u_mask, v_uv).r;
+	vec4 keyed = vec4(result.xyz, smoothedMask * shapeMask) * u_tintColor;
+
+	// Premultiplied output: keyed matches the upstream SrcAlpha/OneMinusSrcAlpha
+	// blending; multiplying rgb by alpha is that blend's exact premultiplied
+	// equivalent. Straight-alpha output (premultipliedAlpha: false) is NOT an option:
+	// iOS WKWebView composites the WebGL canvas as premultiplied regardless of the
+	// flag, and the despill luminance-add above leaves fully-transparent background
+	// pixels with nonzero rgb (the upstream blend ignores rgb
+	// at alpha 0) which then composite additively — a visible bright veil over the
+	// whole canvas rect on iOS.
+	fragColor = vec4(keyed.rgb * keyed.a, keyed.a);
+}`;
+function compileProgram(gl) {
+	const compile = (type, source) => {
+		const shader = gl.createShader(type);
+		gl.shaderSource(shader, source);
+		gl.compileShader(shader);
+		if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+			const log = gl.getShaderInfoLog(shader);
+			gl.deleteShader(shader);
+			throw new Error(`Chroma-key shader compilation failed: ${log}.`);
+		}
+		return shader;
+	};
+	const program = gl.createProgram();
+	gl.attachShader(program, compile(gl.VERTEX_SHADER, VERTEX_SHADER));
+	gl.attachShader(program, compile(gl.FRAGMENT_SHADER, FRAGMENT_SHADER));
+	gl.linkProgram(program);
+	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+		const log = gl.getProgramInfoLog(program);
+		gl.deleteProgram(program);
+		throw new Error(`Chroma-key program linking failed: ${log}.`);
+	}
+	return program;
+}
+var ChromaKeyGl = class ChromaKeyGl {
+	#gl;
+	#canvas;
+	#program;
+	#quadBuffer;
+	#texture;
+	#uniforms;
+	#maskTexture;
+	/** Last mask image, kept so the texture can be re-uploaded after a context restore. */
+	#maskImage = null;
+	/** True between webglcontextlost and webglcontextrestored — draw no-ops meanwhile. */
+	#contextLost = false;
+	/** Returns null when WebGL2 is unavailable or the shader fails to compile. */
+	static create(canvas) {
+		const gl = canvas.getContext("webgl2", {
+			premultipliedAlpha: true,
+			alpha: true,
+			depth: false,
+			stencil: false,
+			antialias: false
+		});
+		if (!gl) return null;
+		try {
+			return new ChromaKeyGl(gl, canvas);
+		} catch {
+			return null;
+		}
+	}
+	constructor(gl, canvas) {
+		this.#gl = gl;
+		this.#canvas = canvas;
+		canvas.addEventListener("webglcontextlost", this.#handleContextLost);
+		canvas.addEventListener("webglcontextrestored", this.#handleContextRestored);
+		this.#initResources();
+	}
+	#handleContextLost = (event) => {
+		event.preventDefault();
+		this.#contextLost = true;
+	};
+	#handleContextRestored = () => {
+		try {
+			this.#initResources();
+			this.#contextLost = false;
+		} catch {
+			this.#contextLost = true;
+		}
+	};
+	/** (Re)create all GL resources on the current context — at construction and after restore. */
+	#initResources() {
+		const gl = this.#gl;
+		this.#program = compileProgram(gl);
+		gl.useProgram(this.#program);
+		const location = (name) => gl.getUniformLocation(this.#program, name);
+		this.#uniforms = {
+			texelSize: location("u_texelSize"),
+			keyColor: location("u_keyColor"),
+			tintColor: location("u_tintColor"),
+			colorCutoff: location("u_colorCutoff"),
+			colorFeathering: location("u_colorFeathering"),
+			maskFeathering: location("u_maskFeathering"),
+			sharpening: location("u_sharpening"),
+			despill: location("u_despill"),
+			despillLuminanceAdd: location("u_despillLuminanceAdd")
+		};
+		gl.uniform1i(gl.getUniformLocation(this.#program, "u_texture"), 0);
+		gl.uniform1i(gl.getUniformLocation(this.#program, "u_mask"), 1);
+		gl.uniform4f(this.#uniforms.tintColor, 1, 1, 1, 1);
+		this.#quadBuffer = gl.createBuffer();
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.#quadBuffer);
+		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+			-1,
+			-1,
+			1,
+			-1,
+			-1,
+			1,
+			1,
+			1
+		]), gl.STATIC_DRAW);
+		const positionLocation = gl.getAttribLocation(this.#program, "a_pos");
+		gl.enableVertexAttribArray(positionLocation);
+		gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+		this.#texture = gl.createTexture();
+		gl.bindTexture(gl.TEXTURE_2D, this.#texture);
+		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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+		this.#maskTexture = gl.createTexture();
+		gl.bindTexture(gl.TEXTURE_2D, this.#maskTexture);
+		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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+		this.#uploadMask();
+		gl.disable(gl.DEPTH_TEST);
+		gl.disable(gl.BLEND);
+		gl.clearColor(0, 0, 0, 0);
+	}
+	/**
+	* Set (or clear) the grayscale shape mask multiplied onto the output alpha. The
+	* mask is stretched over the full video frame, so author it at the video's aspect
+	* ratio. Pass null to remove the mask.
+	*/
+	setMask(image) {
+		this.#maskImage = image;
+		if (!this.#contextLost) this.#uploadMask();
+	}
+	#uploadMask() {
+		const gl = this.#gl;
+		gl.bindTexture(gl.TEXTURE_2D, this.#maskTexture);
+		if (this.#maskImage) gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.#maskImage);
+		else gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([
+			255,
+			255,
+			255,
+			255
+		]));
+	}
+	/**
+	* Upload the video's current frame and render it keyed. Sizes the drawing buffer to
+	* the video's intrinsic size on first draw (and after a size change).
+	*/
+	draw(video, parameters) {
+		if (this.#contextLost || video.videoWidth === 0) return;
+		const gl = this.#gl;
+		if (this.#canvas.width !== video.videoWidth || this.#canvas.height !== video.videoHeight) {
+			this.#canvas.width = video.videoWidth;
+			this.#canvas.height = video.videoHeight;
+			gl.viewport(0, 0, video.videoWidth, video.videoHeight);
+		}
+		gl.activeTexture(gl.TEXTURE1);
+		gl.bindTexture(gl.TEXTURE_2D, this.#maskTexture);
+		gl.activeTexture(gl.TEXTURE0);
+		gl.bindTexture(gl.TEXTURE_2D, this.#texture);
+		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
+		gl.useProgram(this.#program);
+		gl.uniform2f(this.#uniforms.texelSize, 1 / video.videoWidth, 1 / video.videoHeight);
+		gl.uniform3fv(this.#uniforms.keyColor, parameters.keyColor);
+		gl.uniform1f(this.#uniforms.colorCutoff, parameters.colorCutoff);
+		gl.uniform1f(this.#uniforms.colorFeathering, parameters.colorFeathering);
+		gl.uniform1f(this.#uniforms.maskFeathering, parameters.maskFeathering);
+		gl.uniform1f(this.#uniforms.sharpening, parameters.sharpening);
+		gl.uniform1f(this.#uniforms.despill, parameters.despill);
+		gl.uniform1f(this.#uniforms.despillLuminanceAdd, parameters.despillLuminanceAdd);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+		gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+	}
+	dispose() {
+		this.#canvas.removeEventListener("webglcontextlost", this.#handleContextLost);
+		this.#canvas.removeEventListener("webglcontextrestored", this.#handleContextRestored);
+		const gl = this.#gl;
+		gl.deleteBuffer(this.#quadBuffer);
+		gl.deleteTexture(this.#texture);
+		gl.deleteTexture(this.#maskTexture);
+		gl.deleteProgram(this.#program);
+		gl.getExtension("WEBGL_lose_context")?.loseContext();
+	}
+};
+//#endregion
+export { ChromaKeyGl };

package/dist/runtime/components/ChromaKeyVideo.svelte

@@ -0,0 +1,225 @@
+<!--
+	Plays a greenscreen video keyed onto a transparent canvas. Video and mask
+	sources are read at mount; keying parameters are read for every frame.
+-->
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import type { ChromaKeyVideoManifestEntry } from '#fundus/core';
+	import { ChromaKeyGl } from '../chroma-key-gl';
+	import { resolveRetainedSource } from '../preload-registry';
+
+	interface Props {
+		src: ChromaKeyVideoManifestEntry;
+		/** Loop playback (default true for keyed clips). */
+		loop?: boolean;
+		/**
+		 * Playback on/off (default true) — false pauses the video AND the render loop,
+		 * so an off-screen instance costs nothing. The canvas keeps showing the last
+		 * keyed frame; a keying-parameter change repaints that still frame in place.
+		 */
+		playing?: boolean;
+		/** Rendered instead of the canvas when WebGL2 is unavailable; overrides the entry's fallback image. */
+		fallback?: Snippet;
+		/** Bindable handle on the (hidden) source element, so a host can drive playback itself. */
+		videoElement?: HTMLVideoElement;
+		class?: string;
+	}
+
+	let {
+		src,
+		loop = true,
+		playing = true,
+		fallback,
+		videoElement = $bindable(),
+		class: className = ''
+	}: Props = $props();
+
+	let canvasElement = $state<HTMLCanvasElement>();
+	let webglUnavailable = $state(false);
+
+	let renderer: ChromaKeyGl | null = null;
+
+	// Render loop: requestVideoFrameCallback fires once per *presented* video frame
+	// (and never while paused), so upload + draw happen only when there is a new
+	// frame — rAF is the fallback for browsers without it.
+	let frameHandle = 0;
+	let loopRunning = false;
+
+	function drawCurrentFrame() {
+		const video = videoElement;
+		if (renderer && video && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+			renderer.draw(video, src.chromaKey);
+		}
+	}
+
+	function onFrame() {
+		drawCurrentFrame();
+		if (loopRunning) scheduleNextFrame();
+	}
+
+	function scheduleNextFrame() {
+		const video = videoElement!;
+		frameHandle = video.requestVideoFrameCallback
+			? video.requestVideoFrameCallback(onFrame)
+			: requestAnimationFrame(onFrame);
+	}
+
+	function startLoop() {
+		if (loopRunning) return;
+		loopRunning = true;
+		scheduleNextFrame();
+	}
+
+	function stopLoop() {
+		if (!loopRunning) return;
+		loopRunning = false;
+		const video = videoElement;
+		if (video?.cancelVideoFrameCallback) video.cancelVideoFrameCallback(frameHandle);
+		else cancelAnimationFrame(frameHandle);
+	}
+
+	// Playback control only starts/stops the element; the render loop follows the
+	// element's actual `play`/`pause` events (see the listener effect below), so it
+	// stops correctly no matter who pauses — the `playing` prop OR a host driving
+	// the bound element directly (e.g. the editor's PlaybackControls scrubber).
+	function resumePlayback() {
+		if (!playing || webglUnavailable) return;
+		videoElement?.play().catch(() => {});
+	}
+
+	function pausePlayback() {
+		videoElement?.pause();
+	}
+
+	onMount(() => {
+		renderer = ChromaKeyGl.create(canvasElement!);
+		if (!renderer) {
+			webglUnavailable = true;
+			return;
+		}
+		const activeRenderer = renderer;
+
+		const maskSource = src.mask?.src;
+		if (maskSource) {
+			const image = new Image();
+			image.src = maskSource;
+			image
+				.decode()
+				.then(() => {
+					if (renderer === activeRenderer) activeRenderer.setMask(image);
+				})
+				.catch(() => {
+					console.warn(`Failed to load chroma-key mask "${maskSource}".`);
+				});
+		}
+
+		return () => {
+			stopLoop();
+			activeRenderer.dispose();
+			renderer = null;
+		};
+	});
+
+	// The render loop tracks the element's real playback state: play starts it,
+	// pause/ended stop it (so a paused instance costs nothing, even on the rAF
+	// fallback that fires regardless of playback). A seek while paused repaints the
+	// single new frame so scrubbing updates the canvas without running the loop.
+	$effect(() => {
+		const video = videoElement;
+		if (!video) return;
+		function onPlay() {
+			startLoop();
+		}
+		function onStop() {
+			stopLoop();
+			drawCurrentFrame();
+		}
+		function onSeeked() {
+			if (!loopRunning) drawCurrentFrame();
+		}
+		video.addEventListener('play', onPlay);
+		video.addEventListener('pause', onStop);
+		video.addEventListener('ended', onStop);
+		video.addEventListener('seeked', onSeeked);
+		return () => {
+			video.removeEventListener('play', onPlay);
+			video.removeEventListener('pause', onStop);
+			video.removeEventListener('ended', onStop);
+			video.removeEventListener('seeked', onSeeked);
+		};
+	});
+
+	// Drive playback from `playing` (runs after onMount, so the renderer exists —
+	// or WebGL is known to be unavailable and nothing starts).
+	$effect(() => {
+		if (webglUnavailable) return;
+		if (playing) resumePlayback();
+		else pausePlayback();
+	});
+
+	// Retune a still frame live: the draw loop only runs during playback, so a
+	// keying change while paused (the editor tuning a bubble on a still frame)
+	// would otherwise leave the canvas stale until the next play/seek. Reading the
+	// keying fields here makes this a reactive dependency; when the loop is already
+	// running its per-frame draw handles it, so only repaint when it isn't.
+	$effect(() => {
+		const key = src.chromaKey;
+		// Touch every keying field so the effect re-runs on any of them.
+		void [
+			key.keyColor,
+			key.colorCutoff,
+			key.colorFeathering,
+			key.maskFeathering,
+			key.sharpening,
+			key.despill,
+			key.despillLuminanceAdd
+		];
+		if (!loopRunning) drawCurrentFrame();
+	});
+</script>
+
+<div class="fundus-chroma-key-video {className}">
+	{#if webglUnavailable}
+		{#if fallback}
+			{@render fallback()}
+		{:else if src.fallback}
+			<img src={src.fallback.src} alt="" />
+		{/if}
+	{:else}
+		<canvas bind:this={canvasElement}></canvas>
+		<video
+			bind:this={videoElement}
+			src={resolveRetainedSource(src.src)}
+			{loop}
+			muted
+			playsinline
+			preload="auto"
+		></video>
+	{/if}
+</div>
+
+<style>
+	.fundus-chroma-key-video {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+
+	canvas,
+	img {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	/* The texture source: must stay rendered (display: none can stall decoding /
+	   frame callbacks in some browsers), so hide it visually instead. */
+	video {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		visibility: hidden;
+		pointer-events: none;
+	}
+</style>

package/dist/runtime/components/Image.svelte

@@ -0,0 +1,18 @@
+<!--
+	Thin <img> wrapper for an image manifest entry: renders the delivered proxy
+	with its intrinsic width/height attributes so layout never shifts while the
+	file loads.
+-->
+<script lang="ts">
+	import type { ImageManifestEntry } from '#fundus/core';
+
+	interface Props {
+		src: ImageManifestEntry;
+		alt?: string;
+		class?: string;
+	}
+
+	let { src, alt = '', class: className = '' }: Props = $props();
+</script>
+
+<img src={src.src} width={src.width} height={src.height} {alt} class={className} />

package/dist/runtime/components/Slice.svelte

@@ -0,0 +1,35 @@
+<!--
+	The slice component hosts render: one component, backend chosen
+	per use. Dispatches between the two private implementations — SliceDom
+	(default) and SliceCanvas — which share the same geometry
+	(`computeRenderCells`) and therefore render the same cells.
+-->
+<script lang="ts">
+	import type { SliceManifestEntry } from '#fundus/core';
+	import SliceDom from './SliceDom.svelte';
+	import SliceCanvas from './SliceCanvas.svelte';
+
+	interface Props {
+		src: SliceManifestEntry;
+		/**
+		 * Rendering backend. `dom` (default) paints one absolutely-positioned
+		 * `<img>` window per cell; `canvas` draws every cell into a single
+		 * `<canvas>`. Both produce the same cells — but the DOM backend can
+		 * flicker in some situations (cells are separate elements the browser
+		 * composites independently, so a resize mid-animation can tear), so
+		 * hosts pick `canvas` where that hurts.
+		 */
+		backend?: 'dom' | 'canvas';
+		/** Accessible label for the rendered graphic. */
+		alt?: string;
+		class?: string;
+	}
+
+	let { src, backend = 'dom', alt = '', class: className = '' }: Props = $props();
+</script>
+
+{#if backend === 'canvas'}
+	<SliceCanvas {src} {alt} class={className} />
+{:else}
+	<SliceDom {src} {alt} class={className} />
+{/if}