ARKitとニコニコ立体の力をお借りしてリビングにサーバルちゃんを召喚する

## 背景
2017/09/20にiOS11とXcode9が正式リリースされたので記念に「けもフレ」こと「けものフレンズ」のサーバルちゃんをリビングに召喚したいと思います。
こんなに少ない手数で手軽にARアプリ作りが体験できるってすごい！

[追記]この記事では静止しているサーバルちゃん、動かしました！
[UnityとARKitとMMDデータを組み合わてリビングに”ダンスする”サーバルちゃんを召喚する](https://qiita.com/smile-0yen/items/89348c88df9c38f4bbe8)

## 今回の作業環境
- macOS Sierra 10.12.6
- Xcode 9.0
- Blender 2.79
- iPhone 6s with iOS 11.0

## 3Dモデルの変換

### 3Dモデル
こちらの3Dモデルをお借りしました。ありがとうございます。
- ニコニコ立体: サーバル by shwarzさん 
http://3d.nicovideo.jp/works/td28891

### Blenderでpmxファイルを読み込めるようにする
ニコニコ立体でダウンロードしたzipファイルを解凍すると中にpmxファイルがあります。こちらをBlenderを通してdaeファイルに変換します。
Blenderでpmxファイルをインポートするにはアドオンとして[mmd_tools](https://github.com/sugiany/blender_mmd_tools)を追加する必要があります。
リンク先からダウンロードしてBlenderの下記パスへディレクトリごと追加し、Blenderの「ファイル」→「ユーザー設定」→「アドオン」から「Object:mmd_tools」にチェックを入れます。

`/Users/<ユーザ名>/Library/Application Support/Blender/<Blenderのバージョン>/scripts/addons`
＊Macの場合

### .dae形式でエクスポート
アドオンが正常に読み込まれれば「ファイル」→「インポート」から「MikuMikuDance Model(.pmd, .pmx)」が選択できるようになっています。早速インポートしましょう。
ここでBlenderからアニメーションを付ける等、追加作業を行うことも可能です。今回は特に変更はせず、読み込んだらこのまま.dae形式でエクスポートします。
.daeへのエクスポートはデフォルトでサポートされています。
<img width="842" alt="スクリーンショット 2017-09-26 22.05.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/0bccd4ca-a9fc-f08d-5cee-582751442396.png">

## ARアプリの作成
＊アプリ作成が初めての場合の注意
・ Xcode->Preferences->Accountに開発用AppleIDとteamが登録されていないとビルドできません。
・ 検証用端末(今回の場合iPhone6s)側でアプリのインストールを許可する必要があります。ビルドした後、設定アプリの「一般」→「プロファイルとデバイス管理」からご自身作成のアプリを許可しましょう。

### プロジェクト作成
新規プロジェクトを作成します。テンプレートはもちろん"Augmented Reality App"です。
<img width="732" alt="serval.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/e05e2e2a-c040-2663-bb53-015d191e4e22.png">
先程変換した.daeファイルを`<設定したプロジェクトのパス>/＜プロジェクト名＞/art.scnassets/`へ移動します。読み込んだら今回不要なrigidbodiesを削除してしまいましょう。
<img width="1046" alt="serval02.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/e8d300cb-7ce6-dc9c-45ca-94c36bbe84d1.png">
なぜかサーバルちゃんは床に寝ていますしそのままだと少し大きすぎるので諸々パラメータを変更します。パラメータ変更例として以下の画像（右ペイン）をご参照下さい。
<img width="1009" alt="serval03.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/3dd23a35-985c-e6de-c373-422617a0eeef.png">

変更したら.daeファイルを.scnファイルへ変更します。上の画像の通りメニューバーのEditorから変換できます。
これでほぼ完了です！
あとはViewController.swiftのship.scnを今回変換したファイル（画像ではserval.scn）に変えるだけ！！
<img width="810" alt="serval04.png" src="https://qiita-image-store.s3.amazonaws.com/0/61318/b0489f50-ef9d-53db-3a96-28e986fbdd43.png">

私のビルド結果を、これまたiOS11から入った画面録画で収録しTwitterにあげましたので参考までにご確認下さい。
https://twitter.com/smile_0yen/status/912436595164401664
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ニコニコ立体 schwarz さんの作品”サーバル”ちゃんにARKitでリビングへ来てもらいました。ARたーのしー！ <a href="https://t.co/oaoAqhGXWo">https://t.co/oaoAqhGXWo</a> <a href="https://t.co/uP20ucWA97">pic.twitter.com/uP20ucWA97</a></p>&mdash; スマイル@アイルランド (@smile_0yen) <a href="https://twitter.com/smile_0yen/status/912436595164401664">2017年9月25日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

上の私のケースではランプを追加して少し照明を調整したりしています。
蛇足ですがカメラをやや斜めに、床方向に向けた状態で環境を認識させると周囲と比較的うまくマッチした状態で固定されます。

## 最後に
ご紹介したのはあくまで一番簡易的な方法ですのでポーズをつけたりアニメーションをつけたり、サイズを変更できるようにしたりといろいろな変更が考えられると思います。是非色々試して一緒に楽しみましょう！

## 参考リンク
- [ニコニコ立体: サーバル by shwarzさん](http://3d.nicovideo.jp/works/td28891)
- [【Blender】MMDのPMD･PMX･VMDファイルを読み込み、出力する方法](http://blender-cg.net/mmd-pmd-pmx-vmd/)
- [[Blender] アドオンのインストール・アップデート・アンインストール方法のまとめ](https://qiita.com/nutti/items/5e9ebe9c28751066b688)
- [SceneKitで扱える3Dモデルのフォーマット／アニメーションつき3DモデルをSceneKitで使う](https://qiita.com/shu223/items/0161f82d000d5cdf009c)
- [how to convert .dae to .scn files in SceneKit](https://stackoverflow.com/questions/31627965/how-to-convert-dae-to-scn-files-in-scenekit)