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

Slide 1

Slide 1 text

アニメのためのシェーダー - Lit Sphere, Smooth Voronoi, Eye, Toon - 市川翔大 Alexandre Derouet-Jourdan Marc Salvati 1

Slide 2

Slide 2 text

目次 © 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 著作権の関係により画像を掲載しておりません著作権の関係により画像を掲載しておりません

Slide 3

Slide 3 text

OLM Lit Sphere © OLM Digital, Inc. 3

Slide 4

Slide 4 text

OLM Lit Sphere © OLM Digital, Inc. 4 Always Look At Camera パラメータ OFF / ON 車体金属ガラスウィンカータイヤシート内装 • 追加パラメーター – Always Look At Camera: カメラのパースを無視 U V N N

Slide 5

Slide 5 text

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*: シフトされた「カメラスペースのシェーディングポイントの法線」 : シェーディングポイント

Slide 6

Slide 6 text

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)

Slide 7

Slide 7 text

• 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のライティングテクスチャ中 / 右: 異なるカメラからの描画結果 (ライト: 正面から)

Slide 8

Slide 8 text

OLM Lights Lit Sphere の機能 © OLM Digital, Inc. 8 移動/スケール/回転ハッチングテクスチャハッチング (シェーディングされたストローク) リムライト (ポジティブ / ネガティブ) ライトを使用した結果とカメラを使用した結果

Slide 9

Slide 9 text

OLM Lights Lit Sphere 描画結果 © OLM Digital, Inc. 9 Diffuseのライティングテクスチャハッチングテクスチャ

Slide 10

Slide 10 text

参考文献 • 参考文献 – 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

Slide 11

Slide 11 text

Smooth Voronoi © OLM Digital, Inc. 11

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

• 両モードの共通点: – シェーディングポイントから最も近い母点 (ボロノイの中心) までの距離を計算 • Distanceモード (通常): – min() 関数を使用し不連続性をもたらす最小距離を計算 • Polynomial Smooth Distanceモード: – polynomial smooth minimum() 関数を使用 Polynomial Smooth Distance © OLM Digital, Inc. 13 Distance と Polynomial Smooth Distance の比較 (黒いほど母点に近い)

Slide 14

Slide 14 text

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 関数

Slide 15

Slide 15 text

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 ± 𝑔 𝑥 − 𝑓 𝑥 /𝑘

Slide 16

Slide 16 text

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() 関数を使用)

Slide 17

Slide 17 text

Cellular Noise – Smooth Voronoi の結果 © OLM Digital, Inc. 17 Smooth Voronoi Smooth Voronoi を使い水面の白波を表現

Slide 18

Slide 18 text

OLM Eye アニメからリアルまで幅広いスタイルの目の表現 © OLM Digital, Inc. 18

Slide 19

Slide 19 text

目の構造 https://dictionary.goo.ne.jp/word/medical/目のしくみ © OLM Digital, Inc. 19 瞳孔虹彩強膜角膜眼球を上から見た断面図眼球のイメージ図

Slide 20

Slide 20 text

眼球ジオメトリ © OLM Digital, Inc. 20 瞳孔虹彩強膜眼球のイメージ図ジオメトリで作成した眼球角膜

Slide 21

Slide 21 text

要件 • 眼球モデルの形状 – 楕円体 – 特殊な形状 • 猫、爬虫類の目 • 共通のリグで扱いたい • 物理現象の再現 – 角膜の中の屈折 – キャッチライト、コースティクス • コンポジット時に調整 • リアル、トゥーン © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 21 著作権の関係により画像を掲載しておりません

Slide 22

Slide 22 text

基本的な機能 © OLM Digital, Inc. 22

Slide 23

Slide 23 text

シェーダーで眼球を作成 • 様々な形の眼球に対応するために…… シェーダーで目を作成 • 眼球オブジェクトにUVを投影 • 視線移動＝投影方向を変える © OLM Digital, Inc. 23 UV Beauty

Slide 24

Slide 24 text

ルック • レンダリング時 – 瞳孔・虹彩・強膜 – 虹彩の模様 – 虹彩や瞳孔のエッジ • グラデーション可能 – 猫目 – 角膜内の屈折 – キャッチライト、コースティクス • コンポジット時 – キャッチライトテクスチャを貼り付け – 各成分のAOVを使用コースティクスキャッチライト猫目 / 瞳孔エッジ角膜内の屈折 © OLM Digital, Inc. 24 デフォルト

Slide 25

Slide 25 text

虹彩・強膜 (白目) のテクスチャ虹彩を横方向につぶした状態猫目レンダリング結果強膜テクスチャ © OLM Digital, Inc. 25 虹彩テクスチャ UV

Slide 26

Slide 26 text

強膜 (白目) のテクスチャのデフォーム © OLM Digital, Inc. 26

Slide 27

Slide 27 text

キャッチライト © OLM Digital, Inc. 27 コンポ時の入力レンダリングコンポジットキャッチライトテクスチャ投影されたUV AOV Beauty 調整・移動・回転・スケール UVで貼り付け +

Slide 28

Slide 28 text

コースティクス • 極座標上の楕円として作成 • 大きさ・明るさ (パラメータ) – 強さ – サイズ • 位置 – 角度 (θ) はキーライト方向 – 中心からの距離 (r) はパラメータ r θ © OLM Digital, Inc. 28 コースティクスのAOV (RGBとアルファ)

Slide 29

Slide 29 text

Viewport (GPU) プレビューの機能 • 虹彩テクスチャのマッピング • 角膜内の疑似屈折 • キャッチライト (擬似) Viewportプレビュー © OLM Digital, Inc. 29

Slide 30

Slide 30 text

リアルなルックの目 © OLM Digital, Inc. 30

Slide 31

Slide 31 text

角膜のふくらみ • 映り込んだ光の形などが変わる – 擬似的に再現 • シェーダーで法線を計算 – レイと角膜の疑似楕円体の交差判定 – 交差点上の楕円体の法線を使用 R 角膜の疑似楕円体眼球 H N P © OLM Digital, Inc. 31 バンプなしバンプあり R: レイ (視線) N: 法線 H: 角膜の高さ P: 評価点

Slide 32

Slide 32 text

Slide 33

Slide 33 text

コンポジット時の動的なキャッチライト • レンダリング時に以下を出力 – キーライトの方向 – カメラの行列 – 法線のAOV • コンポジットで作成 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 33 法線のAOV テクスチャの位置の調整 Lit Sphere スクリーンスペースに投影された法線をUVに自動調整スクリーンスペースに投影されたキーライト方向手動位置調整 + + UV = 著作権の関係により画像を掲載しておりません

Slide 34

Slide 34 text

セルルックの目 © OLM Digital, Inc. 34

Slide 35

Slide 35 text

まぶたの影 • まぶたの影を常に落とす – ライト関係なし – オクルージョンを使用 © OLM Digital, Inc. 35 判定方向による影の幅の変化判定範囲によるグラデーション幅の変化判定方向のアニメーション

Slide 36

Slide 36 text

トゥーンのキャッチライトとコースティクス • 複数のキャッチライト • キャッチライトの位置調整 • コースティクスの位置調整 • アニメのようにデザインされた虹彩 – テクスチャで表現 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 36 著作権の関係により画像を掲載しておりません

Slide 37

Slide 37 text

実写合成の目 © OLM Digital, Inc. 37

Slide 38

Slide 38 text

虹彩/強膜のバンプマップ © OLM Digital, Inc. 38 バンプマップ: ON

Slide 39

Slide 39 text

虹彩/強膜のバンプマップ © OLM Digital, Inc. 39 バンプマップ: OFF

Slide 40

Slide 40 text

実写に対応 • キャッチライト、コースティクスのシェーディング機能 © OLM Digital, Inc. 40 対応前対応後

Slide 41

Slide 41 text

実写に対応 • Directional Light以外のキーライトに対応 • キーライトのテクスチャをキャッチライトのテクスチャとして使用 © OLM Digital, Inc. 41 IBL画像エリアライトとキャッチライトテクスチャ

Slide 42

Slide 42 text

今後の課題 • プロシージャルにジオメトリを作成 – シェーダーは利点があるが、リアリティ向上には限界がある • パラメータ調整だけで作れる利点を保つ © OLM Digital, Inc. 42 ジオメトリで眼球を作成した例 OLM Eye とジオメトリの眼球との比較

Slide 43

Slide 43 text

まとめ • 効率化 – シェーダーで作成 – UVを投影 – コンポジットで調整 • 表現力 – テクスチャの使用 – リアルな表現 – トゥーンの表現 – 実写のための改良 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 43 リアルトゥーン著作権の関係により画像を掲載しておりません著作権の関係により画像を掲載しておりません

Slide 44

Slide 44 text

OLM Toon アニメのための輪郭線とセルシェーダー © OLM Digital, Inc. ©TOMY／ZW製作委員会・テレビ東京 44

Slide 45

Slide 45 text

トゥーンシェーダーの役割 • 作画のアニメに合わせる • セルルックのフルCG – 作画・イラスト調 © OLM Digital, Inc. 45 ©TOMY／ZW製作委員会・テレビ東京 ©Nintendo·Creatures·GAME FREAK·TV Tokyo·Shoro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 著作権の関係により画像を掲載しておりません著作権の関係により画像を掲載しておりません

Slide 46

Slide 46 text

トゥーンシェーダーの実装 • OLM Toon for mental ray – Arnoldが標準レンダラーになったため使えない • ラインの描画方法 – フィルターで描画 – シェーディング時に描画 © OLM Digital, Inc. 46 レイスクリーンシーンフィルターサイズ

Slide 47

Slide 47 text

トゥーンシェーダーの実装 • OLM Toon for mental ray – Arnoldが標準レンダラーになったため使えない • ラインの描画方法 – フィルターで描画 – シェーディング時に描画 © OLM Digital, Inc. 47 レイスクリーンシーンフィルターサイズ

Slide 48

Slide 48 text

トゥーンシェーダーの実装 • OLM Toon for mental ray – Arnoldが標準レンダラーになったため使えない • ラインの描画方法 – フィルターで描画 – シェーディング時に描画 © OLM Digital, Inc. 48 レイスクリーンシーンフィルターサイズ

Slide 49

Slide 49 text

トゥーンシェーダーの実装 • OLM Toon for mental ray – Arnoldが標準レンダラーになったため使えない • ラインの描画方法 – フィルターで描画 – シェーディング時に描画 © OLM Digital, Inc. 49 レイスクリーンシーンフィルターサイズ

Slide 50

Slide 50 text

Arnold aiToon • シェーダー＋輪郭線フィルター • 太い輪郭線の場合は遅い • 輪郭線の太さの微調整が難しい • 他のフィルターと組み合わせることができない • 機能不足 • 拡張不可能 © OLM Digital, Inc. 50 フィルターサイズ

Slide 51

Slide 51 text

トゥーンシェーダーの自社開発 • 当時代替ツールがなかった • 自社開発の利点 – デザイナーの要望対応 – ほかのArnoldシェーダーとの併用 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·Shoro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 51 ほかのArnoldシェーダー著作権の関係により画像を掲載しておりません

Slide 52

Slide 52 text

OLM Toon の機能の概要 • セルシェーダー – ベース、シャドー、ハイライト – トランジション • ハード • ソフト • 輪郭線 – オブジェクトの間 – 法線・デプスなどの差 • Mayaでのプレビューと Arnoldでのレンダリング © OLM Digital, Inc. 52

Slide 53

Slide 53 text

Slide 54

Slide 54 text

セルシェーダーの基本機能 • 基本は３色 – ノーマル、影色、ハイライト – 輝度を三色にマップ – トランジションの制御が可能 • ハード • ソフト • 影とハイライトの追加 (2号影) • テクスチャ © OLM Digital, Inc. 54 H1 NM S1 H2 S2

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

輪郭線の基本機能 • 線の種類 – オブジェクト、UV、シェーダー、デプス、法線、色 – ソフトしきい値 • 種類ごとに設定 – 色 – 太さ • 透過、レイヤー 58 © OLM Digital, Inc. ©TOMY／ZW製作委員会・テレビ東京セルシェーダー輪郭線セルシェーダー＋輪郭線著作権の関係により画像を掲載しておりません著作権の関係により画像を掲載しておりません著作権の関係により画像を掲載しておりません

Slide 59

Slide 59 text

Slide 60

Slide 60 text

輪郭線の見た目 • 色 – 単色、テクスチャ • 太さ – 一定の値、シェーダーごと指定も可能 – テクスチャで指定可能 • 手書きの表現 • 線の削除にも利用可能 60 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 著作権の関係により画像を掲載しておりません

Slide 61

Slide 61 text

コントラスト色の輪郭線 • 色の差がある部分に線を描画 • パーツごとに異なる色を設定 – パーツ間に線を描画 • タイル状に並べ、タイルごと異なる色に 61 Contrast ColorとUV © OLM Digital, Inc. ©TOMY／ZW製作委員会・テレビ東京著作権の関係により画像を掲載しておりません著作権の関係により画像を掲載しておりません

Slide 62

Slide 62 text

Slide 63

Slide 63 text

Slide 64

Slide 64 text

Slide 65

Slide 65 text

Slide 66

Slide 66 text

Slide 67

Slide 67 text

Slide 68

Slide 68 text

サンプルデータの評価 • サブピクセルごとにサンプルデータ作成 • サンプルデータを比較 → ライン描画をマーク © OLM Digital, Inc. 68 …輪郭線のソースサブピクセル輪郭線のソース …評価中のサブピクセルオブジェクト …評価点線を描くエッジをマーク

Slide 69

Slide 69 text

Slide 70

Slide 70 text

サンプルデータのキャッシュ • サンプルデータをキャッシュする – 近傍点のデータも必要 © OLM Digital, Inc. 70 現在のサブピクセルと近傍サブピクセル https://docs.arnoldrenderer.com/display/a5af3dsug/system バケット線の幅

Slide 71

Slide 71 text

Slide 72

Slide 72 text

レイヤー (透過) • 透過先のサンプルデータも保存 • レイヤーごとに管理 • 手順 – サンプリング (サンプルデータを保存) – レイをそのまま通す – 次のレイヤーの計算 • 透過するレイヤー分のメモリが必要 – 上限設定 © OLM Digital, Inc. 72

Slide 73

Slide 73 text

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 線が太くても高速メモリ消費少ない中心への再レイキャストによりレイが増える

Slide 74

Slide 74 text

まとめ • Arnoldで輪郭線シェーダー実装 – 自社開発 → カスタマイズ可能 • いくつかの技術的な問題を解決 – レンダリング時の後処理 – グローバルキャッシュ – バケットごとのキャッシュ • 今後 – アニメレンダラーの自社開発？ © OLM Digital, Inc. 74

Slide 75

Slide 75 text

まとめ © 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 著作権の関係により画像を掲載しておりません著作権の関係により画像を掲載しておりません