MToonの着色完全に理解した

by m2wasabi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 • 山本允葵 (Masaki Yamamoto) えむにわ @m2wasabi 新しいものに何でも食いつく雑食系野良エンジニア(フリーランス) Web,クラウド,IoT,xR周りが飯のタネ引っ越したいので職探し中(信用について考えさせられる日々) https://m2wasabi.booth.pm/ Boothで書いたもの⇒

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

VRM関連で作ったもの OSSのアバターパペットツール https://github.com/m2wasabi/LiveAvatar 身につける装備なしで使える！バーチャル対面コミュニケーション守衛のおじさんや受付けのお姉さんアップデートしていいんだよ！設置はシンプル！ Viveコントローラー持って椅子に座るだけ！ VOICEROIDなどの音声合成にも対応！ LiveAvatar VRMを読み込むUI https://github.com/m2wasabi/VRMLoaderUI ソースは MITライセンスアートワークは CC0 編集自由なのでカスタマイズして使おう！ VRM Loader UI

Slide 6

Slide 6 text

続・ VRM関連で作ったもの • Looking Glass Libraryでアプリ公開してます • 疲れたときや、部屋が寒い時に、自分の好きなキャラをくるくる回すことによりGPUと一緒にあったかくなる、シンプルな癒しコンテンツです • Looking Glassをお持ちなら、自分の好きなモデルで実行してみて？モーションはグレイさんのvmdモーションを Unityに移植したもの（移植・配布許可済） https://ux.getuploader.com/m2wunity/download/1

Slide 7

Slide 7 text

今回の内容 • Mtoonの色の決まり方について話します (VRM FANBOOK 2 の内容+補足です)  透過モードについて  配色の仕組み  色空間について • モデル移植者のためのMtoon着色ガイド ※このLTで以下の内容は扱いません・影の領域判定の詳細・輪郭線の描画の詳細・法線マップ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

透過モードについて • 半透明の描画結果はメッシュの定義順と密接に関係がある  手前から描画する状況で描画に失敗するときがある  3Dなので、そういう状況は絶対ある(回転できるから) • 透過マテリアルを使うときの工夫  テクスチャ依存の完全透過部位を最小限にする(WithZWriteが活きる)  透過に透過をできるだけ重ねないようにする  半透明物体の場合、単色など重なっても気づかれないデザインにする

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

配色の仕組み • Mtoonの色の配置は大体以下の様に決まる Lit / Shade Global Illumination Emission MatCap Outline ライティングエフェクト

Slide 15

Slide 15 text

配色の仕組み • ライティングとその影響 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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

配色の仕組み • エフェクトの描画  光源に関係なく描画される要素  Emission, MatCap, Outline MatCap Emission Color Emission Texture Outline Emission MatCap補足メッシュの法線方向に従って色を塗るやつ MtoonのMatCapは加算（大事なこと）リムライト光沢

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Mtoon移植ガイド • VRMセットアップにおいて、他のシェーダ(UTS2 / ArcToon / 他) から Mtoonに移植するプロセスは避けられない  ※裏技的なものはあるけどそういうのはVRM FANBOOK2読んで！ • 元モデルの見た目を再現するときの効率の良い手順を紹介！  基本方針はこうです

Slide 20

Slide 20 text

Mtoon移植ガイド • VRMセットアップにおいて、他のシェーダ(UTS2 / ArcToon / 他) から Mtoonに移植するプロセスは避けられない  ※裏技的なものはあるけどそういうのはVRM FANBOOK2読んで！ • 元モデルの見た目を再現するときの効率の良い手順を紹介！  基本方針はこうです闇⇒光

Slide 21

Slide 21 text

Mtoon移植ガイド • 実際のワークフロー  DirLight切る、GI切る  Emissionを調整する  GI入れる  GI Intensity調整する  純白DirLight入れる  明色・影色を調整する  ShadeShift, Toony を調整する  DirLightの色を変え、回しながら微調整  MatCap調整(テクスチャの色合い調整)  他のマテリアルとのマッチング  以上をマテリアルの数だけ繰り返す

Slide 22

Slide 22 text

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Thanks for your attention おしまい！