$30 off During Our Annual Pro Sale. View Details »

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

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

VRoidLT#1で登壇した資料

にー兄さん

April 12, 2020
Tweet

More Decks by にー兄さん

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. セルルックは好きですか?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  13. VRoid Studioでセルルック

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. 終わりに

    View Slide

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

    View Slide

  46. 軽率に
    VRoidを使っていこう

    View Slide

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

    View Slide