January 27, 2016

Theta 360° Photo Viewer for AltspaceVR

altvr_avatar

Nowadays, 360-degree camera has become a topic in some gadget websites.
Especially Ricoh Theta S, latest model of Theta series,
realized good resolution 360° pictures and long time movies easily.
It’s used for Virtual Reality Content with HMD.

I released Theta Photo Viewer
to see 360-degree photo at VR Space with other users.
I used an existing “AltSpaceVR” for the space.
AltspaceVR is available not only for HMD, but for usual PC display.
In the AltSpaceVR, User is able to execute their created web application.
So, I implemented the viewer as the web app.

I also used Twitter as a common photo server.


最近、手軽に360°画像が撮れるThetaが一部の人たちの間で人気だ。
特に年末に発売されたTheta Sは、従来機種に比べて
高解像度・長時間動画録画可能とスペックアップしている。
またOculus等のHMDを使ったVRとの相性も良い。

そこで、Thetaで撮影された画像でVR空間をつくり、
その中にみんなで入って画像を見れるようにしてみた。
VRについては、既存のAltspaceVRというサービスを使った。
AltspaceVRはHMDだけでなく、普通のPCディスプレイでもVR空間を楽しむことができる。
このサービスではVR空間内で、ユーザーが自分で作ったWeb Appを実行可能だ。
そこで今回のPhoto Viewerを、AltspaceVRに対応したWeb Appとして実装した。

またThetaの画像の投稿先に、Twitterを利用した。

It’s easy to use.
Tweet your 360-degree photo with #alt360 tag at first.

使い方はかんたん。
まず表示したい画像を、#alt360とtagをつけてtweetする。


Next, open AltspaceVR, and choose SPACES Button(2) in the menu(1).
When the SPACES list is appeared, select the SDK Presentation Space(3).

次にAltspaceVRを起動し、①Menuから②SPACESボタンを選択。③SDK Presentation Spaceへ移動。

Choose APPS button(2) in the menu(1) at the SDK Presentation Space,
and put
http://alt360.herokuapp.com
in the URL feed(3).
Don’t forget to add “http://”in the form.
When filling out it, push the return key.

After that, select the App sharing button(4).
Then, the tweeted 360-degree photo will appear in the skydome.
Finally, we can share the photos with the other users in the VR Space.

SDK Presentation Spaceに移動したら、①Menuから②APPSボタンを選択。③URL入力欄に
http://alt360.herokuapp.com
と入力し、リターン。http://の部分を入力するのを忘れないこと。

④アプリ共有ボタンを押すと、360画像が空に表示され、同じVR Spaceにいる人と画像を共有できる。

How-to-work

I implemented the service using Node.js and Three.js on Heroku PaaS.
1. Searching and poling tweets with #alt360 tag via Twitter API.*
2. Caching up to 5 tweets and the photos, on Heroku server.
3. When It’s called “http://alt360.herokuapp.com” from AltspaceVR,
send obj/mtl data of the Skydome and the photos.

*searching in recent one week tweets. It’s limitation of Twitter API.

しくみ

Heroku(PaaS)にて、 Node.jsとThree.jsを使って実装。

1.twitterのAPIをつかって、#alt360とtagのついた画像を検索/ポーリング。*
2.みつけた画像のうち最大5枚の画像とtweet情報をサーバにキャッシュ。
3.AltspaceVRから”http://alt360.herokuapp.com”がよばれたら、
Theta画像をはりつけるSkydomeのobj/mtlデータと画像を送信。

*Twitter APIの制限により、最近の一週間までのtweetから検索される。

Conclusion.

This implementation is just for an experiment. But if HMD, like Oculus or PlayStation VR,
becomes widespread, such as the 360° media sharing way may become popular.
If you have 360° Camera and your twitter account, let’s try this viewer and the experience.

さいごに。

今回は実験として実装してみた。しかしもしOculusやPlayStation VRのようなHMDが普及したら、
こういうVRを使った360°メディア共有は、一般的になったりするかもね?
もし360°カメラとTwitterアカウントを持ってたら、ぜひこのViewerを体験してみて。