HoloLensの3Dアプリランチャーにアニメーションを複数設定する

**2018年4月現在ではPreviewの機能なのでお試しの際はご注意下さい**
HoloLens RS4のver 10.0.17134.1004から3Dアプリランチャーをアニメーションさせるようにすることができるようになりました。

その辺の実装については[デコシ](https://twitter.com/Ash_Yin)がまとめてくれています（[記事のリンク](http://www.tattichan.work/entry/animated3dapp))

本記事では上記記事の応用として3Dアプリランチャーに複数のアニメーションを設定し、ランチャーを見つめたときと見つめてないときでアニメーションを変化させてみます。

#複数のアニメーションを持つglTFファイルを作成
まずは3Dアプリランチャーの元となる3Dモデルを作ります（私はBlenderで作りました）。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/60734/4481f147-0100-1ef5-1aab-8645c1892470.png)

このときにアニメーション（Blender的にはアクション）を２つ作っておきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/60734/a1973de9-5954-9b3d-de60-d4109cb60aeb.png)

###まずはFBXでエクスポート
**ここが最大のハマりポイントなのですが、まずはFBXでエクスポートします**
Blenderから直接glTFに行きたいところですが、２つのアクションをファイルに書き出すことができなかった（1つだったらNLAエディターのアニメーションデータに設定すればできる）ので、FBXでエクスポートします。

###Unityにインポート
エクスポートしたFBXファイルをUnityにインポートします（Unityは2017.4.1を使いました）。
ちゃんと２つアニメーションがあるか確認してください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/60734/1a14e71b-e824-4b0d-f368-49580d8ecb34.png)

###アニメーションの設定
FBXファイルをインポートしてできた3DモデルをHierarchyビューに配置し、新規作成したAnimatorControllerを設定して下さい（名前はなんでもよい）。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/60734/cd6a9c4e-ca46-447e-772e-086f5b27f016.png)

あとはAnimatorControllerに3Dモデルの中にあるアニメーションを設定します（Transitionはなくてもよい）。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/60734/9efbf727-feca-9f04-4c34-43c02ddd650b.png)

ここまで出来たらHierarchyビューの3DモデルをProjectビューにドロップし、Prefab化します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/60734/11f94716-aa4b-7706-33f7-2d7558e4d632.png)



###glTF-Tools-for-Unityのインポート
UnityからglTFをエクスポートするためのツールである[glTF-Tools-for-Unity](https://github.com/KhronosGroup/glTF-Blender-Exporter)のunitypackageをダウンロードし、インポートします。

###glTFのエクスポート
glTF-Tools-for-Unityのインポートにアニメーションの設定のところで作成したPrefabを右クリックするとエクスポートのメニューが追加されているので、選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/60734/2112b9fd-d9ec-0d98-0aa8-076be7f06ae6.png)

ウィンドウが出たら特に設定変更せずにエクスポート
![image.png](https://qiita-image-store.s3.amazonaws.com/0/60734/53330ca6-8387-0c40-cf99-78b3efc48ab7.png)

プロジェクトの直下にOutputフォルダが作成されて中にglTFファイルがあります。（Assetフォルダじゃないので注意）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/60734/53e63577-fc8a-e571-fd5f-a470e153ab6a.png)

#ランチャー用のglbファイルの作成
ここまでくればほぼゴールです。
作成したglTFファイルをglTF Toolsが入っているVS Codeで開き（ランチャー用のglbファイルの作成の基本は[参考記事参照](http://www.tattichan.work/entry/animated3dapp)）、アニメーションの設定をします。
ここで正しくできていればanimationsのリストの要素が２つあるはずです。


```js:AnimatedCube.gltf(抜粋)
"animations": [
    {
      "channels": [
		//省略
      ],
      "samplers": [
        {
		//省略
      ],
      "name": "Cube|Gaze"
    },
    {
      "channels": [
		//省略
      ],
      "samplers": [
		//省略
      ],
      "name": "Cube|NotGaze"
    }
  ]
```

アニメーションがちゃんとあったらアニメーションのトリガーの設定を追加します。
今回は２つのアニメーションをそれぞれGAZEとALWAYSに割り当てました。

```js:AnimatedCube.gltf(抜粋)
"extensionsUsed": [
    "EXT_animation_map"
  ],
  "extensions" : {
      "EXT_animation_map" : {
            "bindings": [
                {
                    "semantic": "GAZE",
                    "animations": [0]
                },
                {
                    "semantic": "ALWAYS",
                    "animations": [1]
                }
            ]
      }
  }
```

設定できたらglbファイルをエクスポートし、HoloLensのプロジェクトに追加、設定し、完成です！

#完成動画
![ダウンロード (2).gif](https://qiita-image-store.s3.amazonaws.com/0/60734/a889c438-b90d-534a-f63f-9881e1556f40.gif)


#終わりに
これで3Dアプリランチャーの表現力が格段に上がります！さて、賢明なる諸兄は何をすべきかはわかりますね？
是非色々とやってみてください！!