three.jsでこういう情報をデバッグしたい時
- FPS（frame per seconds）
- １フレーム描画にかかる時間
- 現在使用されているメモリ総量
- その他レンダラ―関係の情報
こういうのを一目で確認できたら便利です。
それに便利なのが stat.js ライブラリ
使ってみたので使い方とかメモしておきます。
このページの目次
１．まず stat.js を読み込みしておく
とりあえず three.js は読み込みしてある前提で。
以下ページにて stat.js が公開されてます。
▼ このページで公開されている
ここから stat.js を直ダウンロード
あとは任意の場所で読み込みするだけです。
1 2 | <!-- フッターなどで読み込み --> <script src='./stat.js'></script> |
ちなみにThree.js専用ではありません。
FPS計測のために汎用的に使えます。
ただしこれは npm によるインストール前提です。
だから 直読みには stats.js の微修正 が必要ですね。
以下の export の箇所をコメントアウトしてください。
▼ 171行目のこの部分をコメントアウト
1 | //export { Stats as default }; |
ひとまずこれでFPS表示の準備完了。
２．表示位置など微調整してFPS表示
手始めにFPS表示してみることにしました。
描画関数内での時間を測ってみることにします。
※ requestAnimationFrame に渡す関数
実際に書いてみたコードはこういうコードです。
▼ 画面右下にFPS表示してみるコード例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /// FPSを画面右下に表示する var stats = new Stats(); stats.showPanel(0); Object.assign(stats.dom.style, { 'position': 'fixed', 'height': 'max-content', 'left': 'auto', 'right': 0, 'top': 'auto', 'bottom': '0' }); document.body.appendChild( stats.dom ); /// レンダリングを行う関数 function stepFrame(){ stats.begin(); renderer.render(scene, camera); stats.end(); requestAnimationFrame(stepFrame); } |
このコードで大事なポイントは次の３つ
- stats.beginFPS計算などの開始点となる場所で呼び出す。
- stats.endFPS計算などの終了点となる場所で呼び出す。
- renderer.renderWebGLRendererのレンダリング処理。beginとendの間で呼び出す
必ず開始点と終了点をセットする必要ありです。
どういう表示になるかは次画像参照
▼ FPS表示している様子
▼ FPS表示している様子（Gif動画）
メーターをクリックすれば指標切替できます。
デフォルトで対応してるのは次の３つ
- FPS（Frame per second）
- 描画１回にかかる時間（ミリ秒）
- メモリ使用量（メガバイト単位）
視覚的にFPS計測できるから便利かもしれません。
ただし Chromeではメモリ表示に以下オプション が必要。
1 | --enable-precise-memory-info |
このオプションを付けてChrome起動してみてください。
３．stats.jsの表示位置とかの調整方法
最後にstats.jsの表示位置について
デフォルトでは左上に表示されます。
その表示位置は次みたいに切り替えできます。
画面右上に表示したい場合
▼ stats.jsの初期化コードを次のように変更
1 2 3 4 5 6 7 8 9 | var stats = new Stats(); stats.showPanel(0); Object.assign(stats.dom.style, { 'position': 'fixed', 'height': 'max-content', 'left': 'auto', 'right': 0, }); document.body.appendChild( stats.dom ); |
このように right の位置を 0 にすればＯＫ
画面左下に表示したい場合
▼ stats.jsの初期化コードを次のように変更
1 2 3 4 5 6 7 8 9 | var stats = new Stats(); stats.showPanel(0); Object.assign(stats.dom.style, { 'position': 'fixed', 'height': 'max-content', 'top': 'auto', 'bottom': '0' }); document.body.appendChild( stats.dom ); |
今度は bottom の位置を 0 にすればＯＫ
画面右下に表示したい場合
▼ stats.jsの初期化コードを次のように変更
1 2 3 4 5 6 7 8 9 10 11 | var stats = new Stats(); stats.showPanel(0); Object.assign(stats.dom.style, { 'position': 'fixed', 'height': 'max-content', 'left': 'auto', 'right': 0, 'top': 'auto', 'bottom': '0' }); document.body.appendChild( stats.dom ); |
このように right と bottom を 0 にすればＯＫ
stat.jsはThree.jsに限らず汎用的に使える
この stat.js 、FPSのみならずメモリ使用量など見れます。
Three.jsに限らず汎用的に使えそうです。
以上、stat.js でFPS表示する方法でした。ではまた
