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 Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. A-Frame編

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. Windows Mixed Reality Headsetでも

    View Slide

  25. AR開発は?

    View Slide

  26. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  36. ソースの確認


    Hello, WebVR! - A-Frame

    <br/>



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



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

    View Slide

  37. ソースの確認





    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 Slide

  38. 動作確認
    Show

    View Slide

  39. 動作確認
    In a New Window

    View Slide

  40. 動作確認

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  55. [編集例]





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

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

    View Slide

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

    View Slide

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

    View Slide

  58. その前に

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  63. index.htmlの表示
    Click

    View Slide

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

    View Slide






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

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




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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  73. ソースの書き換え

    Hello, WebVR! - A-Frame





    shadow>


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

    View 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 : 0; ←繰り返し回数
    "
    >

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

    View Slide

  75. アニメーションを繰り返す
    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 Slide

  76. 同じ速度で回転させる
    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 Slide

  77. 背景を変更しよう

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  83. タグの追加

    Hello, WebVR! - A-Frame





    animation = "長いので割愛"
    >




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

    View Slide

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

    View Slide

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

    OculusQuest など

    View Slide

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

    View Slide

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

    View Slide

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

    Hello, WebVR! - A-Frame






    animation = "中略"
    >



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

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

    View Slide

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



    animation = "中略"
    >



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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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



    animation = "中略"
    >



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

    View Slide

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

    View Slide


  95. Hello, WebVR! - A-Frame







    animation = "中略"





    追加

    View Slide

  96. 完成

    View Slide

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

    View Slide

  98. 8th Wall Web編

    View Slide

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

    View Slide

  100. ログイン
    Log In

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  113. 詳細設定
    最後にPublish
    Publish

    View Slide

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

    View Slide

  115. View Slide