Comment résoudre différents FPS dans Merci. requesthanimationframe sur différents navigateurs?
Je fais un jeu 3D en utilisant trois.js qui utilise demandanimationframe et il est rapide sur Google Chrome 15 .
Cependant, il est vraiment lent sur firefox 6 et vraiment vraiment lent (plus lent que Firefox) sur ie9 .
C'est vraiment un problème
5 Réponses :
Autant que je sache, il n'y a aucun moyen de réellement résoudre ce problème, autrement que de rendre votre code moins de ressources intensives.
chrome semble être le navigateur le plus rapide, mais généralement FF n'est pas loin derrière, mais c'est toujours lent, mais c'est toujours lent. En fonction des méthodes de rendu, de la toile, du SVG, de SVG, de SVG ou de WebGL, il est également très dépendant de votre matériel local car il utilise le client pour la plupart des choses, et des rendus de Webgl compliqués ont besoin d'un puissant GPU pour obtenir de bons framerates. P>
là sont des moyens de mesurer le framerate à la volée et de changer vos animations en conséquence.
Voici un exemple très simple qui mesure le framerate. P>
p>
<div id="test"></div>
IE9 + est en fait assez rapide. Parfois plus vite que FF, dans mon expérience.
La chose commune à faire est de créer une variable Deltatime (DT) qui est ensuite utilisée comme paramètre pour chaque cycle d'animation / mise à jour.
code est uniquement destiné à visualiser le problème / la solution. < Pré> xxx
Pour tout appel à la fonction de rendu, passez ensuite dt item.Update (DT) ressemble à ce < Pré> xxx
Sur certains navigateurs, demandaimationframe fonctionne quelque chose comme
où n est le temps requis pour que votre code soit exécuté. Ce qui signifie qu'il glisse votre FPS à 62Hz, mais si votre code fonctionne lentement, cela changera à quelque chose de plus bas. Il essaie essentiellement de faire un écart de 16 ms entre chaque écart. Bien sûr, ce n'est pas vrai pour tous les navigateurs et changera probablement dans l'avenir, mais cela peut toujours vous donner une idée de la façon dont cela fonctionne.
Même s'il a été implémenté de la même manière dans chaque navigateur, de nombreux facteurs affectent les performances de votre code et etc. Vous ne pouvez jamais être sûr que votre code fonctionnera à une fréquence constante. SETTimeOUT (rappel, 1000 / (16 + N)
Le Crafty Framework fait quelque chose un peu différent, mais pourrait travailler pour certains cas - le nombre de Le jeu Ticks par tirage n'est pas constant. Il notine plutôt que lorsque le framerer est tombé derrière une cible idéale et passera à travers plusieurs tiques de jeu avant d'effectuer l'étape de tirage. Vous pouvez voir le fonction étape sur github.
Cela fonctionne bien tant que le jeu serait en douceur. Mais si vous essayez quelque chose de plus intensif de processeur, il peut avoir tendance à exacerber la situation, car il hiérarchisera la logique du jeu sur l'animation.
Dans tous les cas, cela ne fonctionnera que si la logique de jeu et la logique de rendu sont quelque peu découplées. (S'ils étaient complètement découplés, vous pourrez peut-être les mettre dans des boucles complètement séparées.)
comme adeneo mentionné, le Cette solution comprend également une option de démarrage / arrêt pour indiquer pourquoi j'utilise une fonction distincte pour initialiser le précédentMemettamp à chaque démarrage, et pourquoi je définit une valeur reqid . p> p> requesthanimationframe code> est envoyé un argument d'horodatage. Voici une solution permettant de mesurer le delta entre Evénements CODE> Evénements à l'aide de cet argument de l'horodatage au lieu de créer une variable distincte à l'aide de la fonction DATE () CODE> PERFORMANCES.MON ( ) code> peut être une meilleure solution de toute façon).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>requestAnimationFrame</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<label for="start-stop">Start/Stop: </label><input class="switch" type="checkbox" id="start-stop"><br>
<div id="output"></div>
</body>
Le moyen de résoudre ce problème est de faire quel que soit le code que vous rencontrez à partir de la course de rappel rapide. Comment faire c'est impossible à dire sans voir le code ...