Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
動画編集ソフトを作るための基礎知識
Search
Hanakla
February 09, 2018
Programming
1
400
動画編集ソフトを作るための基礎知識
です
Hanakla
February 09, 2018
Tweet
Share
More Decks by Hanakla
See All by Hanakla
ピクシブの Contentful 利用事情 (2021)
hanakla
2
400
Reactルーター選定術 2020年のファイナルアンサー
hanakla
2
4.8k
Research and Development of "Delir" at Nov, 2016
hanakla
0
140
Other Decks in Programming
See All in Programming
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
Unity Android XR入門
sakutama_11
0
140
Immutable ActiveRecord
megane42
0
130
テストをしないQAエンジニアは何をしているか?
nealle
0
130
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
170
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Visualization
eitanlees
146
15k
BBQ
matthewcrist
86
9.5k
How GitHub (no longer) Works
holman
313
140k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Building an army of robots
kneath
302
45k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Automating Front-end Workflow
addyosmani
1367
200k
4 Signs Your Business is Dying
shpigford
182
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Transcript
動画編集ソフトを作るための基礎知識
お前誰? ラグ (@_ragg_) ・フロントエンドエンジニア ・ TypeScript / React / Node.js
/ Electron / RoR / PHP ・Delir は趣味プロです ・IQ 3
免責 - 基礎知識って言ってるけど、違う考え方の世界もあります。 - Delir(個人開発中の映像編集ソフト)はこう考えてるよっていう感じです - 殴らないでください、、、
概要 - 基礎的な概念 - レンダリング処理の基礎 - 「動画」をする - キーフレームという概念 -
レンダリングでの処理
基礎的な概念
基礎的な概念 - コンポジション ひとつの動画。「(自身以外の)コンポジション」「レイヤー」 「オブジェクト」を内包できる。 - レイヤー オブジェクトを内包し、オブジェクトの前後関係を表す。 - オブジェクト
出力される・出力に影響を与えるもの(画像・映像・音声・カメラなど) 時間軸上に配置され、オブジェクトによって異なるパラメータを持つ。 (Delirでは”クリップ”と呼んでいる)
基礎的な概念 - レンダラー オブジェクトのパラメータを基に実際の画像データを生成するもの。 例えば図形レンダラは「位置・サイズ・形状」というパラメータを基に 実際に画像を生成する。
これ!オブジェクト! これ!レイヤー! http://livedoor.blogimg.jp/minestar0110/imgs/9/0/904bb052.jpg
オブジェクトとして別のコンポジションがいることもある これ全部で1コンポジション! http://livedoor.blogimg.jp/minestar0110/imgs/9/0/904bb052.jpg
オブジェクトは時間軸に対して配置・伸縮できる レイヤーが上にくるほどカメラの手前にくる http://livedoor.blogimg.jp/minestar0110/imgs/9/0/904bb052.jpg
この4つを組み合わせると 動画ができる。
- 完 -
レンダリング処理の基礎
レンダリング処理の基礎 これらの3つの要素(コンポジション・レイヤー・オブジェクト)はツリー状に展開される。 このツリーを現在の再生時間に合わせて順番にレンダリング・合成することで 1フレームの映像がレンダリングされる。
レンダリング処理の基礎 - コンポジション - レイヤー1 - 0:00〜 オーディオ オブジェクト -
レイヤー2 - 0:00〜0:05 図形 オブジェクト - 0:10〜0:15 コンポジション - レイヤー3 - 0:00〜 画像 オブジェクト 現在の再生時間 0:00 コンポジション→レイヤー→オブジェクトと潜って 現在レンダリングすべきオブジェクトを判定する
レンダリング処理の基礎 - コンポジション - レイヤー1 - 0:00〜 オーディオ オブジェクト -
レイヤー2 - 0:00〜0:05 図形 オブジェクト - 0:10〜0:15 コンポジション - レイヤー3 - 0:00〜 画像 オブジェクト 現在の再生時間 0:00 これらのオブジェクトをレンダラが レンダリングする IQ3
レンダリング処理の基礎 - コンポジション - レイヤー1 - 0:00〜 オーディオ オブジェクト -
レイヤー2 - 0:00〜0:05 図形 オブジェクト - 0:10〜0:15 コンポジション - レイヤー3 - 0:00〜 画像 オブジェクト 現在の再生時間 0:00 下から順に焼き込む IQ3
レンダリング処理の基礎 - コンポジション - レイヤー1 - 0:00〜 オーディオ オブジェクト -
レイヤー2 - 0:00〜0:05 図形 オブジェクト - 0:10〜0:15 コンポジション - レイヤー3 - 0:00〜 画像 オブジェクト これを毎フレーム繰り返す IQ3
こうして動画ができる!
- 完 -
「動画」をする
キーフレームという概念
キーフレームという概念 - キーフレーム オブジェクト・エフェクトの1パラメータの変化点。 (「この時にこの値になる」という設定点。) 点から点の間は何かしらの補間関数によって補間される(三次ベジエとか) これが キーフレーム
キーフレームという概念 この“値”から”次の値”への推移がアニメーションになる。 キーフレームは1プロパティの時間軸上に複数設定される。 たとえばオブジェクト 横位置に以下のようなキーフレームを打つ と、「4秒目まで右に行って、5秒目には左に戻る」という動きをす る。 0 ――――― 0:04
――― 0:05 0 → 5 → 40 → -10
レンダリングでの処理
レンダリングでの処理 キーフレームは基本、離散的に設定されるので キーフレームの間を何かしらの関数で補完する必要がある。 (よく使われるのはリニアとか三次ベジェ) キーフレーム間での現在のフレームの位置を0〜1に正規化し、 補間関数に与えて現在のフレームでどれくらいの変化量を適用す るかを計算する。 1 2
レンダリングでの処理 (経過量計算) f = 現在の絶対フレーム番号 pk = 直前のキーフレームが置かれている絶対フレーム番号 nk =
次のキーフレームが置かれている絶対フレーム番号 progress = (f - pk) / (nk - pk) (f - pk) = 直前のキーフレームからの経過フレーム数 (nk - pk) = 次と直前のキーフレームの間のフレーム数 これでキーフレーム間の経過量を0 〜 1に正規化出来る。 ※ 間違ってたらごめん (nk - pk) f pk nk (f - pk)
レンダリングでの処理 (キーフレーム値計算) pv = 直前のキーフレームの値 nv = 次のキーフレームの値 fn =
`(progress: 0~1) => float` の補間関数 diff = nv - pv (キーフレーム間の変化量) value = pv + ( diff * fn(progress) ) これで現在のフレームでのプロパティの値が求められる。 この計算によって得られたプロパティ値を毎フレームレンダラに渡 すことでアニメーションを行える。 ※ 間違ってたらごめん progress(0~1) pv nv diff value diff * fn(progress) 1 0
これらを毎フレーム繰り返すことで “動画”が私たちの元へ届けられる
これが動画編集ソフトの基礎
・ポストエフェクト ・カメラと音声の先行処理 ・パフォーマンス ・実装(クラス設計とか)
地獄はまだいっぱいあるけど
これで君も動画編集ソフトを作れる
https://github.com/Ragg-/delir やろう!(with TypeScript)
ぽしまい