A-Frameを使ってWEBで簡単にVRを実装する

#はじめに
こんにちは、うっちーです。
この記事はLife is Tech! Tokai Mentors Advent Calendar 201810日目の記事です。映像をメインに担当させていただいてますが、以前利用したことがあるWebVRについて書かせていただきます！

最近はRICOH THETAやinsta360など３６０°の画像や映像を撮影することが容易になってきました。今回はその画像をWebで使うことを目的にWebVRのフレームワークであるA-Frameを触っていきたいと思います。

WebVRとは

WebでVRを表示する技術です。
スマートフォンやPCからはブラウザ内でVR空間を開くことができますし、対応HMD(ヘッドマウントディスプレイ、OculusとかViveとか)で見れば通常のVRのように表示されます。

今回の目的

今回は簡単にWebVRを表示できるA-Frameというフレームワークの紹介と実際にA-Frameを利用してVR画像及び動画の配置を行ってみます。

サンプル的なもの

以前自分が製作したものを置いておきます。
手軽に宇宙VR体験！ | 360VR NAFT

画像、動画を置いてみる

VRに使う画像はエクイレクタングラー(equirectangular, 正距円筒図法)形式である必要があります。
撮影したものがない場合はFlickrで探すといいと思います。
Search: equirectangular | Flickr

A-Frameの読み込み

htmlのhead内にて以下を記述します。

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

もちろん、ローカルに保存して読み込んでも可能です。

画像を配置する

body内に以下のコードを記述します

<a-scene>
  <a-assets>
    <img src="path/to/image" id="background" />
  <a-assets>
  <a-sky src="#background"></a-sky>
</a-scene>

<a-assets>内のものはレンダリングされないので、imageタグのidをa-skyタグのsrcで指定することで画像をレンダリングします。
これだけで画像をVRで見ることができるようになります！とっても簡単！

動画を配置する

画像を配置したときと同じように<a-assets>で動画を読み込みますが、レンダリングさせるタグが<a-videosphere>になります。

<a-scene>
  <a-assets>
    <video src="back_v.mp4" id="back_v" loop="ture"></video>
  <a-assets>
  <a-videosphere src='#back_v'></a-videosphere>
</a-scene>

本当に簡単！！

まとめ

今回は本当に簡単な画像や動画を表示させるものでしたが、A-Frameを使えばさらに凝ったWebVRのページを作ることもできます！
ぜひ使ってみてください！
A-Frame