Oculus RiftをWebでも使えるようにしたライブラリやツールなどがいくつか作成されていますので紹介及び問題点をあげます。
トラッキング情報を取得するプラグインやツール
vr.js
多分、一番有名だと思います。
このライブラリはWindowsではChromeとFirefox、Macの場合はChromeとFirefoxに加えSafariの拡張機能またはプラグインで提供されています。
問題点
vr.jsの拡張機能はNPAPIを使用して作成されており、ChromeやFirefoxはNPAPIの拡張機能のサポートを段階的に廃止し始めています(PPAPIを使用したプラグインのみサポートされます)。
また、Chromeはデベロッパーモードでのインストールも事実上廃止されます。一応、デベロッパーモードでインストールして実行することはできますが、Chromeを起動するたびに警告のポップアップが表示されます。
(個人的に)一番理想的な実装方法なのですが、使用できなくなるのが悔やまれます。
oculus-bridge
ローカルでWebSocketサーバーを起動して、WebSocket経由でトラッキング情報を取得するツールです。
データはクォータニオン(傾き)とアクセラレーション(加速度)情報がJSON形式で送られてきます。
問題点
vr.jsのようなブラウザーの拡張機能として提供されていないため、ブラウザーの拡張機能にかかわる問題にあたることはないですが、実行ファイルを実行するという手間が加わります。
また、私の環境だけかもしれませんが、メインディスプレイの解像度でOculus Riftの接続を判断しているのかディスプレイを拡張表示で行っている場合うまくOculus Riftを認識してくれませんでした。
Webrift
これも、oculus-bridgeと同様に、WebSocketでトラッキング情報を取得するツールです。oculus-bridgeの場合はOculus Rift(ディスプレイ)の接続もチェックしていますが、WebriftはOculus Rift(ディスプレイ)の接続はチェックしていません。データはクォータニオンのx,y,z,wの値が","区切りで文字列化したものが送られてきます。(例："1.0,1.0,1.0,1.0")
問題点
oculus-bridgeと同じく実行ファイルの実行する手間が加わります。
oculus-rest
oculus-bridgeやWebriftはWebSocketでトラッキング情報を取得するのに対し、oculus-restはREST(xhr)でトラッキング情報を取得します。
WebSocketを実装していないブラウザーでも使用することができます。データはJSON形式で、クォータニオンとオイラー角のデータが送信されます。
問題点
oculus-bridgeやWebriftと同じく実行ファイルの実行する手間が加わります。
HTTPプロトコルなのでリクエストが必要となり、さらにWebSocketよりデータ量が多くなります。
トラッキング情報の使用方法
トラッキング情報はどのツールにおいてもクォータニオンで情報が送られてきますので
(送られてくるクォータニオンデータをtrackとし、three.jsで説明すると)
カメラを動かす場合は
camera.quaternion.set(track.x, track.y, track.z, track.w);// またはx,y,z,wそれぞれ符号反転したもの
カメラを動かさずメッシュを動かす場合は、
camera.quaternion.set(track.x, track.y, track.z, -track.w);// 同上
などの実装をすればOculus Riftの動きに合わせて動くようになります。
なお、three.jsにはOculusControls.jsというコントロールも実装されており、ソースを見るとoculus-restを使用したものとなっています。
エフェクトライブラリ
OculusRiftEffect.js (これしか知らない)
three.jsに含まれている樽型歪み(Barrel Distortion)エフェクトをかけてくれるライブラリです。歪みをフラグメントシェーダーで行っています。
RiftThree
サイドバイサイドやトップアンドボトム等の3DメディアソースにOculusRiftEffect.jsを使ってエフェクトをかけてくれるライブラリです。奥行(Deps Map)も使用することができます。
また、メディアをテクスチャーとして貼り付けるのですが、貼り付けるジオメトリの形状をPlane(板)とShere(球)から選ぶこともできます。
OculusRiftEffect.jsの使用方法
シンプルな使用方法として、OculusRiftEffect.jsをロードすると、THREE名前空間にOculusRiftEffectが追加されますので、
var effect;
effect = new THREE.OculusRiftEffect(renderer, {scale:1.0});
--
function animate(){
requestAnimationFrame(animate);
--
effect.render(renderer,camera);
}
といった実装をすれば歪みエフェクトがかかった描画が行えます。