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

HTMLで作るWeb VR/AR (@第一回ビジュアリゼーションワークショップ)

HTMLで作るWeb VR/AR (@第一回ビジュアリゼーションワークショップ)

A-Frameを使ったWeb VR/AR開発のチュートリアル資料

357c9e58ecce2865f9eb748192e5143f?s=128

TakashiYoshinaga

March 02, 2018
Tweet

Transcript

  1. HTMLで作るWeb VR/AR 2.Mar.2018,第1回ビジュアリゼーションワークショップ

  2. 演習用資料はこちら https://goo.gl/evDXpj

  3. A-Frameの概要  Webブラウザ上でVRなどの3D表現を簡単に実現するためのライブラリ  HTMLのタグを書くだけで3Dオブジェクトを配置できる  Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応  Windows MRやHTC

    ViveなどのHMD、スマホVRにも対応  外部ライブラリを組み合わせればARも実現できる (開発途上)
  4. まずは体験 A-Frameのページにアクセス (https://aframe.io/)

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

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

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

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

  9. スマートフォンでも ゴーグルマークをタップ 視線方向がスマホの向きに連動

  10. Windows Mixed Reality Headsetでも

  11. AR開発は?

  12. A-Frame対応ARライブラリ AR.js ARToolKitをベースに開発されたjavascriptライブラリ 正方形の枠と内側の絵を組み合わせたマーカーを使用 画像の取得 ・ 二値化等の画像処理 ・ マーカの検出 位置・姿勢計算

    CGを重畳 (引用元: http://www.youtube.com/watch?v=TqGAqAFlGg0) (D.Wagner et al. Computer Vision Winter Workshop, 2007)
  13. 本日のゴール https://vis-ws.glitch.me/ または QRコード

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

  15. 必要なもの  Webブラウザ → コンテンツの体験や動作確認  テキストエディタ → HTMLやjavascriptの記述 

    Webサーバー → コンテンツの公開 サーバーに関して今回は・・・  Glitchを利用 https://glitch.com/  FacebookかGitHubのアカウントがあればOK  サーバーとエディタの両方を無料で提供 この資料ではGlitch使用を前提に説明します
  16. 基本サンプルのコード Hello WebVRのコードを取得 GET STARTED

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

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

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

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

  21. ソースの確認 <html> <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello,

    WebVR! - A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"> </script> </head> <body> <a-scene> 表示するオブジェクトや背景の設定をここに記述 </a-scene> </body> </html>  ヘッダー部でA-Frameの機能を提供するライブラリを取り込む  <a-scene>と</a-scene>の間に描画に関する記述をする
  22. ソースの確認 <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9">

    </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene>  基本図形はa-xxxタグで提供されている https://aframe.io/docs/0.7.0/primi tives/a-box.html(例:a-boxの詳細) 位置 回転 色
  23. 動作確認 Show Liveをクリック Click

  24. 動作確認

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

    位置 回転 色 x y z座標
  26. アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整  position(位置):x y zの順にスペースで区切って指定  rotation(傾き):各軸を中心とした回転で表現 

    color(色):カラーコード等で指定  他にも図形によって各種設定項目がある X Z Y (0 1.25 -5) 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など) 原点
  27. 見た目の変化を想像しながら 数値を変えるのは慣れが必要

  28. A-Frame Inspectorを利用しよう Show Liveをクリックして実行画面を開く

  29. モードの切り替え キーボードの[Ctrl][Alt][i]を同時に押して下記表示に切り替える

  30. boxの詳細情報を表示 画面の左のリストから<a-box>を選択 <a-box>

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

  32. 各種パラメータの設定 移動 回転 拡大・縮小

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

  34. ブラウザを再読み込みしてみましょう

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

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

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

  38. index.htmlの表示 Click

  39. Glitch使用時のお勧め環境セットアップ 左右分割表示で動作確認をしやすい環境を整えよう 編集画面 実行画面

  40. <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box>

    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> 不要なオブジェクトの削除  HTMLの記述の中からタグを削るだけ  この後の演習のため、a-sphereと a-skyのみを残して削除してみましょう <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky>
  41. 外見を整える 単色で塗りつぶすのではなくテクスチャをオブジェクトの表面に表示

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

  43. テクスチャ画像をアップロード Glitchのページに戻り、画面左の[assets]をクリック 続いて、画面上方の[Add asset]を開き[Computer→]をクリック ①assets ② Add asset

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

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

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

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

  48. ソースの書き換え <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR!

    - A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="コピーしたURL" shadow> </a-sphere> <a-sky color="#ECECEC"></a-sky> </a-scene> </body>  a-sphereの色をcolor(色)ではなくsrc(画像へのリンク)に変更  srcの右辺に前操作でコピーした“画像のURL”を貼り付ける ここを変更
  49. アニメーションの追加 <a-sphere position="0 1.25 -5" radius="1.25" src="テクスチャのURL" shadow> <a-animation attribute

    = "rotation" ←アニメーションの種類 dur = "10000" ←アニメーションにかける時間(ミリ秒) from ="0 0 0" ←開始時の角度(0,0,0) to = "0 360 0" ←終了時の角度(0,360,0) repeat = "indefinite" ←繰り返し回数 > </a-animation> </a-sphere> a-animationタグを用いてアニメーションに関する設定を行う Z X Y
  50. 同じ速度で回転させる <a-animation attribute = "rotation" ←アニメーションの種類 dur = "10000" ←アニメーションにかける時間(ミリ秒)

    from = "0␣0␣0" ←開始時の角度(0,0,0) to = "0␣360␣0" ←終了時の角度(0,360,0) repeat = "indefinite" ←繰り返し回数 easing = "linear" ←速度の変化 > </a-animation> easingを追加し、"linear"にすると同じ速度で動くようになる。 ほかには最初がゆっくりなease-inや後半がゆっくりなease-outも。 → http://easings.net/ja
  51. 背景を変更しよう

  52. テクスチャ画像をアップロード ① 画面左の[assets]をクリック ② [Add asset]を開き、[Computer→]をクリック ①assets ② Add asset

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

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

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

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

  57. ソースの書き換え <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR!

    - A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 長いので割愛 > </a-animation> </a-sphere> <a-sky src="さっきコピーした画像のURL"></a-sky> </a-scene> </body> 背景(a-sky)のcolorをsrcに変更し画像のURLを指定すればOK colorをsrcに変更
  58. 名前を付けて保存 文字列をクリック ここを書き換える

  59. ほか、A-Frameで利用できるデータの例 • 文字列 <a-text> • 音 <a-sound> • ビデオ <a-video>

    • 3Dファイル glTF <a-gltf-model> obj <a-obj-model> COLLADA <a-collada-model> • VRコントローラによる入力 HTC Vive <a-entity vive-controls="hand: left"> WindowsMR <a-entity windows-motion-controls="hand: left">
  60. ハンズオン手順 Step1: サンプルを使ってA-Frame基本操作を覚える Step2: CG見た目の調整やアニメーションの設定 などを行い簡易VRコンテンツを作成 Step3: AR.jsを使ってARコンテンツを作成

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

  62. AR.jsをインポート & カメラ画像の表示 <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description"

    content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> <script src="https://jeromeetienne.github.io/AR.js/aframe/build/ aframe-ar.js"></script> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 中略></a-animation> </a-sphere> <a-sky src="画像URL"></a-sky> </a-scene> </body> AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加 追加 <a-scene embedded> 追加
  63. マーカーを認識してその上にCGを表示 <body> <a-scene embedded arjs> <a-marker preset="hiro"> <a-sphere position="0 1.25

    -5" radius="1.25" src="URL" shadow> <a-animation 中略> </a-animation> </a-sphere> </a-marker> <a-sky src="画像URL"></a-sky> </a-scene> </body>  AR表示をするにはマーカーとCGとの関連付けが必要  A-Frameの場合<a-marker></a-marker>でCGを挟む  presetでマーカー名を指定 (付属マーカーのHiro使用)  正方形内のマーカーを独自に作ることも可能 (参考) マーカーの上にこれらを表示したい 追加
  64. 動作確認 表示されたけど位置がズレてる

  65. 理由と解決方法(1) <a-marker> </a-marker>で挟まれたCGの原点はマーカーの中心となる <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow>

    0 0 0 x y z -5 1.25 0 1.25 0
  66. 動作確認 まだちょっとズレてる 下記のように変更して再度実行 <a-sphere position="0 1.25 0" radius="1.25" src="URL" shadow>

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

    arjs> <a-marker preset="hiro"> <a-sphere position=“0 1.25 0" radius="1.25" src="URL" shadow> <a-animation 中略> </a-animation> </a-sphere> </a-marker> <a-sky src="画像URL"></a-sky> <a-entity camera></a-entity> </a-scene> </body> カメラを明示的に追加する(位置は原点) X Z Y
  68. 動作確認 この辺りの表示がじゃま

  69. <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! -

    A-Frame"> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> <script src="https://jeromeetienne.github.io/AR.js/aframe/build/ aframe-ar.js"></script> </head> <body> <a-scene embedded arjs="debugUIEnabled: false;"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 中略></a-animation> </a-sphere> <a-sky src="画像URL"></a-sky> <a-entity camera></a-entity> </a-scene> </body> 追加
  70. 完成

  71. A-Frameまとめ • A-FrameでWebブラウザ対応のVR • オブジェクトの表示とちょっとしたアニメーション ならHTMLのタグを書くだけでOK • インタラクティブなことをする場合にはjavascript • 1つのコードでPC/スマホ/HMDみんないける

  72. ほかにもA-Frame対応 ARツールが続々登場

  73. Vuforia  argon.jsと専用ブラウザのArgon4を組み合わせて使用  ポスターのような自然な絵をマーカーにすることが可能

  74. マーカー不要なAR

  75. スマホ・タブレット対応の次世代ARプラットフォーム [特徴]  スマホ等の携帯端末で自己位置推定や平面検出が可能 • Tango: 特殊なカメラを搭載した専用端末で動作 • ARCore: 通常のAndroid端末で動作(予定)

    • ARKit: iOS11が動くiPhoneやiPadで動作
  76. スマホ・タブレット対応の次世代ARプラットフォーム 画像処理による特徴点追跡とジャイロ・加速度センサによる動き検出

  77. 次世代ARプラットフォームの動作例

  78. A-Frame対応の専用ブラウザが登場 WebARonTango WebARonARCore WebARonARKit

  79. None
  80. さいごに自己紹介 氏名:吉永崇(Takashi Yoshinaga) 所属:九州先端科学技術研究所(ISIT) 専門:AR/VRを用いた情報可視化と各種計測 コミュニティ:ARコンテンツ作成勉強会 主催

  81. Twitterと勉強会ページで情報を発信しています #AR_Fukuoka Googleで「AR勉強会」で検索

  82. None