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
OLM R&D祭 2020 11/25 撮影効率化のためのAFTER EFFECTS プラグイ...
Search
OLM Digital R&D
PRO
December 10, 2020
Technology
0
1.1k
OLM R&D祭 2020 11/25 撮影効率化のためのAFTER EFFECTS プラグイン / matsuri2020-AfterEffects
撮影の効率化のために、様々なAfter Effectsプラグインを開発しています。開発に至った経緯や、技術的な内容、実際のプロダクションで使用された事例をいくつか紹介いたします。(甘口)
OLM Digital R&D
PRO
December 10, 2020
Tweet
Share
More Decks by OLM Digital R&D
See All by OLM Digital R&D
OLM R&D祭2022 10/20 アニメのためのAEプラグイン
olmdrd
PRO
0
1.5k
OLM R&D祭2022 10/20 アニメのためのシェーダー
olmdrd
PRO
0
940
OLM R&D祭2022 10/20 脱Xgen:Maya上で髪の毛と羽のプロシージャ化
olmdrd
PRO
0
590
OLM R&D祭2022 10/21 Arnold Denoising(ノイズ除去)パイプライン
olmdrd
PRO
0
900
OLM R&D祭2022 10/21 "MANIAC" CODE:ソースコードからツール化まで
olmdrd
PRO
0
320
OLM R&D祭2022 10/21 R&Dインターン受け入れマニュアル
olmdrd
PRO
0
390
OLM R&D祭2022 10/21 クロージング・アフタートーク
olmdrd
PRO
0
180
OLM R&D祭2022 10/19 オープニング -祭の見所をご紹介-
olmdrd
PRO
0
450
OLM R&D祭 2022 10/19 社内ITインフラや工夫を紹介2022
olmdrd
PRO
0
1k
Other Decks in Technology
See All in Technology
マルチテナントのサービスインフラに大きなテナントを受け入れるまで
7474
0
720
プログラミング写経のすすめ
natsutan
0
160
VPoE Meetup Vol.1 VPoEとして実践してきたことと反省点
coconala_engineer
2
120
RDS for Db2 データ移行編 - Part2:S3経由のバックアップ・リストアでデータ移行 /20241011-RDSforDb2-dojo
mayumihirano
0
140
パートナー企業のテクニカルサポートエンジニアとして気になる、より良い AWS サポートの利活用について
kazzpapa3
1
220
v-modelの歩みを振り返る
bengo4com
5
1.9k
ReSTIRの数理と実装 (rtcamp10)
yumcyawiz
1
470
MobileActOsaka_241018.pdf
akaitadaaki
0
110
全社を巻き込んだ業務オペレーション改善と、それは事業成長に貢献しているのか?を実感した話
marroooon
0
130
JAWS-UG 事務局 の「これまで」から みんなで「ここから」を考えよう
miu_crescent
2
140
AWS DDKを利用したDataOps事始め
beex
1
170
RSGT Walk Through
kawaguti
PRO
2
380
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Into the Great Unknown - MozCon
thekraken
31
1.4k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
130
Visualization
eitanlees
143
15k
Writing Fast Ruby
sferik
626
60k
Designing the Hi-DPI Web
ddemaree
280
34k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
We Have a Design System, Now What?
morganepeng
50
7.2k
Transcript
撮影効率化のための After Effectsプラグイン R&D ソフトウェアエンジニア 園部華子 © OLM Digital, Inc.
1
概要:After Effects Plugin • 撮影で使用される • 新しい表現 – 機能・パラメータの追加 •
効率化 – 複数のエフェクトを1つに – パラメータを簡単・直感的に制御 – 時間のかかる作業を自動化・簡略化 – 複数のソフトウェアの処理をAEで完結 • 現場で使われているAfter Effects Pluginの一部を紹介 – OLM Open Toolsとして一部公開(olm.co.jp/rd/technology/tools/) © OLM Digital, Inc. 2
概要:After Effects Plugin • アニメ制作で使用 • 今回紹介するツール – OLM Tunnel
– OLM Blur 他 ※Open Toolsとして一部公開 – OLM Particles – OLM Toon Dilate – OLM UV Map – OLM Anti Anti Alias © OLM Digital, Inc. 3
OLM Tunnel : 概要 • 背景・目的 – 撮影段階でTunnelを作成したい – 標準のCC
Cylinderに無い機能も欲しい • 内容 – AE上で3Dトンネルを生成・レンダリング • 回転、移動、3Dカメラ対応 – CC Cylinderに + α機能 • 地面の追加 • 外側と内側で別テクスチャーをマップ • 直進部分と曲がっている部分の組み合わせ © OLM Digital, Inc. 4 ©TOMY/アースグランナー・テレビ大阪 著作権の関係により 画像を掲載しておりません
OLM Tunnel : 方法 • レンダリング – カメラ座標設定 – Cylinder、Torus、Groundを合体
– Inside, Outside, Groundそれぞれレンダリング • テクスチャマッピング – Camera Rayとの交差によってテクスチャを変更 – Inside, Outside, Ground © OLM Digital, Inc. 5 Bend Length Bend Angle Straight Length Cylinder Torus
OLM Tunnel : 方法 • 例) CylinderとRayの交差 © OLM Digital,
Inc. 6 Ray: o + Cylinder: 2 + 2 − 2 = 0 2 + + = 0 の解 0 , 1 から交点を求める ∙ の正負でinside, outsideを判定 r o d ( o + )2+(o + )2= 2 ( 2 + 2 ) 2 + 2 o + o + o 2 + o 2 − 2 = 0
OLM Tunnel : 使用例 © OLM Digital, Inc. 7 ©TOMY/アースグランナー・テレビ大阪
著作権の関係により 画像を掲載しておりません
OLM Blur 他 : 概要 • 背景・目的 – アニメーション向けにブラーをカスタマイズ •
Detailを保つ • 方向ブラー 回転ブラー • 内容 – AE標準の合成ブラーのカスタム版 • OLM Blur • OLM Directional Blur • OLM Radial Blur • OLM Weight Blur – SIGGRAPH Asia 2018 にてポスター発表 © OLM Digital, Inc. 8 ©LEVEL-5/FCイナズマイレブンGO・テレビ東京 ©Hiro Morita, BBBProject, TV TOKYO 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
OLM Blur : 内容・方法 • 内容 – 輪郭が残る – 他の領域の色を含まない
• 方法 – 透明なピクセルより外側をカーネルに含まない © OLM Digital, Inc. 9 適用前 AEのブラー OLM Blur 例) BOXブラー 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 × 1 25 5×5のカーネル 通常のフィルタ
OLM Blur : 使用例 • キャラクターの境界をぼかす © OLM Digital, Inc.
10 © Warner Music Japan Inc 著作権の関係により 画像を掲載しておりません
OLM Directional Blur, OLM Radial Blur : 内容・方法 © OLM
Digital, Inc. 11 適用前 OLM Directional Blur OLM Radial Blur (Zoom) OLM Radial Blur (Rotation) • OLM Directional Blur – 特定の方向のみブラー – ColorとOpacityそれぞれのカーネルを合成 – 色が薄くならない • OLM Radial Blur – 回転・ズームのブラー – 楕円座標/極座標に変換してDirectional Blur
OLM Directional Blur, OLM Radial Blur : 使用例 © OLM
Digital, Inc. 12 OLM Directional Blur OLM Radial Blur ©LEVEL-5/FCイナズマイレブンGO・テレビ東京 ©Hiro Morita, BBBProject, TV TOKYO 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
OLM Weight Blur : 内容・方法 • 内容 – ぼかしの強度を変える •
方法 – カーネルサイズをRadius Mapで指定 • Blur Radius: デフォルトのブラー半径 • Radius(x, y): Blur Radius * Radius Map(x, y) – 重みをWeight Mapで指定可能 • ガウシアンフィルタ • ボックスフィルタ • Weight Mapによるフィルタ © OLM Digital, Inc. 13 入力 Radius Map 出力 Radius Map Radius: 3(default) Radius: 1 Radius: 0
OLM Weight Blur : 使用例 © OLM Digital, Inc. 14
適用前 適用後 Radius Map ©TOMY/アースグランナー・テレビ大阪 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
OLM Particles : 概要 • 背景・目的 – カスタマイズできるパーティクル – 外注スタッフとのコラボレーションのため自社開発
• 内容 – パーティクル生成 – パーティクルの種類 – スプライトアニメーション – 障害物 © OLM Digital, Inc. 15 ©LEVEL-5/映画「妖怪ウォッチ」プロジェクト2017 著作権の関係により 画像を掲載しておりません
OLM Particles : 概要 © OLM Digital, Inc. 16
OLM Particles : 方法 • パラメータ情報からパーティクルを生成 • 独自のUIを実装 – Size
Over Life – Color Over Life © OLM Digital, Inc. 17 time time size(time) Life : パーティクルの寿命 Time : 0~Life Particle = max ∗ () = ()
OLM Particles : 使用例 © OLM Digital, Inc. 18 ©LEVEL-5/映画「妖怪ウォッチ」プロジェクト2017
著作権の関係により 画像を掲載しておりません
OLM Toon Dilate : 概要 • 背景・目的 – 輪郭をメイン領域に近い色にしたい →メイン領域を拡張(輝度を変え境界に)
• 内容 – 近いピクセルの色で透明な領域を拡張 © OLM Digital, Inc. 19 Radius: 0 Radius: 3 Radius: 5 Radius: 10 © Warner Music Japan Inc 著作権の関係により 画像を掲載しておりません
OLM Toon Dilate : 方法 • 近傍領域の色を取得 – DistanceMap =
不透明領域からの距離 – (半)透明領域を塗りつぶす • DistanceMapを更新しながら • DistanceMap < radiusなら塗りつぶし © OLM Digital, Inc. 20 ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ と 隣接pixel比較 −1 + 1 −1 −1 + 1 −1 + 1 −1 +1 + 1 と 隣接pixel比較 +1 + 1 +1 +1 + 1 +1 + 1 +1 −1 + 1 入力 出力 DistanceMap 左上から 右下から
OLM Toon Dilate : 方法 © OLM Digital, Inc. 21
元画像 合成 輪郭抽出 輪郭消去 領域拡張 輝度・彩度調整 輪郭で拡張領域を 切り抜き • 輪郭を内側の色で塗りつぶす方法
OLM Toon Dilate : 使用例 © OLM Digital, Inc. 22
© Warner Music Japan Inc 著作権の関係により 画像を掲載しておりません
OLM UV Map : 概要 • 背景・目的 – 同じオブジェクトのテクスチャのみを貼り替えたい –
個別にレンダリングするのではなく、撮影で切り替え • 内容 – UV Map付きの画像に適用する – UV Mapにテクスチャを貼り付けた結果を生成 © OLM Digital, Inc. 23 ©LEVEL-5/妖怪ウォッチプロジェクト・テレビ東京 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
OLM UV Map : 方法 • テクスチャマッピング – red, green→UVに変換してマッピング
• 補間 – Nearest (最近傍) – Bilinear (バイリニア) – Trilinear (トリリニア) Mipmapサンプリング+バイリニア © OLM Digital, Inc. 24 R G (R,G,B) = (175,36,0) U V (U,V) = (0.68…,0.14…) UVに変換 = 2 = 1 1 − 1 − + 2 1 − + 3 1 − + 4 Nearest Bilinear Trilinear 1 2 ′ 1 − 1 2 3 4 ′ = 1 1 − + 2 MipmapをBilinear補間 ・・・
OLM UV Map : 使用例 © OLM Digital, Inc. 25
©LEVEL-5/妖怪ウォッチプロジェクト・テレビ東京 著作権の関係により 画像を掲載しておりません
OLM Anti Anti Alias : 概要 • 背景・目的 – アンチエイリアスがあるとマスクや塗りつぶしがうまくいかない
• 内容 – Maya や Photoshopで作成したアンチエイリアスのある素材が対象 – アンチエイリアスをなくす © OLM Digital, Inc. 26
OLM Anti Anti Alias : 方法 • 色の分離 – 単色の領域の色を取得
• 手動選択 or 自動抽出 • 塗りつぶし – 境界の色を塗りつぶし – 半透明な領域を塗りつぶし • プラグインとして実装 – After Effects + Photoshop © OLM Digital, Inc. 27 計4色が追加される 追加されない 追加される 追加されない 同色 どれかの色に 一致するか その色で塗る どの色の境界の可 能性が高いか 2色の組み合わせの どちらに近いか 周辺の色から候補の色を選択 全組み合わせのノルムを 事前に計算して高速化 その色で塗る … Yes No
OLM Anti Anti Alias : 使用例 • 使用例 © OLM
Digital, Inc. 28 適用前 適用後 ©BANDAI/TV TOKYO・ここたま製作委員会 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
今後の課題 • OLM Tunnel – 水平方向以外にも曲げられるように • OLM Blur 他
– アニメっぽいブラー(Vector Blur, Motion Blur) • OLM Particles – objなどの3Dデータを使用 • 他のツールの開発 – OLM Smoother ver2 – ToonFX © OLM Digital, Inc. 29
ご清聴ありがとうございました © OLM Digital, Inc. 30