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
38k
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
5.4k
VRM勉強会03 VRMのバイナリを読もう -VRM一覧表示を爆速にする-
m2wasabi
1
3k
beef_lunch_lifestyle_tokyo
m2wasabi
2
280
Looking Glass Library に 登録しようぜ!!
m2wasabi
0
2.5k
CC0-Shapell-chan
m2wasabi
0
170
clusterとVRM
m2wasabi
0
420
Other Decks in Technology
See All in Technology
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
140
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
590
Grafana x PagerDuty Better Together
jacopen
0
100
DMM.com アルファ室採用案内資料
hsugita
1
160
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
220
Cypress or Playwright?
rainerhahnekamp
0
110
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
170
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
300
ServiceNow Knowledge Learning Rise up
manarobot
0
210
私が trocco を推す理由
__allllllllez__
1
260
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Thoughts on Productivity
jonyablonski
58
3.8k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
BBQ
matthewcrist
80
8.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Bash Introduction
62gerente
604
210k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Code Review Best Practice
trishagee
55
15k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
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 おしまい!