2010-04-09 WebGLで作った3DネトゲにjQueryで吹き出しチャットを付けてみた WebGL ネトゲっていうかまだスタンドアロンなんだけど、WebGLで作った3D空間の任意の位置にDOM要素の吹き出し重ねたりできるかな?ってやってみたら結構簡単にできました。 スクリーンショット 動かし方 前回の記事と同様に、WebGLが動くブラウザを用意して下さい。 最新のFirefox開発版で動作確認済みです。Chromiumでも動くけど、最新版だとなんかオクルージョンが変だったり動作が怪しいのでFirefoxのほうがいいかも。 で、ブラウザの準備ができたら下記のURLにアクセス!チャットを入力するとねこさんが喋ります。 http://meengr.sakura.ne.jp/demo2/ 解説 吹き出しはWebGLのテクスチャではなく、DOM要素を動的に追加してCanvasに絶対位置指定で重ねています。毎フレームねこさんの位置からウィンドウ座標を計算し、適切な位置に移動させています。詳しくはソースを見てね。 でもこれってパフォーマンス的にどうなんだろう?けっこう重い気がする・・・