ブラウザのハードウェア対応の未来を探る

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

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

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

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

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

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

Wiiリモコンとの接続デモ

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

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

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

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

デモの構成

Kinect対戦ゲームのデモ

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

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

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

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

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

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

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

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

ブラウザのハードウェア対応の未来を探る

by ndruger on May 28, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

ブラウザのハードウェア対応の未来を探る — Presentation Transcript