Three JS:CardboardEffect.jsを使ってVRコンテンツを作ってみた

      2016/03/09

人気WebGLライブラリのThree JSですが、バージョンアップ頻度が非常に早く2016年2月現在でr74となっております。r74では所々仕様が変わっており、新しいモジュールも増えています。色々と探っていたらeffectsフォルダにCardboardEffect.jsなるものを発見!!今回はこのCardboardEffect.jsを使って簡易的なVRコンテンツを作ってみようと思います。

今まではThree JSでのVRと言ったら、VREffect.jsStereoEffect.jsがThree JSに付属されていました。しかしVREffect.jsはOculus RiftなどのHMD(ヘッドマウントディスプレイ)用のトラッキングデータを取得する本格的なものですし、StereoEffect.jsはVRに最適化されていませんでした。CardboardEffect.jsに関しては詳しいことは分かりませんが、カードボードエフェクトと言うくらいですからGoogle Cardboardに最適化されているのでしょう。現状、スマートフォンで見ることが出来る簡易的なVRコンテンツライブラリの最適解と言えると思います。

各ライブラリを準備しよう

それでは早速Three JS公式サイトより一式ダウンロードします。ちなみに現状のバージョンはr74です。

Three js公式サイト

解凍したフォルダから使用するファイルは以下の5点です。適当に配置して読み込んでください。

ファイル名 場所 役割
three.min.js three.js/ build/ Three JSメインファイル
Detector.js three.js/ examples/js/ WebGL使用環境可否判別
CardboardEffect.js three.js/ examples/js/effects/ カードボード用エフェクト
DeviceOrientation Controls.js three.js/ examples/js/controls/ スマートフォン用コントローラー
OrbitControls.js three.js/ examples/js/controls/ PC用コントローラー

また、これから紹介するコードではjQueryも使用しておりますので用意してください。

CardboardEffect.jsの使い方

CardboardEffect.jsの使い方はとても簡単です。基本的に使うのは以下の3つのコードのみです。

このコードを通常のThree JS描画のコードに追加するだけで、自動的に画面分割・樽型エフェクト・視差効果などを付けてくれます。下の画像をクリックすると、このコードを追加したデモが表示されます。スマホの場合は色々と動かしてみてください。

cardboardeffect01
 

ソースコード紹介

それでは全体のソースコードを紹介します。通常の3D描画のコードに加え、影の設定とスマホ用のコントローラー処理をくわえております。

これまでのコードのサンプルを、下のリンク先で紹介しております。出来ればスマートフォンを横にして見て色々と動かしてみてください。カードボードを持っている方は使っていただければ立体的に見えるはずです。

まとめ

上記のコードですと、視差があまりなく立体感に乏しいかと思います。20行目のcamera.focalLengthの値を小さくすることにより視差が大きくなります。カメラレンズの焦点距離の関係なのですが、まだ私の知識が乏しくいまいち分かっていないので、これから試行錯誤していこうかと思います。こうした方が良いなどありましたらコメントいただければ幸いです。

 - JavaScript Tips, three.js ,