EPSON の HMD である BT-200 のアプリを PlayCanvas で作って見ようという内容です。

1. PlayCanvas で
BT-200 のプロトタイピング
Jul.26.2014
rerofumi (@rerofumi)

2. 自己紹介
• rerofumi (@rerofumi)
– メーカー系で働いている職業プログラマです

3. BT-200の主な用途
• ビデオドラッグの注入

4. アプリも作って見たい
• ディスプレイに色々繋ぐのはあまり好きじゃ無
い
• 本体のコンピュートでなんかしたい

5. なに作ろうか
• 画面に目盛りが表示されていて、首を何度傾
けたか分かるというのはどうだろう
• 名付けて「あたま分度器」
←15度

6. 30度のお辞儀も正確にできる
• 生活を数値化できる Thing!
←15度

7. 要素もシンプルでいけそう
1.姿勢センサー(ジャイロ)で回転角を取得して
2.その分だけ目盛りもしくは数字を表示する
姿勢センサー
OpenGLES表示

8. 開発環境そろえるのめんどくさい
• Android 開発環境なんて 1年半くらい触って
いないよー
– OpenGLES のシェーダーとか頂点バッファとか用
意すんのしんどい

9. 最近はPlayCanvasがお気に入り
• WebGL＋HTML5 なゲームフレームワーク
– ブラウザ上でちゃんと動いて楽しい

10. BT-200 で PlayCanvas 動くの？
• 動きます(小さいサイズのなら
– 標準ブラウザは WebGL 非対応なので Firefox と
かインストールする必要があります
– .apk をなんとかしてホゲって入れろ

11. HTML5 で姿勢センサー取れる
• センサー値余裕で取れる
• BT-200 の姿勢センサーを Firefox で読めた
window.addEventListener('devicemotion', this.onEvent, false);

12. 表示部分を PlayCanvas で作る

13. スクリプト部分でセンサーを読む
• エディタもブラウザ上にある、超クラウド

14. PC上でクラウド開発できる
• PCで開発して、完成したURLを BT-200 でア
クセスするだけ
完成品のURL
クラウド開発
完成したら PlayCanvas で公開

15. できた
• http://apps.playcanvas.com/rerofumi/HMD-
protractor/BT200-Protractor

16. プロジェクトそのものもオープン
• https://playcanvas.com/rerofumi/HMD-
protractor
• 無料コースは全てpublic扱いという github 方
式
• 適当に fork していじくりたおしてね

17. BT-200らしいアプリが作れた
• 問題点
– あまり速度には期待できないです
– WebGLは電池ガンガン食います
– ちょっと大きくなるとクラッシュして動きません
– ネットワーク環境が必要です
• それでも簡単なのは良いことです
– プロトタイプには良いのではないでしょうか？

18. 時間切れ項目
• 視差立体対応
– 今のところ左右同じで視差が付いてないあたり

19. おまけ情報
• PlayCanvas は Oculus Rifｔ にも対応しようと
頑張っています
– ゲームフレームワークとしてマイナーなのでア
ピールしようと必死です
– よろしくね