はじめに
今回はノンコーディングでWebARができるということでechoARというサービスを試してみます。
echoARとは
AR、VR用のクラウドプラットフォーム。
ドキュメントやチュートリアル豊富に提供されており、Unity、flutter、NodeJSなど複数のSDKも公開されている。
①ホームページにアクセス
Start Now for Freeからアカウントを作成します。
アカウントには以下の３種類がありますので、適切なプランを選択する。
今回は個人で試すだけなので、individualsを選択しました。
価格設定に関しての詳細は公式ホームページに記載されてます。
https://www.echoar.xyz/pricing
コンソールに移動
アカウントを作成すると、登録メールアドレスにメールが届き、コンソールに移動することができます。
今回は、チュートリアルからCOVID-19ビジュアライザーの作り方をやってみます。
Githubに移動
チュートリアルをクリックすると、サンプルシーンのGithubに遷移します。
https://github.com/echoARxyz/Unity-echoAR-demo-COVID19
Unityで新規プロジェクト作成
GithubにUnityの対応バージョンが記載されていないため、とりあえずLTSで作成しますか。
ってことで2019.4.0f1で作成しました。
echoAR UnitySDKをインストール
UnitySDKをインストールします。
コンソール内からインストールできるんですね。
Unityパッケージがダウンロードできるので、
作成したUnityプロジェクトに入れます。
Githubからサンプルシーンをプロジェクトに追加
Unity-echoAR-demo-COVID19をZIPでダウンロードし、
Unityプロジェクトに追加します。
んー、エラーが出ましたね
既にありますよ！！ってCustomBehaviourからエラーを吐いてます
よく見たらサンプルシーンの方で上書きしてくださいとの記載があり、echoAR UnitySDKとサンプルシーン両方にCustomBehaviourがあったので、１つ消しました。ってことで解決。
APIキー入力
echoAR/Examplesにあるsumpleシーンを開きます。
ここで再生を押しても下記エラーが表示されます。
Key '' not found!
APIキーが見つからないということなので、
APIキーを入力しましょう。
APIキーはコンソールの上部に記載されてます。
また、アカウント登録した際に届いたメールにも記載されてます。
これをコピーし、echoARオブジェクトのAPIKeyに貼り付けましょう。
echoARにモデルを追加する
echoARブラウザに戻り、「クラウド追加」から
サンプルシーンのmodelにあるearth_obj.glbを入れます。
「どこでも」を選択し、完了する。
データを入れる
サンプルシーンのmodelにあるmetadata.csvを入れます。
この時、データに事前に追加したモデルの情報が追加されてますので、そこに追加し、モデルと紐付けます。
データの追加、削除等は公式のチュートリアルに詳しく記載されております。
https://docs.echoar.xyz/web-console/manage-pages/data-page/how-to-add-data#adding-metadata
Unityで実行する
UnityEditorで実行してみます。
無事にモデルが表示できました。
Androidで確認する
何のエラーも出ず、ビルド、確認できました。
マーカー認識でオブジェクトを表示してみる
マーカー認識には２種類あります。
| 名前 | アクション |
|---|---|
| See on the floor | マーカー認識後、認識した平面にオブジェクトを配置する |
| See on an Image | マーカー認識後、マーカーからの相対位置でオブジェクトを配置する |
登録したモデルの下記ボタンを押して、QRコードを表示します。
そのQRコードをスマートフォンで読み込むことでカメラが立ち上がります。
以下はiOS、Androidでマーカーを認識した際画像
Android See on the floor
Android See on an Image
iOS See on the floor
iOS See on an Image
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