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

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