Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PlayCanvas で
BT-200 のプロトタイピング
Jul.26.2014
rerofumi (@rerofumi)
自己紹介
• rerofumi (@rerofumi)
– メーカー系で働いている職業プログラマです
BT-200の主な用途
• ビデオドラッグの注入
アプリも作って見たい
• ディスプレイに色々繋ぐのはあまり好きじゃ無
い
• 本体のコンピュートでなんかしたい
なに作ろうか
• 画面に目盛りが表示されていて、首を何度傾
けたか分かるというのはどうだろう
• 名付けて「あたま分度器」
←15度
30度のお辞儀も正確にできる
• 生活を数値化できる Thing!
←15度
要素もシンプルでいけそう
1.姿勢センサー(ジャイロ)で回転角を取得して
2.その分だけ目盛りもしくは数字を表示する
姿勢センサー
OpenGLES表示
開発環境そろえるのめんどくさい
• Android 開発環境なんて 1年半くらい触って
いないよー
– OpenGLES のシェーダーとか頂点バッファとか用
意すんのしんどい
最近はPlayCanvasがお気に入り
• WebGL+HTML5 なゲームフレームワーク
– ブラウザ上でちゃんと動いて楽しい
BT-200 で PlayCanvas 動くの?
• 動きます(小さいサイズのなら
– 標準ブラウザは WebGL 非対応なので Firefox と
かインストールする必要があります
– .apk をなんとかしてホゲって入れろ
HTML5 で姿勢センサー取れる
• センサー値余裕で取れる
• BT-200 の姿勢センサーを Firefox で読めた
window.addEventListener('devicemotion', this.onEvent, false);
表示部分を PlayCanvas で作る
スクリプト部分でセンサーを読む
• エディタもブラウザ上にある、超クラウド
PC上でクラウド開発できる
• PCで開発して、完成したURLを BT-200 でア
クセスするだけ
完成品のURL
クラウド開発
完成したら PlayCanvas で公開
できた
• http://apps.playcanvas.com/rerofumi/HMD-
protractor/BT200-Protractor
プロジェクトそのものもオープン
• https://playcanvas.com/rerofumi/HMD-
protractor
• 無料コースは全てpublic扱いという github 方
式
• 適当に fork していじくりたおしてね
BT-200らしいアプリが作れた
• 問題点
– あまり速度には期待できないです
– WebGLは電池ガンガン食います
– ちょっと大きくなるとクラッシュして動きません
– ネットワーク環境が必要です
• それでも簡単なのは良いことです
– プ...
時間切れ項目
• 視差立体対応
– 今のところ左右同じで視差が付いてないあたり
おまけ情報
• PlayCanvas は Oculus Rift にも対応しようと
頑張っています
– ゲームフレームワークとしてマイナーなのでア
ピールしようと必死です
– よろしくね
Upcoming SlideShare
Loading in …5
×

PlayCanvas で BT-200 のプロトタイピング

1,641 views

Published on

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

PlayCanvas で BT-200 のプロトタイピング

  1. 1. PlayCanvas で BT-200 のプロトタイピング Jul.26.2014 rerofumi (@rerofumi)
  2. 2. 自己紹介 • rerofumi (@rerofumi) – メーカー系で働いている職業プログラマです
  3. 3. BT-200の主な用途 • ビデオドラッグの注入
  4. 4. アプリも作って見たい • ディスプレイに色々繋ぐのはあまり好きじゃ無 い • 本体のコンピュートでなんかしたい
  5. 5. なに作ろうか • 画面に目盛りが表示されていて、首を何度傾 けたか分かるというのはどうだろう • 名付けて「あたま分度器」 ←15度
  6. 6. 30度のお辞儀も正確にできる • 生活を数値化できる Thing! ←15度
  7. 7. 要素もシンプルでいけそう 1.姿勢センサー(ジャイロ)で回転角を取得して 2.その分だけ目盛りもしくは数字を表示する 姿勢センサー OpenGLES表示
  8. 8. 開発環境そろえるのめんどくさい • Android 開発環境なんて 1年半くらい触って いないよー – OpenGLES のシェーダーとか頂点バッファとか用 意すんのしんどい
  9. 9. 最近はPlayCanvasがお気に入り • WebGL+HTML5 なゲームフレームワーク – ブラウザ上でちゃんと動いて楽しい
  10. 10. BT-200 で PlayCanvas 動くの? • 動きます(小さいサイズのなら – 標準ブラウザは WebGL 非対応なので Firefox と かインストールする必要があります – .apk をなんとかしてホゲって入れろ
  11. 11. HTML5 で姿勢センサー取れる • センサー値余裕で取れる • BT-200 の姿勢センサーを Firefox で読めた window.addEventListener('devicemotion', this.onEvent, false);
  12. 12. 表示部分を PlayCanvas で作る
  13. 13. スクリプト部分でセンサーを読む • エディタもブラウザ上にある、超クラウド
  14. 14. PC上でクラウド開発できる • PCで開発して、完成したURLを BT-200 でア クセスするだけ 完成品のURL クラウド開発 完成したら PlayCanvas で公開
  15. 15. できた • http://apps.playcanvas.com/rerofumi/HMD- protractor/BT200-Protractor
  16. 16. プロジェクトそのものもオープン • https://playcanvas.com/rerofumi/HMD- protractor • 無料コースは全てpublic扱いという github 方 式 • 適当に fork していじくりたおしてね
  17. 17. BT-200らしいアプリが作れた • 問題点 – あまり速度には期待できないです – WebGLは電池ガンガン食います – ちょっと大きくなるとクラッシュして動きません – ネットワーク環境が必要です • それでも簡単なのは良いことです – プロトタイプには良いのではないでしょうか?
  18. 18. 時間切れ項目 • 視差立体対応 – 今のところ左右同じで視差が付いてないあたり
  19. 19. おまけ情報 • PlayCanvas は Oculus Rift にも対応しようと 頑張っています – ゲームフレームワークとしてマイナーなのでア ピールしようと必死です – よろしくね

×