りゃおの学びログ

ARを中心に学びを記録

【ARCore】AugmentedImageを試す

AR ARCore Unity

ARCoreのAugmentedImageを試してみました。

ARCoreでは1.2.0から追加された機能ですが、Viewforiaなどの先行していたARではむしろこっちの方が普通なイメージでした。
ARKitでも1.5で追加された機能です。

開発環境

  • Windows10
  • Unity 2018.1.7f1
  • ARCore SDK for Unity v1.3.0
  • Galaxy S9

ARCoreのサンプルを実行

まずはそのままの設定で実行してみました。
f:id:ryaoucn:20180819093946j:plain
画像に合わせて四隅に額縁が表示されるようです。
プリントアウトしなくてもディスプレイで表示した画像でしっかり検知してくれます。
ただ見ての通り、ターゲットの画像がかなーりぼやけてますので、
"AugmentedImagesSessionConfig"の"Camera Focus Mode"を"Auto"にして実行してみました。
f:id:ryaoucn:20180819093325j:plain
かなりはっきりと差が出ましたね。
AugmentedImageを使う場合はオートフォーカスは有効にした方がよさそうです。

表示するオブジェクトを変えてみる

額縁ではなくユニティちゃんを表示してみます。
まずは"ExampleController"にアタッチされているスクリプト、"AugmentedImageExampleController"を確認してみたところ、
このスクリプト自体はARCoreがあらかじめ"Example Database"に登録されている画像が検出された場合、設定されている"AugmentedImageVisualizerPrefab"を配置するためのもののようです。
"Example Database"は"AugmentedImagesSessionConfig"の中で指定されています。

"AugmentedImageVisualizerPrefab"に設定されている"AugmentedImageVisualizer"には"AugmentedImageVisualizer"スクリプトがアタッチされており、どうやらこのスクリプトで表示するオブジェクトやそのオブジェクトの表示位置を制御しているよう。
ということはこのスクリプトを書き換えればいけそう。

サンプル用の額縁が表示するオブジェクトとして設定されているので、それをユニティちゃんに書き換え、その他いらない部分を削除。
Update()の中で表示位置を設定しているので、画像の真ん中に表示するようにしました。
※このときユニティちゃんのプレハブのRotationのyを180にしておかないと正面をむいてくれません。

namespace GoogleARCore.Examples.AugmentedImage
{
    using System;
    using System.Collections.Generic;
    using System.Runtime.InteropServices;
    using GoogleARCore;
    using GoogleARCoreInternal;
    using UnityEngine;

    public class AugmentedImageVisualizer : MonoBehaviour
    {
        public AugmentedImage Image;

        public GameObject Kohaku_chan;

        public void Update()
        {
            if (Image == null || Image.TrackingState != TrackingState.Tracking)
            {
                Kohaku_chan.SetActive(false);
                return;
            }

            float halfWidth = Image.ExtentX / 2;
            float halfHeight = Image.ExtentZ / 2;
            Kohaku_chan.transform.localPosition = (halfWidth * Vector3.zero) + (halfHeight * Vector3.zero);

            Kohaku_chan.SetActive(true);
        }
    }
}

このスクリプトをユニティちゃんプレハブにアタッチし、ユニティちゃんプレハブを"ExampleController"の"AugmentedImageVisualizerPrefab"に設定します。

結果1

f:id:ryaoucn:20180819121121j:plain
よしよし。

画像ごとに表示するオブジェクトの出し分け

サンプルではどの画像を検出しても同じ額縁を表示するようですが、画像ごとに異なるオブジェクトを表示できないか試してみました。

今度は"AugmentedImageExampleController"の方を書き換えました。
"AugmentedImageVisualizerPrefab"にあたるものを3つ用意します。
さらに検出された画像からデータベースに紐づけられているインデックスを取得し、インデックスごとに表示する"AugmentedImageVisualizerPrefab"を変えるように修正しました。

                AugmentedImageVisualizer visualizer = null;
                m_Visualizers.TryGetValue(image.DatabaseIndex, out visualizer);
                if (image.TrackingState == TrackingState.Tracking && visualizer == null)
                {
                    // Create an anchor to ensure that ARCore keeps tracking this augmented image.
                    Anchor anchor = image.CreateAnchor(image.CenterPose);
                    // ----------------------ここから----------------------
                    if (image.DatabaseIndex == 6)
                    {
                        visualizer = (AugmentedImageVisualizer)Instantiate(AugmentedImageVisualizerPrefab1, anchor.transform);
                    }
                    else if (image.DatabaseIndex == 7)
                    {
                        visualizer = (AugmentedImageVisualizer)Instantiate(AugmentedImageVisualizerPrefab2, anchor.transform);
                    }
                    else
                    {
                        visualizer = (AugmentedImageVisualizer)Instantiate(AugmentedImageVisualizerPrefab3, anchor.transform);
                    }
                    // ----------------------ここまで----------------------
                    visualizer.Image = image;
                    m_Visualizers.Add(image.DatabaseIndex, visualizer);
                }
                else if (image.TrackingState == TrackingState.Stopped && visualizer != null)
                {
                    m_Visualizers.Remove(image.DatabaseIndex);
                    GameObject.Destroy(visualizer.gameObject);
                }

結果2

f:id:ryaoucn:20180819131154j:plain
ちゃんとできてますね。

今回は表示するオブジェクトごとに"AugmentedImageVisualizer"スクリプトをアタッチして、"ExampleController"にセットするということをやりましたが、それだと表示するオブジェクトが増えると面倒なことになるのでうまい方法を考えたいですね。

気になってるやつ

このARの活用例が凄くかっこいいので真似してみたい。
こちらはARKitでやっているようですね。
今度ARCoreでやってみたいです。