2017年初頭時点で、「Web VRでできること」を総まとめしてみました！ ・Web VRの種類 ・Web VRのメリット・デメリット ・Web VRの開発フレームワーク ・Web VRで使えるいろいろなライブラリ 質問や間違いの報告は Twitterで @jujunjun110 までご連絡ください。

1. ここまで来た！
2017年 Web VRでできること
VOYAGE GROUP VR室長 伊藤淳

2. 伊藤淳
(@jujunjun110)
VOYAGEGROUP
VR室 室長
スマホアプリ、ウェブアプリの
プロデューサーを4年ほどやる
2016年10月よりVR室立ち上げ

3. 目次
1. Web VRとは
2. Web VR何がすごいの？
3. Web VRの開発フレームワーク
4. Web VRでできることたくさん

4. Web VRとは

5. Web VRとは
ウェブブラウザで楽しめるVRコンテンツ
・基本的にはHTML + JavaScript で実装
・WebGLを駆使
・現状、大きく分けて2種類の環境がある

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. まぎらわしい用語の整理
Web VR / ブラウザVR
Webブラウザで表示できるVRコンテンツ
Web VR APIの利用は前提ではない
Web VR API
ブラウザからHTC ViveやOculus Rift等のHMDの
位置や状態を取得できるブラウザのAPI
W3Cが仕様策定中
現在Firefox nightlyとChromium でのみ利用可能

8. Web VR 何がすごいの？

10. A-Painter (Tilt BrushのA-Frame移植)
描いた作品を リンク ひとつでシェア！
→ さらに描き足すことも可能！

11. Web VRのすごいところ
圧倒的なアクセスしやすさ・シェアしやすさ

12. Web VRのメリット・デメリット
メリット
・アプリのインストール不要
・URLでコンテンツを誰にでもすぐ共有
・アプリプラットフォームの審査不要
デメリット
・歴史が浅いのでUnity等のゲームエンジンに比べ
便利ライブラリ・アセットが少ない
・重いアセットを実行時に読み込むのがきつい

13. Web VRが向いているコンテンツ
・アクセスしやすさ・シェアしやすさが
重要な意味を持つコンテンツ
・（スマホベースの場合）
カーソルによるフューズなど
簡単な操作でストレスなく完結できる
コンテンツ

14. Web VRが向かないコンテンツ
・重いモデルを扱ったり
レンダリング量が多かったりするコンテンツ
・（スマホベースの場合）
ハンドコントローラーが必要な
複雑な操作のあるコンテンツ

15. Web VRの
開発フレームワーク

16. Web VRフレームワークとは
Web VR フレームワーク
VRアプリケーション
Three.js
ブラウザ
スマホ / PC
オブジェクトの表示・アニメーション・シェーディングなど
3Dコンテンツ全般の機能をWebGLを用いて提供
ステレオレンダリング・ジャイロに合わせたカメラの回転など
VRでよく使うThree.jsの機能を使いやすく提供
Web VR APIHTMLの各種API
各種Input (ジャイロセンサーの値など) HMDやハンドコントローラーのInput値
HMD + コントローラー
HTML + javascript でアプリケーションを実装

17. 開発元 特徴
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が一歩先を行っているように思える。

18. A-Frameの実装例
「box」や「Sphere」などの基礎的な形状の”Entity”に
見た目（赤い）や機能（クリックされると回転する）を記述した”component”
を付与することで機能を実装していきます。Unity等に似ています。

19. Web VRでできること

20. できること① 3Dモデル読み込み
DEMO
解説：例えばA-Frameでは .obj と .collada をサポート。
その他の拡張子のモデルもライブラリをインポートすることで
問題なく読み込み・描画できます。

21. できること② 物理演算
DEMO
解説：例えばA-Frameでは 物理演算ライブラリ CANNON.js のラッパーとして
aframe-physics-system というライブラリがあり簡単に実装できます。

22. できること③ リアルタイムコミュニケーション
DEMO
解説：基本的にHTML5 + javascriptでできることはなんでもできるので、
WebRTCを使ったリアルタイムコミュニケーションは簡単に実装できます。

23. できること④ MMD
参考リンク：a-mmd
解説：なんとMMDも😍 ちなみに主要Web VRフレームワークでは
FBXのボーンアニメーションに対応しているライブラリはまだなさそう。
コミットしてヒーローになるチャンス！

24. できること⑤ ページ遷移
参考リンク：WikiMuseum
解説：コンテンツにパーマネントリンクを付与し、
HTML5のPushState / PopStateを利用することで、自在に行き来できます。
document.locationを書き換えることで、外部リンクも可能です。

25. その他できること
全天球動画再生
シェーダーの自作
Normal map
Terrain
パーティクル
Leap Motionによる操作
などなど…

26. まとめ
・Web VR 思ったよりいろんなことできる！
・ビューワ系アプリケーション用途なら
すでに実用レベルに達しているかも？
・ぜひ触ってみましょう！

27. VOYAGE GROUPでは
A-Frame / Unityで
VRコンテンツの開発をしたい
エンジニアを探しています