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で遊んだり、趣味で開発したり。