MToonの着色完全に理解した

 MToonの着色完全に理解した

Anatomy of MToon Shader colorize

1b0a7f33c5a8b5ed5f3ff9e2ee2b55db?s=128

m2wasabi

May 22, 2019
Tweet

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 おしまい!