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 +++++++++++----------- .../src/lib/masks/shaders/jfa-distance.frag.glsl | 36 ---------- apps/web/src/lib/shaders/jfa-init.frag.glsl | 25 ------- apps/web/src/lib/shaders/jfa-step.frag.glsl | 60 ---------------- 8 files changed, 53 insertions(+), 207 deletions(-) delete mode 100644 apps/web/src/lib/effects/definitions/blur.frag.glsl delete mode 100644 apps/web/src/lib/effects/effect.vert.glsl delete mode 100644 apps/web/src/lib/masks/shaders/jfa-distance.frag.glsl delete mode 100644 apps/web/src/lib/shaders/jfa-init.frag.glsl delete mode 100644 apps/web/src/lib/shaders/jfa-step.frag.glsl (limited to 'apps/web/src/lib') 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; +} diff --git a/apps/web/src/lib/masks/shaders/jfa-distance.frag.glsl b/apps/web/src/lib/masks/shaders/jfa-distance.frag.glsl deleted file mode 100644 index 9d9a8773..00000000 --- a/apps/web/src/lib/masks/shaders/jfa-distance.frag.glsl +++ /dev/null @@ -1,36 +0,0 @@ -precision mediump float; - -uniform sampler2D u_texture; -uniform sampler2D u_jfa_outside; -uniform vec2 u_resolution; -uniform float u_feather_half; - -varying vec2 v_texCoord; - -vec2 decodeSeed(vec4 encoded) { - float x = floor(encoded.r * 255.0 + 0.5) * 256.0 + floor(encoded.g * 255.0 + 0.5); - float y = floor(encoded.b * 255.0 + 0.5) * 256.0 + floor(encoded.a * 255.0 + 0.5); - return vec2(x, y); -} - -bool isNoSeed(vec4 encoded) { - return encoded.r > 0.99 && encoded.g > 0.99 && encoded.b > 0.99 && encoded.a > 0.99; -} - -void main() { - vec2 pixelCoord = floor(v_texCoord * u_resolution); - - vec4 insideEncoded = texture2D(u_texture, v_texCoord); - vec4 outsideEncoded = texture2D(u_jfa_outside, v_texCoord); - - bool hasInside = !isNoSeed(insideEncoded); - bool hasOutside = !isNoSeed(outsideEncoded); - - float distToInside = hasInside ? distance(pixelCoord, decodeSeed(insideEncoded)) : 1e5; - float distToOutside = hasOutside ? distance(pixelCoord, decodeSeed(outsideEncoded)) : 1e5; - - float signedDist = distToOutside - distToInside; - float alpha = smoothstep(-u_feather_half, u_feather_half, signedDist); - - gl_FragColor = vec4(alpha, alpha, alpha, alpha); -} diff --git a/apps/web/src/lib/shaders/jfa-init.frag.glsl b/apps/web/src/lib/shaders/jfa-init.frag.glsl deleted file mode 100644 index e465752c..00000000 --- a/apps/web/src/lib/shaders/jfa-init.frag.glsl +++ /dev/null @@ -1,25 +0,0 @@ -precision mediump float; - -uniform sampler2D u_texture; -uniform vec2 u_resolution; -uniform float u_invert; - -varying vec2 v_texCoord; - -void main() { - float mask = texture2D(u_texture, v_texCoord).r; - bool isSeed = u_invert > 0.5 ? mask < 0.5 : mask > 0.5; - - if (isSeed) { - vec2 pixelCoord = floor(v_texCoord * u_resolution); - float x = pixelCoord.x; - float y = pixelCoord.y; - float xHi = floor(x / 256.0); - float xLo = x - xHi * 256.0; - float yHi = floor(y / 256.0); - float yLo = y - yHi * 256.0; - gl_FragColor = vec4(xHi / 255.0, xLo / 255.0, yHi / 255.0, yLo / 255.0); - } else { - gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); - } -} diff --git a/apps/web/src/lib/shaders/jfa-step.frag.glsl b/apps/web/src/lib/shaders/jfa-step.frag.glsl deleted file mode 100644 index 9b76a70b..00000000 --- a/apps/web/src/lib/shaders/jfa-step.frag.glsl +++ /dev/null @@ -1,60 +0,0 @@ -precision mediump float; - -uniform sampler2D u_texture; -uniform vec2 u_resolution; -uniform float u_step_size; - -varying vec2 v_texCoord; - -vec2 decodeSeed(vec4 encoded) { - float x = floor(encoded.r * 255.0 + 0.5) * 256.0 + floor(encoded.g * 255.0 + 0.5); - float y = floor(encoded.b * 255.0 + 0.5) * 256.0 + floor(encoded.a * 255.0 + 0.5); - return vec2(x, y); -} - -vec4 encodeSeed(vec2 seed) { - float xHi = floor(seed.x / 256.0); - float xLo = seed.x - xHi * 256.0; - float yHi = floor(seed.y / 256.0); - float yLo = seed.y - yHi * 256.0; - return vec4(xHi / 255.0, xLo / 255.0, yHi / 255.0, yLo / 255.0); -} - -bool isNoSeed(vec4 encoded) { - return encoded.r > 0.99 && encoded.g > 0.99 && encoded.b > 0.99 && encoded.a > 0.99; -} - -void main() { - vec2 pixelCoord = floor(v_texCoord * u_resolution); - vec2 texelSize = 1.0 / u_resolution; - - float bestDist = 1e10; - vec2 bestSeed = vec2(65535.0); - - for (int dy = -1; dy <= 1; dy++) { - for (int dx = -1; dx <= 1; dx++) { - vec2 offset = vec2(float(dx), float(dy)) * u_step_size; - vec2 sampleUV = v_texCoord + offset * texelSize; - - if (sampleUV.x < 0.0 || sampleUV.x > 1.0 || sampleUV.y < 0.0 || sampleUV.y > 1.0) - continue; - - vec4 encoded = texture2D(u_texture, sampleUV); - if (isNoSeed(encoded)) - continue; - - vec2 seed = decodeSeed(encoded); - float dist = distance(pixelCoord, seed); - if (dist < bestDist) { - bestDist = dist; - bestSeed = seed; - } - } - } - - if (bestDist < 1e9) { - gl_FragColor = encodeSeed(bestSeed); - } else { - gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); - } -} -- cgit v1.3.1