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
51k
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.7k
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
620
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
240
Model Mondays S2E02: Model Context Protocol
nitya
0
220
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
200
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
530
Agentic Workflowという選択肢を考える
tkikuchi1002
1
500
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
110
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
150
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
200
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
2
110
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
420
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
260
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Visualization
eitanlees
146
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
RailsConf 2023
tenderlove
30
1.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Balancing Empowerment & Direction
lara
1
370
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 おしまい!