mirror of
https://github.com/OpenCut-app/OpenCut.git
synced 2026-07-13 21:52:53 +02:00
Maze Winther
216e3e0c39
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.
51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import type { EffectDefinition } from "@/types/effects";
|
|
import blurFragmentShader from "./blur.frag.glsl";
|
|
|
|
export const blurEffectDefinition: EffectDefinition = {
|
|
type: "blur",
|
|
name: "Blur",
|
|
keywords: ["blur", "soft", "defocus"],
|
|
params: [
|
|
{
|
|
key: "intensity",
|
|
label: "Intensity",
|
|
type: "number",
|
|
default: 15,
|
|
min: 0,
|
|
max: 100,
|
|
step: 1,
|
|
},
|
|
],
|
|
renderer: {
|
|
type: "webgl",
|
|
passes: [
|
|
{
|
|
fragmentShader: blurFragmentShader,
|
|
uniforms: ({ effectParams }) => {
|
|
const intensity =
|
|
typeof effectParams.intensity === "number"
|
|
? effectParams.intensity
|
|
: Number.parseFloat(String(effectParams.intensity));
|
|
return {
|
|
u_sigma: Math.max(intensity / 5, 0.001),
|
|
u_direction: [1, 0],
|
|
};
|
|
},
|
|
},
|
|
{
|
|
fragmentShader: blurFragmentShader,
|
|
uniforms: ({ effectParams }) => {
|
|
const intensity =
|
|
typeof effectParams.intensity === "number"
|
|
? effectParams.intensity
|
|
: Number.parseFloat(String(effectParams.intensity));
|
|
return {
|
|
u_sigma: Math.max(intensity / 5, 0.001),
|
|
u_direction: [0, 1],
|
|
};
|
|
},
|
|
},
|
|
],
|
|
},
|
|
};
|