LoginSignup
1

More than 5 years have passed since last update.

負荷計測用にXNAのTimeRuluerっぽいのを移植してみた

Last updated at Posted at 2016-09-25

ドーモ、Javascript サン。 レガシーXNA野郎 デス

JavaScript(Three.JSやWebGL)でいざ本格的なコードを書いてガチガチに書きまくると、当たり前ながら処理が遅くなってきます。
その遅くなってきた原因の調査に、過去に開発していたXNAでは「TimeRuler」という非常に役に立つものがありました。
・・・Javascriptには無いの?

なかったようなので、作りました。

 何をするやつなの?どういうときに使うの?

まずは、こちらをご覧ください。
↓そこそこ重い、パーティクルのサンプル↓
こちらのサイトで、左中断あたりで伸びている緑とか青のバーが、今回作ったものになります。

何をしているかというと、
「計測開始と計測終了の間にかかった時間(ミリ秒)を、メーターで表示している」だけです。
このメーターをいくつでも増やせるので、
「なんとなーく、ココが重そう」という場所に片っ端から仕込んでおき、メーターの伸び縮みを見て、実際に重い・負荷がかかっている処理を探すことが目的です。

組み入れ方

いちばん簡単なサンプル(ソース)がGitHubにあります

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はラベル名が最低限必要ですが、バーの色を直接指定することもできます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1