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
非デザイナーが軽率に始めるセルルック表現
Search
にー兄さん
April 12, 2020
Technology
2
1.3k
非デザイナーが軽率に始めるセルルック表現
VRoidLT#1で登壇した資料
にー兄さん
April 12, 2020
Tweet
Share
More Decks by にー兄さん
See All by にー兄さん
UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった / create CLI with UnJS
drumath2237
4
1.4k
create-babylon-appを軽率にアプデしたい / update create babylon app
drumath2237
1
1.5k
Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7
drumath2237
1
290
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック/integrate-vfxgraph-and-compute-shader
drumath2237
1
360
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.9k
軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp
drumath2237
1
820
今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs
drumath2237
0
200
Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs
drumath2237
0
180
軽率にBabylon.jsの WebGPUエンジンを使って ComputeShaderに入門した / learn-about-babylonjs-webgpu-computeshader
drumath2237
0
750
Other Decks in Technology
See All in Technology
顧客の声を集めて活かすリクルートPdMのVoC活用事例を徹底解剖!〜プロデザ!〜
recruitengineers
PRO
0
150
GDG Tokyo 生成 AI 論文をわいわい読む会
enakai00
0
260
Microsoft Ignite 2024 最新情報!Microsoft 365 Agents SDK 概要 / Microsoft Ignite 2024 latest news Microsoft 365 Agents SDK overview
karamem0
0
180
アクセシブルなマークアップの上に成り立つユーザーファーストなドロップダウンメニューの実装 / 20250127_cloudsign_User1st_FE
bengo4com
2
1.1k
Mocking your codebase without cursing it
gaqzi
0
140
タイミーのデータ活用を支えるdbt Cloud導入とこれから
ttccddtoki
2
470
あなたの興味は信頼性?それとも生産性? SREとしてのキャリアに悩むみなさまに伝えたい選択肢
jacopen
5
2.3k
reinvent2024を起点に振り返るサーバーレスアップデート
mihonda
1
180
2週に1度のビッグバンリリースをデイリーリリース化するまでの苦悩 ~急成長するスタートアップのリアルな裏側~
kworkdev
PRO
8
6k
ObservabilityCON on the Road Tokyoの見どころ
hamadakoji
0
150
第27回クラウド女子会 ~re:Invent 振り返りLT会~ 私の周辺で反響のあった re:Invent 2024 アップデートつれづれ/reinvent-2024-update-reverberated-around-me
emiki
1
570
Zenn のウラガワ ~エンジニアのアウトプットを支える環境で Google Cloud が採用されているワケ~ #burikaigi #burikaigi_h
kongmingstrap
4
1.7k
Featured
See All Featured
Site-Speed That Sticks
csswizardry
3
300
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Unsuck your backbone
ammeep
669
57k
Thoughts on Productivity
jonyablonski
68
4.4k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Faster Mobile Websites
deanohume
305
30k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
GraphQLとの向き合い方2022年版
quramy
44
13k
Writing Fast Ruby
sferik
628
61k
Transcript
非デザイナーが 軽率に始める セルルック表現 にー兄さん(@ninisan_drumath) VRoidLT#1 in cluster
にー兄さん(@ninisan_drumath) 筑波大学 情報科学類 新3年 Humanoid制御, モーションキャプチャ, xR, 3DCG, Web, 言語処理系
好きなことを好きな時に開発しています 最近VRoid熱が再加熱したタイミングでこのイベントを発見 →clusterにハマってしまい、引きこもりが加速している
こちらのスライドは公開します (たぶんSpeakerDeck)
スライドや資料動画など SNSへの投稿はOKです (むしろ共有・コメントなどして頂けると泣いて喜びます )
初心者が作った資料です アドバイス等お待ちしております
agenda ❖ セルルックはお好きですか? ❖ VRoid Studioでセルルック ❖ 3DCGレンダラー”Unity”について
セルルックは好きですか?
私は好きです。うn あえて情報を欠落させることで生まれる”安心感” フォトリアルとはまた違った”味” 3Dキャラクターに宿った一種の”温もり” それ全部同じ事...
そもそもセルルックとは セル画のような質感を実現する表現方法の一つ NPRシェーダを使うことでパキッとした影を演出⇄PBR フル3Dアニメやゲームなどで用いられる ゼルダの伝説ブレスオブザワイルド 3rdトレーラーより 宝石の国より HELLO WORLDより 東雲めぐTwitterより
今トゥーンシェーダがアツい[要出典] Uniteでセルルックやアニメ風レンダリングに関する講演が多数行 われている (きっと2020でもたくさん見られるだろうなぁ(願望))
セルルックを作るには? トゥーンシェーダで作られたマテリアルを作る必要がある 主要なトゥーンシェーダは • MToon←VRMで標準的に使われる • UTS2.0(Unity-chan Toon Shader) もちろん自作もできる
セルとトゥーンとNPR(時間があったら解説) 厳密な定義はなさそう 1種の解釈の手助けとなれば NPR :PBRとは違い、非現実的な表現をするための考え方 トゥーン :NPRとほぼ同義で使われる? セルルック:トゥーンの中でさらにセル画に寄せた表現
VRoid Studioでセルルック
セルルックを構成する要素 主に以下の3つ • 陰影 • アウトライン • リムライト
シェーダに関するアップデートによって、 VRoidだけでMToonの設定がほぼ完結するように VRoid Studio v0.7系からv0.8系の変更 VRoid Studioリリースノートより引用
シンプルに衣装はワンピースを選択 デフォルトのキャラをセルルックに作りこむ
[共通設定]>[アウトライン]から 髪、顔、体の3つのマテリアルのアウトライン幅を設定 アウトラインの色は設定できないらしい [共通設定]>[リムライト]から 髪、顔、体の3つのマテリアルのリムライトを設定 ライトの輝度、フレネルの強さなど設定不可 陰影、アウトライン、リムライトを設定
[共通設定]>[陰影]から 髪、顔、体の3つのマテリアルの影入りの幅と影の硬さを設定 [影の硬さ]が1.0に近いほど 影がパキパキになってセルルックっぽくなる 影色の指定は各種テクスチャ設定からできる 陰影、アウトライン、リムライトを設定
目指している表現とはちょっと違う気が... VRoidっぽさが残っている セルルックに設定したけど...。
デフォルトは色々書きこまれている(影や服のシワなど) →VRoidのいい所でもある →VRoidっぽさを増幅させる点でもある 解決策:テクスチャを変える
肌、服、髪を塗りつぶしてみる(絵が描けないので塗りつぶす) テクスチャ変更1
テクスチャ変更1 ちょっと印象変わった気がする
目の周りのテクスチャを変更 (特に日本人)目はキャラクターの印象を決定する重要な要素 アイラインや眉毛は カットアウトをかけることで階調を減らす まつ毛は最悪なくていいかも[要出典] テクスチャ変更2
瞳テクスチャ描けない...いったいどうすれば... →無理せずBOOTHで買う アニメ風テクスチャは結構売ってる 無料配布も多数 →依頼する 絵が描ける人が周りにいると優勝できる テクスチャ変更3
制服衣装で作っている人は MuRoさんの「アニメ風テクスチャ」がおすすめ テクスチャ変更3’
テクスチャ変更 +ちょっと髪を生やしてみる +ポストプロセッシング 欲しい画になってきた 結果
紹介したセオリーを踏んで 作ってみたうちの子、”Sphyr” 瞳は友人に頼んで描いてもらい、 アイラインはBOOTHで購入したものを使用 現在v1.2 時間があれば ”うちの子”自慢
最初に作ったものと見比べ 時間があれば ”うちの子”自慢
3DCGレンダラー"Unity"について
言わずと知れた”リアルタイム・3DCGレンダラー” 映像作品やVRアプリなど、様々なインタラクティブ・コンテンツの作成 が可能 なんと最近はゲームも作れる!() Unityとは(哲学)
UniVRMによってインポートが楽にできる VRoid Studioではできない設定ができたり、 アニメーションさせたりゲームにしてみたり、、、 Unityによって可能性が広がる リアルタイムプレビューができる →画作りが捗る Unityをレンダラとして使っちゃおう! 冗談はさておき...
ということで Unity+VRoidで セルルック表現を実装する
各種バージョンを以下に示す Unity:2019.3.1 UniVRM:0.55.0 VRoid Studio:0.8.3(warningが出るけど一応動く) UniVRMのバージョンによって Avatarアセットの取り扱い方(子プレハブか外部参照か)が変わってく るので注意 作業環境
• カラースペースをLinearにする • Directional Lightの色を白色にする • カメラのFoVを下げる ◦ モデル単体だと15くらいが可愛く映る ◦
背景込みだと30くらい?(場合による) 肌の色や陰影を確認する上で重要 Unityで画作りをするうえでやっておくこと
Bias値を上げると良い陰が落ちることがある →乱用に注意 有識者の方、よかったらご教示いただきたいです... LightのBiasについて bias:0.05 bias:0.2
VRoid Studioではできない設定ができる! →そもそもMToonの強力な機能群を備えている →各種マップの設定やMatCap、UV操作などができる マテリアルをさらに調整していく
陰は形状を表現する→立体感 キャラクターに落ちる陰 円筒形を表現 ふくらみを表現 丸みを表現
インタラクティブコンテンツ →細心の注意が必要 下手に忠実な陰が落ちると 印象を悪くすることがある • ShadingShiftと ShadowReceiveを下げる • 影色をメインと同じにする cluster用アバターもそうしてます
顔に落ちる陰
ちょっと髪の陰がコッテリしてる(個人の意見) →NormalMapを無効にする 髪に落ちる陰 髪に設定してあるNormalMap
Post-Processing stack v2によるポスプロ
Post-Processing stack v2によるポスプロ
色々方法はある... なるべく無料でやりたい • Tポーズ+AnimationRiggingで 四肢のIK制御と視線制御 • とりすーぷさん謹製FingerController で指制御 • BlendShapeProxyで表情制御
Unityでポーズをつけて撮影したい(時間があれば話す)
ただうちの子が散歩するだけ 使用アセット一覧 • AnimationRigging • Cinemachine • Post-Processing stack v2
• UniVRM • Anime Girl Idle Animations Free • RPG Poly Pack Lite • Fantasy Skybox FREE • Aura2 デモ動画
終わりに
VRoid Studioだけでセルルックなキャラクターが作れた →実際すごい感動している Unityと併用→真価を発揮 ホントはUTSとかSRPの話もしたかった...(電池切れ 終わりに
軽率に VRoidを使っていこう
ご清聴 ありがとう ございました にー兄さん Twitter: @ninisan_drumath GitHub: @drumath2237