WiiリモコンをNode.jsを使ってWebGL内で動かしてみた

仕組みはほとんどKinectを使ってブラウザのWebGL内を動いてみた - 最高のコンピューティング環境とは？と同じ。

デモムービー

ムービーではChrome10のWebGLでWiiリモコン入力の棒を動かしています。ちょっと入力を省きすぎたのかカクカクしてます。

Firefox4 / Safari5とかでも動きます。

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

1.Wiiリモコン --> 2.WiiYourself!のデモを改造したアプリ --[TCP]--> 3.ローカルNode.jsサーバー --[WebSocket(SocketIO)]--> 4.ブラウザでWebGL(three.js)を使って表示

"2.WiiYourself!のデモを改造したアプリ"

WiiYourself!のデモに、ビルドのためにDDKのパスを追加して、TCPで回転座標を投げるように改造した物。差分が小さい場合は送らない。

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

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

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

• ソースコード
  • http://www.syspri.org/store/wiimote_tunnel/wiimote_server/

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

SocketIOを使って情報を受け取り、three.jsを使って対応していればWebGLで描画する。WebGL非対応の場合も描画はされるが実用的でないほど遅くなる。
iPhone / iPod touch OS4.2をPCブラウザの加速度コントローラーとして使ってみた - 最高のコンピューティング環境とは？のソースコードを流用した。

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

感想とか今後の予定とか

VR920の回転座標も同じようにしてWebGLに送れるので、VR920でWebGL内を見渡すことも可能。
今度はこの接続パターンと、DepathJSやFlashを使った接続パターンを整理し、ブラウザに対して拡張機器で入力を追加する場合のパターンをまとめる。