11 files changed, 231 insertions, 764 deletions
diff --git a/apps/web/src/services/renderer/effect-preview.ts b/apps/web/src/services/renderer/effect-preview.ts
index b2f6f51a..8e081039 100644
--- a/apps/web/src/services/renderer/effect-preview.ts
+++ b/apps/web/src/services/renderer/effect-preview.ts
@@ -2,18 +2,14 @@ import { createOffscreenCanvas } from "./canvas-utils";
 import { effectsRegistry, resolveEffectPasses } from "@/lib/effects";
 import { buildDefaultParamValues } from "@/lib/registry";
 import type { ParamValues } from "@/lib/params";
-import { applyMultiPassEffect } from "./webgl/webgl-utils";
-import type { EffectPassData } from "./webgl/webgl-utils";
+import { gpuRenderer } from "./gpu-renderer";
 
 const PREVIEW_SIZE = 160;
 const PREVIEW_IMAGE_PATH = "/effects/preview.jpg";
 
 class EffectPreviewService {
-	private previewGl: WebGLRenderingContext | null = null;
-	private previewCanvas: OffscreenCanvas | HTMLCanvasElement | null = null;
 	private testSourceCanvas: OffscreenCanvas | HTMLCanvasElement | null = null;
 	private previewImageElement: HTMLImageElement | null = null;
-	private programCache = new Map<string, WebGLProgram>();
 	private onReadyCallbacks = new Set<() => void>();
 
 	readonly PREVIEW_SIZE = PREVIEW_SIZE;
@@ -58,7 +54,7 @@ class EffectPreviewService {
 			width: uniformDimensions?.width ?? size,
 			height: uniformDimensions?.height ?? size,
 		});
-		const result = this.applyWebGlEffect({
+		const result = this.applyGpuEffect({
 			source,
 			width: size,
 			height: size,
@@ -114,29 +110,6 @@ class EffectPreviewService {
 		return canvas;
 	}
 
-	private getOrCreatePreviewContext({
-		width,
-		height,
-	}: {
-		width: number;
-		height: number;
-	}): { canvas: OffscreenCanvas | HTMLCanvasElement; gl: WebGLRenderingContext } {
-		if (!this.previewCanvas || !this.previewGl) {
-			this.previewCanvas = createOffscreenCanvas({ width, height });
-			this.previewGl = this.previewCanvas.getContext("webgl", {
-				premultipliedAlpha: false,
-			}) as WebGLRenderingContext | null;
-			if (!this.previewGl) {
-				throw new Error("WebGL not supported");
-			}
-		}
-		if (this.previewCanvas.width !== width || this.previewCanvas.height !== height) {
-			this.previewCanvas.width = width;
-			this.previewCanvas.height = height;
-		}
-		return { canvas: this.previewCanvas, gl: this.previewGl };
-	}
-
 	private getTestSource({
 		width,
 		height,
@@ -154,7 +127,7 @@ class EffectPreviewService {
 		return this.testSourceCanvas;
 	}
 
-	private applyWebGlEffect({
+	private applyGpuEffect({
 		source,
 		width,
 		height,
@@ -163,28 +136,14 @@ class EffectPreviewService {
 		source: CanvasImageSource;
 		width: number;
 		height: number;
-		passes: EffectPassData[];
+		passes: ReturnType<typeof resolveEffectPasses>;
 	}): OffscreenCanvas | HTMLCanvasElement {
-		const { canvas: glCanvas, gl } = this.getOrCreatePreviewContext({ width, height });
-
-		applyMultiPassEffect({
-			context: gl,
+		return gpuRenderer.applyEffect({
 			source,
 			width,
 			height,
 			passes,
-			programCache: this.programCache,
-		});
-
-		const outputCanvas = createOffscreenCanvas({ width, height });
-		const outputCtx = outputCanvas.getContext("2d") as
-			| CanvasRenderingContext2D
-			| OffscreenCanvasRenderingContext2D
-			| null;
-		if (outputCtx) {
-			outputCtx.drawImage(glCanvas, 0, 0, width, height);
-		}
-		return outputCanvas;
+		}) as OffscreenCanvas | HTMLCanvasElement;
 	}
 }
 
diff --git a/apps/web/src/services/renderer/gpu-renderer.ts b/apps/web/src/services/renderer/gpu-renderer.ts
new file mode 100644
index 00000000..91b03603
--- /dev/null
+++ b/apps/web/src/services/renderer/gpu-renderer.ts
@@ -0,0 +1,118 @@
+import {
+	applyEffectPasses,
+	applyMaskFeather as applyMaskFeatherWasm,
+	initializeGpu,
+} from "opencut-wasm";
+import type { EffectPass, EffectUniformValue } from "@/lib/effects/types";
+
+let initializeGpuRendererPromise: Promise<void> | null = null;
+
+export function initializeGpuRenderer(): Promise<void> {
+	if (!initializeGpuRendererPromise) {
+		initializeGpuRendererPromise = initializeGpu();
+	}
+	const promise = initializeGpuRendererPromise;
+	if (!promise) {
+		throw new Error("GPU renderer initialization promise was not created");
+	}
+	return promise;
+}
+
+export const gpuRenderer = {
+	applyEffect({
+		source,
+		width,
+		height,
+		passes,
+	}: {
+		source: CanvasImageSource;
+		width: number;
+		height: number;
+		passes: EffectPass[];
+	}): CanvasImageSource {
+		if (passes.length === 0) {
+			return source;
+		}
+
+		const sourceCanvas = ensureOffscreenCanvas({
+			source,
+			width,
+			height,
+			label: "effect source",
+		});
+		return applyEffectPasses({
+			source: sourceCanvas,
+			width,
+			height,
+			passes: serializeEffectPasses(passes),
+		});
+	},
+
+	applyMaskFeather({
+		maskCanvas,
+		width,
+		height,
+		feather,
+	}: {
+		maskCanvas: CanvasImageSource;
+		width: number;
+		height: number;
+		feather: number;
+	}): CanvasImageSource {
+		const sourceCanvas = ensureOffscreenCanvas({
+			source: maskCanvas,
+			width,
+			height,
+			label: "mask source",
+		});
+		return applyMaskFeatherWasm({
+			mask: sourceCanvas,
+			width,
+			height,
+			feather,
+		});
+	},
+};
+
+function ensureOffscreenCanvas({
+	source,
+	width,
+	height,
+	label,
+}: {
+	source: CanvasImageSource;
+	width: number;
+	height: number;
+	label: string;
+}): OffscreenCanvas {
+	if (source instanceof OffscreenCanvas) {
+		return source;
+	}
+
+	if (typeof OffscreenCanvas === "undefined") {
+		throw new Error(`OffscreenCanvas is required for the GPU ${label}`);
+	}
+
+	const canvas = new OffscreenCanvas(width, height);
+	const context = canvas.getContext("2d");
+	if (!context) {
+		throw new Error(`Failed to get 2d context for the GPU ${label}`);
+	}
+	context.clearRect(0, 0, width, height);
+	context.drawImage(source, 0, 0, width, height);
+	return canvas;
+}
+
+function serializeEffectPasses(passes: EffectPass[]) {
+	return passes.map((pass) => ({
+		shader: pass.shader,
+		uniforms: Object.entries(pass.uniforms).map(([name, value]) => ({
+			name,
+			value: normalizeUniformValue(value),
+		})),
+	}));
+}
+
+function normalizeUniformValue(value: EffectUniformValue): number[] {
+	return typeof value === "number" ? [value] : value;
+}
diff --git a/apps/web/src/services/renderer/mask-feather.ts b/apps/web/src/services/renderer/mask-feather.ts
index f1515117..4ea7eb2b 100644
--- a/apps/web/src/services/renderer/mask-feather.ts
+++ b/apps/web/src/services/renderer/mask-feather.ts
@@ -1,54 +1,20 @@
-import jfaDistanceShader from "@/lib/masks/shaders/jfa-distance.frag.glsl";
-import { getWebGLContext, readResult } from "./webgl/webgl-context";
-import { computeSignedDistanceField, runPass } from "./webgl/jfa";
-import { compileProgram, createTexture } from "./webgl/webgl-utils";
-
-export function applyMaskFeather({
-	maskCanvas,
-	width,
-	height,
-	feather,
-}: {
-	maskCanvas: CanvasImageSource;
-	width: number;
-	height: number;
-	feather: number;
-}): OffscreenCanvas | HTMLCanvasElement {
-	const { context, programCache } = getWebGLContext({ width, height });
-	const sourceTexture = createTexture({ context, source: maskCanvas });
-
-	const sdf = computeSignedDistanceField({
-		context,
-		programCache,
-		sourceTexture,
-		width,
-		height,
-	});
-
-	const distanceProgram = compileProgram({
-		context,
-		fragmentShaderSource: jfaDistanceShader,
-		programCache,
-	});
-
-	runPass({
-		context,
-		program: distanceProgram,
-		inputTexture: sdf.insideTexture,
-		target: null,
-		width,
-		height,
-		uniforms: { u_feather_half: feather / 2.0 },
-		extraBindings: [
-			{ unit: 1, texture: sdf.outsideTexture, name: "u_jfa_outside" },
-		],
-	});
-
-	context.deleteTexture(sourceTexture);
-	sdf.cleanup();
-
-	context.bindTexture(context.TEXTURE_2D, null);
-	context.bindFramebuffer(context.FRAMEBUFFER, null);
-
-	return readResult({ width, height });
-}
+import { gpuRenderer } from "./gpu-renderer";
+
+export function applyMaskFeather({
+	maskCanvas,
+	width,
+	height,
+	feather,
+}: {
+	maskCanvas: CanvasImageSource;
+	width: number;
+	height: number;
+	feather: number;
+}): OffscreenCanvas | HTMLCanvasElement {
+	return gpuRenderer.applyMaskFeather({
+		maskCanvas,
+		width,
+		height,
+		feather,
+	}) as OffscreenCanvas | HTMLCanvasElement;
+}
diff --git a/apps/web/src/services/renderer/nodes/blur-background-node.ts b/apps/web/src/services/renderer/nodes/blur-background-node.ts
index 7f4d06fc..f790ebb4 100644
--- a/apps/web/src/services/renderer/nodes/blur-background-node.ts
+++ b/apps/web/src/services/renderer/nodes/blur-background-node.ts
@@ -5,7 +5,7 @@ import { videoCache } from "@/services/video-cache/service";
 import type { RetimeConfig } from "@/lib/timeline";
 import type { CanvasRenderer } from "../canvas-renderer";
 import { createOffscreenCanvas } from "../canvas-utils";
-import { webglEffectRenderer } from "../webgl/webgl-effect-renderer";
+import { gpuRenderer } from "../gpu-renderer";
 import { BaseNode } from "./base-node";
 import { loadImageSource, type CachedImageSource } from "./image-node";
 
@@ -131,7 +131,7 @@ export class BlurBackgroundNode extends BaseNode<BlurBackgroundNodeParams> {
 			sigmaX: this.params.blurIntensity * (renderer.width / 1920),
 			sigmaY: this.params.blurIntensity * (renderer.height / 1080),
 		});
-		const effectResult = webglEffectRenderer.applyEffect({
+		const effectResult = gpuRenderer.applyEffect({
 			source: offscreen as CanvasImageSource,
 			width: renderer.width,
 			height: renderer.height,
diff --git a/apps/web/src/services/renderer/nodes/effect-layer-node.ts b/apps/web/src/services/renderer/nodes/effect-layer-node.ts
index 51de2398..d8389fb5 100644
--- a/apps/web/src/services/renderer/nodes/effect-layer-node.ts
+++ b/apps/web/src/services/renderer/nodes/effect-layer-node.ts
@@ -1,81 +1,81 @@
-import type { CanvasRenderer } from "../canvas-renderer";
-import { effectsRegistry, resolveEffectPasses } from "@/lib/effects";
-import type { ParamValues } from "@/lib/params";
-import { BaseNode } from "./base-node";
-import { webglEffectRenderer } from "../webgl/webgl-effect-renderer";
-
-const TIME_EPSILON = 1e-6;
-
-export type EffectLayerNodeParams = {
-	effectType: string;
-	effectParams: ParamValues;
-	timeOffset: number;
-	duration: number;
-};
-
-function isInRange({
-	time,
-	timeOffset,
-	duration,
-}: {
-	time: number;
-	timeOffset: number;
-	duration: number;
-}): boolean {
-	return (
-		time >= timeOffset - TIME_EPSILON &&
-		time < timeOffset + duration + TIME_EPSILON
-	);
-}
-
-// snapshots whatever is currently on the canvas, applies the effect, draws it back
-export class EffectLayerNode extends BaseNode<EffectLayerNodeParams> {
-	async render({
-		renderer,
-		time,
-	}: {
-		renderer: CanvasRenderer;
-		time: number;
-	}): Promise<void> {
-		if (
-			!isInRange({
-				time,
-				timeOffset: this.params.timeOffset,
-				duration: this.params.duration,
-			})
-		) {
-			return;
-		}
-
-		const source = renderer.context.canvas as CanvasImageSource;
-
-		const effectDefinition = effectsRegistry.get(this.params.effectType);
-
-		const passes = resolveEffectPasses({
-			definition: effectDefinition,
-			effectParams: this.params.effectParams,
-			width: renderer.width,
-			height: renderer.height,
-		});
-		if (passes.length === 0) {
-			return;
-		}
-		const effectResult = webglEffectRenderer.applyEffect({
-			source,
-			width: renderer.width,
-			height: renderer.height,
-			passes,
-		});
-
-		renderer.context.save();
-		renderer.context.clearRect(0, 0, renderer.width, renderer.height);
-		renderer.context.drawImage(
-			effectResult,
-			0,
-			0,
-			renderer.width,
-			renderer.height,
-		);
-		renderer.context.restore();
-	}
-}
+import type { CanvasRenderer } from "../canvas-renderer";
+import { effectsRegistry, resolveEffectPasses } from "@/lib/effects";
+import type { ParamValues } from "@/lib/params";
+import { BaseNode } from "./base-node";
+import { gpuRenderer } from "../gpu-renderer";
+
+const TIME_EPSILON = 1e-6;
+
+export type EffectLayerNodeParams = {
+	effectType: string;
+	effectParams: ParamValues;
+	timeOffset: number;
+	duration: number;
+};
+
+function isInRange({
+	time,
+	timeOffset,
+	duration,
+}: {
+	time: number;
+	timeOffset: number;
+	duration: number;
+}): boolean {
+	return (
+		time >= timeOffset - TIME_EPSILON &&
+		time < timeOffset + duration + TIME_EPSILON
+	);
+}
+
+// snapshots whatever is currently on the canvas, applies the effect, draws it back
+export class EffectLayerNode extends BaseNode<EffectLayerNodeParams> {
+	async render({
+		renderer,
+		time,
+	}: {
+		renderer: CanvasRenderer;
+		time: number;
+	}): Promise<void> {
+		if (
+			!isInRange({
+				time,
+				timeOffset: this.params.timeOffset,
+				duration: this.params.duration,
+			})
+		) {
+			return;
+		}
+
+		const source = renderer.context.canvas as CanvasImageSource;
+
+		const effectDefinition = effectsRegistry.get(this.params.effectType);
+
+		const passes = resolveEffectPasses({
+			definition: effectDefinition,
+			effectParams: this.params.effectParams,
+			width: renderer.width,
+			height: renderer.height,
+		});
+		if (passes.length === 0) {
+			return;
+		}
+		const effectResult = gpuRenderer.applyEffect({
+			source,
+			width: renderer.width,
+			height: renderer.height,
+			passes,
+		});
+
+		renderer.context.save();
+		renderer.context.clearRect(0, 0, renderer.width, renderer.height);
+		renderer.context.drawImage(
+			effectResult,
+			0,
+			0,
+			renderer.width,
+			renderer.height,
+		);
+		renderer.context.restore();
+	}
+}
diff --git a/apps/web/src/services/renderer/nodes/text-node.ts b/apps/web/src/services/renderer/nodes/text-node.ts
index 031c43b3..643e538a 100644
--- a/apps/web/src/services/renderer/nodes/text-node.ts
+++ b/apps/web/src/services/renderer/nodes/text-node.ts
@@ -21,7 +21,7 @@ import {
 } from "@/lib/animation";
 import { resolveEffectParamsAtTime } from "@/lib/animation/effect-param-channel";
 import { effectsRegistry, resolveEffectPasses } from "@/lib/effects";
-import { webglEffectRenderer } from "../webgl/webgl-effect-renderer";
+import { gpuRenderer } from "../gpu-renderer";
 import { clamp } from "@/utils/math";
 
 const TEXT_DECORATION_THICKNESS_RATIO = 0.07;
@@ -272,7 +272,7 @@ export class TextNode extends BaseNode<TextNodeParams> {
 				width: renderer.width,
 				height: renderer.height,
 			});
-			currentSource = webglEffectRenderer.applyEffect({
+			currentSource = gpuRenderer.applyEffect({
 				source: currentSource,
 				width: renderer.width,
 				height: renderer.height,
diff --git a/apps/web/src/services/renderer/nodes/visual-node.ts b/apps/web/src/services/renderer/nodes/visual-node.ts
index e0f87c52..82093da4 100644
--- a/apps/web/src/services/renderer/nodes/visual-node.ts
+++ b/apps/web/src/services/renderer/nodes/visual-node.ts
@@ -16,7 +16,7 @@ import { TIME_EPSILON_SECONDS } from "@/constants/animation-constants";
 import { effectsRegistry, resolveEffectPasses } from "@/lib/effects";
 import { masksRegistry } from "@/lib/masks";
 import { getSourceTimeAtClipTime } from "@/lib/retime";
-import { webglEffectRenderer } from "../webgl/webgl-effect-renderer";
+import { gpuRenderer } from "../gpu-renderer";
 import { applyMaskFeather } from "../mask-feather";
 
 export interface VisualNodeParams {
@@ -205,7 +205,7 @@ export abstract class VisualNode<
 				width,
 				height,
 			});
-			current = webglEffectRenderer.applyEffect({
+			current = gpuRenderer.applyEffect({
 				source: current,
 				width: Math.round(width),
 				height: Math.round(height),
diff --git a/apps/web/src/services/renderer/webgl/jfa.ts b/apps/web/src/services/renderer/webgl/jfa.ts
deleted file mode 100644
index 9c87e7fa..00000000
--- a/apps/web/src/services/renderer/webgl/jfa.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-import jfaInitShader from "@/lib/shaders/jfa-init.frag.glsl";
-import jfaStepShader from "@/lib/shaders/jfa-step.frag.glsl";
-import {
-	compileProgram,
-	createFramebufferTexture,
-	setUniforms,
-	drawFullscreenQuad,
-} from "./webgl-utils";
-
-interface FBPair {
-	texture: WebGLTexture;
-	framebuffer: WebGLFramebuffer;
-}
-
-function runPass({
-	context,
-	program,
-	inputTexture,
-	target,
-	width,
-	height,
-	uniforms,
-	extraBindings,
-}: {
-	context: WebGLRenderingContext;
-	program: WebGLProgram;
-	inputTexture: WebGLTexture;
-	target: WebGLFramebuffer | null;
-	width: number;
-	height: number;
-	uniforms: Record<string, number | number[]>;
-	extraBindings?: Array<{ unit: number; texture: WebGLTexture; name: string }>;
-}): void {
-	context.bindFramebuffer(context.FRAMEBUFFER, target);
-	// biome-ignore lint/correctness/useHookAtTopLevel: WebGL API method, not a React hook
-	context.useProgram(program);
-
-	context.activeTexture(context.TEXTURE0);
-	context.bindTexture(context.TEXTURE_2D, inputTexture);
-	const uTexLoc = context.getUniformLocation(program, "u_texture");
-	if (uTexLoc) context.uniform1i(uTexLoc, 0);
-
-	if (extraBindings) {
-		for (const binding of extraBindings) {
-			context.activeTexture(context.TEXTURE0 + binding.unit);
-			context.bindTexture(context.TEXTURE_2D, binding.texture);
-			const loc = context.getUniformLocation(program, binding.name);
-			if (loc) context.uniform1i(loc, binding.unit);
-		}
-	}
-
-	setUniforms({
-		context,
-		program,
-		uniforms: { ...uniforms, u_resolution: [width, height] },
-	});
-	drawFullscreenQuad({ context, program, width, height });
-}
-
-function runJFA({
-	context,
-	programCache,
-	sourceTexture,
-	width,
-	height,
-	isInverted,
-}: {
-	context: WebGLRenderingContext;
-	programCache: Map<string, WebGLProgram>;
-	sourceTexture: WebGLTexture;
-	width: number;
-	height: number;
-	isInverted: boolean;
-}): {
-	resultTexture: WebGLTexture;
-	resultFB: WebGLFramebuffer;
-	tempFBs: FBPair[];
-} {
-	const numSteps = Math.ceil(Math.log2(Math.max(width, height)));
-
-	const fbA = createFramebufferTexture({ context, width, height });
-	const fbB = createFramebufferTexture({ context, width, height });
-
-	const initProgram = compileProgram({
-		context,
-		fragmentShaderSource: jfaInitShader,
-		programCache,
-	});
-	runPass({
-		context,
-		program: initProgram,
-		inputTexture: sourceTexture,
-		target: fbA.framebuffer,
-		width,
-		height,
-		uniforms: { u_invert: isInverted ? 1.0 : 0.0 },
-	});
-
-	const stepProgram = compileProgram({
-		context,
-		fragmentShaderSource: jfaStepShader,
-		programCache,
-	});
-
-	let readFB = fbA;
-	let writeFB = fbB;
-
-	for (let i = numSteps - 1; i >= 0; i--) {
-		const stepSize = 2 ** i;
-		runPass({
-			context,
-			program: stepProgram,
-			inputTexture: readFB.texture,
-			target: writeFB.framebuffer,
-			width,
-			height,
-			uniforms: { u_step_size: stepSize },
-		});
-		const tmp = readFB;
-		readFB = writeFB;
-		writeFB = tmp;
-	}
-
-	return {
-		resultTexture: readFB.texture,
-		resultFB: readFB.framebuffer,
-		tempFBs: [writeFB],
-	};
-}
-
-function cleanupJFAResult({
-	context,
-	result,
-}: {
-	context: WebGLRenderingContext;
-	result: {
-		resultTexture: WebGLTexture;
-		resultFB: WebGLFramebuffer;
-		tempFBs: FBPair[];
-	};
-}): void {
-	context.deleteTexture(result.resultTexture);
-	context.deleteFramebuffer(result.resultFB);
-	for (const fb of result.tempFBs) {
-		context.deleteTexture(fb.texture);
-		context.deleteFramebuffer(fb.framebuffer);
-	}
-}
-
-export { runPass };
-
-export function computeSignedDistanceField({
-	context,
-	programCache,
-	sourceTexture,
-	width,
-	height,
-}: {
-	context: WebGLRenderingContext;
-	programCache: Map<string, WebGLProgram>;
-	sourceTexture: WebGLTexture;
-	width: number;
-	height: number;
-}): {
-	insideTexture: WebGLTexture;
-	outsideTexture: WebGLTexture;
-	cleanup: () => void;
-} {
-	const inside = runJFA({
-		context,
-		programCache,
-		sourceTexture,
-		width,
-		height,
-		isInverted: false,
-	});
-	const outside = runJFA({
-		context,
-		programCache,
-		sourceTexture,
-		width,
-		height,
-		isInverted: true,
-	});
-
-	return {
-		insideTexture: inside.resultTexture,
-		outsideTexture: outside.resultTexture,
-		cleanup: () => {
-			cleanupJFAResult({ context, result: inside });
-			cleanupJFAResult({ context, result: outside });
-		},
-	};
-}
diff --git a/apps/web/src/services/renderer/webgl/webgl-context.ts b/apps/web/src/services/renderer/webgl/webgl-context.ts
deleted file mode 100644
index 39869a02..00000000
--- a/apps/web/src/services/renderer/webgl/webgl-context.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { createOffscreenCanvas } from "../canvas-utils";
-
-let gl: WebGLRenderingContext | null = null;
-let webglCanvas: OffscreenCanvas | HTMLCanvasElement | null = null;
-const programCache = new Map<string, WebGLProgram>();
-
-export function getWebGLContext({
-	width,
-	height,
-}: {
-	width: number;
-	height: number;
-}): {
-	context: WebGLRenderingContext;
-	programCache: Map<string, WebGLProgram>;
-} {
-	if (!webglCanvas) {
-		webglCanvas = createOffscreenCanvas({ width, height });
-		gl = webglCanvas.getContext("webgl", {
-			premultipliedAlpha: false,
-		}) as WebGLRenderingContext | null;
-		if (!gl) throw new Error("WebGL not supported");
-	}
-	if (webglCanvas.width !== width || webglCanvas.height !== height) {
-		webglCanvas.width = width;
-		webglCanvas.height = height;
-	}
-	if (!gl) throw new Error("WebGL context lost");
-	return { context: gl, programCache };
-}
-
-export function readResult({
-	width,
-	height,
-}: {
-	width: number;
-	height: number;
-}): OffscreenCanvas | HTMLCanvasElement {
-	if (!webglCanvas) throw new Error("WebGL canvas not initialized");
-	const outputCanvas = createOffscreenCanvas({ width, height });
-	const outputCtx = outputCanvas.getContext("2d") as
-		| CanvasRenderingContext2D
-		| OffscreenCanvasRenderingContext2D
-		| null;
-	if (outputCtx) {
-		outputCtx.drawImage(webglCanvas, 0, 0, width, height);
-	}
-	return outputCanvas;
-}
diff --git a/apps/web/src/services/renderer/webgl/webgl-effect-renderer.ts b/apps/web/src/services/renderer/webgl/webgl-effect-renderer.ts
deleted file mode 100644
index 95ef990b..00000000
--- a/apps/web/src/services/renderer/webgl/webgl-effect-renderer.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { getWebGLContext, readResult } from "./webgl-context";
-import { applyMultiPassEffect } from "./webgl-utils";
-import type { EffectPassData } from "./webgl-utils";
-
-export interface ApplyEffectParams {
-	source: CanvasImageSource;
-	width: number;
-	height: number;
-	passes: EffectPassData[];
-}
-
-function applyEffect({
-	source,
-	width,
-	height,
-	passes,
-}: ApplyEffectParams): CanvasImageSource {
-	if (passes.length === 0) {
-		return source;
-	}
-	const { context, programCache } = getWebGLContext({ width, height });
-	applyMultiPassEffect({
-		context,
-		source,
-		width,
-		height,
-		passes,
-		programCache,
-	});
-	return readResult({ width, height });
-}
-
-export const webglEffectRenderer = {
-	applyEffect,
-};
diff --git a/apps/web/src/services/renderer/webgl/webgl-utils.ts b/apps/web/src/services/renderer/webgl/webgl-utils.ts
deleted file mode 100644
index ec207546..00000000
--- a/apps/web/src/services/renderer/webgl/webgl-utils.ts
+++ /dev/null
@@ -1,298 +0,0 @@
-import VERTEX_SHADER_SOURCE from "@/lib/effects/effect.vert.glsl";
-
-export interface EffectPassData {
-	fragmentShader: string;
-	uniforms: Record<string, number | number[]>;
-}
-
-export const QUAD_POSITIONS = new Float32Array([
-	-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1,
-]);
-
-export function compileProgram({
-	context,
-	fragmentShaderSource,
-	programCache,
-}: {
-	context: WebGLRenderingContext;
-	fragmentShaderSource: string;
-	programCache: Map<string, WebGLProgram>;
-}): WebGLProgram {
-	const cached = programCache.get(fragmentShaderSource);
-	if (cached) {
-		return cached;
-	}
-	const vertexShader = compileShader({
-		context,
-		source: VERTEX_SHADER_SOURCE,
-		type: context.VERTEX_SHADER,
-	});
-	const fragmentShader = compileShader({
-		context,
-		source: fragmentShaderSource,
-		type: context.FRAGMENT_SHADER,
-	});
-	const program = context.createProgram();
-	if (!program) {
-		throw new Error("Failed to create WebGL program");
-	}
-	context.attachShader(program, vertexShader);
-	context.attachShader(program, fragmentShader);
-	context.linkProgram(program);
-	if (!context.getProgramParameter(program, context.LINK_STATUS)) {
-		const info = context.getProgramInfoLog(program);
-		context.deleteProgram(program);
-		throw new Error(`WebGL program link failed: ${info}`);
-	}
-	context.deleteShader(vertexShader);
-	context.deleteShader(fragmentShader);
-	programCache.set(fragmentShaderSource, program);
-	return program;
-}
-
-export function compileShader({
-	context,
-	source,
-	type,
-}: {
-	context: WebGLRenderingContext;
-	source: string;
-	type: number;
-}): WebGLShader {
-	const shader = context.createShader(type);
-	if (!shader) {
-		throw new Error("Failed to create WebGL shader");
-	}
-	context.shaderSource(shader, source);
-	context.compileShader(shader);
-	if (!context.getShaderParameter(shader, context.COMPILE_STATUS)) {
-		const info = context.getShaderInfoLog(shader);
-		context.deleteShader(shader);
-		throw new Error(`WebGL shader compile failed: ${info}`);
-	}
-	return shader;
-}
-
-export function createTexture({
-	context,
-	source,
-}: {
-	context: WebGLRenderingContext;
-	source: CanvasImageSource;
-}): WebGLTexture {
-	const texture = context.createTexture();
-	if (!texture) {
-		throw new Error("Failed to create WebGL texture");
-	}
-	context.activeTexture(context.TEXTURE0);
-	context.bindTexture(context.TEXTURE_2D, texture);
-	context.pixelStorei(context.UNPACK_FLIP_Y_WEBGL, 1);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_WRAP_S,
-		context.CLAMP_TO_EDGE,
-	);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_WRAP_T,
-		context.CLAMP_TO_EDGE,
-	);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_MIN_FILTER,
-		context.LINEAR,
-	);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_MAG_FILTER,
-		context.LINEAR,
-	);
-	context.texImage2D(
-		context.TEXTURE_2D,
-		0,
-		context.RGBA,
-		context.RGBA,
-		context.UNSIGNED_BYTE,
-		source as TexImageSource,
-	);
-	return texture;
-}
-
-export function setUniforms({
-	context,
-	program,
-	uniforms,
-}: {
-	context: WebGLRenderingContext;
-	program: WebGLProgram;
-	uniforms: Record<string, number | number[]>;
-}): void {
-	for (const [name, value] of Object.entries(uniforms)) {
-		const location = context.getUniformLocation(program, name);
-		if (location === null) continue;
-
-		if (typeof value === "number") {
-			context.uniform1f(location, value);
-		} else if (Array.isArray(value)) {
-			if (value.length === 2) {
-				context.uniform2fv(location, new Float32Array(value));
-			} else if (value.length === 3) {
-				context.uniform3fv(location, new Float32Array(value));
-			} else if (value.length === 4) {
-				context.uniform4fv(location, new Float32Array(value));
-			}
-		}
-	}
-}
-
-export function drawFullscreenQuad({
-	context,
-	program,
-	width,
-	height,
-}: {
-	context: WebGLRenderingContext;
-	program: WebGLProgram;
-	width: number;
-	height: number;
-}): void {
-	const positionLocation = context.getAttribLocation(program, "a_position");
-	const buffer = context.createBuffer();
-	context.bindBuffer(context.ARRAY_BUFFER, buffer);
-	context.bufferData(context.ARRAY_BUFFER, QUAD_POSITIONS, context.STATIC_DRAW);
-	context.enableVertexAttribArray(positionLocation);
-	context.vertexAttribPointer(positionLocation, 2, context.FLOAT, false, 0, 0);
-
-	context.viewport(0, 0, width, height);
-	context.clearColor(0, 0, 0, 0);
-	context.clear(context.COLOR_BUFFER_BIT);
-	context.drawArrays(context.TRIANGLES, 0, 6);
-}
-
-export function createFramebufferTexture({
-	context,
-	width,
-	height,
-}: {
-	context: WebGLRenderingContext;
-	width: number;
-	height: number;
-}): { texture: WebGLTexture; framebuffer: WebGLFramebuffer } {
-	const texture = context.createTexture();
-	if (!texture) throw new Error("Failed to create framebuffer texture");
-	context.bindTexture(context.TEXTURE_2D, texture);
-	context.texImage2D(
-		context.TEXTURE_2D,
-		0,
-		context.RGBA,
-		width,
-		height,
-		0,
-		context.RGBA,
-		context.UNSIGNED_BYTE,
-		null,
-	);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_WRAP_S,
-		context.CLAMP_TO_EDGE,
-	);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_WRAP_T,
-		context.CLAMP_TO_EDGE,
-	);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_MIN_FILTER,
-		context.LINEAR,
-	);
-	context.texParameteri(
-		context.TEXTURE_2D,
-		context.TEXTURE_MAG_FILTER,
-		context.LINEAR,
-	);
-	context.bindTexture(context.TEXTURE_2D, null);
-
-	const framebuffer = context.createFramebuffer();
-	if (!framebuffer) throw new Error("Failed to create framebuffer");
-	context.bindFramebuffer(context.FRAMEBUFFER, framebuffer);
-	context.framebufferTexture2D(
-		context.FRAMEBUFFER,
-		context.COLOR_ATTACHMENT0,
-		context.TEXTURE_2D,
-		texture,
-		0,
-	);
-	context.bindFramebuffer(context.FRAMEBUFFER, null);
-
-	return { texture, framebuffer };
-}
-
-export function applyMultiPassEffect({
-	context,
-	source,
-	width,
-	height,
-	passes,
-	programCache,
-}: {
-	context: WebGLRenderingContext;
-	source: CanvasImageSource;
-	width: number;
-	height: number;
-	passes: EffectPassData[];
-	programCache: Map<string, WebGLProgram>;
-}): void {
-	const sourceTexture = createTexture({ context, source });
-	let currentTexture: WebGLTexture = sourceTexture;
-
-	const intermediates: Array<{
-		texture: WebGLTexture;
-		framebuffer: WebGLFramebuffer;
-	}> = [];
-	for (let i = 0; i < passes.length - 1; i++) {
-		intermediates.push(createFramebufferTexture({ context, width, height }));
-	}
-
-	for (let i = 0; i < passes.length; i++) {
-		const pass = passes[i];
-		const program = compileProgram({
-			context,
-			fragmentShaderSource: pass.fragmentShader,
-			programCache,
-		});
-		const isLastPass = i === passes.length - 1;
-		const targetFramebuffer = isLastPass ? null : intermediates[i].framebuffer;
-
-		context.bindFramebuffer(context.FRAMEBUFFER, targetFramebuffer);
-		// biome-ignore lint/correctness/useHookAtTopLevel: WebGL API method, not a React hook
-		context.useProgram(program);
-		context.activeTexture(context.TEXTURE0);
-		context.bindTexture(context.TEXTURE_2D, currentTexture);
-
-		const uTextureLocation = context.getUniformLocation(program, "u_texture");
-		if (uTextureLocation) {
-			context.uniform1i(uTextureLocation, 0);
-		}
-
-		setUniforms({
-			context,
-			program,
-			uniforms: { ...pass.uniforms, u_resolution: [width, height] },
-		});
-		drawFullscreenQuad({ context, program, width, height });
-
-		if (!isLastPass) {
-			currentTexture = intermediates[i].texture;
-		}
-	}
-
-	context.deleteTexture(sourceTexture);
-	for (const intermediate of intermediates) {
-		context.deleteTexture(intermediate.texture);
-		context.deleteFramebuffer(intermediate.framebuffer);
-	}
-	context.bindTexture(context.TEXTURE_2D, null);
-	context.bindFramebuffer(context.FRAMEBUFFER, null);
-}