Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
MToonの着色完全に理解した
Search
m2wasabi
May 22, 2019
Technology
0
45k
MToonの着色完全に理解した
Anatomy of MToon Shader colorize
m2wasabi
May 22, 2019
Tweet
Share
More Decks by m2wasabi
See All by m2wasabi
XR Kaigi 2020 VRMで表情を こねくりまわす技術
m2wasabi
0
6.2k
VRM勉強会03 VRMのバイナリを読もう -VRM一覧表示を爆速にする-
m2wasabi
1
3.2k
beef_lunch_lifestyle_tokyo
m2wasabi
2
290
Looking Glass Library に 登録しようぜ!!
m2wasabi
0
2.6k
CC0-Shapell-chan
m2wasabi
0
190
clusterとVRM
m2wasabi
0
510
Other Decks in Technology
See All in Technology
Fargateを使った研修の話
takesection
0
120
omakaseしないための.rubocop.yml のつくりかた / How to Build Your .rubocop.yml to Avoid Omakase #kaigionrails
linkers_tech
3
740
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
220
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
APIテスト自動化の勘所
yokawasa
7
4.2k
いまさらのStorybook
ikumatadokoro
0
150
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
220
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
210
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
260
Forget efficiency – Become more productive without the stress
ufried
0
150
Featured
See All Featured
A Tale of Four Properties
chriscoyier
156
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Documentation Writing (for coders)
carmenintech
65
4.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Adopting Sorbet at Scale
ufuk
73
9k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Designing Experiences People Love
moore
138
23k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Docker and Python
trallard
40
3.1k
Transcript
MToonの着色完全に理解した VRM勉強会 #2 2019/05/22 えむにわ @m2wasabi
自己紹介 • 山本 允葵 (Masaki Yamamoto) えむにわ @m2wasabi 新しいものに何でも食いつく 雑食系野良エンジニア(フリーランス)
Web,クラウド,IoT,xR周りが飯のタネ 引っ越したいので職探し中(信用について考えさせられる日々) https://m2wasabi.booth.pm/ Boothで書いたもの⇒
自己紹介 • 山本 允葵 (Masaki Yamamoto) えむにわ @m2wasabi 新しいものに何でも食いつく 雑食系野良エンジニア(フリーランス)
Web,クラウド,IoT,xR周りが飯のタネ 引っ越したいので職探し中(信用について考えさせられる日々) https://m2wasabi.booth.pm/ Boothで書いたもの⇒ 無料になった!
自己紹介 • 山本 允葵 (Masaki Yamamoto) えむにわ @m2wasabi 新しいものに何でも食いつく 雑食系野良エンジニア(フリーランス)
Web,クラウド,IoT,xR周りが飯のタネ 引っ越したいので職探し中(信用について考えさせられる日々) https://m2wasabi.booth.pm/ Boothで書いたもの☝ 無料になった!
VRM関連で作ったもの OSSのアバターパペットツール https://github.com/m2wasabi/LiveAvatar 身につける装備なしで使える! バーチャル対面コミュニケーション 守衛のおじさん や 受付けのお姉さん アップデートしていいんだよ! 設置はシンプル!
Viveコントローラー持って 椅子に座るだけ! VOICEROIDなどの音声合成にも対応! LiveAvatar VRMを読み込むUI https://github.com/m2wasabi/VRMLoaderUI ソースは MITライセンス アートワークは CC0 編集自由なのでカスタマイズして使おう! VRM Loader UI
続・ VRM関連で作ったもの • Looking Glass Libraryでアプリ公開してます • 疲れたときや、部屋が寒い時に、自分の好きな キャラをくるくる回すことによりGPUと一緒に あったかくなる、シンプルな癒しコンテンツです
• Looking Glassをお持ちなら、自分の好きなモデル で実行してみて? モーションはグレイさんのvmdモーションを Unityに移植したもの(移植・配布許可済) https://ux.getuploader.com/m2wunity/download/1
今回の内容 • Mtoonの色の決まり方について話します (VRM FANBOOK 2 の内容+補足です) 透過モードについて
配色の仕組み 色空間について • モデル移植者のためのMtoon着色ガイド ※このLTで以下の内容は扱いません ・影の領域判定の詳細 ・輪郭線の描画の詳細 ・法線マップ
透過モードについて • 半透明の描画結果はメッシュの定義順と密接に関係がある
透過モードについて • 半透明の描画結果はメッシュの定義順と密接に関係がある イケてるレンダリング結果 イケてないレンダリング結果
透過モードについて • 半透明の描画結果はメッシュの定義順と密接に関係がある 奥からレンダリングされる場合 手前からレンダリングされる場合
透過モードについて • 半透明の描画結果はメッシュの定義順と密接に関係がある 奥からレンダリングされる場合 手前からレンダリングされる場合 上書き! 手前にメッ シュあるし 抜きだな
透過モードについて • 半透明の描画結果はメッシュの定義順と密接に関係がある 手前から描画する状況で描画に失敗するときがある 3Dなので、そういう状況は絶対ある(回転できるから) • 透過マテリアルを使うときの工夫
テクスチャ依存の完全透過部位を最小限にする(WithZWriteが活きる) 透過に透過をできるだけ重ねないようにする 半透明物体の場合、単色など重なっても気づかれないデザインにする
配色の仕組み • Mtoonの色の配置は大体以下の様に決まる Lit / Shade Global Illumination Emission MatCap
Outline
配色の仕組み • Mtoonの色の配置は大体以下の様に決まる Lit / Shade Global Illumination Emission MatCap
Outline ライティング エフェクト
配色の仕組み • ライティングとその影響 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
配色の仕組み • エフェクトの描画 光源に関係なく描画される要素 Emission, MatCap, Outline MatCap
Emission Color Emission Texture Outline Emission
配色の仕組み • エフェクトの描画 光源に関係なく描画される要素 Emission, MatCap, Outline MatCap
Emission Color Emission Texture Outline Emission MatCap補足 メッシュの法線方向に従って色を塗るやつ MtoonのMatCapは加算(大事なこと) リムライト 光沢
Σ MatCap Outline Lit Shadow GI Emission 配色の仕組み 完成!!
Mtoon移植ガイド • VRMセットアップにおいて、他のシェーダ(UTS2 / ArcToon / 他) から Mtoonに移植するプロセスは避けられない
※裏技的なものはあるけどそういうのはVRM FANBOOK2読んで! • 元モデルの見た目を再現するときの効率の良い手順を紹介! 基本方針はこうです
Mtoon移植ガイド • VRMセットアップにおいて、他のシェーダ(UTS2 / ArcToon / 他) から Mtoonに移植するプロセスは避けられない
※裏技的なものはあるけどそういうのはVRM FANBOOK2読んで! • 元モデルの見た目を再現するときの効率の良い手順を紹介! 基本方針はこうです 闇⇒光
Mtoon移植ガイド • 実際のワークフロー DirLight切る、GI切る Emissionを調整する GI入れる
GI Intensity調整する 純白DirLight入れる 明色・影色を調整する ShadeShift, Toony を調整する DirLightの色を変え、回しながら微調整 MatCap調整(テクスチャの色合い調整) 他のマテリアルとのマッチング 以上をマテリアルの数だけ繰り返す
Mtoon移植ガイド • 実際のワークフロー DirLight切る、GI切る Emissionを調整する GI入れる
GI Intensity調整する 純白DirLight入れる 明色・影色を調整する ShadeShift, Toony を調整する DirLightの色を変え、回しながら微調整 MatCap調整(テクスチャの色合い調整) 他のマテリアルとのマッチング 以上をマテリアルの数だけ繰り返す 実際にやってみよう(時間と相談)
まとめ • MToonの色の付け方の仕組みを完全に理解した! • 他のシェーダからMtoonへの移植手順も理解した • よりDeepな話はVRM FANBOOK2読んでみてね https://m2wasabi.booth.pm/items/1270343
Thanks for your attention おしまい!