diff options
Diffstat (limited to 'apps/web/src/services/renderer')
18 files changed, 1121 insertions, 521 deletions
diff --git a/apps/web/src/services/renderer/effect-preview.ts b/apps/web/src/services/renderer/effect-preview.ts index 2cebec5d..b2f6f51a 100644 --- a/apps/web/src/services/renderer/effect-preview.ts +++ b/apps/web/src/services/renderer/effect-preview.ts @@ -1,194 +1,191 @@ import { createOffscreenCanvas } from "./canvas-utils"; -import { getEffect } from "@/lib/effects"; -import type { EffectParamValues } from "@/types/effects"; -import { applyMultiPassEffect } from "./webgl-utils"; -import type { EffectPassData } from "./webgl-utils"; +import { effectsRegistry, resolveEffectPasses } from "@/lib/effects"; +import { buildDefaultParamValues } from "@/lib/registry"; +import type { ParamValues } from "@/lib/params"; +import { applyMultiPassEffect } from "./webgl/webgl-utils"; +import type { EffectPassData } from "./webgl/webgl-utils"; const PREVIEW_SIZE = 160; const PREVIEW_IMAGE_PATH = "/effects/preview.jpg"; -let previewGl: WebGLRenderingContext | null = null; -let previewCanvas: OffscreenCanvas | HTMLCanvasElement | null = null; -let testSourceCanvas: OffscreenCanvas | HTMLCanvasElement | null = null; -let previewImageElement: HTMLImageElement | null = null; -const programCache = new Map<string, WebGLProgram>(); -const onReadyCallbacks = new Set<() => void>(); +class EffectPreviewService { + private previewGl: WebGLRenderingContext | null = null; + private previewCanvas: OffscreenCanvas | HTMLCanvasElement | null = null; + private testSourceCanvas: OffscreenCanvas | HTMLCanvasElement | null = null; + private previewImageElement: HTMLImageElement | null = null; + private programCache = new Map<string, WebGLProgram>(); + private onReadyCallbacks = new Set<() => void>(); -export function onPreviewImageReady({ - callback, -}: { - callback: () => void; -}): () => void { - onReadyCallbacks.add(callback); - return () => onReadyCallbacks.delete(callback); -} - -function loadPreviewImage(): void { - if (typeof window === "undefined") return; - const image = new Image(); - image.onload = () => { - testSourceCanvas = null; - for (const callback of onReadyCallbacks) { - callback(); - } - }; - image.src = PREVIEW_IMAGE_PATH; - previewImageElement = image; -} + readonly PREVIEW_SIZE = PREVIEW_SIZE; -loadPreviewImage(); - -function buildDefaultParams({ - effectType, -}: { - effectType: string; -}): EffectParamValues { - const definition = getEffect({ effectType }); - const params: EffectParamValues = {}; - for (const paramDef of definition.params) { - params[paramDef.key] = paramDef.default; + constructor() { + this.loadPreviewImage(); } - return params; -} -function createTestSource({ - width, - height, -}: { - width: number; - height: number; -}): OffscreenCanvas | HTMLCanvasElement | null { - const isImageReady = - previewImageElement?.complete && - (previewImageElement.naturalWidth ?? 0) > 0; - if (!isImageReady || !previewImageElement) { - return null; + onPreviewImageReady({ + callback, + }: { + callback: () => void; + }): () => void { + this.onReadyCallbacks.add(callback); + return () => this.onReadyCallbacks.delete(callback); } - const canvas = createOffscreenCanvas({ width, height }); - const ctx = canvas.getContext("2d") as - | CanvasRenderingContext2D - | OffscreenCanvasRenderingContext2D - | null; - if (!ctx) { - throw new Error("failed to get 2d context for test source"); - } - ctx.drawImage(previewImageElement, 0, 0, width, height); - return canvas; -} + renderPreview({ + effectType, + params, + targetCanvas, + uniformDimensions, + }: { + effectType: string; + params: ParamValues; + targetCanvas: HTMLCanvasElement; + uniformDimensions?: { width: number; height: number }; + }): void { + const size = PREVIEW_SIZE; + const source = this.getTestSource({ width: size, height: size }); + if (!source) return; -function getOrCreatePreviewContext({ - width, - height, -}: { - width: number; - height: number; -}): { canvas: OffscreenCanvas | HTMLCanvasElement; gl: WebGLRenderingContext } { - if (!previewCanvas || !previewGl) { - previewCanvas = createOffscreenCanvas({ width, height }); - previewGl = previewCanvas.getContext("webgl", { - premultipliedAlpha: false, - }) as WebGLRenderingContext | null; - if (!previewGl) { - throw new Error("WebGL not supported"); + const definition = effectsRegistry.get(effectType); + const resolvedParams = + Object.keys(params).length > 0 + ? params + : buildDefaultParamValues(definition.params); + + const passes = resolveEffectPasses({ + definition, + effectParams: resolvedParams, + width: uniformDimensions?.width ?? size, + height: uniformDimensions?.height ?? size, + }); + const result = this.applyWebGlEffect({ + source, + width: size, + height: size, + passes, + }); + + const targetCtx = targetCanvas.getContext( + "2d", + ) as CanvasRenderingContext2D | null; + if (targetCtx) { + targetCanvas.width = size; + targetCanvas.height = size; + targetCtx.drawImage(result, 0, 0, size, size); } } - if (previewCanvas.width !== width || previewCanvas.height !== height) { - previewCanvas.width = width; - previewCanvas.height = height; - } - return { canvas: previewCanvas, gl: previewGl }; -} -function getTestSource({ - width, - height, -}: { - width: number; - height: number; -}): CanvasImageSource | null { - if ( - !testSourceCanvas || - testSourceCanvas.width !== width || - testSourceCanvas.height !== height - ) { - testSourceCanvas = createTestSource({ width, height }); + private loadPreviewImage(): void { + if (typeof window === "undefined") return; + const image = new Image(); + image.onload = () => { + this.testSourceCanvas = null; + for (const callback of this.onReadyCallbacks) { + callback(); + } + }; + image.src = PREVIEW_IMAGE_PATH; + this.previewImageElement = image; } - return testSourceCanvas; -} - -function applyWebGlEffect({ - source, - width, - height, - passes, -}: { - source: CanvasImageSource; - width: number; - height: number; - passes: EffectPassData[]; -}): OffscreenCanvas | HTMLCanvasElement { - const { canvas: glCanvas, gl } = getOrCreatePreviewContext({ width, height }); - applyMultiPassEffect({ context: gl, source, width, height, passes, programCache }); + private createTestSource({ + width, + height, + }: { + width: number; + height: number; + }): OffscreenCanvas | HTMLCanvasElement | null { + const isImageReady = + this.previewImageElement?.complete && + (this.previewImageElement.naturalWidth ?? 0) > 0; + if (!isImageReady || !this.previewImageElement) { + return null; + } - const outputCanvas = createOffscreenCanvas({ width, height }); - const outputCtx = outputCanvas.getContext("2d") as - | CanvasRenderingContext2D - | OffscreenCanvasRenderingContext2D - | null; - if (outputCtx) { - outputCtx.drawImage(glCanvas, 0, 0, width, height); + const canvas = createOffscreenCanvas({ width, height }); + const ctx = canvas.getContext("2d") as + | CanvasRenderingContext2D + | OffscreenCanvasRenderingContext2D + | null; + if (!ctx) { + throw new Error("failed to get 2d context for test source"); + } + ctx.drawImage(this.previewImageElement, 0, 0, width, height); + return canvas; } - return outputCanvas; -} -export function renderPreview({ - effectType, - params, - targetCanvas, -}: { - effectType: string; - params: EffectParamValues; - targetCanvas: HTMLCanvasElement; -}): void { - const size = PREVIEW_SIZE; - const source = getTestSource({ width: size, height: size }); - if (!source) return; + private getOrCreatePreviewContext({ + width, + height, + }: { + width: number; + height: number; + }): { canvas: OffscreenCanvas | HTMLCanvasElement; gl: WebGLRenderingContext } { + if (!this.previewCanvas || !this.previewGl) { + this.previewCanvas = createOffscreenCanvas({ width, height }); + this.previewGl = this.previewCanvas.getContext("webgl", { + premultipliedAlpha: false, + }) as WebGLRenderingContext | null; + if (!this.previewGl) { + throw new Error("WebGL not supported"); + } + } + if (this.previewCanvas.width !== width || this.previewCanvas.height !== height) { + this.previewCanvas.width = width; + this.previewCanvas.height = height; + } + return { canvas: this.previewCanvas, gl: this.previewGl }; + } - const definition = getEffect({ effectType }); - const resolvedParams = - Object.keys(params).length > 0 - ? params - : buildDefaultParams({ effectType }); + private getTestSource({ + width, + height, + }: { + width: number; + height: number; + }): CanvasImageSource | null { + if ( + !this.testSourceCanvas || + this.testSourceCanvas.width !== width || + this.testSourceCanvas.height !== height + ) { + this.testSourceCanvas = this.createTestSource({ width, height }); + } + return this.testSourceCanvas; + } - const passes = definition.renderer.passes.map((pass) => ({ - fragmentShader: pass.fragmentShader, - uniforms: pass.uniforms({ - effectParams: resolvedParams, - width: size, - height: size, - }), - })); - const result = applyWebGlEffect({ + private applyWebGlEffect({ source, - width: size, - height: size, + width, + height, passes, - }); + }: { + source: CanvasImageSource; + width: number; + height: number; + passes: EffectPassData[]; + }): OffscreenCanvas | HTMLCanvasElement { + const { canvas: glCanvas, gl } = this.getOrCreatePreviewContext({ width, height }); + + applyMultiPassEffect({ + context: gl, + source, + width, + height, + passes, + programCache: this.programCache, + }); - const targetCtx = targetCanvas.getContext( - "2d", - ) as CanvasRenderingContext2D | null; - if (targetCtx) { - targetCanvas.width = size; - targetCanvas.height = size; - targetCtx.drawImage(result, 0, 0, size, size); + const outputCanvas = createOffscreenCanvas({ width, height }); + const outputCtx = outputCanvas.getContext("2d") as + | CanvasRenderingContext2D + | OffscreenCanvasRenderingContext2D + | null; + if (outputCtx) { + outputCtx.drawImage(glCanvas, 0, 0, width, height); + } + return outputCanvas; } } -export const effectPreviewService = { - renderPreview, - onPreviewImageReady, - PREVIEW_SIZE, -}; +export const effectPreviewService = new EffectPreviewService(); diff --git a/apps/web/src/services/renderer/mask-feather.ts b/apps/web/src/services/renderer/mask-feather.ts new file mode 100644 index 00000000..39ad80a8 --- /dev/null +++ b/apps/web/src/services/renderer/mask-feather.ts @@ -0,0 +1,54 @@ +import jfaDistanceShader from "@/lib/masks/shaders/jfa-distance.frag.glsl"; +import { getWebGLContext, readResult } from "./webgl/webgl-context"; +import { computeSignedDistanceField, runPass } from "./webgl/jfa"; +import { compileProgram, createTexture } from "./webgl/webgl-utils"; + +export function applyMaskFeather({ + maskCanvas, + width, + height, + feather, +}: { + maskCanvas: CanvasImageSource; + width: number; + height: number; + feather: number; +}): OffscreenCanvas | HTMLCanvasElement { + const { context, programCache } = getWebGLContext({ width, height }); + const sourceTexture = createTexture({ context, source: maskCanvas }); + + const sdf = computeSignedDistanceField({ + context, + programCache, + sourceTexture, + width, + height, + }); + + const distanceProgram = compileProgram({ + context, + fragmentShaderSource: jfaDistanceShader, + programCache, + }); + + runPass({ + context, + program: distanceProgram, + inputTexture: sdf.insideTexture, + target: null, + width, + height, + uniforms: { u_feather_half: feather / 2.0 }, + extraBindings: [ + { unit: 1, texture: sdf.outsideTexture, name: "u_jfa_outside" }, + ], + }); + + context.deleteTexture(sourceTexture); + sdf.cleanup(); + + context.bindTexture(context.TEXTURE_2D, null); + context.bindFramebuffer(context.FRAMEBUFFER, null); + + return readResult({ width, height }); +} 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); + } } } diff --git a/apps/web/src/services/renderer/scene-builder.ts b/apps/web/src/services/renderer/scene-builder.ts index 695e077f..7d5f9fe9 100644 --- a/apps/web/src/services/renderer/scene-builder.ts +++ b/apps/web/src/services/renderer/scene-builder.ts @@ -1,26 +1,22 @@ -import type { TimelineTrack } from "@/types/timeline"; -import type { MediaAsset } from "@/types/assets"; +import type { TimelineTrack } from "@/lib/timeline"; +import type { MediaAsset } from "@/lib/media/types"; import { RootNode } from "./nodes/root-node"; import { VideoNode } from "./nodes/video-node"; import { ImageNode } from "./nodes/image-node"; import { TextNode } from "./nodes/text-node"; import { StickerNode } from "./nodes/sticker-node"; +import { GraphicNode } from "./nodes/graphic-node"; import { ColorNode } from "./nodes/color-node"; -import { CompositeEffectNode } from "./nodes/composite-effect-node"; +import { BlurBackgroundNode } from "./nodes/blur-background-node"; import { EffectLayerNode } from "./nodes/effect-layer-node"; import type { BaseNode } from "./nodes/base-node"; -import type { TBackground, TCanvasSize } from "@/types/project"; +import type { TBackground, TCanvasSize } from "@/lib/project/types"; import { DEFAULT_BLUR_INTENSITY } from "@/constants/project-constants"; import { isMainTrack } from "@/lib/timeline"; const PREVIEW_MAX_IMAGE_SIZE = 2048; -const BLUR_BACKGROUND_ZOOM_SCALE = 1.4; -function getVisibleSortedElements({ - track, -}: { - track: TimelineTrack; -}) { +function getVisibleSortedElements({ track }: { track: TimelineTrack }) { return track.elements .filter((element) => !("hidden" in element && element.hidden)) .slice() @@ -65,7 +61,7 @@ function buildTrackNodes({ continue; } - if (mediaAsset.type === "video") { + if (element.type === "video" && mediaAsset.type === "video") { nodes.push( new VideoNode({ mediaId: mediaAsset.id, @@ -75,15 +71,17 @@ function buildTrackNodes({ timeOffset: element.startTime, trimStart: element.trimStart, trimEnd: element.trimEnd, + retime: element.retime, transform: element.transform, animations: element.animations, opacity: element.opacity, blendMode: element.blendMode, effects: element.effects, + masks: element.masks, }), ); } - if (mediaAsset.type === "image") { + if (element.type === "image" && mediaAsset.type === "image") { nodes.push( new ImageNode({ url: mediaAsset.url, @@ -96,6 +94,7 @@ function buildTrackNodes({ opacity: element.opacity, blendMode: element.blendMode, effects: element.effects, + masks: element.masks, ...(isPreview && { maxSourceSize: PREVIEW_MAX_IMAGE_SIZE, }), @@ -120,6 +119,8 @@ function buildTrackNodes({ nodes.push( new StickerNode({ stickerId: element.stickerId, + intrinsicWidth: element.intrinsicWidth, + intrinsicHeight: element.intrinsicHeight, duration: element.duration, timeOffset: element.startTime, trimStart: element.trimStart, @@ -132,12 +133,80 @@ function buildTrackNodes({ }), ); } + + if (element.type === "graphic") { + nodes.push( + new GraphicNode({ + definitionId: element.definitionId, + params: element.params, + duration: element.duration, + timeOffset: element.startTime, + trimStart: element.trimStart, + trimEnd: element.trimEnd, + transform: element.transform, + animations: element.animations, + opacity: element.opacity, + blendMode: element.blendMode, + effects: element.effects, + masks: element.masks, + }), + ); + } } } return nodes; } +function buildBlurBackgroundNodes({ + track, + mediaMap, + blurIntensity, +}: { + track: TimelineTrack | undefined; + mediaMap: Map<string, MediaAsset>; + blurIntensity: number; +}): BaseNode[] { + if (!track) { + return []; + } + + const nodes: BaseNode[] = []; + const elements = getVisibleSortedElements({ track }); + + for (const element of elements) { + if (element.type !== "video" && element.type !== "image") { + continue; + } + + const mediaAsset = mediaMap.get(element.mediaId); + if ( + !mediaAsset?.file || + !mediaAsset?.url || + (mediaAsset.type !== "video" && mediaAsset.type !== "image") + ) { + continue; + } + + nodes.push( + new BlurBackgroundNode({ + mediaId: mediaAsset.id, + url: mediaAsset.url, + file: mediaAsset.file, + mediaType: mediaAsset.type, + duration: element.duration, + timeOffset: element.startTime, + trimStart: element.trimStart, + trimEnd: element.trimEnd, + retime: element.type === "video" ? element.retime : undefined, + blurIntensity, + }), + ); + } + + return nodes; +} + export type BuildSceneParams = { canvasSize: TCanvasSize; tracks: TimelineTrack[]; @@ -168,6 +237,9 @@ export function buildScene({ ]; const orderedTracksBottomToTop = orderedTracksTopToBottom.slice().reverse(); + const mainTrack = orderedTracksBottomToTop.find((track) => + isMainTrack(track), + ); const allNodes = buildTrackNodes({ tracks: orderedTracksBottomToTop, @@ -177,20 +249,18 @@ export function buildScene({ }); if (background.type === "blur") { - rootNode.add( - new CompositeEffectNode({ - contentNodes: allNodes.filter( - (node) => !(node instanceof EffectLayerNode), - ), - effectType: "blur", - effectParams: { - intensity: - background.blurIntensity ?? DEFAULT_BLUR_INTENSITY, - }, - scale: BLUR_BACKGROUND_ZOOM_SCALE, - }), - ); - } else if (background.type === "color" && background.color !== "transparent") { + const blurNodes = buildBlurBackgroundNodes({ + track: mainTrack, + mediaMap, + blurIntensity: background.blurIntensity ?? DEFAULT_BLUR_INTENSITY, + }); + for (const node of blurNodes) { + rootNode.add(node); + } + } else if ( + background.type === "color" && + background.color !== "transparent" + ) { rootNode.add(new ColorNode({ color: background.color })); } diff --git a/apps/web/src/services/renderer/scene-exporter.ts b/apps/web/src/services/renderer/scene-exporter.ts index c5bad94f..6ab8c6f3 100644 --- a/apps/web/src/services/renderer/scene-exporter.ts +++ b/apps/web/src/services/renderer/scene-exporter.ts @@ -13,7 +13,7 @@ import { QUALITY_VERY_HIGH, } from "mediabunny"; import type { RootNode } from "./nodes/root-node"; -import type { ExportFormat, ExportQuality } from "@/types/export"; +import type { ExportFormat, ExportQuality } from "@/lib/export"; import { CanvasRenderer } from "./canvas-renderer"; type ExportParams = { diff --git a/apps/web/src/services/renderer/webgl-effect-renderer.ts b/apps/web/src/services/renderer/webgl-effect-renderer.ts deleted file mode 100644 index ad5cd40e..00000000 --- a/apps/web/src/services/renderer/webgl-effect-renderer.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { createOffscreenCanvas } from "./canvas-utils"; -import { applyMultiPassEffect } from "./webgl-utils"; -import type { EffectPassData } from "./webgl-utils"; - -export interface ApplyEffectParams { - source: CanvasImageSource; - width: number; - height: number; - passes: EffectPassData[]; -} - -let gl: WebGLRenderingContext | null = null; -let canvas: OffscreenCanvas | HTMLCanvasElement | null = null; -const programCache = new Map<string, WebGLProgram>(); - -function getOrCreateCanvas({ - width, - height, -}: { - width: number; - height: number; -}): OffscreenCanvas | HTMLCanvasElement { - if (!canvas) { - canvas = createOffscreenCanvas({ width, height }); - gl = canvas.getContext("webgl", { - premultipliedAlpha: false, - }) as WebGLRenderingContext | null; - if (!gl) { - throw new Error("WebGL not supported"); - } - } - if (canvas.width !== width || canvas.height !== height) { - canvas.width = width; - canvas.height = height; - } - return canvas; -} - -function applyEffect({ - source, - width, - height, - passes, -}: ApplyEffectParams): OffscreenCanvas | HTMLCanvasElement { - const targetCanvas = getOrCreateCanvas({ width, height }); - const context = gl; - if (!context) { - throw new Error("WebGL context not initialized"); - } - - applyMultiPassEffect({ - context, - source, - width, - height, - passes, - programCache, - }); - - const outputCanvas = createOffscreenCanvas({ width, height }); - const outputCtx = outputCanvas.getContext("2d") as - | CanvasRenderingContext2D - | OffscreenCanvasRenderingContext2D - | null; - if (outputCtx) { - outputCtx.drawImage(targetCanvas, 0, 0, width, height); - } - return outputCanvas; -} - -export const webglEffectRenderer = { - applyEffect, -}; diff --git a/apps/web/src/services/renderer/webgl/jfa.ts b/apps/web/src/services/renderer/webgl/jfa.ts new file mode 100644 index 00000000..b69a9d06 --- /dev/null +++ b/apps/web/src/services/renderer/webgl/jfa.ts @@ -0,0 +1,194 @@ +import jfaInitShader from "@/lib/shaders/jfa-init.frag.glsl"; +import jfaStepShader from "@/lib/shaders/jfa-step.frag.glsl"; +import { + compileProgram, + createFramebufferTexture, + setUniforms, + drawFullscreenQuad, +} from "./webgl-utils"; + +interface FBPair { + texture: WebGLTexture; + framebuffer: WebGLFramebuffer; +} + +function runPass({ + context, + program, + inputTexture, + target, + width, + height, + uniforms, + extraBindings, +}: { + context: WebGLRenderingContext; + program: WebGLProgram; + inputTexture: WebGLTexture; + target: WebGLFramebuffer | null; + width: number; + height: number; + uniforms: Record<string, number | number[]>; + extraBindings?: Array<{ unit: number; texture: WebGLTexture; name: string }>; +}): void { + context.bindFramebuffer(context.FRAMEBUFFER, target); + // biome-ignore lint/correctness/useHookAtTopLevel: WebGL API method, not a React hook + context.useProgram(program); + + context.activeTexture(context.TEXTURE0); + context.bindTexture(context.TEXTURE_2D, inputTexture); + const uTexLoc = context.getUniformLocation(program, "u_texture"); + if (uTexLoc) context.uniform1i(uTexLoc, 0); + + if (extraBindings) { + for (const binding of extraBindings) { + context.activeTexture(context.TEXTURE0 + binding.unit); + context.bindTexture(context.TEXTURE_2D, binding.texture); + const loc = context.getUniformLocation(program, binding.name); + if (loc) context.uniform1i(loc, binding.unit); + } + } + + setUniforms({ + context, + program, + uniforms: { ...uniforms, u_resolution: [width, height] }, + }); + drawFullscreenQuad({ context, program, width, height }); +} + +function runJFA({ + context, + programCache, + sourceTexture, + width, + height, + isInverted, +}: { + context: WebGLRenderingContext; + programCache: Map<string, WebGLProgram>; + sourceTexture: WebGLTexture; + width: number; + height: number; + isInverted: boolean; +}): { + resultTexture: WebGLTexture; + resultFB: WebGLFramebuffer; + tempFBs: FBPair[]; +} { + const numSteps = Math.ceil(Math.log2(Math.max(width, height))); + + const fbA = createFramebufferTexture({ context, width, height }); + const fbB = createFramebufferTexture({ context, width, height }); + + const initProgram = compileProgram({ + context, + fragmentShaderSource: jfaInitShader, + programCache, + }); + runPass({ + context, + program: initProgram, + inputTexture: sourceTexture, + target: fbA.framebuffer, + width, + height, + uniforms: { u_invert: isInverted ? 1.0 : 0.0 }, + }); + + const stepProgram = compileProgram({ + context, + fragmentShaderSource: jfaStepShader, + programCache, + }); + + let readFB = fbA; + let writeFB = fbB; + + for (let i = numSteps - 1; i >= 0; i--) { + const stepSize = 2 ** i; + runPass({ + context, + program: stepProgram, + inputTexture: readFB.texture, + target: writeFB.framebuffer, + width, + height, + uniforms: { u_step_size: stepSize }, + }); + const tmp = readFB; + readFB = writeFB; + writeFB = tmp; + } + + return { + resultTexture: readFB.texture, + resultFB: readFB.framebuffer, + tempFBs: [writeFB], + }; +} + +function cleanupJFAResult({ + context, + result, +}: { + context: WebGLRenderingContext; + result: { + resultTexture: WebGLTexture; + resultFB: WebGLFramebuffer; + tempFBs: FBPair[]; + }; +}): void { + context.deleteTexture(result.resultTexture); + context.deleteFramebuffer(result.resultFB); + for (const fb of result.tempFBs) { + context.deleteTexture(fb.texture); + context.deleteFramebuffer(fb.framebuffer); + } +} + +export { runPass }; + +export function computeSignedDistanceField({ + context, + programCache, + sourceTexture, + width, + height, +}: { + context: WebGLRenderingContext; + programCache: Map<string, WebGLProgram>; + sourceTexture: WebGLTexture; + width: number; + height: number; +}): { + insideTexture: WebGLTexture; + outsideTexture: WebGLTexture; + cleanup: () => void; +} { + const inside = runJFA({ + context, + programCache, + sourceTexture, + width, + height, + isInverted: false, + }); + const outside = runJFA({ + context, + programCache, + sourceTexture, + width, + height, + isInverted: true, + }); + + return { + insideTexture: inside.resultTexture, + outsideTexture: outside.resultTexture, + cleanup: () => { + cleanupJFAResult({ context, result: inside }); + cleanupJFAResult({ context, result: outside }); + }, + }; +} diff --git a/apps/web/src/services/renderer/webgl/webgl-context.ts b/apps/web/src/services/renderer/webgl/webgl-context.ts new file mode 100644 index 00000000..aeefc503 --- /dev/null +++ b/apps/web/src/services/renderer/webgl/webgl-context.ts @@ -0,0 +1,49 @@ +import { createOffscreenCanvas } from "../canvas-utils"; + +let gl: WebGLRenderingContext | null = null; +let webglCanvas: OffscreenCanvas | HTMLCanvasElement | null = null; +const programCache = new Map<string, WebGLProgram>(); + +export function getWebGLContext({ + width, + height, +}: { + width: number; + height: number; +}): { + context: WebGLRenderingContext; + programCache: Map<string, WebGLProgram>; +} { + if (!webglCanvas) { + webglCanvas = createOffscreenCanvas({ width, height }); + gl = webglCanvas.getContext("webgl", { + premultipliedAlpha: false, + }) as WebGLRenderingContext | null; + if (!gl) throw new Error("WebGL not supported"); + } + if (webglCanvas.width !== width || webglCanvas.height !== height) { + webglCanvas.width = width; + webglCanvas.height = height; + } + if (!gl) throw new Error("WebGL context lost"); + return { context: gl, programCache }; +} + +export function readResult({ + width, + height, +}: { + width: number; + height: number; +}): OffscreenCanvas | HTMLCanvasElement { + if (!webglCanvas) throw new Error("WebGL canvas not initialized"); + const outputCanvas = createOffscreenCanvas({ width, height }); + const outputCtx = outputCanvas.getContext("2d") as + | CanvasRenderingContext2D + | OffscreenCanvasRenderingContext2D + | null; + if (outputCtx) { + outputCtx.drawImage(webglCanvas, 0, 0, width, height); + } + return outputCanvas; +} diff --git a/apps/web/src/services/renderer/webgl/webgl-effect-renderer.ts b/apps/web/src/services/renderer/webgl/webgl-effect-renderer.ts new file mode 100644 index 00000000..89dcb2ae --- /dev/null +++ b/apps/web/src/services/renderer/webgl/webgl-effect-renderer.ts @@ -0,0 +1,35 @@ +import { getWebGLContext, readResult } from "./webgl-context"; +import { applyMultiPassEffect } from "./webgl-utils"; +import type { EffectPassData } from "./webgl-utils"; + +export interface ApplyEffectParams { + source: CanvasImageSource; + width: number; + height: number; + passes: EffectPassData[]; +} + +function applyEffect({ + source, + width, + height, + passes, +}: ApplyEffectParams): CanvasImageSource { + if (passes.length === 0) { + return source; + } + const { context, programCache } = getWebGLContext({ width, height }); + applyMultiPassEffect({ + context, + source, + width, + height, + passes, + programCache, + }); + return readResult({ width, height }); +} + +export const webglEffectRenderer = { + applyEffect, +}; diff --git a/apps/web/src/services/renderer/webgl-utils.ts b/apps/web/src/services/renderer/webgl/webgl-utils.ts index 834c652e..834c652e 100644 --- a/apps/web/src/services/renderer/webgl-utils.ts +++ b/apps/web/src/services/renderer/webgl/webgl-utils.ts |