More Related Content
Similar to ここまで来た!2017年 Web VRでできること (20)
ここまで来た!2017年 Web VRでできること
- 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 でのみ利用可能
- 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が一歩先を行っているように思える。
Editor's Notes
- ミクさんかわいい → 共有したい → URL一発で共有できる!
- たとえば不動産の内見アプリの場合…
アプリだと: インストール → 閲覧 → AppStoreのURLを共有 → アプリのDL → 家のIDの共有
ウェブだと: いきなりコンテンツを見る → URLを共有 → いきなりコンテンツを見る
- ヒューマンIKとかも
- ヒューマンIKとかも
- PCで見るのでただの3Dコンテンツですがスマホでみたらステレオレンダリングもできますよ
- ヒューマンIKとかも
- ヒューマンIKとかも