VuforiaとUnityでコードを書かずに始められる簡単AR開発

# はじめに
ARというと[ARKit](https://developer.apple.com/jp/arkit/)や[ARCore](https://developers.google.com/ar/)が有名です。
しかし、ARKit、ARCore両対応のアプリを作ろうとすると大変です。また、ARCore対応の端末はまだそこまで多くありません。
そこで、今回はVuforiaというサービスとUnityを組み合わせて簡単にAR開発を始められる方法を紹介します。

# 環境
今回は以下の環境で開発しました
- 開発機：Windows10
- Unity2018.2.4f1
- HUAWEI nova lite(Android7.0)

# クラウド側準備
## 登録
Vuforiaは開発を始める前に登録が必要です
https://developer.vuforia.com/
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/f22f9258-8834-a4d2-5bab-6571f02b9d91.png)
右上の「Register」から登録を行います
名前やユーザー名、Emailアドレスを登録します
Companyは適当でも大丈夫です。

登録が終わると認証のメールが届くので、URLをクリックし認証します。
するとログインできるようになるので登録はこれで完了です

## ライセンス発行
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/556de324-cc58-c2be-7c30-25a62e464037.png)
左側の「Get Development Key」をクリックしアプリ名を入力します。
アプリ名は後からでも変えられるので大丈夫です

![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/01cc32e5-1470-f132-8f1e-355d2033ae2e.png)

先ほどの画面に戻りアプリ名をクリックするとライセンスキーが発行されていることがわかります。
このライセンスキーは後ほどUnity上で使用します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/fa38f7fa-dccd-f0d4-f69b-a30b41270ccf.png)


## 画像の登録
VuforiaにARのターゲットとなる画像を登録します。
隣のタブTarget Managerを開き、Add Databaseをクリックします
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/c1bdb900-0060-9d37-dcdb-68e882cb88a1.png)

データベース名を入れTypeはDeviceにしておきます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/6d91a82b-30b2-d7f7-67cc-0b40b692875b.png)

Add Targetで画像を登録します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/4f56cf51-a5bb-84d8-10df-a9e632100fb4.png)

最も基本的なのはSingle Imageで、指定した画像をターゲットにしてオブジェクトを表示したりすることができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/fb868ef8-6a9e-0bc7-ec52-753efc6b9a50.png)

各Typeについては↓がわかりやすいです
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/85057a6a-9c03-5784-4192-1ab1b8ae8fc9.png)
<iframe src="//www.slideshare.net/slideshow/embed_code/key/FcCgCTwdrAagA0?startSlide=7" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/UnityTechnologiesJapan002/unite-2018-tokyounityvuforiaar" title="【Unite 2018 Tokyo】UnityでのVuforiaを使用したARの概要" target="_blank">【Unite 2018 Tokyo】UnityでのVuforiaを使用したARの概要</a> </strong> from <strong><a href="//www.slideshare.net/UnityTechnologiesJapan002" target="_blank">UnityTechnologiesJapan002</a></strong> </div>
<br>

Widthは現実のスケールと同じにしておくといいです。
1m=1なので20cmだったら0.2を入力します。

登録されると↓のようにRating(=精度)が表示されます。
基本的には複雑な絵柄だとRatiingが高くなるようです
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/cae35270-183f-a096-1a52-5295dcfc0e3e.png)


最後にDownload Database(All)をクリックしデータベースをダウンロードします。
今回はUnity Editor方式にしてダウンロードしておきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/c47155ff-6aab-90d3-848a-5e6a803a3632.png)

これでクラウド側の準備は完了です。
次にUnity側の準備をします。

# Unity側準備
## Vuforiaのインストール
Unityプロジェクトを作成しEdit->Project Settings->Player Settings->XR Settingsの
XR Support InstallersからVuforiaのUnity用コンポーネントをインストールすることができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/0a50a24e-78da-7fa3-30f8-39d45eeb1668.png)

インストールが終わると、右クリックのメニューからVuforia用のオブジェクトが作成できるようになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/9c82b21e-c311-fdc8-346d-e7de53aee706.png)

## プロジェクト用設定
Hierarchy上で右クリックしVuforia->AR Cameraと選択します。
すると必要なアセットをインポートするか聞かれるので「Import」を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/d13ddb58-1c10-72b2-a6c8-9fee7876a927.png)

次にEdit->Project Settings->Player Settings->XR Settingsを開いて
Vuforia Augmented Reality Supportedにチェックを入れます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/cb6b2ada-2558-cd65-0441-91a72c130852.png)

ライセンスに同意します。Acceptをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/8019906c-c065-c67a-5349-08b79201c320.png)

次にWindow->Vuforia Configurationを開き、ライセンスを登録します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/611712c4-be08-d12c-32b6-e17f531f3c7d.png)

App License Keyの部分に発行されたLicense Keyをコピペします
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/1f8f628f-f92b-115e-e865-6ecd18afc210.png)

最後に先ほどダウンロードしたデータベースをインポートします。
UnityPackage形式になっているので、ダブルクリックするとインポートされます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/0f62965b-657c-29a5-77eb-5298883be5de.png)

これでようやく下準備ができました。

# 実装
初期状態です
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/d874fed9-59a8-fb77-d865-835263c04ffb.png)

Main Cameraは使わないので削除します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/dcbef79a-c0f2-a41a-e25b-cf2f16d60ff4.png)

メニューからAR Cameraを作成します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/97704b7b-8259-a90d-690c-0d06f79a66bd.png)

同じようにVuforia -> ImageでImage Targetを作成します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/7f3a2299-59ae-1136-b9f4-0be76ee703a4.png)

Image TargetのInspectorを見ると、先ほど登録した画像が表示されています。
複数の画像を登録した場合は「Image Target Behaviour」の中のImage Targetを切り替えることで、Targetにしたい画像を選択できます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/c7752eb2-f3f8-b6e6-8556-05898ce31a94.png)

## ターゲットが認識されたときに表示したいものを設置する
Image Targetの子に、Sphereを作成します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/9de8df9e-a9d1-b40e-91bc-1bb5c8303656.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/756a7fc1-1d99-f601-d025-fd132a5aade5.png)

このままだと画像と被ってしまうので位置を少し上にあげておきます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/105021/1cbed6b4-62fe-3edb-914a-fc6bade89abf.png)

これで準備は完了です！
ビルドして端末で実行すると・・・
![vuforia1.gif](https://qiita-image-store.s3.amazonaws.com/0/105021/67e08b23-5fc9-e80d-bffd-adafadaacb58.gif)

ターゲットを認識するとSphereが表示されました

# まとめ
下準備は少し大変ですがVuforiaはトラッキング性能が良く、機種依存も少ない優れたARプラットフォームです。
また、VRと組み合わせて使ったりすることも可能です。
是非、VuforiaとUnityで気軽にARを始めてみてはどうでしょう？