Vuforia EngineとUnityで楽々AR体験（前編）

:::note warn
この記事は2021年1月21日に弊社ブログにて公開された記事の移植記事となります。
:::

始めまして、もしくはお久しぶりです！[@penguin3-dev](https://qiita.com/penguin3-dev)（証拠）と申します。
株式会社エクス技術ブログ「エクスてくいの！情報」からQiitaにお引越しして私の最初の（移行）記事となります。上記に注意書きした通り、2021年産のブログとなりますので、現行の仕様と違った情報を含む恐れがあります。ご容赦ください。<(_ _)>

# はじめに
本記事では、拡張現実（AR）ソフトウェアである[Vuforia Engine](https://www.ptc.com/ja/products/vuforia/vuforia-engine)とゲームエンジンの[Unity](https://unity.com/ja)を使った簡単なARアプリケーションの開発手順とその他豆知識などをゆるく解説していきます。

ARの開発って結局何から手を付けたらいいの？という方やVuforia Engineで開発してみたいけど、何を参考にすれば…という方は是非ご一読ください。

https://www.ptc.com/ja/products/vuforia/vuforia-engine

# 完成目標
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/25ae2421-bb9a-857b-04a5-4114380f82cc.png)
ARマーカーの上に、何かキャラクターがポンっと出てくるようなモバイルアプリを作成してみたい！


# Vuforia EngineとUnityって？
詳しい方も大勢いらっしゃるかと思いますが、しっかり解説していきます！

## Unityとは？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/1bae098f-db83-c515-abc1-0e04f82fa048.png)

　Unityとは、C#を用いたプログラミングが可能なゲームエンジンです。また、<font color="orange">誰でも無料で</font>使用可能で、ノンコーディングでのアプリ作りも可能です。ご存じのゲームアプリやゲームソフトの多数はUnityによって開発されたものだったりします。有名どころでは、「Pokemon GO」や、「どうぶつの森ポケットキャンプ」、「原神」、「FALL GUYS」などもUnityで作成されたゲームです。

**「ゲームエンジン」として名高いUnityですが、”ゲームしか作れないソフト”ではありません！**

 Unityは「映像制作・アニメーション」、「車や建築物の3DCAD（コンピュータによる設計支援）」、「VR空間の設計」など、”モノ”を使う、作る職業の方も使われるソフトウェアです。製造業や建築業から、我々のようなIT屋さん、さらには医療関係者などにも関係のあるソフトなのです！


## Vuforia Engineとは
 >Vuforia Engine is the most widely used platform for AR development, with support for leading phones, tablets, and eyewear. Developers can easily add advanced computer vision functionality to Android, iOS, and UWP apps, to create AR experiences that realistically interact with objects and the environment.
 >
 >> [Unity document (Vuforia Engine AR)](https://docs.unity3d.com/ja/2019.4/Manual/com.ptc.vuforia.engine.html)

 >（直訳）Vuforia Engineは、主要な携帯端末、タブレット、アイウェア（ヘッドマウントディスプレイ）をサポートし、AR開発のための最も広く使用されているプラットフォームです。開発者は、Android、iOS、および**UWPアプリ**に高度なコンピュータビジョン機能を簡単に追加して、オブジェクトや環境とリアルに対話するAR体験を作成することができます。

※UWPアプリ：ユニバーサルWindowsプラットフォーム（UWP）で動くアプリ

　少しだけ追記しますと、マーカーとなる画像をVuforia Engineに登録してそのマーカーを基準にしたARを簡単に作れる、というプラットフォームです。さらに、Vuforia Engineの開発及びアプリケーションの<font color="orange">開発検証に利用する場合は無料で</font>利用する事ができます。<font color="orange">商用リリース時には、有償ライセンスが必要</font>なので、[ライセンスプラン](https://www.ptc.com/ja/products/vuforia/vuforia-engine/pricing)に従ってくださいね。


 # AR開発手順
 本題はここから！
 
 ## Vuforia Engine側の作業

 ### Vuforia Engine developer portalにログイン
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/9f4dc2ed-c3a1-5a94-1f1c-23d0e24ef198.png)
 
　[Vuforia Engine developer portal](https://developer.vuforia.com/home)にログインしましょう。右上の「Log In」リンクからログインフォームに遷移します。

<br>

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/bb55405b-db4b-0ca6-a8d8-970bfa860aa0.png)
 
アカウントがない！という方は「Email Address」枠の下の[「Create account now」](https://developer.vuforia.com/auth/register)か右上の[「Register」](https://developer.vuforia.com/auth/register)から、自分だけの開発者アカウントを作成しましょう。

　**アカウントがあり、もうログインできるよ～という方は、以下の[Developer Keyを取得](#developer-keyを取得)までスキップお願いします。**

 ### Vuforiaアカウント作成
 <img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/c565b899-746f-5316-f348-d1696ec377b6.png">

赤枠で囲われているところは入力必須です。「名前」、「苗字」、「会社名」、「居住国」、「メールアドレス」、「ユーザーネーム（表示名）」、「パスワード」、「パスワード（確認用）」を入力します。

　ロボットでないという方は、「私はロボットではありません」にチェックを入れましょう。また、Vuforia Developer Agreement、PTC privacy policyを確認してチェックを入れましょう。エラーや不備がないのを確認して「Create account」を押下しましょう。

 <br>

 <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/93b0d0ac-3c4c-2962-73da-69ca8fed27dc.png">

　登録したメールアドレスに下画像のようなメールが送信されます。届かない！？と慌てる前に、登録したメールアドレスの確認や、迷惑メールフォルダもチェックしてみましょう。

 <br>
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/5d3d2453-6b26-ea0b-0ef5-7936c3ebba25.png">

 メールの「Click on the following link to complete your registration: 」以下のリンクにアクセスしてアカウントの確認を行いましょう。

<br>
 <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/d4c7f9fd-bef0-a059-feb4-b1e09fb8cc61.png">
 
アカウントが確認されました。先程のログイン画面から「メールアドレス」、「パスワード」を入力しログインします。


### Developer Keyを取得
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/72c8ff99-ce5c-c25a-a636-efb10363d47d.png)

Vuforia Engine developer portalのLicense Manager画面（ログインした後すぐの画面）から、「Get Developer Key」を押下します。

<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/5fe9ec9f-ed6f-09df-88e7-685216b6e121.png)

License Nameに任意の名前を登録します。（先程見たものと同じ）同意書を確認し、Confirmを押下します。

<br>

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/b601912e-df3a-fe0e-8a17-a235341e80c9.png">

License Manager画面に今追加したDeveloper Keyの「sample」が追加されていることが確認できます。

<br>

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/b345515e-9475-6517-43d3-916678a2cea0.png">

追加したDeveloper Keyである「sample」をクリックすると、License Keyが表示されます。<font color="orange">後ほどアプリ作成時に使用するので、メモ帳などにコピー</font>しておきましょう。

### Databaseを追加

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/f4c15567-a136-4a07-7b09-dc5bb6394fcd.png)

Target Managerをクリックします。画面が遷移して…データベースに何も登録されていませんね。それでは、Add Databaseをクリックします。

<br>

<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/42f86589-6105-50bc-7758-4e744b52ebab.png">

Databaseに名前を付けましょう。任意の名前で問題ありませんが、本記事では「sample_database」と名付けました。TypeはDeviceを選択し、Createを押下します。

<br>

<img width ="450" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/1ce44f2c-bfc3-f697-b520-7c286961a8cf.png>

Target Managerに「sample_database」が追加されているのが確認出来ます。その追加されたDatabaseをクリックします。

### Targetを追加
<img width="450" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/14406988-a418-539d-9ae0-0b258a4fe4b4.png>

追加したデータベース（sample_database）画面に遷移しますので、Target（ARマーカー）をデータベースに追加しましょう。ARマーカーのサンプルを以下に置いておきますので、良ければダウンロードしてお使いください！~~センスには目を瞑ってくださいね~~

↓ハイセンスARマーカー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/98569f91-8831-7df1-de5a-3f4d89bfc285.png)

<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/ee7f60b2-f504-ffd2-af60-bfded22bd202.png)

今回作成するアプリは、一番最初に提示した完成目標では、<font color="orange">マーカー画像の上にオブジェクトを浮かせよう</font>としていました。なので、マーカーのTypeはSingle Imageに設定しましょう。

　次は、マーカーファイルを設定しましょう。「Browse…」から先程ダウンロードした「AR_sample_marker.png」を選択します。Widthは今回のアプリでは100に設定します。名前を適当に決めて、「Add」でデータベースに追加してみましょう！

 ### Unity Projectを出力
<img width="450" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/04102a82-e13f-0cfb-768d-a0b79e8089d1.png>

マーカーの設定も一段落したので、「Download Database」から、マーカーの情報をダウンロードしましょう。

<br>

<img width="450" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/4e9f286b-0cf1-52f1-8b08-f027fc37196e.png>

ダウンロード方法を選択します。本記事では【Vuforia EngineとUnityで楽々AR体験】というテーマを設定しているので、Unity Editorを選択して、「Download」を押下しましょう。

<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597915/0490203f-fef1-f73a-5e8e-6cdd2218bb74.png)

Unityのプロジェクトファイルが無事ダウンロードできました！このプロジェクトファイルを使ってUnityで開発に取り掛かりましょう！


# 次回予告
UnityのインストールからUnityのプロジェクト作成、実行した結果も絡めて報告します！
後編は[こちら](https://qiita.com/penguin3-dev/item/f77e277299e5d655bdf3)