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
48k
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.4k
VRM勉強会03 VRMのバイナリを読もう -VRM一覧表示を爆速にする-
m2wasabi
1
3.3k
beef_lunch_lifestyle_tokyo
m2wasabi
2
300
Looking Glass Library に 登録しようぜ!!
m2wasabi
0
2.7k
CC0-Shapell-chan
m2wasabi
0
200
clusterとVRM
m2wasabi
0
560
Other Decks in Technology
See All in Technology
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
High Performance PHP
cmuench
0
140
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
2.5Dモデルのすべて
yu4u
2
610
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
君も受託系GISエンジニアにならないか
sudataka
2
370
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
For a Future-Friendly Web
brad_frost
176
9.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Rails Girls Zürich Keynote
gr2m
94
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
We Have a Design System, Now What?
morganepeng
51
7.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
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 おしまい!