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 OLM TOON: アニメのための輪郭線とセルシェーダ...
Search
OLM Digital R&D
PRO
December 15, 2020
Technology
1
1.4k
OLM R&D祭 2020 11/25 OLM TOON: アニメのための輪郭線とセルシェーダー -プロダクション編・技術編- / matsuri2020-Toon
アニメ特有の輪郭線とセルルックをCGで表現するために必須のToonシェーダについて紹介します。プロダクションで使われている機能からその裏側にあるOLM独自の技術まで紹介いたします。(中辛)
OLM Digital R&D
PRO
December 15, 2020
Tweet
Share
More Decks by OLM Digital R&D
See All by OLM Digital R&D
OLM R&D祭2022 10/20 アニメのためのAEプラグイン
olmdrd
PRO
0
1.5k
OLM R&D祭2022 10/20 アニメのためのシェーダー
olmdrd
PRO
0
950
OLM R&D祭2022 10/20 脱Xgen:Maya上で髪の毛と羽のプロシージャ化
olmdrd
PRO
0
600
OLM R&D祭2022 10/21 Arnold Denoising(ノイズ除去)パイプライン
olmdrd
PRO
0
910
OLM R&D祭2022 10/21 "MANIAC" CODE:ソースコードからツール化まで
olmdrd
PRO
0
330
OLM R&D祭2022 10/21 R&Dインターン受け入れマニュアル
olmdrd
PRO
0
390
OLM R&D祭2022 10/21 クロージング・アフタートーク
olmdrd
PRO
0
180
OLM R&D祭2022 10/19 オープニング -祭の見所をご紹介-
olmdrd
PRO
0
460
OLM R&D祭 2022 10/19 社内ITインフラや工夫を紹介2022
olmdrd
PRO
0
1k
Other Decks in Technology
See All in Technology
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.1k
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
130
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
3.9k
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
170
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
180
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
120
ガバメントクラウド先行事業中間報告を読み解く
sugiim
1
1.2k
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
460
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
490
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
How STYLIGHT went responsive
nonsquared
95
5.2k
A designer walks into a library…
pauljervisheath
202
24k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Code Review Best Practice
trishagee
64
17k
GraphQLとの向き合い方2022年版
quramy
43
13k
Code Reviewing Like a Champion
maltzj
519
39k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Making Projects Easy
brettharned
115
5.9k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Transcript
OLM Toon アニメのための輪郭線とセルシェーダー Timothy Kol Marc Salvati 1 © OLM
Digital, Inc.
概要 • プロダクション – 使い方 – 機能 – デザイナーからの要望 •
技術 – 実装について – 計算の速さとメモリについて © OLM Digital, Inc. 2
プロダクション編 © OLM Digital, Inc. 3
3DCGを手描きアニメのように見せる ©TOMY/ZW製作委員会・テレビ東京 4 著作権の関係により 画像を掲載しておりません
なぜ3DCGを使うのか? • 手描きが難しいもの – リアルよりのスタイル – 複雑なディテール – 動きの激しいシーン –
エフェクト – 予算と時間の制約 5 ©TOMY/ZW製作委員会・テレビ東京 著作権の関係により 画像を掲載しておりません
標準のシェーダー • OLM Toon for mental ray – Arnoldが標準レンダラーになったため使えない •
Arnold aiToon – シェーダー + 輪郭線フィルター – 機能不足 – 拡張不可能 – 太い輪郭線の場合は遅い – 他のフィルターと組み合わせることができない – 輪郭線の太さの微調整が難しい • 自社開発必須 © OLM Digital, Inc. 6 © Autodesk / Jaeyeon Nam / Hong SoonSang 著作権の関係により 画像を掲載しておりません
OLM Toon の機能の概要 • MayaとArnoldへの対応 • セルシェーダー – ベース、シャドー、ハイライト –
トランジション • ハード • ソフト • 輪郭線 – オブジェクトの間 – 法線・デプスなどの差 © OLM Digital, Inc. 7
OLM ToonのArnold版 • 輪郭線とセルシェーダー • GPUプレビュー • 機能が多く、要望に応じて追加 – 導入後42回更新
• 詳細なユーザーマニュアルの作成 – 34ページ 8 © OLM Digital, Inc.
プロダクションにおけるOLM Toonの活用 • 様々な作品で利用 • ロボット系 • 動物、人型 https://www.youtube.com/watch?v=SBDJvU5VSIA 9
© OLM Digital, Inc. ©TOMY/ZW製作委員会・テレビ東京 ©2019 映画「二ノ国」製作委員会 ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
セルシェーダー © OLM Digital, Inc. 10
セルシェーダーの基本機能 • 基本は3色 – ノーマル、影色、ハイライト – 輝度を三色にマップ – トランジションの制御が可能 •
ハード • ソフト • 影とハイライトの追加 © OLM Digital, Inc. 11 H1 NM S1
セルシェーダーの基本機能 • ランプ入力 – 輝度またはシェーダー・テクスチャなど • リムライト – ランプのオフセット –
後ろからのライトを疑似的に • カメラの方向と法線の角度で範囲が決まる 12 輝度入力 ノイズ入力 リムなし リムあり リムの 幅大きく リムの アルファ調整 リムのぼけ リムの色 © OLM Digital, Inc.
Maya上でのセルシェーダー • ビューポートでGPUプレビューが可能 • UI – アトリビュートエディターの中 – デザイナーとの密なやり取り ©
OLM Digital, Inc. 13 セルシェーダーのアトリビュートエディター MayaでのGPUプレビュー
オフセット機能 • 輝度値のオフセット – ハイライトと影色の制御 – GPUプレビュー 14 ©TOMY/ZW製作委員会・テレビ東京 ©
OLM Digital, Inc. マイナス値 : 青 プラス値 : 緑 著作権の関係により 画像を掲載しておりません
パターン色 • RGBフラグによるパターン色の可視化 – 赤:入力+オフセット(1)、オフセットだけ(0) – 緑:ハイライト使用(1)、ハイライト不使用(0) – 青:リムライト使用(1)、リムライト不使用(0) 15
©TOMY/ZW製作委員会・テレビ東京 © OLM Digital, Inc. 著作権の関係により 画像を掲載しておりません
法線マップ • 輝度の計算に使われる法線 • 法線のロック – OLM Normalsを使うとSubdivisionにも対応可 16 ©TOMY/ZW製作委員会・テレビ東京
© OLM Digital, Inc. + = ---------> locked normals 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
セルシェーダー 17 ©TOMY/ZW製作委員会・テレビ東京 © OLM Digital, Inc. 法線ロックなし 法線ロックあり 著作権の関係により
画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
AOVsの出力 © OLM Digital, Inc. 18 Beauty rendering Beauty AOV
light 1 Beauty AOV light 2 • 合成用 – フルCG作品からの要望 • リムライト • AOV=ライト毎の要素 – 輝度によるマップがリニアではないため加算だけでは再構築が不可能 – マスク作成など
まとめ • デザイナーとのやりとりを密に • OLMでの利用例 – アニメ • 5色、パターン色、オフセット色 –
フルCG • AOVs • 今後 – 手描きアニメ風の髪の毛のレンダリング © OLM Digital, Inc. 19
輪郭線シェーダー © OLM Digital, Inc. 20
輪郭線の基本機能 • 輪郭線のカスタマイズ – 種類 • オブジェクト、UV、シェーダー、デプス、法線、色 • ソフトしきい値 –
種類ごとに • 色 • 太さ – グループ – 透明度 • カーブとエッジの輪郭線 21 ©TOMY/ZW製作委員会・テレビ東京 © OLM Digital, Inc. セルシェーダー 輪郭線 セルシェーダー + 輪郭線 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
輪郭線の見た目 • 色 – 単色、テクスチャー – オブジェクトの色を使うことも可能 • 太さ –
一定の値、シェーダー事指定も可能 – テクスチャーから指定 • 手書きの表現 • 線の削除にも利用可能 22 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 著作権の関係により 画像を掲載しておりません
輪郭線の種類:オブジェクト同士 23 オブジェクト同士の 交差による輪郭線 © OLM Digital, Inc. 背景との輪郭線 オブジェクトが重なる
輪郭線 背景との輪郭線 オブジェクトが重なる 輪郭線
輪郭線の種類:色、デプス、法線、UVs、Wireframe 24 シェーダー 輪郭線 法線輪郭線 Wireframe輪郭線 デプス輪郭線 © OLM Digital,
Inc.
コントラスト色の輪郭線 • シェーディング色と同じ • 使用法 – シェーディングに含まれていない線 – フェースの色の差が生じるようにUV作成 •
OLM Step Gradation 使用 – ロボット系で頻繁に使われる 25 OLM Step GradationとUV ©TOMY/ZW製作委員会・テレビ東京 © OLM Digital, Inc. 著作権の関係により 画像を掲載しておりません
エッジから輪郭線の作成 • 狙った場所に輪郭線がほしい – コントラスト色のUV作成に手間がかかる • エッジ指定だけで輪郭線作成 – 最近開発した –
プロダクションに導入予定 © OLM Digital, Inc. 26 Mayaでのプリビュー 輪郭線としてレンダリング OLM Step GradationとUV
ソフトしきい値 • 隣り合うサンプルの差がしきい値よりも大きい場合に輪郭線 • 滑らかなフェードイン-アウトの実現 • 2つのしきい値の間で輪郭線の太さを補間 • 補間をランプで制御可能 ©
OLM Digital, Inc. 27 デプスの輪郭線 ソフトしきい値なし デプスの輪郭線 ソフトしきい値あり
輪郭線のグループ • 複数のオブジェクトを一つと考える – グループ化されたオブジェクトの間では輪郭線が生じない – 例:目の虹彩と強膜が別オブジェクトの場合 © OLM Digital,
Inc. 28 三つのグループに 分けた結果
輪郭線の透明度 • 半透明なオブジェクトの向こうに輪郭線を描く • 眼鏡、コックピットなど © OLM Digital, Inc. 29
©L5/YWP·TX 著作権の関係により 画像を掲載しておりません
輪郭線の投影 • シワや眉毛などの線のため – テクスチャー • アニメーションが難しい • 近くなると大きくなる –
専用のポリゴンオブジェクト • 近くなると大きくなる • カーブを投影 – 専用シェーダー – スクリーンスペースでの一定の太さ – リグに組み込んでアニメーション可能 © OLM Digital, Inc. 30 Mayaでのプリビュー 輪郭線としてレンダリング
輪郭線のAOVs • 出力するAOVs – 輪郭線 – ビューティ – 法線、位置、デプス、モーションベクター •
モーションブラーやDOFに使用 • 輪郭線がはみでる問題 – オブジェクトの近接情報を拾う – 輪郭線内のAOVsの一貫性 © OLM Digital, Inc. 31 ビューティ 位置
その他の機能 • Matte opacity • 輪郭線のレイヤー • デプスに応じた太さの変化 • Closure評価
• リム輪郭線 – 法線とカメラ方向の差 • GPUプレビュー • デバッグモード © OLM Digital, Inc. 32 Matte opacity 左から:opacity 1, 0.5, 0, black hole 上から:RGB、アルファ、レンダリング結果
まとめ • 機能が豊富 – プロダクションで多く使われている • 今後の課題 – フルCG用セルシェーダー –
手書きのような輪郭線 – AEで微調整ができるような出力 © OLM Digital, Inc. 33
OLM Toon アニメのための輪郭線とセルシェーダー 技術編 34
概要 • セルシェーダーの特徴 • 輪郭線の計算について – Mentalray/Arnold – aiToon /
OLM Toon • 高速化 • メモリの最適化 • 透明度について © OLM Digital, Inc. 35
セルシェーダーの特徴 • 技術的な問題はあまりない • デザイナーの好み – Rampのオフセットの正負値の対応 – 5色だけ –
二番目の影色とハイライトはramp オフセットでしか使わない – テクスチャーベースハイライト、リムライト • Mayaのviewportプレビュー対応 – GPUの実装 • MayaのQtベースUI © OLM Digital, Inc. 36
輪郭線の計算 • 近傍のサンプルデータを比較 • データの差によって輪郭線の描画 © OLM Digital, Inc. 37
オブジェクトID: sphere オブジェクトID: plane 輪郭線描画 ビューティ オブジェクトID
輪郭線:Mentalray VS Arnold • Mentalray – Contour Store:情報保存 – Contour
Contrast:サンプリング用 – Contour Shader: 色と太さの計算 – Mentalrayは自動的にサンプルを線に – Contour Output: 線の描画 • Arnold – パストレーシング – フィルタリング – 特に輪郭線のためのAPIがあるわけではない – Store/Contrast/ Shaderをレンダリング時、フィルタリングにOutput (aiToon) – Store/Contrast/ Shader/ Outputをレンダリング時(OLM Toon) © OLM Digital, Inc. 38
aiToon • フィルターベース • スレッドに分けるためにバケットでフィルター – 1つのスレッドに1つのバケット – エッジに重なりが必要でオバーヘッドが発生 –
フィルターが大きいほどオバーヘッドが大きい © OLM Digital, Inc. 39 フィルタリング用の バケット (サイズが大きめ) バケットの重なり 著作権の関係により 画像を掲載しておりません
aiToon • 太い輪郭線だと遅くなる – AOVsの読み込みが多い – AOVsの読み込みが遅い • 一般的なフィルター(boxなど)と一緒に使えない •
輪郭線の太さの最大値が全体で1つのみ – 複数の輪郭線シェーダーを組み合わせたときに面倒 • 拡張、カスタマイズが不可能 © OLM Digital, Inc. 40
OLM Toon • レンダリング時に描画すればいいのでは? – フィルターのオバーヘッド無し – 普通のフィルターも使える – 太さの最大値を定義不要
– AOVの読み込みを使わない • 近傍のサンプルが必要 – レイを飛ばして近傍のサンプル計算 © OLM Digital, Inc. 41
輪郭線の描画 • サンプル毎に、近傍のチェック – 範囲が輪郭線の最大の太さ – 太さに合わせて輪郭線の透明度を計算 © OLM Digital,
Inc. 42 緑点のサンプルデータ (色、法線など)と近傍との比較 差が大きい=輪郭線(太赤線) Sample data Drawn contour Anti-aliased drawn contour
輪郭線の描画の高速化 • キャッシュ使用 – サンプルのキャッシュがないときのみレイをとばす – グリッド上でサンプル • 輪郭線のエッジチェックは4近傍のみ ©
OLM Digital, Inc. 4近傍のサンプルとの比較 輪郭線のエッジをサンプルに 保存 輪郭線の描画 -----> -----> Sample data Drawn contour Contour source AA drawn contour
輪郭線の描画の高速化 • スレッドでキャッシュを共有 • バケットの重なりが発生 – 同じデータの書き込みのため同期が不要 – オーバーヘッドが発生 •
異なるスレッド、エッジで同時に同じサンプルを計算 • ランダムバケットで解消 © OLM Digital, Inc. 44 著作権の関係により 画像を掲載しておりません
Arnoldとの比較 • フィルターのオバーヘッド無し • Arnoldのフィルターも使える • 太さの最大値の定義が不要 • AOV読み込みよりもキャッシュが早い •
メモリを使う – フルHD、ピクセルごとに9サンプルだと4GB © OLM Digital, Inc. 45 9サンプルper pixel 輪郭線太さ(px) OLM Toon アニメ aiToon アニメ OLM Toon フルCG aiToon フル CG 1 7s 10s 16m20s 18m01s 2 9s 13s 16m22s 18m56s 4 15s 26s 16m30s 21m13s
メモリの最適化 • サンプル数が多いとメモリ不足になる – リアルなルックで輪郭線、32-64spp, 4K • バケットごとにメモリを確保 • フィルターのオーバーヘッドが発生
– レンダリング時のバケット特定が難しい • Arnold 5以降APIが無くなった • ピクセルの位置から計算,さらにオーバーヘッド © OLM Digital, Inc. 46 9サンプルper pixel 輪郭線太さ(px) スレッド毎 キャッシュ アニメ aiToon アニメ スレッド毎 キャッシュ フル CG aiToon フル CG 1 11s 10s 16m20s 18m01s 2 13s 13s 16m22s 18m56s 4 23s 26s 16m26s 21m13s
透明度 • Arnoldの透明計算が使えない – 二次レイが確率的に評価 – ノイズが発生 • 特別な処理が必要 •
プロダクションに必要 – コックピット – 窓 © OLM Digital, Inc. 47 ©L5/YWP·TX 著作権の関係により 画像を掲載しておりません
透明度 • レイがオブジェクトに当たると – サンプルデータを保存 – レイをそのまま通す – 次のレイヤーの計算 –
透明のレイヤー分メモリが必要 • 透明オブジェクトの重なり – その分レイが多くなる – 透明な面積分サンプルが増える – 遅くなる • 輪郭線の描画 – 後ろから前へブレンド © OLM Digital, Inc. 48
まとめ • (強引に)Arnoldにフィットした輪郭線シェーダー – カスタマイズができるのは大事 • いくつかの技術問題を解いた – レンダリング時の後処理 –
グローバルキャッシュ – バケットごとのキャッシュ • 今後 – アニメレンダラーの自社開発? © OLM Digital, Inc. 49