Three.jsのOculus Rift対応

Three.js（r74）でOculus Rift対応を試したので、その手順をまとめる。必要なものはThree.jsのサイトからダウンロードした圧縮ファイルにあるVRControls.jsとVREffect.js。それからブラウザは通常のfirefoxではなく、firefox nightyにaddonを追加して使用する。firefox nightyと必要なaddonのインストールについてはこちらを参照。

１．ダウンロードしたThree.jsの圧縮ファイルから以下の2つのjsファイルを適当なフォルダにコピー。ここではjsというフォルダを作成してコピー。
\three.js-master\examples\js\effects\VREffect.js
\three.js-master\examples\js\controls\VRControls.js

２．htmlからVREffect.jsとVRControls.jsを読み込む。

３．VRControlsとVREffectのインスタンス作成

// VRControlsインスタンス作成
var controls = new THREE.VRControls(camera);
// VREffectインスタンス作成
var effect   = new THREE.VREffect(renderer);
// 画面サイズの設定
effect.setSize(window.innerWidth , window.innerHeight );

３．レンダリングのループでVRControlsをアップデートし、通常のレンダリングをVREffectのレンダリングに置き換える

// VRControlsのアップデート
controls.update();
// renderer.render(scene,camera)と置き換え
effect.render(scene, camera);

４．Oculus Riftに表示させるために全画面表示する必要があるが、VREffect.setFullScreen(true)すればよい。vrというidのボタンを作成しておいて、ボタンがクリックされたときに画面表示をPCからOculus Riftに遷移させるときは以下のように記述する。

var vr = document.getElementById( 'vr' );
vr.addEventListener('click', function(){ effect.setFullScreen( true ) }, false);

※VREffectインスタンス作成と同じ場所にeffect.setFullScreen( true )を記述しても動作しなかった。

５．以上でOculus Riftで見られるようになるはずなのだが、家の環境ではVREffectで画面が均等に2分されない。この状態でOculus Riftで見てもオブジェクトがずれて見える。

VREffect.jsをみると、画面解像度の情報はOculus Riftから取得しているよう。このOculusRiftから取得している解像度の情報が正しくない。VREffect.jsにはこの情報が取得できていない場合の処理が記述されていて、この場合はThree.jsのrendererから取得するようになっている。常にThree.jsのrendererから解像度を取得するようにif文をコメントアウトしたら、均等に2分されるようになった。

// render left eye
if ( renderRectL === undefined ) { // この行をコメントアウト
renderRectL = { x: 0, y: 0, width: size.width / 2, height: size.height };
}　// この行をコメントアウト

※left eyeとright eyeの両方に対して行った。
※Oculus Riftのライブラリが更新されたためか、この問題が解消されていた（2016.12.20追記）

firefox nightyで開くと以下のようにように画面が２分割されて表示される。Oculus Riftが接続されていれば、ボタンを押すとOculus Riftで回転する立方体が見える。

Oculus RiftからPC画面表示へ戻るにはESCキーを押す。

• サンプルの表示