WebVRフレームワーク「A-Frame」使ってみた/Monaca-WebVR-A-frame

ピープルソフトウェア（株）で行われた「大・Monaca祭り」プレゼン資料。

Transcript

1. Monaca ×VR WebVRフレームワーク「A-Frame」使ってみた PSC 西中 大貴
2. 目次  VRとは  A-Frameについて  A-Frameとは  実装方法  デモ紹介  実際に作ってみた！ • PSC東京オフィスVR  いいところ、悪いところ 今後やりたいこと
3. VRとは?  Virtual Reality(仮想現実)の略称  コンピュータ上に人工的な環境を作り出し、そこ にいるかの様な感覚を体験できる技術
4. スマホでのVR について  VRで表示するためにはスマホ用VRゴーグルが必要  トラッキングには端末のジャイロセンサーを使用
5. A-Frameとは  MozillaがリリースしたWebVRのフレームワーク  HTMLタグで記述できる
6. 実装方法  フレームワークの読み込み • 360°画像を用意 • シーンの作成、及び360°写真の読み込み <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script> <a-scene> <a-sky src="image.jpg"></a-sky> </a-scene>
7. 他にも こんな実装 • 箱を出す • 球体を出す <a-box color= " tomato" height="4" width="0.5"></a-box> <a-sphere color=“yellow" radius="5"></a-sphere>
8. A-Frameデモ 紹介 https://aframe.io/
9. 作ってみた  360°写真をVRで表示するデモを作ってみました！ PSC東京オフィスVR
10. いいところ と 悪いところ いいところ  安価  配線ストレスなし  電源不要  軽い  トラッキングカメラ不要  セットアップとか容易？ 悪いところ  視野角が狭い  解像度が低い  コントローラーなし  複雑なコンテンツには 不向き？
11. 今後 やりたいこと  VRの状態で視線などで操作できるコンテンツ  なにかゲーム性のあるコンテンツ VRではありませんが… • ARコンテンツ
12. おしまい ご清聴ありがとうございました よいVRライフを！