1

requestAnimFrame以下は、通常のshimであるアニメーションのタイミングを制御する JS/WebGL コードのスニペットです 。FireFox と Safari の下でダンディに動作します。Chrome では、elapsedTimeフレーム 2 以降で が負になります。明らかに (この記事によると)引数をコールバックにwebkitRequestAnimationFrame渡さない!?! 経過時間を計算するための適切なクロスブラウザー方法は何ですか!? これは狂気です！currentTimedraw

var animationStartTime;

function draw(currentTime) {
    requestAnimFrame(draw);

    if (currentTime === undefined) {
       currentTime = Date.now();
    }

    if (animationStartTime === undefined) {
       animationStartTime = currentTime;
    }

    var elapsedTime = (currentTime - animationStartTime)/1000;

    gl.clear(gl.COLOR_BUFFER_BIT);
    drawScene(elapsedTime);
}

実際の WebGL プログラムはこちらです。FireFox と Safari では、単一のアニメーション ループが表示されます。Chrome では、アニメーションが永遠に続きます (修正するまで)。

4

1 に答える 1

1

私が正しければ、レンダリング関数にかかる時間を測定したいですか? 次に、これを行うだけです：

function draw() {
  requestAnimFrame(draw);
  var start = Date.now();

  // perform your drawing

  var elapsed = Date.now() - start;
}

しかし、FPS (1 秒あたりのフレーム数) が必要な場合は、次のようになります。

var FPS = 0;
var ticks = 0;
var lastFPS = 0;

function draw() {
  requestAnimFrame(draw);

  // perform your drawing

  var now = Date.now();
  if (now - lastFPS >= 1000) {
    lastFPS = now;
    FPS = ticks;
    ticks = 0;
  }
  ticks++;
}
于 2013-09-11T14:36:45.313 に答える