Google VR Viewで360°コンテンツをサイトに埋め込む

Google VR Viewで360°コンテンツをサイトに埋め込む

こんにちは、FF10以来久しぶりにFF新作を買ったムラタです。
発売される前も後も色々辛口な評価が目立ったFF15ですが、やってみると腐ってもFFですね、普通に楽しくてどっぷりはまってしまってます。

さて、今回は360°の写真や動画をwebサイトに取り込んでコンテンツとして活用する事例をご紹介したいと思います。

前回の全天球撮影についての記事もあわせてご覧ください。

全天球撮影を始めよう

Google VR View

サイト内に360°コンテンツを埋め込むにあたって、普通の写真のようにimgタグで張り付けただけでは当然360°グリグリ動かすような処理にはなりません。

01

このように何だか引き伸ばされたような画像が張り付けられるだけです。

360°コンテンツとしてサイトに埋め込むにはWebGLと呼ばれるweb上で3次元グラフィックス(3Dコンテンツ)を表示させるための技術を用いる必要があります。

webGLを実装するにあたって「three.js」のような構築をサポートしてくれるライブラリも存在しますが、自分のようなちょっとjavascriptscriptをかじった程度のポンコツが実装しようとするにはまだまだハードルが高すぎるのが現実です。

そこで助けてくれるのが「Google VR View」です。
いつものGoogle大先生です。

このGoogle VR Viewを使うことで数行のコードを追加するだけで簡単にサイト内に360°コンテンツを実装することができます。

対応ブラウザ

当然どのブラウザでも実装可能というわけではないので要注意です。

  • 最新VerのChromeとOpera(Windows、macOS、Linux、Android、iOS)
  • 最新VerのSafari(macOS、iOS)
  • 最新VerのFirefox(Windows、macOS、Linux)
  • 最新VerのIE11とEdge(Widnows)

iOSは8以上、Androidは4.4(Kit Kat)以上であればなにも問題なさそうです。

サポートフォーマット

360°画像と動画をサポートしており、それぞれモノスコープとステレオスコープにも対応しています。

モノ」と「ステレオ」についてですが、
モノは単一の360°写真や動画を閲覧するもので、ステレオは2つの写真や動画を並べて表示することでGoogleCardBoardなどのヘッドセットで閲覧すると立体視によるVRが可能になります。

画像

360°画像のフォーマット

  • png、jpg、gifのいずれか。できればjpgが望ましい。
  • サイズ比はモノの場合は2:1(例:2048×1024)で、ステレオの場合は1:1(例:4096×4096)推奨。

360°動画のフォーマット

  • 動画形式はh264エンコードしたmp4形式。
  • アスペクト比は画像と同じくモノは2:1、ステレオは1:1推奨。
  • 古いデバイスの中には1080p(1920×1080)を超える動画をデコードできないものがあるので、最大限の互換性と品質を優先する場合は、1920×1080のモノ動画と2048×2048以上のステレオ動画の両方を提供することをお勧めする。

360°コンテンツの用意

今回撮影については詳しく触れませんが、Googleが紹介している撮影するためのデバイスは下記の2つです。

Cardboard Camera

Googleが提供する360°写真を撮影・鑑賞できるアプリになります。
ガイドに沿ってぐるっと一周撮るだけで自動で360°写真を生成してくれるのでスマホさえあれば今すぐにでも始められるのが嬉しいですね。

Richo Theta

はい、いつものやつです。パノラマ撮影専用カメラの中では比較的安価で簡単手軽に360°撮影が可能になるアイテムです。
ちなみに最近「Theta S」より1万円くらい安くなった廉価版の「Theta SC」も出ました。

実装

それでは実際にサイトに埋め込んでいきましょう。

iframeで埋め込む

ただ埋め込むだけであれば非常に簡単です。
下記のiframeのコードを埋め込むだけでできてしまいます。

googleが提供しているファイルに対してパラメータで360°コンテンツのパスを指定するだけなので、こちらは写真もしくは動画を用意するだけで済みます。
写真(動画)パスのパラメーター以外にも様々なパラメーターを指定することができますが、それは後程説明します。

この方法だと手っ取り早くて楽ですが、この場合サーバーがクロスドメインを許可している場合に限ります。
クロスドメイン制約は簡単に言えば今現在見ているページのドメインと異なるドメインからのAjax通信を制限するというものです。

これを回避するにはhtaccessファイルに「Access Control Allow Origin」の設定を行う必要があります。

これでどのドメインからもAjax通信を許可できますが、さすがにどんなサイトからでもっていうのは不安ですよね。
そういう時は特定のドメインだけ指定してあげましょう。

これで「http://xxxx.jp」のドメインのみ通信を許可するようになりました。

自身のサーバーで出力する場合

htaccessが触れるサーバーじゃない、もしくは知識もないし下手にファイルを触りたくないという場合は自分のサーバーに必要なファイルをアップすることでも出力可能です。

まずGoogleのVR View Githubよりzipファイルをダウンロードしてきます。

01

zipファイルのダウンロードが完了したら展開して、中身のファイルをすべて自分のサーバーの適当なディレクトリにアップします。
また、VR Viewを出力させるためのhtmlファイルも別途用意します。

例として下記のファイル構成とします。

02

あとは先ほどと一緒です。
「vrview/index.html」内に「source/index.html」をiframeで読み込んで画像(動画)をパラメーターで渡します。

ちなみに画像のパスは相対ではなく絶対パスで渡してください。

javascriptで出力

iframeではなくjavascriptで出力させる場合は、まず「source/build」より「vrview.js」を読み込んできます。

次にVR Viewを出力させるための囲みを用意します。

そして、こうです

結果は次の通りです。

どうでしょうか、PCならクリックしてドラッグすることで視点を360°ぐりぐり動かせると思います。
スマホの場合は画面をスワイプするかスマホ本体を傾けるだけで連動して画面の視点も変更されるはずです。

パラメーター

VR Viewには以下のパラメーターが用意されています。

  • video
    360°動画ファイルへのパスを指定する。「image」と「video」のどちらかは必ず指定する必要があります。
  • image
    360°画像ファイルへのパスを指定する。
  • width
    出力されるiframeの幅を指定します。
  • height
    出力されるiframeの高さを指定します。
  • preview
    360°画像(動画)が読み込まれるまで表示させる画像ファイルのパスを指定します。
  • is_stereo
    読み込む360°画像(動画)をステレオモードで読み込むかどうかを指定します。
  • is_debug
    trueを指定した場合、デバッグモードとなり画面左下にFPSメーターなどの表示が出力される。
    03
  • is_vr_off
    trueを指定した場合、画面からVRモードボタンを非表示にします。(スマホのみ)
    04
  • is_autopan_off
    trueを指定した場合、360°画像(動画)が読み込まれた際の左から右へカメラをパンする動きを停止する。(PCのみ)
    ※違う意味合いがあるかもしれないですが未確認です。
  • default_yaw
    デフォルトのカメラの向きを数値で指定します。
    05
  • is_yaw_only
    trueを指定した場合、ロールとピッチを防止します。ステレオモードのみ有効。とGoogleのガイドにはありますが、ちょっとよく分からなかったです。
    とりあえずスマホの際にカメラの向きが横方向にだけ固定されていました。(上や下を向けない)

VR Viewイベント

基本的な使い方は以上です、ここからはさらにプラスアルファの処理を行っていきましょう。

VR Viewは下記の4種類のイベントがあります。

  • ready
    VR Viewの出力の準備ができたタイミング。
  • error
    360°コンテンツのロードに失敗したタイミング。
  • click
    クリックしたタイミング(スマホではタップ、VRモードでは注視した場合)
  • modechange
    VRモードもしくはフルスクリーンモードに移行したタイミング。

例えばこのような感じ

ホットスポット

VR Viewでは「ホットスポット」と呼ばれる円形状の領域を生成して任意の位置に配置することができます。

ホットスポットはクリックやタップすることができ、VRモードでは注視した状態で任意の場所をタップすることでアクティブになります。

またホットスポットは追加する際に、サイズや不透明度、位置やIDなどを指定することができます。

  • pitch
    ホットスポットの高さ位置を指定します。
    06
  • yaw
    ホットスポットの横位置を指定します。
    07
  • redius
    ホットスポットの半径サイズを指定します。
    08
  • distance
    カメラからホットスポットまでの距離を指定します。
    09

この辺の設定は都度画面で確認しないと全く分からないので調整が面倒ですが、仕方ないですね・・・

これらのパラメータをまとめて書くとこのようになります。

これでホットスポットの設置は完了です。
次はこのホットスポットにクリックイベントを設定してみましょう。

まずVR Viewイベントにクリックイベントを登録します。
先ほどの「ready」イベントの下に「click」を追加します。

仮に「spot1」というID名のホットスポットをクリックした際にアラートを表示させるには下記のようになります。

いかがでしょうか?
ちなみにホットスポットは1つだけでなく複数個設置もできます。

複数のホットスポットと360°写真を組み合わせることで簡易的なオリジナルのGoogleストリートビューを作り出すことも可能です。

最後に

いかがだったでしょうか。
今まではパノラマ撮影しても個人的に楽しむだけでしたが、今後はwebサイトのコンテンツとしての可能性も出てきたのではないでしょうか。

それではまた新しいVRネタがあればお会いしましょう。

同じカテゴリー(WEB制作・デザイン)の記事