Google VR Viewで360度コンテンツを表示する方法

最近、360度の画像や動画を取り入れているサイトを多く見かけるようになりましたね。

今回はGoogle VR Viewを使って
360度コンテンツを表示させてみました。

360度コンテンツに対応したカメラであれば、
専用のアプリでwebサイトに表示させることはできますが、
ロゴが入っていたり、カスタマイズの自由度が低い、なんてことも。

Google VR Viewを使えば、
ロゴも入らず、カスタマイズの自由度も高い！
しかも、簡単にwebサイトに360度コンテンツを入れることが出来ちゃいます。

デモページはこちらから。

360度コンテンツを表示させるには、3つの方法があります。
公式サイトに沿って、1つずつ試してみました。

#その1：Google VR Viewのscriptを使って表示する

VR Viewを使うためには、
VR Viewスクリプトを記述します。

<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>

次に、VRコンテンツを表示させたい箇所にidを振ります。

<div id="vrview"></div>

scriptを記述します。

<script>
  window.addEventListener('load', onVrViewLoad)
  function onVrViewLoad() {
    var vrView = new VRView.Player('#vrview', {
      image: './img/tyopress.jpg', //画像を埋め込みたい場合。値にパスを指定。
      width: '100%', //コンテンツの幅を指定。
      height: '100%', //コンテンツの高さを指定。
    });
  }
</script>

VR Viewが読み込まれるとiframeのclassが置き換えられ、
インスタンスが登録されます。

#その2：iframeを使って表示する

<iframe src="//storage.googleapis.com/vrview/2.0/embed?image=./img/tyopress.jpg&is_stereo=true"></iframe>

ただし、画像はクロスドメイン不可なので、
サーバーによっては注意が必要です。

#その3：サーバーにVR Viewコードをホストして表示する

サーバーの制限があって画像が使えない、という場合は、
GitHubからデータをダウンロードしたものをサーバーにアップすれば大丈夫。

scriptでパスを指定するだけで、
すぐに使えるようになります！

また、公式サイトには以下のようなコメントが書いてあります。

We recommend that users host the VR View code on their own server. Hosting the code yourself avoids several known issues with browsers (see below). To facilitate this, we have released all of the open source code for VR view on the web via GitHub.

360° images will have incorrect orientation in iOS Safari if you explicitly declare your iframe (instead of using the JavaScript API) and the code and images are hosted on different servers.
360° videos do not work in OSX Safari if the media and the VR view code are hosted on different servers.
Images that are not power-of-two and square may not display correctly in Chrome and Safari iOS 8.

サーバーにホストして使うことで、以下の問題が回避されます。

・JavaScript APIを使用する代わりにiframeを明示的に宣言し、コードと画像が別のサーバーでホストされていると、360°画像の向きがiOS Safariで正しく表示されなくなります。
・メディアとVRビューコードが別のサーバーでホストされている場合、OSX Safariでは360°ビデオは機能しません。
・ChromeおよびSafari iOS 8では、2のべき乗ではない画像や正方形が正しく表示されないことがあります。

Google VR Viewのscriptを使う方法とiframeを使う方法では、
まだまだ完全な表示が出来ない様子。
今のところは、サーバーにホストして使うのが良さそうです。

まずは、新しいVR Viewインスタンスを登録するためにidを指定します。

<script>
  var vrView = new VRView.Player('#vrview', {
    image: './img/tyopress.jpg', //画像を埋め込みたい場合。値にパスを指定。
    width: '100%', //コンテンツの幅を指定。
    height: '100%', //コンテンツの高さを指定。
  });
</script>

あとは、使いたい箇所に同じidを指定するだけです。

<div id="vrview"></div>

これでWebサイトに360度コンテンツを表示出来ましたね！

##動画を表示する

パラメータを変更して、動画を表示することも出来ます。

デモページはこちらから。
*PCはもちろん、スマホにも対応しています。
対応ブラウザは公式サイトで確認出来ます。
くるくる走り回る私と追いかけっこをお楽しみ下さい。笑

動画の表示は、imageで画像のパスを指定していた箇所を
videoに変更するだけです。

var vrView_movie = new VRView.Player('#vrview_movie', {
  video: './img/tyopress.mp4', //imageで画像、videoで動画を表示。
  width: '100%',
  height: '100%',
});

##パラメータを設定する

Google VR Viewには、
コンテンツ表示に必要なパラメータの他に、
任意で指定出来るパラメータがいくつか用意されています。

例えば、コンテンツ画像がロードされるまでに表示される画像を指定したり、
コンテンツの角度を指定したりすることが出来ます。

####preview: 文字列
コンテンツ画像がロードされるまでに表示される画像。（任意）

####is_stereo: ブーリアン型
モノスコープか、ステレオスコープかの設定。(任意)
defaultは、false。

####is_debug: ブーリアン型
trueで画面左下にftpメーターが表示される。(任意)
defaultは、false。

####is_vr_off: ブーリアン型
trueの場合、VRモードボタンを無効にする。(任意)
defaultは、false。
スマホのみ。

####is_autopan_off: ブーリアン型
falseの場合、左から右へシーンの切り替えが行われる。（任意）
defaultはfalse。

####default_yaw: 数値
コンテンツの角度。(任意)
defaultは画像中央。

####is_yaw_only: ブーリアン型
tureの場合、ロールとピッチを防止する。（任意）
defaultはtrue。
スマホで上下に動かした際の動きを無効にすることが出来ます。

他にも、ホットスポットやイベントなどを追加することが出来るので、
色々試してみたいですね！

Google VR Viewで360度コンテンツにHotspotを追加する方法はこちらから。