Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
OLM R&D祭 2020 11/25 撮影効率化のためのAFTER EFFECTS プラグイン / matsuri2020-AfterEffects
OLM Digital R&D
PRO
December 10, 2020
Technology
0
670
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
CGの基礎理論を学べる!「テクニカルアーティストスタートキット」本を詳しく紹介 / CGWCC2021-TA2021
olmdrd
PRO
0
520
OLM R&D祭 2020 11/26 ショット制作を高速化する3Dアニメーションツール / matsuri2020-Animation
olmdrd
PRO
0
240
OLM R&D祭 2020 11/26 プロダクションのための流体シミュレーション / matsuri2020-Fluid
olmdrd
PRO
0
190
OLM R&D祭 2020 11/26 シェーダー最先端研究からプロダクションへ / matsuri2020-BrushTile
olmdrd
PRO
0
230
OLM R&D祭 2020 11/26 最新の研究活動 / matsuri2020-Research
olmdrd
PRO
0
260
OLM R&D祭 2020 11/25 OLMシェーダーできるかぎり紹介します / matsuri2020-Shaders
olmdrd
PRO
0
260
OLM R&D祭 2020 11/25 OLM TOON: アニメのための輪郭線とセルシェーダー -プロダクション編・技術編- / matsuri2020-Toon
olmdrd
PRO
0
680
OLM R&D祭 2020 11/27 OLM RIG: 拡張可能なモジュール型のリグシステムによる社内リグ統合 / matsuri2020-Rig
olmdrd
PRO
0
290
OLM R&D祭 2020 11/26 OLM HAIR: XGENの使い勝手を改善したFURツール / matsuri2020-Hair
olmdrd
PRO
0
250
Other Decks in Technology
See All in Technology
暗号資産ウォレット入門(MetaMaskの入門~NFTの購入~詐欺の注意事項など)
kayato
2
200
Whats new in Android Media?
myolwin00
2
110
ZOZOTOWNのProduction Readiness Checklistと信頼性向上の取り組み / Improvement the reliability of ZOZOTOWN with Production Readiness Checklist
akitok_
5
1.7k
CADDi HCMC Technology Center
caddi_eng
0
250
Stripe Search APIを利用した、LINEとStripeの顧客情報連携/line-dc-202205
stripehideokamoto
0
130
街じゅうを"駅前化"する電動マイクロモビリティのシェアサービス「LUUP」のIoTとSRE
0gm
1
770
Learning from AWS Customer Security Incidents [2022]
ramimac
0
1.1k
New Features in C# 10/11
chack411
0
960
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
flatt_security
3
3.8k
LIFF Deep Dive 2022
line_developers
PRO
1
260
インフラエンジニアBooks 30分でわかる「Dockerコンテナ開発・環境構築の基本」
cyberblack28
11
7k
AWS ChatbotでEC2インスタンスを 起動できるようにした
iwamot
0
160
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Mobile First: as difficult as doing things right
swwweet
212
7.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
103
16k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
Visualization
eitanlees
124
11k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
Robots, Beer and Maslow
schacon
152
7.1k
Side Projects
sachag
449
37k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
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