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. 自己紹介 • 名前: 近藤 繁延(Shigenobu. Kondo) • SNS: Twitter:のぶ(@mininobu) Facebook:近藤

    繁延(shigenobu.kondo) • 会社: ウルシステムズ株式会社 • 仕事: Web/Mobile開発、先端技術導入の支援 最近はデータアナリティクス分野も手掛ける 2
  2. 3

  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コード じゃなぁ… + = 画像認識 キターーー!
  4. 8th Wall Webでの開発手順 • 8th Wall Webは目的毎にコードテンプレートを用意しています。 テンプレートをベースにすると、すぐ動くものが作れます。 8 Click

    使用するフレームワークとテンプレートを選択します。 Place Ground 指定の床にオブジェクトを設置 Image Target Flyer 画像を認識してオブジェクトを表示 Manipulate 3D Model 3Dモデルの操作(ジェスチャー/移動/拡縮) Toss Object 床面との接触判定 Blank Project 空のプロジェクト
  5. 8th Wall Webでの開発手順 • あとはオンラインエディタで開発するのみです。(有償) 9 コンソール (ログ表示など) プレビュー表示 各種ビュー

    ファイルリスト ソースリポジトリ 画像ターゲット 各種設定 など コード/アセット 一覧 コード/アセット 内容の表示
  6. すごい点 • 画像認識型のARコンテンツが“とにかく簡単”に作れます。 1. 認識させたい画像をアップロードし、画像にIDを付与する 2. コードで画像IDと表示するオブジェクトの紐づけを定義する 10 1-1. Image

    Targets を選択 1-2. 画像を アップロード 1-3. 画像IDを設定 1.認識したい画像を登録 2.認識画像と表示オブジェクトの紐づけ定義 (A-FRAMEの例) 2-1. 認識したい画像IDを 定義 2-2. 表示したい オブジェクトを定義
  7. 困ったこと • 2019年10月下旬の大型アップデートの影響か?国内の解説記事 と情報に差異があり、手順が違う!動かない!と現場が混乱。 12 → Quick Start Guideに従ってAccount Upgrade(課金)

    しました。後悔はしていません。 クラウドエディタ(有償)で開発する手順 ローカルPC上で開発する手順 (おそらく、旧Quick Start Guideでは…) 10月!
  8. まとめ:一泊二日の学び • 8th Wall Webは、画像マーカーのWebARコンテンツ開発ツー ルとして素晴らしいものです。(ぜひ有償版で使い続けたい) • 非商用/個人開発用ならオンラインエディタ、ホスティングが一定量 まで無料というプランがあると、なおありがたいなぁ・・・。 •

    素のテンプレートでも十分強力ですが、本格的に作りこむのだ れば、A-FRAME/three.jsあたりの詳細な知識が求められそう。 • 8th Wall Web以外で画像マーカーのWebARを実装する方法を ご存知の方がいたら教えてください。 ※AR.jsはまだマーカー式のため追いかけていません。 14