OLM R&D祭2022 10/20 アニメのためのシェーダー

3DCGでも日本のアニメスタイルを活かせるようにR&Dではインハウスシェーダーを作っています。輪郭線、アニメ風の目の表現・質感のために開発した最新技術を発表します。

Transcript

1. アニメのためのシェーダー - Lit Sphere, Smooth Voronoi, Eye, Toon - 市川 翔大 Alexandre Derouet-Jourdan Marc Salvati 1
2. 目次 © OLM Digital, Inc. 2 OLM Toon OLM Eye OLM Lit Sphere Smooth Voronoi ©TOMY／ZW製作委員会・テレビ東京 ©Nintendo·Creatures·GAME FREAK·TV Tokyo·Shoro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
3. OLM Lit Sphere © OLM Digital, Inc. 3
4. OLM Lit Sphere © OLM Digital, Inc. 4 Always Look At Camera パラメータ OFF / ON 車体 金属 ガラス ウィンカー タイヤ シート 内装 • 追加パラメーター – Always Look At Camera: カメラのパースを無視 U V N N
5. OLM Lit Sphere - Always Look At Camera - © OLM Digital, Inc. 5 メッシュ カメラ Z NV 通常のLitSphere: Lit Sphere は通常、カメラの位置ではなく行列 (方向)を使用 カメラスペースでのシェーディングポイント の法線により、テクスチャ のUVが決まる Z: カメラのZ軸 NV: カメラスペースの シェーディングポイントの法線 : シェーディングポイント Z NV カメラ メッシュ テクスチャの 評価点 メッシュ カメラ CM NV* Always Look At Camera: Always Look At Camera がONの場合、カメラ位置 と オブジェクト (Bounding Box) の中心 との方向を使用 シェーディングポイント のカメラスペースの法線が、カメラの位置によりシ フトする NV* = NV + CM * (-(NV • CM)) CM カメラ メッシュ テクスチャの 評価点 NV* CM: カメラからメッシュへの方向 NV*: シフトされた「カメラスペースの シェーディングポイントの法線」 : シェーディングポイント
6. OLM Lights Lit Sphere • OLM Lights Lit Sphere: カメラだけでなくライト情報も使用 – 移動/スケール/回転 によるシェーディングの制御 – メッシュ上で一貫性のあるレンダリング – 効果: リム、ストローク、など © OLM Digital, Inc. 6 Lights Lit Sphere の様々な例 (リム、ハッチング) Hideki Todo, Ken Anjyo, Shun'ichi Yokoyama. Lit-Sphere extension for artistic rendering. The Visual Computer, Volume 29, Issue 6, pp. 473-480 (2013)
7. • Lights Lit Sphere: メッシュの法線を使い、各ライトからテクスチャを投影 • DiffuseとSpecularライティングをサポート OLM Lights Lit Sphere - 技術 - © OLM Digital, Inc. 7 Hideki Todo, Ken Anjyo, Shun'ichi Yokoyama. Lit-Sphere extension for artistic rendering. The Visual Computer, Volume 29, Issue 6, pp. 473-480 (2013) 左: Diffuseのライティングテクスチャ 中 / 右: 異なるカメラからの描画結果 (ライト: 正面から)
8. OLM Lights Lit Sphere の機能 © OLM Digital, Inc. 8 移動/スケール/回転 ハッチングテクスチャ ハッチング (シェーディングされたストローク) リムライト (ポジティブ / ネガティブ) ライトを使用した結果 と カメラを使用した結果
9. OLM Lights Lit Sphere 描画結果 © OLM Digital, Inc. 9 Diffuseのライティング テクスチャ ハッチング テクスチャ
10. 参考文献 • 参考文献 – Lit Sphere • Sloan, Peter-pike & Martin, William & Gooch, Amy & Gooch, Bruce. The Lit Sphere: A Model for Capturing NPR Shading from Art. In: Proceedings of Graphics Interface 2001, pp. 143-150 (2001) – Lights Lit Sphere • Hideki Todo, Ken Anjyo, Shun'ichi Yokoyama. Lit-Sphere extension for artistic rendering. The Visual Computer, Volume 29, Issue 6, pp. 473- 480 (2013) • 謝辞 – Cow Mesh: https://github.com/ics-creative/160914_aframe/tree/master/assets – Car Mesh: https://sketchfab.com/3d-models/ac-cobra-red-51249171d0ec4af38765a8eb118358b7 © OLM Digital, Inc. 10
11. Smooth Voronoi © OLM Digital, Inc. 11
12. Smooth Voronoi • OLM Cellular Noise の Output Type に Polynomial Smooth Distance を追加 • Smooth Voronoi : ボロノイの境界をフェードする © OLM Digital, Inc. 12 Distance から Polynomial Smooth Distance を引き算 しきい値 (0.6以下なら白) Smooth Voronoi のアニメーション結果 Cellular Noise (Distance), Cellular Noise (Polynomial Smooth Distance), Smooth Voronoi
13. • 両モードの共通点: – シェーディングポイントから最も近い母点 (ボロノイの中心) までの距離を計算 • Distanceモード (通常): – min() 関数を使用し不連続性をもたらす最小距離を計算 • Polynomial Smooth Distanceモード: – polynomial smooth minimum() 関数を使用 Polynomial Smooth Distance © OLM Digital, Inc. 13 Distance と Polynomial Smooth Distance の比較 (黒いほど母点に近い)
14. Polynomial Smooth Minimum 関数 © OLM Digital, Inc. 14 For more details, see the article about polynomial smooth minimum by Inigo Quilez: https://iquilezles.org/articles/smin/ 𝑓 𝑥 = 1 と 𝑔 𝑥 = 𝑥 − 1 の2つの関数 𝑚𝑖𝑛(𝑓 𝑥 , 𝑔 𝑥 ) 関数 ◻ の近くで不連続な見た目になる 欲しい結果: - min() 関数の挙動を維持 - 不連続な部分を滑らかにする Polynomial smooth minimum 関数
15. Polynomial Smooth Minimum 関数 © OLM Digital, Inc. 15 For more details, see the article about polynomial smooth minimum by Inigo Quilez: https://iquilezles.org/articles/smin/ これらの不連続点に補正 𝑤(𝑘) を適用する範囲 −𝑘, 𝑘 を定義: 𝑠𝑚𝑖𝑛 𝑓 𝑥 , 𝑔 𝑥 , 𝑘 = 𝑔 𝑥 , 𝑔 𝑥 − 𝑓 𝑥 ≤ −𝑘 𝑓 𝑥 , 𝑔 𝑥 − 𝑓 𝑥 ≥ 𝑘 𝑚𝑖𝑛 𝑓 𝑥 , 𝑔 𝑥 − 𝑤 𝑘 , −𝑘 < 𝑔 𝑥 − 𝑓 𝑥 < 𝑘 Polynomial smooth minimum 関数 𝑤 𝑘 を次の多項式円弧として定義: 𝑤 𝑘 = 0, 𝑔 𝑥 − 𝑓 𝑥 ≤ −𝑘 0, 𝑔 𝑥 − 𝑓 𝑥 ≥ 𝑘 𝑠 ∙ ℎn 𝑥 , −𝑘 < 𝑔 𝑥 − 𝑓 𝑥 < 𝑘 Where: - 𝑠 は 𝑤 𝑘 によって定義された多項式円弧の最大値 - ℎ 𝑥 は [0, 1] の範囲の角度 𝑛 の出力曲線: ℎ 𝑥 = 1 ± 𝑔 𝑥 − 𝑓 𝑥 /𝑘
16. Polynomial Smooth Minimum 関数 © OLM Digital, Inc. 16 For more details, see the article about polynomial smooth minimum by Inigo Quilez: https://iquilezles.org/articles/smin/ polynomial smooth minimum (𝑘パラメータのアニメーション) Polynomial Smooth Distance モード (polynomial smooth minimum関数を使用) Distance モード (min() 関数を使用)
17. Cellular Noise – Smooth Voronoi の結果 © OLM Digital, Inc. 17 Smooth Voronoi Smooth Voronoi を使い水面の白波を表現
18. OLM Eye アニメからリアルまで幅広いスタイルの目の表現 © OLM Digital, Inc. 18
19. 目の構造 https://dictionary.goo.ne.jp/word/medical/目のしくみ © OLM Digital, Inc. 19 瞳孔 虹彩 強膜 角膜 眼球を上から見た断面図 眼球のイメージ図
20. 眼球ジオメトリ © OLM Digital, Inc. 20 瞳孔 虹彩 強膜 眼球のイメージ図 ジオメトリで作成した眼球 角膜
21. 要件 • 眼球モデルの形状 – 楕円体 – 特殊な形状 • 猫、爬虫類の目 • 共通のリグで扱いたい • 物理現象の再現 – 角膜の中の屈折 – キャッチライト、コースティクス • コンポジット時に調整 • リアル、トゥーン © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 21 著作権の関係により 画像を掲載しておりません
22. 基本的な機能 © OLM Digital, Inc. 22
23. シェーダーで眼球を作成 • 様々な形の眼球に対応するために…… シェーダーで目を作成 • 眼球オブジェクトにUVを投影 • 視線移動 ＝ 投影方向を変える © OLM Digital, Inc. 23 UV Beauty
24. ルック • レンダリング時 – 瞳孔・虹彩・強膜 – 虹彩の模様 – 虹彩や瞳孔のエッジ • グラデーション可能 – 猫目 – 角膜内の屈折 – キャッチライト、コースティクス • コンポジット時 – キャッチライトテクスチャを貼り付け – 各成分のAOVを使用 コースティクス キャッチライト 猫目 / 瞳孔エッジ 角膜内の屈折 © OLM Digital, Inc. 24 デフォルト
25. 虹彩・強膜 (白目) のテクスチャ 虹彩を横方向につぶした状態 猫目 レンダリング結果 強膜テクスチャ © OLM Digital, Inc. 25 虹彩テクスチャ UV
26. 強膜 (白目) のテクスチャのデフォーム © OLM Digital, Inc. 26
27. キャッチライト © OLM Digital, Inc. 27 コンポ時の入力 レンダリング コンポジット キャッチライト テクスチャ 投影されたUV AOV Beauty 調整 ・移動 ・回転 ・スケール UVで貼り付け +
28. コースティクス • 極座標上の楕円として作成 • 大きさ・明るさ (パラメータ) – 強さ – サイズ • 位置 – 角度 (θ) はキーライト方向 – 中心からの距離 (r) はパラメータ r θ © OLM Digital, Inc. 28 コースティクスのAOV (RGBとアルファ)
29. Viewport (GPU) プレビューの機能 • 虹彩テクスチャのマッピング • 角膜内の疑似屈折 • キャッチライト (擬似) Viewportプレビュー © OLM Digital, Inc. 29
30. リアルなルックの目 © OLM Digital, Inc. 30
31. 角膜のふくらみ • 映り込んだ光の形などが変わる – 擬似的に再現 • シェーダーで法線を計算 – レイと角膜の疑似楕円体の交差判定 – 交差点上の楕円体の法線を使用 R 角膜の疑似楕円体 眼球 H N P © OLM Digital, Inc. 31 バンプなし バンプあり R: レイ (視線) N: 法線 H: 角膜の高さ P: 評価点
32. コンポジット時の動的なキャッチライト © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 32 静的なキャッチライト 動的なキャッチライト 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
33. コンポジット時の動的なキャッチライト • レンダリング時に以下を出力 – キーライトの方向 – カメラの行列 – 法線のAOV • コンポジットで作成 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 33 法線のAOV テクスチャの位置の調整 Lit Sphere スクリーンスペースに投影 された法線をUVに 自動調整 スクリーンスペースに投影 されたキーライト方向 手動 位置調整 + + UV = 著作権の関係により 画像を掲載しており ません
34. セルルックの目 © OLM Digital, Inc. 34
35. まぶたの影 • まぶたの影を常に落とす – ライト関係なし – オクルージョンを使用 © OLM Digital, Inc. 35 判定方向による 影の幅の変化 判定範囲による グラデーション幅の変化 判定方向のアニメーション
36. トゥーンのキャッチライトとコースティクス • 複数のキャッチライト • キャッチライトの位置調整 • コースティクスの位置調整 • アニメのようにデザインされた虹彩 – テクスチャで表現 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 36 著作権の関係により 画像を掲載しておりません
37. 実写合成の目 © OLM Digital, Inc. 37
38. 虹彩/強膜のバンプマップ © OLM Digital, Inc. 38 バンプマップ: ON
39. 虹彩/強膜のバンプマップ © OLM Digital, Inc. 39 バンプマップ: OFF
40. 実写に対応 • キャッチライト、コースティクスのシェーディング機能 © OLM Digital, Inc. 40 対応前 対応後
41. 実写に対応 • Directional Light以外のキーライトに対応 • キーライトのテクスチャをキャッチライトのテクスチャとして使用 © OLM Digital, Inc. 41 IBL画像 エリアライトとキャッチライトテクスチャ
42. 今後の課題 • プロシージャルにジオメトリを作成 – シェーダーは利点があるが、リアリティ向上には限界がある • パラメータ調整だけで作れる利点を保つ © OLM Digital, Inc. 42 ジオメトリで眼球を作成した例 OLM Eye と ジオメトリの眼球 との比較
43. まとめ • 効率化 – シェーダーで作成 – UVを投影 – コンポジットで調整 • 表現力 – テクスチャの使用 – リアルな表現 – トゥーンの表現 – 実写のための改良 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 43 リアル トゥーン 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
44. OLM Toon アニメのための輪郭線とセルシェーダー © OLM Digital, Inc. ©TOMY／ZW製作委員会・テレビ東京 44
45. トゥーンシェーダーの役割 • 作画のアニメに合わせる • セルルックのフルCG – 作画・イラスト調 © OLM Digital, Inc. 45 ©TOMY／ZW製作委員会・テレビ東京 ©Nintendo·Creatures·GAME FREAK·TV Tokyo·Shoro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
46. トゥーンシェーダーの実装 • OLM Toon for mental ray – Arnoldが標準レンダラーになったため使えない • ラインの描画方法 – フィルターで描画 – シェーディング時に描画 © OLM Digital, Inc. 46 レイ スクリーン シーン フィルターサイズ
47. トゥーンシェーダーの実装 • OLM Toon for mental ray – Arnoldが標準レンダラーになったため使えない • ラインの描画方法 – フィルターで描画 – シェーディング時に描画 © OLM Digital, Inc. 47 レイ スクリーン シーン フィルターサイズ
48. トゥーンシェーダーの実装 • OLM Toon for mental ray – Arnoldが標準レンダラーになったため使えない • ラインの描画方法 – フィルターで描画 – シェーディング時に描画 © OLM Digital, Inc. 48 レイ スクリーン シーン フィルターサイズ
49. トゥーンシェーダーの実装 • OLM Toon for mental ray – Arnoldが標準レンダラーになったため使えない • ラインの描画方法 – フィルターで描画 – シェーディング時に描画 © OLM Digital, Inc. 49 レイ スクリーン シーン フィルターサイズ
50. Arnold aiToon • シェーダー ＋ 輪郭線フィルター • 太い輪郭線の場合は遅い • 輪郭線の太さの微調整が難しい • 他のフィルターと組み合わせることができない • 機能不足 • 拡張不可能 © OLM Digital, Inc. 50 フィルターサイズ
51. トゥーンシェーダーの自社開発 • 当時代替ツールがなかった • 自社開発の利点 – デザイナーの要望対応 – ほかのArnoldシェーダーとの併用 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·Shoro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 51 ほかのArnoldシェーダー 著作権の関係により 画像を掲載しており ません
52. OLM Toon の機能の概要 • セルシェーダー – ベース、シャドー、ハイライト – トランジション • ハード • ソフト • 輪郭線 – オブジェクトの間 – 法線・デプスなどの差 • Mayaでのプレビューと Arnoldでのレンダリング © OLM Digital, Inc. 52
53. セルシェーダー © OLM Digital, Inc. ©TOMY／ZW製作委員会・テレビ東京 53
54. セルシェーダーの基本機能 • 基本は３色 – ノーマル、影色、ハイライト – 輝度を三色にマップ – トランジションの制御が可能 • ハード • ソフト • 影とハイライトの追加 (2号影) • テクスチャ © OLM Digital, Inc. 54 H1 NM S1 H2 S2
55. リムライト • ランプのオフセット • 後ろからのライトを疑似的に表現 – カメラの方向と法線の角度で範囲が決まる 55 リムなし リムあり リム幅: 大 リム アルファ調整 リム グラデーション リム 色変更 © OLM Digital, Inc.
56. Maya上でのセルシェーダー • ビューポートプレビュー • UI (アトリビュートエディター) – ランプUI © OLM Digital, Inc. 56 セルシェーダーのアトリビュートエディター MayaでのGPUプレビュー
57. 輪郭線シェーダー © OLM Digital, Inc. ©TOMY／ZW製作委員会・テレビ東京 57
58. 輪郭線の基本機能 • 線の種類 – オブジェクト、UV、シェーダー、デプス、法線、色 – ソフトしきい値 • 種類ごとに設定 – 色 – 太さ • 透過、レイヤー 58 © OLM Digital, Inc. ©TOMY／ZW製作委員会・テレビ東京 セルシェーダー 輪郭線 セルシェーダー ＋ 輪郭線 著作権の関係により 画像を掲載しておりま せん 著作権の関係により 画像を掲載しておりま せん 著作権の関係により 画像を掲載しておりま せん
59. 輪郭線の種類 59 © OLM Digital, Inc. オブジェクト同士の 交差による輪郭線 背景との輪郭線 オブジェクト同士の 輪郭線 シェーダー 輪郭線 法線 輪郭線 Wireframe 輪郭線 デプス 輪郭線
60. 輪郭線の見た目 • 色 – 単色、テクスチャ • 太さ – 一定の値、シェーダーごと指定も可能 – テクスチャで指定可能 • 手書きの表現 • 線の削除にも利用可能 60 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 著作権の関係により 画像を掲載しておりません
61. コントラスト色の輪郭線 • 色の差がある部分に線を描画 • パーツごとに異なる色を設定 – パーツ間に線を描画 • タイル状に並べ、タイルごと異なる色に 61 Contrast ColorとUV © OLM Digital, Inc. ©TOMY／ZW製作委員会・テレビ東京 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
62. ソフトしきい値 • デプスや法線などによる線のフェードイン・アウト © OLM Digital, Inc. 62 ソフトしきい値なし ソフトしきい値あり デプスによる輪郭線
63. 輪郭線の透明度 • 半透明なオブジェクトの向こうに輪郭線を描く • 眼鏡、窓、コックピットなど © OLM Digital, Inc. 63 ©L5/YWP·TX 著作権の関係により 画像を掲載しておりません
64. 奥のオブジェクトを手前に描画 • まゆ毛 を 髪の毛 の手前に描画 • 虹彩 を まぶたの影 の手前に描画 © OLM Digital, Inc. 64
65. 奥のオブジェクトを手前に描画 (半透明) • 前髪がかかっている目やまゆ毛を半透明に透過 © OLM Digital, Inc. 65
66. プロダクションにおけるOLM Toonの活用 • 様々な作品で利用 • ロボット系 • 動物、人間 66 © OLM Digital, Inc.
67. 技術面 © OLM Digital, Inc. 67
68. サンプルデータの評価 • サブピクセルごとにサンプルデータ作成 • サンプルデータを比較 → ライン描画をマーク © OLM Digital, Inc. 68 …輪郭線のソース サブピクセル 輪郭線のソース …評価中のサブピクセル オブジェクト …評価点 線を描くエッジをマーク
69. 輪郭線の描画 • エッジへの距離に応じて線のアルファ決定 © OLM Digital, Inc. 69 …輪郭線 …輪郭線 (半透明) 線を描くエッジ 線の幅
70. サンプルデータのキャッシュ • サンプルデータをキャッシュする – 近傍点のデータも必要 © OLM Digital, Inc. 70 現在のサブピクセル と近傍サブピクセル https://docs.arnoldrenderer.com/display/a5af3dsug/system バケット 線の幅
71. サンプリング • Arnoldは中心にレイキャストしない • サブピクセルの中心に自分でレイキャスト © OLM Digital, Inc. 71 Arnoldのサンプリング例 OLMToonのサンプリング
72. レイヤー (透過) • 透過先のサンプルデータも保存 • レイヤーごとに管理 • 手順 – サンプリング (サンプルデータを保存) – レイをそのまま通す – 次のレイヤーの計算 • 透過するレイヤー分のメモリが必要 – 上限設定 © OLM Digital, Inc. 72
73. OLM Toon VS aiToon • OLM Toonはフィルターを使わない – 通常のフィルター(ガウシアンなど)を利用できる → 描画結果がきれい © OLM Digital, Inc. 73 線の太さ レンダリング時間 メモリ使用量 カメラレイの数 OLM Toon aiToon OLM Toon (サンプルデータ) aiToon (AOV) OLM Toon aiToon 1 00:03 00:02 94 MB 273 MB 12,523,233 4,817,475 2 00:04 00:02 96 MB 273 MB 12,549,051 4,971,780 4 00:05 00:04 102 MB 290 MB 13,673,467 5,287,680 10 00:17 00:22 120 MB 346 MB 17,861,315 6,293,700 20 01:02 02:25 153 MB 449 MB 21,450,627 8,164,800 線が太くても高速 メモリ消費少ない 中心への再レイキャストにより レイが増える
74. まとめ • Arnoldで輪郭線シェーダー実装 – 自社開発 → カスタマイズ可能 • いくつかの技術的な問題を解決 – レンダリング時の後処理 – グローバルキャッシュ – バケットごとのキャッシュ • 今後 – アニメレンダラーの自社開発？ © OLM Digital, Inc. 74
75. まとめ © OLM Digital, Inc. 75 OLM Toon OLM Eye OLM Lit Sphere Smooth Voronoi ©TOMY／ZW製作委員会・テレビ東京 ©Nintendo·Creatures·GAME FREAK·TV Tokyo·Shoro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません