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.2k
非デザイナーが軽率に始めるセルルック表現
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.4k
Babylon.js 7注目機能を 軽率にまとめてみる/whats-new-in-babylonjs-v7
drumath2237
1
250
軽率にVFX Graphと Compute Shaderを 組み合わせるテクニック/integrate-vfxgraph-and-compute-shader
drumath2237
1
300
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.8k
軽率にBabylon.jsを C#で使う技術 / using-babylonjs-with-csharp
drumath2237
1
740
今こそ軽率に理解したい WebXR Device APIとBabylon.jsの話 / understand-webxr-device-api-and-babylonjs
drumath2237
0
170
Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs
drumath2237
0
160
軽率にBabylon.jsの WebGPUエンジンを使って ComputeShaderに入門した / learn-about-babylonjs-webgpu-computeshader
drumath2237
0
690
Other Decks in Technology
See All in Technology
KubeCon NA 2024 Recap / Running WebAssembly (Wasm) Workloads Side-by-Side with Container Workloads
z63d
1
110
JAWS-UG 横浜支部 #76 AWS re:Invent 2024 宇宙一早い Recap LT3Amazon EKS Auto Modeと遊び(パーティ)の話
tjotjo
0
170
権威ドキュメントで振り返る2024 #年忘れセキュリティ2024
hirotomotaguchi
0
150
問題を認識して解決できる人は何でもできる
i999rri
0
120
ブラックフライデーで購入したPixel9で、Gemini Nanoを動かしてみた
marchin1989
1
140
多様なロール経験が導いたエンジニアキャリアのナビゲーション
coconala_engineer
1
180
AWS re:Invent 2024登壇資料(GBL206-JA: Unleashing the power of generative AI on AWS for your business)
minorun365
PRO
7
260
サーバレスアプリ開発者向けアップデートをキャッチアップしてきた #AWSreInvent #regrowth_fuk
drumnistnakano
0
140
2024/12/05 AITuber本著者によるAIキャラクター入門 - AITuberの基礎からソフトウェア設計、失敗談まで
sr2mg4
2
590
re:Inventで発表された Bedrockの新機能を色々使って、マルチRAGエージェントにクラウド選定させてみた件
minorun365
PRO
4
270
アジャイルテストの4象限で考える プロダクト開発の品質への向き合い方
nagano
1
980
OpsJAWS32 re:Invent 2024 Ops系アップデートまとめ
takahirohori
0
110
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.3k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Code Reviewing Like a Champion
maltzj
520
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Cost Of JavaScript in 2023
addyosmani
45
6.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
490
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