一泊二日で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日
   ウルシステムズ株式会社
   近藤 繁延
   

   View Slide

2. 自己紹介
   • 名前：
   近藤 繁延（Shigenobu. Kondo）
   • SNS：
   Twitter：のぶ（@mininobu）
   Facebook：近藤 繁延（shigenobu.kondo）
   • 会社：
   ウルシステムズ株式会社
   • 仕事：
   Web/Mobile開発、先端技術導入の支援
   最近はデータアナリティクス分野も手掛ける
   2
   

   View Slide

3. View Slide

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コード
   じゃなぁ…
   ＋ ＝ 画像認識
   キターーー！
   

   View Slide

5. 本日のテーマ
   先日の社内Tech合宿（一泊二日）で8th Wall Webを触ってみたので
   開発手順 すごい点 困った点
   の3点を紹介します。
   5
   一泊二日で8th Wall Webに入門してみた
   Image
   Targetを
   中心に
   

   View Slide

6. 作ったもの
   6
   ガスコンロを写すと
   ポトフ鍋（？）が
   表示されます
   作品名
   ARポトフ
   

   View Slide

7. 8th Wall Webでの開発手順
   • 事前準備として8th Wall Webのユーザ登録、コード／リソース
   を格納するワークスペース、プロジェクトを作成します。
   7
   1.ユーザ登録 2.ワークスペース作成 3.開発プロジェクト作成
   （課金時）
   

   View Slide

8. 8th Wall Webでの開発手順
   • 8th Wall Webは目的毎にコードテンプレートを用意しています。
   テンプレートをベースにすると、すぐ動くものが作れます。
   8
   Click
   使用するフレームワークとテンプレートを選択します。
   Place Ground
   指定の床にオブジェクトを設置
   Image Target Flyer
   画像を認識してオブジェクトを表示
   Manipulate 3D Model
   3Dモデルの操作（ジェスチャー／移動／拡縮）
   Toss Object
   床面との接触判定
   Blank Project
   空のプロジェクト
   

   View Slide

9. 8th Wall Webでの開発手順
   • あとはオンラインエディタで開発するのみです。（有償）
   9
   コンソール
   （ログ表示など）
   プレビュー表示
   各種ビュー
   ファイルリスト
   ソースリポジトリ
   画像ターゲット
   各種設定
   など
   コード／アセット
   一覧
   コード／アセット
   内容の表示
   

   View Slide

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.
    表示したい
    オブジェクトを定義
    

    View Slide

11. すごい点
    • 画像背景を透明にすると、部分的な認識が可能です。
    11
    背景が透明
    アップロード
    背景が
    ぱっと見黒い
    背景が
    ぱっと見黒い
    背景が異なる
    が認識される
    

    View Slide

12. 困ったこと
    • 2019年10月下旬の大型アップデートの影響か？国内の解説記事
    と情報に差異があり、手順が違う！動かない！と現場が混乱。
    12
    → Quick Start Guideに従ってAccount Upgrade（課金）
    しました。後悔はしていません。
    クラウドエディタ（有償）で開発する手順
    ローカルPC上で開発する手順
    （おそらく、旧Quick Start Guideでは…）
    10月！
    

    View Slide

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）
    

    View Slide

14. まとめ：一泊二日の学び
    • 8th Wall Webは、画像マーカーのWebARコンテンツ開発ツー
    ルとして素晴らしいものです。（ぜひ有償版で使い続けたい）
    • 非商用／個人開発用ならオンラインエディタ、ホスティングが一定量
    まで無料というプランがあると、なおありがたいなぁ・・・。
    • 素のテンプレートでも十分強力ですが、本格的に作りこむのだ
    れば、A-FRAME／three.jsあたりの詳細な知識が求められそう。
    • 8th Wall Web以外で画像マーカーのWebARを実装する方法を
    ご存知の方がいたら教えてください。
    ※AR.jsはまだマーカー式のため追いかけていません。
    14
    

    View Slide

15. 15
    みなさんでWebARを
    盛り上げていきましょう！
    ご清聴ありがとうございました
    

    View Slide