築地ッカソンでWebVRやってみた
「築地ッカソン vol.4 ～VRをテーマにアプリを作ろう～」
に行ってきました。
7時間くらいでテーマに沿った作品をつくる築地で行われるハッカソン。
終わったら寿司が食べられます。
VRに興味はあって何かつくってみたいなと思っていたけど、
なかなかやる時間がない、
いや、時間はあるけど手をつけてない、、
ハッカソンに参加すればやらざるを得ないじゃないか！
ということで、参加しました。
WebVRについて調べてみると、
ThreeJS、Aframe、WebVR starter kit、VR Viewなどのライブラリがあるそうで、
（参照：WebVR はじめよう - Qiita）
この中のMozillaが発表したAframeを今回使いました。
新しいWebVRフレームワークA-Frame入門 - Qiita
を参考に。
jsを読みこんで、
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
htmlタグのように書くだけで、
<a-scene>
<a-cube></a-cube>
</a-scene>
簡単に直方体が描画されます。
スマホだと向きを変えると、表示も変わります。
サンプルを動かしつつ、
どんなことができるのか確認しながら、
時間内でどんなことができそうか考えて、、
「VRで探せ！」というのをつくりました。
http://lightwill.main.jp/vearch/
画面上にランダムで現れるコイキングを探すというもの。
背景の全球画像はGoogleストリートビューアプリで撮影しました。
スマホのカメラで全球画像がつくれちゃうんですね。
時間内にはできなかったですが、
コイキングをみつけたら自動でリロード、
カーソルをモンスターボールに、
したかったです。
もうひとつ、
先日、お台場でやってる「DMMプラネッツ」に行ったときに撮ったパノラマ画像を360度で見れるのもつくりました。
http://lightwill.main.jp/vearch/planets
写真だとキラキラ感が薄れてしまいますが、
実際はキラキラして動いてるのが360度広がってるような世界です。
全球カメラで動画を撮ったりして見れたらいいですね。
今回、ハッカソンというものに初めて参加したのですが、
限られた時間の中で何かつくるというのは、
取捨選択を素早く行う必要があり、頭の回転も早くなるので、
短時間で急激に成長できる場だなと思いました。
参加者の中にはプログラム始めて1ヶ月です、みたいな人もいて、
誰でも参加できるような雰囲気です。
場所が築地ということで、寿司がとてもおいしかったです。
無料でおいしい寿司が食べられるというだけで素晴らしいイベントです！
というわけで、WebVRおもしろいのでやってみてはどうでしょうか？
ハッカソンおもしろいので参加してみてはどうでしょうか？
