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

A-Frameで始めるWebVR/AR

 A-Frameで始めるWebVR/AR

ARコンテンツ作成勉強会で行ったA-Frameを用いたAR/VRコンテンツ開発の解説資料
updated 23 Dec. 2017

TakashiYoshinaga

October 20, 2017
Tweet

More Decks by TakashiYoshinaga

Other Decks in Technology

Transcript

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

    Webサーバー → コンテンツの公開 サーバーに関して今回は・・・  Glitchを利用 https://glitch.com/  FacebookかGitHubのアカウントがあればOK  サーバーとエディタの両方を無料で提供 この資料ではGlitch使用を前提に説明します
  2. ソースの確認 <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>の間に描画に関する記述をする
  3. ソースの確認 <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の詳細) 位置 回転 色
  4. アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整  position(位置):x y zの順にスペースで区切って指定  rotation(傾き):各軸を中心とした回転で表現 

    color(色):カラーコード等で指定  他にも図形によって各種設定項目がある X Z Y (0 1.25 -5) 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など) 原点
  5. [編集例] <a-scene> <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-text position="0 1.5 -2" value="AR Fukuoka" text="align:center"> </a-text> <a-sky color="#0000FF"></a-sky> </a-scene> HTML編集に慣れよう 角度 高さ 背景色 テキスト
  6. <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>
  7. ソースの書き換え <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”を貼り付ける ここを変更
  8. アニメーションの追加 <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 = "0" ←繰り返し回数 > </a-animation> </a-sphere> a-animationタグを用いてアニメーションに関する設定を行う Z X Y
  9. アニメーションを繰り返す <a-sphere position="0 1.25 -5" radius="1.25" src="earth.jpg"> <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> repeatを"indefinite"にするといつまでも繰り返し続ける
  10. 同じ速度で回転させる <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
  11. ソースの書き換え <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に変更
  12. フォルダの構成 まずはダウンロードしたzipファイルを分かり易い場所に解凍 mtl obj png 【各ファイルの解説】  objファイル 3Dモデルの形状のみを 表現するファイル。

    色情報は持たない。  pngファイル 3Dモデルに割り当てる 色情報を焼き込んだ テクスチャ画像。  mtlファイル objファイルとpngファイル を関連付ける情報が 記述されたファイル。
  13. ソースの書き換え <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-obj-model></a-obj-model> </a-sphere> <a-sky src="画像のURL"></a-sky> </a-scene> </body> <a-obj-model></a-obj-model>をa-sphereの子要素として追加 a-sphereの子要素にする ことでアニメーションに追従
  14. ソースの書き換え <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-obj-model src="objのURL"></a-obj-model> </a-sphere> <a-sky src="画像のURL"></a-sky> </a-scene> </body> <a-obj-model>タグ内でobjファイルのURLを指定 テクスチャのURL取得と同じ要領 ヒント:画面左のassetsから
  15. ソースの書き換え <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-obj-model src="objのURL" mtl="mtlのURL"></a-obj-model> </a-sphere> <a-sky src="画像のURL"></a-sky> </a-scene> </body> <a-obj-model>タグ内でmtlファイルのURLを指定
  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> </head> <body> <a-scene> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> <a-animation 長いので割愛> </a-animation> <a-obj-model position="2 0 0" rotation="0 -90 0" scale="0.1 0.1 0.1" src="objのURL" mtl="mtlのurl"></a-obj-model> </a-sphere> <a-sky src="画像のURL"></a-sky> </a-scene> </body> Z X Y 地球を原点としてx=2
  17. 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-obj-model 中略></a-obj-model> </a-sphere> <a-sky src="画像URL"></a-sky> </a-scene> </body> AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加 追加 <a-scene embedded> 追加
  18. マーカーを認識してその上に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-obj-model 中略></a-obj-model> </a-sphere> </a-marker> <a-sky src="画像URL"></a-sky> </a-scene> </body>  AR表示をするにはマーカーとCGとの関連付けが必要  A-Frameの場合<a-marker></a-marker>でCGを挟む  presetでマーカー名を指定 (付属マーカーのHiro使用)  正方形内のマーカーを独自に作ることも可能 (参考) マーカーの上にこれらを表示したい 追加
  19. 理由と解決方法(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-obj-model 中略></a-obj-model> </a-sphere> </a-marker> <a-sky src="画像URL"></a-sky> <a-entity camera></a-entity> </a-scene> </body> カメラを明示的に追加する(位置は原点) X Z Y
  20. <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-obj-model 中略></a-obj-model> </a-sphere> <a-sky src="画像URL"></a-sky> <a-entity camera></a-entity> </a-scene> </body> 追加
  21. 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 embedded arjs="debugUIEnabled: false"> <a-marker preset="hiro"> <a-sphere position="0 1.25 0" radius="1.25" src=“URL" shadow> <a-animation 中略></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> </a-marker> <a-sky src="画像URL"></a-sky> <a-entity camera></a-entity> </a-scene> </body> 赤字の部分を削除 <a-scene embedded arjs="debugUIEnabled: false"> <a-marker preset="hiro"> <a-sphere position="0 1.25 0" radius="1.25" src=“URL" shadow> <a-animation 中略></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> </a-marker> <a-sky src="画像URL"></a-sky>
  22. CGの位置・大きさを整える <a-sphere position="0 0 -1" radius="0.25" src= "URL" shadow> <a-animation

    attribute="rotation" dur="10000" from="0 0 0" to="0 360 0" repeat="indefinite" easing = "linear" ></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere>  マーカー使用時はマーカーに対する相対的な位置サイズだった  次世代ARプラットフォームを使う場合、実スケール(m)を用いる ここを変更
  23. Three.ar.jsとaframe-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://rawgit.com/google-ar/three.ar.js/master/dist/ three.ar.js"></script> <script src="https://rawgit.com/chenzlabs/aframe-ar/master/dist/ aframe-ar.js"></script> </head> 追加
  24. AR機能をオンにする <body> <a-scene ar> <a-sphere position="0 0 -1" radius="0.25" src="URL"

    shadow> <a-animation 省略></a-animation> <a-obj-model 中略></a-obj-model> </a-sphere> <a-entity camera> <!--強制的に画面に何かを表示させることでカメラ画像の表示を継続--> <a-text position="0 0 -1" ></a-text> </a-entity> </a-scene> </body> 追加 追加
  25. 参考 A-Frame https://aframe.io/ AR.js https://github.com/jeromeetienne/AR.js 解説ブログ(A-Frame公式) https://aframe.io/blog/arjs/ ハンズオン資料 by 杉井さん

    https://www.slideshare.net/YouichiSugii/a-frame-20170129 by 早井さん https://speakerdeck.com/shinjism/a-framedeoshou-qing-webar