FaceRigでLive2Dアバターを動かしてみる

# はじめに
FaceRig Live2D Moduleが人気なようなので、既に多くの野生のプロの方々が解説してくれていますが、自分も使い方について記事にしてみようと思います。

## 参考元(2016/1/16 修正と追記)
[公式ドキュメント](http://cdn.akamai.steamstatic.com/steam/apps/420680/manuals/Live2D_Facerig_Avatars_Documentation.pdf?t=1449673428)
[公式ドキュメント(和訳)](https://drive.google.com/file/d/0B-99Ww6ro_aodkhET1lwWFVFQTQ/view)
~~手前味噌ですがdocsで和訳しておきました [和訳ドキュメント](https://docs.google.com/document/d/1tvqQkyAeQ_TOrQuyWm2wpGKYT3Rier6TApFY4481fBE/edit?usp=sharing)~~


## 説明すること
* FaceRigにLive2Dモデルを追加する方法
* FaceRigで表現できるLive2Dモデルのパラメータ
* FaceRig Live2D Moduleのコンフィグファイルの書き方[^1]

## 説明しないこと
* Live2Dモデルの作成
* Live2Dモデルのモーションファイルの作成方法
* FaceRig上のUIについて

## FaceRigについて
Steamで公開されている[FaceRig](http://store.steampowered.com/app/274920/)というソフトウェアがあります。
FaceRigはWebカメラで顔を認識し、顔の動きを3Dアバターとリアルタイムで連携させるものです。
[http://www.youtube.com/watch?v=cbIWRd514-s](http://www.youtube.com/watch?v=cbIWRd514-s)
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/cbIWRd514-s/0.jpg)](http://www.youtube.com/watch?v=cbIWRd514-s)

## FaceRig Live2D Moduleについて
そんなFaceRigですが、2015/12/09に一枚絵を立体表現可能にする[Live2D](http://www.live2d.com/)で作成したモデルをFaceRigのアバターとして使えるモジュール[FaceRig Live2D Module](http://store.steampowered.com/app/420680/)が公開されました。
これによって、一枚絵からWebカメラでリアルタイムで動かせるアバターを作れるようになりました。
[http://www.youtube.com/watch?v=IINyowbMqJI](http://www.youtube.com/watch?v=IINyowbMqJI)
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/IINyowbMqJI/0.jpg)](http://www.youtube.com/watch?v=IINyowbMqJI)

今日は、自作したLive2DモデルをFaceRigのアバターに登録するまでの流れを紹介したいと思います。

# 動作結果
[http://www.youtube.com/watch?v=tEcMCmt0HpE](http://www.youtube.com/watch?v=tEcMCmt0HpE)
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/tEcMCmt0HpE/0.jpg)](http://www.youtube.com/watch?v=tEcMCmt0HpE)

瞬きとか可愛いのに、当方がメガネかけてるおかげで瞬きうまくとれなかったです orz

# 手順
FaceRigに追加するLive2Dアバターの名前は __kanban__ として進めていきます。
以降、__太字__で記述した部分はアバターごとに決めた名前を付けてください。

![ico_kanban.png](https://qiita-image-store.s3.amazonaws.com/0/75536/76fdae63-17ed-96b0-d24f-5e1f067ad2bd.png)


このたびは[@marinebluerabby](https://twitter.com/marinebluerabby)さんから提供していただいた看板娘ちゃんを使って説明します。
素材提供ありがとうございました！
素材のクオリティに私のモデリング力が追いついてないのは秘密。

## 完成モデルの公開(更新: 2019/12/06)
[@marinebluerabby](https://twitter.com/marinebluerabby)さんから許可いただいたので公開いたします。
**データの利用は個人での動作確認のみに限定させていただきます。**
**第三者に向けた公開目的での利用はしないで下さい。**
利用に関して質問がある場合は、[@kiy0p0n](https://twitter.com/kiy0p0n)までメッセージしてもらえると対応するかもしれないです
~~モデリング調整、アニメーションの追加、特殊パラメータの追加のご要望などあれば~~
~~[@kiy0p0n](https://twitter.com/kiy0p0n)までメッセージしてもらえると対応するかもしれないです~~
[__kanban.zip__ from google drive](https://drive.google.com/file/d/0B5_UCHlGioBUMnJaZjAySU5BOHM/view?usp=sharing)


上記フォルダを解凍し、実践編のとりあえず使うまでにすることの通りにフォルダを突っ込めばアバターを追加できます。

# 準備編
## 必須ファイル
以下の必須となるファイルをLive2D Cubisum Modeler[^2]で出力します。
注: mocは _SDK2.0/Cubism2.0対応_　で書き出しています。
(FaceRig v1.507からCubism2.1に対応されました！)
* kanban.moc
* kanban.json
* kanban.2048[^3][^4]

## 任意で必要となるファイル
* Live2D Cubism Animator[^5]で出力したモーションファイル(*.mtn)
* 物理シミュレーションファイル(*.physics.json)
* ico___kanban__.png
* cc_names___kanaban__.cfg
* cc___kanban__.cfg

#### ico___[アバター名]__.png
FaceRig上のアバター一覧などに表示するアイコン画像[^4]。

#### cc_names___[アバター名]__.cfg
アバターに自分の好きな名前を付けることができます。好きに付けた名前は、FaceRigでアバターを一覧で検索できたりします。

#### cc___[アバター名]__.cfg
* あるキーに対して、Live2D Cubism Animatorで出力したモーションファイル(*.mtn)を割り当て
* あるキーに対して、Live2D Cubisum Modelerで出力したモデルのパラメータのon/offの割り当て
* FaceRig上のシーンでLive2Dアバターを表示する位置の設定

# 実装編

## とりあえず使うまでにすること
準備編で用意したファイルを__[アバター名]__と名付けたフォルダを作って入れます。
今回の例では、次のようなフォルダ構成になります。

```
kanban
  │  cc_names_kanban.cfg
  │  ico_kanban.png
  │  kanban.moc
  │  kanban.model.json
  │
  └─kanban.2048
        texture_00.png
```

この__kanban__フォルダをFaceRigの以下のフォルダの下に移動させます。
`SteamApps/common/Facerig/Mod/VP/PC_CustomData/Objects`
`StemApps` はSteamをインストールした場所の下にあるフォルダです。デフォルトであれば `C:\ProgramFiles(X86)/Steam/SteamApps/` にあります。

フォルダの移動が終われば、FaceRigアバターとしてLive2Dアバター使えるようになります。
起動の前にFaceRig上でアバターを見つけやすくするために、cc_names_kanban.cfgに次の一行を書いておきましょう。
`set_friendly_name kanban 'kanban_musume'`
これで__kanban__という名前のアバターを `kanban_musume` という名前でFaceRig上に登録することができます[^6]。
また、FaceRigのアバター検索に設定した名前がヒットするようになります。

アバターに対して説明をつけたいときは、cc_names_kanban.cfgに次の一行を追記します。
`set_avatar_skin_description kanban default 'test avatar'`

起動して、確認してみましょう。
![capture_201512202107.PNG](https://qiita-image-store.s3.amazonaws.com/0/75536/b85b6b87-ad6f-ed2c-5c34-56b514d4031e.png)


簡単！最高！

### Live2Dのテンプレート機能を使ってオリジナルのアバターを作る(追記: 2015/01/07)
Live2D Cubisum ModelerにFaceRigアバター向けのテンプレートが追加されました。
<blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">知ってる人いると思うけど、Live2D ModelerにFaceRigテンプレートモデルが既に入ってるんだぜ <a href="https://t.co/KSMVJ7WxYq">pic.twitter.com/KSMVJ7WxYq</a></p>&mdash; naotaro (@naotaro0123) <a href="https://twitter.com/naotaro0123/status/683655893896957952">2016, 1月 3</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
ざっくり説明すると、テンプレート機能を使うと、パーツ毎にレイヤー分けしたPSDから簡単にLive2Dアバターを作成できるようになります。
FaceRig向けのLive2Dアバターが簡単に作れる！最高！という機能です。

テンプレート機能の詳しい使い方は[公式のドキュメント](http://sites.cybernoids.jp/cubism2/modeler/edit-keyform/template)を参考にしてください。


## FaceRig上でLive2Dモデルを遊びつくしたい人向け
### キーにモーションを割り当てる
キーにLive2Dのモーションファイルやパラメータのon/offを割り当てることができます。
注意点として、あらかじアバターごとに、__アバターのカスタム動作を有効__にする必要があります。
`Switch to Advanced UI > Avatars > Behaviour > Enable Custom Actions` をオンにしてください。
![capture_201512220221.PNG](https://qiita-image-store.s3.amazonaws.com/0/75536/c691fe3b-117c-9995-7bc5-604e9ec85892.png)


`Switch to Advanced UI > General Options > Preferences > Language` から日本語に変更もできるので、日本語でいじりたい方は変更しておきましょう！
![capture_201512220226.PNG](https://qiita-image-store.s3.amazonaws.com/0/75536/badec951-37f0-4a19-1e82-edc0eaeafa3e.png)


#### モーションファイル(*.mtn)をキーに割り当てる
Live2Dのモーションファイル(*.mtn)を__kanban__フォルダに入れることで、FaceRig上でキーを押すことでアバターにモーションをさせることができます。[^8]

今回の例では、yesとnoという二つのモーションを用意したので、次のようなフォルダ構成になります。

```
kanban
 │  cc_kanban.cfg
 │  cc_names_kanban.cfg
 │  ico_kanban.png
 │  kanban.moc
 │  kanban.model.json
 │
 ├─kanban.2048
 │    texture_00.png
 │
 └─motions
     no.mtn
     yes.mtn
```

__kanban__.model.jsonにモーションファイルの場所を追記します。
`motions` の部分が追記した部分です。

```
{
	"type": "Live2D Model Setting",
	"name": "kanban",
	"model": "kanban.moc",
	"textures": [
		"kanban.2048/texture_00.png"
	],
	"motions":{
		"null":[
			{
				"file":"motions/yes.mtn"
			},
			{
				"file":"motions/no.mtn"
			},
		]
	}
}
```

キーとモーションを対応させるには、cc___kanban__.cfgファイルに次を追記します。

```
set_special_action_anim kanban 'yes.mtn' 1
set_special_action_anim kanban 'no.mtn' 2
```

記述のルールは `set_special_action_anim アバター名 'モーションファイル名' キーに対応する数字` です。

ここで、 `キーに対応する数字` は1から6の間の数字です。この数字はFaceRig上では特別なキーに割り当てられます。
標準では次の割り当てです。

| キー | 対応する数字 |
|:---:| :-----------|
| 1 | Q |
| 2 | W |
| 3 | E |
| 4 | R |
| 5 | T |
| 6 | Y |

これらの割り当てられたキーは、 `FaceRig > General Options > Key Bindings > Trigger Special Anim` の1-6 から変更することができます。

![capture_201512202310.PNG](https://qiita-image-store.s3.amazonaws.com/0/75536/80825de4-c418-1b45-9e75-661e8660a91d.png)

実際に割り当てたモーションを実行してみました。
[http://www.youtube.com/watch?v=neDlQYddc64](http://www.youtube.com/watch?v=neDlQYddc64)
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/neDlQYddc64/0.jpg)](http://www.youtube.com/watch?v=neDlQYddc64)

#### キーに特別にパラメータのon/offを割り当てる
特別なモーションに加え、あるキーを押すことでいくつかのパラメータを組み合て動かすことができます。
具体的には、キーを押すことで、あるパラメータをコンフィグファイルに設定した最大値までパラメータを変化させることができます。
同じキーを再度おすと、そのパラメータをコンフィグに設定した最小値までパラメータを変化させます[^7]。
標準では以下のキーとパラメータが設定されています。

| キー | パラメータ |
|:---:|:----------|
| Z | PARAM_TERE/PARAM_CHEEK |
| X | PARAM_TEAR |
| C | PARAM_RAGE |
| V | PARAM_HAIR_FLUFFY |

これらの割り当てられたキーは、 `FaceRig > General Options > Key Bindings > Trigger Special Pose` の1-4 から変更することができます.
これのパラメータはあらかじめLive2D Cubisum Modelerで設定しておく必要があります。

また、他のパラメータをキーに割り当てることができます。
今回は、看板娘ちゃんの後ろ髪を隠すパラメータ `PARAM_HIDE_BACK_HAIR` をモデルに追加しておきました。
![hide_hair.png](https://qiita-image-store.s3.amazonaws.com/0/75536/0d0b974f-35bc-93b7-8581-9be098c39311.png)

たとえば、Zキーを押したときに表示/非表示にするためには、cc___kanban__.cfgファイルに次を追記します。

```
set_special_pose_param kanban 'PARAM_HIDE_BACK_HAIR' 0 1 1
```

記述のルールは `set_special_pose_param アバター名 'パラメータID' パラメータの最小値 パラメータの最大値 キーに対応する数字` です。

ここで、 `キーに対応する数字` は1から4の間の数字です。
この数字はFaceRig上では特別なキーに割り当てられます。
標準では次の割り当てです。

| キー | 対応する数字 |
|:---:| :-----------|
| 1 | Z |
| 2 | X |
| 3 | C |
| 4 | V |

実際に割り当てたモーションを実行してみました。
[http://www.youtube.com/watch?v=nynuu3-t3Uk](http://www.youtube.com/watch?v=nynuu3-t3Uk)
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/nynuu3-t3Uk/0.jpg)](http://www.youtube.com/watch?v=nynuu3-t3Uk)

### 物理シミュレーションを追加する
物理シミュレーションを追加するには、アバターのフォルダに __kanban__.physics.json ファイルを追加する必要があります。Live2D Viewer[^9]にてphysics.jsonファイルを出力しておいてください。
出力した__kanban__.physics.jsonファイルを__kanban__フォルダに移動します。
次のようなフォルダ構成になります。

```
kanban
  │  cc_kanban.cfg
  │  cc_names_kanban.cfg
  │  ico_kanban.png
  │  kanban.moc
  │  kanban.model.json
  │  physics.json
  │
  ├─kanban.2048
  │      texture_00.png
  │
  └─motions
        no.mtn
        yes.mtn
```


__kanban__.model.jsonにモーションファイルの場所を追記します。
`physics` 野部分が追記した部分です。

```
{
	"type": "Live2D Model Setting",
	"name": "kanban",
	"model": "kanban.moc",
	"textures": [
		"kanban.2048/texture_00.png"
	],
	"motions":{
		"null":[
			{
				"file":"motions/yes.mtn"
			},
			{
				"file":"motions/no.mtn"
			},
		]
	},
	"physics":"kanban.physics.json"
}
```

### アバターの位置を変更する
FaceRig上のシーンの中のアバターをカメラの位置をかえることで変更できます。
カメラの位置を変えるためには、コンフィグファイル cc___kanban.cfg に次を追記します。

```
set_cam_pos kanban 0.0 0.02 1.0
```

記述のルールは `set_cam_pos the_avatar_name x座標 y座標 z座標` です。
ここで、poz_x, poz_y, poz_z はメートル単位の三次元座標で表現されます。

アバターをより近くに感じられるようになりました！
![caputure_20151239.PNG](https://qiita-image-store.s3.amazonaws.com/0/75536/af095e6c-ada8-6443-ef5c-68b4d0c53b4b.png)


### FaceRigで有効なLive2Dモデルのパラメーター
FaceRigでは顔を認識して各パーツの位置をLive2Dのモデルのパラメータへ連携させているようです。
したがって、顔認識によって動かすことができるパラメータがあらかじめ決まっています。それ以外のパラメータは動かないので注意してください。
Modelerのテンプレート機能を使うと、ほとんどのパラメータを設定してくれるので
有効なパラメータ一覧は以下の通りです。

* __頭部を動かすためのパラメータ__

| パラメータ | 説明 |
|:----------|:-----|
| 角度　X<br>(PARAM_ANGLE_X) | 左右のひねりの動き. -30 から 30 の間になるようにパラメータを設定してください. |
| 角度　Y<br>(PARAM_ANGLE_Y) | 上下の動き.  -30 から 30 の間になるようにパラメータを設定してください. |
| 角度　Z<br>(PARAM_ANGLE_Z) | 左右の傾きの動き.  -30 から 30 の間になるようにパラメータを設定してください. |

* __体を動かすためのパラメータ__

| パラメータ | 説明 |
|:----------|:-----|
| 体の回転　X<br>(PARAM_BODY_ANGLE_X) | 左右のひねりの動き. -10 から 10 の間になるようにパラメータを設定してください. |
| 体の回転　Z<br>(PARAM_BODY_ANGLE_Z) | 上下の動き.  -10 から 10 の間になるようにパラメータを設定してください. |
| 呼吸<br>(PARAM_BREATH) | 呼吸の動き.  0 から 1 の間になるようにパラメータを設定してください. |

* __目を動かすためパラメータ__

| パラメータ | 説明 |
|:----------|:-----|
| 目のX軸の動き<br>(PARAM_EYE_ANGLE_X) | 左右の動き. -1 から 1 の間になるようにパラメータを設定してください. |
| 目のY軸の動き<br>(PARAM_EYE_ANGLE_Z) | 上下の動き.  -1 から 1 の間になるようにパラメータを設定してください. |
| 左眼　開閉<br>(PARAM_EYE_L_OPEN) | 左目が閉じた状態から開く動き.  0 から 1 の間になるようにパラメータを設定してください.しかし、0.75の時点ですでに目が開いている状態にしてください. |
| 右眼　開閉<br>(PARAM_EYE_R_OPEN) | 右目が閉じた状態から開く動き.  0 から 1 の間になるようにパラメータを設定してください.しかし、0.75の時点ですでに目が開いている状態にしてください. |
| 目の形状<br>(PARAM_EYE_FORM) | 曲がり目の輪郭をしかめ面の表現に補完します(bends eyes contour to complement frown expression).  -1 から 1 の間になるようにパラメータを設定してください. |

* __眉を動かすためのパラメータ__

| パラメータ | 説明 |
|:----------|:-----|
| 左眉　上下<br>(PARAM_BROW_L_Y) | 左眉が下がっている状態から上がる動き. -1 から 1 の間になるようにパラメータを設定してください. |
| 右眉　上下<br>(PARAM_BROW_R_Y) | 右眉が下がっている状態から上がる動き. -1 から 1 の間になるようにパラメータを設定してください. |
| 左眉　角度<br>(PARAM_BROW_L_ANGLE) | 左眉の傾きの動き. -1 から 1 の間になるようにパラメータを設定してください. |
| 左眉　変形<br>(PARAM_BROW_L_DEFORM) | 左眉の形の変化の動き. -1 から 1 の間になるようにパラメータを設定してください. |
| 右眉　角度<br>(PARAM_BROW_R_ANGLE) | 右眉の傾きの動き. -1 から 1 の間になるようにパラメータを設定してください. |
| 右眉　変形<br>(PARAM_BROW_R_DEFORM) | 右眉の形の変化の動き. -1 から 1 の間になるようにパラメータを設定してください. |

* __口を動かすためのパラメータ__

| パラメータ | 説明 |
|:----------|:-----|
| 口　開閉<br>(PARAM_MOUTH_OPEN_Y) | 口の閉じた状態から開くときの動き. 0 から 1 の間になるようにパラメータを設定してください. |
| 口　変形<br>(PARAM_MOUTH_FORM) | 悲しみから笑顔への動き. -1 から 1 の間になるようにパラメータを設定してください. |

#### 眼　開閉の調整
通常のLive2Dのアバターは眼の開閉はパラメータが1.0の時に完全に開くように設定してあると思います。
しかしながら、FaceRigアバターでは0.75の状態で完全に開くことを期待しています。
ここでは、1.0に設定してあるパラメータを0.75に変更する方法を書きます。

Live2D Cubism Modelerを開いて、調整したいパラメータを見つけてください。
1. 調節したいパラメータを左クリックします。
2. 「選択」を選んでパラメータに紐づくオブジェクトを選択します。
3. 調節を押すと「値の調節」ウィンドウが開くので1.0を0.75にします。
4. 1.0に設定されてた値が消えるので、パラメータのタブを左クリックし、「パラメータの編集」ウィンドウから、1.0に新しい点を追加します。

![adjust_parameter.png](https://qiita-image-store.s3.amazonaws.com/0/75536/bc44e29f-563a-f2f3-7163-bfe7c9aad994.png)

### 腕を動かす
腕を動かすアクションも割り当てられるようですが、ドキュメントにもないので割愛します。
`SteamApps/common/Facerig/Mod/VP/PC_Common/Objects`
にある公式のLive2Dアバターのコンフィグファイルが参考になります。

# まとめ
書いたキャラが動く！楽しい！から、書いたキャラになりきれる！という段階になりました。
みんなも自分で作ったキャラクターを動かしてみよう！そしてWORK SHOPにアバターを公開して、世界で楽しもう！
記事書きながら面白かったのは、リップシンクをONにすると、アバターが裏で流れてた作業用BGMを歌い始めたことです。
自キャラに歌ってもらえる時代がやってきたようだ。
組み合わせで可能性があるので、ぜひ触ってみてもらえればと思います。
今回はこのへんでノシ


[^1]: コンフィグファイルを作成することで、アバター一覧に登録したり、モーションやアクションをキーに割り当てたりできます。
[^2]: [Cubism Modeler: http://sites.cybernoids.jp/cubism2/modeler](http://sites.cybernoids.jp/cubism2/modeler)
[^3]: texture.pngを含むフォルダ。2048は解像度。
[^4]: 縦横は2の乗数である必要がある。
[^5]: [Cubism Animator: http://sites.cybernoids.jp/cubism2/animator](http://sites.cybernoids.jp/cubism2/animator)
[^6]: ~~漢字を使うと文字化けするようです…~~ UTF8(BOM無)で設定すると、漢字でも表示可能なようです！(2015/1/13 追記)
[^7]: パラメータはcc_the___kanban__.cfgで設定されているパラメータです。標準では、最大値が1、最小値が0です。
[^8]: モーションファイルにあるテキスト挿入で入れたテキストは表示されないようです。
[^9]: [Live2D Viewer http://sites.cybernoids.jp/cubism2/live2dviewer](http://sites.cybernoids.jp/cubism2/live2dviewer)