蟻地獄

Twitterに書ききれない長めの文とか書くよ

WebGLで作った3DネトゲにjQueryで吹き出しチャットを付けてみた

ネトゲっていうかまだスタンドアロンなんだけど、WebGLで作った3D空間の任意の位置にDOM要素の吹き出し重ねたりできるかな?ってやってみたら結構簡単にできました。

動かし方

前回の記事と同様に、WebGLが動くブラウザを用意して下さい。
最新のFirefox開発版で動作確認済みです。Chromiumでも動くけど、最新版だとなんかオクルージョンが変だったり動作が怪しいのでFirefoxのほうがいいかも。
で、ブラウザの準備ができたら下記のURLにアクセス!チャットを入力するとねこさんが喋ります。
http://meengr.sakura.ne.jp/demo2/

解説

吹き出しはWebGLのテクスチャではなく、DOM要素を動的に追加してCanvasに絶対位置指定で重ねています。毎フレームねこさんの位置からウィンドウ座標を計算し、適切な位置に移動させています。詳しくはソースを見てね。
でもこれってパフォーマンス的にどうなんだろう?けっこう重い気がする・・・