ARで内装レイアウト！ARKit2.0とUnityでAR開発

こんにちは。製造建設ソリューションサービス部の菱沼です。
今年は「Oculus Quest」が発売予定など、AR/VRのさらなる発展が期待できる年になると感じております。

さて、前回の記事ではARKit2.0を平面検出を行う方法について解説しました。今回はサンプルを活用したコンテンツを作成したいと思います。

ARKitとは

「ARKit」とはAppleが提供しているiOS向けの「ARプラットフォーム」です。「ARKit2.0」は新機能が搭載されたARKitの新バージョンになります。「ARKit2.0」の動作環境は以下の通りです。
〇iOSのみ
〇iOS12以上
〇iPhone:iPhone6s以降
〇iPad:iPad(5世代)以降
〇iPad Pro:iPad Pro(すべてのモデル)

サンプルシーン

前回使用したサンプルのシーン(Scene)を開きます。

1.下部メニューの「Project」を選択
2.「Assets」＞「UnityARKitPlugin」＞「Examples」＞「ARKit2.0」＞「UnityARKitWorldMap」フォルダを開く
3.「UnityARWorldMap.unity」をダブルクリックで開く

違うオブジェクトを配置する

ここからサンプルを編集していきます。配置するオブジェクトを木に変更し、複数配置できるようにしていきたいと思います。

1.画面中央の「Scene」タブを「Asset Store」に変更
2.検索バーに「Yughues Free Palm Trees」と入力し、検索
3.「ダウンロード」「インポート」を選択し、「Import Unity Package」が表示されるので「Import」を選択
4.「Assets」内に「Yughues Free Palm Trees」が追加されていることを確認する
5.「Hierarchy」内の不要なオブジェクトを削除する

6.下部メニューの「Project」の検索バーに「UnityARHitTestExample」を入力
7.「UnityARHitTestExample.cs」ファイルを「Command + D」でDuplicateし、ファイル名を変更する(ここでは「CreateARObject」)
8.ファイルを開きコードを以下のように編集

using System;
using System.Collections.Generic;

namespace UnityEngine.XR.iOS
{
    public class CreateARObject : MonoBehaviour
    {
        //配置するオブジェクト
        public GameObject ARObject;

        void HitTestWithResultType (ARPoint point)
        {
            List hitResults = UnityARSessionNativeInterface.GetARSessionNativeInterface ().HitTest (point, ARHitTestResultType.ARHitTestResultTypeExistingPlaneUsingExtent);
            //オブジェクトの配置
            if (hitResults.Count > 0) {
                Instantiate(ARObject);
                foreach (var hitResult in hitResults) {
                    ARObject.gameObject.transform.position = UnityARMatrixOps.GetPosition (hitResult.worldTransform);
                    ARObject.gameObject.transform.rotation = UnityARMatrixOps.GetRotation (hitResult.worldTransform);
                }
            }
        }
        
        // Update is called once per frame
        void Update () {

            //画面タッチした場合の動作
            if (Input.touchCount > 0 && ARObject != null)
            {
                var touch = Input.GetTouch(0);
                if (touch.phase == TouchPhase.Began || touch.phase == TouchPhase.Moved)
                {
                    //タッチした座標を取得する
                    var screenPosition = Camera.main.ScreenToViewportPoint(touch.position);
                    ARPoint point = new ARPoint {
                        x = screenPosition.x,
                        y = screenPosition.y
                    };

                    HitTestWithResultType (point);
                }
            }
        }
    }
}

9.「Hierarchy」内で右クリックし、「Create Empty」を選択して空オブジェクトを作成する(ここでは「Script」)
10.空オブジェクトに修正したコード「CreateARObject.cs」をドラッグアンドドロップする

11.空オブジェクトの「Inspector」内にスクリプトスクリプトが追加される
12.「AR Object」の項目に配置したいオブジェクトをドラッグアンドドロップする（ここでは「PalmTreeDualStraightOneSided」）

これで設定は完了です。オブジェクトの大きさは各オブジェクトの「Inspector」内にある「Transform」の「Scale」の値で調整することができます。今回使用する「PalmTreeDualStraightOneSided」の「Scale」の値はX,Y,Z全て0.05です。

AR体験！

それでは最後にAR体験をしてみましょう！実際に動かしてみるとタッチした座標にオブジェクトを配置することができます。

[su_youtube url=”https://www.youtube.com/watch?v=jmRLYdnaIh8″ width=”400″ height=”220″]

おわりに

いかがでしたか？今回はオブジェクトを現実空間上に自由に配置することができました。今回はただオブジェクトを配置するだけでしたが、ARKitを活用すれば部屋の中に家具や家電のレイアウトを自由に行うこともできます。
次の動画は弊社で作成したデモアプリになります。家具を選択し、自由に配置・削除することができます。

[su_youtube url=”https://youtu.be/xvo7p9RAoUw” width=”400″ height=”220″]

このようなアプリをARKit2.0では作成することができます。今後もARKitで可能なことを発信していきたいと思います。最後までお付き合いいただき、ありがとうございました。

AR/VRのホワイトペーパーダウンロードはこちら