福野泰介の一日一創 - create every day

VR panorama viewer for Oculus/THETA using A-Frame

2016/07/03
#vr #js #ruby #theta 

OculusでWebVRがうまくいったので、RICHO THETAで撮った全球写真(360度写真)&全球動画(360度動画)のビューワーをつくってみました。


カーソルの左右で写真または動画を送れます。臨場感抜群すぎて、酔ってしまうほど。


ハコスコなど、スマホでもそこそこ見られるかもしれませんが、ぜひOculusでも体感ください!

- 使い方 for Mac
THETAで撮った写真や動画をパソコンにいれる(動画はコンバートしておく)
panorama viewer packをダウンロードして同じディレクトリに置く
コンソールで「ruby makelist.rb > list.js」を実行(ファイルの生成順に並んだ list.js ができる)
Oculusをつなぐ(設定方法)
panoramaviewer.html を、FirefoxNightly で開く
VRモードに切り替える
カーソル左右でシーン切り替え(上で一番最初に戻る)

A-Frameのa-videoshere機能を使っただけで簡単にできました!
ファイル名変換用に初のRuby使用!
※Macに標準でランタイムが入っているため配布して使ってもらいやすい!?

print "var list = [" f = Dir.entries(".") f.sort! do |a, b| File.stat(a).mtime <=> File.stat(b).mtime end f.each do |name| if name.end_with?(".JPG") || name.end_with?(".jpg") || name.end_with?(".MP4") || name.end_with?(".mp4") p name print "," end end print "];"

RubyはIchigoJam BASICと同じインタプリタ型のプログラミング言語、こういうファイル操作などのプログラムをパパっとつくるのにいい感じです!

WebVR x Oculusで仮想体験する巨大jig.jpロゴ

2016/07/02
#vr #js 

Interopで知ったWebVR実験。巨大jig.jpロゴを体感してみました。

(ディスプレイでは全くつわたらない、VRで見る巨大jig.jpロゴ)

使ったもの
- MacBook Pro
- Oculus DK2
- Oculus Runtime for OS X
- Firefox Nightly
- Mozilla WebVR Plus 0.5.0
- A-Frame

デモ手順
- Oculus DK2 のUSBとHDMIをMacBook Proに接続(今回はディスプレイのみ使用)
- システム環境設定、ディスプレイで、Rift DK2の回転を90°、リフレッシュレートを60ヘルツに設定

(ウィンドウを集める、を使うといい)
- Firefox Nightly で、jigロゴBIGを開く
- 右下のVRボタンを押す
- 見渡して巨大ロゴを体感する(今は動けません、見渡せるだけです)

今回使ったのは、WebVRを簡単に使えるフレームワーク「A-Frame

<a-scene> <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere> <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box> <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene>

A-Frameのはじめのいっぽ(Hello World!)は、こんな感じ。タグをHTML内に書けば、WebVRで見渡せます。positionは、プラスで右にいくx、プラス方向で上にいくy、プラス方向で手前にくるzを指定。

ひとまず以前つくったWebGLでつくったjig.jpロゴ生成プログラムを流用して、A-Frame用のタグを生成して、つくったものが巨大ロゴデモです。
楽しい!

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / アイコン画像 / プロフィール画像