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 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.5k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
150
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
710
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Raft: Consensus for Rubyists
vanstee
140
7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
A better future with KSS
kneath
238
17k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Gamification - CAS2011
davidbonilla
81
5.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
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)
ぽしまい