xfade 트랜지션과 커스텀 셰이더

xfade 기본

xfade는 두 클립이 시간적으로 겹쳐야 동작합니다. 앞 클립의 끝과 뒤 클립의 시작이 일정 구간 겹치면 그 구간이 트랜지션 길이가 됩니다.

1. 두 클립을 같은 트랙에 배치하고, 뒤 클립을 약간 앞쪽으로 드래그해 겹칩니다.
2. 겹친 구간을 클릭하면 트랜지션 메뉴가 뜹니다. 프리셋을 고르거나 채팅에 "fadeblack 1초로" 같이 입력합니다.
3. 재생해 결과를 확인합니다. 길이는 0.1~5초가 일반적입니다.

프리셋 카탈로그

FFmpeg xfade가 지원하는 주요 프리셋입니다. 채팅에 이름을 그대로 적어 적용할 수 있습니다.

• fade · fadeblack · fadewhite — 가장 무난한 디졸브
• wipeleft / wiperight / wipeup / wipedown — 한쪽으로 닦아내기
• slideleft / slideright / slideup / slidedown — 밀어내기
• circleopen / circleclose — 원형 마스크
• pixelize — 픽셀화 후 전환
• radial — 방사형 회전
• hblur / vblur — 흐림 후 전환

커스텀 GLSL 셰이더

프리셋으로 부족하면 src/Bom.Ag/tools/video-editor/xfade-shaders.js 파일에 직접 GLSL을 등록할 수 있습니다.

// xfade-shaders.js
export const myShaders = {
  brightnessFlash: {
    name: "Brightness Flash",
    fragment: `
      uniform float progress;
      uniform sampler2D from;
      uniform sampler2D to;
      varying vec2 vUv;
      void main() {
        vec4 a = texture2D(from, vUv);
        vec4 b = texture2D(to, vUv);
        float flash = smoothstep(0.4, 0.6, progress);
        gl_FragColor = mix(a, b, progress) + vec4(flash);
      }`
  }
};

• progress — 0.0(앞 클립) → 1.0(뒤 클립)으로 변하는 시간 변수
• from / to — 두 클립의 텍스처 샘플러
• vUv — 정규화된 화면 좌표 (0~1)
• ratio — 가로/세로 비율 (선택)

내보내기 시 처리

프리셋은 FFmpeg xfade 필터로 그대로 변환됩니다. 커스텀 셰이더는 오프스크린 렌더링으로 PNG 시퀀스를 만든 뒤 FFmpeg에 입력 영상으로 합성합니다.