Commit Graph

2 Commits

Author SHA1 Message Date
anh doan 81adac6e1e
feat(effects): add @opencut/effects package with 24 effects and presets
Add a standalone effects package that extracts effect definitions,
GLSL shaders, and registry from @opencut/web into a reusable package.

## Package (@opencut/effects)

- Registry: register/get/has/getAll effects with Map-based lookup
- Categories: COLOR_TONE, ARTISTIC, BEAUTY with display metadata
- Types: Effect, EffectDefinition, EffectContext, WebGLEffectPass

### Effects (24 total)

**Color & Tone (8):** brightness, contrast, saturation, hue-shift,
temperature, exposure, gamma, color-balance

**Artistic (10):** blur, vignette, film-grain, sharpen, pixelate,
chromatic-aberration, glitch (2-pass), neon-glow (2-pass),
sketch (2-pass), oil-paint (2-pass)

**Beauty (6):** skin-smooth (bilateral filter), face-brighten,
eye-enhance, teeth-whiten, blush, slim-face

### Presets (12)

- Instagram: clarendon, juno, lark, gingham, valencia, nashville
- Cinematic: teal-and-orange, vintage-film, noir, bleach-bypass
- Beauty: soft-glow, portrait

## Web App Integration

- Migrate blur effect from web app to package
- Update imports via re-export pattern (backward compatible)
- Pass time param for animated effects (film-grain, glitch)
- Add face-mesh service using MediaPipe Face Mesh (lazy-loaded)
- Beauty effects auto-detect faces and pass EffectContext
- Async renderVisual for face detection pipeline

## Tests

152 unit tests covering registry, all effect definitions, and presets
2026-03-23 13:32:46 +07:00
Maze Winther 216e3e0c39 feat: introduce WebGL effects system and Blur effect
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.
2026-02-28 18:41:22 +01:00