2018-10-31

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

f:id:k_mawa:20181031005812j:plain

上記のキャプチャ画像のようなARCoreに付属の体験デモをビルドまでしてみた。

ARCoreというGoogleの開発したARキットをAndroid端末でデモシーンをビルドしたらこういうものができる。床面、壁面をスキャンしてマッピングしたあとにクリックした場所に床面などに沿ってドロイド君のモデルが配置されるというデモアプリ。

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

環境情報

Windows10 Pro
ARCore for Unity( v1.5.0)
Unity 2018.2.13f1(古いバージョンから更新しようという方は、Vuforia対応パッケージを一緒にインストールしとくとよいので、更新前に下記の手順をご覧くださったほうが楽かも^^ )

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

Android SDK 7.0 (API Level 24)
JAVA => jdk1.8.0_192
NDK => 今回はなしでビルド通っています

参考資料

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

ARCoreとUnityではじめるARアプリ開発

作者: 薬師寺国安
出版社/メーカー: 秀和システム
発売日: 2018/03/08
メディア: 単行本
この商品を含むブログを見る

qiita.com

おおまかな手順

1 JDKのダウンロード

jdk1.8.0_192 が最新だったので、とりあえずダウンロードしておきます。

ここからダウンロードできます Java SE Development Kit 8 - Downloads

このハイライト部分をダウンロードしました f:id:k_mawa:20181031010349p:plain

2 ARCoreの各モジュールのバージョンを確認

実機テストをする場合ARCore対応している機種を用意する必要があります。あとはPCと携帯をつなぐUSBもご用意ください。
developers.google.com

f:id:k_mawa:20181031010358p:plain

Android SDKを持っていない方は、Android Studioをインストールして、SDKを最近のものを一そろいダウンロードすることをおすすめします。Android Studioは、明確な定義は知りませんが、たぶんAndroid SDKのパッケージ管理ソフト機能がついたIDEっぽいです。Javaとかkotolinとかがターゲットなのかな！？

参考資料 www.gaprot.jp

3 ARCore for Unityのバージョンを確認

ここのページで確認できます。

Quickstart for Android | ARCore | Google Developers

たぶん3か月後とかにまたいろいろ変わっていてもおかしくないですね・・・

f:id:k_mawa:20181031010415p:plain

4 ARCore for Unityの対応バージョン(unitypackage形式)をダウンロード

ここにあります、すでにunitypackageになっているので、ダウンロードしてUnityEditorに放り込むだけです。手軽^^

github.com

f:id:k_mawa:20181031010433p:plain

5 UnityEditorにARCore for Unityをインポート

Unitypackgae形式なので、そのままD&Dをするとインポートできます f:id:k_mawa:20181031010443p:plain

6 インポートできたら

こんな風にディレクトリが一個できてます。 f:id:k_mawa:20181031010450p:plain

7 サンプルシーンをロード

できたディレクトリからサンプルシーンを探し出しましょう。そしてダブルクリックするとロードできます。 f:id:k_mawa:20181031010458p:plain

8 ビルドのセッティング1:Build Settings

ビルドの準備をします。

File>Build Settings で下記のページを開きます。 f:id:k_mawa:20181031010506p:plain ハイライトしている部分はいじっている部分です。実機テストしたい場合はこの際にUSBで実機をデバッグモードにしてRun Deviceに表示されるようにしておいてください。

BuildSystemはInternalにしました。これで以前ARKitのビルドでバグった記憶があるので、保険です。もしかしたらいらないかも。

9ビルドのセッティング2:PlayerSetting

AR関係で必要な項目にチェックをいれます。下記のような感じです。 f:id:k_mawa:20181031010522p:plain f:id:k_mawa:20181031010531p:plain

Vuforiaのときとちょっと違うのでご注意下さい。

10 ビルドのセッティング3:External Tool

Edit>Preferences>ExternalToolで開いたところに下記設定しておいてください。

C:\Users(ユーザー名)\AppData\Local\Android\sdk (Android Studioでダウンロードしておく) C:\Program Files\Java\jdk1.8.0_192 (browse を押すと自動検出)

♯ 11 ビルド・実機で動きます‼ Build か Build Runボタンを押してしばらく待つと実機で動きました^^

今日の進捗(^-^) 今日はARCoreのサンプルをビルドまでできました、スクショです。空間認識後に床に沿ってアンドロイドのモデルをクリックした場所に配置するデモです(^-^) またやり方後日記事にします(^-^) #AR #Unity pic.twitter.com/bT7JOALn4n
— mawa (@k_mawa82) 2018年10月23日

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

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

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

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

フォローする

はてな
Twitter
Feedly

2018-10-10

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

Unity プログラミング 3DCG AR xR works

f:id:k_mawa:20181009235923j:plain

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

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

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

環境情報

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

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

Android SDK Tools r25.0.2(tools_r25.2.5-windowsかも・・・)
JAVA => jdk1.8.0_181
NDK => android-ndk-r13b

参考になった記事

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

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

(4) では、マーカーの上に映るものをセッティングしていきましょう。赤いスライムみたいなモンスターの３Dモデル以外にも気軽にテストしてみましょう。シリンダー（円柱ですね・・・）を配置しましょう。これは「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)ではお待ちかねのモンスター３Dキャラクターも載せます。これは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