Save 37% off PRO during our Black Friday Sale! »

8thWallWebで始めるWebAR / WebAR Getting started with 8th Wall Web

A989fea169be65e3e6fce6a3bb158329?s=47 sgidon
March 30, 2019

8thWallWebで始めるWebAR / WebAR Getting started with 8th Wall Web

2019/2/2および3/30、4/6に行った8thwallwebを使ったWebARハンズオン資料です。

https://xr-fukuoka.connpass.com/event/114279/
https://xr-fukuoka.connpass.com/event/124923/
https://xr-fukuoka.connpass.com/event/124923/

誰でも簡単にWebARできるハンズオンになっています。
ご興味のある方はぜひ一読願います。

変更履歴
----
2019/02/02: 初版作成
2019/03/30: iOS12.2対応。glTFモデルを明るくする方法追加。A-Frame0.9.0対応

In English document
https://speakerdeck.com/sgidon/webar-getting-started-with-8th-wall-web-in-english

#AR_Fukuoka

A989fea169be65e3e6fce6a3bb158329?s=128

sgidon

March 30, 2019
Tweet

Transcript

  1. 8thWallWebで始めるWebAR ARコンテンツ作成勉強会

  2. 自己紹介 杉井 庸一 Youichi sugii youichi.sugii @sgidon 福岡のITエンジニアです。 仕事はWebとは全く関係なく、 いわゆるSIer。 WebVR/ARと、バイクと

    Chromebookが好きです。 XR系の仕事を探しています
  3. それでは本題

  4. WebARとは? ARとは、”Augmented Reality”の略で”拡張現実感”と訳されます。 現実世界をベースに3Dモデルやグラフィックスを利用して情報を加えることで、現実世界 を”拡張”します。 WebARとは、ARをWebブラウザで利用できる技術です。 URLでアクセスするためアプリのインストールが不要で、手軽にARを利用することができ ます。

  5. マーカー式AR / マーカーレスAR マーカーを起点としてオブジェクトを表示。 位置合わせの精度は高い 現実空間(床面など)を認識し、そこを起点にオブ ジェクトを表示。表現の自由度が高い。

  6. AR.js ARKit ARCore 8thWallWeb マーカー式 マーカーレス 供給元 Github Jerome Etienne

    Apple Google 8thwall デバイス ほぼすべての デバイス iOS 12 iPhone6S over Android Oreo 限られた端末 iOS/ Android ブラウザ ほぼすべての ブラウザ Safari Chrome Canary iOS Safari/ Android Chrome プロダクト WebAR ジェネレータ AR Quick Look - AR Camera いろいろなWebAR
  7. 8thWallWebの概要 モバイルブラウザ上でWebARを実現するライブラリ マルチプラットフォームで動作します(iPhone/iPad/Androidの垣根がない) 3D Javascript フレームワーク(Three.js/A-Frame/Amazon Sumerian)を利用して簡単に 開発することができます。 8thWallWebの動作要件は以下の通り iPhone/iPad:

    iOS11以上。Safariブラウザ Android: Chrome、Firefox 8thWallが発行するAPIキーが必要。1000アクセス/月以上は有料プラン。
  8. 8thWallWebの概要

  9. Web Developer まずは体験から AR Camera

  10. A-Frame概要 Webブラウザ上でVRなどの3D表現を簡単に実現できるフレームワーク HTMLタグを書くだけで3Dオブジェクトを配置できる Firefox、Chrome、Edgeなど主要なブラウザで動作する。 WindowsMR、HTC ViveなどのHMD、スマホVRにも対応 外部ライブラリを組み合わせることで様々な機能を利用可能

  11. やっぱり体験から https://aframe.io/

  12. やっぱり体験から 回転:マウスドラッグ 前後:[W][S]キー 左右:[A][D]キー https://aframe.io/

  13. 本日のゴール

  14. ハンズオン手順 8thWallアカウントの作成(事前作成済み) モデルデータの取得 AR CameraでARコンテンツの作成 A-Frameの基礎操作を覚える Web DeveloperでARコンテンツの作成 もくもく会

  15. 必要なもの • 8thWallのアカウント → https://8thwall.com/ でアカウントを作成します。 • 開発用のPC • 動作確認用のスマートフォンブラウザ → iPhone/iPad(Over

    iOS11): Safari、Android: Chrome/Firefox • Webサーバ → 今回は https://glitch.com/ を使用します。 → Github/Facebook/emailでログインすれば、glitch上に保存できます
  16. 8thWall アカウント作成 8thWallのWebページから アカウントを作成

  17. 8thWallアカウント作成 https://8thwall.com/ 1)Create Account 3)必要事項を入力し てGet Started 2)Web Developer

  18. 8thWallアカウント作成 1)日本を選択、携帯番号を入力 して認証します。 “0”から始まる11桁の番号で、先 頭の”0”を除いたり、”+81”をつけ る必要はありません。 2)SMSで送られてきたコード を入力してクリック

  19. 8thWallアカウント作成 おめでとうございます。これでアカウント作成されました。 コンソール画面からAPI KEYの発行などが可能となります。 登録したメールアドレスに、チュートリアルなどの情報が送られま す。確認してみましょう。

  20. モデルデータ の取得 Polyのデータを使ってみよう

  21. POLY https://poly.google.com/

  22. POLY astronaut と入力

  23. POLY ここを クリック

  24. モデルの入手 ダウンロード ↓ glTFファイル

  25. モデルの入手 ダウンロード

  26. ファイル変換(glTF -> GLB) https://glb-packer.glitch.me 3ファイルを一度に ドラッグ&ドロップ Astronaut.glbに名前変更

  27. AR Camera ノンコーディングで WebARコンテンツを作ろう

  28. コンソール画面 https://console.8thwall.com/ Sign in

  29. WORKSPACEの設定 1)WORKSPACES 2)Create a New Workspace

  30. WORKSPACEの設定 サインイン 1)AR Camera 2)Create

  31. AR Cameraの作成 1) AR Camera 2) Dashboard 3) Create a

    new camera
  32. AR Cameraの設定 Astronaut.glbをドラッ グ&ドロップ

  33. AR Cameraの設定 自由に設定 変更する。 動作確認する

  34. AR Cameraの設定 Published 変更の反映には、毎回 Publishをク リックする必要があります。 スマートフォンで読 み込む

  35. A-Frame A-Frameの基礎操作を 覚えよう

  36. 基本サンプルコードをGlitchへ https://aframe.io/ クリック

  37. 基本サンプルコードをGlitchへ クリック

  38. 基本サンプルコードをGlitchへ 1)どれかを選んで サインイン 2)サインイン後 にクリック

  39. 基本サンプルコードをGlitchへ クリック

  40. Glitchでの動作確認 クリック ソースを修正すると 自動反映される

  41. A-Frameソース説明 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, WebVR! •

    A-Frame</title> <meta name="description" content="Hello, WebVR! • A-Frame"> <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> </head> <body> <a-scene background="color: #ECECEC"> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene> </body> </html> ライブラリ読み込み 表示するオブジェクトや背景設定は、 HTMLタグでここに記載する。
  42. A-Frameソース説明 <a-scene background="color: #ECECEC"> <a-box position="-1 0.5 -3" rotation="0 45

    0" color="#4CC3D9" shadow> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene> position: 位置(x y z) 座標位置をスペース区切り rotation: 回転(x y z)0〜360度をスペース区切り color: 色(カラーコード)#000000〜#FFFFFF shadow: 影 a-sphere a-box a-cylinder a-plane 各タグの詳細情報は https://aframe.io/docs/
  43. 座標位置・回転・スケール(X Y Z) X軸 Y軸 Z軸 Z軸は後ろがプラス (Y-up 右手系) 軸のプラス方向に

    右ネジが進む向き (右手系) インスペクターで確認 CTRL+ALT+i
  44. 座標位置・回転・スケール(X Y Z) a-box 値を変更 インスペクター上の変更は反映されません 設定値はHTMLソースに手動で反映しましょう

  45. 自由演習 自由にソースを修正し てみましょう。 修正した結果を確認し てみましょう。 画面を左右半分に分けて表示すると便利です

  46. Web developer A-Frameで WebARコンテンツを作ろう

  47. コンソール画面 https://console.8thwall.com/ Sign in

  48. WORKSPACEの設定 1)WORKSPACES 2)Create a New Workspace すでにWORKSPACEを作っている場合は、 Web Appの作成に進んでください。

  49. WORKSPACEの設定 1)Web Developer 2)Create

  50. Web Appの作成 1)WORKSPACE 2) Dashboard 3) Create a new Web

    App
  51. Web Appの作成 Application Nameを 入れて、Create

  52. Web Appの作成 Web Appが作成されました

  53. 基本サンプルコードをGlitchへ クリック

  54. 8thWallWebライブラリの設定 元々のAFrame ライブラリを 削除します

  55. 8thWall版のAFrameライブラリ https://docs.8thwall.com/web/ AFrame 8thWall版 AFrameを コピーします <script src="//cdn.8thwall.com/web/aframe/8frame-0.8.2.min.js"></script> 「8frame-0.9.0.min.js」に変更

  56. 8thWallWebライブラリの設定 8thWall版 AFrame ライブラリを貼付

  57. AppKeyの発行 3)Copy 1) Dashboard 2)</>

  58. 8thWallWebライブラリの設定 AppKeyを貼付

  59. xrwebコンポーネント追加 <a-scene background="color: #ECECEC" xrweb> <a-box position="-1 0.5 -3" rotation="0

    45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene> 追加
  60. カメラの設定 <a-scene background="color: #ECECEC" xrweb> <a-camera position="0 8 8"></a-camera> <a-box

    position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene>
  61. Development Token の発行 Developer Mode

  62. Development Token の発行 PCのブラウザを 認証します。 表示したQRCodeを スマートフォンで 読み込みます。

  63. モデルの配置 1)assets 2)モデルファイルを ドラッグ&ドロップ 4)copyをクリック 3)ファイルをクリック

  64. モデルの配置 <a-scene background="color: #ECECEC" xrweb> <a-camera position="0 8 8"></a-camera> <a-box

    position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> <a-gltf-model src="copyしたURL" shadow></a-gltf-model> </a-scene> 4つのオブジェクト を削除
  65. iPhone/iPadの注意 Safariでは、デフォルトで「モーションと画面 の向きのアクセス」「カメラとマイクのアクセ ス」を禁止しています。 『設定』→「Safari」の順に画面を開き、プライ バシーとセキュリティ欄にある2つのスイッ チをオン(白 → 緑)にすればOKです。 Safariでアクセスした際、「カメラへのアクセ

    スを求めています」とダイヤログがでて、 キャンセル/許可を選択できるようになりま す。 ※「モーションと画面の向きのアクセス」は iOS12.2からの制限となります。
  66. iOS12.2対応 および Recenter機能の追加 https://github.com/8thwall/web xrextras

  67. iOS12.2対応 および Recenter機能の追加 <script src="//cdn.8thwall.com/web/aframe/8frame-0.9.0.min.js"></script> <script src="//apps.8thwall.com/xrweb?appKey=xxxxxxxxxxx"></script> <script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script> </head>

    <body> <a-scene background="color: #ECECEC" xrweb xrextras-almost-there xrextras-loading xrextras-runtime-error xrextras-tap-recenter> <a-camera position="0 8 8"></a-camera> a-sceneタグ内 に追加 各コンポーネントの機能 ----- xrextras-almost-there →サポートデバイス・ブラウザの検知 xrextras-loading → カメラアクセス許可等のプロンプト制御 xrextras-runtime-error → 実行時エラー時制御。エラー画面表示 xrextras-tap-recenter → Recenter機能の追加。画面タップ時に実行
  68. ソースコード全体 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, WebVR! •

    A-Frame</title> <meta name="description" content="Hello, WebVR! • A-Frame"> <script src="//cdn.8thwall.com/web/aframe/8frame-0.9.0.min.js"></script> <script src="//apps.8thwall.com/xrweb?appKey=xxxxxxxxxxx"></script> <script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script> </head> <body> <a-scene background="color: #ECECEC" xrweb xrextras-almost-there xrextras-loading xrextras-runtime-error xrextras-tap-recenter> <a-camera position="0 8 8"></a-camera> <a-gltf-model src="https://cdn.glitch.com/xxxxx%2FAstronaut.glb?xxxxx" shadow></a-gltf-model> </a-scene> </body> </html>
  69. 動かしてみましょう Show スマートフォンで 読み取る

  70. もくもく 各自で好きなように 作ってみましょう

  71. Appendix

  72. Appendix: 各種リンク 8thwall • 本家サイト https://8thwall.com/ • ドキュメント https://docs.8thwall.com/web/ •

    Github https://github.com/8thwall/web • Slack https://8thwalldevs.slack.com/ A-Frame • 本家サイト https://aframe.io/ • ドキュメント https://aframe.io/docs/ • Github https://github.com/aframevr/aframe
  73. Appendix: A-Frame(animation) Ver 0.9.0 動きのあるコンテンツを簡単に作ることができます。A-FrameのVer 0.9.0 からは 動作させたいオブジェクトのコンポーネントとしてanimationを追加します。 <a-gltf-model src="https://xxxx〜"

    shadow animation=”property:rotation; dur:10000; from:0 0 0; to:0 360 0; loop:true; “> </a-gltf-model> プロパティ property: アニメーションさせたい属性 dur: 1回のアニメーション時間 from: アニメーション開始時の値 to: アニメーション終了時の値 loop: 繰り返し回数 true=無制限 https://aframe.io/docs/0.9.0/components/animation.html
  74. Appendix: glTFモデルを明るく表示する SCENEのレンダラーに対して、gammaOutputオプ ションをTrueにすることで、暗かったglTFモデルを明 るく表示できます。ただ、全体的に明るくなります。 <script src="//apps.8thwall.com/xrweb?appKey=xxxxx"></script> <script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script> </head>

    <body> <a-scene xrweb xrextras-almost-there ~ renderer="gamma-output:true" > a-sceneタグ内 に追加
  75. Appendix: 床面へ影を落とす コンポーネントの設定 API-KEY以下に追加する。 床面オブジェクトの作成 a-gltf-modelオブジェクト以下に追加する。 <script src="//apps.8thwall.com/xrweb?appKey=xxx"></script> <script> AFRAME.registerComponent('shadow-material',

    { init: function() { this.material = new THREE.ShadowMaterial() this.el.getOrCreateObject3D('mesh').material = this.material this.material.opacity = 0.4 } }) </script> </head> <body> <a-camera position="0 8 8"></a-camera> <a-gltf-model src="https://cdn.glitch.com/xxxxx%2FAstronaut.glb?xxxxx" shadow></a-gltf-model> <a-plane id=”ground” rotation="-90 0 0" width="1000" height="1000" shadow shadow-material></a-plane> <a-scene> 資料上2行で表示されていますが、1行 で記載しても大丈夫です。
  76. Appendix: Price Web Developer/AR Camera どちらもFree/Proプラン が用意されています。 Proプランは、月額固定額+ページビュー毎の従量 課金料金が発生します。 Enterpriseプラン、Studentプランも用意されていま

    す。
  77. お疲れ様でした