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

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

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

sgidon

March 30, 2019
Tweet

More Decks by sgidon

Other Decks in Technology

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/
    1)Create Account
    3)必要事項を入力し
    てGet Started
    2)Web Developer

    View Slide

  18. 8thWallアカウント作成
    1)日本を選択、携帯番号を入力
    して認証します。
    “0”から始まる11桁の番号で、先
    頭の”0”を除いたり、”+81”をつけ
    る必要はありません。
    2)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
    3ファイルを一度に
    ドラッグ&ドロップ
    Astronaut.glbに名前変更

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  31. AR Cameraの作成
    1) AR Camera
    2) Dashboard
    3) 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へ
    1)どれかを選んで
    サインイン
    2)サインイン後
    にクリック

    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の設定
    1)WORKSPACES
    2)Create a New Workspace
    すでにWORKSPACEを作っている場合は、
    Web Appの作成に進んでください。

    View Slide

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

    View Slide

  50. Web Appの作成
    1)WORKSPACE
    2) Dashboard
    3) 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の発行
    3)Copy
    1) Dashboard
    2)>

    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. モデルの配置
    1)assets
    2)モデルファイルを
    ドラッグ&ドロップ
    4)copyをクリック
    3)ファイルをクリック

    View Slide

  64. モデルの配置








    4つのオブジェクト
    を削除

    View Slide

  65. iPhone/iPadの注意
    Safariでは、デフォルトで「モーションと画面
    の向きのアクセス」「カメラとマイクのアクセ
    ス」を禁止しています。
    『設定』→「Safari」の順に画面を開き、プライ
    バシーとセキュリティ欄にある2つのスイッ
    チをオン(白 → 緑)にすれば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: 1回のアニメーション時間
    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>

    資料上2行で表示されていますが、1行
    で記載しても大丈夫です。

    View Slide

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

    View Slide

  77. お疲れ様でした

    View Slide