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.2k
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
DevOps in Production
olmdrd
PRO
0
27
DevOps for Movie and Cartoon Production
olmdrd
PRO
0
26
OLM R&D祭2022 10/20 アニメのためのAEプラグイン
olmdrd
PRO
0
1.6k
OLM R&D祭2022 10/20 アニメのためのシェーダー
olmdrd
PRO
0
1.1k
OLM R&D祭2022 10/20 脱Xgen:Maya上で髪の毛と羽のプロシージャ化
olmdrd
PRO
0
730
OLM R&D祭2022 10/21 Arnold Denoising(ノイズ除去)パイプライン
olmdrd
PRO
0
1k
OLM R&D祭2022 10/21 "MANIAC" CODE:ソースコードからツール化まで
olmdrd
PRO
0
410
OLM R&D祭2022 10/21 R&Dインターン受け入れマニュアル
olmdrd
PRO
0
460
OLM R&D祭2022 10/21 クロージング・アフタートーク
olmdrd
PRO
0
230
Other Decks in Technology
See All in Technology
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
0
100
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Writing Fast Ruby
sferik
628
61k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building Adaptive Systems
keathley
40
2.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Git: the NoSQL Database
bkeepers
PRO
427
64k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Docker and Python
trallard
44
3.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Automating Front-end Workflow
addyosmani
1367
200k
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