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

余談

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

参考

この記事を書いた人

アバター

アルム=バンド

フルスタックエンジニアっぽい何か。LAMPやNodeからWP、gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。