#銀座VR に WebVR で行けるようにしてみた

5月に発売されたスタンドアローン(ひも無し) VR ヘッドセットの Oculus Go が想像通りの良いものだったので、会社で100人くらいにかぶせて回ったり、Unity や WebVR でなんかちょこちょこ作ってみたりということを最近している。

7/7 に銀座VR という、VR で作ったものを持ち寄るイベントがあるって直前で気づく。
銀座SIXでマーロウのプリンを買って帰ると言ったら簡単に参加許可が下りたので、のこのこ出かけてきた。


一体型VR限定イベント、つまり発売されたばかりの Oculus Go と Mirage Solo がメインターゲットということで時間が足りなかったか、未完成とかコンセプト重視な展示が中心だったかな。
一体型VRの最大のメリットでもある「持ち寄りやすさ」を活かすような展示があって、みんなが自分の Oculus Go を首から下げて歩いている……というの期待しちゃったりして、一応自分の Oculus Go を持ち込んだりもしてたのだが、カバンから出す機会もついぞなかった。無念。
そう思うなら自分で作れということだな。


こういうイベントは見るだけより自分も展示側で参加するほうが絶対に楽しいしんで、次があれば考えたいかも。
今回は間に合うわけもなかったけど、とりあえず Richo THETA で 360度写真を何枚か撮ったので、それをバーチャルツアー的に見せる VR コンテンツを作ってみた。
VR ヘッドセットで見るのが前提(Oculus Go で動作確認、他のヘッドセットでも動くことを期待するコードを書いたつもり)だが、PC や iPad でも見れる。


ブラウザでリンクを開くと、VR ヘッドセットの場合はブラウザ右下のゴーグルをクリックすると VR モードになり、会場の360度写真の中に入る。
自分の下を見ると会場マップがあるので、緑のマーカーをコントローラーで選択すると、その位置に移動する(写真が切り替わる)。

PCの場合は画面をドラッグすると視線の向きを変えられる。同様に下の方にマップがあるので、クリックで移動する。

iPad は、本体を掲げてぐるぐる周りを見ると、その向きの写真が表示される。移動は下向けてマップをタップ。


360度写真を見る&地図をポイントして移動するだけ。
VR コンテンツとしては簡素すぎるが、これでも十分雰囲気を味わえる。
各展示が再生できたり、出展者の Oculus Rooms の入口があったりしたら、ほんとに現地に行かなくても済むようになるかもw


マップを下においたのは思いつきといくつかの事情からの苦肉の策で、正直操作はしにくい。
でもマップと写真の向きがあっていることで、会場がどんな場所かすごく想像しやすくなっている……と思ったのだがどうだろう(身贔屓?)。


こういった VR コンテンツを作るなら、選択肢としては

のどっちか。

Unity は導入と配布のハードルがかなり高いが、ノウハウたんまり、エコシステム充実(アセットストア)、高パフォーマンスと、本格的なものを作るなら正直一択に近い。
でも、もともと Web 屋さんだった身としては、WebVR の可能性をできるだけ追求したいところ。というわけで Mozilla 謹製 WebVR フレームワーク A-Frame をがんばって使ってみている。
しかしかなりの発展途上で、ぶっちゃけ上の VR コンテンツを作るだけでも明文化されていないノウハウをかき集めたり自分で見つけ出したりしないといけない。とはいえ、コンテンツの配布が極めて容易という特大のメリットは捨てがたい。


今回の VRツアーみたいのが HTML+JS 70行程度で書けるのも WebVR の良いところだろう。
Unity だと開発環境を作るだけで何時間かかかるし、変更のたびにかかるコンパイル時間もバカにならない。


というわけで WebVR にも確実に需要はあるので、現時点でいくつかある A-Frame を使うノウハウについては、別途まとめるつもり。