Android(Nexus One)のFirefox for MobileでWebGLが動く件に関して
Firefox 4 for Mobile: Demos! ✩ Mozilla Hacks – the Web developer blog http://hacks.mozilla.org/2011/03/webowonder-mobile/
上記のページを見て、WebGLはどうだろうと思ってFirefox for Mobile4.0b1で試したら動いた。・・・ただし、なぜか逆さま。
まずはLearning WebGLのLesson2(http://learningwebgl.com/lessons/lesson02/index.html)。
次にScene.jsのティーポット(http://scenejs.org/dist/curr/extr/examples/hello-teapot/index.html)。
最後に自作のWebGLサンプルゲーム(http://www.syspri.org/test/websocket_tile_nodejs_demo_socketio/webgl/src/websocket_tile_3d.html)
最後のは恐ろしく遅かったので、速度的には相当問題がある模様。今後まとめてFPS取ってみる。
[2011/03/30 追記] さっそくダウンロードした4.0では逆さまの問題が起こらなくなっていた
Learning WebGLのLesson2(http://learningwebgl.com/lessons/lesson02/index.html)。
Scene.jsのティーポット(http://scenejs.org/dist/curr/extr/examples/hello-teapot/index.html)。
自作のWebGLサンプルゲーム(http://www.syspri.org/test/websocket_tile_nodejs_demo_socketio/webgl/src/websocket_tile_3d.html)
最後のゲームは色が逆になってる？
zsh環境でのnvm利用時のエラーと対応
さくらVPSにてzshの環境でnvmを使ってnode.jsをインストールしたら、エラーが2つ発生したので対応方法をメモ
source ~/.nvm/nvm.shでのエラー
$ source ~/.nvm/nvm.sh error message: /home/snow/.nvm/nvm.sh:175: parse error near `|'
私がPをperl用のパイプとして定義してたためのエラー。
- for P in {stable,latest,current}; do - echo -ne "$P: \t"; nvm_version $P + for k in {stable,latest,current}; do + echo -ne "$k: \t"; nvm_version $k
~/.nvm/nvm.shを修正。
nvm install v0.4.2でのエラー
$ nvm install v0.4.2 nvm:40: no matches found: -# nvm: install v0.4.2 failed!
~/.nvm/nvm.shを修正。'-#'はcurlのプログレスバーを出すオプションだがzshだと別な意味に解釈される。プログレスバーはいらないので削除。'#'をオプション名に使うなんて初めて見たよ
- curl -C - -# "http://nodejs.org/dist/node-$VERSION.tar.gz" -o "node-$VERSION.tar.gz" + curl -C - "http://nodejs.org/dist/node-$VERSION.tar.gz" -o "node-$VERSION.tar.gz"
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)はそれぞれのライセンスに従います。
現状の課題
- Kinectからの通信量が多すぎ。ネット対戦までにフィルターしとく。
- VR920モードの視点がブレブレ。
- 移動方向が単位ベクトル。
- 当たり判定がすべて球。
今後の予定
- 動き回れるようにする
- ネット対戦
Kinect勉強会 Vol.1で使ったスライド
Kinect(キネクト)勉強会 Vol.1で私が発表に使ったスライドです。
(2011/03/01 追記) 現在"iframe → Google Gadgetコンバータ"がうまく動いてないようなので、リンクも張っておきます。Kinect + node.js + WebGLで作る簡易ゲーム
利用したプログラムとソースはKinect + node.js + WebGLで簡易ゲーム作ってみた - 最高のコンピューティング環境とは？に記述しました。
振動によるフィードバックのための情報整理
Kinect + WebGLのゲームで人体に何らかのフィードバックを行いたい。
動き回る点と実現の容易さから、振動によるフィードバックが妥当なので方法を整理。
できればjavascriptで簡単に実現したい。
- 案1. Flash Liteのfscommand2のStartVibrate
- iPhoneはFlash Liteが載ってないし、Android2.3もFlashになってFlash Liteが載ってない。
- Flash Liteが動くガラケーを持ってないのでボツ
- 案2. PhoneGap / Sencha Touch / Titaniumの振動機能 + iPhone
- 構造
- Kinect --> OpenNI App -[TCP]-> node.js local app -[WebSocket]-> Browser <-[WebSocket]-> node.js server app -[WebSocket]-> iPhoneのjavascript実行環境
- iPod touchしか持ってなくて振動できないのでボツ
- 構造
- 案3. 案2のAndroid版
- node.js server appとの通信がWebSocketじゃなくなってしまうが、結構妥当。保留。
- 案5. USB-IOと振動モーター
- 面倒すぎるしコードが邪魔なのでボツ。
- 案6. Wiimoteによる振動
結論
案3でいく。
HMD(VR920)使ってWebGL内を見渡してみた(試作)
HMDのVR920には加速度センサーがついているので、それを使うと、顔をどこに向けているのか分かります。
その情報を、node.jsのアプリを経由してWebSocketに送ると、顔の向きでWebGL内の視点の方向を動かして、WebGL内を見渡せます。
不完全な部分が多いので試作ですが、別な作業に移るので一旦ポストします。
デモムービー
実現方法とソースコード
1.VR920 --> 2.VR920のSDKのサンプルを改造したアプリ --[TCP]--> 3.ローカルNode.jsサーバー --[WebSocket(SocketIO)]--> 4.ブラウザでWebGL(scene.js)を使って表示
"2.VR920のサンプルを改造したアプリ"
HelloTracker2を改造。適当にフィルターしてTCPで投げる。
改造点のdiff: http://ndruger.lolipop.jp/hatena/20110212/throw.patch
"3.ローカルNode.jsサーバー"
TCPで情報を受け取り、jsonの正しい単位でまとめて、ブラウザにWebSocketで投げる。
ソース: http://www.syspri.org/store/vr920_trunnel/vr920_server/
現状の課題
- なんか右を向いたら、yawの値が想定と違っていて、うまくlookが移動してくれない。
- pitchで修正する必要がある？今度ゲームに使うときには直しておく。任意軸回転が必要とかいう落ちかも。
- いろいろ値の微調整が必要。
