Googleが簡単にVRを楽しめるよう、WEBサイトに360°VR映像を埋め込める VR Viewというツールをリリースしました。これを使うとWEBサイトやアプリなどに簡単に360°VR画像や動画を埋め込むことが可能です。
WEBサイトでのVR Viewの使い方
アプリへの埋め込みについては門外漢なので、ここではWEBサイトへの埋め込み方法を紹介します。
埋め込むコード
埋め込むコードは下記のような<iframe>タグです。
<iframe width="100%" allowfullscreen frameborder="0" src="//storage.googleapis.com/vrview/index.html?image=//photovrse.com/examples/coral.jpg&is_stereo=true"></iframe>上記のコードを埋め込むと下のように表示されます。
まずiframeタグのオプションですが、これはこのままでいいと思います。
frameborder="0":ボーダーを表示しないwidth="100%": フレームサイズを横幅いっぱいにする。allowfullscreen: フルスクリーン表示の許可
本番はその先に続く「src="～"」部分です。
最初の「//storage.googleapis.com/vrview/index.html」はVR Viewのスクリプト本体です。自身のサイトにホストすることもできますが、このままGoogleのものを利用することも可能です。それに続くパラメータは下記のようになっています。
image:{文字列} 360°画像や動画のURLです（必須）is_stereo: {Boolean} 画像や動画がステレオフォーマットであればtrueにします。デフォルトはfalseです。preview: {文字列} 実際の画像や動画とは別に最初に表示されるプレビュー用の画像があれば指定します。デフォルトはnoneです。start_yaw: {数値} 最初に表示される角度。デフォルトは0です。is_yaw_only: {Boolean} trueにすると表示が左右方向にみに制限されます。デフォルトはfalseです。
Richo THETAやCardboardカメラで撮影した画像が利用可能
気軽に360°画像を埋め込めるようになったとはいえ、そんなものを気軽に撮影する方法はなかったりもするのですが、一般的なパノラマ画像も埋め込んで再生が可能だそうです。公式には、
で撮影した画像が使えるということです。
下記は試しにCardboardカメラで撮影したもの。先の例は画像もGoogleのものでしたが、下記はVR View本体と画像をこのブログ上に置いています。
一応見れるけど、なんか違う気がします。設定間違えてるのかな？これは追々調べてみます。
そんな感じでVR Viewが使えるようになったので、Thetaが欲しくなってきたなぁ。
(source Google)
