requestAnimationFrame calcul du temps écoulé

Question

Vous trouverez ci-dessous un extrait de code JS/WebGL qui contrôle le minutage de l'animation où requestAnimFrame correspond à shim. Fonctionne sous Dandy FireFox et Safari. Sous Chrome, le elapsedTime devient négatif sur les images 2 et suivantes. Évidemment (selon this article) webkitRequestAnimationFrame ne pas passer l'argument currentTime au rappel draw!?! Quelle est la méthode appropriée, multi-navigateur pour le calcul du temps écoulé? C'EST DE LA FOLIE! Le programme WebGL actuel est le here. Sous FireFox et Safari, vous verrez une seule boucle d'animation - sous Chrome, vous verrez l'animation continuer indéfiniment (jusqu'à ce que je la répare).

Answer 1

Si je vous ai eu raison - vous voulez mesurer le temps pris par la fonction de rendu? Ensuite, vous devez simplement faire ceci:

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

    // perform your drawing 

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

Mais si vous avez besoin FPS (images par seconde), alors quelque chose comme ça va faire:

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++; 
}