LoginSignup
11
4

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-04-28

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

その辺の実装についてはデコシがまとめてくれています(記事のリンク)

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

複数のアニメーションを持つglTFファイルを作成

まずは3Dアプリランチャーの元となる3Dモデルを作ります(私はBlenderで作りました)。
image.png

このときにアニメーション(Blender的にはアクション)を2つ作っておきます。
image.png

まずはFBXでエクスポート

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

Unityにインポート

エクスポートしたFBXファイルをUnityにインポートします(Unityは2017.4.1を使いました)。
ちゃんと2つアニメーションがあるか確認してください。
image.png

アニメーションの設定

FBXファイルをインポートしてできた3DモデルをHierarchyビューに配置し、新規作成したAnimatorControllerを設定して下さい(名前はなんでもよい)。
image.png

あとはAnimatorControllerに3Dモデルの中にあるアニメーションを設定します(Transitionはなくてもよい)。
image.png

ここまで出来たらHierarchyビューの3DモデルをProjectビューにドロップし、Prefab化します。
image.png

glTF-Tools-for-Unityのインポート

UnityからglTFをエクスポートするためのツールであるglTF-Tools-for-Unityのunitypackageをダウンロードし、インポートします。

glTFのエクスポート

glTF-Tools-for-Unityのインポートにアニメーションの設定のところで作成したPrefabを右クリックするとエクスポートのメニューが追加されているので、選択します。
image.png

ウィンドウが出たら特に設定変更せずにエクスポート
image.png

プロジェクトの直下にOutputフォルダが作成されて中にglTFファイルがあります。(Assetフォルダじゃないので注意)
image.png

ランチャー用のglbファイルの作成

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

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

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

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

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

完成動画

ダウンロード (2).gif

終わりに

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

11
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
4