1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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

ARについて軽く知っておくべきこと

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

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

8th wallにアカウント登録、プロジェクト作成、デバイス認証

まずはここから。
登録自体は普通のサービスと同じ、ただし自分の環境ではどうしてもSMS認証(携帯)でSMSが届かず、サポートに問い合わせ。
(問い合わせた次の日にアカウント認証してくれた)

で、プロジェクト作成
スクリーンショット 2020-04-20 20.32.34.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
ちなみに今回のチュートリアルではPCのブラウザからは動かないのでPCの認証はどちらでも良い。

ターゲットイメージのアップ

認識させる画像をここでアップ
(ARで出てくる画像ではなく、ARを出す対象の画像。上の例だと名刺とか)
スクリーンショット 2020-04-20 20.47.02.png
ここでは手元にあったnanaco上げてます。
(画像認識の問題である程度派手なものがいいみたい。)
参考:https://www.8thwall.com/docs/web/#changing-active-image-targets

スクリーンショット 2020-04-20 20.53.48.png
あとこの画面で「Load Automatically」にチェック入れてないと画像が有効にならない。(←重要
他、ここのQRコードで画像認識のテストができる。

8thwallプロジェクトのAppKeyのコピー

スクリーンショット 2020-04-20 21.01.09.png
ここで出せる。Sumerian側で後に使う。

Amazon Sumerian側

当然の手順だが、AWSにログインして、Sumerianを選ぶ
スクリーンショット 2020-04-20 21.09.51.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
めちゃ見にくいけど、このフォルダアイコンからダウンロードしたzipを選択するとARオブジェクトまわりがインポートされる。

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

スクリーンショット 2020-04-20 21.39.46.png

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

スクリーンショット 2020-04-20 21.43.12.png
デフォルトカメラの「Follow Editor Camera」オプションをオフにする。

スクリーンショット 2020-04-20 21.45.30.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のドキュメント読んでないので意味はわかってない)
※座標の下の回転?も0にしておいてもいいかも

ここで準備OK
あとは右上の「Publish」からURLを発行(ひとまずPublicにしたがまぁ後で消すのでいいと思われる)
スクリーンショット 2020-04-20 21.58.11.png

スクリーンショット 2020-04-20 21.59.56.png
発行が完了したらURLがでる。
このURLをスマホのブラウザから開けば(上のデバイスの認証が終わっていること)
デバイスのブラウザからWebARを試せる。

参考)
スクリーンショット 2020-04-20 22.03.41.png

試して思ったこと

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

1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?