Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

OLM Digital R&D

October 25, 2022
Tweet

More Decks by OLM Digital R&D

Other Decks in Technology

Transcript

  1. 目次 © 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 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
  2. OLM Lit Sphere © OLM Digital, Inc. 4 Always Look

    At Camera パラメータ OFF / ON 車体 金属 ガラス ウィンカー タイヤ シート 内装 • 追加パラメーター – Always Look At Camera: カメラのパースを無視 U V N N
  3. 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*: シフトされた「カメラスペースの シェーディングポイントの法線」 : シェーディングポイント
  4. 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)
  5. • 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のライティングテクスチャ 中 / 右: 異なるカメラからの描画結果 (ライト: 正面から)
  6. OLM Lights Lit Sphere の機能 © OLM Digital, Inc. 8

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

    Diffuseのライティング テクスチャ ハッチング テクスチャ
  8. 参考文献 • 参考文献 – 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
  9. 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
  10. • 両モードの共通点: – シェーディングポイントから最も近い母点 (ボロノイの中心) までの距離を計算 • Distanceモード (通常): –

    min() 関数を使用し不連続性をもたらす最小距離を計算 • Polynomial Smooth Distanceモード: – polynomial smooth minimum() 関数を使用 Polynomial Smooth Distance © OLM Digital, Inc. 13 Distance と Polynomial Smooth Distance の比較 (黒いほど母点に近い)
  11. 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 関数
  12. 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 ± 𝑔 𝑥 − 𝑓 𝑥 /𝑘
  13. 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() 関数を使用)
  14. Cellular Noise – Smooth Voronoi の結果 © OLM Digital, Inc.

    17 Smooth Voronoi Smooth Voronoi を使い水面の白波を表現
  15. 要件 • 眼球モデルの形状 – 楕円体 – 特殊な形状 • 猫、爬虫類の目 •

    共通のリグで扱いたい • 物理現象の再現 – 角膜の中の屈折 – キャッチライト、コースティクス • コンポジット時に調整 • リアル、トゥーン © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 21 著作権の関係により 画像を掲載しておりません
  16. ルック • レンダリング時 – 瞳孔・虹彩・強膜 – 虹彩の模様 – 虹彩や瞳孔のエッジ •

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

    テクスチャ 投影されたUV AOV Beauty 調整 ・移動 ・回転 ・スケール UVで貼り付け +
  18. コースティクス • 極座標上の楕円として作成 • 大きさ・明るさ (パラメータ) – 強さ – サイズ

    • 位置 – 角度 (θ) はキーライト方向 – 中心からの距離 (r) はパラメータ r θ © OLM Digital, Inc. 28 コースティクスのAOV (RGBとアルファ)
  19. 角膜のふくらみ • 映り込んだ光の形などが変わる – 擬似的に再現 • シェーダーで法線を計算 – レイと角膜の疑似楕円体の交差判定 –

    交差点上の楕円体の法線を使用 R 角膜の疑似楕円体 眼球 H N P © OLM Digital, Inc. 31 バンプなし バンプあり R: レイ (視線) N: 法線 H: 角膜の高さ P: 評価点
  20. コンポジット時の動的なキャッチライト © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon

    ©2019 PIKACHU PROJECT 32 静的なキャッチライト 動的なキャッチライト 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
  21. コンポジット時の動的なキャッチライト • レンダリング時に以下を出力 – キーライトの方向 – カメラの行列 – 法線のAOV •

    コンポジットで作成 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 33 法線のAOV テクスチャの位置の調整 Lit Sphere スクリーンスペースに投影 された法線をUVに 自動調整 スクリーンスペースに投影 されたキーライト方向 手動 位置調整 + + UV = 著作権の関係により 画像を掲載しており ません
  22. まぶたの影 • まぶたの影を常に落とす – ライト関係なし – オクルージョンを使用 © OLM Digital,

    Inc. 35 判定方向による 影の幅の変化 判定範囲による グラデーション幅の変化 判定方向のアニメーション
  23. トゥーンのキャッチライトとコースティクス • 複数のキャッチライト • キャッチライトの位置調整 • コースティクスの位置調整 • アニメのようにデザインされた虹彩 –

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

    表現力 – テクスチャの使用 – リアルな表現 – トゥーンの表現 – 実写のための改良 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 43 リアル トゥーン 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
  25. トゥーンシェーダーの役割 • 作画のアニメに合わせる • セルルックのフルCG – 作画・イラスト調 © OLM Digital,

    Inc. 45 ©TOMY/ZW製作委員会・テレビ東京 ©Nintendo·Creatures·GAME FREAK·TV Tokyo·Shoro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
  26. トゥーンシェーダーの実装 • OLM Toon for mental ray – Arnoldが標準レンダラーになったため使えない •

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

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

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

    ラインの描画方法 – フィルターで描画 – シェーディング時に描画 © OLM Digital, Inc. 49 レイ スクリーン シーン フィルターサイズ
  30. Arnold aiToon • シェーダー + 輪郭線フィルター • 太い輪郭線の場合は遅い • 輪郭線の太さの微調整が難しい

    • 他のフィルターと組み合わせることができない • 機能不足 • 拡張不可能 © OLM Digital, Inc. 50 フィルターサイズ
  31. トゥーンシェーダーの自社開発 • 当時代替ツールがなかった • 自社開発の利点 – デザイナーの要望対応 – ほかのArnoldシェーダーとの併用 ©

    OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·Shoro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 51 ほかのArnoldシェーダー 著作権の関係により 画像を掲載しており ません
  32. OLM Toon の機能の概要 • セルシェーダー – ベース、シャドー、ハイライト – トランジション •

    ハード • ソフト • 輪郭線 – オブジェクトの間 – 法線・デプスなどの差 • Mayaでのプレビューと Arnoldでのレンダリング © OLM Digital, Inc. 52
  33. セルシェーダーの基本機能 • 基本は3色 – ノーマル、影色、ハイライト – 輝度を三色にマップ – トランジションの制御が可能 •

    ハード • ソフト • 影とハイライトの追加 (2号影) • テクスチャ © OLM Digital, Inc. 54 H1 NM S1 H2 S2
  34. Maya上でのセルシェーダー • ビューポートプレビュー • UI (アトリビュートエディター) – ランプUI © OLM

    Digital, Inc. 56 セルシェーダーのアトリビュートエディター MayaでのGPUプレビュー
  35. 輪郭線の基本機能 • 線の種類 – オブジェクト、UV、シェーダー、デプス、法線、色 – ソフトしきい値 • 種類ごとに設定 –

    色 – 太さ • 透過、レイヤー 58 © OLM Digital, Inc. ©TOMY/ZW製作委員会・テレビ東京 セルシェーダー 輪郭線 セルシェーダー + 輪郭線 著作権の関係により 画像を掲載しておりま せん 著作権の関係により 画像を掲載しておりま せん 著作権の関係により 画像を掲載しておりま せん
  36. 輪郭線の見た目 • 色 – 単色、テクスチャ • 太さ – 一定の値、シェーダーごと指定も可能 –

    テクスチャで指定可能 • 手書きの表現 • 線の削除にも利用可能 60 © OLM Digital, Inc. ©Nintendo·Creatures·GAME FREAK·TV Tokyo·ShoPro·JR Kikaku ©Pokémon ©2019 PIKACHU PROJECT 著作権の関係により 画像を掲載しておりません
  37. コントラスト色の輪郭線 • 色の差がある部分に線を描画 • パーツごとに異なる色を設定 – パーツ間に線を描画 • タイル状に並べ、タイルごと異なる色に 61

    Contrast ColorとUV © OLM Digital, Inc. ©TOMY/ZW製作委員会・テレビ東京 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません
  38. サンプルデータの評価 • サブピクセルごとにサンプルデータ作成 • サンプルデータを比較 → ライン描画をマーク © OLM Digital,

    Inc. 68 …輪郭線のソース サブピクセル 輪郭線のソース …評価中のサブピクセル オブジェクト …評価点 線を描くエッジをマーク
  39. サンプルデータのキャッシュ • サンプルデータをキャッシュする – 近傍点のデータも必要 © OLM Digital, Inc. 70

    現在のサブピクセル と近傍サブピクセル https://docs.arnoldrenderer.com/display/a5af3dsug/system バケット 線の幅
  40. レイヤー (透過) • 透過先のサンプルデータも保存 • レイヤーごとに管理 • 手順 – サンプリング

    (サンプルデータを保存) – レイをそのまま通す – 次のレイヤーの計算 • 透過するレイヤー分のメモリが必要 – 上限設定 © OLM Digital, Inc. 72
  41. 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 線が太くても高速 メモリ消費少ない 中心への再レイキャストにより レイが増える
  42. まとめ • Arnoldで輪郭線シェーダー実装 – 自社開発 → カスタマイズ可能 • いくつかの技術的な問題を解決 –

    レンダリング時の後処理 – グローバルキャッシュ – バケットごとのキャッシュ • 今後 – アニメレンダラーの自社開発? © OLM Digital, Inc. 74
  43. まとめ © 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 著作権の関係により 画像を掲載しておりません 著作権の関係により 画像を掲載しておりません