Unity+VuforiaでARアプリ作成 -

Unity+VuforiaでARアプリ作成

2017.09.29

こんにちは、コンサルティングサービス本部の朝日です。

本当はARcoreで遊んでみたかったんですが、Xperiaは対応していませんでした…。(むりやり突っ込んだらアプリがクラッシュしました)

代わりに今回はUnityとVuforiaを使ってARアプリを作ってみようと思います。

使用したもの

・Unity5.6.3

・Vuforia6.2.10

素材の用意

今回はユニティちゃんライセンスロゴをマーカーとして使いました。

同梱されているjpgやpngはマーカーとして使うにはサイズが小さいので、svgをGIMP等で大きくして使うと良いでしょう。　画像ファイルと、それを印刷した紙を用意します。

Vuforia Developer Portalでの操作

Developr Potalでアカウント登録をしてください。

Unity用のSDKダウンロード

Downloads – SDKからvuforia-unity-6-2-10.unitypackageをダウンロードします。

ライセンスキーの取得

続いて、Develop→License Manager→Get Development Keyから開発用のライセンスキーを取得しておきます。

作成したライセンスキーはアプリ作成時に使います。

ターゲットの登録

最後にDevelop→Target Manager→Add Databaseからマーカーを登録します。

・Create DatabaseではName=適当、Type=DeviceでCreateします。

・作成したデータベースを選択して、Add Targetをクリックします。

・ユニティちゃんライセンスロゴ画像を選択して、Widthにはマーカーの大きさを指定します。　単位はメートルなので、10cmのマーカーなら0.1になります。

・ターゲットの登録が終わったら、Target ManagerでDownload Database(All)→Unity Editor→Downloadでデータベースのunitypackageをダウンロードします。

ちなみに、Ratingに表示されている★の数が多いほど特徴点が多く優秀なマーカーになります。　ユニティちゃんライセンスロゴ画像はかなり優秀なマーカーですね。

Androidアプリ構築用設定

今回は割愛します。　過去記事などを参考に設定してください。

Unity上の設定

Unityで3D Projectを作成したら、

・File→Build SettingsでPlatformをAndroidに変更します。

・そのままPlayer SettingsからOther Settings→IdentificationのPackage Nameを任意の名前に変更します。

・ダウンロードしておいた、VuforiaのSDKとデータベースのunitypackageをインポートします。

アプリの開発

最も単純な構成

マーカーを検出したら、その上に3Dオブジェクトを表示するだけのアプリを作ってみます。

・新規シーンにデフォルトで配置されているMain Cameraを削除します。

・Assets→Vuforia→PrefabsからARCameraとImageTargetをD&Dで配置します。

・ARCameraのInspectorからOpen Vuforia configurationをクリックします。

・App License KeyにDeveloper Portalで取得したライセンスキーをコピペします。

・Datasetsの欄でLoad (データベース名)　DatabaseとActivateの両方にチェックを入れます。

・次にImageTargetのInspectorでDatabaseとImage Targetの項目を設定します。

・最後に、マーカーを認識したときに表示したいオブジェクトをImageTargetの子オブジェクトとして配置します。
　プリミティブオブジェクトだと味気ないので、今回はSDユニティちゃんを配置してみます。

・なお、シーンビューでマーカーの絵が表示されない時は、Assets→Vuforia→ImageTargetTextures→(データベース名)以下の*_scaledというテクスチャファイルを選択して、InspectorでTexture Shapeを2Dに変更すると直ると思います。

以上でアプリは完成ですので、Build & Runで実行するとこんな感じになります。

影を付けてみる

もう少し手を加えて、影を表示させてみたいと思います。

キャラクターの足下にPlaneオブジェクトを配置すれば影を表示することはできますが、Planeも一緒に表示されてしまいます。

※ここでは、Planeを配置しただけでは影が表示されなかったので、Edit→Project Settings→QualityでShadow Distanceを1に変更し、影が粗かったのでShadow ResolutionをVery High Resolutionに変更しています。

forumを参考に、Planeに影だけを表示するシェーダーを適用します。

Shader "Custom/TransparentShadowCollector"
{
    Properties
    {
        _ShadowIntensity ("Shadow Intensity", Range (0, 1)) = 0.6
    }


    SubShader
    {

        Tags {"Queue"="AlphaTest" }

        Pass
        {
            Tags {"LightMode" = "ForwardBase" }
            Cull Back
            Blend SrcAlpha OneMinusSrcAlpha
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile_fwdbase

            #include "UnityCG.cginc"
            #include "AutoLight.cginc"
            uniform float _ShadowIntensity;

            struct v2f
            {
                float4 pos : SV_POSITION;
                LIGHTING_COORDS(0,1)
            };
            v2f vert(appdata_base v)
            {
                v2f o;
                o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
                TRANSFER_VERTEX_TO_FRAGMENT(o);

                return o;
            }
            fixed4 frag(v2f i) : COLOR
            {
                float attenuation = LIGHT_ATTENUATION(i);
                return fixed4(0,0,0,(1-attenuation)*_ShadowIntensity);
            }
            ENDCG
        }

    }
    Fallback "VertexLit"
}

投稿されているソースをTransparentShadowCollector.shaderというファイル名で保存したあと、shaderを適用した新規マテリアルを作成して、Planeに割り当てます。

すると以下のようにユニティちゃんと影だけ表示されて良い感じになりました。

ただ、影の向きはUnity内で設定したライトの向きになってしまうので、周囲と食い違いが発生する可能性はありますが…。

検出したマーカー画像をテクスチャとしてオブジェクトに適用する

今度は少し趣向を変えて、Region Captureを使って、実際に検出したマーカーのカメラ画像をテクスチャとしてオブジェクトに貼り付けてみたいと思います。

先ほどのシーンは後で使うので、別名で保存してから作業します。　その後、ImageTargetの子オブジェクトは全部消してください。

GutHubからzip等でダウンロードして、中のunitypackageをインポートしてください。

エラーが出ているので、Region_Capture.csにキャストを追加します。

VideoBackgroundTexure = (Texture2D)VuforiaRenderer.Instance.VideoBackgroundTexture;

手順はGitHubに書かれていますが、

・20番のレイヤーにRegion_Capture"という名前を付けます。

・Assets→Region_Capture→PrefabsからRegion_Capture_UnityをHierarchyにD&Dします。

・RegionCapture_UnityのInspectorでARCamera、ImageTarget、BackgroundPlaneにそれぞれ該当するオブジェクトを設定します。

ついでにColor Debug Modeのチェックはオフにしておきます。

・ImageTargetの子オブジェクトは、プリミティブオブジェクトのCubeを配置します。

・CubeのInspectorにAssets→Region_Capture→SamplesのGetTextureを追加して、Region_Captureの欄にHierarchyのRegion_Capture_Unityを設定します。

できあがったアプリの動きは、こんな感じになります。

認識したマーカー部分がCubeのテクスチャに割り当てられるので、色の違うマーカーが来た場合にその色のテクスチャに変わります。

Smart Terrainを試してみる

最後はSmart Terrainといってマーカーが必要ですが、Vuforiaでの空間認識の機能を試してみます。

ただ、Unity2017.2.0.b11ではDeprecated(非推奨)になっていたので参考程度に。

・影を付けたときのシーンを読み込んで、ImageTarget下のPlaneを削除します。

・Assets→Vuforia→Prefabs→SmartTerrainからSmartTerrainをHierarchyにD&Dします。

・ARCameraのInspectorで、World Center ModeをSPECIFIC_TARGETに変更し、World CenterにSmartTerrain下のPrimary Surfaceを設定します。

・続けて、Open Vuforia configurationから、Scene unit in mmを1000に設定します。

・ImageTargetのInspectorで、Enable SmartTerrainにチェックを入れます。

※空間認識の効果を確認するためにParticle Systemを追加していますが、設定項目が多いので省略します。

できあがったアプリでマーカーを認識した後、ゆっくりカメラを引きます。

そうすると徐々にテーブル面や手前に置いた障害物のところにワイヤーフレームが描かれていきます。

緑の所が平面、青の線が障害物を表しています。　球が平面上を転がったり障害物にぶつかったり障害物の裏にあるものは表示されなくなっているのがわかると思います。

以上、簡単ではありますがARアプリ開発の紹介でした。

TOPに戻る

ENGINEER BLOG