ここまで来た！2017年 Web VRでできること

ここまで来た！2017年 Web VRでできること

1. 1. ここまで来た！ 2017年 Web VRでできること VOYAGE GROUP VR室長 伊藤淳
2. 2. 伊藤淳 (@jujunjun110) VOYAGEGROUP VR室 室長 スマホアプリ、ウェブアプリの プロデューサーを4年ほどやる 2016年10月よりVR室立ち上げ
3. 3. 目次 1. Web VRとは 2. Web VR何がすごいの？ 3. Web VRの開発フレームワーク 4. Web VRでできることたくさん
4. 4. Web VRとは
5. 5. Web VRとは ウェブブラウザで楽しめるVRコンテンツ ・基本的にはHTML + JavaScript で実装 ・WebGLを駆使 ・現状、大きく分けて2種類の環境がある
6. 6. ①PCベース ②スマホベース 端末 + HMD Windows PC / (Mac?) + Oculus Rift / HTC Vive iPhone / Android 端末 + スマホ向けVRゴーグル 対応ブラウザ Chromium と Firefox Nightly のみ なんでもOK HMD状態の取得方法 Web VR API 経由 スマホ ジャイロセンサー HTML5 API経由 ポジショントラッキング ◯ × ハンドコントローラー ◯ △ Android Chrome + Gamepad API のみ （DayDream Controller含む) Web VRにおける2種類の環境 今日話す内容は主にこっち！
7. 7. まぎらわしい用語の整理 Web VR / ブラウザVR Webブラウザで表示できるVRコンテンツ Web VR APIの利用は前提ではない Web VR API ブラウザからHTC ViveやOculus Rift等のHMDの 位置や状態を取得できるブラウザのAPI W3Cが仕様策定中 現在Firefox nightlyとChromium でのみ利用可能
8. 8. Web VR 何がすごいの？
9. 9. A-Painter (Tilt BrushのA-Frame移植) 描いた作品を リンク ひとつでシェア！ → さらに描き足すことも可能！
10. 10. Web VRのすごいところ 圧倒的なアクセスしやすさ・シェアしやすさ
11. 11. Web VRのメリット・デメリット メリット ・アプリのインストール不要 ・URLでコンテンツを誰にでもすぐ共有 ・アプリプラットフォームの審査不要 デメリット ・歴史が浅いのでUnity等のゲームエンジンに比べ 便利ライブラリ・アセットが少ない ・重いアセットを実行時に読み込むのがきつい
12. 12. Web VRが向いているコンテンツ ・アクセスしやすさ・シェアしやすさが 重要な意味を持つコンテンツ ・（スマホベースの場合） カーソルによるフューズなど 簡単な操作でストレスなく完結できる コンテンツ
13. 13. Web VRが向かないコンテンツ ・重いモデルを扱ったり レンダリング量が多かったりするコンテンツ ・（スマホベースの場合） ハンドコントローラーが必要な 複雑な操作のあるコンテンツ
14. 14. Web VRの 開発フレームワーク
15. 15. Web VRフレームワークとは Web VR フレームワーク VRアプリケーション Three.js ブラウザ スマホ / PC オブジェクトの表示・アニメーション・シェーディングなど 3Dコンテンツ全般の機能をWebGLを用いて提供 ステレオレンダリング・ジャイロに合わせたカメラの回転など VRでよく使うThree.jsの機能を使いやすく提供 Web VR APIHTMLの各種API 各種Input (ジャイロセンサーの値など) HMDやハンドコントローラーのInput値 HMD + コントローラー HTML + javascript でアプリケーションを実装
16. 16. 開発元 特徴 Three.js （生） Three.js Authors WebGLを使って3次元CGをリアルタイムレンダリング するJavaScriptライブラリ。大体のフレームワークで使 われている。 A-Frame Mozilla HTMLを書くようにVRアプリケーションを追加してい けるのでとっつきやすい。Three.jsのラッパー。 React VR Facebook React.js ベースなのでReactに慣れている人には使い やすい。Three.jsのラッパー。 Solufa AMATELUS 実行が高速なのが売り。Three.jsのラッパー。 Web VRの主な開発フレームワーク どれも Three.js のラッパーなので、できることにそれほど大きな差はない。（個人の感想です。） コミュニティやライブラリの開発具合はA-Frameが一歩先を行っているように思える。
17. 17. A-Frameの実装例 「box」や「Sphere」などの基礎的な形状の”Entity”に 見た目（赤い）や機能（クリックされると回転する）を記述した”component” を付与することで機能を実装していきます。Unity等に似ています。
18. 18. Web VRでできること
19. 19. できること① 3Dモデル読み込み DEMO 解説：例えばA-Frameでは .obj と .collada をサポート。 その他の拡張子のモデルもライブラリをインポートすることで 問題なく読み込み・描画できます。
20. 20. できること② 物理演算 DEMO 解説：例えばA-Frameでは 物理演算ライブラリ CANNON.js のラッパーとして aframe-physics-system というライブラリがあり簡単に実装できます。
21. 21. できること③ リアルタイムコミュニケーション DEMO 解説：基本的にHTML5 + javascriptでできることはなんでもできるので、 WebRTCを使ったリアルタイムコミュニケーションは簡単に実装できます。
22. 22. できること④ MMD 参考リンク：a-mmd 解説：なんとMMDも😍 ちなみに主要Web VRフレームワークでは FBXのボーンアニメーションに対応しているライブラリはまだなさそう。 コミットしてヒーローになるチャンス！
23. 23. できること⑤ ページ遷移 参考リンク：WikiMuseum 解説：コンテンツにパーマネントリンクを付与し、 HTML5のPushState / PopStateを利用することで、自在に行き来できます。 document.locationを書き換えることで、外部リンクも可能です。
24. 24. その他できること 全天球動画再生 シェーダーの自作 Normal map Terrain パーティクル Leap Motionによる操作 などなど…
25. 25. まとめ ・Web VR 思ったよりいろんなことできる！ ・ビューワ系アプリケーション用途なら すでに実用レベルに達しているかも？ ・ぜひ触ってみましょう！
26. 26. VOYAGE GROUPでは A-Frame / Unityで VRコンテンツの開発をしたい エンジニアを探しています