Remotion promotion

AkarengaLT vol.39 で話したスライドです
Remotion の紹介をしています

Transcript

1. Remotion https://www.npmjs.com/package/remotion 1
2. Remotion is 何 • 昔は 「Write Videos in React」 みたいなコピーだった • Write+Video? • Video+Reactｊｓ? 2 https://remotion.dev
3. Remotion is 何 • Reactjsで動画を作れます 3
4. Remotion is 何 • 普通のReact Component • useCurrentFrame hook • 「今レンダリングしようとしているフレー ムが何フレーム目なのか」がとれるフック • フレーム番号を増やしながらレンダリ ング • ChromeのAPIでスクリーンショット • 連番画像からffmpegでmp4に • これをサポートするAPIがいっぱい (e.g. イージング) 4 https://www.remotion.dev/docs/the-fundamentals から抜粋および編集
5. Remotion pros • Web資産が使い放題 • スクリプト制御が楽 5
6. Remotion cons • デザインが大変 • レンダリングが重い • テキストは本質的に1次元 6
7. Pros: Web資産が使い放題 • css filter • blur、drop-shadowなど • 数式、Syntax Highlighting • react-katex、highlightjs • svgをframeでアニメーション • svg pathの先頭n%のみを取得するAPIがある • .psdを組み替えてpngにするwasmプログラム(Rust製) • 逆に、Web需要が無い機能は無い • 文字の縁取り • トーンカーブ(filterだと線形変換しかできない) • Remotionの処理方法と合わず利用不可の機能(cssアニメーション) 7
8. Pros:スクリプト制御が楽 • y=abs(sin(frame)) ← 自明 • [x,y]=[random(),random()] ← 自明（randomが専用品） • 音声合成ソフトウェアで音声と同時に音素情報を作っておき、 パースして「あ」「い」「う」「え」「お」に対応する画像を出し分ける 8
9. Cons: デザインが大変 • 「マージンを1px単位で調整」みたいなことがWebページより高 頻度で発生 • 編集→Ctrl+S→確認→編集… • visualControl APIでだいぶマシに 9 https://www.remotion.dev/docs/studio/visual-control より抜粋
10. Cons: レンダリングが重い • 1フレームをレンダリングするのに200msぐらいかかってそう • 60fpsだと16.7ms/フレームなので12倍 • 私の使いかたが悪いか？ • 10分ちょっとの動画レンダリングに2時間 • AWS Lambdaで動かす力技(試してない) • https://www.remotion.dev/docs/lambda/api • プレビュー画面も重い(ちゃんとしたソフトならレンダリング結果 のキャッシュとかがあるが…) 10
11. Cons: テキストは本質的に1次元 • 現代の動画編集ソフトのUIはこんな感じ • 横軸が時間、縦軸がオブジェクト同士の重なり • これはClipchamp • (収斂進化とかでもなんでもなく、フィルムを切 り貼りする操作のGUIへの射影から一切進化 してないだけという別の文句) • 字幕1、2、3と画像をタイミングをずらして 表示 11
12. Cons: テキストは本質的に1次元 • fromとdurationInFramesを手計 算するんですか？ 12
13. Cons: テキストは本質的に1次元 • コンポーネントが細切れになってつらい • コンポーネントだからまだマシだが、設定をべ た書きしてたりすると… • 「ゲーム文脈ではあまりアグレッシブな共通化はす るべきではない」みたいな話ありましたよね 13
14. Cons: テキストは本質的に1次元 • タイムラインを縦か横に輪切りにして1次元に直して記述する必要 がある • 実現したい表現によって向き不向きがあるのでうまく選べば多少 マシになる 14
15. まとめ • Remotionというパッケージを紹介 • Reactjsで動画を書ける • Pros: Web資産が使い放題 • Pros: スクリプト制御が楽 • Cons: デザインが大変 • Cons: レンダリングが重い • Cons: テキストは本質的に1次元 • ブラウザ、Reactエコシステムの変な活用方法としておもしろい 15