非デザイナーが軽率に始めるセルルック表現

by にー兄さん

Slide 1

Slide 1 text

非デザイナーが軽率に始めるセルルック表現にー兄さん(@ninisan_drumath) VRoidLT#1 in cluster

Slide 2

Slide 2 text

にー兄さん(@ninisan_drumath) 筑波大学情報科学類新3年 Humanoid制御, モーションキャプチャ, xR, 3DCG, Web, 言語処理系好きなことを好きな時に開発しています最近VRoid熱が再加熱したタイミングでこのイベントを発見 →clusterにハマってしまい、引きこもりが加速している

Slide 3

Slide 3 text

こちらのスライドは公開します (たぶんSpeakerDeck)

Slide 4

Slide 4 text

スライドや資料動画など SNSへの投稿はOKです (むしろ共有・コメントなどして頂けると泣いて喜びます )

Slide 5

Slide 5 text

初心者が作った資料ですアドバイス等お待ちしております

Slide 6

Slide 6 text

agenda ❖ セルルックはお好きですか？ ❖ VRoid Studioでセルルック ❖ 3DCGレンダラー”Unity”について

Slide 7

Slide 7 text

セルルックは好きですか？

Slide 8

Slide 8 text

私は好きです。うｎあえて情報を欠落させることで生まれる”安心感” フォトリアルとはまた違った”味” 3Dキャラクターに宿った一種の”温もり” それ全部同じ事...

Slide 9

Slide 9 text

そもそもセルルックとはセル画のような質感を実現する表現方法の一つ NPRシェーダを使うことでパキッとした影を演出⇄PBR フル3Dアニメやゲームなどで用いられるゼルダの伝説ブレスオブザワイルド 3rdトレーラーより宝石の国より HELLO WORLDより東雲めぐTwitterより

Slide 10

Slide 10 text

今トゥーンシェーダがアツい[要出典] Uniteでセルルックやアニメ風レンダリングに関する講演が多数行われている (きっと2020でもたくさん見られるだろうなぁ(願望))

Slide 11

Slide 11 text

セルルックを作るには？トゥーンシェーダで作られたマテリアルを作る必要がある主要なトゥーンシェーダは ● MToon←VRMで標準的に使われる ● UTS2.0(Unity-chan Toon Shader) もちろん自作もできる

Slide 12

Slide 12 text

セルとトゥーンとNPR(時間があったら解説) 厳密な定義はなさそう 1種の解釈の手助けとなれば NPR　　　：PBRとは違い、非現実的な表現をするための考え方トゥーン　：NPRとほぼ同義で使われる？セルルック：トゥーンの中でさらにセル画に寄せた表現

Slide 13

Slide 13 text

VRoid Studioでセルルック

Slide 14

Slide 14 text

セルルックを構成する要素主に以下の3つ ● 陰影 ● アウトライン ● リムライト

Slide 15

Slide 15 text

シェーダに関するアップデートによって、 VRoidだけでMToonの設定がほぼ完結するように VRoid Studio v0.7系からv0.8系の変更 VRoid Studioリリースノートより引用

Slide 16

Slide 16 text

シンプルに衣装はワンピースを選択デフォルトのキャラをセルルックに作りこむ

Slide 17

Slide 17 text

[共通設定]＞[アウトライン]から髪、顔、体の3つのマテリアルのアウトライン幅を設定アウトラインの色は設定できないらしい [共通設定]＞[リムライト]から髪、顔、体の3つのマテリアルのリムライトを設定ライトの輝度、フレネルの強さなど設定不可陰影、アウトライン、リムライトを設定

Slide 18

Slide 18 text

[共通設定]＞[陰影]から髪、顔、体の3つのマテリアルの影入りの幅と影の硬さを設定 [影の硬さ]が1.0に近いほど影がパキパキになってセルルックっぽくなる影色の指定は各種テクスチャ設定からできる陰影、アウトライン、リムライトを設定

Slide 19

Slide 19 text

目指している表現とはちょっと違う気が... VRoidっぽさが残っているセルルックに設定したけど...。

Slide 20

Slide 20 text

デフォルトは色々書きこまれている(影や服のシワなど) →VRoidのいい所でもある →VRoidっぽさを増幅させる点でもある解決策：テクスチャを変える

Slide 21

Slide 21 text

肌、服、髪を塗りつぶしてみる(絵が描けないので塗りつぶす) テクスチャ変更１

Slide 22

Slide 22 text

テクスチャ変更１ちょっと印象変わった気がする

Slide 23

Slide 23 text

目の周りのテクスチャを変更 (特に日本人)目はキャラクターの印象を決定する重要な要素アイラインや眉毛はカットアウトをかけることで階調を減らすまつ毛は最悪なくていいかも[要出典] テクスチャ変更２

Slide 24

Slide 24 text

瞳テクスチャ描けない...いったいどうすれば... →無理せずBOOTHで買うアニメ風テクスチャは結構売ってる無料配布も多数 →依頼する絵が描ける人が周りにいると優勝できるテクスチャ変更３

Slide 25

Slide 25 text

制服衣装で作っている人は MuRoさんの「アニメ風テクスチャ」がおすすめテクスチャ変更３’

Slide 26

Slide 26 text

テクスチャ変更＋ちょっと髪を生やしてみる＋ポストプロセッシング欲しい画になってきた結果

Slide 27

Slide 27 text

紹介したセオリーを踏んで作ってみたうちの子、”Sphyr” 瞳は友人に頼んで描いてもらい、アイラインはBOOTHで購入したものを使用現在v1.2 時間があれば ”うちの子”自慢

Slide 28

Slide 28 text

最初に作ったものと見比べ時間があれば ”うちの子”自慢

Slide 29

Slide 29 text

3DCGレンダラー"Unity"について

Slide 30

Slide 30 text

言わずと知れた”リアルタイム・3DCGレンダラー” 映像作品やVRアプリなど、様々なインタラクティブ・コンテンツの作成が可能なんと最近はゲームも作れる！（） Unityとは(哲学)

Slide 31

Slide 31 text

UniVRMによってインポートが楽にできる VRoid Studioではできない設定ができたり、アニメーションさせたりゲームにしてみたり、、、 Unityによって可能性が広がるリアルタイムプレビューができる →画作りが捗る Unityをレンダラとして使っちゃおう！冗談はさておき...

Slide 32

Slide 32 text

ということで Unity＋VRoidでセルルック表現を実装する

Slide 33

Slide 33 text

各種バージョンを以下に示す Unity：2019.3.1 UniVRM：0.55.0 VRoid Studio：0.8.3(warningが出るけど一応動く) UniVRMのバージョンによって Avatarアセットの取り扱い方(子プレハブか外部参照か)が変わってくるので注意作業環境

Slide 34

Slide 34 text

● カラースペースをLinearにする ● Directional Lightの色を白色にする ● カメラのFoVを下げる ○ モデル単体だと15くらいが可愛く映る ○ 背景込みだと30くらい？(場合による) 肌の色や陰影を確認する上で重要 Unityで画作りをするうえでやっておくこと

Slide 35

Slide 35 text

Bias値を上げると良い陰が落ちることがある →乱用に注意有識者の方、よかったらご教示いただきたいです... LightのBiasについて bias:0.05 bias:0.2

Slide 36

Slide 36 text

VRoid Studioではできない設定ができる！ →そもそもMToonの強力な機能群を備えている →各種マップの設定やMatCap、UV操作などができるマテリアルをさらに調整していく

Slide 37

Slide 37 text

陰は形状を表現する→立体感キャラクターに落ちる陰円筒形を表現ふくらみを表現丸みを表現

Slide 38

Slide 38 text

インタラクティブコンテンツ →細心の注意が必要下手に忠実な陰が落ちると印象を悪くすることがある ● ShadingShiftと ShadowReceiveを下げる ● 影色をメインと同じにする cluster用アバターもそうしてます顔に落ちる陰

Slide 39

Slide 39 text

ちょっと髪の陰がコッテリしてる(個人の意見) →NormalMapを無効にする髪に落ちる陰髪に設定してあるNormalMap

Slide 40

Slide 40 text

Post-Processing stack v2によるポスプロ

Slide 41

Slide 41 text

Post-Processing stack v2によるポスプロ

Slide 42

Slide 42 text

色々方法はある... なるべく無料でやりたい ● Tポーズ＋AnimationRiggingで四肢のIK制御と視線制御 ● とりすーぷさん謹製FingerController で指制御 ● BlendShapeProxyで表情制御 Unityでポーズをつけて撮影したい(時間があれば話す)

Slide 43

Slide 43 text

ただうちの子が散歩するだけ使用アセット一覧 ● AnimationRigging ● Cinemachine ● Post-Processing stack v2 ● UniVRM ● Anime Girl Idle Animations Free ● RPG Poly Pack Lite ● Fantasy Skybox FREE ● Aura2 デモ動画

Slide 44

Slide 44 text

終わりに

Slide 45

Slide 45 text

VRoid Studioだけでセルルックなキャラクターが作れた →実際すごい感動している Unityと併用→真価を発揮ホントはUTSとかSRPの話もしたかった...(電池切れ終わりに

Slide 46

Slide 46 text

軽率に VRoidを使っていこう

Slide 47

Slide 47 text

ご清聴ありがとうございましたにー兄さん Twitter: @ninisan_drumath GitHub: @drumath2237