MToonの着色完全に理解した

Transcript

1. MToonの着色完全に理解した VRM勉強会 #2 2019/05/22 えむにわ @m2wasabi

2. 自己紹介 • 山本 允葵 (Masaki Yamamoto) えむにわ @m2wasabi 新しいものに何でも食いつく 雑食系野良エンジニア(フリーランス)

   Web,クラウド,IoT,xR周りが飯のタネ 引っ越したいので職探し中(信用について考えさせられる日々) https://m2wasabi.booth.pm/ Boothで書いたもの⇒

3. 自己紹介 • 山本 允葵 (Masaki Yamamoto) えむにわ @m2wasabi 新しいものに何でも食いつく 雑食系野良エンジニア(フリーランス)

   Web,クラウド,IoT,xR周りが飯のタネ 引っ越したいので職探し中(信用について考えさせられる日々) https://m2wasabi.booth.pm/ Boothで書いたもの⇒ 無料になった！

4. 自己紹介 • 山本 允葵 (Masaki Yamamoto) えむにわ @m2wasabi 新しいものに何でも食いつく 雑食系野良エンジニア(フリーランス)

   Web,クラウド,IoT,xR周りが飯のタネ 引っ越したいので職探し中(信用について考えさせられる日々) https://m2wasabi.booth.pm/ Boothで書いたもの☝ 無料になった！

5. VRM関連で作ったもの OSSのアバターパペットツール https://github.com/m2wasabi/LiveAvatar 身につける装備なしで使える！ バーチャル対面コミュニケーション 守衛のおじさん や 受付けのお姉さん アップデートしていいんだよ！ 設置はシンプル！

   Viveコントローラー持って 椅子に座るだけ！ VOICEROIDなどの音声合成にも対応！ LiveAvatar VRMを読み込むUI https://github.com/m2wasabi/VRMLoaderUI ソースは MITライセンス アートワークは CC0 編集自由なのでカスタマイズして使おう！ VRM Loader UI

6. 続・ VRM関連で作ったもの • Looking Glass Libraryでアプリ公開してます • 疲れたときや、部屋が寒い時に、自分の好きな キャラをくるくる回すことによりGPUと一緒に あったかくなる、シンプルな癒しコンテンツです

   • Looking Glassをお持ちなら、自分の好きなモデル で実行してみて？ モーションはグレイさんのvmdモーションを Unityに移植したもの（移植・配布許可済） https://ux.getuploader.com/m2wunity/download/1

7. 今回の内容 • Mtoonの色の決まり方について話します (VRM FANBOOK 2 の内容+補足です)  透過モードについて 

   配色の仕組み  色空間について • モデル移植者のためのMtoon着色ガイド ※このLTで以下の内容は扱いません ・影の領域判定の詳細 ・輪郭線の描画の詳細 ・法線マップ

8. 透過モードについて • 半透明の描画結果はメッシュの定義順と密接に関係がある

9. 透過モードについて • 半透明の描画結果はメッシュの定義順と密接に関係がある イケてるレンダリング結果 イケてないレンダリング結果

10. 透過モードについて • 半透明の描画結果はメッシュの定義順と密接に関係がある 奥からレンダリングされる場合 手前からレンダリングされる場合

11. 透過モードについて • 半透明の描画結果はメッシュの定義順と密接に関係がある 奥からレンダリングされる場合 手前からレンダリングされる場合 上書き！ 手前にメッ シュあるし 抜きだな

12. 透過モードについて • 半透明の描画結果はメッシュの定義順と密接に関係がある  手前から描画する状況で描画に失敗するときがある  3Dなので、そういう状況は絶対ある(回転できるから) • 透過マテリアルを使うときの工夫 

    テクスチャ依存の完全透過部位を最小限にする(WithZWriteが活きる)  透過に透過をできるだけ重ねないようにする  半透明物体の場合、単色など重なっても気づかれないデザインにする

13. 配色の仕組み • Mtoonの色の配置は大体以下の様に決まる Lit / Shade Global Illumination Emission MatCap

    Outline

14. 配色の仕組み • Mtoonの色の配置は大体以下の様に決まる Lit / Shade Global Illumination Emission MatCap

    Outline ライティング エフェクト

15. 配色の仕組み • ライティングとその影響 Lit Texture Shadow Texture Shadow Color Light

    LightColor Attenuation GI Intensity Global Illumination LightColor Attenuation Lit Color LightColor Attenuation は 光源の色を脱色する度合 LightColor Attenuation Light Lit Shadow GI

16. 配色の仕組み • エフェクトの描画  光源に関係なく描画される要素  Emission, MatCap, Outline MatCap

    Emission Color Emission Texture Outline Emission

17. 配色の仕組み • エフェクトの描画  光源に関係なく描画される要素  Emission, MatCap, Outline MatCap

    Emission Color Emission Texture Outline Emission MatCap補足 メッシュの法線方向に従って色を塗るやつ MtoonのMatCapは加算（大事なこと） リムライト 光沢

18. Σ MatCap Outline Lit Shadow GI Emission 配色の仕組み 完成！！

19. Mtoon移植ガイド • VRMセットアップにおいて、他のシェーダ(UTS2 / ArcToon / 他) から Mtoonに移植するプロセスは避けられない 

    ※裏技的なものはあるけどそういうのはVRM FANBOOK2読んで！ • 元モデルの見た目を再現するときの効率の良い手順を紹介！  基本方針はこうです

20. Mtoon移植ガイド • VRMセットアップにおいて、他のシェーダ(UTS2 / ArcToon / 他) から Mtoonに移植するプロセスは避けられない 

    ※裏技的なものはあるけどそういうのはVRM FANBOOK2読んで！ • 元モデルの見た目を再現するときの効率の良い手順を紹介！  基本方針はこうです 闇⇒光

21. Mtoon移植ガイド • 実際のワークフロー  DirLight切る、GI切る  Emissionを調整する  GI入れる 

    GI Intensity調整する  純白DirLight入れる  明色・影色を調整する  ShadeShift, Toony を調整する  DirLightの色を変え、回しながら微調整  MatCap調整(テクスチャの色合い調整)  他のマテリアルとのマッチング  以上をマテリアルの数だけ繰り返す

22. Mtoon移植ガイド • 実際のワークフロー  DirLight切る、GI切る  Emissionを調整する  GI入れる 

    GI Intensity調整する  純白DirLight入れる  明色・影色を調整する  ShadeShift, Toony を調整する  DirLightの色を変え、回しながら微調整  MatCap調整(テクスチャの色合い調整)  他のマテリアルとのマッチング  以上をマテリアルの数だけ繰り返す 実際にやってみよう（時間と相談）

23. まとめ • MToonの色の付け方の仕組みを完全に理解した！ • 他のシェーダからMtoonへの移植手順も理解した • よりDeepな話はVRM FANBOOK2読んでみてね https://m2wasabi.booth.pm/items/1270343

24. Thanks for your attention おしまい！