おもちゃラボ

Unityで遊びを作ってます

Unityで始めるARKit入門 セットアップ編

先日(2018年9月18日)ようやくiOS12がリリースされて、ARKitもARKit 2.0にバージョンアップされました。ここではARKit 2.0の特徴と、UnityからARKitの機能を使う方法を紹介します。

ARKitの参考書を書きました。BOOTHで販売中です!こちらはUnityではなくswiftを使ったサンプルですが、Unityを使う場合にも役に立つ構成なので、ぜひチェックしてみてください。

booth.pm

今回の目次は次のようになります。

ARKitとは

 ARKit とは、Appleが発表したAR(Augmented Reality)のフレームワークです。ARKit は従来のマーカーを使ったARの仕組みとは大きく異なり、VIO(Visual Inertial Odometry)と呼ばれる技術を使うことで、高い精度でカメラの位置と向きをリアルタイム検出することができます。

 ARKit 1.5からは水平面だけではなく、壁などの垂直面の検出が可能になりました。2018年に発表されたARKit2.0では、AR空間の永続化や複数人でのARの共有など新機能が多数追加され、ますます高機能で使いやすいフレームワークになっています。

f:id:nn_hokuson:20181011215215j:plain

ここではもう少し、ARKit 2.0で追加された機能について見ておきましょう。

ARKit 2.0で追加された機能

ARKit 2.0ではARの機能が大幅に強化されました。追加された主な機能には次のようなものがあります。

ARの永続化と複数人での共有

ARの永続化って・・・日本語的に分かりにくいですね(笑)ARで配置したオブジェクトをずっとそこに置いておける機能、という感じでしょうか。また、複数人でのAR共有は、みんなで一匹のポケモンを倒すイメージですね。遊びが広がりそうです。
f:id:nn_hokuson:20190530214251p:plain:w500

画像トラッキング

画像の検出はARKit1.5のころからできたのですが、あくまでも「検出」でした。画像を動かすとその上のオブジェクトはついてこないという・・・それがARKit2.0からはできるようになりました。Vuforiaなどのライブラリと同じことができるようになったということですね。
f:id:nn_hokuson:20190530215016j:plain:w600

3Dオブジェクトをマーカーにする

ARマーカーといえば2Dの画像がメインでしたが、フィギュアや模型などの3Dオブジェクトもマーカーにできるようになりました。といっても精度はまだあまり良くなくて、ARKit 1.5の頃の画像検出と同じぐらいです。
f:id:nn_hokuson:20190530215433p:plain:w170

環境マップの使用

ARKit 1.5では環境光の強さや色温度を推定して、Unityのエディタ上で配置したライトの値を調節する光源推定という機能がありました。ARKit 2.0では金属などの映り込みもより自然にみせるため、カメラで撮影した映像をモデルに写し込む環境マップという機能が追加されました。
f:id:nn_hokuson:20190530215541j:plain:w170

ARKitに必要なもの

UnityでARKit を動かすためには、ソフトウエアとして次の3点が必要になります。

  1. Unity
  2. Xcode
  3. ARKit Plugin

ARKit 2.0を動かすためにはXcodeは10.0以上、iOSはiOS12以上である必要があります。Xcodeは次のURLからダウンロードできます。

Xcode

Xcode

  • Apple
  • 開発ツール
  • 無料

Unityのバージョン指定はありませんが、なるべく新しいバージョンのUnityをダウンロードしておくと良いでしょう。

unity3d.com

 ARKitはiOS11以降で、A9プロセッサ以上のプロセッサを搭載するiPhoneやiPad(iPhone 6s以降のモデル、iPad Pro以降)が必要になります。ここではXcode10.0とiOS12を使って説明します。

また、UnityからARKit を使うためにはARKit 専用のPluginが必要になります。ARKitとサンプルコードが一緒になったzipが次のサイトで配布されているので、次のURLからダウンロードしてください。

https://bitbucket.org/Unity-Technologies/unity-arkit-plugin/get/arkit2.0_beta.zip
※UnityのAsset Storeで配布されているARKitはARKit1.5のものです。UnityでARKit2.0を使いたい場合は上記URLからダウンロードして下さい。

Unityのプロジェクトを実行してみる

次に先ほどダウンロードしたARKitのプロジェクトを開きます。
「Assets/UnityARKitPlugin/Examples/UnityARKitScene」のシーンをダブルクリックして開いてください。

f:id:nn_hokuson:20180919202320j:plain

とりあえずビルドしてみましょう。
メニューバーから「File→Build Settings」を選択してBuild Settingsウインドウを開き、PlatformをiOSに変更、Scene In Buildから「UnityARKitPlugin/Examples/UnityARKitScene」を選択してください。

f:id:nn_hokuson:20180919201813j:plain:w400

iPhoneの実機でARKitのサンプルを実行してみましょう。ARKit Remoteというアプリを使うとエミュレータでも動作確認できますが、ここではまず実機にインストールして試してみて下さい。

少しカメラを動かすと撮影した映像から特徴点が黄色い点で表示されます。また、平面が見つかった場合は青い枠の四角で表示されます。また、見つかった平面をタップすると、平面の上にのるかたちで立方体が表示されます。

f:id:nn_hokuson:20190616095859j:plain:w550

自分の好きなモデルを表示する

ARKitを使って自分の好きなモデルを表示してみましょう。UnityとARKitを使えば、スクリプトを書かなくても、モデルの変更が出来ます。まずはプロジェクトウィンドウに表示したいモデルをインポートしましょう。ここでは「ひよこ」のモデルを使用します。

次に表示したいモデルをプロジェクトウィンドウからシーンビューにドラッグ&ドロップして、HitCubeに重なるように配置しましょう。

f:id:nn_hokuson:20190614201959j:plain:w600

配置できたら、ヒエラルキーウインドウでドラック&ドロップして、HitCubeParetの子要素にします。

f:id:nn_hokuson:20190614201525p:plain:w300

最後にHitCubeは表示しないようにMesh Rnedererのチェックボックスを外しておきます。これだけでOKです。

f:id:nn_hokuson:20190614202213j:plain

ARKitのプロジェクトをビルドして、差し替えたモデルが表示されていることを確認しましょう!

f:id:nn_hokuson:20190616132013j:plain:w600

各オブジェクトの役割

一通り動作が確認できたところで、ヒエラルキーウインドウに配置されている各オブジェクトの役割を簡単に見ておきましょう。

f:id:nn_hokuson:20180920194617p:plain:w250

PointCloudParticleExample

撮影した画像中から得られた特徴点を表示するコンポーネントです。表示する特徴点の色やサイズ、個数などはこのコンポーネントから変更できます。

GeneratePlanes

ARKitでは画像中の特徴点を多数含むような平面を、床面(または壁面)として検出します。このコンポーネントはARKitで検出された平面を描画します。平面のPrefabはUnityARKitPlugin/Examples/Common/Prefabsに入っています。このままではダサいので、もう少しいい感じの表示に変更する方法は次回以降説明します。

ARKitCameraManager

ARKitの各種設定を行います。設定できる値には次のようなものがあります。

意味
Plane Detection 検出する平面を床にするか壁にするか
Get Point Cloud 特徴点を取得するか
Enable Light Estimation 光源の強さや色温度の推定を行うか
Enable Auto Focus オートフォーカスを使用するかどうか
Environment Texture 環境マップを使用するか、ARKitで自動生成するか

HitCubeParent

見つかった平面をタップしたときにそこに立方体を置くスクリプトです。実際に当たり判定をやっているのは子要素のHitCubeにアタッチされた「UnityARHitTestExample」コンポーネントです。こちらも後ほど詳しく説明します。

Swiftでの勉強のススメ

ARKitをUnityから使う方法を駆け足で見てきました。特にスクリプトを書いたりすることなく簡単にARが表示できてしまうのはやはりUnityの便利さゆえですね。

ただ、Unity経由で毎回実機にインストールするのは手間ですし、機能を一つ一つ試すというのは、あまり向いていません。UnityにはARKit Remoteというリモートデバッグの仕組みもあるのですが、実験するならUnityよりもSwift+Xcodeのほうが実験しやすいかもしれません。

Swiftでやってみたいけど、あんまり触ったことなくて・・・って人のために!!「SwiftでつくるARKit超入門」を執筆しました!128ページ、2000円です。BOOTHで絶賛発売中です!

booth.pm
 
逆に実際のゲームを作るとなるとUnityのほうが断然速いです。
Unityを使ってARKitを学ぶためのまとめ記事はこちらです。
ARKitの各種機能の紹介と、ARKitを使ったもぐらたたきの作り方を紹介しています。
こちらも参考にしてみて下さい。
nn-hokuson.hatenablog.com

【Unity】ScreenPointToRayでエラーが出る

Unity2018.2あたりからScreenPointToRayメソッドを使うと、NullReferenceExceptionのエラーが出てしまうことがあるようです。

NullReferenceException: Object reference not set to an instance of an object

f:id:nn_hokuson:20180910202730p:plain

原因と対策

ScreenPointToRayメソッドを使う場合、だいたい次のように記述していると思います。

Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);

「Camera.main」と書くことでMainCameraタグがついたゲームオブジェクトを検索してCameraコンポーネントを取得しています。「Camera.main」の部分は次のプログラムと同じ意味ですね。

GameObject.FindWithTag(“MainCamera”).GetComponent<Camera>();

ただUnity2018.2からは、Main CameraのタグがデフォルトではUntaggedに設定されています。

f:id:nn_hokuson:20180910202133j:plain

したがって、シーン中からカメラオブジェクトが見つからず、NullReferenceExceptionのエラーが出ることになります。

これを防ぐには、ヒエラルキーウインドウでMain Cameraを選択し、インスペクタのTagをMainCameraに再設定して下さい。

f:id:nn_hokuson:20180910202603j:plain

Unityの教科書でも7章、8章でScreenPointToRayメソッドを使っているため、ここでnullexceptionエラーが出る可能性かあります。

その場合は、上で書いたように、Main CameraのタグをMainCameraに設定しなおしてから、再度お試しください。

【Unity】Vuforiaを使ってARを表示する手順(2019年版)

Unity2018から、Vuforiaが標準機能としてUnityの一部に組み込まれるようになり、
これまでに比べて簡単にARアプリケーションを作成できるようになりました。

f:id:nn_hokuson:20180828191934j:plain:w400

実際に、Maker Faire 2018で展示したこちらのアプリも
UnityとVuforiaを使って作成しています。

nn-hokuson.hatenablog.com

ここではUnity2019を使ってVuforiaのアプリケーションを作る方法を紹介していきます。

Vuforiaを使用できるようにする

まずはUnityプロジェクトを作成します。2D/3Dは3Dを選択しておきましょう。

f:id:nn_hokuson:20190623141229j:plain:w450

続いてVuforiaのライブラリをインポートします。

メニューバーから「Edit」→「Project Settings」→「Player」を選択して、インスペクタのXR Settingsから「Vuforia Augmented Reality 」をクリックして、Vuforiaの追加パッケージをダウンロード&インストールします(UnityをインストールするときにVuforiaのライブラリを選択している場合は次の手順に移動してください)
f:id:nn_hokuson:20190623141537j:plain:w400
再びPlayer SettingsのXR Settingsに戻り、「Vuforia Augmented Reality Support」にチェックを入れてください。
f:id:nn_hokuson:20180823194043p:plain:w500

Vuforiaにマーカー画像を登録する

続いて、ARマーカーとして使いたい画像を登録します。

ARマーカー用の画像は、そのままUnityプロジェクトに入れるのではなく一旦サーバーで特徴点解析をしてから、その結果をプロジェクトに追加します。

まずはデータベース(Database)を作成し、そのデータベースに対してマーカー(Target)を追加していきましょう。

データベースを作成する

Vuforiaのページに移動し「Develop→Target Manager→Add Database」をクリックします。
f:id:nn_hokuson:20190623095836j:plain:w600

Create Databaseの画面で、Nameにデータベース名、TypeはDeviceにチェックを入れてCreateボタンをクリックしてください。
f:id:nn_hokuson:20180822192239p:plain:w500

マーカー用の画像(Target)をデータベースに追加する

作成したSampleデータベースをクリックし、「Add Target」ボタンをクリックします。

f:id:nn_hokuson:20180822192754p:plain

Add Targetの画面で、Typeは「Single Image」、FileはBrowseボタンを押してマーカーにしたい画像をアップロードします。Widthには「1」を設定し、Addボタンをクリックします。
f:id:nn_hokuson:20180822193159p:plain:w400

アップロードしたマーカー画像はサーバーで特徴点解析を行い、マーカーとしての認識精度を5つ星で評価してくれます。

実用的には★2以下はマーカーとして使うには難しいイメージです。
f:id:nn_hokuson:20190623100302j:plain

特徴点ファイルをダウンロードする

最後に作成した特徴点ファイルをダウンロードするため、「Download Database(All)」をクリックしてください。

f:id:nn_hokuson:20180823194611p:plain

Unity Editorを選択してダウンロードボタンをクリックします。

f:id:nn_hokuson:20180823194508p:plain:w300

Vuforiaで表示する3Dモデルを配置する

先程ダウンロードしたUnityのパッケージをダブルクリックして
プロジェクトにインポートしてください。

f:id:nn_hokuson:20180823195310p:plain:w300

Vuforiaでは通常のMain Cameraではなく、AR Camera を使います。

ヒエラルキーウインドウでMain Cameraを選択し、「右クリック」→「Delete」でカメラを消したうえで、「Create」→「Vuforia」→「AR Camera」を選択してAR用のカメラを追加しましょう。

f:id:nn_hokuson:20180823195531p:plain:w250

次にマーカーになる画像を追加します。ヒエラルキーウインドウから「Create」→「Vuforia」→「Image」 を選択してください。

f:id:nn_hokuson:20180823200525j:plain

マーカにはVuforiaのサイトで設定した画像が自動的に設定されます。マーカーの画像を変更したい場合は、ヒエラルキーウインドウでimageTargetを選択した状態でインスペクタから、「Image Target Behaviour」の「Image Target」を設定します。

f:id:nn_hokuson:20180823200829p:plain:w300

マーカー上に表示する3Dオブジェクトはマーカー画像の子要素にする必要があるあります。ここでは、立方体をマーカー上に表示してみましょう。

ヒエラルキーウインドウから「Create」→「3D Object」→「Cube」を選択して立方体を生成し、マーカー上に移動し、ヒエラルキーウインドウでCubeをimageTargetにドラックして子要素に設定します。

f:id:nn_hokuson:20180823201141j:plain:w600

ライセンスキーを作成して設定する

最後にVuforia を使うために必要なライセンスキーの設定をおこなないましょう。

ヒエラルキーウインドウでAR Cameraを選択した状態で、インスペクタから「Vuforia Behaviour」→「Open Vuforia Configuration」をクリックしてください。開いたエディタで「Add License」をクリックします。

f:id:nn_hokuson:20180823202102p:plain:w350

f:id:nn_hokuson:20180823202109p:plain:w350

Vuforiaのサイトに移動するので、「License Manager」→「Get License Key」をクリックしてください。

f:id:nn_hokuson:20190623100530j:plain

AppNameを適当に設定し、チェックボックスにチェックを入れたら「Confirm」ボタンを押してください。

f:id:nn_hokuson:20180823202855p:plain:w350

ライセンスキーが生成されるので、それをコピーしてUnityのインスペクタから「App License Key」の欄に貼り付けます。

f:id:nn_hokuson:20180823203035p:plain:w300f:id:nn_hokuson:20180823203304p:plain:w300

実行結果

エディタの実行ボタンを押すとWebカメラが起動し、カメラにマーカーをかざすと指定した立方体がARで表示されます。
f:id:nn_hokuson:20180828191410j:plain

Vuforiaを実際に使うときにハマりやすいポイントは、こちらにまとめています。合わせで御覧ください!
nn-hokuson.hatenablog.com

Unityの教科書もよろしくおねがいします!