WebVR について調べてみた
先日友人に「今は WebVR だぜ!HoloLens のゲームも絶対に WebVR で作るべきだよ!」と言われてから WebVR が気になり、今回調査しました。
参考記事
WebVR とは
JavaScript の API で、Web サイトで VR を実現するための技術です。
WebVR に対応したブラウザを介してコンテンツを体験することができます。そのため、Oculus のような VRHMD のブラウザから PC 上のブラウザなど、使用するデバイスにあまり制限されずにコンテンツを体験することが可能なのが特徴です。メンテナンスも簡単ですね。
Web 技術で VR コンテンツが作成できるとのことなので、おそらく Electron を使った開発なども可能なのではないかと思います。(今後調査します。)
以下のリンクから WebVR を体験することができます。
WebVR の最新動向
Mozilla
Firefox を開発する Mozilla が VR/AR デバイスに対応した専用 Web ブラウザ「Firefox Reality」 を発表しました。
まだプロジェクトの初期段階ですが、今後デザインやジェスチャー、ボイス機能などを追加していくみたいです。
以下の Mozilla VR Blog にて Firefox Reality についての記事が書かれています。
個人的に特徴的だなと思ったのは、「button tray」です。普通の Web ブラウザにあるようなトップバーメニューの機能が下の画像にある自分の周りに表示されたトレイのようなものに置き換えられるようです。
あくまで VR/AR ヘッドセット向けブラウザということなので、既存の Firefox ブラウザの利点は活かしつつ、既存のものとは異なったゴールに向かっているようです。
下のサイトは Google が公開している WebVR コンテンツを集めたサイト「WebVR Experiments」です。
このサイトのコンテンツを眺めていると、「Three.js」や「WebGL」といった単語をちらちらと見かけますね。
WebGL は、Web ブラウザ上でプラグインを使用せずにインタラクティブな 3D グラフィックスや 2Dグラフィックスをレンダリングするための JavaScript API です。今までネイティブアプリにしか出来なかった GPU へのアクセスを可能にする APIで、WebGL を使えば GPU パワーを使った 3Dゲームも Web 上で実現可能となります。(FlashPlayer などのプラグインは不要)
HTML5 の Canvas 要素を通してブラウザに表示しています。
そして、WebGL の代表的なライブラリとして「three.js」が存在します。
WebVR 開発フレームワーク
Three.js
three.js - Javascript 3D library
Three.js は3Dコンテンツを手軽に制作するための JavaScript ライブラリです。
非常に多くのサンプルとドキュメントが存在します。MIT License なので商用利用も可能です。
Three.js で3Dコンテンツを作成し、Three.js に同梱される VRControls.js
と VREfftct.js
を使用することで WebVR への対応が可能となります。
それぞれ VRControls.js
がトラッキング関連の機能を担当、 VREfftct.js
が右目左目用の画像出力を担当します。
ただサンプルを眺めていると、高いクオリティのものはあまり無いのも分かると思います。圧倒的な没入感や美麗なグラフィックスを体験したいならばネイティブアプリではないと現状難しいでしょう。
A-Frame
こちらは先程の Firefox を開発する Mozilla の VR チーム「MozVR」によって設計されたフレームワークです。 Three.js と同じくMIT License なので商用利用も可能です。
Three.js とは違い HTML のタグベースで VR コンテンツを作成できる点が異なっています。
上のようなサンプル WebVR コンテンツが以下の HTML のみで実現できるのは驚きですね。
<!DOCTYPE html> <html> <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html>
簡単に解説すると、
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
で A-Frame を読み込み <a-scene></a-scene>
の中に例えば
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
を記入すると青いボックスが配置されるようです。position に (x,y,z) 座標が書かれているのが直感的で良いですね。
手っ取り早く WebVR コンテンツを作ってみたい!という方におすすめです。
HoloLens で WebVR
HoloLens も RS4 Preview 段階での確認にはなりますが、問題なく Edge ブラウザから WebVR が体験することができます。
HoloLens ローカル上での WebVR コンテンツの実行方法については上記の記事が参考になると思います。 そんなに大変ではありません。Explorer 上でローカルの HTML ファイルを表示させているだけです。(ただしソースコードは少し長いため全部読むのは大変)
ものすごく大雑把に HTML にかかれていることを読み解くと
- HTML ファイルで
three.js
とWebVR.js
を読み込む new THREE.Scene()
でシーンを作成new THREE.PerspectiveCamera()
でカメラを作成new THREE.Mesh()
で配置したいオブジェクトを作成し、scene.add()
でシーンに追加new THREE.DirectionalLight( 0xffffff );
でライトを配置new THREE.WebGLRenderer( { antialias: true } );
でレンダラーインスタンスを作成document.body.appendChild( WEBVR.createButton( renderer ) );
でHTML に WebVR を開始するボタンを表示させる
です。分かりづらくてすみません。
クリックなどのイベントリスナーは、
renderer.domElement.addEventListener( 'mousedown', onMouseDown, false );
のようにコールバック関数を設定することができるので比較的簡単に扱えそうです。これ以上は今回は深掘りしないでおきます。
まとめ
WebVR は Web 技術(HTML, JavaScript)を使って実装されたブラウザ上で体験可能な VR コンテンツです。
メンテナンスコストが低く、ブラウザさえ搭載している AR/VR デバイスであればすぐにコンテンツを体験できるのが魅力だと言えます。デモとかがしやすそうですね。 しかし、クオリティの高いコンテンツはまだ多くは存在しません。
どうしてもネイティブアプリ VR アプリに比べてクオリティの高いコンテンツ作成の敷居は高いのでしょう。(もちろんネイティブアプリ制作も大変ですが)
それと、個人的に気になったのが HoloLens でWebVR を体験するとせっかくの Spatial Mapping が活用できなかったのが少し残念でした。WebVR が体験できるのですが、ボックスが壁の奥とかに見えていると複雑な気持ちになります。 (Spatial Mapping は HoloLens 特有の機能ですし、あくまで Web「VR」 なので当然っちゃ当然ですね。。笑)
とはいえそこは WebAR がいずれ出てくる気もしますので、今出来ることを皆さんやっていきましょう!