OLM R&D祭 2020 11/25 撮影効率化のためのAFTER EFFECTS プラグイン / matsuri2020-AfterEffects

撮影の効率化のために、様々なAfter Effectsプラグインを開発しています。開発に至った経緯や、技術的な内容、実際のプロダクションで使用された事例をいくつか紹介いたします。(甘口)

Transcript

1. 撮影効率化のための After Effectsプラグイン R&D ソフトウェアエンジニア 園部華子 © OLM Digital, Inc. 1
2. 概要：After Effects Plugin • 撮影で使用される • 新しい表現 – 機能・パラメータの追加 • 効率化 – 複数のエフェクトを1つに – パラメータを簡単・直感的に制御 – 時間のかかる作業を自動化・簡略化 – 複数のソフトウェアの処理をAEで完結 • 現場で使われているAfter Effects Pluginの一部を紹介 – OLM Open Toolsとして一部公開(olm.co.jp/rd/technology/tools/) © OLM Digital, Inc. 2
3. 概要：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
4. OLM Tunnel : 概要 • 背景・目的 – 撮影段階でTunnelを作成したい – 標準のCC Cylinderに無い機能も欲しい • 内容 – AE上で3Dトンネルを生成・レンダリング • 回転、移動、3Dカメラ対応 – CC Cylinderに + α機能 • 地面の追加 • 外側と内側で別テクスチャーをマップ • 直進部分と曲がっている部分の組み合わせ © OLM Digital, Inc. 4 ©ＴＯＭＹ／アースグランナー・テレビ大阪 著作権の関係により 画像を掲載しておりません
5. 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
6. 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
7. OLM Tunnel : 使用例 © OLM Digital, Inc. 7 ©ＴＯＭＹ／アースグランナー・テレビ大阪 著作権の関係により 画像を掲載しておりません
8. 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 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
9. 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のカーネル 通常のフィルタ
10. OLM Blur : 使用例 • キャラクターの境界をぼかす © OLM Digital, Inc. 10 © Warner Music Japan Inc 著作権の関係により 画像を掲載しておりません
11. 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
12. 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 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
13. 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
14. OLM Weight Blur : 使用例 © OLM Digital, Inc. 14 適用前 適用後 Radius Map ©ＴＯＭＹ／アースグランナー・テレビ大阪 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
15. OLM Particles : 概要 • 背景・目的 – カスタマイズできるパーティクル – 外注スタッフとのコラボレーションのため自社開発 • 内容 – パーティクル生成 – パーティクルの種類 – スプライトアニメーション – 障害物 © OLM Digital, Inc. 15 ©LEVEL-5／映画「妖怪ウォッチ」プロジェクト2017 著作権の関係により 画像を掲載しておりません
16. OLM Particles : 概要 © OLM Digital, Inc. 16
17. OLM Particles : 方法 • パラメータ情報からパーティクルを生成 • 独自のUIを実装 – Size Over Life – Color Over Life © OLM Digital, Inc. 17 time time size(time) Life : パーティクルの寿命 Time : 0~Life Particle = max ∗ () = ()
18. OLM Particles : 使用例 © OLM Digital, Inc. 18 ©LEVEL-5／映画「妖怪ウォッチ」プロジェクト2017 著作権の関係により 画像を掲載しておりません
19. OLM Toon Dilate : 概要 • 背景・目的 – 輪郭をメイン領域に近い色にしたい →メイン領域を拡張(輝度を変え境界に) • 内容 – 近いピクセルの色で透明な領域を拡張 © OLM Digital, Inc. 19 Radius: 0 Radius: 3 Radius: 5 Radius: 10 © Warner Music Japan Inc 著作権の関係により 画像を掲載しておりません
20. 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 左上から 右下から
21. OLM Toon Dilate : 方法 © OLM Digital, Inc. 21 元画像 合成 輪郭抽出 輪郭消去 領域拡張 輝度・彩度調整 輪郭で拡張領域を 切り抜き • 輪郭を内側の色で塗りつぶす方法
22. OLM Toon Dilate : 使用例 © OLM Digital, Inc. 22 © Warner Music Japan Inc 著作権の関係により 画像を掲載しておりません
23. OLM UV Map : 概要 • 背景・目的 – 同じオブジェクトのテクスチャのみを貼り替えたい – 個別にレンダリングするのではなく、撮影で切り替え • 内容 – UV Map付きの画像に適用する – UV Mapにテクスチャを貼り付けた結果を生成 © OLM Digital, Inc. 23 ©LEVEL-5/妖怪ウォッチプロジェクト・テレビ東京 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
24. 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補間 ・・・
25. OLM UV Map : 使用例 © OLM Digital, Inc. 25 ©LEVEL-5/妖怪ウォッチプロジェクト・テレビ東京 著作権の関係により 画像を掲載しておりません
26. OLM Anti Anti Alias : 概要 • 背景・目的 – アンチエイリアスがあるとマスクや塗りつぶしがうまくいかない • 内容 – Maya や Photoshopで作成したアンチエイリアスのある素材が対象 – アンチエイリアスをなくす © OLM Digital, Inc. 26
27. OLM Anti Anti Alias : 方法 • 色の分離 – 単色の領域の色を取得 • 手動選択 or 自動抽出 • 塗りつぶし – 境界の色を塗りつぶし – 半透明な領域を塗りつぶし • プラグインとして実装 – After Effects + Photoshop © OLM Digital, Inc. 27 計4色が追加される 追加されない 追加される 追加されない 同色 どれかの色に 一致するか その色で塗る どの色の境界の可 能性が高いか 2色の組み合わせの どちらに近いか 周辺の色から候補の色を選択 全組み合わせのノルムを 事前に計算して高速化 その色で塗る … Yes No
28. OLM Anti Anti Alias : 使用例 • 使用例 © OLM Digital, Inc. 28 適用前 適用後 ©BANDAI/TV TOKYO・ここたま製作委員会 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
29. 今後の課題 • OLM Tunnel – 水平方向以外にも曲げられるように • OLM Blur 他 – アニメっぽいブラー(Vector Blur, Motion Blur) • OLM Particles – objなどの3Dデータを使用 • 他のツールの開発 – OLM Smoother ver2 – ToonFX © OLM Digital, Inc. 29
30. ご清聴ありがとうございました © OLM Digital, Inc. 30