OLM R&D祭 2020 11/25 OLM TOON: アニメのための輪郭線とセルシェーダー -プロダクション編・技術編- / matsuri2020-Toon

アニメ特有の輪郭線とセルルックをCGで表現するために必須のToonシェーダについて紹介します。プロダクションで使われている機能からその裏側にあるOLM独自の技術まで紹介いたします。（中辛）

Transcript

1. OLM Toon アニメのための輪郭線とセルシェーダー Timothy Kol Marc Salvati 1 © OLM Digital, Inc.
2. 概要 • プロダクション – 使い方 – 機能 – デザイナーからの要望 • 技術 – 実装について – 計算の速さとメモリについて © OLM Digital, Inc. 2
3. プロダクション編 © OLM Digital, Inc. 3
4. 3DCGを手描きアニメのように見せる ©TOMY／ZW製作委員会・テレビ東京 4 著作権の関係により 画像を掲載しておりません
5. なぜ3DCGを使うのか？ • 手描きが難しいもの – リアルよりのスタイル – 複雑なディテール – 動きの激しいシーン – エフェクト – 予算と時間の制約 5 ©TOMY／ZW製作委員会・テレビ東京 著作権の関係により 画像を掲載しておりません
6. 標準のシェーダー • OLM Toon for mental ray – Arnoldが標準レンダラーになったため使えない • Arnold aiToon – シェーダー ＋ 輪郭線フィルター – 機能不足 – 拡張不可能 – 太い輪郭線の場合は遅い – 他のフィルターと組み合わせることができない – 輪郭線の太さの微調整が難しい • 自社開発必須 © OLM Digital, Inc. 6 © Autodesk / Jaeyeon Nam / Hong SoonSang 著作権の関係により 画像を掲載しておりません
7. OLM Toon の機能の概要 • MayaとArnoldへの対応 • セルシェーダー – ベース、シャドー、ハイライト – トランジション • ハード • ソフト • 輪郭線 – オブジェクトの間 – 法線・デプスなどの差 © OLM Digital, Inc. 7
8. OLM ToonのArnold版 • 輪郭線とセルシェーダー • GPUプレビュー • 機能が多く、要望に応じて追加 – 導入後42回更新 • 詳細なユーザーマニュアルの作成 – 34ページ 8 © OLM Digital, Inc.
9. プロダクションにおける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 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
10. セルシェーダー © OLM Digital, Inc. 10
11. セルシェーダーの基本機能 • 基本は３色 – ノーマル、影色、ハイライト – 輝度を三色にマップ – トランジションの制御が可能 • ハード • ソフト • 影とハイライトの追加 © OLM Digital, Inc. 11 H1 NM S1
12. セルシェーダーの基本機能 • ランプ入力 – 輝度またはシェーダー・テクスチャなど • リムライト – ランプのオフセット – 後ろからのライトを疑似的に • カメラの方向と法線の角度で範囲が決まる 12 輝度入力 ノイズ入力 リムなし リムあり リムの 幅大きく リムの アルファ調整 リムのぼけ リムの色 © OLM Digital, Inc.
13. Maya上でのセルシェーダー • ビューポートでGPUプレビューが可能 • UI – アトリビュートエディターの中 – デザイナーとの密なやり取り © OLM Digital, Inc. 13 セルシェーダーのアトリビュートエディター MayaでのGPUプレビュー
14. オフセット機能 • 輝度値のオフセット – ハイライトと影色の制御 – GPUプレビュー 14 ©TOMY／ZW製作委員会・テレビ東京 © OLM Digital, Inc. マイナス値 : 青 プラス値 : 緑 著作権の関係により 画像を掲載しておりません
15. パターン色 • RGBフラグによるパターン色の可視化 – 赤：入力+オフセット（1）、オフセットだけ（0） – 緑：ハイライト使用（1）、ハイライト不使用（0） – 青：リムライト使用（1）、リムライト不使用（0） 15 ©TOMY／ZW製作委員会・テレビ東京 © OLM Digital, Inc. 著作権の関係により 画像を掲載しておりません
16. 法線マップ • 輝度の計算に使われる法線 • 法線のロック – OLM Normalsを使うとSubdivisionにも対応可 16 ©TOMY／ZW製作委員会・テレビ東京 © OLM Digital, Inc. + = ---------> locked normals 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
17. セルシェーダー 17 ©TOMY／ZW製作委員会・テレビ東京 © OLM Digital, Inc. 法線ロックなし 法線ロックあり 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
18. AOVsの出力 © OLM Digital, Inc. 18 Beauty rendering Beauty AOV light 1 Beauty AOV light 2 • 合成用 – フルCG作品からの要望 • リムライト • AOV＝ライト毎の要素 – 輝度によるマップがリニアではないため加算だけでは再構築が不可能 – マスク作成など
19. まとめ • デザイナーとのやりとりを密に • OLMでの利用例 – アニメ • 5色、パターン色、オフセット色 – フルCG • AOVs • 今後 – 手描きアニメ風の髪の毛のレンダリング © OLM Digital, Inc. 19
20. 輪郭線シェーダー © OLM Digital, Inc. 20
21. 輪郭線の基本機能 • 輪郭線のカスタマイズ – 種類 • オブジェクト、UV、シェーダー、デプス、法線、色 • ソフトしきい値 – 種類ごとに • 色 • 太さ – グループ – 透明度 • カーブとエッジの輪郭線 21 ©TOMY／ZW製作委員会・テレビ東京 © OLM Digital, Inc. セルシェーダー 輪郭線 セルシェーダー ＋ 輪郭線 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
22. 輪郭線の見た目 • 色 – 単色、テクスチャー – オブジェクトの色を使うことも可能 • 太さ – 一定の値、シェーダー事指定も可能 – テクスチャーから指定 • 手書きの表現 • 線の削除にも利用可能 22 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 著作権の関係により 画像を掲載しておりません
23. 輪郭線の種類：オブジェクト同士 23 オブジェクト同士の 交差による輪郭線 © OLM Digital, Inc. 背景との輪郭線 オブジェクトが重なる 輪郭線 背景との輪郭線 オブジェクトが重なる 輪郭線
24. 輪郭線の種類：色、デプス、法線、UVs、Wireframe 24 シェーダー 輪郭線 法線輪郭線 Wireframe輪郭線 デプス輪郭線 © OLM Digital, Inc.
25. コントラスト色の輪郭線 • シェーディング色と同じ • 使用法 – シェーディングに含まれていない線 – フェースの色の差が生じるようにUV作成 • OLM Step Gradation 使用 – ロボット系で頻繁に使われる 25 OLM Step GradationとUV ©TOMY／ZW製作委員会・テレビ東京 © OLM Digital, Inc. 著作権の関係により 画像を掲載しておりません
26. エッジから輪郭線の作成 • 狙った場所に輪郭線がほしい – コントラスト色のUV作成に手間がかかる • エッジ指定だけで輪郭線作成 – 最近開発した – プロダクションに導入予定 © OLM Digital, Inc. 26 Mayaでのプリビュー 輪郭線としてレンダリング OLM Step GradationとUV
27. ソフトしきい値 • 隣り合うサンプルの差がしきい値よりも大きい場合に輪郭線 • 滑らかなフェードイン-アウトの実現 • 2つのしきい値の間で輪郭線の太さを補間 • 補間をランプで制御可能 © OLM Digital, Inc. 27 デプスの輪郭線 ソフトしきい値なし デプスの輪郭線 ソフトしきい値あり
28. 輪郭線のグループ • 複数のオブジェクトを一つと考える – グループ化されたオブジェクトの間では輪郭線が生じない – 例：目の虹彩と強膜が別オブジェクトの場合 © OLM Digital, Inc. 28 三つのグループに 分けた結果
29. 輪郭線の透明度 • 半透明なオブジェクトの向こうに輪郭線を描く • 眼鏡、コックピットなど © OLM Digital, Inc. 29 ©L5/YWP·TX 著作権の関係により 画像を掲載しておりません
30. 輪郭線の投影 • シワや眉毛などの線のため – テクスチャー • アニメーションが難しい • 近くなると大きくなる – 専用のポリゴンオブジェクト • 近くなると大きくなる • カーブを投影 – 専用シェーダー – スクリーンスペースでの一定の太さ – リグに組み込んでアニメーション可能 © OLM Digital, Inc. 30 Mayaでのプリビュー 輪郭線としてレンダリング
31. 輪郭線のAOVs • 出力するAOVs – 輪郭線 – ビューティ – 法線、位置、デプス、モーションベクター • モーションブラーやDOFに使用 • 輪郭線がはみでる問題 – オブジェクトの近接情報を拾う – 輪郭線内のAOVsの一貫性 © OLM Digital, Inc. 31 ビューティ 位置
32. その他の機能 • Matte opacity • 輪郭線のレイヤー • デプスに応じた太さの変化 • Closure評価 • リム輪郭線 – 法線とカメラ方向の差 • GPUプレビュー • デバッグモード © OLM Digital, Inc. 32 Matte opacity 左から：opacity 1, 0.5, 0, black hole 上から：RGB、アルファ、レンダリング結果
33. まとめ • 機能が豊富 – プロダクションで多く使われている • 今後の課題 – フルCG用セルシェーダー – 手書きのような輪郭線 – AEで微調整ができるような出力 © OLM Digital, Inc. 33
34. OLM Toon アニメのための輪郭線とセルシェーダー 技術編 34
35. 概要 • セルシェーダーの特徴 • 輪郭線の計算について – Mentalray/Arnold – aiToon / OLM Toon • 高速化 • メモリの最適化 • 透明度について © OLM Digital, Inc. 35
36. セルシェーダーの特徴 • 技術的な問題はあまりない • デザイナーの好み – Rampのオフセットの正負値の対応 – 5色だけ – 二番目の影色とハイライトはramp オフセットでしか使わない – テクスチャーベースハイライト、リムライト • Mayaのviewportプレビュー対応 – GPUの実装 • MayaのQtベースUI © OLM Digital, Inc. 36
37. 輪郭線の計算 • 近傍のサンプルデータを比較 • データの差によって輪郭線の描画 © OLM Digital, Inc. 37 オブジェクトID: sphere オブジェクトID: plane 輪郭線描画 ビューティ オブジェクトID
38. 輪郭線：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
39. aiToon • フィルターベース • スレッドに分けるためにバケットでフィルター – 1つのスレッドに1つのバケット – エッジに重なりが必要でオバーヘッドが発生 – フィルターが大きいほどオバーヘッドが大きい © OLM Digital, Inc. 39 フィルタリング用の バケット （サイズが大きめ） バケットの重なり 著作権の関係により 画像を掲載しておりません
40. aiToon • 太い輪郭線だと遅くなる – AOVsの読み込みが多い – AOVsの読み込みが遅い • 一般的なフィルター（boxなど）と一緒に使えない • 輪郭線の太さの最大値が全体で１つのみ – 複数の輪郭線シェーダーを組み合わせたときに面倒 • 拡張、カスタマイズが不可能 © OLM Digital, Inc. 40
41. OLM Toon • レンダリング時に描画すればいいのでは？ – フィルターのオバーヘッド無し – 普通のフィルターも使える – 太さの最大値を定義不要 – AOVの読み込みを使わない • 近傍のサンプルが必要 – レイを飛ばして近傍のサンプル計算 © OLM Digital, Inc. 41
42. 輪郭線の描画 • サンプル毎に、近傍のチェック – 範囲が輪郭線の最大の太さ – 太さに合わせて輪郭線の透明度を計算 © OLM Digital, Inc. 42 緑点のサンプルデータ （色、法線など）と近傍との比較 差が大きい＝輪郭線（太赤線） Sample data Drawn contour Anti-aliased drawn contour
43. 輪郭線の描画の高速化 • キャッシュ使用 – サンプルのキャッシュがないときのみレイをとばす – グリッド上でサンプル • 輪郭線のエッジチェックは4近傍のみ © OLM Digital, Inc. 4近傍のサンプルとの比較 輪郭線のエッジをサンプルに 保存 輪郭線の描画 -----> -----> Sample data Drawn contour Contour source AA drawn contour
44. 輪郭線の描画の高速化 • スレッドでキャッシュを共有 • バケットの重なりが発生 – 同じデータの書き込みのため同期が不要 – オーバーヘッドが発生 • 異なるスレッド、エッジで同時に同じサンプルを計算 • ランダムバケットで解消 © OLM Digital, Inc. 44 著作権の関係により 画像を掲載しておりません
45. 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
46. メモリの最適化 • サンプル数が多いとメモリ不足になる – リアルなルックで輪郭線、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
47. 透明度 • Arnoldの透明計算が使えない – 二次レイが確率的に評価 – ノイズが発生 • 特別な処理が必要 • プロダクションに必要 – コックピット – 窓 © OLM Digital, Inc. 47 ©L5/YWP·TX 著作権の関係により 画像を掲載しておりません
48. 透明度 • レイがオブジェクトに当たると – サンプルデータを保存 – レイをそのまま通す – 次のレイヤーの計算 – 透明のレイヤー分メモリが必要 • 透明オブジェクトの重なり – その分レイが多くなる – 透明な面積分サンプルが増える – 遅くなる • 輪郭線の描画 – 後ろから前へブレンド © OLM Digital, Inc. 48
49. まとめ • （強引に）Arnoldにフィットした輪郭線シェーダー – カスタマイズができるのは大事 • いくつかの技術問題を解いた – レンダリング時の後処理 – グローバルキャッシュ – バケットごとのキャッシュ • 今後 – アニメレンダラーの自社開発？ © OLM Digital, Inc. 49