Kinect + node.js + WebGLで簡易ゲーム作ってみた - 最高のコンピューティング環境とは？

Kinect(キネクト)勉強会 Vol.1で発表した物です。

以前Kinectを使ってブラウザのWebGL内を動いてみた - 最高のコンピューティング環境とは？にて、Kinectとブラウザをnode.jsで繋げたので、それを少し発展させて、ゲーム(?)を作ってみました。
HMD(VR920)使ってWebGL内を見渡してみた(試作) - 最高のコンピューティング環境とは？の実験結果も併用して、VR920で周りを見渡すことも出来ます。

デモムービー

VR920モード off

VR920モード on

対応ブラウザはChromeの最新版とFirefox4の最新版。
ただし、Firefox4だとnetwork.websocket.override-security-blockを変更しないと、WebSocketが使われないので、檄重。
WebGLを使うのでPCにプログラマブルシェーダーが必要。

操作方法

敵が弾を撃ってきます。当たると体力が減ってそのうちゲームオーバーになります。
左手に相当するHTML5の盾で弾を防げます
パンチを打つと自弾が出て、敵に当たると敵が消えます。
- パンチ動作の判定は手・肘・肩の角度で判定してます。
- 速度は200ms前の手の位置との変化量から計算してます。
- 向きは肩と手を繋いだ方向に飛ばしてます。
VR920を繋いで"VR920 on"のボタンを押すとVR920の向きに合わせて周りを見渡すことが出来ます
右手を頭に近くして、左手を伸ばすと、時間(敵弾・自弾)が止まります。

実現方法とソースコード

1.Kinect --> 2.OpenNI(PC用のKinect対応フレームワーク)を使ったアプリ --[TCP]--> 5.ローカルNode.jsサーバー --[WebSocket(SocketIO)]--> 6.ブラウザでWebGL(SceneJS)
3.VR920 --> 4.VR920のSDKのサンプルを改造したアプリ --> 5

"2.OpenNI(PC用のKinect対応フレームワーク)を使ったアプリ"

"OpenNI\Samples\NiUserTracker"の改造版。各jointのx,y,zを投げるように改造。

改造点のdiff: http://ndruger.lolipop.jp/hatena/20110226/kinect.diff

"4.VR920のサンプルを改造したアプリ"

HelloTracker2の改造版。HMDの角度を投げるように改造。

改造点のdiff: http://ndruger.lolipop.jp/hatena/20110226/vr920.diff

"5.ローカルNode.jsサーバー"

TCPで情報を受け取り、JSONの正しい単位でまとめて、ブラウザにWebSocketで投げる。
ついでにデバッグ用に情報の記録と再生の機能も持つ。

ソース: https://github.com/ndruger/kinect-game/tree/master/js/device_server
サンプルレベルのソースなので流用歓迎ですが、ライセンスが明示されてないと他の人が再利用しずらいという話があったので、MITライセンスとしておきます。
利用しているライブラリはそれぞれのライセンスに従います。

"6.ブラウザでWebGL(SceneJS)を使って表示"

情報を受け取り、Scenejsを使ってWebGLで描画する。
ゲーム全体を実装。

ソース: https://github.com/ndruger/kinect-game/tree/master/js/client
サンプルレベルのソースなので流用歓迎ですが、ライセンスが明示されてないと他の人が再利用しずらいという話があったので、MITライセンスとしておきます。
利用しているライブラリ(glMatrix.js, SceneJS, socket.io)はそれぞれのライセンスに従います。