WebVR

WebVR API

https://developer.mozilla.org/ja/docs/Web/API/WebVR_API

この仕様は非推奨となりました。

WebVR APIは、MozillaとW3Cが共同で仕様の策定を進めているもので、FirefoxやChromeなどの主要なWebブラウザーに実装されています。Webブラウザー上でVR（バーチャル・リアリティ）の体験ができます。

ここでは、Googleの開発しているVRコンテンツ埋め込みツール、VR Viewを事例にサンプルを紹介します。VR View には以下２つの実装方法があります。

• iframe で実装
• JavaScript で実装

なお、素材の静止画・動画は、以下のようなサイトで入手可能です。
http://www.motionelements.com/ja/vr
データの形式は、静止画であれば jpeg、動画であれば mp4 です。

VR Sample

iframe による実装

以下のような記述で簡単に実装できます。

<iframe src="https://storage.googleapis.com/vrview/2.0/embed?video=/url/to/video.mp4&is_stereo=true">
</iframe>

JavaScript による実装

• Googleが提供する vrview.min.js をインクルードします。

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

• VR-View を表示するための要素を確保します。

  <div id='vrview'></div>

• イベントリスナーを設置します。

  <script>
  window.addEventListener('load', onVrViewLoad);
  function onVrViewLoad() {
    var vrView = new VRView.Player('#vrview', {
      video: '/url/to/video.mp4',　←　ここにVR動画のアドレス
      is_stereo: true
    });
  }
  </script>