【初心者向け】Unity 2017 + Vuforiaで３Dモデルを表示してみた ～準備編～

## はじめに

ひょんなことからUnity 2017とVuforiaを使用して簡単なARのデモを作成することになったので、その備忘録も含めたメモを残したいと思う。
Qiita記事に残そうとしたきっかけは、大体の記事がUnity5時代にかかれたものが多く、Unity 2017の（特に初心者向けの）記事があまりなかったからである。

これから何回かに分けて下記の「やりたいこと」の記事を書いていく。
今回はその「準備編」だ。

ちなみに筆者はUnityもVuforiaも今まで触ったことがなくこの分野においては超初心者である。。。

## やりたいこと

最終的に実現したいことは、「あるマーカーを検出時に3Dモデルを表示し関連する動画を再生させる。」
ということ。
出来れば複数のシーンを切り替えて行えればベスト。

- 準備
- Vuforiaでマーカー登録

<Strong><span style="color:red">今回の記事ではここまで</span></Strong>
*************************************
- 登録したマーカーをカメラで発見した際に3Dモデルを出現させる
- マーカー発見時に3Dモデルを出現と同時に動画を再生させる
- 応用：複数のシーンを切り替えて異なるモデルを表示させる

カメラは最初はデスクトップPCのWebCamを使用
最終的にはビルドしてAndroidやiPhoneアプリとして起動させ、そのスマホのカメラを用いて行う。

## 環境

今回検証した環境を記載。

+ Unity起動環境：windows7(Lenovo X1 Carbon)
+ Unity 2017.3.1f1
+ Vuforia(2018/4時点)

## Unity 2017

ダウンロードは下記から
(トップページの「Unityを入手」から「Personal」を選択し、規約に同意しダウンロードを行います)

[Unity](https://unity3d.com/jp "Unity")


基本的にデフォルトでOKですが、下記の3つにチェックをつける
特に以前は別でVuforiaパッケージをインポートしないといけなかったみたいだが、Unity 2017からはUnity側で用意されているので忘れずにインポートする。

「Android Build Support」
「iOS Build Support」
「Vuforia Augmented Reality Support」

その他、実現したいことにあわせて導入するコンポーネントを選択すること。
（何度かUnityをインストールしたので最初の方のスクショになります。最終的には「Unity 2017.3.1f1」を使用）

![screenshot.447.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/2305c5da-055c-db24-1219-531fe6fd4bcb.jpeg)


どうやらコンポーネントを導入し忘れても、後から「Unity Download Assistant」を使用して追加導入は可能らしい。筆者は実際には検証していないですが情報まで。
（導入したUnityのバージョンと合わせるように注意！）

[Unity のダウンロードとインストール](https://docs.unity3d.com/ja/current/Manual/InstallingUnity.html "Unity のダウンロードとインストール")


## Vuforia

まずは下記にアクセスしVuforiaの登録を行う
トップページの「Register」から登録を進める。

[Vuforia](https://developer.vuforia.com/ "Vuforia")


登録が終わったらライセンスの登録を行う。

「Get Development Key」を選択

![Vuforia1.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/9cc2072c-d615-be80-c267-99392e5e9d3b.jpeg)


名前を入れて下のチェックボックスにもチェックを入れ「Confirm」

![Vuforia2.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/0bfae360-3691-1fc4-98f8-e8ac68c2ab72.jpeg)

ライセンスが発行された。
後ほどこのライセンスキーをUnity側に登録する必要があるので控えておく。

![Vuforia3.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/afc8ed18-c0f8-4a4d-ae25-d6608cfb0dd4.jpeg)


## マーカー登録

次に実際にマーカーを登録する。
このマーカーがカメラ上で検出されたらモデルを表示するという流れとなる。

「Target Manager」からマーカーを登録する

![Vuforia4_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/b622366a-0fb2-31fa-5410-37ce5c8dd968.jpeg)


「Add Database」でDBを作成する。
DBを作成したら「Add Target」でマーカーとなる画像を指定する。
今回の画像はwindowsにデフォルトでついている？ペンギンの写真にした。


![Vuforia5.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/07dff4ec-4ec9-e794-adf5-8ffc4122a73c.jpeg)


マーカーとなるTypeを色々選べるが、まずは「Single Image」で試す。
WidthはUnityでいうScaleを意味するとのことだったので「１」にしている
Nameは勝手にファイル名が自動的に入るが修正可能
たまに写真によってはうまく取り入れられないこともあるので、その場合は写真を変えて試すこと。

![Vuforia6.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/70f4ba40-1592-5870-e91a-24ac3118e873.jpeg)


うまく取り込まれると下記のようになる
ポイントはRatingの部分。今回は☆5の評価だった。
あまり低すぎるとマーカーを認識しないようなので、高い評価を目指す。


![Vuforia7.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/749ea887-700f-0fad-49a5-9ef8ebdcf79e.jpeg)

登録したマーカーの中に入り下の「Show Features」をクリックすると、その写真のどこが特徴的だったかが表示される。
特徴的な写真ほどRatingの評価も高いみたい。
まずは、色々登録してみて試すことをお勧めする。

![Vuforia8.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/4ae1055e-d0f7-a241-1337-8b6dbfa6ee3c.jpeg)


最後に登録したマーカーをUnityにインポートする為にパッケージを出力する必要がある。
Unityに取り込みたいTargetにチェックをつけ「Download Database」をクリック
（複数のTargetの選択ももちろん可能）


![Vuforia9_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/f32340c8-76ee-df56-7378-29eb9b3da555.jpeg)

「Unity Editor」を選択

![Vuforia10.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/68b5e330-882d-038f-e2ca-bdd4ee287ff5.jpeg)

「ファイルを保存する」を選択しローカルに保存しておく。

![Vuforia11.jpg](https://qiita-image-store.s3.amazonaws.com/0/225931/09da58f6-3051-54d9-2e1f-d2d0c3563ca0.jpeg)


ここまでが、Vuforiaでのマーカー登録の作業になる。
次回以降で実際にそのマーカーを検知して3Dモデルを表示するところを行う。