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

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

Slide 4

Slide 4 text

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

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

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

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