RICOH THETA SC + WebVR

先月末に、プライベートなタレコミにより、近隣地域でVRツアーのコンテンツをWebサイトに掲載していることを知りました。 「ついにVRの波が身近なところまで来たか！」 と浮き足だったところで、自分もWebVR(VRコンテンツを埋め込んだWebサイト)を試してみたくなりました。 その方法を検索してみると、

1. 全天球カメラで撮影するなどし、画像コンテンツを用意
2. JavaScriptライブラリを使用して、画像コンテンツをVR対応する

といった手順が概ねの流れのようです。 VRChat内のスクリーンショットのようなVR空間の撮影ではなく、現実の風景をVRコンテンツとして用意するならば、上述のように360度カメラが必要になります。 例えば、Androidアプリの「パノラマ360」のような360度カメラアプリを使用すれば横方向の360度画像を撮影することはできるものの、上下が撮影できないため今回のケースでは没。 そこで、「RICOH THETA」という全方向360度撮影することに特化したカメラ(全天球カメラ)を購入しました。

箱はこんな感じ。

今回はミニスタンド(専用ではなく、汎用的なもの)もセットで購入しました。 これで本体ボタンを押したり、RICOH THETA(Android)またはRICOH THETA(iOS)というカメラ本体と同名の専用アプリを使用して遠隔シャッターで撮影することができます。 これを使って撮影した写真を、A-FrameというMozillaが開発しているWebVR用のフレームワークを使って組み込むと、比較的容易にWebVRページを作ることができるようです。 こうしてツールが増えるとできることも広がりますね。

余談

A-Frameについて検索すると、0.8.2の情報が大量に出てきます。 しかし、比較的最近(1ヶ月ほど前)にリリースされた0.9.0での記事は少なく、CDNで「latest」で読み込むと上手く動かない(a-animationタグが削除されているなど、仕様変更も見受けられる)ので、そこは注意が必要だと思います。

参考

• A-Frame – Make WebVR
• aframevr/aframe: web framework for building virtual reality experiences.
• A-FRAME で簡単 全天球画像 表示を試す – Qiita
• 新しいWebVRフレームワークA-Frame入門 – Qiita
• A-Frameをさわってみた – Qiita