全然ARやったことない人がAmazon SumerianでARデモをやってみる

https://docs.sumerian.amazonaws.com/tutorials/create/intermediate/augmented-reality-using-sumerian-8thwall/
これですね。名刺を認識して動画をはめ込む。みたいなの。

## ARについて軽く知っておくべきこと
・AR
　→　”Augmented Reality”、拡張現実ということですね。（artificial realityだと思ってた）
・マーカー
　→　マーカーとなる画像とかを読み込むと、そこにARなオブジェクトが出てくる。その基点的なもの（黒枠のもの）
・マーカーレス
　→　マーカーなしでそのままARなオブジェクトを表示させる。
・ロケーションベース
　→　位置情報からAR出すか判断する。
・イメージトラッキング
　→　特定の画像を認識してそこにARなオブジェクトを出す。
・８th wall
　→　WebARを手軽に作成できるサービス、他にもいろいろあるけどひとまず無料プランのままで

↑今回のケースだとイメージトラッキングになりますね。

## 8th wallにアカウント登録、プロジェクト作成、デバイス認証
まずはここから。
登録自体は普通のサービスと同じ、ただし自分の環境ではどうしてもSMS認証（携帯）でSMSが届かず、サポートに問い合わせ。
（問い合わせた次の日にアカウント認証してくれた）

で、プロジェクト作成
![スクリーンショット 2020-04-20 20.32.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120789/7efbca3f-55cd-fce3-d4bd-896bfbc1dbed.png)
ここから

次の「Application Name」もまぁ適当に。

で、メインのダッシュボードに出たらデバイス（ブラウザ、端末とか）の認証を行う。
上の元ページにも書いてあるが、
> Caution: If you use a QR reader to scan the mobile QR code, be sure to then launch that link in the native browser on your phone before authorizing. Otherwise, you may be authorizing the embedded browser of the QR reader app but not the main web browser on your phone.

ここがちょっと曲者。
アイフォンの場合は直接QRコードアプリから読むとうまくいかない、普通にカメラを立ち上げてQR読んでSafariなどで開かないと認証がうまく行かなかった。
![スクリーンショット 2020-04-20 20.35.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120789/f94510bf-999e-b6a3-1757-f49494d71084.png)
ちなみに今回のチュートリアルではPCのブラウザからは動かないのでPCの認証はどちらでも良い。

## ターゲットイメージのアップ
認識させる画像をここでアップ
（ARで出てくる画像ではなく、ARを出す対象の画像。上の例だと名刺とか）
![スクリーンショット 2020-04-20 20.47.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120789/c5706015-ae68-4784-3bc5-28017132ada8.png)
ここでは手元にあったnanaco上げてます。
（画像認識の問題である程度派手なものがいいみたい。）
参考：https://www.8thwall.com/docs/web/#changing-active-image-targets

![スクリーンショット 2020-04-20 20.53.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120789/c8976558-a7dd-cdd6-e3c3-3081f6eea2bc.png)
あとこの画面で「Load Automatically」にチェック入れてないと画像が有効にならない。（←重要
他、ここのQRコードで画像認識のテストができる。

## 8thwallプロジェクトのAppKeyのコピー
![スクリーンショット 2020-04-20 21.01.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120789/cbdc3689-8b9f-235c-0224-a52adc650abf.png)
ここで出せる。Sumerian側で後に使う。


## Amazon Sumerian側
当然の手順だが、AWSにログインして、Sumerianを選ぶ
![スクリーンショット 2020-04-20 21.09.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120789/03543400-6b7b-828f-c883-78d1310887e4.png)
テンプレから選択するのだが、この場合は「Empty」を選ぶ（公式にも書いてるが他のテンプレだとWebARにはだめだそう）

で、公式の通り
> Download the `image-tracking-with-8th-wall.zip` and import it into your scene. To import you can click on the folder icon in the Asset Panel or drag-drop the ZIP file from your desktop to the Sumerian Editor window.

「image-tracking-with-8th-wall.zip」リンクのARのサンプルをダウンロードする。
（解凍はしなくてもよい）
![スクリーンショット 2020-04-20 21.26.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120789/a45d0154-454c-b92f-ddd2-3a2deded0306.png)
めちゃ見にくいけど、このフォルダアイコンからダウンロードしたzipを選択するとARオブジェクトまわりがインポートされる。

ここから公式を読みながら根気よく

![スクリーンショット 2020-04-20 21.39.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120789/d3de5aa9-154c-5e94-5049-4e743f7a2b4f.png)

・Delete MEを消す
・AR Anchorの中の、VideoQuadを選択
・右ペインの「Script」を選択すると「8th wall init」とあるので、そこの「App key」に8th wallで参照したキーをコピペ

![スクリーンショット 2020-04-20 21.43.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120789/60855b37-58e2-e944-9cd5-23d7a01931ec.png)
デフォルトカメラの「Follow Editor Camera」オプションをオフにする。


![スクリーンショット 2020-04-20 21.45.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120789/867b57c1-d897-1f19-5252-0329b859b2b6.png)
> Set the Default Camera position to 0, 0.5, 0. 8th Wall uses the camera height to effectively scale virtual content and cannot be zero (see 8th Wall’s troubleshooting guide for more information).

と書いてあるので、そのとおりにしてみる。
（この辺はちゃんとARのドキュメント読んでないので意味はわかってない）
※座標の下の回転？も０にしておいてもいいかも

ここで準備OK
あとは右上の「Publish」からURLを発行（ひとまずPublicにしたがまぁ後で消すのでいいと思われる）
![スクリーンショット 2020-04-20 21.58.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120789/860a37c6-99c0-25e3-ca14-cf98cb808c69.png)

![スクリーンショット 2020-04-20 21.59.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120789/ebbae031-591c-7186-fd83-cb95acfbdbd1.png)
発行が完了したらURLがでる。
このURLをスマホのブラウザから開けば（上のデバイスの認証が終わっていること）
デバイスのブラウザからWebARを試せる。

参考）
![スクリーンショット 2020-04-20 22.03.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120789/a42675c5-2998-d3ef-e340-88f6bb3fc116.png)


## 試して思ったこと
・ブラウザへの負荷が高いのか、Sumerianの操作が結構重い。
・チュートリアルは書いてあるとおりにできるのだが、もうちょっと工夫しようと思うと結構いろいろ読まないといけない。
・ARオブジェクトの作成が大変そう。Sumerianで動作とかそういうのを作るのはまだマシかな？
・これまでAR触ってなかったけど結構面白い。