From e579ae120290329fd697b50ea9138ffccb65a805 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Wed, 1 Apr 2026 13:57:32 +0200 Subject: feat: migrate GPU renderer from WebGL to wgpu/WASM --- .../web/src/lib/effects/definitions/blur.frag.glsl | 25 ------- apps/web/src/lib/effects/definitions/blur.ts | 18 ++--- apps/web/src/lib/effects/effect.vert.glsl | 7 -- apps/web/src/lib/effects/index.ts | 6 +- apps/web/src/lib/effects/types.ts | 83 +++++++++++----------- 5 files changed, 53 insertions(+), 86 deletions(-) delete mode 100644 apps/web/src/lib/effects/definitions/blur.frag.glsl delete mode 100644 apps/web/src/lib/effects/effect.vert.glsl (limited to 'apps/web/src/lib/effects') 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; -} - -export interface WebGLEffectPass { - fragmentShader: string; - uniforms(params: { - effectParams: ParamValues; - width: number; - height: number; - }): Record; -} - -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; +} + +export interface EffectPassTemplate { + shader: string; + uniforms(params: { + effectParams: ParamValues; + width: number; + height: number; + }): Record; +} + +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; +} -- cgit v1.3.1