facerig+live2dで受肉RTAをした

#facerigセール中
サマーセールだぞ。Facerigとlive2dDLCが1000円ちょいで買えるので絵が上手くない人も受肉感を味わってみましょう。俺もやったんだからさ（同調圧力鍋）
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">facerig即買いして肉体を得てしまった… <a href="https://t.co/5jk9r2RZwI">pic.twitter.com/5jk9r2RZwI</a></p>&mdash; 避雷 (@lucknknock) <a href="https://twitter.com/lucknknock/status/1010408295281016832?ref_src=twsrc%5Etfw">2018年6月23日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

#今回の目的
最速でVtuber的な物を実装します。
つまり最小のパーツ数でLive2dとfacerigで受肉を試みます。
この記事は自作絵をフェイストラッキングするまでで終わりなのでそこからさきは個人の目標にもとづいて各自調べてください。
動けば良いだろうみたいなガバガバ思考なので込み入ったところは説明しません。
live2dのメッシュ設定もfacerigの細かい設定もしません。そこら辺やりたい人はオススメの記事を載せておきます。
#ではやってみましょう
##0.下準備　インストールするものとか
・Live2d http://www.live2d.com/ja/
・facerig https://store.steampowered.com/app/274920/FaceRig/?l=japanese
・face rig live2d module https://store.steampowered.com/app/420680/FaceRig_Live2D_Module/
・お好みのペイントツール（psd出力できるやつ）
##1.絵を描こう
絵を描きます。Live2dではpsdを取り込んでそのままfacerigに対応させることが出来るのでクリスタとかSAIとかが強いと思います（もちろんイラレも）
クリスタは「書き出し」するとレイヤー統合されるので「別名で保存」しましょう。
###最小限用意すべきパーツ
・顔
・耳
（右と左を分けましょう）

・黒目
・白目
・瞼
・まつげ
・眉毛
（右目と左目を分けて作りましょう）

・鼻
・口の中
・上唇
・下唇
・上唇の上の皮膚
・下唇の下の皮膚
・前髪
・横髪
（長めのもみあげとか作るんだったら右左分けましょう）

・後髪
・首
・胴体
###注意点とか
・瞼はまつげの背面まで描いておきましょう。瞼とまつげの間に隙間ができてそこから眼球が覗くグロテスクになります。
・唇と皮膚も同様です。口裂けになります。
・首も多少顔の背面においておきましょう。上むいた時にデュラハンと化します。
・最悪首と胴体は一体でいいです。この時、首+胴体=首という設定にしましょう。
##2.Live2dに取り込んでみよう

まずpsdを出力します。この際に線画と塗りのレイヤーを統合しておきましょう。（設定が面倒なので。あとバックアップを忘れずに）
live2dで新規作成→モデル
Live2dのウィンドウにドラッグ&ドロップ
設定画面が表示されるので適当な解像度を選ぶ（この時別ウィンドウの背面に設定ウィンドウが隠れることがあるので注意）
<img width="443" alt="スクリーンショット 2018-06-24 13.33.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/256231/b604cd91-01e6-4d4f-fbbb-de3ca14460fb.png">
<img width="442" alt="スクリーンショット 2018-06-24 13.33.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/256231/ec193cf1-4992-c77e-e7a0-7635585f6962.png">


ファイル→テンプレートを適用→facerigのテンプレートを選択
<img width="638" alt="スクリーンショット 2018-06-24 13.33.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/256231/b50db46a-b425-9353-e37b-2ea37a3112e7.png">

ここで出てくるのがテンプレートの適用画面です。
適用の過程としては、全体をざっくりと整える→細かいパーツの調整をする
って感じです。
###ざっくり全体を整える
レイアウトパラメータ調整モードを開いて、
全体の大きさや各パーツの位置、サイズを整えてサンプル絵と自分の絵を重ね合わせて行きます。変数が多いのでどれを基準にするといいのかわかりづらいと思いますが、頭頂部、顎、耳、肩は割と固定されているのでそこらへんを基準にしてみるといいと思います。
<img width="1203" alt="スクリーンショット 2018-06-24 13.43.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/256231/0e499e39-31e5-3a98-d45a-67cb1a096327.png">



###各パーツの対応をする
次にテンプレート適用プレビューモードに移ります。サンプル絵と自分の絵の重なり具合がうまいといい感じにサンプル絵と自分の絵のパーツが対応してくれるのですが、それでもパーツ対応が間違えてることがあるのでそれを修正します。
<img width="1032" alt="スクリーンショット 2018-06-24 13.37.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/256231/2344fb40-ac3e-ef07-d0f4-1c5706e00cc7.png">

元絵のパーツをクリック、対応するサンプル絵のパーツをクリック、ボタンをクリックで対応づけが完了します。それを全パーツやって、実際に動かしてみましょう。
もし上手く動いてくれなかったら元絵を書き直して再インポートする必要があるのですが、live2dのデフォルトのサンプルモーションはfacerigで不要な程広い範囲で動いてしまうので正面らへんで見栄えが保たれていればまぁ良いでしょうって感じです。
瞼や口が上手く閉じなかった時は全体を整え直す必要があります。各パーツや全体のサイズを見直してみましょう。
完成したらを押してテンプレート適応画面を閉じましょう
次にfacerig用に.moc3をエクスポートします。
.moc3を書き出すにはテクスチャアトラスを製作する必要があります。
http://docs.live2d.com/cubism-editor-manual/texture-atlas-edit/
ここを参考にテクスチャアトラスを生成したのち（無料版だと2048x2048のみ僕の絵だと解像度的な不満は無かったけどガチ勢にはキツいのかな…？）、.moc3を書き出します。
http://docs.live2d.com/cubism-editor-manual/moc3-file/
この時、facerigに必要なファイルがいくつか同時に出力されるので間違えないように新規ファイルを作ってその中に書き出すと良いかも。

##3.facerigに取り込んでみよう
次のようなフォルダを用意します

[キャラの名前]
┣[キャラの名前].moc3
┣[キャラの名前].model3.json
┗[キャラの名前].2048
　┗texture_00.png

フォルダの中身は全部live2dが吐き出してくれるのでそれを入れるだけで良いです。
これをSteamApps/common/Facerig/Mod/VP/PC_CustomData/Objects
に配置します。
facerigを起動すれば新しいモデルが選べるようになってると思います。
完成です。簡単ですね。あとはVtuberやるなりskypeやるなりすれば良いと思います。
日本語は読み込んでくれないっぽいので注意？
![SnapCrab_NoName_2018-6-24_19-3-43_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/256231/eca7e647-b801-1488-eed5-449ed2291a94.png)


#参考にした記事ともっとやりたい人のための参考記事
これ以上は僕の手に負えん…参考記事置いておくので参考にしてください

FaceRigでLive2Dアバターを動かしてみる https://qiita.com/kiy0p0n/items/a39e0beb183e8fca96ad
ぬぬぬのこっそりブロマガ
FaceRig Live2Dアバターを自作する方法（序章、第１章）
http://ch.nicovideo.jp/NUx3/blomaga/ar951267