diff options
| author | cashmere <cashmere@autistici.org> | 2026-08-09 02:37:37 +0200 |
|---|---|---|
| committer | cashmere <cashmere@autistici.org> | 2026-08-09 02:37:37 +0200 |
| commit | c555f1eaebff90749bdc543592cfa80a060b29e2 (patch) | |
| tree | e6a04adb212871063653b66c17eb1b8c17c7d22f /apps/web/src/services/renderer | |
| parent | df82306a86d14bca0149e6d756ba82b75659af43 (diff) | |
| download | opencut-c555f1eaebff90749bdc543592cfa80a060b29e2.tar.gz | |
feat: lens effects tab, standalone motion effects, clip/asset rename, preview popout
- New Lens category in the assets panel: Blur, Motion Blur, Zoom In/Out,
Pan x4, Shake, Pulse, Spin, Custom Zoom. EffectDefinition gains a
category field; tabs with an empty category are hidden, and the
properties-panel 'Open effects' button opens the first non-empty one.
- Motion effects work standalone: dropping them on the timeline creates
an effect-track element that animates (scale/translate/rotate) every
track below it, computed purely in the TS frame descriptor - no wasm
changes, identical in preview and export. supportsStandalone removed.
- Motion Blur: directional gaussian smear (amount + angle) reusing the
existing WGSL shader with arbitrary u_direction.
- Custom Zoom: start/end scale params (keyframable clip-level).
- MotionOffset gains optional rotate, accumulated clip-level and applied
to standalone layer quads via rotationDegrees.
- Rename clips (timeline context menu) and media assets (media panel
context menu) via a shared RenameDialog; asset rename persists through
storageService with rollback on error.
- Preview pops out into a Document Picture-in-Picture window and docks
back; button hidden where the API is unsupported.
- Export keeps running when the export popover is closed; only the
explicit Cancel button aborts.
- Captions and Adjustment tabs removed from the assets panel.
Diffstat (limited to 'apps/web/src/services/renderer')
| -rw-r--r-- | apps/web/src/services/renderer/compositor/frame-descriptor.ts | 40 | ||||
| -rw-r--r-- | apps/web/src/services/renderer/nodes/effect-layer-node.ts | 3 | ||||
| -rw-r--r-- | apps/web/src/services/renderer/resolve.ts | 26 |
3 files changed, 58 insertions, 11 deletions
diff --git a/apps/web/src/services/renderer/compositor/frame-descriptor.ts b/apps/web/src/services/renderer/compositor/frame-descriptor.ts index d5ab88c3..d2bff525 100644 --- a/apps/web/src/services/renderer/compositor/frame-descriptor.ts +++ b/apps/web/src/services/renderer/compositor/frame-descriptor.ts @@ -121,13 +121,43 @@ async function collectNode({ } if (node instanceof EffectLayerNode) { - if (!node.resolved || node.resolved.passes.length === 0) { + if (!node.resolved) { return; } - items.push({ - type: "sceneEffect", - effectPassGroups: [node.resolved.passes], - }); + const { motion, passes } = node.resolved; + if ( + motion && + (motion.scale !== 1 || + motion.translateX !== 0 || + motion.translateY !== 0 || + (motion.rotate ?? 0) !== 0) + ) { + const { width, height } = renderer; + for (const item of items) { + if (item.type !== "layer") continue; + item.transform = { + ...item.transform, + centerX: + width / 2 + + (item.transform.centerX - width / 2) * motion.scale + + motion.translateX * width, + centerY: + height / 2 + + (item.transform.centerY - height / 2) * motion.scale + + motion.translateY * height, + width: item.transform.width * motion.scale, + height: item.transform.height * motion.scale, + rotationDegrees: + item.transform.rotationDegrees + (motion.rotate ?? 0), + }; + } + } + if (passes.length > 0) { + items.push({ + type: "sceneEffect", + effectPassGroups: [passes], + }); + } return; } diff --git a/apps/web/src/services/renderer/nodes/effect-layer-node.ts b/apps/web/src/services/renderer/nodes/effect-layer-node.ts index d1b51fa3..791d20ce 100644 --- a/apps/web/src/services/renderer/nodes/effect-layer-node.ts +++ b/apps/web/src/services/renderer/nodes/effect-layer-node.ts @@ -1,4 +1,4 @@ -import type { EffectPass } from "@/effects/types"; +import type { EffectPass, MotionOffset } from "@/effects/types"; import type { ParamValues } from "@/params"; import { BaseNode } from "./base-node"; @@ -11,6 +11,7 @@ export type EffectLayerNodeParams = { export type ResolvedEffectLayerNodeState = { passes: EffectPass[]; + motion?: MotionOffset; }; export class EffectLayerNode extends BaseNode< diff --git a/apps/web/src/services/renderer/resolve.ts b/apps/web/src/services/renderer/resolve.ts index a4c8d303..12f57e30 100644 --- a/apps/web/src/services/renderer/resolve.ts +++ b/apps/web/src/services/renderer/resolve.ts @@ -6,8 +6,10 @@ import { intensityToSigma, } from "@/effects/definitions/blur"; import { effectsRegistry, resolveEffectPasses } from "@/effects"; -import { applyMotionEffects } from "@/effects/motion"; +import { applyMotionEffects, sampleEasingBezier } from "@/effects/motion"; import type { Effect, EffectPass } from "@/effects/types"; +import { BUILTIN_PRESETS } from "@/timeline/components/graph-editor/easing-presets"; +import { clamp } from "@/utils/math"; import { getSourceTimeAtClipTime } from "@/retime"; import { DEFAULT_GRAPHIC_SOURCE_SIZE, @@ -479,11 +481,25 @@ function resolveEffectLayerNode({ width: context.renderer.width, height: context.renderer.height, }); - if (passes.length === 0) { + + const motion = definition.motion?.evaluate({ + effectParams: node.params.effectParams, + progress: sampleEasingBezier({ + bezier: + BUILTIN_PRESETS.find( + (entry) => entry.id === node.params.effectParams.easing, + )?.value ?? [0.25, 0.1, 0.25, 1], + x: clamp({ + value: (time - node.params.timeOffset) / node.params.duration, + min: 0, + max: 1, + }), + }), + }); + + if (passes.length === 0 && !motion) { return null; } - return { - passes, - }; + return motion ? { passes, motion } : { passes }; } |
