ドーモ、Javascript サン。 レガシーXNA野郎 デス
JavaScript(Three.JSやWebGL)でいざ本格的なコードを書いてガチガチに書きまくると、当たり前ながら処理が遅くなってきます。
その遅くなってきた原因の調査に、過去に開発していたXNAでは「TimeRuler」という非常に役に立つものがありました。
・・・Javascriptには無いの?
なかったようなので、作りました。
何をするやつなの?どういうときに使うの?
まずは、こちらをご覧ください。
↓そこそこ重い、パーティクルのサンプル↓
こちらのサイトで、左中断あたりで伸びている緑とか青のバーが、今回作ったものになります。
何をしているかというと、
「計測開始と計測終了の間にかかった時間(ミリ秒)を、メーターで表示している」だけです。
このメーターをいくつでも増やせるので、
「なんとなーく、ココが重そう」という場所に片っ端から仕込んでおき、メーターの伸び縮みを見て、実際に重い・負荷がかかっている処理を探すことが目的です。
組み入れ方
1:こちらのGitHubから、JfTimeRuler.js を落としてきます。
2:インポートして、こんな感じで宣言します。
<script src="js/JfTimeRuler.js"></script>
<script>
var ruler = new JfTimeRuler();
・・・
3:DOMツリーに追加します(ここで、Three.jsとそうでない場合で違いがある)
Three.jsを使わない場合
document.body.appendChild(ruler.dom);
Three.jsを使う場合
stats.js を追加する方法を参考にしてください(人によって組み方が違うと思うので‥)。
container.appendChild(ruler.dom);
4:計測したい場所に、仕込みます。
ruler.add("ラベル名");
5:updateで、実際に画面に描画します。
ruler.update();
という感じです。
もうちょっと詳しく
中にあるメソッドをもうちょっと解説
初期化時引数(_x,_y):そのまんま、スクリーン上での位置を指定できます
setTargetFrameRate(_f):目標としているフレームレートを変更できます。標準は60(秒間60回更新)です
add(ラベル名、色):addはラベル名が最低限必要ですが、バーの色を直接指定することもできます。