Google、WEBサイトに360°VR画像を埋め込み可能にするVR Viewを公開

2016.3.31
Google-Cardboard-2-640x360

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)

タグ: , ,

この記事が気に入ったらフォロー・購読をお願いします

最新情報をお届けします

レビュー >その他

原宿にGalaxy Studioがオープン。大掛かりな体感型VRも無料で体験可能

5月26日から7月3日までの期間限定で、原宿にオープンしたGalaxy Studio Tokyoに行ってきました。Galaxy Studioは昨年から各地で開催されていますが、今回はGalaxy S8/S8+とVR体験が ...

News >モバイル

NuAns NEO [Reloaded]がモバイルSuicaに正式対応を発表

ところで発売はいつ?5月発売はないかな・・・

MENU

back to top