External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: migrate GPU renderer from WebGL to wgpu/WASM

Browse Source
This commit is contained in:
Maze Winther
2026-04-01 13:57:32 +02:00
parent b048b739bd
commit e579ae1202
44 changed files with 2745 additions and 1333 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/lib/effects/definitions/blur.frag.glsl
-25
View File
@@ -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;
}
apps/web/src/lib/effects/definitions/blur.ts
+9 -9
View File
@@ -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,
apps/web/src/lib/effects/effect.vert.glsl
-7
View File
@@ -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);
}
apps/web/src/lib/effects/index.ts
+3 -3
View File
@@ -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 }),
}));
}
apps/web/src/lib/effects/types.ts
+41 -42
View File
@@ -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;
}