HoloLensでリアルアバターを召喚

[HoloLens Advent Calendar 2018](https://qiita.com/advent-calendar/2018/hololens)の21日目の記事です。
今年はリアルアバターが流行りましたね！VRChatのおかげ？
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">VRChatに「3Dスキャンした自分」のアバターを作ったぞー！🎉<br>主人公感出すために能力者っぽいエフェクトも追加してサイコーじゃ😂😂😂<br>現実の体を捨ててリアル(?)バーチャルYouTuberとして生きていける！？<br> <a href="https://twitter.com/hashtag/%E3%83%90%E3%83%BC%E3%83%81%E3%83%A3%E3%83%ABYouTuber?src=hash&amp;ref_src=twsrc%5Etfw">#バーチャルYouTuber</a> <a href="https://twitter.com/hashtag/VRChat?src=hash&amp;ref_src=twsrc%5Etfw">#VRChat</a> <a href="https://t.co/wloei94dxL">pic.twitter.com/wloei94dxL</a></p>&mdash; 坪倉輝明@メディアアーティスト (@kohack_v) <a href="https://twitter.com/kohack_v/status/955386723701149696?ref_src=twsrc%5Etfw">2018年1月22日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

今回は、3DスキャンしたリアルアバターをHoloLens上に表示してみました。
HoloLensでリアルアバターを召喚する話は2年前でしたね。
→ [Perfume x TMCN x HoloLens](https://youtu.be/5_2Lyd2S7zE)

## 3Dスキャン
今年はいろんな方々を3Dスキャンさせていただきました。
![avatar01.png](https://qiita-image-store.s3.amazonaws.com/0/63863/a7b8cb18-634b-1363-788f-4fb6258e8cbf.png)

3Dスキャンに使用したのは、

- iPad Air 2
- iSense（いまは売ってないので、Structure Sensor）
- itseez3D（スキャンアプリ）

ハンディで、お手頃価格で、精度もなかなか良いです。
![48894109_279195996127899_4909041039714549760_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/63863/55902afe-de31-5e89-12d7-eecc6ae3bef9.jpeg)

アプリを起動し、右上の`New Scan`から`Fullbody`を選択、顔と枠を合わせて、スキャンを開始します。
3分くらいかけて体の周りをゆっくり回って、端末を上下しながら全身をスキャンします。
スキャンしたモデルは、`Local Preview`ではあまりいい結果がでませんが、`Cloud Processing`（10分程度かかる）をすることで精度のいいモデルが出力されます。
スキャンしたモデルは.PLY、.OBJ、.WRL形式でダウンロード可能です。
[えきまえスペース](http://ekimae-space.com/)では、周りの壁が白いためスキャンしづらい環境ではありますが、比較的明るいためキレイなモデルを作成することができます。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Checkout <a href="https://twitter.com/makoragi?ref_src=twsrc%5Etfw">@makoragi</a> Full body by Satoshi Fujimoto <a href="https://t.co/oDmuggIR8w">https://t.co/oDmuggIR8w</a> via <a href="https://twitter.com/itSeez3D?ref_src=twsrc%5Etfw">@itSeez3D</a></p>&mdash; 藤本賢志(ガチ本) (@sotongshi) <a href="https://twitter.com/sotongshi/status/1077071638871498752?ref_src=twsrc%5Etfw">2018年12月24日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 3Dモデルを編集
.OBJ形式でダウンロードします。
<img width="473" alt="avatar02.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/0008cbb9-a0b5-939b-48b3-b9d8f2bac2a7.png">

Blenderを開き、ファイル->インポート->Wavefront(.obj)から`model_mesh.obj`をインポートします。だいたい20万ポリゴンくらい。
<img width="960" alt="avatar03.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/2a44756d-d040-f0db-12c8-9913da0f860b.png">

VRChatでも使えるように、ポリゴン数削減とリグ入れを行います。
まずは、ポリゴン数削減、Decimateの比率を0.09くらいにして、2万ポリゴン以内に収まるようにします。シェーディングをスムーズにするとカクカクした面がいい感じに滑らかになります。
<img width="960" alt="avatar04.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/ebad0485-832f-3610-66e3-c753b886974c.png">
 
### リグ入れ
まずは、VRChat用のリグの[サンプルをダウンロード](https://drive.google.com/file/d/1ZWgj3UZI5yulLCJBHyUPCqkHNkrPPgS8/view?usp=sharing)します。
ダウンロードした`Vrchat_Example_Avatar.fbx`をBlenderからインポートします。
`リーフボーンを無視`と`ボーン方向の自動整列`にチェックを入れること。
![avatar05.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/200c3aba-ae4d-c765-665b-121f143f869c.png)

自分のアバターを、サンプルのアバターに合わせます。
<img width="960" alt="avatar06.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/f448e952-735a-49e2-2475-880e2ccfd931.png">

サンプルのアバターの`Body`と`Eye`を削除し、リグの大きさと位置をリアルアバターに合わせて調整します。
<img width="960" alt="avatar07.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/af157369-95ac-347a-8abe-db505f72e1ea.png">

モデル->リグの順に選択し、`Ctrol`+`p`を押して、アーマチュア変形->自動のウェイトでを実行します。
<img width="960" alt="avatar08.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/40803daa-7271-9912-e22a-078403440609.png">

うまくいけば、ポーズモードでリグを選択し回転してみると、ぐねぐねできます。
<img width="960" alt="avatar09.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/c0845c8c-78c3-44e9-9bec-b5b265be0206.png">

ファイル->エクスポート->FBX(.fbx)を選択し、モデルをエクスポートします。

## HoloLensで表示

開発環境は以下です。

- HoloLens RS5
- Visual Studio 2017(15.9.2)
- Unity 2017.4.11.f1
- HoloToolkit-Unity-2017.4.3.0.unitypackage
- HoloToolkit-Unity-Examples-2017.4.3.0.unitypackage

Unityを開き、新しくプロジェクトを作成します。
ファイル作成した.FBXファイルをD&DしてUnityに取り込みます。
Scaleの設定、Generate Colliders、Rig->Humanoidを適用します。
`model_texture.jpg`をMaterialsにD&Dし、`model_texture`の`Albedo`に`model_texture.jpg`をアタッチすることでテクスチャを貼り付けます。

<img width="960" alt="avatar11.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/c1bca6aa-4c2a-2caf-a5ca-76a8a68be7f9.png">

["Unity-chan!" Model](https://assetstore.unity.com/packages/3d/characters/unity-chan-model-18705)をインポートし、ボタンをタップすることで、モデルをジャンプさせます。
<img width="960" alt="avatar12.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/7937305b-2731-2bd2-3880-67b5b8f9a682.png">

<blockquote class="twitter-tweet" data-lang="ja"><p lang="et" dir="ltr"><a href="https://twitter.com/hashtag/HoloLens?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens</a> Makoragi RealAvatar: <a href="https://t.co/zkKK5hOAmv">https://t.co/zkKK5hOAmv</a> via <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a></p>&mdash; 藤本賢志(ガチ本) (@sotongshi) <a href="https://twitter.com/sotongshi/status/1077116710547832832?ref_src=twsrc%5Etfw">2018年12月24日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## まとめ
- 3Dスキャンし、リアルアバターを作成しました
- ダウンロードした3Dモデルを編集し、HoloLens上に表示してみました
- リップシンクや、手の移植、アニメーション作成などをするともっと面白くなりそうですね

## 参考文献
- [もらったリアルアバター弄ってみた ガチラボ20180516](https://www.slideshare.net/makoragi/20180516-97289637)
- [ガチラボ動画](https://www.facebook.com/100004411985118/videos/999304466893277/?fref=gs&dti=2150322051920992&hc_location=group)
- [HoloLens+Unity開発 入力の取得まとめ編](http://www.noshimemo.com/entry/2017/01/28/133818)