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

Transcript

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

   View Slide

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

   View Slide

3. それでは本題
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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アクセス/月以上は有料プラン。
   

   View Slide

8. 8thWallWebの概要
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. 本日のゴール
    

    View Slide

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

    View Slide

15. 必要なもの
    ● 8thWallのアカウント
    →　https://8thwall.com/ でアカウントを作成します。
    ● 開発用のPC
    ● 動作確認用のスマートフォンブラウザ
    →　iPhone/iPad(Over iOS11): Safari、Android: Chrome/Firefox
    ● Webサーバ
    →　今回は https://glitch.com/ を使用します。
    →　Github/Facebook/emailでログインすれば、glitch上に保存できます
    

    View Slide

16. 8thWall
    アカウント作成
    8thWallのWebページから
    アカウントを作成
    

    View Slide

17. 8thWallアカウント作成
    https://8thwall.com/
    １）Create Account
    ３）必要事項を入力し
    てGet Started
    ２）Web Developer
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. POLY
    astronaut と入力
    

    View Slide

23. POLY
    ここを
    クリック
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. WORKSPACEの設定
    １）WORKSPACES
    ２）Create a New Workspace
    

    View Slide

30. WORKSPACEの設定
    サインイン
    １）AR Camera
    ２）Create
    

    View Slide

31. AR Cameraの作成
    １） AR Camera
    ２） Dashboard
    ３） Create a new camera
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. A-Frameソース説明
    
    
    
    
    Hello, WebVR! • A-Frame
    
    
    
    
    
    
    
    
    
    
    
    
    ライブラリ読み込み
    表示するオブジェクトや背景設定は、 HTMLタグでここに記載する。
    

    View Slide

42. A-Frameソース説明
    
    rotation="0 45 0"
    color="#4CC3D9"
    shadow>
    
    
    
    
    
    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/
    

    View Slide

43. 座標位置・回転・スケール（X Y Z）
    X軸
    Y軸
    Z軸
    Z軸は後ろがプラス
    （Y-up 右手系）
    軸のプラス方向に
    右ネジが進む向き
    （右手系）
    インスペクターで確認
    CTRL+ALT+i
    

    View Slide

44. 座標位置・回転・スケール（X Y Z）
    a-box
    値を変更
    インスペクター上の変更は反映されません
    設定値はHTMLソースに手動で反映しましょう
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

49. WORKSPACEの設定
    １）Web Developer
    ２）Create
    

    View Slide

50. Web Appの作成
    １）WORKSPACE
    ２） Dashboard
    ３） Create a new Web App
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. 8thWall版のAFrameライブラリ
    https://docs.8thwall.com/web/
    AFrame
    8thWall版
    AFrameを
    コピーします
    
    「8frame-0.9.0.min.js」に変更
    

    View Slide

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

    View Slide

57. AppKeyの発行
    ３）Copy
    １） Dashboard
    ２）>
    

    View Slide

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

    View Slide

59. xrwebコンポーネント追加
    
    
    
    
    
    
    追加
    

    View Slide

60. カメラの設定
    
    
    
    
    
    
    
    

    View Slide

61. Development Token の発行
    Developer Mode
    

    View Slide

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

    View Slide

63. モデルの配置
    １）assets
    ２）モデルファイルを
    ドラッグ＆ドロップ
    ４）copyをクリック
    ３）ファイルをクリック
    

    View Slide

64. モデルの配置
    
    
    
    
    
    
    
    
    ４つのオブジェクト
    を削除
    

    View Slide

65. iPhone/iPadの注意
    Safariでは、デフォルトで「モーションと画面
    の向きのアクセス」「カメラとマイクのアクセ
    ス」を禁止しています。
    『設定』→「Safari」の順に画面を開き、プライ
    バシーとセキュリティ欄にある２つのスイッ
    チをオン(白 → 緑)にすればOKです。
    Safariでアクセスした際、「カメラへのアクセ
    スを求めています」とダイヤログがでて、
    キャンセル/許可を選択できるようになりま
    す。
    ※「モーションと画面の向きのアクセス」は
    iOS12.2からの制限となります。
    

    View Slide

66. iOS12.2対応 および Recenter機能の追加
    https://github.com/8thwall/web
    xrextras
    

    View Slide

67. iOS12.2対応 および Recenter機能の追加
    
    
    
    
    
    xrextras-almost-there
    xrextras-loading
    xrextras-runtime-error
    xrextras-tap-recenter>
    
    a-sceneタグ内
    に追加
    各コンポーネントの機能
    -----
    xrextras-almost-there
    →サポートデバイス・ブラウザの検知
    xrextras-loading
    → カメラアクセス許可等のプロンプト制御
    xrextras-runtime-error
    → 実行時エラー時制御。エラー画面表示
    xrextras-tap-recenter
    → Recenter機能の追加。画面タップ時に実行
    

    View Slide

68. ソースコード全体
    
    
    
    
    Hello, WebVR! • A-Frame
    
    
    
    
    
    
    xrextras-almost-there
    xrextras-loading
    xrextras-runtime-error
    xrextras-tap-recenter>
    
    
    
    
    
    

    View Slide

69. 動かしてみましょう
    Show
    スマートフォンで
    読み取る
    

    View Slide

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

    View Slide

71. Appendix
    

    View Slide

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
    

    View Slide

73. Appendix: A-Frame(animation) Ver 0.9.0
    動きのあるコンテンツを簡単に作ることができます。A-FrameのVer 0.9.0 からは
    動作させたいオブジェクトのコンポーネントとしてanimationを追加します。
    animation=”property:rotation;
    dur:10000;
    from:0 0 0;
    to:0 360 0;
    loop:true;
    “>
    
    プロパティ
    property: アニメーションさせたい属性
    dur: １回のアニメーション時間
    from: アニメーション開始時の値
    to: アニメーション終了時の値
    loop: 繰り返し回数
    true=無制限
    https://aframe.io/docs/0.9.0/components/animation.html
    

    View Slide

74. Appendix: glTFモデルを明るく表示する
    SCENEのレンダラーに対して、gammaOutputオプ
    ションをTrueにすることで、暗かったglTFモデルを明
    るく表示できます。ただ、全体的に明るくなります。
    
    
    
    
    renderer="gamma-output:true"
    >
    a-sceneタグ内
    に追加
    

    View Slide

75. Appendix: 床面へ影を落とす
    コンポーネントの設定
    API-KEY以下に追加する。
    床面オブジェクトの作成
    a-gltf-modelオブジェクト以下に追加する。
    
    <br/>AFRAME.registerComponent('shadow-material', {<br/>init: function() {<br/>this.material = new THREE.ShadowMaterial()<br/>this.el.getOrCreateObject3D('mesh').material = this.material<br/>this.material.opacity = 0.4<br/>}<br/>})<br/>
    
    
    
    src="https://cdn.glitch.com/xxxxx%2FAstronaut.glb?xxxxx"
    shadow>
    height="1000" shadow shadow-material>
    
    資料上２行で表示されていますが、１行
    で記載しても大丈夫です。
    

    View Slide

76. Appendix: Price
    Web Developer/AR Camera どちらもFree/Proプラン
    が用意されています。
    Proプランは、月額固定額＋ページビュー毎の従量
    課金料金が発生します。
    Enterpriseプラン、Studentプランも用意されていま
    す。
    

    View Slide

77. お疲れ様でした
    

    View Slide