LogoMark.png

WebVR の変更点


#author("2021-05-20T15:15:08+09:00;2019-07-05T20:51:24+09:00","default:inoue.ko","inoue.ko")
*WebVR API
https://developer.mozilla.org/ja/docs/Web/API/WebVR_API
~

&color(red){この仕様は非推奨となりました。};
~

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

ここでは、Googleの開発しているVRコンテンツ埋め込みツール、[[VR View>https://developers.google.com/vr/develop/web/vrview-web]]を事例にサンプルを紹介します。VR View には以下2つの実装方法があります。
- 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>

~
~