Three.jsとかでFPS表示に便利な stat.js を使ってみた

three.jsでこういう情報をデバッグしたい時

  • FPS(frame per seconds)
  • 1フレーム描画にかかる時間
  • 現在使用されているメモリ総量
  • その他レンダラ―関係の情報

こういうのを一目で確認できたら便利です。

それに便利なのが stat.js ライブラリ

使ってみたので使い方とかメモしておきます。

1.まず stat.js を読み込みしておく

とりあえず three.js は読み込みしてある前提で。

以下ページにて stat.js が公開されてます。

▼ このページで公開されている

ここから stat.js を直ダウンロード

あとは任意の場所で読み込みするだけです。

ちなみにThree.js専用ではありません。

FPS計測のために汎用的に使えます。

 

ただしこれは npm によるインストール前提です。

だから 直読みには stats.js の微修正 が必要ですね。

以下の export の箇所をコメントアウトしてください。

▼ 171行目のこの部分をコメントアウト

ひとまずこれでFPS表示の準備完了。

2.表示位置など微調整してFPS表示

手始めにFPS表示してみることにしました。

描画関数内での時間を測ってみることにします。

requestAnimationFrame に渡す関数

実際に書いてみたコードはこういうコードです。

▼ 画面右下にFPS表示してみるコード例

このコードで大事なポイントは次の3つ

  • stats.begin
    FPS計算などの開始点となる場所で呼び出す。
  • stats.end
    FPS計算などの終了点となる場所で呼び出す。
  • renderer.render
    WebGLRendererのレンダリング処理。beginとendの間で呼び出す

必ず開始点と終了点をセットする必要ありです。

 

どういう表示になるかは次画像参照

▼ FPS表示している様子

stat.jsからthree.js使用時のFPS表示

▼ FPS表示している様子(Gif動画)

stat.jsを使ってthree.js使用時のFPS/メモリ使用量を表示したときの様子

メーターをクリックすれば指標切替できます。

デフォルトで対応してるのは次の3つ

  • FPS(Frame per second)
  • 描画1回にかかる時間(ミリ秒)
  • メモリ使用量(メガバイト単位)

視覚的にFPS計測できるから便利かもしれません。

ただし Chromeではメモリ表示に以下オプション が必要。

このオプションを付けてChrome起動してみてください。

3.stats.jsの表示位置とかの調整方法

最後にstats.jsの表示位置について

デフォルトでは左上に表示されます。

その表示位置は次みたいに切り替えできます。

画面右上に表示したい場合

▼ stats.jsの初期化コードを次のように変更

このように right の位置を 0 にすればOK

画面左下に表示したい場合

▼ stats.jsの初期化コードを次のように変更

今度は bottom の位置を 0 にすればOK

画面右下に表示したい場合

▼ stats.jsの初期化コードを次のように変更

このように right と bottom を 0 にすればOK

stat.jsはThree.jsに限らず汎用的に使える

この stat.js 、FPSのみならずメモリ使用量など見れます。

Three.jsに限らず汎用的に使えそうです。

以上、stat.js でFPS表示する方法でした。ではまた

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください