feat: migrate GPU renderer from WebGL to wgpu/WASM

5 files changed, 53 insertions, 86 deletions

diff --git a/apps/web/src/lib/effects/definitions/blur.frag.glsl b/apps/web/src/lib/effects/definitions/blur.frag.glsl
deleted file mode 100644
index c9ad2eae..00000000
--- a/apps/web/src/lib/effects/definitions/blur.frag.glsl
+++ /dev/null
@@ -1,25 +0,0 @@
-precision mediump float;
-
-uniform sampler2D u_texture;
-uniform vec2 u_resolution;
-uniform float u_sigma;
-uniform float u_step;
-uniform vec2 u_direction;
-
-varying vec2 v_texCoord;
-
-void main() {
-  vec2 texelSize = 1.0 / u_resolution;
-
-  vec4 color = vec4(0.0);
-  float totalWeight = 0.0;
-
-  for (int i = -30; i <= 30; i++) {
-    float pos = float(i) * u_step;
-    float weight = exp(-(pos * pos) / (2.0 * u_sigma * u_sigma));
-    color += texture2D(u_texture, v_texCoord + texelSize * u_direction * pos) * weight;
-    totalWeight += weight;
-  }
-
-  gl_FragColor = color / totalWeight;
-}
\ No newline at end of file
diff --git a/apps/web/src/lib/effects/definitions/blur.ts b/apps/web/src/lib/effects/definitions/blur.ts
index 54934402..3bfd5e3c 100644
--- a/apps/web/src/lib/effects/definitions/blur.ts
+++ b/apps/web/src/lib/effects/definitions/blur.ts
@@ -1,5 +1,6 @@
-import type { EffectDefinition, ResolvedEffectPass } from "@/lib/effects/types";
-import blurFragmentShader from "./blur.frag.glsl";
+import type { EffectDefinition, EffectPass } from "@/lib/effects/types";
+
+export const GAUSSIAN_BLUR_SHADER = "gaussian-blur";
 
 const MAX_SINGLE_PASS_SIGMA = 10;
 const MAX_STEP = 4;
@@ -17,7 +18,7 @@ export function buildGaussianBlurPasses({
 }: {
 	sigmaX: number;
 	sigmaY: number;
-}): ResolvedEffectPass[] {
+}): EffectPass[] {
 	const maxSigma = Math.max(sigmaX, sigmaY);
 	if (maxSigma < 0.001) return [];
 
@@ -36,10 +37,10 @@ export function buildGaussianBlurPasses({
 	const stepX = Math.max(1, perPassSigmaX / MAX_SINGLE_PASS_SIGMA);
 	const stepY = Math.max(1, perPassSigmaY / MAX_SINGLE_PASS_SIGMA);
 
-	const passes: ResolvedEffectPass[] = [];
+	const passes: EffectPass[] = [];
 	for (let i = 0; i < iterations; i++) {
 		passes.push({
-			fragmentShader: blurFragmentShader,
+			shader: GAUSSIAN_BLUR_SHADER,
 			uniforms: {
 				u_sigma: perPassSigmaX,
 				u_step: stepX,
@@ -47,7 +48,7 @@ export function buildGaussianBlurPasses({
 			},
 		});
 		passes.push({
-			fragmentShader: blurFragmentShader,
+			shader: GAUSSIAN_BLUR_SHADER,
 			uniforms: {
 				u_sigma: perPassSigmaY,
 				u_step: stepY,
@@ -83,10 +84,9 @@ export const blurEffectDefinition: EffectDefinition = {
 		},
 	],
 	renderer: {
-		type: "webgl",
 		passes: [
 			{
-				fragmentShader: blurFragmentShader,
+				shader: GAUSSIAN_BLUR_SHADER,
 				uniforms: ({ effectParams, width }) => ({
 					u_sigma: Math.max(intensityToSigma(parseIntensity(effectParams), width, 1920), 0.001),
 					u_step: 1,
@@ -94,7 +94,7 @@ export const blurEffectDefinition: EffectDefinition = {
 				}),
 			},
 			{
-				fragmentShader: blurFragmentShader,
+				shader: GAUSSIAN_BLUR_SHADER,
 				uniforms: ({ effectParams, height }) => ({
 					u_sigma: Math.max(intensityToSigma(parseIntensity(effectParams), height, 1080), 0.001),
 					u_step: 1,
diff --git a/apps/web/src/lib/effects/effect.vert.glsl b/apps/web/src/lib/effects/effect.vert.glsl
deleted file mode 100644
index 770faf0c..00000000
--- a/apps/web/src/lib/effects/effect.vert.glsl
+++ /dev/null
@@ -1,7 +0,0 @@
-attribute vec2 a_position;

-varying vec2 v_texCoord;

-

-void main() {

-  v_texCoord = a_position * 0.5 + 0.5;

-  gl_Position = vec4(a_position, 0.0, 1.0);

-}

diff --git a/apps/web/src/lib/effects/index.ts b/apps/web/src/lib/effects/index.ts
index 549811f5..92484ee2 100644
--- a/apps/web/src/lib/effects/index.ts
+++ b/apps/web/src/lib/effects/index.ts
@@ -2,7 +2,7 @@ import { generateUUID } from "@/utils/id";
 import { buildDefaultParamValues } from "@/lib/registry";
 import { effectsRegistry } from "./registry";
 import type { ParamValues } from "@/lib/params";
-import type { Effect, EffectDefinition, ResolvedEffectPass } from "@/lib/effects/types";
+import type { Effect, EffectDefinition, EffectPass } from "@/lib/effects/types";
 import { VISUAL_ELEMENT_TYPES } from "@/lib/timeline";
 
 export { effectsRegistry } from "./registry";
@@ -18,12 +18,12 @@ export function resolveEffectPasses({
 	effectParams: ParamValues;
 	width: number;
 	height: number;
-}): ResolvedEffectPass[] {
+}): EffectPass[] {
 	if (definition.renderer.buildPasses) {
 		return definition.renderer.buildPasses({ effectParams, width, height });
 	}
 	return definition.renderer.passes.map((pass) => ({
-		fragmentShader: pass.fragmentShader,
+		shader: pass.shader,
 		uniforms: pass.uniforms({ effectParams, width, height }),
 	}));
 }
diff --git a/apps/web/src/lib/effects/types.ts b/apps/web/src/lib/effects/types.ts
index 5573ef12..1862b440 100644
--- a/apps/web/src/lib/effects/types.ts
+++ b/apps/web/src/lib/effects/types.ts
@@ -1,42 +1,41 @@
-import type { ParamDefinition, ParamValues } from "@/lib/params";

-

-export interface Effect {

-	id: string;

-	type: string;

-	params: ParamValues;

-	enabled: boolean;

-}

-

-export interface ResolvedEffectPass {

-	fragmentShader: string;

-	uniforms: Record<string, number | number[]>;

-}

-

-export interface WebGLEffectPass {

-	fragmentShader: string;

-	uniforms(params: {

-		effectParams: ParamValues;

-		width: number;

-		height: number;

-	}): Record<string, number | number[]>;

-}

-

-export interface WebGLEffectRenderer {

-	type: "webgl";

-	passes: WebGLEffectPass[];

-	buildPasses?: (params: {

-		effectParams: ParamValues;

-		width: number;

-		height: number;

-	}) => ResolvedEffectPass[];

-}

-

-export type EffectRenderer = WebGLEffectRenderer;

-

-export interface EffectDefinition {

-	type: string;

-	name: string;

-	keywords: string[];

-	params: ParamDefinition[];

-	renderer: EffectRenderer;

-}

+import type { ParamDefinition, ParamValues } from "@/lib/params";
+
+export interface Effect {
+	id: string;
+	type: string;
+	params: ParamValues;
+	enabled: boolean;
+}
+
+export type EffectUniformValue = number | number[];
+
+export interface EffectPass {
+	shader: string;
+	uniforms: Record<string, EffectUniformValue>;
+}
+
+export interface EffectPassTemplate {
+	shader: string;
+	uniforms(params: {
+		effectParams: ParamValues;
+		width: number;
+		height: number;
+	}): Record<string, EffectUniformValue>;
+}
+
+export interface EffectRendererConfig {
+	passes: EffectPassTemplate[];
+	buildPasses?: (params: {
+		effectParams: ParamValues;
+		width: number;
+		height: number;
+	}) => EffectPass[];
+}
+
+export interface EffectDefinition {
+	type: string;
+	name: string;
+	keywords: string[];
+	params: ParamDefinition[];
+	renderer: EffectRendererConfig;
+}