わぷーの3D-VRなギャラリーを作ってTravis経由でGitHubに自動的にデプロイできるようにした。

こんにちは。タスクがたまればたまるほど仕事とは関係ないものを作りたくなるのはなんで?

 

先日、なんとなく「three.js cardboard」とかでググったら、あれ?意外と簡単に3D VRなゲームっぽいものが作れそうということに気がついて早速週末に試してみました。

https://github.com/miya0001/wapuu-gallery-vr

ドメイン取っちゃった。笑

http://spacewapuu.com/

 

iPhoneで試そう!

ぜひ、iPhoneで見てみてください。

ジャイロセンサーの動きに合わせて宇宙空間の中をわぷーと一緒にぐりぐり動くことができます。

わかりにくいんですが、右下にCardboardのアイコンがあるのでそれを押すと以下のように3D VRの世界に突入できます。

screenshot-2

screenshot-3

 

使ってるもの

three,jsとかcanvasとかWebGLとか初体験だったのですが、ぐりぐり動かすとこまでは以下のライブラリを使ったら数時間で実装することができました。

https://github.com/borismus/webvr-boilerplate

これを使うとあらかじめGoogle Cardboardに対応するとこまでやってくれるので、その部分でかなり楽をできた気がします。

 

僕はこのサンプルのソースを少しずつカスタマイズしていきました。

http://borismus.github.io/webvr-boilerplate/

 

まず、背景のグリッドを星に変えて、真ん中のキューブをわぷーに変えて、動きをアレンジして。。。みたいな感じ。

複数のわぷーをループでぶん回して配置する際に、無駄なオーバーヘッドが大量に発生していることに気がつくのに丸一日ぐらいかかりましたが、動き始めるまではそんなに時間がかからなかったと思います。

 

Gulpでわぷーをかき集める処理の自動化

わぷーのリストは、WordPressの日本語チームさんが管理するわぷーアーカイブのページにpackage.jsonを追加してもらうためのプルリクを送って、npm installで持ってこれるようにしました。

Add_package_json_by_miya0001_·_Pull_Request__65_·_jawordpressorg_wapuu

 

https://github.com/jawordpressorg/wapuu/pull/65

さいわいたいさんが速攻でマージしてくれたので、以下のようにGulpで画像の最適化とかわぷーのJSONを作る部分を実装しました。

https://github.com/miya0001/wapuu-gallery-vr/blob/master/gulpfile.js

ちなみに、このJSONを作る部分が一番時間がかかった。。。w

 

Travisでデプロイの自動化

Gulpで画像の最適化とかを自動化できたら、GitHubページのデプロイも自動化してみたくなりました。

というわけでググったら本家にちゃんと情報があったのでそれをベースにやってみました。

Auto-deploying built products to gh-pages with Travis

以下のような記述があってちょっとビビりましたけどね。

# Force push from the current repo’s master branch to the remote
# repo’s gh-pages branch. (All previous history on the gh-pages branch
# will be lost, since we are overwriting it.)

こんなことができるなんて知らなかった。

 

ここに書いてある方法では、deploy.shというシェルスクリプトに必要な記述を全部書いて処理してたんですが、これだと失敗した時にどこでコケたのかわかりにくかったので、今回は以下のように.travis.ymlに一個ずつコマンドを並べました。

https://github.com/miya0001/wapuu-gallery-vr/blob/master/.travis.yml

 

以上でgit pushをするだけで自動的にデプロイできるようになりました。

miya0001_wapuu-gallery-vr_-_Travis_CI

https://travis-ci.org/miya0001/wapuu-gallery-vr

 

これでわぷーの本家のリポジトリに新しいわぷーが追加されても、右上の”Restart Build”っていうボタンを押すだけで更新されます。

 

というわけで、たった1,000円のGoogle Cardboardでこんなに楽しめるとは思いませんでした。

 

今後やりたいこと

以下親切な方からのサンプルコードのプルリク希望です。

  • 3Dフォントをぐりぐりしたい。なぜかうまく表示されなかった。
  • ライトも使いたい。これもなんか変なことになった。
  • 現状はわぷーの動きが直角なんですが、斜めとかに動かしたい。