MRが楽しい

MRやVRについて学習したことを書き残す

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

本日は HoloLens の技術調査枠です。
HoloLensでアニメーションする3Dランチャを作成する方法をまとめます。
前回記事の続きです。
bluebirdofoz.hatenablog.com

今回はオブジェクトアニメーションの応用を試してみます。

複数オブジェクトアニメーションの検証

複数オブジェクトのアニメーションを試してみます。
その1で作成したCubeオブジェクトのみのアニメーションプロジェクトを元に、Icosphereオブジェクトを追加します。
f:id:bluebirdofoz:20180629030209j:plain

Icosphereオブジェクトには別の動きのアニメーションを設定します。
f:id:bluebirdofoz:20180629030217j:plain

以下のような動きをする複数オブジェクトのアニメーションデータを作成しました。
f:id:bluebirdofoz:20180629030225g:plain

3Dランチャとして設定して確認すると、正常に動作しました。
f:id:bluebirdofoz:20180629030241g:plain

原点位置が中心と異なるオブジェクトアニメーションの検証

次に原点位置が中心と異なるオブジェクトのアニメーションを試してみます。
以下のような縦長のCubeオブジェクトを作成し、原点位置が末端部分となるようにメッシュ位置を変更します。
f:id:bluebirdofoz:20180629030257j:plain

そして以下のような末端部分を中心に回転を行うアニメーションデータを作成しました。
f:id:bluebirdofoz:20180629030309g:plain

3Dランチャとして設定して確認すると、こちらも正常に動作しました。
f:id:bluebirdofoz:20180629030326g:plain


オブジェクトアニメーションでも工夫次第で様々表現が利用可能です。
次回はモーフアニメーションに関する応用調査です。
bluebirdofoz.hatenablog.com

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

本日は HoloLens の技術調査枠です。
HoloLensでアニメーションする3Dランチャを作成する方法をまとめます。
前回記事の続きです。
bluebirdofoz.hatenablog.com

今回はアニメーションのフレーム登録に際して少々不可解な動作を検出したのでまとめます。
実行環境は OS Build:10.0.17686.1003 。
データ作成は Blender 2.79 、gltf-exporter は 2018/6/28 現在で最新のものを使用しています。

アニメーションの検証

その2で作成したモーフアニメーションのモデルをサンプルに使用します。
bluebirdofoz.hatenablog.com
f:id:bluebirdofoz:20180628021233j:plain
検証においては取り違えがないようにサンプル毎に固有のマテリアル色を設定します。

その2の記事では以下のように、全60フレームのアニメーションに4カ所のキーフレームを登録しました。
・開始フレーム:1、終了フレーム:60
・ 0 フレーム:キー値 0.000
・20 フレーム:キー値 1.000
・40 フレーム:キー値 0.000
・60 フレーム:キー値 0.000
f:id:bluebirdofoz:20180628021245j:plain

その結果、以下のような変形と戻りを繰り返しアニメーションする3Dランチャが作成できました。
f:id:bluebirdofoz:20180628021256g:plain

このアニメーションを実現する場合、60 フレーム目の登録は不要に見えます。
40 フレーム目で既に 0.000 の戻り変形を実施しており、40 ~ 60 フレームの間に変化はないからです。

ここで 60 フレーム目のキーフレームを削除した、以下のデータを用意してみました。
・開始フレーム:1、終了フレーム:60
・ 0 フレーム:キー値 0.000
・20 フレーム:キー値 1.000
・40 フレーム:キー値 0.000
f:id:bluebirdofoz:20180628021318j:plain

しかし、3Dランチャとして配置すると、不思議なことに戻りのアニメーションが表示されません。
20 ~ 40 フレームの変化が飛ばされたようなアニメーションになります。
f:id:bluebirdofoz:20180628021327g:plain

試しに 40 フレーム目側のキーフレームを削除したデータも実施してみます。
・開始フレーム:1、終了フレーム:60
・ 0 フレーム:キー値 0.000
・20 フレーム:キー値 1.000
・60 フレーム:キー値 0.000
f:id:bluebirdofoz:20180628021348j:plain

3Dランチャとして配置すると、同じく戻りのアニメーションが表示されません。
20 ~ 60 フレームの変化が飛ばされたようなアニメーションになります。
気になる点として、先ほどのデータと比べると変形自体もゆっくりと表示されているように見えます。
f:id:bluebirdofoz:20180628021359g:plain

もしかしたら最後のキーフレームのみ再生できないのかと考え、以下のデータを用意してみました。
最終フレームを 41 に変更し、41 フレーム目に 0.000 のキー値を登録しています。
・開始フレーム:1、終了フレーム:41
・ 0 フレーム:キー値 0.000
・20 フレーム:キー値 1.000
・40 フレーム:キー値 0.000
・41 フレーム:キー値 0.000
f:id:bluebirdofoz:20180628021420j:plain

結果は戻りのアニメーションが表示されませんでした。
20 ~ 41 フレームの変化が飛ばされたようなアニメーションになります。
f:id:bluebirdofoz:20180628021431g:plain

キーフレームではなく最終フレームまでのフレーム数の問題かと考え、次は以下のデータを用意してみました。
最終フレームを 100 に変更し、キーフレーム登録の最後は 40 フレーム目としています。
・開始フレーム:1、終了フレーム:100
・ 0 フレーム:キー値 0.000
・20 フレーム:キー値 1.000
・40 フレーム:キー値 0.000
f:id:bluebirdofoz:20180628021448j:plain

結果、こちらも戻りのアニメーションが表示されませんでした。
20 ~ 40 フレームの変化が飛ばされたようなアニメーションになります。
f:id:bluebirdofoz:20180628021457g:plain

では最後の確認にと、最終フレームの 100 フレーム目にキーフレームを登録した、以下のデータを用意してみました。
・開始フレーム:1、終了フレーム:100
・ 0 フレーム:キー値 0.000
・20 フレーム:キー値 1.000
・40 フレーム:キー値 0.000
・100 フレーム:キー値 0.000
f:id:bluebirdofoz:20180628021515j:plain

結果、こちらは戻りアニメーションが表示されました。
しかし、戻りのアニメーションがゆっくりと表示されているように見えます。
f:id:bluebirdofoz:20180628021526g:plain

規則性について不明ですが、キーフレームの最後、または最終フレーム近くのキーフレームが再生されない条件があるように見えます。
また、最終フレームまでのフレーム数に応じて再生速度が変わる問題もありそうです。

同じ問題の報告事例を軽く探してみましたが見当たらなかったので、本件は筆者の環境特有の問題である可能性もあります。
何にせよ。3Dランチャのアニメーションを作成する際は、実際にHome空間で再生するとどうなるか確認した方がよいでしょう。

次回はオブジェクトアニメーションの応用を試してみます。
bluebirdofoz.hatenablog.com

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

本日は HoloLens の技術調査枠です。
HoloLensでアニメーションする3Dランチャを作成する方法をまとめます。
前回記事の続きです。
bluebirdofoz.hatenablog.com

今回から3Dランチャ作成中に気付いた制限事項や注意点をまとめていきます。
本記事はボーンアニメーション(スケルタルアニメーション)についてです。

3Dランチャでのボーンアニメーション

結論から述べると、OS Build:10.0.17686.1003 環境時点では3Dランチャでのボーンアニメーションは利用できませんでした。
3Dランチャ配置時に、以下のようにメッシュ自体が表示されなくなります。
f:id:bluebirdofoz:20180627013022j:plain
(モデルによっては「We couldn't place this holograms」というメッセージが表示されます)

確認に際して、Blenderにてアーマチュアを用いてボーンアニメーションを設定した最小限の構成の3Dモデルを使用しています。
f:id:bluebirdofoz:20180627013115j:plain

公式ページのガイドラインにもボーンアニメーションに関する言及がないことから、現状のバージョンではボーンアニメーションがサポートされていないものと思われます。
docs.microsoft.com

このため、3Dランチャ用に作成したホロ恋子モデルのボーンアニメーションも利用できませんでした。
f:id:bluebirdofoz:20180627013135j:plain

どうしてもアニメーションを行いたい場合は、モデルのアーマチュアを取り払い、シェイプキーに落とし込んでモーフアニメーションとして再生します。
f:id:bluebirdofoz:20180627013144j:plain

LT資料で紹介した、以下の手を振るアニメーションはこの手法を利用しています。
f:id:bluebirdofoz:20180627013155g:plain
ただしシェイプキーを利用する場合、別々のポーズ間の動きを自動補間してくれないので、かなり自由度に制限がつきます。

次回はアニメーションのキーフレーム登録に関する注意点です。
bluebirdofoz.hatenablog.com

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

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

今回はBlenderのシェイプキーを使ったモーフアニメーションを取り扱います。
f:id:bluebirdofoz:20180626021806g:plain

前回記事の「アニメーションデータの作成」からの手順になります。
bluebirdofoz.hatenablog.com

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

シェイプキーによるモーフアニメーションを持つglbファイルを作成します。
Blenderの新規ファイルを開きます。カメラとランプは不要なので削除しておきます。
f:id:bluebirdofoz:20180626021837j:plain

初めにアニメーションの元となるオブジェクトのシェイプキーを作成します。
Cubeオブジェクトを選択し、データタブを開きます。
「シェイプキー」パネルの「+」ボタンを2回クリックします。
f:id:bluebirdofoz:20180626021846j:plain

すると、「Basis」というシェイプキーと「Key 1」というシェイプキーが生成されます。
「Basis」はオブジェクトの元の形を示すシェイプキーです。
変形用のシェイプキーを作成するため、「Key 1」を選択して、「編集モード」を開きます。
f:id:bluebirdofoz:20180626021854j:plain

「編集モード」でCubeオブジェクトを台形に変形させました。
形を決めたら「オブジェクトモード」に戻ります。
f:id:bluebirdofoz:20180626021901j:plain

このとき「オブジェクトモード」に戻ると、Cubeオブジェクトの形が元に戻ります。
これは変形を登録した「Key 1」のシェイプキーの値が「0.000」に設定されているためです。
f:id:bluebirdofoz:20180626021909j:plain

「Key 1」のシェイプキーの値を「1.000」に設定すると、登録した変形を行います。
これでシェイプキーが作成できました。
f:id:bluebirdofoz:20180626021918j:plain

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

次にアニメーションの登録を行います。
今回は60フレーム目を最終フレームとし、0フレーム目と40フレーム目に値「0.000」の変形を、20フレーム目に値「1.000」の変形を登録します。
任意のフレーム位置を選択し、「シェイプキー」パネルの値項目を右クリックすると「キーフレームを挿入」が表示されます。
f:id:bluebirdofoz:20180626021935j:plain

キーフレームの登録を行ったら、アニメーションを再生して期待する動きになっていることを確認します。
f:id:bluebirdofoz:20180626021943j:plain

問題なければgltfファイルでエクスポートします。
f:id:bluebirdofoz:20180626021953j:plain

glbファイルの編集

gltfファイルを出力すれば、後は前回記事の「アニメーションデータの作成」の手順と同様です。
bluebirdofoz.hatenablog.com

3Dランチャの設定

こちらも前回手順と同様です。
任意のプロジェクトファイルを開き、最終出力の glb ファイルをコンテンツとして追加し、マニュフェストファイルを編集します。
f:id:bluebirdofoz:20180626022014j:plain

作成したアプリのランチャをHome空間に配置し、注視するとアニメーションが開始します。
f:id:bluebirdofoz:20180626022023g:plain

公式ページにある通り、3Dランチャに設定できるアニメーションには制限事項があります。
モーフアニメーションを利用する場合、頂点数の上限が指定されているので注意しましょう。
docs.microsoft.com

再生時間: 最大 20 分
キーフレーム数:最大 36,000 フレーム
モーフの頂点数:最大 8,192 頂点

次回以降は調査の際に気付いた制限事項や注意事項をまとめていきます。
bluebirdofoz.hatenablog.com

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

本日は 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

編集を行ったらメニューの 表示 -> コマンドパレット からコマンドパレットを開きます。
「export glb」を実行し、編集した内容を glb ファイルで出力します。
f:id:bluebirdofoz:20180625091602j:plain

3Dランチャの設定

後は通常の3Dランチャ作成と同様です。
bluebirdofoz.hatenablog.com

任意のプロジェクトファイルを開き、glb ファイルをコンテンツとして追加し、マニュフェストファイルを編集します。
f:id:bluebirdofoz:20180625091626j:plain

作成したアプリのランチャをHome空間に配置し、注視するとアニメーションが開始します。
f:id:bluebirdofoz:20180625091325g:plain

次回はシェイプキーを使ったモーフアニメーションを作成します。
bluebirdofoz.hatenablog.com

Tokyo HoloLens ミートアップ vol.9での発表資料

Tokyo HoloLens ミートアップ vol.9のLT枠で発表を行いました。
hololens.connpass.com

発表で用いた資料を以下にアップしました。

www.slideshare.net

LTでは技術的な詳細を入れ込む時間がなかったので、その辺りは今後ブログに書き下していきます。
以下はスライドに添付していた動画の抜粋です。キャラクタモデルが3Dランチャでモーフアニメーションを行います。
f:id:bluebirdofoz:20180624221057g:plain

以下の記事にアニメーションする3Dランチャモデルの作成方法をまとめました。
bluebirdofoz.hatenablog.com

HoloLens用のオリジナルモデルを作成する まとめ(1~18)

本日はまとめ記事です。
「HoloLens用のオリジナルモデルを作成する」記事をまとめます。
数が多いため、今回はその1~その18までです。