WebSocket勉強会の発表資料です。

1. ブラウザのハードウェア対応の
未来を探る
雪岡重信＠ndruger

2. 自己紹介
● 名前: 雪岡 重信
● 仕事: ブラウザ関係の組み込みプログラマ
● Twitter: ndruger

3. 目次
● ハードウェアをブラウザと繋ぐ方法
● ブラウザでKinectネットワーク対戦ゲーム(開発
中)

4. モダンブラウザのハードウェア入力対応
● Geolocation API
○ GPS
● Touch Event
○ 画面タッチ
● DeviceOrientation Event(iPhone)
○ 端末の回転
● Stream API(Android Opera Mobile テクニカルプ
レビュー)
○ カメラの映像

5. もっと入力機器を繋げたい
様々なハードウェアをブラウザに繋げて、
javascriptで簡単にアプリを書いて実験したいけ
ど、各ブラウザの拡張・プラグインを作るのは大
変・・・
→ WebSocket＆Node.jsで繋げてみる

6. Wiiリモコンを繋げてみる
● ネイティブアプリ: WiiYourself!で取得した回転角を送信する
● ローカルnode.jsアプリ: TCPで受けたデータを、WebSocketで転
送する
● ブラウザ: Three.jsを使ってWebGLで描画

7. Wiiリモコンとの接続デモ

8. 結果
● これで好きなハードウェア入力を使ったアプリを
javascriptで簡単に作れる
● セキュリティに気をつけて
● FlashプラグインのSocketクラスでTCPを受けれるので
は？
○ ポリシーファイルを作ればおそらく可能

9. ブラウザでKinectネットワーク対戦ゲーム
WebSocketを使えば、大量のデータを送信でき、リ
アルタイム(少ない遅延)で他のユーザーが受け取れ
る
→ ブラウザでリアルタイムなネットワーク対戦ゲーム
などができるはずということで作成中

10. Kinect
● XBox360のコントローラーだが、PCに繋ぐことも可能
● 人・物の位置をセンサーで取得できる
● 利用するSDK: OpenNI/NITE
○ ソフトウェア処理で人のトラッキングが可能
○ トラッキング中は体の各部位のx,y,z位置が取得で
きる
● 今回利用する情報
○ 体の各部位のx,y,z位置

11. HMD(VR920)
● PCに繋いで640×480の解像度で映像が見れる
● 地磁気センサーが内蔵されており、特定の方向を初
期方向として設定すると、そこからのずれが取得でき
る
○ 対応しているPCゲームでは、顔の向きを変えると
見る方向が変わり、高い臨場感が得られる
● 利用するSDK: IWEARSDK
● 今回利用する情報
○ 特定方向からの回転角(x,y,z)

12. デモの構成

13. Kinect対戦ゲームのデモ

14. 通信周りの情報(2人対戦時。家で測定)
● ライブラリ
○ SocketIOを利用
● ブラウザの通信量
○ サーバーへの送信: Websocketフレーム数 = 60 ～
75フレーム/s, 平均0.65Mbps
○ サーバーからの受信: Websocketフレーム数 = 70
～120フレーム/s, 平均0.75Mbps
● 遅延
○ ユーザー間の往復時間: 31 ～ 60ms

15. ローカルnode.jsアプリの役割
● 転送
○ TCPを受信したデータを、WebSocketで転送をする
● 記録・再生
○ 開発のため、入力されたデータの記録・再生機能
を持つ

16. ブラウザの役割
● 表示
○ SceneJSを利用してWebGLで表示する
■ 自分の各部位の座標を使って、自分を表示する
■ サーバーから送信された対戦相手の各部位の座標
を使って、対戦相手を表示する
● 視点変更
○ HMDモードの場合、視点を頭の部位の位置において、
見る方向をHMDの回転角に設定する
● 転送
○ 受け取った自分の各部位の座標をリモートNode.jsアプ
リに転送する

17. リモートnode.jsアプリの役割
● 転送
○ ブラウザからWebSocketで送られたユーザーの各部位
の座標を、他のユーザーに転送する
● ジェスチャー判定
○ 各部位の座標の動きから、パンチのジェスチャーを判
定し、弾を生成する
● 衝突判定
○ 弾とユーザーの衝突を判定し、ライフを変更する
● コントローラーとのマッピング
○ PCのブラウザとAndroid/iPhoneとのマッピング

18. iPhone / Androidの役割
● コントローラー
○ HMDモードの切り替え、位置の移動など、まだジェス
ジャーで実装してない操作を、リモートnode.jsアプリに
送信。

19. 今後繋いでみたい物
● Androidの振動モーター
○ WebGLの物体を触ったら震える
● Androidの地磁気センサー
○ WebGLの暗闇のライトとして使う

20. ご清聴ありがとうございました

21. 他の人の利用例
時間に余裕があれば紹介します
● http://www.youtube.com/watch?v=JvPyIevmN4w
○ ブラウザでクラゲの海を泳いでます