VRoidでキャラを作ってみる！

2019.10.04
これはそこそこ古い内容です。
UIなどが変わっている可能性があります。
また、おまけに MMD モデルに変換する方法を書いていましたが、もっと楽なのが出てました。
https://www.nicovideo.jp/watch/sm34705374
天才か。

-----------------

去年のアドベントカレンダーでは自分でイラストを動かすことができるLive2Dを紹介しました。
[Live2Dで弊社部長をうごかしてみる](https://qiita.com/konightich/items/cd23bdd8169b62fd609e)
今年は、夏に3Dモデルを作ることができる、VRoidが公開されたので、その紹介をしようと思います。

前回と同じく
「イラストを描いたりするけど、3Dモデルは敷居が高い…。」
「キャラモデルを作ったりしてみたいけど、BlenderとかMayaとかは難しい…。」
そんな私のような人向けなので、Unityと連携させる！バリバリつくる！って人にはあんまり意味のない記事になります…。

#使用ツール
- ペンタブ（髪を書きやすい）
- [VRoid Studio](https://vroid.pixiv.net/index.html)

**※この記事で使用しているVRoidバージョンはv0.3です。**
**この間v0.4が配布され、髪のボーン入れなどが追加されましたが、その項目については触れていません。**
**また、現在配布されているVRoidは開発継続中のベータ版で、頻繁にアップデートされています。DLされたバージョンが違う場合、機能が大きく異なることがありますのでご了承ください。**

#VRoid Studioとは

ピクシブ株式会社が2018.8.3に一般公開した、人型キャラクターの3Dモデル作成アプリケーションです。
従来のモデリングは、ポリゴンを変形させたり、そのポリゴンにテクスチャをつけたりしながら、モデルを作っていくもので、モデリングの知識が必要でした。
VRoid Studioでは、すでにデフォルトの人型が用意されていて、それに付随するパラメータ（目の位置をもう少し上、など）を調整することで、モデリングの知識がなくても比較的自由度の高いモデルを作成することができます。

#全体的な流れ
1. 顔・体のパラメーターを調整する
2. 顔・体のテクスチャに描き加える

#基本的な操作方法
モデルやテクスチャの操作は以下の通りです。

|内容|ショートカット|
|----|---------|
|回転|右ドラッグ|
|画面移動|Shift+左ドラッグ<br>space+左ドラッグ|
|拡大・縮小|ホイール|

#顔・体のパラメーターを調整する
「Face Editer・Body Editor」タブの「Design」で調整ができます。
調整は全てシークバーを動かす形なので、簡単に調整することができます！
ここは何の項目がどこの調整になると説明を聞くよりも、実際にバーを動かした方がわかるかと思うので割愛します。

#顔・体のテクスチャに描き加える
モデルには部位ごとにテクスチャというものが貼られています。
例えば、目だったら、瞳が描かれた紙を球体に貼り付けているような形です。
本来は別のソフトでテクスチャを用意・読み込む必要があるのですが、VRoidでは直接描き込むことができます！
モデルにもすぐ反映するので、どういった感じになるかすぐにわかります。

##編集画面の説明
![VRoidStudio1.png](https://qiita-image-store.s3.amazonaws.com/0/195419/22549055-3630-440c-f080-ee1955573087.png)
編集画面はこのようになっています。
イラストを描いたことのある人なら、おそらく感覚でどれが何のツールかはわかるかな…という形になっていますね。

配置はざっくり4つのエリアに分かれていて、一番左から
「レイヤーエリア」「モデルビューエリア」「テクスチャエリア」「ブラシツールエリア」
になります。

#####① ツールバー
上から順に 「移動ツール」「ペンツール」「消しゴムツール」「」です。

#####② 左右対称ボタン（ミラーリング）
最近になってようやく実装されたみたいです！
クリックで有効・非有効を切り替えることができます。
有効にすることで、左右対称定規のように右に書き込めば左にも、左に書き込めば右にも反映されるようになります。

#####③ レイヤーメニュー
~~なぜかv3.0は英語になっています。なぜ…。~~
この記事を執筆中に、スタートアップの画面（キャラ選択画面）の右上の方に言語設定がありました…。
途中で気づいたので、画像では英語と日本語が混在していますが、大目にみてください…。
項目の内容は以下の通りです。

|項目名|内容|
|-----|----|
|Toggle Visibility|レイヤーの表示・非表示切り替え|
|Toggle Alpha Lock|レイヤーの透明度保護切り替え|
|Duplicate|レイヤーの複製|
|Remove|レイヤーの削除|
|Import|レイヤーとして読み込む|
|Export|レイヤーを画像形式で書き出す|

##実際に描き加える
では実際にテクスチャに描き込んでいきます。
![VRoidStudio3.png](https://qiita-image-store.s3.amazonaws.com/0/195419/0fd756b4-fb2f-ea32-a98a-2092eb38837c.png)
モデル側でもテクスチャ側でも描き込むことができます。

###別ソフトで描き込む
もちろん、VRoid側で全て描き込んでしまってもいいのですが、別ソフトではクリッピングが使えたり、ブラシが使えたりしますよね。
いつも使っているソフトで描き込みたいという人もいるかと思います。
そういう人は、**Import＆Export機能を活用**しましょう！

1. VRoid内で新規レイヤー作成。自分で描き込みたい位置にざっくりと目安を描く。
2. Default Imageと目安レイヤーをそれぞれ**Export**で画像ファイルとして出力。
3. 画像編集ソフトでDefault Imageを読み込み。その中で目安レイヤーを新規レイヤーとして読み込み。※1
4. 画像に描き込み！完成したら、目安レイヤーは非表示or削除して、1枚の画像として出力。（jpgかpngがいいと思います）
5. VRoidに戻り、Importを選択。ファイル選択画面が開くので、先ほど出力した画像を選択。
6. 見事読み込まれます！！

※1 ここの部分については、それぞれのソフトごとに違いがあると思いますのでそのソフトに合った操作をしてください。

#髪をつける
髪をつける方法は「ブラシ」と「プロシージャル」、２つの方法があります。
主な違いは下の表の通りです。

|項目|内容|向いているもの|
|---|----|----------|
|ブラシ|自分で手描きで髪を描きます。自由度が高いですが、大量の髪を描くのには向いていません。|前髪、アホ毛、ちょっとした跳ね髪|
|プロシージャル|自動で髪をつけます。大量の髪を均一につけることができますが、細かい調整はできません。|後ろ髪、ポニテやツインテなどの毛束|

どちらもガイドラインに沿って髪が描かれます。

##ガイドラインの変形の仕方
![VRoidStudio4.png](https://qiita-image-store.s3.amazonaws.com/0/195419/8891231a-9b6f-0302-1be5-c346113eef5c.png)
ガイドラインはこのスクショのようにメッシュと白い点（制御点）で表示されます。
制御点をつまんで動かすことで、メッシュを変形させることができます。
また、制御点の移動も左右対称機能が使用できます。

##ブラシで髪を描く
![1.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/195419/e28cbcc0-4252-990b-01e3-a1eba0fbd210.gif)

「Add Brush Guide」でガイドを作成、そのガイドラインに沿って髪を手で描くことができます。

|ツールバーメニュー|内容|
|-------------|----|
|選択ツール|髪を1本ごとに選択|
|ペンツール|髪をブラシで描きます|
|書き直し|髪を上からなぞるようにすることで描き直すことができます|
|制御点修正|制御点を移動して髪を修正することができます。|
髪を消す場合は、左のレイヤータブから該当する髪を選択、「Delete」で削除することができます。

##プロシージャルで髪をつける
![2.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/195419/82afe992-5a53-520d-320e-3d8971c94b2c.gif)

「Add Procedural Hairs」でガイドを作成、そのガイドラインに沿って髪をつけることができます。
一番右のパラメーターで配置調整できます。髪の生え際などを変更できるので、ポニテなど結んだ髪を作成することもできます。

##髪のテクスチャに描き込む
髪もテクスチャがあり、描き込むことができます。
髪は部位がないため、セクション（作ったレイヤー）ごとにテクスチャが適用されるので、メッシュを入れる髪と入れない髪で分ける場合は、髪の作成自体を分けるといいと思います。
描き込む方法は顔・体と全く同じなので割愛します。


ここまでで、首から上が完成に近くなったかと思います。
<img width="440" alt="VRoidStudio.png" src="https://qiita-image-store.s3.amazonaws.com/0/195419/0e926a3f-d326-e37f-0983-0aad4a190ca5.png">

#洋服を作成する
ここから先はプラスアルファ的な要素になります。
なぜなら、洋服はすでに有志が配布してくれている…。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">VRoid用の服がBOOTHからDLできるのでぜひ。<br>01 Milk and Black <a href="https://t.co/f9jMQFBTDz">https://t.co/f9jMQFBTDz</a><br>02 nyasyamorina <a href="https://t.co/q9EBoufoh2">https://t.co/q9EBoufoh2</a><br>03 miyomiyo <a href="https://t.co/lEWDR9ugvy">https://t.co/lEWDR9ugvy</a><br>04 hulaflat <a href="https://t.co/7JThzOzX5F">https://t.co/7JThzOzX5F</a><br>05 りりか🎀shop <a href="https://t.co/QkhEwXOPaF">https://t.co/QkhEwXOPaF</a><br>06 QuantumDot <a href="https://t.co/d68VDvZwmv">https://t.co/d68VDvZwmv</a><a href="https://twitter.com/hashtag/VRoid?src=hash&amp;ref_src=twsrc%5Etfw">#VRoid</a> <a href="https://t.co/JkCA1TcGxK">pic.twitter.com/JkCA1TcGxK</a></p>&mdash; ふら・ふらっと (@hulaflat) <a href="https://twitter.com/hulaflat/status/1069090246707433472?ref_src=twsrc%5Etfw">2018年12月2日</a></blockquote>

## ガイドラインを引く

洋服のテクスチャはどこがどこだか全然わかりません！
なので、モデルに大体のガイドを描いてから、別ソフトで描き込むのが一番のおすすめです。

![VRoidStudio5.png](https://qiita-image-store.s3.amazonaws.com/0/195419/8699ec48-90dc-4a37-a235-a2704d6ee465.png)

ガイドラインを元に、デフォルト画像を修正して…というものが最初はやりやすいと思います。
修正については、[別ソフトで描き込む](#別ソフトで描き込む)を参照してください。

![VRoidStudio6.png](https://qiita-image-store.s3.amazonaws.com/0/195419/e62f8265-16aa-3865-250a-d818413f24b0.png)
………。
テクスチャを貼ったり模様を描き込むときは、**スカートの広がり**と、**胸元部分の広がり**に注意しましょう…。

#撮影・エクスポート
ここまできたらモデル自体は完成です。
一番最後の撮影・エクスポートで画像の作成とキャラモデルをVRM形式で出力することができます。

##撮影
撮影モードでは表情や視線、ポーズやアニメーションなどをつけることができます。
背景や照明、コミック調なども調整できます。

![sango2.png](https://qiita-image-store.s3.amazonaws.com/0/195419/1edcfeec-90b2-6ad6-79ab-f059857d49cc.png)

##エクスポート
モデルをVRM形式で出力できます。
出力したファイルはUnityなどにも読み込めます。

#おまけ
個人的な遊びで、MMDで踊らせられないか調べてみました。
結論を言うと、ありました。（有志の人すごい）
[VRoid→MMDが楽になりました by 側近P](https://aideq.goat.me/bnbRNcrIfC)

これを説明すると、また1記事分になってしまうので省きますが、簡単に言うと

1. VRMをUnityで読み込む
2. Unity内でPMXに変換
3. PMXでエクスポート
4. PMXエディタで、目の描画順を変更

これでできました。ボーンの関係自体は効いているけど、表示先（向き）が全部前になっていたりしますが、動き自体は修正しなくても動きました。
有志のモーションの流し込みも難なく…。

しかし、髪は自分で修正しないといけないのが初心者にはちょっと大変かもしれないです…。

#まとめ
VRoidは公式のマニュアル自体はPDF１枚でわかりにくいですが、イラストソフトを扱ったことがある人であれば説明を見ずにわかるように作られています。
また、有志の方による解説が多く上がっているので、調べればすぐに出てきます。
ただ、スペックの要求が高いのか、起動中はPCのファンの音がすごかったです…。（動作が重いということはありませんでしたが…）

気になっている方は触ってみて損はないと思うのでぜひ触ってみてください！