WebでOculus Riftを使用するためのライブラリやツール

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);
}

といった実装をすれば歪みエフェクトがかかった描画が行えます。

gtk2k/gist:9801067