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. 本資料の内容 • 本資料では下記の内容をご紹介します 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
  2. 必要なもの  Webブラウザ → コンテンツの体験や動作確認  テキストエディタ → HTMLやjavascriptの記述 

    Webサーバー → コンテンツの公開 サーバーに関して今回は・・・  Glitchを利用 https://glitch.com/ ◆ FacebookかGitHubのアカウントがあればOK ◆ サーバーとエディタの両方を無料で提供 この資料ではGlitch使用を前提に説明します
  3. ソースの確認 <html> <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello,

    WebVR! - A-Frame"> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"> </script> </head> <body> <a-scene background="color: #FAFAFA"> 表示するオブジェクトや背景の設定をここに記述 </a-scene> </body> </html>  ヘッダー部でA-Frameの機能を提供するライブラリを取り込む  <a-scene>と</a-scene>の間に描画に関する記述をする
  4. ソースの確認 <a-scene background="color: #FAFAFA"> <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-scene>  基本図形はa-xxxタグで提供されている https://aframe.io/docs/0.9.0/primi tives/a-box.html (例:a-boxの詳細) 位置 回転 色
  5. アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整  position(位置):x y zの順にスペースで区切って指定  rotation(傾き):各軸を中心とした回転で表現 

    color(色):カラーコード等で指定  他にも図形によって各種設定項目がある X Z Y (0 1.25 -5) 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など) 原点
  6. [編集例] <a-scene background="color: #0000FF"> <a-box position="-1 0.5 -3" rotation="0 45

    45" 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="0.2" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> </a-scene> HTML編集に慣れよう 角度 高さ 色
  7. <a-scene background="color: #FAFAFA"> <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-scene> 不要なオブジェクトの削除  HTMLの記述の中からタグを削るだけ  この後の演習のため、a-sphereのみを 残して削除してみましょう <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>
  8. ソースの書き換え <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR!

    - A-Frame"> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> </head> <body> <a-scene background="color: #FAFAFA"> <a-sphere position="0 1.25 -5" radius="1.25" src="コピーしたURL" shadow> </a-sphere> </a-scene> </body>  a-sphereの色をcolor(色)ではなくsrc(画像へのリンク)に変更  srcの右辺に前操作でコピーした“画像のURL”を貼り付ける colorをsrcに変更
  9. アニメーションの追加 <a-sphere position="0 1.25 -5" radius="1.25" 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-sphere> a-animationタグを用いてアニメーションに関する設定を行う Z X Y "を忘れずに!
  10. アニメーションを繰り返す <a-sphere position="0 1.25 -5" radius="1.25" src="テクスチャのURL" shadow animation =

    " property :rotation; ←アニメーションの種類 dur : 10000; ←アニメーションにかける時間(ミリ秒) from : 0␣0␣0; ←開始時の角度(0,0,0) to: 0␣360␣0; ←終了時の角度(0,360,0) loop : -1; ←繰り返し回数 " > </a-sphere> repeatを"-1"にするといつまでも繰り返し続ける
  11. 同じ速度で回転させる 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
  12. タグの追加 <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 background="color: #FAFAFA"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow animation = "長いので割愛" > </a-sphere> <a-sky src="さっきコピーした画像のURL"></a-sky> </a-scene> </body> a-skyタグを利用し、背景情報として画像のURLを指定すればOK a-skyを追加
  13. ほか、A-Frameで利用できるデータの例 • 文字列 <a-text> • 音 <a-sound> • ビデオ <a-video>

    • 3Dファイル obj <a-obj-model> glTF <a-gltf-model> • VRコントローラによる入力 HTC Vive <a-entity vive-controls="hand: left"> OculusQuest など <a-entity laser-controls="hand: left">
  14. AR.jsをインポート & カメラ画像の表示 <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description"

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

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