diff options
Diffstat (limited to 'apps/web/src/services/renderer/nodes')
9 files changed, 529 insertions, 255 deletions
diff --git a/apps/web/src/services/renderer/nodes/blur-background-node.ts b/apps/web/src/services/renderer/nodes/blur-background-node.ts new file mode 100644 index 00000000..7f4d06fc --- /dev/null +++ b/apps/web/src/services/renderer/nodes/blur-background-node.ts @@ -0,0 +1,149 @@ +import { TIME_EPSILON_SECONDS } from "@/constants/animation-constants"; +import { buildGaussianBlurPasses } from "@/lib/effects/definitions/blur"; +import { getSourceTimeAtClipTime } from "@/lib/retime"; +import { videoCache } from "@/services/video-cache/service"; +import type { RetimeConfig } from "@/lib/timeline"; +import type { CanvasRenderer } from "../canvas-renderer"; +import { createOffscreenCanvas } from "../canvas-utils"; +import { webglEffectRenderer } from "../webgl/webgl-effect-renderer"; +import { BaseNode } from "./base-node"; +import { loadImageSource, type CachedImageSource } from "./image-node"; + +export type BlurBackgroundNodeParams = { + mediaId: string; + url: string; + file: File; + mediaType: "video" | "image"; + duration: number; + timeOffset: number; + trimStart: number; + trimEnd: number; + retime?: RetimeConfig; + blurIntensity: number; +}; + +type BackdropSource = { + source: CanvasImageSource; + width: number; + height: number; +}; + +export class BlurBackgroundNode extends BaseNode<BlurBackgroundNodeParams> { + private cachedImageSource: Promise<CachedImageSource> | null; + + constructor(params: BlurBackgroundNodeParams) { + super(params); + this.cachedImageSource = + params.mediaType === "image" ? loadImageSource(params.url) : null; + } + + private isInRange({ time }: { time: number }): boolean { + const localTime = time - this.params.timeOffset; + return ( + localTime >= -TIME_EPSILON_SECONDS && localTime < this.params.duration + ); + } + + private getSourceLocalTime({ time }: { time: number }): number { + const clipTime = time - this.params.timeOffset; + return ( + this.params.trimStart + + getSourceTimeAtClipTime({ + clipTime, + retime: this.params.retime, + }) + ); + } + + private async getBackdropSource({ + time, + }: { + time: number; + }): Promise<BackdropSource | null> { + if (this.params.mediaType === "video") { + const frame = await videoCache.getFrameAt({ + mediaId: this.params.mediaId, + file: this.params.file, + time: this.getSourceLocalTime({ time }), + }); + + if (!frame) { + return null; + } + + return { + source: frame.canvas, + width: frame.canvas.width, + height: frame.canvas.height, + }; + } + + if (!this.cachedImageSource) { + return null; + } + + const { source, width, height } = await this.cachedImageSource; + return { source, width, height }; + } + + async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) { + await super.render({ renderer, time }); + + if (!this.isInRange({ time })) { + return; + } + + const backdropSource = await this.getBackdropSource({ time }); + if (!backdropSource) { + return; + } + + const offscreen = createOffscreenCanvas({ + width: renderer.width, + height: renderer.height, + }); + const offscreenCtx = offscreen.getContext("2d") as + | CanvasRenderingContext2D + | OffscreenCanvasRenderingContext2D + | null; + if (!offscreenCtx) { + return; + } + + const coverScale = Math.max( + renderer.width / backdropSource.width, + renderer.height / backdropSource.height, + ); + const scaledWidth = backdropSource.width * coverScale; + const scaledHeight = backdropSource.height * coverScale; + const offsetX = (renderer.width - scaledWidth) / 2; + const offsetY = (renderer.height - scaledHeight) / 2; + + offscreenCtx.drawImage( + backdropSource.source, + offsetX, + offsetY, + scaledWidth, + scaledHeight, + ); + + const passes = buildGaussianBlurPasses({ + sigmaX: this.params.blurIntensity * (renderer.width / 1920), + sigmaY: this.params.blurIntensity * (renderer.height / 1080), + }); + const effectResult = webglEffectRenderer.applyEffect({ + source: offscreen as CanvasImageSource, + width: renderer.width, + height: renderer.height, + passes, + }); + + renderer.context.drawImage( + effectResult, + 0, + 0, + renderer.width, + renderer.height, + ); + } +} diff --git a/apps/web/src/services/renderer/nodes/composite-effect-node.ts b/apps/web/src/services/renderer/nodes/composite-effect-node.ts deleted file mode 100644 index 3fbfffc1..00000000 --- a/apps/web/src/services/renderer/nodes/composite-effect-node.ts +++ /dev/null @@ -1,77 +0,0 @@ -import type { CanvasRenderer } from "../canvas-renderer"; -import { createOffscreenCanvas } from "../canvas-utils"; -import { getEffect } from "@/lib/effects"; -import type { EffectParamValues } from "@/types/effects"; -import { BaseNode } from "./base-node"; -import { webglEffectRenderer } from "../webgl-effect-renderer"; - -export type CompositeEffectNodeParams = { - contentNodes: BaseNode[]; - effectType: string; - effectParams: EffectParamValues; - scale: number; -}; - -export class CompositeEffectNode extends BaseNode<CompositeEffectNodeParams> { - async render({ - renderer, - time, - }: { - renderer: CanvasRenderer; - time: number; - }): Promise<void> { - const offscreen = createOffscreenCanvas({ - width: renderer.width, - height: renderer.height, - }); - const offscreenCtx = offscreen.getContext("2d") as OffscreenCanvasRenderingContext2D | null; - if (!offscreenCtx) { - throw new Error("failed to get offscreen canvas context"); - } - - const originalContext = renderer.context; - renderer.context = offscreenCtx; - - for (const node of this.params.contentNodes) { - await node.render({ renderer, time }); - } - - renderer.context = originalContext; - - const effectDefinition = getEffect({ effectType: this.params.effectType }); - const scale = this.params.scale; - const scaledWidth = renderer.width * scale; - const scaledHeight = renderer.height * scale; - const offsetX = (renderer.width - scaledWidth) / 2; - const offsetY = (renderer.height - scaledHeight) / 2; - - const passes = effectDefinition.renderer.passes.map((pass) => ({ - fragmentShader: pass.fragmentShader, - uniforms: pass.uniforms({ - effectParams: this.params.effectParams, - width: renderer.width, - height: renderer.height, - }), - })); - const effectResult = webglEffectRenderer.applyEffect({ - source: offscreen as CanvasImageSource, - width: renderer.width, - height: renderer.height, - passes, - }); - - renderer.context.save(); - renderer.context.drawImage( - effectResult, - 0, - 0, - renderer.width, - renderer.height, - offsetX, - offsetY, - scaledWidth, - scaledHeight, - ); - renderer.context.restore(); - } -} 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 3d84be2b..82aee1b3 100644 --- a/apps/web/src/services/renderer/nodes/effect-layer-node.ts +++ b/apps/web/src/services/renderer/nodes/effect-layer-node.ts @@ -1,14 +1,14 @@ import type { CanvasRenderer } from "../canvas-renderer"; -import { getEffect } from "@/lib/effects"; -import type { EffectParamValues } from "@/types/effects"; +import { effectsRegistry, resolveEffectPasses } from "@/lib/effects"; +import type { ParamValues } from "@/lib/params"; import { BaseNode } from "./base-node"; -import { webglEffectRenderer } from "../webgl-effect-renderer"; +import { webglEffectRenderer } from "../webgl/webgl-effect-renderer"; const TIME_EPSILON = 1e-6; export type EffectLayerNodeParams = { effectType: string; - effectParams: EffectParamValues; + effectParams: ParamValues; timeOffset: number; duration: number; }; @@ -49,18 +49,17 @@ export class EffectLayerNode extends BaseNode<EffectLayerNodeParams> { const source = renderer.context.canvas as CanvasImageSource; - const effectDefinition = getEffect({ - effectType: this.params.effectType, - }); + const effectDefinition = effectsRegistry.get(this.params.effectType); - const passes = effectDefinition.renderer.passes.map((pass) => ({ - fragmentShader: pass.fragmentShader, - uniforms: pass.uniforms({ - effectParams: this.params.effectParams, - width: renderer.width, - height: renderer.height, - }), - })); + const passes = resolveEffectPasses({ + definition: effectDefinition, + effectParams: this.params.effectParams, + width: renderer.width, + height: renderer.height, + }); + if (passes.length === 0) { + return; + } const effectResult = webglEffectRenderer.applyEffect({ source, width: renderer.width, diff --git a/apps/web/src/services/renderer/nodes/graphic-node.ts b/apps/web/src/services/renderer/nodes/graphic-node.ts new file mode 100644 index 00000000..b258a353 --- /dev/null +++ b/apps/web/src/services/renderer/nodes/graphic-node.ts @@ -0,0 +1,92 @@ +import type { CanvasRenderer } from "../canvas-renderer"; +import { createOffscreenCanvas } from "../canvas-utils"; +import { + DEFAULT_GRAPHIC_SOURCE_SIZE, + getGraphicDefinition, + registerDefaultGraphics, +} from "@/lib/graphics"; +import { resolveGraphicParamsAtTime } from "@/lib/animation"; +import type { ParamValues } from "@/lib/params"; +import { VisualNode, type VisualNodeParams } from "./visual-node"; + +export interface GraphicNodeParams extends VisualNodeParams { + definitionId: string; + params: ParamValues; +} + +export class GraphicNode extends VisualNode<GraphicNodeParams> { + private cachedKey: string | null = null; + private cachedSource: OffscreenCanvas | HTMLCanvasElement | null = null; + + constructor(params: GraphicNodeParams) { + super(params); + registerDefaultGraphics(); + } + + private getSource({ + localTime, + }: { + localTime: number; + }): OffscreenCanvas | HTMLCanvasElement | null { + const definition = getGraphicDefinition({ + definitionId: this.params.definitionId, + }); + const resolvedParams = resolveGraphicParamsAtTime({ + element: this.params, + localTime, + }); + const cacheKey = JSON.stringify({ + definitionId: this.params.definitionId, + params: resolvedParams, + }); + if (this.cachedSource && this.cachedKey === cacheKey) { + return this.cachedSource; + } + + const canvas = createOffscreenCanvas({ + width: DEFAULT_GRAPHIC_SOURCE_SIZE, + height: DEFAULT_GRAPHIC_SOURCE_SIZE, + }); + const ctx = canvas.getContext("2d") as + | CanvasRenderingContext2D + | OffscreenCanvasRenderingContext2D + | null; + if (!ctx) { + return null; + } + + definition.render({ + ctx, + params: resolvedParams, + width: DEFAULT_GRAPHIC_SOURCE_SIZE, + height: DEFAULT_GRAPHIC_SOURCE_SIZE, + }); + + this.cachedKey = cacheKey; + this.cachedSource = canvas; + return canvas; + } + + async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) { + await super.render({ renderer, time }); + + if (!this.isInRange({ time })) { + return; + } + + const source = this.getSource({ + localTime: this.getAnimationLocalTime({ time }), + }); + if (!source) { + return; + } + + this.renderVisual({ + renderer, + source, + sourceWidth: DEFAULT_GRAPHIC_SOURCE_SIZE, + sourceHeight: DEFAULT_GRAPHIC_SOURCE_SIZE, + timelineTime: time, + }); + } +} diff --git a/apps/web/src/services/renderer/nodes/image-node.ts b/apps/web/src/services/renderer/nodes/image-node.ts index 6720a5e5..7d74f511 100644 --- a/apps/web/src/services/renderer/nodes/image-node.ts +++ b/apps/web/src/services/renderer/nodes/image-node.ts @@ -6,7 +6,7 @@ export interface ImageNodeParams extends VisualNodeParams { maxSourceSize?: number; } -interface CachedImageSource { +export interface CachedImageSource { source: HTMLImageElement | OffscreenCanvas; width: number; height: number; @@ -14,7 +14,7 @@ interface CachedImageSource { const imageSourceCache = new Map<string, Promise<CachedImageSource>>(); -function loadImageSource( +export function loadImageSource( url: string, maxSourceSize?: number, ): Promise<CachedImageSource> { diff --git a/apps/web/src/services/renderer/nodes/sticker-node.ts b/apps/web/src/services/renderer/nodes/sticker-node.ts index da271685..71cb37b5 100644 --- a/apps/web/src/services/renderer/nodes/sticker-node.ts +++ b/apps/web/src/services/renderer/nodes/sticker-node.ts @@ -4,6 +4,8 @@ import { VisualNode, type VisualNodeParams } from "./visual-node"; export interface StickerNodeParams extends VisualNodeParams { stickerId: string; + intrinsicWidth?: number; + intrinsicHeight?: number; } interface CachedStickerSource { @@ -14,7 +16,7 @@ interface CachedStickerSource { const stickerSourceCache = new Map<string, Promise<CachedStickerSource>>(); -function loadStickerSource(stickerId: string): Promise<CachedStickerSource> { +function loadStickerSource({ stickerId }: { stickerId: string }): Promise<CachedStickerSource> { const cached = stickerSourceCache.get(stickerId); if (cached) return cached; @@ -33,7 +35,7 @@ function loadStickerSource(stickerId: string): Promise<CachedStickerSource> { image.src = url; }); - return { source: image, width: 200, height: 200 }; + return { source: image, width: image.naturalWidth, height: image.naturalHeight }; })(); stickerSourceCache.set(stickerId, promise); @@ -45,7 +47,7 @@ export class StickerNode extends VisualNode<StickerNodeParams> { constructor(params: StickerNodeParams) { super(params); - this.cachedSource = loadStickerSource(params.stickerId); + this.cachedSource = loadStickerSource({ stickerId: params.stickerId }); } async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) { @@ -55,13 +57,19 @@ export class StickerNode extends VisualNode<StickerNodeParams> { return; } - const { source, width, height } = await this.cachedSource; + const { source, width: loadedWidth, height: loadedHeight } = + await this.cachedSource; + + // Prefer element-stored intrinsic dimensions as the geometry authority. + // The loaded image is only the drawable source. + const sourceWidth = this.params.intrinsicWidth ?? loadedWidth; + const sourceHeight = this.params.intrinsicHeight ?? loadedHeight; this.renderVisual({ renderer, source, - sourceWidth: width, - sourceHeight: height, + sourceWidth, + sourceHeight, timelineTime: time, }); } diff --git a/apps/web/src/services/renderer/nodes/text-node.ts b/apps/web/src/services/renderer/nodes/text-node.ts index 86e24fdf..031c43b3 100644 --- a/apps/web/src/services/renderer/nodes/text-node.ts +++ b/apps/web/src/services/renderer/nodes/text-node.ts @@ -1,12 +1,8 @@ import type { CanvasRenderer } from "../canvas-renderer"; import { createOffscreenCanvas } from "../canvas-utils"; import { BaseNode } from "./base-node"; -import type { TextElement } from "@/types/timeline"; +import type { TextElement } from "@/lib/timeline"; import { - DEFAULT_TEXT_BACKGROUND, - DEFAULT_TEXT_ELEMENT, - DEFAULT_LINE_HEIGHT, - FONT_SIZE_SCALE_REFERENCE, CORNER_RADIUS_MAX, CORNER_RADIUS_MIN, } from "@/constants/text-constants"; @@ -14,34 +10,20 @@ import { getMetricAscent, getMetricDescent, getTextBackgroundRect, - measureTextBlock, + setCanvasLetterSpacing, } from "@/lib/text/layout"; +import { measureTextElement } from "@/lib/text/measure-element"; import { getElementLocalTime, resolveColorAtTime, - resolveNumberAtTime, resolveOpacityAtTime, resolveTransformAtTime, } from "@/lib/animation"; import { resolveEffectParamsAtTime } from "@/lib/animation/effect-param-channel"; -import { getEffect } from "@/lib/effects"; -import { webglEffectRenderer } from "../webgl-effect-renderer"; +import { effectsRegistry, resolveEffectPasses } from "@/lib/effects"; +import { webglEffectRenderer } from "../webgl/webgl-effect-renderer"; import { clamp } from "@/utils/math"; -function scaleFontSize({ - fontSize, - canvasHeight, -}: { - fontSize: number; - canvasHeight: number; -}): number { - return fontSize * (canvasHeight / FONT_SIZE_SCALE_REFERENCE); -} - -function quoteFontFamily({ fontFamily }: { fontFamily: string }): string { - return `"${fontFamily.replace(/"/g, '\\"')}"`; -} - const TEXT_DECORATION_THICKNESS_RATIO = 0.07; const STRIKETHROUGH_VERTICAL_RATIO = 0.35; @@ -64,9 +46,15 @@ function drawTextDecoration({ }): void { if (textDecoration === "none" || !textDecoration) return; - const thickness = Math.max(1, scaledFontSize * TEXT_DECORATION_THICKNESS_RATIO); + const thickness = Math.max( + 1, + scaledFontSize * TEXT_DECORATION_THICKNESS_RATIO, + ); const ascent = getMetricAscent({ metrics, fallbackFontSize: scaledFontSize }); - const descent = getMetricDescent({ metrics, fallbackFontSize: scaledFontSize }); + const descent = getMetricDescent({ + metrics, + fallbackFontSize: scaledFontSize, + }); let xStart = -lineWidth / 2; if (textAlign === "left") xStart = 0; @@ -121,19 +109,6 @@ export class TextNode extends BaseNode<TextNodeParams> { const x = transform.position.x + this.params.canvasCenter.x; const y = transform.position.y + this.params.canvasCenter.y; - const fontWeight = this.params.fontWeight === "bold" ? "bold" : "normal"; - const fontStyle = this.params.fontStyle === "italic" ? "italic" : "normal"; - const scaledFontSize = scaleFontSize({ - fontSize: this.params.fontSize, - canvasHeight: this.params.canvasHeight, - }); - const fontFamily = quoteFontFamily({ fontFamily: this.params.fontFamily }); - const fontString = `${fontStyle} ${fontWeight} ${scaledFontSize}px ${fontFamily}, sans-serif`; - const letterSpacing = this.params.letterSpacing ?? 0; - const lineHeight = this.params.lineHeight ?? DEFAULT_LINE_HEIGHT; - const lines = this.params.content.split("\n"); - const lineHeightPx = scaledFontSize * lineHeight; - const fontSizeRatio = this.params.fontSize / DEFAULT_TEXT_ELEMENT.fontSize; const baseline = this.params.textBaseline ?? "middle"; const blendMode = ( this.params.blendMode && this.params.blendMode !== "normal" @@ -141,73 +116,49 @@ export class TextNode extends BaseNode<TextNodeParams> { : "source-over" ) as GlobalCompositeOperation; - renderer.context.save(); - renderer.context.font = fontString; - renderer.context.textBaseline = baseline; - if ("letterSpacing" in renderer.context) { - (renderer.context as CanvasRenderingContext2D & { letterSpacing: string }).letterSpacing = `${letterSpacing}px`; - } - const lineMetrics = lines.map((line) => renderer.context.measureText(line)); - renderer.context.restore(); + const { + scaledFontSize, + fontString, + letterSpacing, + lineHeightPx, + lines, + lineMetrics, + block, + fontSizeRatio, + resolvedBackground, + } = measureTextElement({ + element: this.params, + canvasHeight: this.params.canvasHeight, + localTime, + ctx: renderer.context, + }); const lineCount = lines.length; - const block = measureTextBlock({ lineMetrics, lineHeightPx, fallbackFontSize: scaledFontSize }); - const textColor = resolveColorAtTime({ + const textColor = resolveColorAtTime({ baseColor: this.params.color, animations: this.params.animations, propertyPath: "color", localTime, }); - const bg = this.params.background; - const resolvedBackground = { - ...bg, + const resolvedBackgroundWithColor = { + ...resolvedBackground, color: resolveColorAtTime({ - baseColor: bg.color, + baseColor: this.params.background.color, animations: this.params.animations, propertyPath: "background.color", localTime, }), - paddingX: resolveNumberAtTime({ - baseValue: bg.paddingX ?? DEFAULT_TEXT_BACKGROUND.paddingX, - animations: this.params.animations, - propertyPath: "background.paddingX", - localTime, - }), - paddingY: resolveNumberAtTime({ - baseValue: bg.paddingY ?? DEFAULT_TEXT_BACKGROUND.paddingY, - animations: this.params.animations, - propertyPath: "background.paddingY", - localTime, - }), - offsetX: resolveNumberAtTime({ - baseValue: bg.offsetX ?? DEFAULT_TEXT_BACKGROUND.offsetX, - animations: this.params.animations, - propertyPath: "background.offsetX", - localTime, - }), - offsetY: resolveNumberAtTime({ - baseValue: bg.offsetY ?? DEFAULT_TEXT_BACKGROUND.offsetY, - animations: this.params.animations, - propertyPath: "background.offsetY", - localTime, - }), - cornerRadius: resolveNumberAtTime({ - baseValue: bg.cornerRadius ?? CORNER_RADIUS_MIN, - animations: this.params.animations, - propertyPath: "background.cornerRadius", - localTime, - }), }; - const drawContent = (ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) => { + const drawContent = ( + ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, + ) => { ctx.font = fontString; ctx.textAlign = this.params.textAlign; ctx.textBaseline = baseline; ctx.fillStyle = textColor; - if ("letterSpacing" in ctx) { - (ctx as CanvasRenderingContext2D & { letterSpacing: string }).letterSpacing = `${letterSpacing}px`; - } + setCanvasLetterSpacing({ ctx, letterSpacingPx: letterSpacing }); if ( this.params.background.enabled && @@ -218,17 +169,29 @@ export class TextNode extends BaseNode<TextNodeParams> { const backgroundRect = getTextBackgroundRect({ textAlign: this.params.textAlign, block, - background: resolvedBackground, + background: resolvedBackgroundWithColor, fontSizeRatio, }); if (backgroundRect) { - const p = clamp({ value: resolvedBackground.cornerRadius, min: CORNER_RADIUS_MIN, max: CORNER_RADIUS_MAX }) / 100; - const radius = Math.min(backgroundRect.width, backgroundRect.height) / 2 * p; - ctx.fillStyle = resolvedBackground.color; - ctx.beginPath(); - ctx.roundRect(backgroundRect.left, backgroundRect.top, backgroundRect.width, backgroundRect.height, radius); - ctx.fill(); - ctx.fillStyle = textColor; + const p = + clamp({ + value: resolvedBackgroundWithColor.cornerRadius, + min: CORNER_RADIUS_MIN, + max: CORNER_RADIUS_MAX, + }) / 100; + const radius = + (Math.min(backgroundRect.width, backgroundRect.height) / 2) * p; + ctx.fillStyle = resolvedBackgroundWithColor.color; + ctx.beginPath(); + ctx.roundRect( + backgroundRect.left, + backgroundRect.top, + backgroundRect.width, + backgroundRect.height, + radius, + ); + ctx.fill(); + ctx.fillStyle = textColor; } } @@ -247,15 +210,18 @@ export class TextNode extends BaseNode<TextNodeParams> { } }; - const applyTransform = (ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) => { + const applyTransform = ( + ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, + ) => { ctx.translate(x, y); - ctx.scale(transform.scale, transform.scale); + ctx.scale(transform.scaleX, transform.scaleY); if (transform.rotate) { ctx.rotate((transform.rotate * Math.PI) / 180); } }; - const enabledEffects = this.params.effects?.filter((effect) => effect.enabled) ?? []; + const enabledEffects = + this.params.effects?.filter((effect) => effect.enabled) ?? []; if (enabledEffects.length === 0) { renderer.context.save(); @@ -269,11 +235,16 @@ export class TextNode extends BaseNode<TextNodeParams> { // Effects path: render text to a same-size offscreen canvas so the blur // can spread into the surrounding transparent area without hard clipping. - const offscreen = createOffscreenCanvas({ width: renderer.width, height: renderer.height }); - const offscreenCtx = offscreen.getContext("2d") as OffscreenCanvasRenderingContext2D | null; + const offscreen = createOffscreenCanvas({ + width: renderer.width, + height: renderer.height, + }); + const offscreenCtx = offscreen.getContext( + "2d", + ) as OffscreenCanvasRenderingContext2D | null; if (!offscreenCtx) { - renderer.context.save(); + renderer.context.save(); applyTransform(renderer.context); renderer.context.globalCompositeOperation = blendMode; renderer.context.globalAlpha = opacity; @@ -294,15 +265,13 @@ export class TextNode extends BaseNode<TextNodeParams> { animations: this.params.animations, localTime, }); - const definition = getEffect({ effectType: effect.type }); - const passes = definition.renderer.passes.map((pass) => ({ - fragmentShader: pass.fragmentShader, - uniforms: pass.uniforms({ - effectParams: resolvedParams, - width: renderer.width, - height: renderer.height, - }), - })); + const definition = effectsRegistry.get(effect.type); + const passes = resolveEffectPasses({ + definition, + effectParams: resolvedParams, + width: renderer.width, + height: renderer.height, + }); currentSource = webglEffectRenderer.applyEffect({ source: currentSource, width: renderer.width, diff --git a/apps/web/src/services/renderer/nodes/video-node.ts b/apps/web/src/services/renderer/nodes/video-node.ts index 503c9c03..af39d26f 100644 --- a/apps/web/src/services/renderer/nodes/video-node.ts +++ b/apps/web/src/services/renderer/nodes/video-node.ts @@ -17,6 +17,7 @@ export class VideoNode extends VisualNode<VideoNodeParams> { } const videoTime = this.getSourceLocalTime({ time }); + const frame = await videoCache.getFrameAt({ mediaId: this.params.mediaId, file: this.params.file, diff --git a/apps/web/src/services/renderer/nodes/visual-node.ts b/apps/web/src/services/renderer/nodes/visual-node.ts index 6c50aa12..e0f87c52 100644 --- a/apps/web/src/services/renderer/nodes/visual-node.ts +++ b/apps/web/src/services/renderer/nodes/visual-node.ts @@ -1,10 +1,11 @@ import type { CanvasRenderer } from "../canvas-renderer"; import { createOffscreenCanvas } from "../canvas-utils"; import { BaseNode } from "./base-node"; -import type { Effect } from "@/types/effects"; -import type { BlendMode } from "@/types/rendering"; -import type { Transform } from "@/types/timeline"; -import type { ElementAnimations } from "@/types/animation"; +import type { Effect } from "@/lib/effects/types"; +import type { Mask } from "@/lib/masks/types"; +import type { BlendMode, Transform } from "@/lib/rendering"; +import type { ElementAnimations } from "@/lib/animation/types"; +import type { RetimeConfig } from "@/lib/timeline"; import { getElementLocalTime, resolveOpacityAtTime, @@ -12,26 +13,38 @@ import { } from "@/lib/animation"; import { resolveEffectParamsAtTime } from "@/lib/animation/effect-param-channel"; import { TIME_EPSILON_SECONDS } from "@/constants/animation-constants"; -import { getEffect } from "@/lib/effects"; -import { webglEffectRenderer } from "../webgl-effect-renderer"; +import { effectsRegistry, resolveEffectPasses } from "@/lib/effects"; +import { masksRegistry } from "@/lib/masks"; +import { getSourceTimeAtClipTime } from "@/lib/retime"; +import { webglEffectRenderer } from "../webgl/webgl-effect-renderer"; +import { applyMaskFeather } from "../mask-feather"; export interface VisualNodeParams { duration: number; timeOffset: number; trimStart: number; trimEnd: number; + retime?: RetimeConfig; transform: Transform; animations?: ElementAnimations; opacity: number; blendMode?: BlendMode; effects?: Effect[]; + masks?: Mask[]; } export abstract class VisualNode< Params extends VisualNodeParams = VisualNodeParams, > extends BaseNode<Params> { protected getSourceLocalTime({ time }: { time: number }): number { - return time - this.params.timeOffset + this.params.trimStart; + const clipTime = time - this.params.timeOffset; + return ( + this.params.trimStart + + getSourceTimeAtClipTime({ + clipTime, + retime: this.params.retime, + }) + ); } protected getAnimationLocalTime({ time }: { time: number }): number { @@ -43,10 +56,10 @@ export abstract class VisualNode< } protected isInRange({ time }: { time: number }): boolean { - const localTime = this.getSourceLocalTime({ time }); + const localTime = time - this.params.timeOffset; return ( - localTime >= this.params.trimStart - TIME_EPSILON_SECONDS && - localTime < this.params.trimStart + this.params.duration + localTime >= -TIME_EPSILON_SECONDS && + localTime < this.params.duration ); } @@ -65,7 +78,9 @@ export abstract class VisualNode< }): void { renderer.context.save(); - const animationLocalTime = this.getAnimationLocalTime({ time: timelineTime }); + const animationLocalTime = this.getAnimationLocalTime({ + time: timelineTime, + }); const transform = resolveTransformAtTime({ baseTransform: this.params.transform, animations: this.params.animations, @@ -80,10 +95,12 @@ export abstract class VisualNode< renderer.width / sourceWidth, renderer.height / sourceHeight, ); - const scaledWidth = sourceWidth * containScale * transform.scale; - const scaledHeight = sourceHeight * containScale * transform.scale; - const x = renderer.width / 2 + transform.position.x - scaledWidth / 2; - const y = renderer.height / 2 + transform.position.y - scaledHeight / 2; + const scaledWidth = sourceWidth * containScale * transform.scaleX; + const scaledHeight = sourceHeight * containScale * transform.scaleY; + const absWidth = Math.abs(scaledWidth); + const absHeight = Math.abs(scaledHeight); + const x = renderer.width / 2 + transform.position.x - absWidth / 2; + const y = renderer.height / 2 + transform.position.y - absHeight / 2; renderer.context.globalCompositeOperation = ( this.params.blendMode && this.params.blendMode !== "normal" @@ -92,71 +109,187 @@ export abstract class VisualNode< ) as GlobalCompositeOperation; renderer.context.globalAlpha = opacity; - if (transform.rotate !== 0) { - const centerX = x + scaledWidth / 2; - const centerY = y + scaledHeight / 2; + const flipX = scaledWidth < 0 ? -1 : 1; + const flipY = scaledHeight < 0 ? -1 : 1; + const needsTransform = transform.rotate !== 0 || flipX !== 1 || flipY !== 1; + + if (needsTransform) { + const centerX = x + absWidth / 2; + const centerY = y + absHeight / 2; renderer.context.translate(centerX, centerY); renderer.context.rotate((transform.rotate * Math.PI) / 180); + renderer.context.scale(flipX, flipY); renderer.context.translate(-centerX, -centerY); } const enabledEffects = this.params.effects?.filter((effect) => effect.enabled) ?? []; + const activeMasks = this.params.masks ?? []; + + if (activeMasks.length === 0 && enabledEffects.length === 0) { + renderer.context.drawImage(source, x, y, absWidth, absHeight); + renderer.context.restore(); + return; + } + + const currentResult = + enabledEffects.length > 0 + ? this.applyEffects({ + source, + effects: enabledEffects, + width: absWidth, + height: absHeight, + animationLocalTime, + }) + : source; - if (enabledEffects.length === 0) { - renderer.context.drawImage(source, x, y, scaledWidth, scaledHeight); + if (activeMasks.length === 0) { + renderer.context.drawImage(currentResult, x, y, absWidth, absHeight); renderer.context.restore(); return; } const elementCanvas = createOffscreenCanvas({ - width: Math.round(scaledWidth), - height: Math.round(scaledHeight), + width: Math.round(absWidth), + height: Math.round(absHeight), }); const elementCtx = elementCanvas.getContext("2d") as | CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D | null; if (!elementCtx) { - renderer.context.drawImage(source, x, y, scaledWidth, scaledHeight); + renderer.context.drawImage(currentResult, x, y, absWidth, absHeight); renderer.context.restore(); return; } - elementCtx.drawImage(source, 0, 0, scaledWidth, scaledHeight); + elementCtx.drawImage(currentResult, 0, 0, absWidth, absHeight); - let currentResult: CanvasImageSource = elementCanvas; + for (const mask of activeMasks) { + this.applyMask({ + mask, + elementCtx, + scaledWidth: absWidth, + scaledHeight: absHeight, + }); + } + + renderer.context.drawImage(elementCanvas, x, y, absWidth, absHeight); + renderer.context.restore(); + } - for (const effect of enabledEffects) { + private applyEffects({ + source, + effects, + width, + height, + animationLocalTime, + }: { + source: CanvasImageSource; + effects: Effect[]; + width: number; + height: number; + animationLocalTime: number; + }): CanvasImageSource { + let current: CanvasImageSource = source; + for (const effect of effects) { const resolvedParams = resolveEffectParamsAtTime({ effect, animations: this.params.animations, localTime: animationLocalTime, }); - const definition = getEffect({ effectType: effect.type }); - const passes = definition.renderer.passes.map((pass) => ({ - fragmentShader: pass.fragmentShader, - uniforms: pass.uniforms({ - effectParams: resolvedParams, - width: scaledWidth, - height: scaledHeight, - }), - })); - currentResult = webglEffectRenderer.applyEffect({ - source: currentResult, + const definition = effectsRegistry.get(effect.type); + const passes = resolveEffectPasses({ + definition, + effectParams: resolvedParams, + width, + height, + }); + current = webglEffectRenderer.applyEffect({ + source: current, + width: Math.round(width), + height: Math.round(height), + passes, + }); + } + return current; + } + + private applyMask({ + mask, + elementCtx, + scaledWidth, + scaledHeight, + }: { + mask: Mask; + elementCtx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D; + scaledWidth: number; + scaledHeight: number; + }): void { + const definition = masksRegistry.get(mask.type); + const { feather, inverted } = mask.params; + + const maskCanvas = createOffscreenCanvas({ + width: Math.round(scaledWidth), + height: Math.round(scaledHeight), + }); + const maskCtx = maskCanvas.getContext("2d") as + | CanvasRenderingContext2D + | OffscreenCanvasRenderingContext2D + | null; + if (!maskCtx) return; + + maskCtx.clearRect(0, 0, scaledWidth, scaledHeight); + + let maskResult: CanvasImageSource = maskCanvas; + let path: Path2D | null = null; + + if (feather > 0 && definition.renderer.renderMask) { + // Bypasses JFA — avoids the two-sided distance artifact where strips + // near the canvas edge appear semi-transparent. + definition.renderer.renderMask({ + resolvedParams: mask.params, + ctx: maskCtx, width: Math.round(scaledWidth), height: Math.round(scaledHeight), - passes, + feather, + }); + } else { + path = definition.renderer.buildPath({ + resolvedParams: mask.params, + width: scaledWidth, + height: scaledHeight, }); + maskCtx.fillStyle = "white"; + maskCtx.fill(path); + + if (feather > 0) { + maskResult = applyMaskFeather({ + maskCanvas, + width: Math.round(scaledWidth), + height: Math.round(scaledHeight), + feather, + }); + } } - renderer.context.drawImage( - currentResult, - x, - y, - scaledWidth, - scaledHeight, - ); - renderer.context.restore(); + elementCtx.globalCompositeOperation = inverted + ? "destination-out" + : "destination-in"; + elementCtx.drawImage(maskResult, 0, 0, scaledWidth, scaledHeight); + elementCtx.globalCompositeOperation = "source-over"; + + const strokePath = + definition.renderer.buildStrokePath?.({ + resolvedParams: mask.params, + width: scaledWidth, + height: scaledHeight, + }) ?? path; + + if (mask.params.strokeWidth > 0 && strokePath) { + elementCtx.strokeStyle = mask.params.strokeColor; + elementCtx.lineWidth = mask.params.strokeWidth; + elementCtx.stroke(strokePath); + } } } |