Mawa Town

Mawaという人が作る小さな町でMawaTownです。技術と音楽が好き。

開発日誌::ARアプリをVuforia+Unityで作る方法(2018年10月動作確認)

f:id:k_mawa:20181009235923j:plain

コメント

最近こういうものを作った。

自分が書いた魔法陣をカメラが認識すると、あらかじめ用意していた3Dのモンスターが登場するというものだ。

これをどう実装したかを割と詳細にまとめた。興味ある方はお試しあれ^^

環境情報

  • Windows10
  • Vuforia(ARを実装できるライブラリ。VuforiaはUnityと別々のパッケージだったのだが、この最新に近いUnityバージョンでは、組み込み関数のごとく、何もしなくても最初から使えるのだ~楽々・・・)
  • Unity 2018.2.9f1(古いバージョンから更新しようという方は、Vuforia対応パッケージを一緒にインストールしとくとよいので、更新前に下記の手順をご覧くださったほうが楽かも^^ )

(上記まででローカル動作確認はOK。以下はAndroidビルド時のみ必要)

参考になった記事

こちらを主に参考につくりました^^

nn-hokuson.hatenablog.com

qiita.com

qiita.com

おおまかな手順

手順1:UnityにVuforia対応パッケージをインストールする

手順2:UnityでVuforia対応をOnにする

手順3:Vuforiaアカウントを取得して会員キーの取得&管理コンソールを使える状態にする。

手順4:Vuforia管理画面から、カメラに反応する画像を生成する。

手順5:Unityにマーカーインポート&Vuforiaで作ったマーカーを活用できるようにVuforiaと連携セッティング締めの作業

導入知識:Vuforiaの簡単な仕組み

Vuforiaの簡単な仕組みを押さえることで、今から行うたくさんの作業の見通しが多少見えやすくなりますので書いておきます。イメージとしてはtwitterや、slack、AWSなどの外部APIに似ています。


(流れ)

Vuforiaのwebサイトで会員登録

会員専用の管理ページとAPIキーをGET

会員専用管理ページで、カメラに映ると反応する画像(マーカーと呼ばれます。今後AR開発では頻出なので覚えましょう)を取得できる。取得方法は、マーカー候補画像を管理ページにアップロードすると、自動で処理されて、管理ページからダウンロードした加工済みファイルをUnityにインポートする(ドラッグアンドドロップでOK)

会員専用のAPIキーを自分のUnityにコピペすると、VuforiaとUnityが連携されて、マーカーもカメラが認識すると、スイッチのように反応するようになる。


こんな感じがざっくりとした概要です。OKかな・・・
さてでは具体的な流れを書いていきます!

具体的な手順

手順1:UnityにVuforia対応パッケージをインストールする

(1) 最新版Unity更新時にVuforiaサポートパッケージにもチェックを入れて更新してください(しなかった場合は、インストーラーかなにか探して追加する作業が発生します・・・それについてはこの記事では解説部分がありません・・・)
f:id:k_mawa:20181010000652j:plain

UnityへのVuforia自体のインストールはこれでよいです。

手順2:UnityでVuforia対応をOnにする

ただ、Vuforiaサポートパッケージをインストールしただけだと、まだVuforiaは動いてくれません。UnityEditor上でスイッチをOnにする必要があります。それは以下のようにします。大丈夫です、チェック1個押すだけです!

(1)ここ(Edit>ProjectSettings>Player)から入って
f:id:k_mawa:20181010000705j:plain

(2)ここ(Vuforia Augmented Realit(yが抜けてるのかな??))をクリックするとUnityでVuforiaが使える状態にOnになった、ということになります。
f:id:k_mawa:20181010000712j:plain

手順3:Vuforiaアカウントを取得して会員キーの取得&管理コンソールを使える状態にする。

とりあえず、無料枠で試せると思います。

Vuforiaのページ
Vuforia Developer Portal |
ここで会員登録を行ってください。

注意Vuforiaはシステムメンテナンス時間がある!夜型の人は、注意ください・・・(著者は夜型なので、次の日に作業が持ち越しになり、多少イライラしました苦笑)
f:id:k_mawa:20181010000623j:plain

会員登録は一般的なウェブサイトと同じですね。サクッと終わらせましょう。

手順4:Vuforia管理画面から、カメラに反応する画像を生成する。

二度目になりますが、備忘録で書いときます、カメラに映ると反応する画像はマーカーと呼ばれます。今後AR開発では頻出なので覚えましょう。で、手順4は、こなれた感じで表現すると、マーカーの登録をする、って流れです。これもアップロードして、ちょっと待ってダウンロードするだけなので、怖くありませんのでご安心を^^

(1)まずログインしたら、「Develop>TargetManager」に移動しましょう。Target=マーカーのことと思ってもらってOKです。 f:id:k_mawa:20181010000721j:plain

(2)次に「AddDatabase」を押します。 f:id:k_mawa:20181010000729j:plain

(3)次のようにデータベースの名称(自分は万が一のエンコード系のエラーリスクを少なくするために英語にしときました。)とTypeを「Device」に設定ください。終わったら「Create」を押します。 f:id:k_mawa:20181010000737j:plain

(4)はい、できてますね^^ やりました!Databaseという名称からわかるように、この仮に名付けた「sample」という名前のデータベースに複数のマーカーを格納できるという意味です。 f:id:k_mawa:20181010000745j:plain

(5) ではその新規作成したデータベースを開きます。クリックするだけです。 f:id:k_mawa:20181010000754j:plain

(6) はい、こういう画面になります。 f:id:k_mawa:20181010000801j:plain

(7) いよいよ反応させる画像(マーカー)を登録です。「Add Target」を押しましょう f:id:k_mawa:20181010000810j:plain

(8)画像をアップしたら星の数で「Rating」がでます。これは、カメラに認識されやすいほど星が高いです。実験したところ横3000ピクセル×縦1700ピクセルと比較的大き目の画像 が感動良好のようです。横縦3桁ピクセル程度の比較的小さい画像は特徴点が少ないみたいでダメでしたね。 f:id:k_mawa:20181010000818j:plain

(9)と、いうわけで近所のカレー屋さん(『アンジュナ』 @高幡不動。多摩の名店です。https://tabelog.com/tokyo/A1329/A132903/13006010/ )で撮った写真をマーカーにしてみます。(「あれ、魔法陣の写真じゃないんかい」って思った方、大丈夫です、あとですげ変えますので・・・チュートリアル用に撮影してた当初はカレーにするつもりだったのです。。。苦笑)チェックを押して、「DoenLoad Database」を押します。 f:id:k_mawa:20181010000827j:plain

(10)「UnityEditor」を選択して、「DownLoad」を押します。これでダウンロードされたものはただの画像データから、Unity用のオブジェクトに変換されたファイル(拡張子が「.unitypackage」)がGetできるというわけです。 f:id:k_mawa:20181010000836j:plain

(11)Unity用のオブジェクトファイルが手に入りました~イエーイ^^v f:id:k_mawa:20181010000842j:plain

手順5:Unityにマーカーインポート&Vuforiaで作ったマーカーを活用できるようにVuforiaと連携セッティング締めの作業

(1)とりあえず、手順4で手に入れたファイルをドラッグアンドドロップすればマーカーはインポートされます!手軽ですね^^
f:id:k_mawa:20181010000850j:plain

(2)Cameraなんですが、Vuforia専用のカメラオブジェクトじゃないとマーカーが反応しないので、 ヒエラルキー(UnityEditorのオブジェクト一覧が書いてある左端の欄の部分のこと。頻出なので覚えるとお得です。)から Main Cameraを削除、「GameObject>Vuforia>ARCamera」を選択して、投入ください。 f:id:k_mawa:20181010000858j:plain

(3) さらに、カメラに映る予定のすべての画像オブジェクトは、「GameObject>Vuforia>Image」で選んだオブジェクトに関連させないと映らないので、出現させる画像(今回の例だと赤いスライムみたいなモンスターの3Dモデルなど)配置する前に「GameObject>Vuforia>Image」を押してください。ImageTargetという名前のオブジェクトがあらわれ、さきほどインポートしたカレーの画像が映っていると思います。おいしそうですね。いまこれ書いてるの深夜なんです、くぅ~カレー食べたい!苦笑 とりあえず、このImageTrgetはカメラに反応する画像、マーカーのことです。カレーの画像が地面として機能しているという認識でとりあえず大丈夫です。 f:id:k_mawa:20181010000906j:plain
f:id:k_mawa:20181010000916j:plain

(4) では、マーカーの上に映るものをセッティングしていきましょう。赤いスライムみたいなモンスターの3Dモデル以外にも気軽にテストしてみましょう。シリンダー(円柱ですね・・・)を配置しましょう。これは「GameObject>3D>Cylinder」で投入できます。ちゃんとカレーの画像に載っているように画像を縦横奥と移動させて整えましょう・・・ f:id:k_mawa:20181010000922j:plain

(5) はいここが注意点です、ハマりどころです!、注意して配置ください。(4)のあとで大丈夫ですが、 ImageTrgetの子要素になるように出現させるオブジェクトは配置してください。 ImageTargetの子要素になってないとシーン、映りません・・・かなし~ ですよね、だから注意してね^^ f:id:k_mawa:20181010000922j:plain

(6) さて、いよいよこの旅も大詰めです。まだしていないことがありますね、はい、VuforiaのキーをUnityにセットしていないですね、これをやるといよいよhello AR worldなわけです。さきほど投入したARCameraオブジェクトのInspector(UnityEditor右側の変数がいっぱい書いてある場所)の「Open Vuforia Configuration」を押します。
f:id:k_mawa:20181010000931j:plain

(7) すると、こんな画面になります。 f:id:k_mawa:20181010000940j:plain

(8)「AddLicence」を押します。 f:id:k_mawa:20181010000948j:plain

(9)するといきなり、さっきのVufroiaの管理コンソール画面に移動します。で、AppNameをProject名と同じもので登録してください。条件OKなら、「Conforim」を押します。 f:id:k_mawa:20181010000958j:plain

(10)この画面になりますので、プロジェクト名を押すと、キーが現れますので、それを(8)「AddLicence」のボタンの上の空欄にコピペします。これで連携ができました。 f:id:k_mawa:20181010001006j:plain

(11)ではお待ちかねのモンスター3Dキャラクターも載せます。これはUnityのアセットストアで無料の素材でした。 f:id:k_mawa:20181010001015j:plain

(12)インポートしたらドラッグアンドドロップですぐ配置できます。 f:id:k_mawa:20181010001022j:plain

(13)ARCameraからみたビューでもカレーの写真の上に円柱2個と赤いモンスターが映ってますので、大丈夫そうですね。ではWebカメラ(僕はその辺の電気屋さんで売ってるバッファローのもので実施しました)をパソコンにつないでから、UnityEditorの再生ボタンを押します・・・ f:id:k_mawa:20181010001030j:plain

(14)Webカメラに登録したカレー画像に反応して、円柱と赤いモンスターがちゃんと映ってますね^^ できたぁ~~ f:id:k_mawa:20181010001039j:plain

(15)小さすぎるので、スケールを変更しました。 f:id:k_mawa:20181010001045j:plain

(16)魔法陣を書いてから、撮影して、手順4:Vuforia管理画面から、カメラに反応する画像を生成する。の流れをもう一度やる+円柱を取り除きますと、魔法陣から赤いモンスターだけ出現できるようになります。これは今までの工程の繰り返しになるので、これくらいにしておきます^^ f:id:k_mawa:20181010001055j:plain

ではよいARライフを^^/

[もうちょっとこの辺色々勉強したいなという方向け告知]
私の所属する開発チームMulesでは、今回の記事のような、AR等のxRの開発情報を共有したり、議論したりできるみんなで勉強を進めていくもくもく会的なSlackグループ、xrdevja(xR Development Japanを略してます)をはじめました。ので、ご興味ある方は、誰でも参加できるので、是非ご参加ください^^ 下記フォームから参加申請可能です。(一応念のため、もちろん無料です。)

Discordのサーバーもあります。こちらもご利用可能です。 discord.gg

リアルイベントも時どき実施しています。DiscordやSkypeで遠隔で参加可能なので、東京以外の在住の方や、仕事の都合などで会場に直接来られない方もお気軽に参加いただけるイベントを多くしています。実際西日本の開発者さん、クリエイターさんも参加いただいています。主催者として、初心者にも温かいアットホームさを大事にしたいと思って運営しています。 xrdevja.connpass.com


お気軽に押していただければ励みになります^^