【echoAR】echoARのサンプルシーンを試してみた

##はじめに
今回はノンコーディングでWebARができるということで**echoAR**というサービスを試してみます。

##echoARとは
AR、VR用のクラウドプラットフォーム。
ドキュメントやチュートリアル豊富に提供されており、Unity、flutter、NodeJSなど複数のSDKも公開されている。

##①ホームページにアクセス
https://www.echoar.xyz/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/0fc84c31-ab8a-a8b0-9d78-d8a2fff076f4.png" width="500">

Start Now for Freeからアカウントを作成します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/92c2d86e-9b32-7674-4dbb-9c6380a4e012.png" width="500">

アカウントには以下の３種類がありますので、適切なプランを選択する。
今回は個人で試すだけなので、individualsを選択しました。
価格設定に関しての詳細は公式ホームページに記載されてます。
https://www.echoar.xyz/pricing

##コンソールに移動

アカウントを作成すると、登録メールアドレスにメールが届き、コンソールに移動することができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/b5c4823a-5f3b-2c8f-ff2c-6adcecadc251.png" width="500">

今回は、チュートリアルからCOVID-19ビジュアライザーの作り方をやってみます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/587e8b1b-d353-5ff0-a095-4d63a26e6f68.png" width="500">


##Githubに移動
チュートリアルをクリックすると、サンプルシーンのGithubに遷移します。
https://github.com/echoARxyz/Unity-echoAR-demo-COVID19

##Unityで新規プロジェクト作成
GithubにUnityの対応バージョンが記載されていないため、とりあえずLTSで作成しますか。
ってことで**2019.4.0f1**で作成しました。

##echoAR UnitySDKをインストール
UnitySDKをインストールします。
コンソール内からインストールできるんですね。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/d88182ec-f8be-0270-336d-ae40751ad421.png" width="500">

Unityパッケージがダウンロードできるので、
作成したUnityプロジェクトに入れます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/2c77b291-e845-d01b-d310-1081fafd64d8.png" width="500">

##Githubからサンプルシーンをプロジェクトに追加
Unity-echoAR-demo-COVID19をZIPでダウンロードし、
Unityプロジェクトに追加します。

んー、エラーが出ましたね
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/2c41bfe7-2095-f4e1-eaa3-20d763418335.png" width="500">

####既にありますよ！！ってCustomBehaviourからエラーを吐いてます
**よく見たらサンプルシーンの方で上書きしてくださいとの記載があり、echoAR UnitySDKとサンプルシーン両方にCustomBehaviourがあった**ので、１つ消しました。ってことで解決。

##APIキー入力
echoAR/Examplesにあるsumpleシーンを開きます。
ここで再生を押しても下記エラーが表示されます。
>Key '<YOUR_API_KEY>' not found!

APIキーが見つからないということなので、
APIキーを入力しましょう。

APIキーはコンソールの上部に記載されてます。
また、アカウント登録した際に届いたメールにも記載されてます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/788c9f0d-eed9-1734-0dfa-a7b8debc9cba.png" width="500">

これをコピーし、echoARオブジェクトのAPIKeyに貼り付けましょう。
##echoARにモデルを追加する
echoARブラウザに戻り、「クラウド追加」から
サンプルシーンのmodelにある**earth_obj.glb**を入れます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/c78786cf-77be-b196-2838-d09253a45fbb.png" width="500">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/0b2431e9-c4bf-0c34-f9c9-559be3d85e21.png" width="500">

「どこでも」を選択し、完了する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/c9c70678-2c8a-1328-e47e-fd1df605629e.png" width="500">

##データを入れる
サンプルシーンのmodelにある**metadata.csv**を入れます。
この時、データに事前に追加したモデルの情報が追加されてますので、そこに追加し、モデルと紐付けます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/e259fd3e-e726-6469-bff3-03d2a50ca584.png" width="500">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/4944f5c0-85a5-11cd-0bb7-98e1ce1769fc.png" width="500">

データの追加、削除等は公式のチュートリアルに詳しく記載されております。
https://docs.echoar.xyz/web-console/manage-pages/data-page/how-to-add-data#adding-metadata

##Unityで実行する
UnityEditorで実行してみます。
無事にモデルが表示できました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/8b257763-a9f1-d184-fa98-eeedc6229690.png" width="500">

##Androidで確認する
何のエラーも出ず、ビルド、確認できました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/8ad5daf8-4bdc-dd9b-8da8-05a6db777671.png" width="500">

##マーカー認識でオブジェクトを表示してみる
マーカー認識には２種類あります。

|名前 |アクション|
|:-----------|:------------|
|See on the floor |マーカー認識後、認識した平面にオブジェクトを配置する|
|See on an Image|マーカー認識後、マーカーからの相対位置でオブジェクトを配置する|

登録したモデルの下記ボタンを押して、QRコードを表示します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/260f5831-fd98-a986-fe58-e7b274ec8bdd.png" width="300">

そのQRコードをスマートフォンで読み込むことでカメラが立ち上がります。

以下はiOS、Androidでマーカーを認識した際画像

Android See on the floor
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/b561b48a-6968-67f4-8eef-40167e7cc467.png" width="200">
Android See on an Image
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/28ca344f-4898-3665-be1b-d7608256bbf0.png" width="200">
iOS See on the floor 
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/6af8455d-a7d1-caca-7da9-8c06f88d891f.png" width="200">
iOS See on an Image
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436651/6a7f3974-3a42-154a-5947-c30dced67580.png" width="200">

Android、iOS両方で確認できました。

##まとめ
| individuals(無料版)で出来ること | 備考|
|:-----------|:------------|
|echoARのクラウド使用 |モデルデータなど諸々の管理ができる。各々に割り当てられたAPIキーで取得可能|
|平面検知表示(WebAR)|Androidはmodel-viewer、iOSはARQuickLookが起動する|
|マーカー表示(WebAR)|正面、鋭角からの精度は良かったが、ライブラリ未確認|

平面検知表示、マーカー表示は本当にノンコーディングで出来ました。
また、公式チュートリアルやドキュメントが豊富にあったため、比較的容易に実装できました。

##おわりに
今回はechoARの複数ある中の1つのサンプルを試しました。
今後もARに関する記事を書いていきたいと思います。

##参考
echoAR公式：https://www.echoar.xyz/ 
echoAR公式ドキュメント：https://docs.echoar.xyz/
Unity-echoAR-demo-COVID19 Github：https://github.com/echoARxyz/Unity-echoAR-demo-COVID19