【Unity+Android+Vuforia】クリスマスパーティ向けレンタルトナカイ

この記事は、NTTテクノクロス Advent Calendar 2021 の16日目です。

こんにちは、NTTテクノクロスの定行です。普段はVR関係の配信システムやアプリケーション開発をやっています。今回はクリスマスパーティへトナカイを派遣するべく、特定の画像上にトナカイの3Dモデルを表示させるARアプリをでUnity+Android+Vuforiaで作成してみます。※ものすごく古典的なARアプリです

Unity+Vuforia組み合わせは簡単に導入できる反面、バージョンによって微妙に導入方法が異なるので個人的な備忘録も兼ねてます。Unityに興味があるけど触った事がないという人は是非やってみてください。想像以上に簡単にARプリ作成ができます。作成までの手順は以下になります。

1. Unityインストール
2. Vuforiaへ画像を登録
3. アプリケーション作成

それではやってみましょう。

#1.Unityインストール

①"Unity Hub" をダウンロードしてインストール。

https://unity3d.com/jp/get-unity/download

②"Unity Hub" を実行してUnityHubへログイン(IDを取得していない場合"IDを作成"から
作成) 

||
|:-:|
|![UnityLogin.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/cb6ab8a4-fb2c-63ae-c236-2b00379e9826.gif)|

③"Unity Hub"上でライセンス(Personal)を取得

||
|:-:|
|![UnityLisence.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/19c1b942-594b-a157-7c32-5310150e376f.gif)|

④"インストール"⇒推奨リリース(2021年12月現在2020.3.23)のUnityを"Android Build Support"にチェックをいれてインストール

||
|:-:|
|![UnityInstall.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/f8884a2f-6bc6-6739-aa32-4d5432e2fdbf.gif)|

これでUnityのインストールは終了です。次は認識させる画像を登録します。

#2. Vuforiaへ画像を登録
**アプリケーション上から画像を認識するために、Vuforiaへ登録する必要があります。**

https://developer.vuforia.com/

①IDを取得してログイン

||
|:-:|
|<img width="600" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/c44d9b61-4e41-a36c-3478-56fa0a547466.png">|

②License Mnagerで”GetBasic”をクリック

||
|:-:|
|<img width="600" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/f68dfc11-6ec2-30c2-69c0-02ff590788fa.png">|

③ライセンス名(任意)を入力して"Confirm"をクリック

||
|:-:|
|<img width="400" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/9c4f5fb8-282c-a4e6-5599-aff61b8110c5.png">|

④Lisence Mnaagerから作成したライセンスを確認して、ライセンスキーを記録しておく。※記録したライセンスキーはアプリケーション作成時に使用します。

||
|:-:|
|<img width="400" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/c84e8ebd-75ba-1af7-523e-fe9689c97d01.png">|


**ターゲット画像を登録**

今回は”いらすとや”の以下の画像を使わせてもらいました。Vuforiaへ登録するためにペイントを使用してjpegへ変換して使います。

https://www.irasutoya.com/2016/12/blog-post_374.html

①Target Managerで”Add DataBase”をクリック

||
|:-:|
![Vulogin5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/932b09e2-ce65-f3ce-512b-826f930fd755.png)|

②"Device"にチェックをいれたまま、DataBase名(任意)をいれて"Create"をクリック

||
|:-:|
|<img width="400" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/9d1beb7a-e378-9151-864c-ba8db8df5a21.png">|

③Target Managerから作成したDataBaseをクリックして、”Add Target”をクリック

||
|:-:
|![Vulogin7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/f1b60bb8-1686-04c4-5f53-1517ea21842e.png)|

④"Browse"で画像を選択して、`Width:1`を設定してAddをクリック

||
|:-:
|![Vulogin8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/e0ade05f-5f41-29aa-7056-377c0eb083be.png)|

⑤Target MnagerでDownload Database (All)"をクリックしてDBをダウンロード※ダウンロードしたDBはアプリケーション作成時に使用します。

||
|:-:
|![Vulogin9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/2d69857c-7860-0674-1256-85c137916146.png)|

以上でVuforiaへのターゲット画像の登録は終了です。

#3.アプリケーション作成

**Unityプロジェクトの作成**

||
|:-:
|![ProjectMake.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/1acbc491-5561-7975-0c92-afdd4223e5ee.gif)|

**Vuforia使用準備**
①PackageManagerからVuforiaを追加

windows -> PackageManager →　"Add package form git URL"へ「git+https\://git-packages.developer.vuforia.com#9.8.8」を追加

||
|:-:
|![AddPack.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/6fbd8671-e5a3-3b63-f474-f5af16f2c8b6.gif)|

**ターゲット画像配置**

①MainCamera削除 → ARカメラを追加(右クリック→VuforiaEngine→ARCamera)

||
|:-:
|![AddARCamera.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/d0c3d1a5-e684-8aa8-6c05-8012f00c8d0d.gif)|

②ARCamera → "Open Vuforia Engine configureation" → "App Lisence Key"にVuforiaのサイトで取得したLisence Keyを入力

||
|:-:
|![AddLisence.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/e235747c-c309-5bc0-c0ff-e01020277b79.gif)|

③VuforiaからダウンロードしたDBをUnityへドラッグ&ドロップして”Import”をクリック

||
|:-:
|![AddDataBase.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/2592ee07-797a-2425-bed4-49aa16a39e71.gif)|

④ImageTargetを追加して設定を`Type:From DataBase` `DataBase:作成したDB` へ変更

||
|:-:
|![ImageTarget.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/9ae41c03-988e-1a07-26fa-d5da57a640a3.gif)|


**トナカイのモデル配置と雪を降らせる**

※モデルは以下を使用させてもらいました。
https://free3d.com/ja/3d-model/reindeer-v1--219610.html

①ダウンロードしたファイル一式をUnity上"Assets"へドラッグ&ドロップ
②"Aeets"に登録されたobjファイルを"Hierarchy"の"ImageTarget"へドラッグ&ドロップ



||
|:-:
|![AddObject.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/5b788a0d-f8fa-0d6d-f7b3-a3ad3ce3e2ad.gif)|

③トナカイのオブジェクトのパラメータを以下に変更

`"Transform" → "Rotationのx=-90" `
`"Transform" → "ScaleのX=0.01 Y=0.01 Z=0.01"`

||
|:-:
|![SetParam.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/8179724c-7632-3942-7c5b-9217e1eb0ac6.gif)|

③雪を降らせてみる

ImageTargetの下にParticleを追加し、パラメータを以下に設定

`"Transform" → "PostionのY=1"`
`"Transform" → "Rotationのx=90"`
`"Start Life TIme" = 0.5`
`"Start SPeed TIme" = 0.5`
`"Emiistion" → "Rate Over"を20`
`"StartLife TIme" = 0.5`
`"Emission" → ScaleのXとYを2`

||
|:-:
![Particle.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/77d2cdb9-9002-ecf9-899d-da5b759de421.gif)|

④ビルド&実行

AndroidをPCへ接続している状態で"File" → "Build Setting"、プラットフォームをAndroidへ変更

AndroidをPCへ接続している状態で"Build And Run" → 適当なファイル名を入力 → "保存"
※Androidは開発者モードになっている必要あり("端末名　開発者オプションON" で検索 )

||
|:-:
|![Build.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/dc0f4fc0-5ecb-4791-c675-f0ac5ea836fa.gif)|

以上でAndroid端末にアプリケーションがインストールされます。

##最終制作物

[現実空間]

||
|:-:
|![real2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/21548641-6c69-a611-60de-595da977644b.jpeg)|

[アプリケーション越しでのぞいた時]

||
|:-:
|![ar2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2321555/4f0bceb8-ecc8-e718-3d2b-e0b1778aceff.gif)|

##最後に
Android上でUnity+Vuforiaで簡単にARアプリが作れちゃいました。クリスマスパーティを予定されてる方は演出の一つとして是非トナカイを派遣してみてください。

明日は、[@yu_kawachaki](https://qiita.com/yu_kawachaki) による NTTテクノクロス Advent Calendar 2021 の17日目をお届けしますので引き続きよろしくお願いいたします！