feat: introduce WebGL effects system and Blur effect

This implements the foundational architecture for video effects, starting with a multi-pass WebGL rendering pipeline and a customizable Gaussian Blur effect.

Key changes:
- WebGL Engine: Added `raw-loader` for `.glsl` shaders, multi-pass framebuffer rendering, and live offscreen canvas previews.
- Node Architecture: Replaced hardcoded background blur with `CompositeEffectNode` and added `EffectLayerNode` to apply effects to specific visual elements.
- Timeline & DND: Added a new `effect` track type. Upgraded drag-and-drop to support dropping effects directly onto the timeline. Consolidated track constants into a cleaner `TRACK_CONFIG`.
- UI/UX: Added an Effects tab in the assets panel with live previews. Added an Effect Properties panel with sliders and inputs for fine-tuning parameters.
- Data Model: Added `sourceDuration` to video and audio elements, and wrote a v8 storage migration to update existing projects to the new schema.
- Docs: Added `CHANGELOG.md` tracking v0.1.0 and v0.2.0, plus `docs/effects-renderer.md` to document the new WebGL pipeline.

apps/web/src/services/renderer/nodes/visual-node.ts

@@ -1,5 +1,7 @@
 import type { CanvasRenderer } from "../canvas-renderer";
+import { createOffscreenCanvas } from "../canvas-utils";
 import { BaseNode } from "./base-node";
+import type { Effect } from "@/types/effects";
 import type { BlendMode } from "@/types/rendering";
 import type { Transform } from "@/types/timeline";
 import type { ElementAnimations } from "@/types/animation";
@@ -9,6 +11,8 @@ import {
 	resolveTransformAtTime,
 } from "@/lib/animation";
 import { TIME_EPSILON_SECONDS } from "@/constants/animation-constants";
+import { getEffect } from "@/lib/effects";
+import { webglEffectRenderer } from "../webgl-effect-renderer";
 
 export interface VisualNodeParams {
 	duration: number;
@@ -19,16 +23,17 @@ export interface VisualNodeParams {
 	animations?: ElementAnimations;
 	opacity: number;
 	blendMode?: BlendMode;
+	effects?: Effect[];
 }
 
 export abstract class VisualNode<
 	Params extends VisualNodeParams = VisualNodeParams,
 > extends BaseNode<Params> {
-	protected getSourceLocalTime(time: number): number {
+	protected getSourceLocalTime({ time }: { time: number }): number {
 		return time - this.params.timeOffset + this.params.trimStart;
 	}
 
-	protected getAnimationLocalTime(time: number): number {
+	protected getAnimationLocalTime({ time }: { time: number }): number {
 		return getElementLocalTime({
 			timelineTime: time,
 			elementStartTime: this.params.timeOffset,
@@ -36,8 +41,8 @@ export abstract class VisualNode<
 		});
 	}
 
-	protected isInRange(time: number): boolean {
-		const localTime = this.getSourceLocalTime(time);
+	protected isInRange({ time }: { time: number }): boolean {
+		const localTime = this.getSourceLocalTime({ time });
 		return (
 			localTime >= this.params.trimStart - TIME_EPSILON_SECONDS &&
 			localTime < this.params.trimStart + this.params.duration
@@ -59,7 +64,7 @@ export abstract class VisualNode<
 	}): void {
 		renderer.context.save();
 
-		const animationLocalTime = this.getAnimationLocalTime(timelineTime);
+		const animationLocalTime = this.getAnimationLocalTime({ time: timelineTime });
 		const transform = resolveTransformAtTime({
 			baseTransform: this.params.transform,
 			animations: this.params.animations,
@@ -94,7 +99,58 @@ export abstract class VisualNode<
 			renderer.context.translate(-centerX, -centerY);
 		}
 
-		renderer.context.drawImage(source, x, y, scaledWidth, scaledHeight);
+		const enabledEffects =
+			this.params.effects?.filter((effect) => effect.enabled) ?? [];
+
+		if (enabledEffects.length === 0) {
+			renderer.context.drawImage(source, x, y, scaledWidth, scaledHeight);
+			renderer.context.restore();
+			return;
+		}
+
+		const elementCanvas = createOffscreenCanvas({
+			width: Math.round(scaledWidth),
+			height: Math.round(scaledHeight),
+		});
+		const elementCtx = elementCanvas.getContext("2d") as
+			| CanvasRenderingContext2D
+			| OffscreenCanvasRenderingContext2D
+			| null;
+		if (!elementCtx) {
+			renderer.context.drawImage(source, x, y, scaledWidth, scaledHeight);
+			renderer.context.restore();
+			return;
+		}
+
+		elementCtx.drawImage(source, 0, 0, scaledWidth, scaledHeight);
+
+		let currentResult: CanvasImageSource = elementCanvas;
+
+		for (const effect of enabledEffects) {
+			const definition = getEffect({ effectType: effect.type });
+			const passes = definition.renderer.passes.map((pass) => ({
+				fragmentShader: pass.fragmentShader,
+				uniforms: pass.uniforms({
+					effectParams: effect.params,
+					width: scaledWidth,
+					height: scaledHeight,
+				}),
+			}));
+			currentResult = webglEffectRenderer.applyEffect({
+				source: currentResult,
+				width: Math.round(scaledWidth),
+				height: Math.round(scaledHeight),
+				passes,
+			});
+		}
+
+		renderer.context.drawImage(
+			currentResult,
+			x,
+			y,
+			scaledWidth,
+			scaledHeight,
+		);
 		renderer.context.restore();
 	}
 }