GIS
VR
Cesium
CesiumDay 16

CesiumのVRモード

はじめに

今回はVRモードの表示方法について調査した結果を記載します。

vr_game_mother.png

 VRモードとは、専用器具を付けて両眼で立体視を可能にし、首振りに追従して視点を変更したりする表示を指します。
 近年では、ゲーム機としてPlaystation VRが有名ですし、都心の家電量販店に行けばVRゴーグルというスマートフォンを中に入れて使う器具は、2000円程度で買えるようになりました。

先行事例

 日本語の資料としては、FireFoxのWebVR拡張機能を用いたものが紹介されています。

上記の方法を試そうとしたのですが、最新のFireFox(57.0.1)ではWebVRは特別のプラグインを入れずにもWebVRを体験できるようです。

githubに公開されているCesiumのVRプラグインのデモサイトをFireFoxで閲覧しても動作しない状況です。

スクリーンショット 2017-12-16 17.58.58.png

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での表示が未検証であることです。

ご興味がある方は、挑戦してみて下さい!