【VRChat】Hitogataから出力して作ったアバターモデルにトゥーンシェーダーを当てていい感じにする

VRChat を始めて2つ目のアバターとして Hitogata から FBX 出力して Unity に読み込んだモデルでアバターを作りました（参考: 前のエントリ の最後の方のSS）

ユニティちゃんトゥーンシェーダーを適用して色々弄ったところ、意外といい感じになったので、粗を直すついでに、手軽に自分のオリジナルアバターを欲しい人向けに作業内容をまとめておきます

更新履歴

• 2018-08-12: 公開

はじめに

このエントリでは、以下のことについて書いています

• Hitogata から出力した FBX データへ Unity 上でユニティちゃんトゥーンシェーダーを適用して見た目を調整する

逆に、以下のことについては書いていません

• Unity 5.6.3p1 のインストール方法、 VRChat SDK のインポート方法及び、VRChat へのアバターのアップロード方法
  • VRChat Wiki アバターの作成 等を参考にしてください
  • 慣れるまでは少し大変ですが、自分でアバターをアップロードする場合には誰もが通る道なので、頑張ってください
• 画像編集ソフトの手に入れ方、色調補正の方法、データの保存方法
  • 影テクスチャー用の画像を編集しなければならないので、各自自分で用意してください
  • 高度な編集を行うわけではないので、フリーソフトで十分だと思います
  • 自分はたまたま ClipStudio を持ってたので、それを使っています
• Hitogata で3Dモデルを作り、出力する方法
  • Hitogata のドキュメント を見ながら対応してください
  • なお、データ出力は FBX 形式で出力してください
• Hitogata を VRChat にアップロードできるように調整する方法
  • Hitogataの3DモデルをVRChatにもっていく を参考に、ポリゴン数の削減、設定等を行ってください
• アニメーションオーバーライドで表情をつける方法(Optional)
  • Hitogata から出力されたモデルには BlendShapes が設定されているので、表情変化やリップシンクを設定することが可能です
  • アニメーションオーバーライドで表情をつけよう 等を参考に、つけてみてください

以上を踏まえて

3Dモデリングはできないけど、こんな感じの自分専用アバター

が欲しい！と思う人は読み進めてみてください

なお、 Hitogata は Readme_JPN.txt に以下の記載があるので、 Hitogata から出力したモデルをアバターとして用いることには問題ないようです（自分がライセンスの記述を探すのに時間がかかったので、念の為）

当ソフトウェアを利用して作成されたモデル・モーション・動画については、商用・非商用問わず制限なく利用することが可能です。

なお当ソフトウェアを利用して作ったキャラクターについて、当ソフトウェア開発者から権利を主張することはありません。
例えば、バーチャルYouTuberの"山田太郎"として活動された場合に、"山田太郎"というキャラクターはご自身が権利者となります。

大変ありがたい…ドネーションボタンどこ…

必要なもの

特別な機材は必要ないですが、一応書いておきます

• Hitogata
  • 自分は 2018-08-12 現在で最新の Hitogata beta 2.20 を使ってこの記事を書いています
• png 入力/出力ができて色調補正ができる画像編集ソフト
• アバターをアップロードできる環境
  • Unity や VRChat SDK 等

参考URL

以下のページを参考にさせて頂き、ここまで辿り着いています。ありがとうございます

• Hitogata
• Hitogataの3DモデルをVRChatにもっていく: ららら雑記帳
• 【Unity】ユニティちゃんトゥーンシェーダーについて: CG METHOD

作業説明

前置きが長くなりました。ここから作業内容を説明していきます

Hitogata で自分が使いたいモデルを作り FBX 形式で出力する

先述の通り詳細は省きますが、頑張って作ります

モデルの色合いなどは後から調整できますが、形はほぼここで決まるので、じっくり作ってください

注意点は以下

• アバターに色々なパーツをつけすぎると、ポリゴン数が増えすぎて削減時に汚くなりやすくなります。程々に
• 長いスカートなどを履かせた場合、ダイナミックボーンなどを使って頑張らないと足がスカートを貫通します。対応方法がわからない方はミニスカートやズボンを選択してください

FBX を出力した時点でテクスチャー素材も出力されるので、フォルダにまとめるなどしておいてください

Unity に読み込んで一通り基本の設定する

出力した FBX 及びテクスチャー素材をまとめて Unity のフォルダーに入れます

この時、自動的に Materials フォルダが作成されます。この Materials フォルダ内のマテリアルに適用されているシェーダーが全て Standard シェーダーなので、 Hitogata 上で見た感じと Unity に取り込んで表示したときとで大分見た目が変わってしまいます

これが…(Hitogata で見たとき)

 
こうじゃ！(Unityにインポートしてシーンに配置。怖い）

とりあえず、いつものリグ周りの設定をしてしまいます。Hitogata のモデルは hand_l と hand_r の設定だけ直せばあとはだいたい大丈夫なはずです（わからない方は Hitogataの3DモデルをVRChatにもっていく や参考URLなどを参照してください）

 

今回は説明しないですが、後々リップシンクを設定する時に邪魔になるので、 Head の Jaw も外して None にしておきます

 

一通り終わったら Apply します

Hitogataの3DモデルをVRChatにもっていく を参考に、スケールの調整、ポリゴン数の削減、視点の調整なども行ってください

ユニティちゃんトゥーンシェーダー 2.0 の適用と絵作り

ここからが本題です

まず、各テクスチャー毎に対応する影用のテクスチャーを作成します。Unityに取り込んだ各素材を画像編集ソフトで開き、色調補正をして影用の色を作り、別名で保存します（とりあえず末尾に _shade や _shade1 等をつけて保存しています）

影テクスチャーは2段階設定できますが、1段階だけでもそれっぽくはなるので、1種類作るだけでも大丈夫です（参考: 【Unity】ユニティちゃんトゥーンシェーダーについて）

この時、単に明るさやコントラストを落として暗くして影テクスチャーを作るのではなく、色調を変えて、彩度を上げて、明るさは少しだけ落とす感じに作るとそれっぽくなります（このあたりは、実際にテクスチャーを設定してみて、モデルを眺めて、また色合いを変えてと試行錯誤するところなので、この時点ではそれほど気にしなくても大丈夫です）

こんな感じ（髪のテクスチャーの色調補正例）

次に、 unity-chann official website の DATA DOWNLOAD ページ から、 ユニティちゃんトゥーンシェーダー2.0 をダウンロードし、案内に従って Unity へインポートしてください（自分は 2018/08/11 現在で最新の v2.0.4.1 を使っています）

最後に、先程 FBX ファイルを入れた時に生成された Material に適用されている Shader をユニティちゃんトゥーンシェーダーに差し替えて、テクスチャーやカラーを設定していきます

この時、Material の種類ごとに適用するシェーダーやパラメーターを調整していくのですが、モデルを作成した時につけたパーツの数や種類によってマテリアル名に差が出るようなので、各マテリアルがどの部分に適用されているのかについては、 ON/OFF を切り替えたり、 Albedo の色合いを切り替えたりして、なんとか判別してください

例えばこうすると material0 はまつげ部分っぽいことが分かる…

 
わかりやすいように、 Material 名も変えてしまうと後から判別しやすくなって楽だと思います

シェーダーの差し替えは、基本的にテクスチャーが用意されているマテリアルは Toon_DoubleShaderWithFeather に、テクスチャーが無いものは NoOutline/ToonColor_DoubleShadeWithFeather_Clipping_OnlyColor に差し替えています

BaseMap にはデフォルトのテクスチャー、1st_ShadeMap 、2nd_ShadeMap には先ほど作成した影テクスチャーを設定してください。OnlyColor の方も BaseColor、 1st_ShadeColor 、 2nd_ShadeColor を対応する色に設定します（このときも影の色合いは考えつつ）


例外として、まつげは Unlit/Color で単色に、頬紅は Unlit/Transparent に設定して透明を有効にして浮かせるか、 Standard シェーダーのまま Rendering Mode を Transparent 等にして、 Albedo のアルファを 0 にして見えなくしてしまったりしています（おそらく頬紅は表情に合わせて表示したり消したりするのが良いと思うのですが、まだ調整したことがないです..）

シェーダーの各パラメーターは、例えば髪のマテリアルについてはこんな感じに設定してみました（設定する項目は 【Unity】ユニティちゃんトゥーンシェーダーについて を参考にしつつ、値は色々変えています。 Outline_Width 等はスケールが違うからか、かなり小さくしないとおかしくなります）

気をつける点として、顔に影が入りすぎると可愛くなくなるので、肌のマテリアルの BaseColor_Step はかなり低くしてしまった方が良いです。また、指を曲げたときなどにアウトラインが変に入ってしまうので、 Outline_Width も低くしてしまってください
 
参考）肌のパラメーター設定例

また、細いパーツ（メガネ等）のアウトラインは無くしてしまったほうが良いようです
 
あとは、ひたすらテクスチャの色調補正と、シェーダーのパラメーターを弄り倒して、いい感じのパラメーターに調整します

Direction Light の角度を変更して光源を回転させ、影の付き方も確認しましょう

ここまで来たら一旦 VRChat にアップロードして、使ってみるのも良いと思います。中で実際に使ってみて気づくところも多いです

ということで大体完成

 

まとめ

簡単にユニティちゃんトゥーンシェーダーで Hitogata で作って出力したモデルの見た目を調整する流れを書きました

• 影シェーダーはそのまま暗くするのではなく、色調を変えて、彩度を上げて、そのあと少しだけ明るさを下げて作ると、なんか良い感じになる
• 肌のシェーダーの影やアウトラインは殆ど付けないように低く設定する

あたりに気をつけながらやると、それっぽくなると思います

この先、とりあえずやることとしては

• アニメーションオーバーライドで表情をつけよう 等を参考に表情を着ける
• アバターのリップシンクの作成 VRChat Wiki 等を参考にリップシンクをつける
• 表示非表示を切り替えられるオブジェクトをくっつけて遊ぶ

あたりがハードル低いと思います（自分でもできたので）

とりあえず自分だけのアバターができると、色々試すモチベーションが上がると思うので、最初の一歩として Hitogata + シェーダー差し替え は見た目も良いし、表情もすぐ付けられるしで良いのでは、と思います

以上