世界的に注目度が高まってきたVR

2015年6月16日〜18日にロサンゼルスで開催された「E3 2015」(世界最大のゲーム関連の見本市)では、VRHMD対応のゲームが注目されていました。また、Googleが発表した「GoogleCardboard」は、スマートフォンをVRHMDにすることで、手軽にVR体験ができることが評価されて、カンヌライオンズ2015のモバイル部門でグランプリを受賞しました。

このように世界的に注目度が増しているVRですが、HTML5とOculusRiftの組み合わせでも再現することができます。

HTML5でOculusRift対応コンテンツを作ってみました

JS-RacingVR

あまり実装例がないので、サンプルを作ってみました。「JS-RacingVR」です。HTML5のWebGLを使ったVR3Dレースゲームです。レースゲーム自体は、HTML5JapanCup2014に出品した「JS-Racing」を再利用してVRHMD対応にしています。

※「JS-Racing」に関しての詳細はこちらからご覧頂けます。

体験方法

サンプルを見るだけなら、通常のモニタで見ることは出来ますが、VRを体験するには、OculusRiftを使う必要があります。これで仮想空間が目の前に広がる様子は体験できます。ですが、さらにVRで必要なことは、自分の向いた方向に合わせて、仮想空間の視界をあわせる必要があります。実際の視界と仮想空間の視界をシンクロさせることで、より現実味を帯びたVRを再現することができます。

実際の視界と仮想空間の視界をシンクロさせるためには、OculusRiftのトラッキング情報を取得し、コンテンツに反映させる必要があります。通常ブラウザからはデバイスに直接アクセスすることはできませんが、今回は「WebVR」という新しいAPIを使ってトラッキング情報を反映させています。WebVRは、VRHMDをブラウザで使用するためのJavaScriptAPIで、ブラウザベンダーで開発が進められていますが、開発段階ですので、現状リリースされているブラウザ(2015年6月時点)だとWebVRを利用することはできません。

GoogleChrome及びFireFoxでは、このWebVRが実装されている開発版が配布されています。

これらを利用して視聴いただくと、視野にトラッキング情報が反映されるようになります。

開発方法

「JS-RacingVR」は、JavaScriptの「three.js」というライブラリを使って実装しています。three.jsはWebGLを使った3Dコンテンツを作ることができるJavaScriptライブラリです。これでまず3Dレースゲームを作ります。3Dレースゲームの作り方については、今回のテーマから外れますので、気になる方はこちらをご覧頂ければと思います。

three.jsで作ったコンテンツを、three.jsの拡張モジュールを使ってVRHMD用のエフェクト(画面を左右に分割して魚眼投影)をかけて出力し、WebVRで取得したOculusRiftのトラッキング情報を視野に反映させることで、VRHMDに対応させることができます。詳細や実装したコードの説明に関しては、こちらをご覧頂ければと思います。

HTML5とVRの可能性

VRHMD(バーチャルリアリティに特化したヘッドマウントディスプレイ)の普及具合や、WebVR(VRHMDをブラウザで使用するためのJavaScriptAPI)が、まだブラウザには本実装されていないことを考えると、現状では、クライアントワークとしては時期尚早かもしれません。ですが、GoogleCardboardといった手軽なVRHMDの存在や、OculusRiftの製品版の発売などを考えると、VRHMDが今より身近になることは、間違いないのではと思います。そうなれば、VR対応の面白いコンテンツが増えてくるのではと思います。