ARCoreの力を使ってきのこの山をたけのこの里に変えてみた。

## たけのこの里が好き
今回はたけのこの里が好きなので、きのこの山が家にあった際にARを使って上からたけのこの里に変えるというARアプリの作成をしました。（きのこの山が嫌いなわけではないです）

## 参考にさせていただいた記事
https://blog.gcrest.com/archives/1013

## 環境
Windows 10
Unity2018.4.17f
ARCore-Unity-SDK(https://github.com/google-ar/arcore-unity-sdk/releases/tag/v1.9.0)
Huawei mate 20 lite

## 実装
まず初めにARCoreのgithubからダウンロードをしてきます。そして、SampleSceneにAssets/GoogleARCore/Prefabsに存在しているARCore Deviceを追加を行い以下の画像のようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199067/28e1ad91-a0e3-7424-8e32-4d0c328f8ee5.png)

次に今回のARを表示するためのマーカーとなる画像をUnityにインポートを行います。そしてインポートした画像を右クリック=>Create=>Google ARCore=> AugmentedImageDatabaseをクリックします。（以下の画像）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199067/916cb3e0-0cc7-db24-7e96-2b89105baef1.png)
これを行うとマーカーとしてデータベースに画像が保存されます。ここで大きさは0.1名前についてはkinokoとして登録しました。Qualityがマーカーとしてどれだけ適しているかを示しています。今回の画像は100となっているので、最高の値を出しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199067/aff8fa3d-c88b-0ac1-6a7b-249ed8172acc.png)
次にARCore Deviceを選択して、ARCoreSessionの中にあるSession Configのダブルクリックします。その中のAugumentedImage Databaseに一つ前に作成したデータベースのmarkerを登録します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199067/850346be-249b-80f4-d337-57b2b583c3ea.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199067/9b753eea-a7f3-83dc-8c8f-ac3023fe7a62.png)

次に検出を行うコードを書きます。そして、ARCore下にGameObject(Manager)を作成して、次のスクリプトをアタッチします。(コードも参考にさせていただいた記事からお借りしました。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199067/98aaccb9-cd17-49ed-e771-0ac3a7d1a68b.png)

```AugmentedImageSample
using System.Collections;
using System.Collections.Generic;
using GoogleARCore;
using UnityEngine;
public class AugmentedImageSample : MonoBehaviour {

    private List<AugmentedImage> augmentedImageList = new List<AugmentedImage> ();
    [SerializeField] private GameObject ObjPrefab;
    private GameObject arObj = null;

    void Update () 
    {
        if (Session.Status != SessionStatus.Tracking) 
        {
            return; 
        }

        Session.GetTrackables<AugmentedImage> (augmentedImageList, TrackableQueryFilter.Updated);
        
        foreach (AugmentedImage image in augmentedImageList) 
        {
            if (image.TrackingState == TrackingState.Tracking) 
            {
                if (arObj == null) 
                {
                    
                    Anchor anchor = image.CreateAnchor (image.CenterPose);
                    arObj = Instantiate (ObjPrefab, anchor.transform);

                }
                else 
                {
                    
                    arObj.transform.position = image.CenterPose.position;
                    arObj.transform.rotation = image.CenterPose.rotation;
                }
            }

        }
    }
}

```
そして、Managerの選択してObj PrefabにARにおいて画像認識をした際に表示をさせたいものをセットします。今回の場合たけのこの里の画像を表示させます。まず初めにたけのこの里の画像をUnityにインポートします。そしてインポートした画像のTexture TypeをSprite(2D and UI)に変更を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199067/f2f1313c-20a8-1195-8466-1db9114d38b1.png)
その後3D Object->Planeを作成してPrefab化を行い先ほど作成を行ったたけのこの里のTextureをアタッチします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199067/5d2a8f32-91ae-1c5e-6c4c-88dd8fb1fb6b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199067/8dfcdd96-cb53-422b-a5bd-731e61b520e9.png)
作成をされたPlaneのPrefabをManagerの選択してObj Prefabへとアタッチします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199067/8c1ac5e4-013e-0281-6598-9ac79407dc96.png)
これで、きのこの山を認識して上からたけのこの里へと書き換えるARのアプリを作成することが出来ます。

## ビルドについて
まず、build settingsからSampleSceneをadd Sceneで追加を行いAndroidへとswitch platformを行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199067/f26d45ff-417e-2a0c-34c3-835e9c90aae4.png)
Player Setting は次のようになっています。ARCore Supportedを有効にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199067/41b38296-40b9-a1ef-7a32-37bbef451720.png)
minimum API LevelはAndroid 7.0 Target API Levelは端末に合わせたものを選びました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199067/a100254c-7c15-b8a3-3395-db0cc989b54f.png)

## デモ動画
このように実際に認識を行なって上から表示を行うことが出来ます。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">RTしたツイートに触発されて<br>きのこの山をたけのこの里にかえるAR作った。<br>なかなか精度が良い！<br>（作り終わったので二つとも食べます。）<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a><a href="https://twitter.com/hashtag/ARCore?src=hash&amp;ref_src=twsrc%5Etfw">#ARCore</a> <a href="https://t.co/6SnIzf5mwt">pic.twitter.com/6SnIzf5mwt</a></p>&mdash; A.h (@Ah92082778) <a href="https://twitter.com/Ah92082778/status/1282937555495686144?ref_src=twsrc%5Etfw">July 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>