UnityとARKitとMMDデータを組み合わせてリビングに”ダンスする”サーバルちゃんを召喚する

## 背景
先日[ARKitとニコニコ立体の力をお借りしてリビングにサーバルちゃんを召喚する](https://qiita.com/smile-0yen/items/095e33fb30b1d1314e41)で、けもフレのサーバルちゃんにリビングに来てもらいましたが、やっぱり元気に動いて欲しい！ということで今回はUnityを使ってサーバルちゃんに踊ってもらいました！

## 今回の作業環境
- macOS Sierra 10.12.6
- Xcode 9.0
- Unity 2017.1.1f1
- iPhone 6s with iOS 11.0.2

## 作業手順
### Unity ARKit Pluginについて
Unity ARKit Plugin は Asset Store から無料でダウンロードできます。すばらしいですね。  
<img width="957" alt="unity-2017-10-06 19.06.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/f2040277-4f2e-839b-5e99-a1ed3d8b00d6.png">

### サンプルのビルド
#### 概要
ダウンロードしたUnity ARKit Pluginにはサンプルアプリが付属しています。なにはともあれ、まずそのままビルドしてみましょう。サンプルがそのまま動くことを確認することで、この後の手順で問題が出た時に原因の切り分けが簡単になります。
参考： [UnityでiPhoneアプリ（iOS）向けにビルドする方法【初心者向け】](https://techacademy.jp/magazine/2483)

#### 手順

1. Unityで新規プロジェクトを作成
2. Unity ARKit Plugin を Asset Store から Download/Import
3. メニューバーから「File」→「Build Settings...」
4. 「Scenes In Build」で「UnityARKitPlugin/Examples/UnityARKitScene/UnityARKitScene」に✔チェック
5. Platformの欄で「iOS」を選び「Switch Platform」ボタンを押す（数分かかります）
6. （オプション: アプリのプロファイル取得設定） プロファイラを有効にするため「Development Build」と「Autoconnect Profiler」に ✔チェック ＊[参考リンク](https://docs.unity3d.com/jp/540/Manual/Profiler.html)
7. ビルド時にXcodeへ渡す情報を設定（とりあえずスキップしてビルド時にエラーで止まった後、Xcodeから修正することも可能）  
  a. 「Player Settings...」ボタンを押し  
  b. 開いたInspector上で「Other Settings」を確認  
  c. 「Build Identifier」と「Automatic Signing Team ID」を埋める
9. ケーブルでMacとiPhone6sをつなぎ「Build And Run」を実行

#### サンプル結果画像
認識された平面が四角い枠で表示され、タップした場所に立方体を設置できるアプリが起動します。  
<img width="375" alt="IMG_0442.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/d3f9b607-66ba-1c6e-44d5-f00a3edd04ff.png">

### UnityへMMD4Mecanim (Beta)追加
#### 概要
続いてMMDモデルをUnityに取り込むための準備として stereoartsさん配布のMMD4MecanimをUnityに追加します。
配布元： http://stereoarts.jp/

＊注意： MMD4Mecanimには配布元サイトに非常に丁寧なチュートリアルがありますので、そちらを見れば基本は簡単です。ただし、2017/10/07現在公開中の`MMD4Mecanim_Beta_20170910.zip`には問題があるようでそのままではうまく動きません。。。
ここでかなりハマったのですがTeratailに類似の質問と対処法がありました。[fbxモデルファイルが生成されない](https://teratail.com/questions/92849)の「追記」部分です。

#### 手順
1. `MMD4Mecanim_Beta_20170910.zip`をダウンロードし解凍
2. `MMD4Mecanim.unitypackage`をクリックしてUnityへImport
3. 途中警告が出るので「I Made a Backup. Go Ahead!」を選択  
 <img width="477" alt="warning-2017-10-07 10.45.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/cdd6e34b-a1b7-cbdf-9422-2d4c929ede68.png">
4. 少し古い`MMD4Mecanim_Beta_20160815.zip`が秀和システムさんからダウンロードできるのでそちらをダウンロード [[ダウンロードサイト]](http://www.shuwasystem.co.jp/support/7980html/4276.html)
5. `MMD4Mecanim_Beta_20160815.zip`を解凍
6. `MMD4Mecanim.unitypackage`をクリックしてUnityへ取り込み。このとき、「PMX2FBX」のみ選択してImportする  
<img width="508" alt="pmx2fbx-2017-10-07 10.48.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/9d90a111-4eb9-1c29-1eb4-084a862aa8e6.png">
 
### サーバルちゃんのモデルとモーションを取り込む
#### 概要
ではいよいよMMDモデルとモーションの取り込みです！
[前回](https://qiita.com/smile-0yen/items/095e33fb30b1d1314e41)もお借りした[schwarz さんのサーバルちゃん](http://3d.nicovideo.jp/works/td28891)に登場してもらいます。さらに今回はモーションをつけますので井村屋さんのダンスモーションデータをお借りします → MMD元動画と配布先へのリンクは[こちら](http://www.nicovideo.jp/watch/sm13560326)。

#### 手順

1. モデルをダウンロード＆解凍の上、Assetsへドラッグ＆ドロップ（テクスチャも含め、フォルダごと全部）
2. プラグインがうまく動けば`サーバル.MMD4Mecanim`というファイルができている
3. ファイルを選択するとInspectorに利用規約が表示されるのでよく読んで同意  
<img width="1052" alt="rule-2017-10-07 11.29.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/fb15d0cf-3b1e-9185-6e9d-163189c0be31.png">
4. モーション(.vmdファイル)も同じフォルダにドラッグ＆ドロップして入れてしまいましょう
5. `サーバル.MMD4Mecanim`を選択した状態でInspector右上の小さな南京錠:lock:マークをクリックしInspectorが切り替わらないように固定
6. Assets内の.vmdファイルを「VMD」の項目へドラッグ＆ドロップ
7. 「process」ボタンを押す ＊環境によりますが数分かかります
8. :lock:マークをはずして新しくできた「サーバル」を確認
9. 「Rig」の「Animation type」には「Humanoid」を選択し「Apply」を押す  
【追記】 「Humanoid」を選択することでwarningが出るというフィードバックを頂きました(2017/10/30)。
「General」のままでも想定通り動くようですのでステップ9は飛ばしても構いません。  
<img width="1026" alt="animation-2017-10-07 12.10.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/24efdd08-57cb-c191-e88f-533e8bee563d.png">

### サーバルちゃんをSceneに配置
#### 概要
いよいよアプリ内へサーバルちゃんを配置します。今回はサンプルアプリを直接編集してしまいましょう。
参考： [Unityで「ARKit」を使ってみよう](https://creator.game.cyberagent.co.jp/?p=4158)

#### 手順
1. Assetsにある「Unity ARKit Plugin/Examples/UnityARKitScene」フォルダ内の`UnityARKitScene`を開く
2. RandomCubeはいらないので消してしまう  
<img width="811" alt="delete-2017-10-07 12.21.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/3f8acacb-3e29-0e9c-276a-60539ea5808a.png">
3. 先程のサーバルをHitCubeParentの下へドラッグ＆ドロップ
4. サーバルを選択したままInspectorから「Add Component」で「Unity AR Hit Test Example」を追加  
＊これは平面をタップするとオブジェクトをそこに置く、という動作を付加するスクリプトです。もとのサンプルではHitCubeについてます。
<img width="1179" alt="component-2017-10-07 12.26.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/d6264f0e-e07b-02bc-6fd3-c04f82e6205e.png">
5. 追加されたComponentの「Hit Transform」へ「HitCubeParent」を指定  
<img width="417" alt="transform-2017-10-07 14.39.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/410325a8-3900-f715-47ae-747ffb025de5.png">
6. もともと「HitCubeParent」の下にあった「HitCube」も削除
7. (オプション)サイズはお好みですがリビングに招待するには今のサイズは小さすぎるので、サーバルを選択してScaleのXYZ全てを10にしました。また今回のモーションにあわせてY軸を180度回転しました。
<img width="1238" alt="setting-2017-10-07 16.30.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/5639439e-380f-85bf-90ef-deac0e07cbda.png">



### サーバルちゃんへアニメーション追加
#### 概要
ついに最終ステップです。配置したサーバルちゃんにアニメーションを追加します。
参考： [2016-06-06 そうだ、MMDのモデルをUnityに読み込もう](http://milk0824.hatenadiary.jp/entry/2016/06/06/224831)

#### 手順
1. Assets内サーバルフォルダの適当な余白で右クリックし「Animator Controller」を作成  
<img width="586" alt="animation2017-10-07 12.34.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/af5c7cdf-71f4-e097-c9b1-c6fb3fc87f35.png">
2. 作ったControllerをダブルクリック
3. Animatorタブが開くのでそこへサーバル内にあるモーションデータをドラッグ＆ドロップ（MMD4Mecanimで変換されたサーバル内の再生ボタン風のアイコン:arrow_forward:のファイル）。画像の通りオレンジ色のモーションが追加されたことを確認
<img width="625" alt="controller-2017-10-07 17.54.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/5990f491-2aab-aff5-1662-6567fd05efcf.png">

4. Scene内のサーバルを選択してInspectorを固定:lock:
5. 新しく作ったControllerをAnimatorへドラッグ＆ドロップ。Controllerのところに作成したファイル名（この例の場合は`ServalMotion`）が表示されていればOKです。  
 <img width="421" alt="controller-2017-10-07 12.39.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/22e58ce1-8812-6b98-6e7b-dcd974e8d957.png">

### ビルド
さぁ準備は整いました！「File」から「Build & Run」しましょう！！

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">UnityとARKitにMMDのデータを乗せてダンスするサーバルちゃんを我が家に招待しました♪ <a href="https://t.co/utAFdJNR9t">https://t.co/utAFdJNR9t</a> <a href="https://twitter.com/hashtag/ARKit?src=hash&amp;ref_src=twsrc%5Etfw">#ARKit</a> <a href="https://twitter.com/hashtag/Unity?src=hash&amp;ref_src=twsrc%5Etfw">#Unity</a> <a href="https://twitter.com/hashtag/mmd?src=hash&amp;ref_src=twsrc%5Etfw">#mmd</a> <a href="https://twitter.com/hashtag/%E3%81%91%E3%82%82%E3%81%AE%E3%83%95%E3%83%AC%E3%83%B3%E3%82%BA?src=hash&amp;ref_src=twsrc%5Etfw">#けものフレンズ</a> <a href="https://t.co/GZWPiw17x0">pic.twitter.com/GZWPiw17x0</a></p>&mdash; スマイル@アイルランド (@smile_0yen) <a href="https://twitter.com/smile_0yen/status/916700509091893248?ref_src=twsrc%5Etfw">2017年10月7日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

## 最後に
今回は手順が少し長くなりましたが、けものフレンズのサーバルちゃんにリビングで元気に踊ってもらうことができました。MMDには既存の資産が10年分あります。音楽をつけたり、違うモデル＆モーションを試したり、複数キャラクターもできるかも。モデルを手の平サイズにして机の上でコンサート、というのもいいかもしれません。いろいろな応用が考えられますね！

＊なお、MacでMMDを編集する場合には互換の[nanoem](https://nanoem.readthedocs.io/ja/latest/)というソフトがあるようなのでMacユーザーでもカスタムモーション作成をあきらめる必要はありません。

## 参考リンク
- [ARKitとニコニコ立体の力をお借りしてリビングにサーバルちゃんを召喚する](https://qiita.com/smile-0yen/items/095e33fb30b1d1314e41)
- [Unity ARKit Plugin](https://www.assetstore.unity3d.com/jp/#!/content/92515)
- [UnityでiPhoneアプリ（iOS）向けにビルドする方法【初心者向け】](https://techacademy.jp/magazine/2483)
- [Unity - プロファイラー ウィンドウ](https://docs.unity3d.com/jp/540/Manual/Profiler.html)
- [fbxモデルファイルが生成されない](https://teratail.com/questions/92849)
- [Unityで「ARKit」を使ってみよう](https://creator.game.cyberagent.co.jp/?p=4158)
- [2016-06-06
そうだ、MMDのモデルをUnityに読み込もう](http://milk0824.hatenadiary.jp/entry/2016/06/06/224831)
- [サーバル by schwarzさん](http://3d.nicovideo.jp/works/td28891)
- [【第6回MMD杯】メグメグ☆ファイアーエンドレスナイト【モーション配布】](http://www.nicovideo.jp/watch/sm13560326)