Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした