おもちゃラボ

Unityで遊びを作っていきます

Unityで始めるARKit入門 ARKit Remote編

UnityのARKit Pluginには、作成したアプリを毎回実機に転送しなくてもデバッグできるARKitRemoteという仕組みが用意されています。今回はこのARKitRemoteを使用する方法を紹介します

今回の目次は次のとおりです。

ARKitRemoteとは

ARKitRemoteとはUnity ARKit Pluginに付属するアプリケーションで、これを使えば実機に転送することなくUnityエディタ上でARのデバッグをすることが出来ます。

このARKitRemoteは、実機側にRemote用のアプリを入れておき、ここからiPhoneで撮影した映像をリアルタイムで転送します。そして、Unityエディタ側でこの映像を受け取り、ARの計算した結果をエディタ上に表示するという仕組みです。

f:id:nn_hokuson:20181017185233p:plain:w550

UnityからARKitRemoteを利用するためには次の手順が必要になります。

  1. 実機にARKitRemoteのアプリをインストールする
  2. Unityエディタ側からアプリに接続する

実機にARKitRemoteのアプリをインストールする

まずはARKitRemoteのアプリをビルドして実機にインストールします。Build Settingsを開き、「UnityARKitPlugin/ARKitRemote/UnityARKitRemote」にチェックを入れてください。

また、Development Buildにチェックを入れます。これを忘れると動作しないので注意が必要です!

f:id:nn_hokuson:20181017183125j:plain:w400

ビルドして実機にインストールできたら起動してください。実機側で次のような画面が表示されたらOKです。

f:id:nn_hokuson:20181017183202p:plain:w200

❗❗右下にDevelopment Buildと表示されていることを確認してください❗❗
されていない場合はBuild Settingsでチェックし忘れてないか再確認してください。

Unityエディタ側からアプリに接続する

次にアプリを立ち上げた状態で、ARKitのプログラムをUnityエディタで実行してみましょう。ここではUnityARKitPlugin/ARKitRemote/EditorTestSceneを起動しました。

すると次のような緑の画面がUnityエディタに表示されます。

f:id:nn_hokuson:20181017183437p:plain:w400

次にConsoleウインドウの「Editor▼」から使用する端末を選択します。PCとスマートフォンが同一のLANに接続している場合は、Wifi経由でも接続できますが、とりあえずUSB経由での接続をおすすめします。

f:id:nn_hokuson:20181017183448p:plain:w600

正しく接続できると次のようにUnityエディタの実行画面の上側に「Start Remote ARKit Session」というボタンが表示されるのでクリックしてください。

f:id:nn_hokuson:20181017183458p:plain:w200

UnityエディタにiPhoneで撮影した画像が表示されます。また、EditorTestSceneを実行した場合は、Unityエディタの画面をクリックすると、その場所に立方体が表示されます。

f:id:nn_hokuson:20181017185556j:plain:w500

SwiftでARKitを学ぶ

ARKitRemoteは変更結果をすぐにUnityエディタ上で確認できるので非常に便利でした。
ただ、ARKitRemoteではうまく動かないARの機能もあります。そのため、ARKitの機能を個別に知るにはSwiftでの学習がオススメです。次の参考書を書きましたので、是非参考にしてみてください。

booth.pm

Unityで始めるARKit入門 影の表示編

ARKitを使って影を表示する場合、足元に丸影を置くのが一番簡単です。ただ、見栄え的にはやはりちゃんとした影があったほうがリアルですね。そこで、ARで影を付ける方法を紹介します。

f:id:nn_hokuson:20181011215215j:plain

ARで影を表示する手順

ARKitを使って綺麗な影を付ける方法は、ほとんど丸影をつける方法と同じ手順で出来ます。

  1. 影を表示するための平面を作成
  2. モデルの子要素にする
  3. MobileARShadowシェーダを使用する

3つ目の手順だけが丸影とは異なります。丸影の場合はココに影のテクスチャをセットしますが、今回はリアルな影を表示したいので、UnityのARKit Pluginに用意されているMobileARShadowシェーダを使います。
 

影を表示する平面を作成

ヒエラルキーウインドウから「Create」→「3D Object」→ 「Plane」を選択して、適当な大きさに変形して、足元に配置します。

f:id:nn_hokuson:20181011215412j:plain:w500

影の平面を子要素にする

配置できたら影用の平面をモデルの子要素にします。ヒエラルキーウインドウで平面をモデルにドラッグ&ドロップしてください。

f:id:nn_hokuson:20181011215425p:plain:w270

MobileARShadowシェーダを使用する

配置した平面にMobileARShadowシェーダを適用します。「UnityARKitPlugin/Example/Common/Materials」の中の「ShadowPlane」マテリアルを、平面オブジェクトにドラッグ&ドロップしてください。

f:id:nn_hokuson:20181011215604j:plain:w500

エディタ上でも影だけが表示されているのがわかると思います。後はこのPrefabをARで表示すれば、自動的にモデルの形の影が表示されるようになります。

f:id:nn_hokuson:20181011215215j:plain:w500

ARでタップしたところにモデルを表示する方法は次の記事を参考にして下さい。

nn-hokuson.hatenablog.com

影だけを表示するシェーダの中身を見る

折角なので影を表示するシェーダの中身を見ておきましょう。シェーダは「UnityARKitPlugin/Example/Common/Shaders」の「MobileARShadow.shader」にあります。

Shader "Custom/MobileARShadow"
{
    SubShader {
        Pass {
            Tags { "LightMode" = "ForwardBase" "RenderType"="Opaque" "Queue"="Geometry+1" "ForceNoShadowCasting"="True"  }
	    LOD 150
	    Blend Zero SrcColor
	    ZWrite On
        
            CGPROGRAM
 
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc" 
            #pragma multi_compile_fwdbase
            #include "AutoLight.cginc"
  
            struct v2f
            {
                float4 pos : SV_POSITION;
                LIGHTING_COORDS(0,1)
            };
  
            v2f vert(appdata_base v) {
                v2f o;
                o.pos = UnityObjectToClipPos (v.vertex);
                TRANSFER_VERTEX_TO_FRAGMENT(o);                 
                return o;
            }
 
            fixed4 frag(v2f i) : COLOR {
                float attenuation = LIGHT_ATTENUATION(i);
                return fixed4(1.0,1.0,1.0,1.0) * attenuation;
            }
 
            ENDCG
        }
    }
    Fallback "VertexLit"

}

このシェーダの中ではv2f構造体の中でLIGHTING_COORDSを使ってライトマップとシャドウマップ用のTEXCOORDを生成しています。フラグメントシェーダではLIGHT_ATTENUATIONを使って、先程適宜したライトマップとシャドウマップから光の減衰具合を調べています。これにより影のある場所だけが不透明になり、その他の部分は透明な画像になります。

Unityのシェーダに関しては次の記事も合わせてご覧ください。

nn-hokuson.hatenablog.com

SwiftでARKitを学習したい

SwiftでARKitを試したい場合は、ぜひ拙書の「ARKit超入門」を見ていただければと思います。
ただ、SceneKitでリアルな影を表示するのはUnityほど簡単じゃないかもです・・・(笑)
booth.pm

Unityで始めるARKit入門 画像トラッキング編

今回はARKit1.5から使えるようになったARマーカーについて紹介します。この機能を使うとVuforiaやARToolKitのように、自分の使いたいマーカー画像の上にARでモデルを表示することができます

f:id:nn_hokuson:20181010193524j:plain:w600

ARKitで画像トラッキングする流れは次のとおりです。

 

ARKitと画像トラッキング

ARマーカーを使ってARを表示する仕組みは、前回までの平面を認識する仕組みとは大きく異なります。

平面認識が空間中の特徴点から平面を算出していました。それに対して、VuforiaなどのARマーカーを使ったARでは映像中のマーカーの歪み方から、カメラの位置を計算してARを表示します。

nn-hokuson.hatenablog.com

ARKit1.5までは「動かない画像」しかマーカーにすることができませんでした。しかし、ARKit2.0ではARImageTrackConfigurationというコンフィギュレーションが導入され、マーカーを動かしてもその上にARモデルを表示し続ける(画像トラッキング)ことができるようになりました。

ただ、残念なことに2018年10月現在、UnityからARKit Pluginを通してARImageTrackConfigurationを使用することができません。ここでは従来の手法を使ってARを表示する方法を紹介します。

booth.pm

UnityとARKitで画像トラッキングする流れ

ARKit Pluginで画像トラッキングをするには次の手順が必要になります。

  1. 画像マーカー(ARReferenceImage)を登録する
  2. 画像セット(ARReferenceImageSet)に追加する
  3. 画像セットを登録する
  4. 画像と表示するモデルを関連づける

f:id:nn_hokuson:20181010191839j:plain:w500

UnityのARKit Pluginでは画像マーカーをARReferenceImageとして扱います。使用したい画像をARReferenceImageとして用意し、それをARReferenceImageSetに登録します。作成したセットはCamera Managerに登録します。最後にGenerateImageAnchorスクリプトを使って画像マーカーとモデルを関連づけます。

プロジェクトの作成

今回も前回と同様ARKit Pluginを使用します。まだダウンロードしていない人は下記のURLからダウンロードしてください。

https://bitbucket.org/Unity-Technologies/unity-arkit-plugin/get/arkit2.0_beta.zip

また、セットアップ手順などはこちらで説明しています。

nn-hokuson.hatenablog.com

UnityARKitPlugin/Examples/ARKit1.5/UnityARImageAnchorのプロジェクトを開いてください。

f:id:nn_hokuson:20181010184745j:plain

このプロジェクトにはUnityのロゴが書かれた2つのARマーカーが登録されています。ここでは、これらに加えて次のマーカ(姫路城!)を使用します。

f:id:nn_hokuson:20181010192854j:plain:w256

画像マーカー(ARReferenceImage)を登録する

上記の画像をReferenceImagesフォルダに追加しましょう(別のフォルダでも問題ありません)追加できたらプロジェクトウインドウで右クリックして、「Create」→「UnityARKitPlugin」→「ARReferenceImage」 を選択して(ファイル名はTestReferenceImageにしました)ください。

f:id:nn_hokuson:20181010184821p:plain:w100

続いて今作成したTestReferenceImageにマーカーの情報を登録します。インスペクタから次のように登録してください。Image Textureには先ほど登録した画像をドラッグ&ドロップします。Physical SizeはARマーカーの大きさ(単位はm)です。Physical Sizeが0のままだとXcodeのビルド時にエラーが出ます。
 

項目名 設定値
Image Name Test
Image Texture ARマーカー画像
Physical Size 0.05

f:id:nn_hokuson:20181010184844p:plain:w300

画像セット(ARReferenceImageSet)に追加する

作成したARReferenceImageを画像セットに登録します。新規で画像セットを作っても良いのですが、もうすでに用意されているものがあるので、ここではそれを利用しましょう。

プロジェクトウィンドウでARImageSet_UnityLogoを選択して、インスペクタのReference ImagesのSizeを3に設定してください。そしてElement3に先程のTestReferenceImageをドラッグ&ドロップします。

f:id:nn_hokuson:20181010185649p:plain:w300

このImageSetに登録した画像がARマーカーとして検出される対象になります。

画像セットを登録する

次に上のステップで作成したARReferenceImageSetをシステムに登録します。といってもこちらもすでに登録済みですので、内容だけ確認しておきましょう。

ヒエラルキーウインドウでARCameraManagerを選択します。インスペクタのUnityARCameraManagerのImage Trackingの項目を見てください。Detection Imagesに先程の画像セットが登録されています。

今回は合計で3枚のARマーカーを用意したので、Maximum Number of Trcked Imagesの値は「3」に変更しておきましょう。

f:id:nn_hokuson:20181010185035p:plain:w300

画像と表示するモデルを関連づける

最後に登録したARマーカーを映したときに、マーカー上に表示する3Dモデルを決めます。今回も表示するモデルには次のアセットを使用させてもらいました。

ヒエラルキーウインドウで「Create」→「Create Empty」で空のゲームオブジェクトを作ります。次に作成したオブジェクトを選択した状態で「Add Component」→「Generate Image Anchor」スクリプトをアタッチします。

f:id:nn_hokuson:20181010185152j:plain

スクリプトのReferenceImageに「TestReferenceImage」、Prefab To GenerateにリンゴのPrefabをそれぞれドラッグ&ドロップしてください。

f:id:nn_hokuson:20181010185239p:plain:w350

画像トラッキングの確認

これでUnityとARKitを使って画像トラッキングを行う準備は完了です。実際にビルドして正しく動くか確認してみてください。

ビルドする際にはBuild SettingsのScenes In Buildの項目に、UnityARImageAnchorのシーンをドラッグ&ドロップで追加するのを忘れないようにしましょう。

f:id:nn_hokuson:20181010185934p:plain:w450

正しく設定できていれば、ARマーカーを映すとARでリンゴの3Dモデルが表示されます。UnityかXcodeの設定で、ビルドのターゲットはiOS12にしておかないとエラーが出る可能性があります。

f:id:nn_hokuson:20181010194001g:plain:w500

Swiftで学ぶARKit

ここまでUnityとARKit Pluginを使って画像トラッキングをする方法を紹介してきました。Unityを使うと3Dモデルの準備やアニメーションが簡単な一方で、現在のところARImageTrackingConfigurationが使えないため、効率的な画像トラッキングができません。

したがって、今のところ画像トラッキングに関しては、Swiftから直接ARKitを使ったほうが速度もロバスト性も高いものを作ることができます。

SwiftでARKitを試したい場合は、ぜひ拙書の「ARKit超入門」を見ていただければと思います。もちろんARKitを使って画像トラッキングをする方法も紹介しています!

booth.pm