HoloLensでアニメーションする3Dランチャを作成するその１

本日は HoloLens の技術調査枠です。
HoloLensでアニメーションする3Dランチャを作成する方法をまとめます。

今回は移動、回転、拡縮のオブジェクトアニメーションを取り扱います。
f:id:bluebirdofoz:20180625091325g:plain

参考サイト

公式ページのガイドラインは以下になります。
docs.microsoft.com

3Dランチャに関するこれまでのまとめ記事は以下です。
bluebirdofoz.hatenablog.com

既に3Dランチャのアニメーション方法について記事にまとめている方がいます。こちらも参考にして下さい。
www.tattichan.work
qiita.com

必要環境

HoloLensのOS Buildが10.0.17134.1004以上の環境で動作します。
bluebirdofoz.hatenablog.com

アニメーションデータを持つglbファイルを作成します。今回はBlenderを利用しました。
bluebirdofoz.hatenablog.com
bluebirdofoz.hatenablog.com

glbファイルの編集が必要となります。VS Codeで編集可能です。
bluebirdofoz.hatenablog.com

アニメーションデータの作成

オブジェクトの移動、回転、拡大縮小アニメーションを持つglbファイルを作成します。
Blenderの新規ファイルを開きます。カメラとランプオブジェクトは不要なので削除しておきます。
f:id:bluebirdofoz:20180625091508j:plain

「ドープシート」画面を開き、「アクション」モードに切り替えます。
新規ボタンをクリックして新規アニメーションを作成します。
f:id:bluebirdofoz:20180625091517j:plain

新規アニメーションが作成されたら、終了フレームの上限を設定します。
今回は80フレーム目を最終フレームとしました。
Cubeオブジェクトの移動、回転、拡大縮小を行い、任意のフレーム位置でキーフレーム登録を行います。
「キーフレーム挿入メニュー(Iキー)」を開き、「位置/回転/拡縮」で現在のオブジェクトのキーフレームを登録できます。
f:id:bluebirdofoz:20180625091530j:plain

キーフレームを全て登録したらgltfファイルでエクスポートします。
gltfファイルの出力には環境構築手順でglTF-Exporterアドオンの導入を行っておく必要があります。
f:id:bluebirdofoz:20180625091538j:plain

glbファイルの編集

出力したgltfファイルをVS Codeで開きます。
アニメーションの出力に成功していれば animations ブロックが生成されています。
f:id:bluebirdofoz:20180625091545j:plain

ここに以下の extensionsUsed と extensions ブロックを追加します。

    "extensionsUsed": [
        "EXT_animation_map"
    ],
    "extensions" : {
        "EXT_animation_map" : {
                "bindings": [
                    {
                        "semantic": "GAZE",
                        "animations": [0]
                    }
                ]
        }
    },

「"semantic": "GAZE"」は注視時のアニメーション実行を示します。
アニメーションの実行タイミングは、常時、掴み時、注視時、接近時、ポイント時があります。
詳細は公式ページを参照ください。
f:id:bluebirdofoz:20180625091554j:plain