Animer des objets avec WebGL

Faire tourner le carr

Commenons par faire tourner le carr. La premire chose dont nous avons besoin est une variable pour mmoriser la rotation courante du carr :

var squareRotation = 0.0;

Maintenant, nous devons modifier la fonction drawScene() pour appliquer la rotation courante du carr quand on le dessine. Aprs dplacement la position de dessin initiale du carr, nous appliquons la rotation comme suit :

mat4.rotate(
  modelViewMatrix, // matrice de destination
  modelViewMatrix, // matrice de rotation
  squareRotation, // rotation en radians
  [0, 0, 1],
); // axe autour duquel tourner

Ceci fait tourner la modelViewMatrix de la valeur courante de squareRotation, autour de l'axe Z.

Pour raliser effectivement l'animation, nous avons besoin d'ajouter du code qui change la valeur de squareRotation au fil du temps. Nous pouvons faire cela en crant une nouvelle variable pour mmoriser l'instant auquel nous avons ralis l'animation pour la dernire fois (appelons le then), puis en ajoutant le code suivant la fin de la fonction principale :

var then = 0;

// Dessiner la scne rptitivement
function render(now) {
  now *= 0.001; // conversion en secondes
  const deltaTime = now - then;
  then = now;

  drawScene(gl, programInfo, buffers, deltaTime);

  requestAnimationFrame(render);
}
requestAnimationFrame(render);

Ce code utilise requestAnimationFrame pour demander au navigateur d'appeler la fonction "render" chaque image. requestAnimationFrame nous transmet le temps en millisecondes depuis le chargement de la page. Nous le convertissons en secondes, puis nous lui soustrayons le dernier instant pour calculer deltaTime, qui est le nombre de secondes depuis le rendu de la dernire image. la fin de drawscene, nous ajoutons le code pour mettre jour squareRotation.

squareRotation += deltaTime;

Ce code utilise le laps de temps qui s'est coul depuis la dernire fois que nous avons mis jour la valeur squareRotation pour dterminer de combien faire tourner le carr.

Voir le code complet | Ouvrir cette dmo dans une nouvelle page

• Prcdent
• Suivant