初めまして。インフラトップでメンターを行っている@YuCucamberと申します。
Qiita初投稿で拙い点が多々あると思いますが、宜しくお願い致します。
さて、WEBCAMPではRailsをはじめとしたWebサービスに関するコンテンツ取り扱っておりますが、プライベートでは主にUnityを利用した小規模なゲームの開発を行っております。（ジャンルめっちゃ違うやんけ…）
特に最近関心を持っているのがXR。AR、VR、MR等の総称ですね。
ただ、VRやMRの開発を本格的に行おうとすると、ゴーグルを買ったり、開発環境整えたりで、かなりのコストがかかってしまいます…（OculusもHoloLensも高すぎる…スマートフォンを利用したVRゴーグルなら手頃に買えるそうですが…）
ということで、手元のスマートフォンとPCで始められ、手間暇のあまりかからないARを始めることにしました。
今回はVuforiaEngineを利用して、お手軽簡単にARアプリを作っていこうと思います。
P.S. 投稿遅れてしまい本当にすみませんでしたあああああ！！！！！
#使用するソフトウェア
Unity2019.1.14f1
Adobe PhotoShop（箱の画像の編集時に利用、GIMP等でも可）
ルヴァン（立方体のデザイン付きの箱なら基本問題ないと思います。箱のサイズを設定する際は、適切なサイズに置き換えて下さい）
#目的
Unityを使ったことのない人でも、気づいたらARアプリが作れる状態を目指しています。
お菓子の箱を認識し、周囲をキューブがぐるぐる回る簡易的なARアプリを作ります。
初心者向けかつ実際勢いで書いていたりするので、Unityの経験者の方などがみると長ったらしいかもしれません。
#目次
###Vuforiaを導入してみる
- Unityのインストール
- Vuforia Developer Consoleへの登録
- Vuforiaを有効にする
- 箱のデザインを取り込む
- データベース、ターゲットの作成
- Unityに適用していく
- 少しだけ応用
#Vuforiaを導入してみる。
早速Vuforiaを使っていくわけですが、Vuforiaを利用するためにはUnityなどのゲームエンジンが必要です。（ゲームエンジンを用いない開発方法もありますが、高度な方法になっていくため、今回は言及しません。）
そうなると、まずはUnityをインストールしなくてはいけません。Unityの導入方法については、既に素晴らしいカラムが多数あるのでそちらをご紹介させて頂ければと思います。
しかし、幾つかご留意頂きたい点があります。
今からおそらく、UnityHub、あるいはUnityのバージョンをダウンロード・インストールして頂くことになりと思いますが、その際は「Vuforia argument reality support」等と記述された項目にチェックをつけて頂きますようお願い致します。（とりあえずVuforiaとついていたらインストールしてください）
もし、チェックマークをつけ忘れてインストールした方（あるいは既存のUnityのバージョンに組み込んでいく方）も、UnityHubの場合は「インストール」欄から特定バージョンの「・・・」を選択し、モジュールを加えるという項目から、後から追加することができます。
注意点は以上となります。Unityのインストールはこちらを参考にお願い致します。
リンク→ https://www.sejuku.net/blog/47646
##Vuforiaを有効にする
無事インストールが完了したら、プロジェクトを作っていきましょう。
Unity（UnityHub）を開いて、3Dで新規プロジェクトの作成をしてください。プロジェクト名はお好みでどうぞ。
作成できましたら、早速Vuforiaの機能を有効にしていきましょう。
Windowsの場合は、メニューバー内の「File→Build Setting」をクリックし、表示されるウィンドウ右下の「Player Settings」をクリック、そうすると更に新しいウィンドウが開くのでその中の「XR Settings」内の「Vuforia argument reality supported」をクリックすると、Vuforia機能を有効にできます。
続けて、エディタ内にARカメラを配置していきます。
これで事前準備は完了しましたが、まだ使えません。Vuforiaを利用するためにはVuforia Developer Consoleへのアカウント登録とライセンスキーの発行、そしてARを検知するための情報を登録してあげないといけません。
順序はこのようになります。
- Vuforia Developer portalへの会員登録
- Development keyの発行
###会員登録
はじめに、以下のサイトへアクセスし、右上の「Register」を選択します。
https://developer.vuforia.com/
VuforiaDeveloperPortalへ会員登録を行います。必要箇所入力しアカウントの作成を行って下さい。
アカウント作成後、ヘッダーの「Develop」選択し、LicenseManagerへ移動します。
Lisence Keyには、無償で開発向けに使用できる「Development Key」と、有償で商業向けのリリースに使用できる「Deployment Key」を使用することが出来ます。
今回は、リリースまで行う予定がないので、「Get Development Key」を選択します。
ライセンスキー名を入力し、Confirmを選択し作成します。
作成後、再びLicense Managerの画面へ戻り、先ほど作成したライセンスキーを選択します。
選択後、灰色の枠の中に長文の暗号文らしきものが出てきます。写真では隠していますが、こちらが今回利用するLisence Keyとなります。後々利用するので、わかりやすい場所にメモしておきましょう。
続けて、今回認識対象として利用する立方体（Cuboid）の作成を行っていくのですが…肝心の画像がありません。ということで作っていきましょう。
今回、僕の方ではルヴァンを利用して作成させて頂きました。理由はなんとなく食べたかったからです。
こちらは、分解用と、完成したときの認識用合計2箱購入してきました。
早速片方を解剖していきましょう。カッターで慎重に展開図に…
案の定汚い出来になってしまいましたがこの程度なら問題ないはず…
こちらをスキャナでPCに取り込んでいきます。
一面ごとの画像に分解し、保存していきます。ここで重要なのがアスペクト比を意識する点です。画像を保存する際に、実際箱のサイズ比と一致しているか確認しましょう。違ったら解像度を変更してカバーしていきます。透明度やsRGBが有効になっていると宜しくないみたいなので切っておきましょう。画像サイズも気をつけて…
分解完了しました。これらをVuforia Portalへ読み込ませていきます。
Webサイトに戻り、先ほどのLisenceManager画面のヘッダー下にある「Target Manager」をクリックします。
Targetを保存するには、それらをまとめるDataBaseが必須となります。現時点で存在しないので作っていきましょう。TargetManagerトップの「Add Database」をクリックします。
データベースを作成します。お名前はお好みで、タイプは今回はデバイス内に認識対象の情報を保存したいのでDeviseを選びCreateボタンを押します。
ライセンスの時と同じように、データベースを選択すると以下の画面になります。早速Targetを作成していきましょう。左上のAdd Targetをクリックして下さい。
こちらで作成するTargetの種類の選択やサイズの設定を行います。今回は立方体（Cuboid）で行いますが、他にも平面の画像や円柱、複雑な図形のオブジェクトなど様々なタイプの設定が存在します。
今回はCuboidを選択しましょう。
Dimensionに実際の箱の大きさの設定を行います。
インターネットでルヴァンの箱の大きさを検索したところ、「12.5cm,16cm,5cm」だと書かれていたのでそれぞれ入力していきます。名前はお好みで。僕は「Levain」で登録しました。
入力完了したら「Add」を押して作成します。
さて、立方体そのものの作成は完了しましたが、肝心の画像の情報が未だに入っていません。設定していきましょう。作成したTargetを選択すると、以下のような画像が表示されると思います。
この画面で一面ずつ、画像の情報を登録していき完成させていきます。
それでは、Upload Frontを選択しましょう。
選択すると、以下のような画面になります。Browseをクリックし、正面の画像を選択し、Uploadしましょう。
ここで上手くいかない場合は、正しく画像が設定されていない、画質が高すぎて最大サイズをオーバーしている等が考えられます。確認しましょう。
幾つか入れていくと、以下のような画像になります。こうみるとすごい…！
すべての画像を入れ終えたら、データベースをダウンロードし、Unityに組み込んでいきましょう
データベースを選択し、右上の「Download Database」を選択しましょう。すると、以下の画面になるはずです。今回はUnityの環境を利用して開発しているので、Unity Editorを選択してDownloadボタンを押しましょう。
先ほどのプロジェクトを開いた状態で、今回のunitypackageを開いて下さい。
すると、以下のような画面が出てきます。「どのへんインポートしておく？」と聞いてきてるので、チェックマークを外さずimportを行いましょう。
すると、StreammingAssets/vuforia内に幾つかデータベースが入っているはずです。名前が違ってもお気になさらず。
すると、[名前].unitypackageというデータがダウンロードされるはずです。ここからはUnityに戻り作業を進めていきましょう。
いよいよ実装してきます。確かARCameraを導入するところまで進んでいますよね。
まずは、ライセンスキーを適用してあげないといけません。これを入れないと動いてくれないので致命傷です。
早速、ヒエラルキー内のARCameraを選択し、インスペクタ内にある「Open Vuforia Engine configuration」を選択しましょう。
クリックすると、Vuforiaに関する設定画面が出てくると思います。
その中の「App Lisence Key」の欄に予め用意しておいたライセンスキーをペーストしてください。ペースト後、その下の「Add Lisence」をクリックしたら完了です。
続けて作成した立方体をシーンに導入していきましょう。
ヒエラルキーからVuforiaEngine→MultiImageを選択しましょう。
クリックすると、勝手に作成済みの箱が真ん中あたりに表示されているはずです。もし複数のターゲットを設定している場合はインスペクタ内のmulti Target欄の選択を変更すれば反映されます。
そして最後に、立方体と関連つけるオブジェクトを作成します。MultiImageの子オブジェクトとして登録することで、親オブジェクトの箱の位置に合わせて表示されます。箱が認識されなかった場合は表示されません。
MultiImageの子オブジェクトとして、3DObject→Cubeを作成しましょう。以下図のようになれば問題ありません。
作成できたら、Cubeをいい感じの位置と大きさに変更しましょう。
Cubeのtransform設定を以下のように変更しましょう。
お待たせしました…これでARアプリの完成です！まずはPC上で動かしてみましょう！
PCでもWebカメラ等が内蔵、あるいは接続されていれば利用することが可能です。
エディタ中央上部の再生ボタンを押して下さい。
そうすると、Webカメラの映像が一面に映し出されるはずです。画面内に箱のデザインがすべて入るようにかざしてみましょう。面積の大きい正面がいいかと思います。
箱と連動してキューブが表示されたり、位置の移動が行われていれば大成功です！
おめでとうございます！！！！！
##少し応用してみる
箱に連動してキューブを表示することは出来ましたが、これではまだまだARを使っていくイメージが浮かびにくいかと思います。そこで、今のキューブを少し改変し、「ルヴァン（箱）の周りをぐるぐる回るキューブ」を作成していきましょう！
まずは、ヒエラルキーから「Create Empty」を選択・作成し、以下のように構造を組み直します。ドラッグアンドドロップで親子関係の作成、解除が可能です。
また、GameObject、Cubeの座標設定を以下のように変更して下さい。
次に、GameObjectを選択し、「Add Component」→「New Script」を選択して下さい。
Nameを「Cube」に設定の上、「Create and Add」をクリックして作成して下さい。
作成後、プロジェクト内の「cube」をダブルクリックして開いて下さい。
既存のコードをすべて消した上で以下のコードを貼り付け、セーブして下さい。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class cube : MonoBehaviour
{
public bool returnSwitch; //回転方向の設定、trueにすると反時計回りになる
public float speed; //キューブが回るスピード
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
//if else で向きの設定を確認し、別々の動作を行っている
if (returnSwitch) transform.Rotate(new Vector3(0f, 0f,-1f*speed * Time.deltaTime));
else transform.Rotate(new Vector3(0f, 0f,speed * Time.deltaTime));
}
}
セーブ後、Unityに戻り、GameObjectを選択した上でヒエラルキの以下の数値を設定して下さい。
設定後、再びエディタ中央上部の再生ボタンをお願いします。
成功していれば箱を中心にキューブが回っているかと思います…！
Vuforiaで箱の前か後ろかの認識が出来ているみたいで、キューブもしっかり箱に隠れていますね！
とりあえずここで完成です！わーい！！！
#終わりに
以上、UnityとARアプリに関する記事を書かせて頂きました。
今回の記事を通して、ARアプリやUnityに関心を持って頂けたら幸いです…！