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

始めようWebAR/VR開発

 始めようWebAR/VR開発

初心者向けWebXR (AR/VR)開発資料
随時内容を追加していきます。

TakashiYoshinaga

October 27, 2019
Tweet

More Decks by TakashiYoshinaga

Other Decks in Technology

Transcript

  1. ARコンテンツ作成勉強会
    はじめようWebVR/AR

    View full-size slide

  2. 自己紹介
    氏名:吉永崇(Takashi Yoshinaga)
    所属:九州先端科学技術研究所(ISIT)
    専門:ARを用いた医療支援や運動計測
    コミュニティ:ARコンテンツ作成勉強会 主催

    View full-size slide

  3. 本資料の内容
    • 本資料では下記の内容をご紹介します
    1. A-Frameを用いたVR/AR
    2. 8th wall webを用いたノンプログラミングAR
    3. 8th wall webとA-Frameを用いたAR
    (今後追加予定)
    もしWebVRを用いたOculusQuestアプリ開発に興味が
    あればこちらもご覧ください。
    https://www.slideshare.net/ssuserc0d7fb/afr
    ameoculus-questwebvr-151354119

    View full-size slide

  4. 事前準備(Android)
    1. スマホにインストールされている
    Chromeを起動
    2. アドレスバーに下記を入力
    chrome://flags
    3. 検索エリアにxrと入力
    4. WebVRをEnabledに変更
    ※ ほかのXR/VR/AR関連の項目は
    変更しないでください

    View full-size slide

  5. 事前準備(iOS)
    1. iPhone/iPadの設定を開く
    2. Safariを選択
    3. モーションと画面の向きの
    アクセスをON
    4. カメラとマイクのアクセスをON

    View full-size slide

  6. 事前準備(共通)
    Glitchのアカウント作成
    https://glitch.com/

    View full-size slide

  7. 事前準備(共通)
    Sign In
    GitHubかFacebook、Googleのアカウントを使用(e-mailは非推奨)

    View full-size slide

  8. 事前準備(共通)
    8thWallのアカウント作成
    https://www.8thwall.com/

    View full-size slide

  9. 事前準備(共通)
    Create Account

    View full-size slide

  10. 事前準備(共通)
    氏名・メールアドレス・パスワードを入力し、最後にGet Started

    View full-size slide

  11. 事前準備(共通)
    日本を選択し、電話番号を入力
    日本
    先頭の0を外した電話番号
    例)09012345678なら9012345678

    View full-size slide

  12. 事前準備(共通)
    携帯電話に届く確認コードを入力しVerifyをクリック
    確認コードを入力

    View full-size slide

  13. 演習用素材
    http://arfukuoka.lolipop.jp/we
    bxr2019/sample.zip

    View full-size slide

  14. A-Frameの概要
     Webブラウザ上でVRなどの3D表現を簡単に実現するためのライブラリ
     HTMLのタグを書くだけで3Dオブジェクトを配置できる
     Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明
     Oculus QuestやHTC ViveなどのHMD、スマホVRにも対応
     外部ライブラリを組み合わせればARも実現できる (開発途上)

    View full-size slide

  15. 検索結果を写真でも
    動画でもなくARで表示
    Web ARの利用事例

    View full-size slide

  16. まずは体験
    A-Frameのページにアクセス (https://aframe.io/)

    View full-size slide

  17. まずは体験
    ページの左側にサンプルがあります
    サンプル

    View full-size slide

  18. まずは体験
    基本サンプル Hello WebVRをクリック
    Hello WebVR

    View full-size slide

  19. まずは体験
    基本サンプル Hello WebVRをクリック
    画面をクリック
    回転:マウスでドラッグ
    左右:[A][D]キー
    前後:[W][S]キー
    ※前後左右は自分がどちらに動くかで考える

    View full-size slide

  20. まずは体験
    360°Imageをクリックして全天球コンテンツを表示
    360°Image
    RICOH Theta

    View full-size slide

  21. スマートフォンでも
    A-Frameで検索
    または
    QRコード

    View full-size slide

  22. スマートフォンでも
    ゴーグルマークをタップ

    View full-size slide

  23. Windows Mixed Reality Headsetでも

    View full-size slide

  24. AR開発は?

    View full-size slide

  25. A-Frame対応ARライブラリ
    AR.js
    ARToolKitをベースに開発されたjavascriptライブラリ
    正方形の枠と内側の絵を組み合わせたマーカーを使用
    画像の取得 ・ 二値化等の画像処理
    ・ マーカの検出
    位置・姿勢計算 CGを重畳
    (引用元: http://www.youtube.com/watch?v=TqGAqAFlGg0)
    (D.Wagner et al. Computer Vision Winter Workshop, 2007)

    View full-size slide

  26. 本日のゴール
    https://kougi2019.glitch.me/
    または

    View full-size slide

  27. 本日のゴール
    コンテンツにアクセス後、Sampleフォルダにあるマーカーを撮影

    View full-size slide

  28. ハンズオン手順
    Step1: サンプルを使ってA-Frame基本操作を覚える
    Step2: CG見た目の調整やアニメーションの設定
    などを行い簡易VRコンテンツを作成
    Step3: AR.jsを使ってARコンテンツを作成

    View full-size slide

  29. 必要なもの
     Webブラウザ → コンテンツの体験や動作確認
     テキストエディタ → HTMLやjavascriptの記述
     Webサーバー → コンテンツの公開
    サーバーに関して今回は・・・
     Glitchを利用 https://glitch.com/
    ◆ FacebookかGitHubのアカウントがあればOK
    ◆ サーバーとエディタの両方を無料で提供
    この資料ではGlitch使用を前提に説明します

    View full-size slide

  30. 基本サンプルのコード
    Hello WebVRのコードを取得
    GET STARTED

    View full-size slide

  31. 基本サンプルのコードの複製
    Hello WebVRに関する記述 (たったこれだけ!)
    Hello WebVR

    View full-size slide

  32. 基本サンプルのコードの複製
    Glitchユーザーはremix the starter example on Glitchをクリック
    ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト
    Click

    View full-size slide

  33. 基本サンプルのコードの複製
    Remix your ownをクリック
    Click

    View full-size slide

  34. 基本サンプルのコードの確認
    index.htmlをクリックし、コードが表示されることを確認
    Click

    View full-size slide

  35. ソースの確認


    Hello, WebVR! - A-Frame

    <br/>



    表示するオブジェクトや背景の設定をここに記述



     ヘッダー部でA-Frameの機能を提供するライブラリを取り込む
     との間に描画に関する記述をする

    View full-size slide

  36. ソースの確認





    color="#FFC65D">
    width="4" height="4" color="#7BC8A4">

     基本図形はa-xxxタグで提供されている
    https://aframe.io/docs/0.9.0/primi
    tives/a-box.html (例:a-boxの詳細)
    位置 回転 色

    View full-size slide

  37. 動作確認
    Show

    View full-size slide

  38. 動作確認
    In a New Window

    View full-size slide

  39. 動作確認

    View full-size slide

  40. アレンジしよう (まだやらなくてOK)
    タグ内の各パラメータを編集してCGの見た目を調整
     position(位置):x y zの順にスペースで区切って指定
    (0 1.25 -5)
    位置 回転 色
    x y z座標

    View full-size slide

  41. アレンジしよう (まだやらなくてOK)
    タグ内の各パラメータを編集してCGの見た目を調整
     position(位置):x y zの順にスペースで区切って指定
     rotation(傾き):各軸を中心とした回転で表現
     color(色):カラーコード等で指定
     他にも図形によって各種設定項目がある
    X
    Z
    Y
    (0 1.25 -5) 【設定項目の例】
    radius(半径)
    width(幅)
    height(高さ)
    depth(奥行)
    src (画像など)
    原点

    View full-size slide

  42. 見た目の変化を想像しながら
    数値を変えるのは慣れが必要

    View full-size slide

  43. A-Frame Inspectorを利用しよう
    実行画面を開く

    View full-size slide

  44. A-Frame Inspectorを利用しよう
    キーボードの[Ctrl][Alt][i]を同時に押して下記表示に切り替える

    View full-size slide

  45. boxの詳細情報を表示
    画面の左のリストからを選択

    View full-size slide

  46. boxの詳細情報を表示
    画面右側に位置や角度、半径の具体的な数値が表示される
    位置・角度
    depth
    height
    width

    View full-size slide

  47. 各種情報の変更の方法 (直打ち)
    positionのXの値を0に変更して最後に[Enter]キーを押下
    position
    x y z

    View full-size slide

  48. 各種情報の変更の方法 (マウス操作)
    移動 回転 拡大・縮小
    選択

    View full-size slide

  49. プレビュー
    画面左上のBack To Sceneをクリックしてブラウザでの表示を確認
    Back To Scene
    Inspect Scene

    View full-size slide

  50. ブラウザを再読み込みさせてみましょう

    View full-size slide

  51. 注意
    編集画面で入力された値は元のソースには反映されていない
    ブラウザで再読み込みをしたら元に戻ってしまう
    最後にHTMLソース内の該当箇所をその値に書き換える
    ※この演習では、今は書き換えなくてOK
    または編集後のHTMLをコピーして差し替える

    View full-size slide

  52. 結局のところ
    HTMLの記述は自分でやる必要がある

    View full-size slide

  53. HTML編集に慣れよう
    左右分割表示で動作確認をしやすい環境を整えよう
    編集画面 実行画面

    View full-size slide

  54. [編集例]





    color="#FFC65D">
    width="4" height="4" color="#7BC8A4">

    HTML編集に慣れよう
    角度
    高さ

    View full-size slide

  55. URLの変更
    文字列をクリック
    ここを書き換える

    View full-size slide

  56. ハンズオン手順
    Step1: サンプルを使ってA-Frame基本操作を覚える
    Step2: CG見た目の調整やアニメーションの設定
    などを行い簡易VRコンテンツを作成
    Step3: AR.jsを使ってARコンテンツを作成

    View full-size slide

  57. その前に

    View full-size slide

  58. 実行画面を閉じる
    エディタや実行画面が複数あると紛らわしいので使用中のものを閉じる
    編集画面 実行画面
    閉じる
    閉じる

    View full-size slide

  59. VRコンテンツ作りの準備
    Hello WebVRのコードを取得
    GET STARTED

    View full-size slide

  60. 基本サンプルのコードの複製
    Glitchユーザーはremix the starter example on Glitchをクリック
    ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト
    Click

    View full-size slide

  61. 基本サンプルのコードの複製
    Remix your ownをクリック
    Click

    View full-size slide

  62. index.htmlの表示
    Click

    View full-size slide

  63. 動作確認の環境を整える
    エディタのShowをクリックして開いた実行画面を横に表示しておく
    編集画面 実行画面

    View full-size slide






  64. color="#FFC65D">
    width="4" height="4" color="#7BC8A4">

    不要なオブジェクトの削除
     HTMLの記述の中からタグを削るだけ
     この後の演習のため、a-sphereのみを
    残して削除してみましょう




    color="#FFC65D">
    width="4" height="4" color="#7BC8A4">

    View full-size slide

  65. 外見を整える
    単色で塗りつぶすのではなくテクスチャをオブジェクトの表面に表示

    View full-size slide

  66. 外見を整える
    テクスチャ画像を用意しオブジェクトの表面に貼り付ける
    3Dオブジェクト テクスチャ画像

    View full-size slide

  67. テクスチャ画像をアップロード
    Glitchのエディタページに戻り、画面左の[assets]をクリック
    続いて、画面上方の[Upload an Asset]をクリック
    ①assets
    ② Upload an Asset

    View full-size slide

  68. テクスチャ画像をアップロード
    サンプルとして用意したテクスチャ画像earth.jpgを開く
    earth.jpg

    View full-size slide

  69. テクスチャ画像をアップロード
    クリック

    View full-size slide

  70. テクスチャ画像のURLを取得
    Copyをクリック

    View full-size slide

  71. ソースの書き換え
    index.htmlクリック

    View full-size slide

  72. ソースの書き換え

    Hello, WebVR! - A-Frame





    shadow>


     a-sphereの色をcolor(色)ではなくsrc(画像へのリンク)に変更
     srcの右辺に前操作でコピーした“画像のURL”を貼り付ける
    colorをsrcに変更

    View full-size slide

  73. アニメーションの追加
    src="テクスチャのURL" shadow
    animation = "
    property :rotation; ←アニメーションの種類
    dur : 10000; ←アニメーションにかける時間(ミリ秒)
    from : 0␣0␣0; ←開始時の角度(0,0,0)
    to: 0␣360␣0; ←終了時の角度(0,360,0)
    loop : 0; ←繰り返し回数
    "
    >

    a-animationタグを用いてアニメーションに関する設定を行う
    Z
    X
    Y
    "を忘れずに!

    View full-size slide

  74. アニメーションを繰り返す
    src="テクスチャのURL" shadow
    animation = "
    property :rotation; ←アニメーションの種類
    dur : 10000; ←アニメーションにかける時間(ミリ秒)
    from : 0␣0␣0; ←開始時の角度(0,0,0)
    to: 0␣360␣0; ←終了時の角度(0,360,0)
    loop : -1; ←繰り返し回数
    "
    >

    repeatを"-1"にするといつまでも繰り返し続ける

    View full-size slide

  75. 同じ速度で回転させる
    animation = "
    attribute : rotation; ←アニメーションの種類
    dur : 10000; ←アニメーションにかける時間(ミリ秒)
    from : 0␣0␣0; ←開始時の角度(0,0,0)
    to : 0␣360␣0; ←終了時の角度(0,360,0)
    loop : -1; ←繰り返し回数
    easing : linear; ←速度の変化
    "
    easingを追加し、"linear"にすると同じ速度で動くようになる。
    ほかには最初がゆっくりなease-inや後半がゆっくりなease-outも。
    → http://easings.net/ja

    View full-size slide

  76. 背景を変更しよう

    View full-size slide

  77. テクスチャ画像をアップロード
    ① 画面左の[assets]をクリック
    ② [Upload an Asset]をクリック
    ①assets
    ② Upload an Asset

    View full-size slide

  78. テクスチャ画像をアップロード
    サンプルとして用意した背景用画像space.jpgを開く
    space.jpg

    View full-size slide

  79. テクスチャ画像のURLを取得
    クリック

    View full-size slide

  80. テクスチャ画像のURLを取得
    Copyをクリック

    View full-size slide

  81. ソースの書き換え
    index.htmlクリック

    View full-size slide

  82. タグの追加

    Hello, WebVR! - A-Frame





    animation = "長いので割愛"
    >




    a-skyタグを利用し、背景情報として画像のURLを指定すればOK
    a-skyを追加

    View full-size slide

  83. 名前を付けて保存
    文字列をクリック
    ここを書き換える

    View full-size slide

  84. ほか、A-Frameで利用できるデータの例
    • 文字列
    • 音
    • ビデオ
    • 3Dファイル
    obj
    glTF
    • VRコントローラによる入力
    HTC Vive

    OculusQuest など

    View full-size slide

  85. ハンズオン手順
    Step1: サンプルを使ってA-Frame基本操作を覚える
    Step2: CG見た目の調整やアニメーションの設定
    などを行い簡易VRコンテンツを作成
    Step3: AR.jsを使ってARコンテンツを作成

    View full-size slide

  86. 編集中のコードを複製
    画面右上のプロジェクト名が表示されている箇所からRemix This
    ①プロジェクト名
    ②Remix This

    View full-size slide

  87. AR.jsをインポート & カメラ画像の表示

    Hello, WebVR! - A-Frame






    animation = "中略"
    >



    AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加
    追加

    色を削除してembeded
    a-sky削除

    View full-size slide

  88. マーカーを認識してその上にCGを表示



    animation = "中略"
    >



     AR表示をするにはマーカーとCGとの関連付けが必要
     A-Frameの場合でCGを挟む
     presetでマーカー名を指定 (付属マーカーのHiro使用)
     正方形内のマーカーを独自に作ることも可能 (参考)
    マーカーの上にこれを表示したい
    追加

    View full-size slide

  89. 動作確認
    表示されたけど位置がズレてる

    View full-size slide

  90. 理由と解決方法(1)
    で挟まれたCGの原点はマーカーの中心となる

    0 0 0
    x
    y
    z
    -5
    1.25
    0 1.25 0

    View full-size slide

  91. 動作確認
    まだちょっとズレてる
    下記のように変更して再度実行

    View full-size slide

  92. 理由と解決方法(2)
     コンピュータで3D表現をする際に、本来は視点の位置を指定する必要がある
     A-Frameでは「いい感じ」に表示される視点の位置をデフォルトで設定してくれる
     マーカーの位置の計算はカメラが原点にあることを前提としているため要修正



    animation = "中略"
    >



    カメラを明示的に追加する(位置は原点)
    X
    Z
    Y

    View full-size slide

  93. 動作確認
    この辺りの表示がじゃま

    View full-size slide


  94. Hello, WebVR! - A-Frame







    animation = "中略"





    追加

    View full-size slide

  95. マーカーレスARにも対応
    今後のWebAR

    View full-size slide

  96. 8th Wall Web編

    View full-size slide

  97. ARCore/ARKit非対応スマホでも利用可能
    8thWallWeb

    View full-size slide

  98. ログイン
    Log In

    View full-size slide

  99. ログイン
    アカウント作成時に使用/設定したメールアドレスとパスワードを入力

    View full-size slide

  100. 開発方法を選択
    ここではノンプログラミングで開発できるARCameraを選択
    AR Camera

    View full-size slide

  101. コンテンツの作成
    新しいARCamera(ARコンテンツ)を作成
    Create a new Camera

    View full-size slide

  102. コンテンツ作成画面の確認
    コンテンツデザイン用の画面が表示される
    このあとここから
    CGをアップロードする

    View full-size slide

  103. PolyからCGを入手
    Googleが提供する3Dデータ共有サービス
    https://poly.google.com/

    View full-size slide

  104. オブジェクトの入手
    ここから検索
    画面上部のフォームから「Astronaut」で検索

    View full-size slide

  105. オブジェクトの入手
    ここをクリック

    View full-size slide

  106. オブジェクトの入手
    ダウンロード
    → glTFファイル

    View full-size slide

  107. フォーマットの変換
     ダウンロードしたzipファイルを解凍
     GLB Packerにアクセス (https://glb-packer.glitch.me/)
     解凍したフォルダ内のファイルを全てGLB Packerにドラッグアンドドロップ

    View full-size slide

  108. フォーマットの変換
    out.glbがダウンロードできればOK

    View full-size slide

  109. CGのアップロード
    Upload
    out.glbを選択してアップロード

    View full-size slide

  110. 詳細設定
    Sceneタブで詳細情報(サイズや挙動)を設定

    View full-size slide

  111. 詳細設定
    最後にPublish
    Publish

    View full-size slide

  112. 詳細設定
    スマホで読み込めば体験できます
    QRが発行される

    View full-size slide