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
52k
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.8k
VRM勉強会03 VRMのバイナリを読もう -VRM一覧表示を爆速にする-
m2wasabi
1
3.4k
beef_lunch_lifestyle_tokyo
m2wasabi
2
300
Looking Glass Library に 登録しようぜ!!
m2wasabi
0
2.8k
CC0-Shapell-chan
m2wasabi
0
210
clusterとVRM
m2wasabi
0
630
Other Decks in Technology
See All in Technology
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
210
本当にわかりやすいAIエージェント入門
segavvy
8
4.4k
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
550
地図と生成AI
nakasho
0
380
Bliki (ja), and the Cathedral, and the Bazaar
koic
5
700
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
6
6.3k
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
710
PHPでResult型やってみよう
higaki_program
0
130
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
650
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
340
無理しない AI 活用サービス / #jazug
koudaiii
0
110
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
5
570
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Optimizing for Happiness
mojombo
379
70k
Writing Fast Ruby
sferik
628
62k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
RailsConf 2023
tenderlove
30
1.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
We Have a Design System, Now What?
morganepeng
53
7.7k
Embracing the Ebb and Flow
colly
86
4.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Code Reviewing Like a Champion
maltzj
524
40k
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 おしまい!