SONICJAM Developerz Blog

SONICJAM 開発部メンバーによる活動 blog

RICOH THETA S をつかったリアルタイム360°ビューワーをつくった話

こんにちは! 今回のブログは 研究開発部 泉田 と 開発部 長谷川 の共著でお送りします!

実は先日、RICOH THETA S という360°カメラを購入しました!

今回はこの THETA S を利用して、リアルタイム 360°ビューワーを制作した模様を解説したいと思います。

RICOH THETA S とは?

RICOH THETA S は RICOH社が製造販売している民生用360°カメラです。

https://theta360.com/ja/about/theta/s.html

特徴は何といってもデバイス両サイドについている大きなレンズ!方半球を撮影できるレンズを両サイドに1つずつ持つことによって全天球360°の撮影が可能となっています。

全天球写真の他、動画なども撮影できるスグレモノです。

また、THETA シリーズの3代目となる THETA S ではライブストリーミング機能が新たに追加されました!

このライブストリーミング機能が非常に画期的なのです!

THETA S のライブストリーミング

THETA S の本体下部には micro USB の端子穴がつています。

そこに USB ケーブルを挿し PC と接続することで、なんと USBカメラと同じように非常に簡単に THETA S の 360°リアルタイム映像を PC で使用することができるのです!

……ただし、問題点が1つ。

THETA S から出力されるリアルタイム映像は以下のようになっています。 image

つまり、両サイドのレンズで撮影された映像が「そのまま」出力されてしまっているのです。

このままでは以下のような 360°自由に閲覧できる動画として見ることができません。

そこで今回、THETA S を使って↑のような閲覧ができるリアルタイム360°ビューワーを、vvvv用と openFrameworks用それぞれ制作してみました!

vvvv 360°ビューワー

vvvv で 360°ビューワーを作るために必要な手順は以下のとおりです。

  1. ピクセルシェーダーで THETA S からの画像をパノラマ画像に変換する。

  2. パノラマ画像をつかって Cube Map する。

2 については vvvv の標準のノードに Cube Map 用のノードが用意されているので比較的簡単に実現できます。 したがって、今回は 1 の部分を主に作りました。

vvvv では HLSL で書いたシェーダーを vvvv のノードとして登録できる機能があります。なので、その機能を使ってピクセルシェーダーによるリアルタイム画像変換を実現してみました。

こんな感じで THETA S からの画像を

  • THETA S から読み込んできた変換前の状態

  • パノラマ状テクスチャへ変換した状態

  • それを元に Cube Map した状態

のそれぞれの状態で閲覧できるようにしてあります。

今回制作したノードの使用方法や詳しい技術解説については泉田の個人ブログの方に詳しく掲載してあるので、興味ある方は御覧ください。

THETA S x vvvv でリアルタイム360°ビューワーつくった話 | poipoiです。

openFrameworks 360°ビューワー

今回製作した openFrameworks のビューワーも、vvvvのビューワーと基本的には同じようなことをやっています。まずはTHETA S の画像をシェーダを通してパノラマ画像に変換します。

(こちらの動画は、openFramworks上でシェーダーによる変換の実行結果をキャプチャしたものです。)

そして、得られたパノラマ画像を球のオブジェクトの内側に貼り付け、球の内部が見えるように画面上に配置し、マウスによるインタラクションをつけて完成です。

(こちらはビューワーの実行結果をキャプチャしたものです。マウスでドラッグして向きを変更、マウススクロールで大きさを変更できます。)

今回製作したopenFrameworks製のビューワーの詳細は長谷川の個人ブログで解説しています。 (そこまで詳しくないですが。。)

Ricoh THETA S Real Time Stitching | dev.tkmh.me

締め

さて、そんなこんなで今回は vvvv と openFrameworks の両方で実装してみました。

どちらもインタラクティブなコンテンツを作る際には非常に扱いやすいプラットフォームですので、これでイベントなどの演出にも360°ストリーミングを取り入れることができるようになりました!

今回作ったものを利用して色々面白いコンテンツを作っていけたらと思います!

それでは、今回はこの辺で。

comments powered by Disqus