Kinectを使ってブラウザのWebGL内を動いてみた

Kinectを買ったので、最近熱いWebGLの入力として使ってみた。
遊び・デモ用で汎用的には作ってない。

デモムービー

ムービーではChrome10のWebGLでKinect入力の棒人間が動いてます。

Firefox4 / Safari5とかでも動きます。
Firefox3でも動かなくはないですが、WebGL非対応なので檄重です。

やってることとそれぞれのソースコード

1.Kinect --> 2.OpenNI(PC用のKinect対応フレームワーク)を使ったアプリ --[TCP]--> 3.ローカルNode.jsサーバー --[WebSocket(SocketIO)]--> 4.ブラウザでWebGL(three.js)を使って表示

最初はDepthJSを使おうとしたけど、特定のブラウザでしか動かない拡張らしく、OpenCVとかも面倒だと思っていた時に、下記のサイトでOpenNIから簡単にほしい情報が取れると知ったので、OpenNIのサンプルアプリを改造して使うことにした。

sd-tech: [Kinectハック]OpenNI+Flashでマルチユーザー・マルチタッチ　OpenNI解析編
http://sd-tech-blog.blogspot.com/2010/12/kinectopenniflash.html

"2.OpenNI(PC用のKinectドライバ+ライブラリ)を使ったアプリ"

"OpenNI\Samples\NiUserTracker"を、TCPで体の各パーツの移動情報を投げるように改造した物。ソースのコメントにGPLとあるので下記に変更点を公開。

• 変更点のDiff
  • http://ndruger.lolipop.jp/hatena/20110108/tcp.diff

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

TCPで情報を受け取り、SocketIOを使って、対応していればWebSocketでブラウザに転送する。WebSocket非対応の場合他の通信方法(FlashのTCP等)が使われる。

• ソースコード
  • http://www.syspri.org/store/openni_user_tracker_js/kinect_server/

"4.ブラウザでWebGL(three.js)を使って表示"

SocketIOを使って情報を受け取り、three.jsを使って対応していればWebGLで描画する。WebGL非対応の場合も描画はされるが実用的でないほど遅くなる。

• ソースコード
  • http://www.syspri.org/store/openni_user_tracker_js/client/

現状の問題と対応

• 大量に無駄なパケットを投げている
  • OpenNIを使ったアプリで動作の変化が少なければパケットを送らないようにするつもりだったが、Chromeでそのまま動いてしまったのため面倒なので放置

感想とか今後の予定とか

• KinectとWebGLとWebSocketを使った体感ネットワーク対戦ゲームは普及するかも。動くだけで結構楽しい。
  • 最初はユーザーが少ないので、iPhone / iPod touch OS4.2をPCブラウザの加速度コントローラーとして使ってみた - 最高のコンピューティング環境とは？で試したみたいにiPhone / iPod touchユーザーも体感ゲームとして参加できるような形のゲームがいいなぁ。

• 3D対応のHMD(VR920)を買って今日届くので、WebGLのゲームの3D立体視を試してみる。前に作ったNode.jsとWebSocketとWebGLを使ってネットワーク3D対戦アクションゲームを作ってみた(試作)で試す。

2011/02/09 追記

Macで動くようにした方がいます。Mac人気ありますね。

Mac で 「Kinectを使ってブラウザのWebGL内を動いてみた」 - Scalaとlift　のはずだった　・・・
http://d.hatena.ne.jp/scalar/20110123/1295756813