Google VR viewを利用して360度画像を埋め込む

2016年がVR元年と言われて早1年半以上が経ちました・・・。
2016年の1月にPC向けVRゴーグルの「Oculus Rift」のプレオーダーが開始され、3月末から「Oculus Rift」発売(初回出荷)が始まり、VR用デバイスが身近になる第一歩を踏み出しました。その後「HTC Vive」や「PlayStation VR」といったハイエンドVRHMD(ヘッドマウントディスプレイ)が発売され、どんどんとハードウェアが出てきています。
まだまだ一般化したとは言えない状況ですが、今後はVR(仮想現実)やAR(拡張現実)、またMR(複合現実)やSR(代替現実)といった方向が加速することは容易に想像できます。

VR(仮想現実:Virtual Reality:バーチャルリアリティ)
AR(拡張現実:Augmented Reality:オーグメンテッドリアリティ)
MR(複合現実:Mixed Reality:ミックスドリアリティ)
SR(代替現実:Substitutional Reality:sa:サブストゥショナルリアリティ)

そんな中で表題に話しを戻しますと、今回web上360度画像や動画を埋め込むための方法をご紹介したいと思います。
360度の画像はFacebookとInstagramの人気SNSも対応しており。かなり身近に感じることができるようになりました。
また、360度の全天球カメラと言えば・・・「RICOH THETA」が有名だと思いますが、その「THETA」の新製品が9月30日に発売予定となりました。
今後ますます360度の画像が増えてくる状況の中でwebサイトに手っ取り早く360度画像(動画)を埋め込みたいと思います。

どんな感じなるかはとりあえず下記のデモをご確認下さい。
デモはこちら

では、早速始めていきたいと思います。
まずはgoogleさんのサイトを確認していきましょう。

Google VR View for the Web Documentation

このサイトに沿って進めていきたいと思います。
3ステップで完了です。

英語は苦手な人はgoogle chromeの翻訳機能を使ってみてください。
ページ上で右クリックを押すとウィンドウが出てきて、その中の項目に「日本語に翻訳(T)」と書かれた部分があるのでそこをクリックするとオッケーです。

ではDocumentationに沿ってまずは下記のコードをHTMLの中に埋め込みます。

ステップ1

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

ステップ2
次に画像を表示したい箇所に下記のコードを入力。
divタグの中に文字などは入れなくて大丈夫です。

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

ステップ3
最後に下記のscriptを読み込ませておげれば完了です。

<script>
  window.addEventListener('load', onVrViewLoad)
  function onVrViewLoad() {
    var vrView = new VRView.Player('#vrview', {
      width: '100%',//横幅の指定
      height: 300,//高さの指定
      image: '任意の画像のパスを指定',
      is_stereo: true //stereo画像を指定の場合はこれを指定。Monoの場合は不要
    });
  }
</script>

以上の3ステップで完了です。

Google VR viewに対応しているフォーマットは下記のページでご確認下さい。
対応フォーマットの確認はこちら

MonoとStereoの指定を間違わないように気をつけて下さい。
defaultはMonoが指定されています。Stereoを利用する際にはis_stereo: trueを忘ないで下さい。

上記方法でエラーが出る場合は下記2点が間違っている可能性があります。
1.パスの設定が間違っている。
2.画像形式が対応していないフォーマットになっている。
  またサイズが規格に合っていない。(※画像が小さい。アスペクト比が間違っている。等々)

また上記を見直してもエラーが出る場合は
サーバーがクロスドメインを許可していない可能性があるので
その場合は自身のサーバーで出力してあげて下さい。

GoogleのVR View Githubよりzipファイルをダウンロードすることができます。
ダウンロード先はこちら

上記サイトにアクセスしたら右側にある緑色のボタンで『Clone or download』と書かれたボタンがあるので
そこから「Download ZIP」を選択するとダウンロードすることができます。

ファイルがダウンロードできたら、解凍してサーバーの任意の場所に保存して下さい。
そしてステップ1で指定したvrview.min.jsへのパスを変更したらオッケーです。

以上で完了になります。

※360度動画も埋め込む事は可能ですが、容量が大きくなるので読み込みに時間がかかる場合があります。

top