撮影の効率化のために、様々なAfter Effectsプラグインを開発しています。開発に至った経緯や、技術的な内容、実際のプロダクションで使用された事例をいくつか紹介いたします。(甘口)
撮影効率化のためのAfter EffectsプラグインR&D ソフトウェアエンジニア園部華子© OLM Digital, Inc. 1
View Slide
概要：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©ＴＯＭＹ／アースグランナー・テレビ大阪著作権の関係により画像を掲載しておりません
OLM Tunnel : 方法• レンダリング– カメラ座標設定– Cylinder、Torus、Groundを合体– Inside, Outside, Groundそれぞれレンダリング• テクスチャマッピング– Camera Rayとの交差によってテクスチャを変更– Inside, Outside, Ground© OLM Digital, Inc. 5BendLengthBendAngleStraightLengthCylinderTorus
OLM Tunnel : 方法• 例) CylinderとRayの交差© OLM Digital, Inc. 6Ray: o + Cylinder: 2 + 2 − 2 = 0 2 + + = 0 の解 0, 1から交点を求める ∙ の正負でinside, outsideを判定ro d( o+ )2+(o+ )2= 2( 2 + 2 ) 2 + 2 o+ o + o2 + o2 − 2 = 0
OLM Tunnel : 使用例© OLM Digital, Inc. 7©ＴＯＭＹ／アースグランナー・テレビ大阪著作権の関係により画像を掲載しておりません
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 11 1 1 1 11 1 1 1 11 1 1 1 11 1 1 1 1×1255×5のカーネル通常のフィルタ
OLM Blur : 使用例• キャラクターの境界をぼかす© OLM Digital, Inc. 10© Warner Music Japan Inc著作権の関係により画像を掲載しておりません
OLM Directional Blur, OLM Radial Blur : 内容・方法© OLM Digital, Inc. 11適用前 OLM Directional BlurOLM 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. 12OLM 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 MapRadius: 3(default)Radius: 1Radius: 0
OLM Weight Blur : 使用例© OLM Digital, Inc. 14適用前 適用後 Radius Map©ＴＯＭＹ／アースグランナー・テレビ大阪著作権の関係により画像を掲載しておりません著作権の関係により画像を掲載しておりません
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. 17timetimesize(time)Life : パーティクルの寿命Time : 0~LifeParticle = max ∗ () = ()
OLM Particles : 使用例© OLM Digital, Inc. 18©LEVEL-5／映画「妖怪ウォッチ」プロジェクト2017著作権の関係により画像を掲載しておりません
OLM Toon Dilate : 概要• 背景・目的– 輪郭をメイン領域に近い色にしたい→メイン領域を拡張(輝度を変え境界に)• 内容– 近いピクセルの色で透明な領域を拡張© OLM Digital, Inc. 19Radius: 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. 24RG(R,G,B) = (175,36,0)UV(U,V) = (0.68…,0.14…)UVに変換 = 2 = 11 − 1 − + 21 − + 31 − + 4Nearest BilinearTrilinear12′ 1 − 1234′ = 11 − + 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色の組み合わせのどちらに近いか周辺の色から候補の色を選択全組み合わせのノルムを事前に計算して高速化その色で塗る…YesNo
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
olmdrd
yayoi_dd
oracle4engineer
____rina____
uzulla
hirokiotsuka
megabitsenmzq
gen519
shimashima35
bitkey
iotengineer22
yusukeshimizu
jacopen
maggiecrowley
philnash
frogandcode
chriscoyier
eileencodes
bkeepers
carmenintech
danielanewman
thekraken
malarkey
caitiem20
vanstee