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.
103 lines
2.1 KiB
TypeScript
103 lines
2.1 KiB
TypeScript
import type { TTimelineViewState } from "@/types/project";
|
|
import type { BlendMode } from "@/types/rendering";
|
|
import type { TrackType, Transform } from "@/types/timeline";
|
|
import {
|
|
Happy01Icon,
|
|
MagicWand05Icon,
|
|
MusicNote03Icon,
|
|
TextIcon,
|
|
} from "@hugeicons/core-free-icons";
|
|
import { HugeiconsIcon } from "@hugeicons/react";
|
|
import { OcVideoIcon } from "@opencut/ui/icons";
|
|
|
|
export const DEFAULT_TRANSFORM: Transform = {
|
|
scale: 1,
|
|
position: { x: 0, y: 0 },
|
|
rotate: 0,
|
|
};
|
|
|
|
export const DEFAULT_OPACITY = 1;
|
|
export const DEFAULT_BLEND_MODE: BlendMode = "normal";
|
|
export const DEFAULT_BOOKMARK_COLOR = "#009dff";
|
|
|
|
export const TRACK_CONFIG: Record<
|
|
TrackType,
|
|
{
|
|
background: string;
|
|
height: number;
|
|
defaultName: string;
|
|
icon: React.ReactNode;
|
|
}
|
|
> = {
|
|
video: {
|
|
background: "transparent",
|
|
height: 60,
|
|
defaultName: "Video track",
|
|
icon: <OcVideoIcon className="text-muted-foreground size-4 shrink-0" />,
|
|
},
|
|
text: {
|
|
background: "bg-[#5DBAA0]",
|
|
height: 25,
|
|
defaultName: "Text track",
|
|
icon: (
|
|
<HugeiconsIcon
|
|
icon={TextIcon}
|
|
className="text-muted-foreground size-4 shrink-0"
|
|
/>
|
|
),
|
|
},
|
|
audio: {
|
|
background: "bg-[#8F5DBA]",
|
|
height: 50,
|
|
defaultName: "Audio track",
|
|
icon: (
|
|
<HugeiconsIcon
|
|
icon={MusicNote03Icon}
|
|
className="text-muted-foreground size-4 shrink-0"
|
|
/>
|
|
),
|
|
},
|
|
sticker: {
|
|
background: "bg-[#BA5D7A]",
|
|
height: 50,
|
|
defaultName: "Sticker track",
|
|
icon: (
|
|
<HugeiconsIcon
|
|
icon={Happy01Icon}
|
|
className="text-muted-foreground size-4 shrink-0"
|
|
/>
|
|
),
|
|
},
|
|
effect: {
|
|
background: "bg-[#5d93ba]",
|
|
height: 25,
|
|
defaultName: "Effect track",
|
|
icon: (
|
|
<HugeiconsIcon
|
|
icon={MagicWand05Icon}
|
|
className="text-muted-foreground size-4 shrink-0"
|
|
/>
|
|
),
|
|
},
|
|
} as const;
|
|
|
|
export const TRACK_GAP = 4;
|
|
|
|
export const DRAG_THRESHOLD_PX = 5;
|
|
|
|
export const TIMELINE_CONSTANTS = {
|
|
PIXELS_PER_SECOND: 50,
|
|
DEFAULT_ELEMENT_DURATION: 5,
|
|
PADDING_TOP_PX: 0,
|
|
ZOOM_MIN: 0.1,
|
|
ZOOM_MAX: 100,
|
|
ZOOM_BUTTON_FACTOR: 1.7,
|
|
ZOOM_ANCHOR_PLAYHEAD_THRESHOLD: 0.15,
|
|
} as const;
|
|
|
|
export const DEFAULT_TIMELINE_VIEW_STATE: TTimelineViewState = {
|
|
zoomLevel: 1,
|
|
scrollLeft: 0,
|
|
playheadTime: 0,
|
|
};
|