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
410
動画編集ソフトを作るための基礎知識
です
Hanakla
February 09, 2018
Tweet
Share
More Decks by Hanakla
See All by Hanakla
ピクシブの Contentful 利用事情 (2021)
hanakla
2
420
Reactルーター選定術 2020年のファイナルアンサー
hanakla
2
4.9k
Research and Development of "Delir" at Nov, 2016
hanakla
0
150
Other Decks in Programming
See All in Programming
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
10
4.3k
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
250
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
210
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Navigating Team Friction
lara
187
15k
A better future with KSS
kneath
238
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing Experiences People Love
moore
142
24k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Statistics for Hackers
jakevdp
799
220k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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)
ぽしまい