一泊二日で8th Wall Webに入門してみた

WebAR TOKYO #01（https://webar-tokyo.connpass.com/event/156371/）発表資料です。

■WebAR TOKYO
https://webar-tokyo.connpass.com/

Transcript

1. 一泊二日で 8th Wall Webに入門してみた WebAR TOKYO #01 2019年12月12日 ウルシステムズ株式会社 近藤 繁延
2. 自己紹介 • 名前： 近藤 繁延（Shigenobu. Kondo） • SNS： Twitter：のぶ（@mininobu） Facebook：近藤 繁延（shigenobu.kondo） • 会社： ウルシステムズ株式会社 • 仕事： Web/Mobile開発、先端技術導入の支援 最近はデータアナリティクス分野も手掛ける 2
4. WebARと私 • WebARと出会って約1年半、取り組み期間は約1か月です。 4 2018年4月 2018年5月 展示会でWebARに出会う AR.js + A-FRAMEでQRをマーカーにしたWebARコンテンツを作る ＋ ＝ 2019年3月 8th Wall WebでImage Targetが実装されたこと知る 2019年12月 8th Wall WebのImage Targetで画像マーカーのWebARコンテンツを作る QRコード じゃなぁ… ＋ ＝ 画像認識 キターーー！
5. 本日のテーマ 先日の社内Tech合宿（一泊二日）で8th Wall Webを触ってみたので 開発手順 すごい点 困った点 の3点を紹介します。 5 一泊二日で8th Wall Webに入門してみた Image Targetを 中心に
6. 作ったもの 6 ガスコンロを写すと ポトフ鍋（？）が 表示されます 作品名 ARポトフ
7. 8th Wall Webでの開発手順 • 事前準備として8th Wall Webのユーザ登録、コード／リソース を格納するワークスペース、プロジェクトを作成します。 7 1.ユーザ登録 2.ワークスペース作成 3.開発プロジェクト作成 （課金時）
8. 8th Wall Webでの開発手順 • 8th Wall Webは目的毎にコードテンプレートを用意しています。 テンプレートをベースにすると、すぐ動くものが作れます。 8 Click 使用するフレームワークとテンプレートを選択します。 Place Ground 指定の床にオブジェクトを設置 Image Target Flyer 画像を認識してオブジェクトを表示 Manipulate 3D Model 3Dモデルの操作（ジェスチャー／移動／拡縮） Toss Object 床面との接触判定 Blank Project 空のプロジェクト
9. 8th Wall Webでの開発手順 • あとはオンラインエディタで開発するのみです。（有償） 9 コンソール （ログ表示など） プレビュー表示 各種ビュー ファイルリスト ソースリポジトリ 画像ターゲット 各種設定 など コード／アセット 一覧 コード／アセット 内容の表示
10. すごい点 • 画像認識型のARコンテンツが“とにかく簡単”に作れます。 1. 認識させたい画像をアップロードし、画像にIDを付与する 2. コードで画像IDと表示するオブジェクトの紐づけを定義する 10 1-1. Image Targets を選択 1-2. 画像を アップロード 1-3. 画像IDを設定 1.認識したい画像を登録 2.認識画像と表示オブジェクトの紐づけ定義 （A-FRAMEの例） 2-1. 認識したい画像IDを 定義 2-2. 表示したい オブジェクトを定義
11. すごい点 • 画像背景を透明にすると、部分的な認識が可能です。 11 背景が透明 アップロード 背景が ぱっと見黒い 背景が ぱっと見黒い 背景が異なる が認識される
12. 困ったこと • 2019年10月下旬の大型アップデートの影響か？国内の解説記事 と情報に差異があり、手順が違う！動かない！と現場が混乱。 12 → Quick Start Guideに従ってAccount Upgrade（課金） しました。後悔はしていません。 クラウドエディタ（有償）で開発する手順 ローカルPC上で開発する手順 （おそらく、旧Quick Start Guideでは…） 10月！
13. 困ったこと • 3Dモデルをまともに取り扱ったことがなかったので、8th Wall Webの仕様や適したサイズの3Dモデルの用意に苦戦しました。 • 一番苦労したのは、8th Wall Webが取り扱える3Dモデル「.glb形式」 に変換できなかったこと。 • 諦めかけた時、神ツール（GLTF to GLB Packer）が発見されました。 13 GLTF to GLB Packer（https://glb-packer.glitch.me）
14. まとめ：一泊二日の学び • 8th Wall Webは、画像マーカーのWebARコンテンツ開発ツー ルとして素晴らしいものです。（ぜひ有償版で使い続けたい） • 非商用／個人開発用ならオンラインエディタ、ホスティングが一定量 まで無料というプランがあると、なおありがたいなぁ・・・。 • 素のテンプレートでも十分強力ですが、本格的に作りこむのだ れば、A-FRAME／three.jsあたりの詳細な知識が求められそう。 • 8th Wall Web以外で画像マーカーのWebARを実装する方法を ご存知の方がいたら教えてください。 ※AR.jsはまだマーカー式のため追いかけていません。 14
15. 15 みなさんでWebARを 盛り上げていきましょう！ ご清聴ありがとうございました