Vuforia Studio HoloLens2備忘録：HoloLensで写真表示AR、を簡単作成

#はじめに

Vuforia Studioでは、HoloLens用のARコンテンツを簡単に作成できる。
写真表示ARを簡単に作成する例を、備忘録としておく。

#前提

この備忘録は、Vuforia Studioで、ARコンテンツを独力で作成できる人が対象。
また、Vuforia Studioで作成したARの実行確認には、Microsoft Storeから最新Vuforia Viewアプリをインストール済のHoloLensが必要。今回の例は、HoloLens1でも2でも利用できる。
HoloLensは、WiFi経由で、Vuforia Studioで作成したARコンテンツの公開サーバー（Vuforia Experience Server）に接続ができることが必要。

#写真表示ARを作成

###写真ファイルを準備する

JPG、PNG、などのイメージファイルを準備しておく。
今回は、下の写真を大きなサイズで表示してみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/238dd9ba-7f82-12c4-10e2-0662dbce3431.png)

###HoloLens用のARプロジェクトを作成する

新規ARプロジェクトを「3D Eyewear」で作成を開始する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/5cc5447c-5b9b-1b73-0861-48dc63ab8478.png)

###写真表示用の3Dイメージウイジェットを配置して、イメージファイルを指定する

作成したARプロジェクトの3Dキャンパス表示にて、ウィジェットの中から、「3Dイメージ」をドラッグ＆ドロップで配置する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/5135da2c-a4e9-7fa2-27f9-8eb189af402b.png)
配置した3Dイメージウィジェットに対して、画面右の「リソース＋」をクリックして、イメージファイルを登録する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/a026ee72-e42a-b5e5-018e-9e286154465a.png)

###写真の位置、向き、大きさを指定する

3Dイメージはデフォルトで水平方向に倒れた状態になっている。これは、画面右の「X回転」を「-90」度から「0」度に変更することで、垂直に立てることができる。また、3Dイメージはデフォルトの位置の基準が中央になっているために下半分が基準面の下になってしまう。そこで、画面右下の「ピボット」を「中央下」に変更することで基準を変更しておく。
尚、3Dイメージの水平位置を原点（X座標を0、Z座標を0）にしておく。Vuforia Studioでは、水平方向が X座標と Z座標で、高さ方向が Y座標になっているので注意。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/787f1aa2-0042-a606-2fa1-504291ebd56d.png)
表示する大きさは、メートル単位で指定できる。写真そのものの高さを 2メートルと大きく表示してみる。それには、画面右上の「高さ」に 2 を入力する。Vuforia Studioの単位はメートルになっているので、これで 2メートルを指定したことになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/fa1b5bc1-dd5e-25d9-9259-276276df0d11.png)

###写真の表示位置の基準（ARのターゲット）を指定する

写真をどう表示するかの指定ができた。あとは、ARとして何を基準に表示するかのターゲットの指定をする必要がある。Vuforia Studioでは、HoloLensコンテンツ用に、4種類のターゲットを利用できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/a55abada-e9b3-0e3e-5a53-6602bbced409.png)
今回は、マーカーや写真などの準備が不要で簡単な、「空間ターゲット」を使用する。これは、AR実行時にHoloLensが見つけてくる平面を選択すればARの表示ができるものである。ターゲットから「空間ターゲット」をドラッグ＆ドロップで3Dキャンパス上に配置する。「空間ターゲット」の位置を原点（X座標を0、Z座標を0）にしておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/cda52761-cd12-2809-385a-2e55c1c60f1b.png)
「空間ターゲット」を使う場合には、ARプロジェクトの「エクスペリエンス」にて、「ThingMark 関連付け」を「なし」に変更しておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/d5855f7e-2cb2-eeea-cdbe-0606b96d6e0f.png)


###プレビューで表示を確認する

プレビューを実行してみる。写真が立てられて表示できている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/39539cb8-e11f-8bdd-6503-50bbc35ecaea.png)

###公開(パブリッシュ)して、HoloLensからARコンテンツをダウンロードできるようにする

コンテンツが作成できたので、サーバーにパブリッシュして、HoloLensから作成したARコンテンツをダウンロードできるようにする。タブレット/スマホ用のARコンテンツのパブリッシュの場合と同様に、ARプロジェクトに公開用のサーバーURLを指定して認証済としておき、パブリッシュを実行する。

パブリッシュに成功したら、Vuforia Studioの　共有 > エクスペリエンスの共有　にて、パブリッシュしたARコンテンツを呼び出すためのQRコードを表示して確認しておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/6d4e61ae-b957-efc9-dd6c-2892b844726f.png)

###作成したARを HoloLensで呼び出して実行する

WiFi経由でサーバーに接続が可能になっている HoloLensにて、インストール済みの Vuforia Viewアプリを起動する。今回は、HoloLens2で実行してみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/5b8e019b-c044-a76f-5b78-95e1b3be382a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/b5810c69-cff2-d7ac-040c-5bbaa16123c0.png)
Vuforia Viewアプリが起動すると、スキャンモードになる。そこで、上記の QRコードを見てスキャンする。実行に認証が必要なコンテンツの場合は認証を求められるので、HoloLensの文字入力方法で認証をする。ARを開始すると、平面を指定するように求められるので、見ている場所を写真を表示したい場所に向けて、HoloLensが検出した平面を示す緑色の枠を確認して、エアタップで確定する。
![HoloLensViewImage.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/3f715c47-a765-3d08-a287-1eb938278eda.gif)
おぉ！ 写真を大きく空間に表示できた!

#おわりに

Vuforia Studioで HoloLensにて空間上に写真を仮想表示させるARコンテンツを簡単に作成できる例を、備忘録とした。HoloLens用の簡単なARコンテンツであれば、Unityで開発する場合と比べて、環境準備や設定をほとんどせずに、簡単なメニュー構成のエディタで素早く作成でき、素早く実行できるのはすごい。

#参考

・[3D イメージ @ Vuforia Studioヘルプ](
http://support.ptc.com/help/vuforia/studio/ja/#page/Studio_Help_Center%2FWidget3DImage.html%23)

・[HoloLensで動画再生AR、を簡単作成](https://qiita.com/tm181001/items/fd2709e5f51a4327b7b8)