はじめに
今回はVRモードの表示方法について調査した結果を記載します。
VRモードとは、専用器具を付けて両眼で立体視を可能にし、首振りに追従して視点を変更したりする表示を指します。
近年では、ゲーム機としてPlaystation VRが有名ですし、都心の家電量販店に行けばVRゴーグルというスマートフォンを中に入れて使う器具は、2000円程度で買えるようになりました。
先行事例
日本語の資料としては、FireFoxのWebVR拡張機能を用いたものが紹介されています。
- [Cesium + Firefox の VR モード] (https://www.kunihikokaneko.com/dblab/3dmap/cesiumvr.html) 福山大学金子邦彦研究室
上記の方法を試そうとしたのですが、最新のFireFox（57.0.1）ではWebVRは特別のプラグインを入れずにもWebVRを体験できるようです。
githubに公開されているCesiumのVRプラグインのデモサイトをFireFoxで閲覧しても動作しない状況です。
Cesium VRモード対応
Cesiumでは、バージョン1.18(2016年2月1日)からVRモードに対応しているようです。
https://cesium.com/blog/2016/02/01/cesium-version-1.18-released/
［原文］
Added VRButton which is a simple, single-button widget that toggles VR mode. Cardboard for mobile is supported. More VR devices will be supported when the WebVR API is more stable.
[ Google 翻訳 ]
VRモードをトグルするシンプルなシングルボタンウィジェットであるVRButtonが追加されました。モバイル用の段ボールがサポートされています。 WebVR APIがより安定していると、より多くのVRデバイスがサポートされます。
VRBottunの設置
Cesiumのビューワ初期化時に、VRBottunを有効にするだけで、地図の右下にVRボタンを設置することが出来ます。
var viewer = new Cesium.Viewer('cesiumContainer', {
vrButton : true //VRボタン有効化
});
サンプルコード
http://jsdo.it/tkama/UWYD
サンプルコードを掲載したサイトでは、スマートフォン表示モードがありまして、ボタンを見つけることが出来ます。
赤枠のボタンがVRBottonです！
VRモード表示例
表示動作
手元にあるAndroid端末で動作確認した所、Chrome、FireFoxどちらでも表示に対応しているようです。
| ブラウザ | VR表示 | 首振りによる視点変化 |
|---|---|---|
| Chrome | ◯ | ◯ |
| FireFox | ◯ | ◯ |
視点変更はスマホを動かくだけで実現するのですが、拡大・縮小は何らかの入力が必要になりますので、マウス等の入力インターフェースがあると便利だと思います。
終わりに
現在のCesiumではVRモードに対応しているため、簡単に実現することができました。心残りは、Oculus RiftのようなPCを接続した専用端末での表示や、PSVRでの表示が未検証であることです。
ご興味がある方は、挑戦してみて下さい！