14

以前にもこのような質問がいくつかあったことは知っています。たとえば、JS で FPS を確認しますか? -これはある程度機能しましたが、各ループが完了するまでにかかる時間を知ることができました。

私が探しているのは、より読みやすく、制御可能なものです。FPS カウンターのリフレッシュ レートを設定して遅くし、人間が読めるようにしたり、アプリケーションが実行できる速度にしたりして、ある種の速度計で使用できるようにしたいと考えています。

とにかく、ここに私が今持っているコードがあります：

var lastLoop = new Date().getTime();

function updateStage()
{   
    clearCanvas();
    updateStageObjects();
    drawStageObjects();     

    var thisLoop = new Date().getTime(); 
    var fps = (thisLoop - lastLoop);

    $('#details').html(fps);

    lastLoop = thisLoop;
    iteration = setTimeout(updateStage, 1);
}

  1. setTimeout 関数を 1 ミリ秒の速度に設定するのは正しいですか? これにより、可能な限り高速にループできるようになると考えていました。

  2. 100 フレームごとに数える必要がありますか? この計算はどうなりますか？

  3. 結果をより正確にするために、1 つのフレームが大幅に異なる可能性があるため、平均を表示する必要があると推測しています。これを行うにはどうすればよいですか?

どんなヒントでも大歓迎です。

ありがとう。

4

5 に答える 5

3

色々試してみましたが、

を変更すると

lastUpdate = now

に

lastUpdate = now * 1 - 1;

NaN の問題が解決されました。これは、lastUpdate が定義されている場所でも使用されます。おそらく、日付を UNIX タイムスタンプに変換できないためです。

新しい結果は次のようになります。

var fps = 0, now, lastUpdate = (new Date)*1 - 1;

// The higher this value, the less the FPS will be affected by quick changes
// Setting this to 1 will show you the FPS of the last sampled frame only
var fpsFilter = 50;

function drawFrame(){
  // ... draw the frame ...

  var thisFrameFPS = 1000 / ((now=new Date) - lastUpdate);
  fps += (thisFrameFPS - fps) / fpsFilter;
  lastUpdate = now * 1 - 1;

  setTimeout( drawFrame, 1 );
}

var fpsOut = document.getElementById('fps');
setInterval(function(){
  fpsOut.innerHTML = fps.toFixed(1) + "fps";
}, 1000);
于 2011-11-11T15:20:04.157 に答える
1

毎秒 fps カウンターをリセットする間隔を設定するだけです。

var fpsOut, fpsCount;

var draw = function () {

    fpsCount++;

    ..Draw To Canvas..


    ..Get the fps value: fpsOut

    requestAnimationFrame(draw);

};
setInterval(function () {

    fpsOut = fpsCount;
    fpsCount = 0;

}, 1000);

draw();
于 2016-05-04T08:55:50.543 に答える