【ARFoundation5.0】Unityで複数の画像を認識しそれぞれにARオブジェクトを表示させる　前編

# はじめに
Qiita初投稿です！プログラミングは初心者に毛が生えた程度なので温かい目で見ていただけるとありがたいです。初心者による初心者のための記事なれば幸いです。
# 概要
本記事ではUnityの扱いに慣れていない方でも簡単にAR開発ができる方法をまとめていきたいと思います！
ARFoundation の ImageTrackingを使えば登録した画像マーカーを認識することにより、
任意のARオブジェクトを出現させることができます!
前提として、AndroidアプリをビルドできるUnityをインストール済みの状態から始めます。


## デモ
※今回の記事ではここまではいきません
<img width="700" alt="Videotogif.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/3a9c120f-f795-65ec-1993-c92ad0bab68d.gif">


## 目次
[1.環境](#環境)
[2.unityのプロジェクト準備](#unityのプロジェクト準備)
[3.ARSessionとXROriginの準備](#arsessionとxroriginの準備)
[4.デバイス設定](#デバイス設定)
[5.参考](#参考)
## 環境

## 環境
* Windows11
* Unity 2022.3.10f1
・ARFoundation5.0.7
・ARCore XR Plugin 
・ARKit XR Plugin 
* Test Device
・Galaxy S22 SC-51C

## ARFoundation5.0
「ARFoundation」 とはiOSやAndoidプラットフォーム共通のARアプリを開発するためのUnity公式パッケージです。

https://docs.unity3d.com/Packages/com.unity.xr.arfoundation@5.0/manual/index.html

## Unityのプロジェクト準備
Unityのプロジェクトの準備は、次の通りです。
Unityをインストール後、起動しUnityのプロジェクトを「`3D`」で新規作成してください。
※AR用のテンプレートもありますが、今回はどのような設定が必要なのかなどを把握するためプレーンな状態から設定を行います。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/1a9e3304-0b16-ece0-030f-edea96ba6cae.png)


「Window→`Package Manager`」をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/081035d8-ccf1-ff85-3d69-c57a033fb6dd.png)

`Packages:`の部分をクリックし、`Unity Resistry`にし`AR`を`Install`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/3a8161c8-0be5-5cee-a4e5-d7ece64f2c52.png)

Installが始まり以下のように警告が出ますが、Yesを押すとUnityの再起動が始まります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/c24b443e-9352-b31e-e7ba-5765918bed00.png)
## ARSessionとXROriginの準備
「AR Foundation」でAR空間を実装するには、シーンに「ARSession」と「XROrigin」を追加する必要があります。
最初にHierarchyウィンドウに配置されてる「Main Camera」を削除してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/8c1f8dd9-4415-7677-9805-e5c1bafd351d.png)

Hierarchy上で右クリック「GameObject → XR → 」で「ARSession」と「XROrigin」を追加してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/da7af9f9-1590-61a2-9654-9c8d255e8c45.png)

XROrigin の子にあるメインカメラ内（黄色線部分）に「＋ → 3D Object → Cube」で立方体を追加し、位置とサイズを適当に調節してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/c0460c09-b1db-7cb8-2575-37daccba36b2.png)
`Edit`→`Project Settings`→`XR plug-in Management`→Andoroid下の`Google ARCore`にチェックをつけます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/f59dd84b-8210-6fc4-2f42-aa2ed6fecca7.png)

### Tips
自分も躓いたところなのですが、現実空間にオブジェクトを表示するというARの性質上、Unity上での3Dオブジェクトのサイズ感と現実空間とのギャップが生まれやすいです。
そのためオブジェクトのサイズ感や距離を誤って「設置したのに表示されない」という落とし穴にハマることがあります。
表示されない場合はサイズや位置関係の調整を行ってみてください。

<img width="550" alt="小さすぎる.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/e95c68ab-916b-601f-1e84-4305cdffcaf1.png">


## デバイス設定
今回はAndoroidデバイスに向けてビルドしますがARFoundationはiOSも対応しているためできると思います。
`File`→ `Build Settings`→ `Andoroid`→ `Switch Platform`を行ってください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/acb0a1d0-e462-d95d-850f-d143bb707711.png)

次に左下にある`Player Settings`→ `Player` → `Other Settings`を開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/17c5013b-03ad-0930-810c-2ad2aa62c3a7.png)
Auto Graphics APIのチェックを外します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/0c7af754-2c98-6d15-3d88-446e23957cf6.png)
Graphics APIsという行が出てくると思うので
`Vulkan`を消し、`OpenGRES3`を追加します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/b319aa2b-71f4-9302-255c-49c3e54d56d3.png)

`Minimum API Level`をLevel27以上
`Scripting Backend`をIL2CPPに変更します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/0b2369ad-6814-b3c1-2722-79747339c058.png)

ではBuild And Runをクリックし確認してみます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/60355fe3-c6a2-3289-101d-5750ee8ed237.png)

Unityが起動しスマホのカメラ越しにARのCubeが確認できれば完了です！

![Cube AR.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584542/37594ac5-8300-0d5e-70a2-c3643f557f56.gif)

## まとめ
ARFoundation5.0を使い画像認識するまでの下準備をまとめました！
後編では画像認識の部分について掘り下げていこうと思います！
細かく書こうとするとどうしても長文になってしまう...
要点をまとめ伝える力が必要ですね

## 参考
https://qiita.com/OKsaiyowa/items/29504242ec74cb5dfb04

https://qiita.com/Aster_ideatech/items/fa843c6ab0c11b610c27

https://qiita.com/tak001/items/938e85cb587f34949c28