Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

mininobu
December 12, 2019

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

mininobu

December 12, 2019
Tweet

Other Decks in Technology

Transcript

  1. 一泊二日で
    8th Wall Webに入門してみた
    WebAR TOKYO #01
    2019年12月12日
    ウルシステムズ株式会社
    近藤 繁延

    View full-size slide

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

    View full-size slide

  3. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. すごい点
    • 画像認識型の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 full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 困ったこと
    • 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 full-size slide

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

    View full-size slide

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

    View full-size slide