Gravité, rebond, frottement : les boules tombent

Neuf, pas 9,81

Au tableau, je donnais toujours g = 9,81 m/s². Dans la carte de Noël du Labo 3D, quand le chat fait tomber une boule du sapin, la ligne de gravité dit autrement : o.vel.y -= 9 * dt;. Neuf tout rond. Mon ancien moi de prof aurait corrigé la copie.

Sauf que la scène n'est pas notre salon. Elle fait quelques unités de haut, et c'est le rendu à l'écran qui décide de la bonne valeur. En animation, la physique juste est celle qui se voit juste, pas celle du tableau.

Mais une fois la gravité posée, il reste trois questions qui m'ont occupé plus longtemps que prévu : comment faire avancer une boule d'une image à la suivante, que se passe-t-il quand elle touche le sol, et comment l'empêcher de glisser éternellement ?

La méthode d'Euler en trois lignes

En cours, on écrit v(t) = v₀ + g·t et on résout. Dans une animation, on ne connaît pas le futur : on a seulement l'état de la boule maintenant, et un petit pas de temps dt (environ 16 ms à 60 images par seconde). La méthode d'Euler consiste à supposer que l'accélération est constante pendant ce petit pas :

velocity.y -= g * dt;        // l'accélération change la vitesse
position.y += velocity.y * dt; // la vitesse change la position

C'est tout. La scène du chat étoile fait exactement cela, avec les vecteurs de la leçon 2 : o.vel.y -= 9 * dt; puis p.addScaledVector(o.vel, dt);, c'est-à-dire p += vel * dt sur les trois axes d'un coup.

Par exemple, une boule lâchée sans vitesse de 3 m de haut avec g = 9 arrive au sol à √(2 × 9 × 3) ≈ 7,35 m/s. Avec 9,81, on aurait 7,67 m/s : deux poids deux mesures, mais personne ne les verra à l'écran.

Quand dt est grand, Euler dérive

Euler fait une approximation à chaque pas, et plus le pas est grand, plus l'erreur est grosse. Pour une chute libre simple, l'erreur reste modeste. Mais dès qu'il y a un obstacle, deux défauts apparaissent.

Le premier est la dérive d'énergie. Avec l'ordre naïf et un rebond parfait, la boule remonte un peu plus haut à chaque contact. À 60 images par seconde, une boule lâchée de 3,35 m remonte à environ 3,6 m dès le premier rebond, puis 4,3 m au quatrième. À 10 images par seconde (dt = 0,1 s), elle dépasse 5 m dès le premier rebond, 9 m au troisième, et monte sans fin. L'énergie augmente alors qu'aucune force ne l'apporte : c'est la simulation qui ment.

Le second est l'effet tunnel. À 7,35 m/s, une boule avance de 12 cm par pas à 60 images par seconde, mais de 73 cm avec dt = 0,1 s, soit plus que le diamètre d'une boule de 0,5 m. Une étagère mince peut se retrouver entièrement « enjambée » entre deux positions : la boule n'était pas dessous au pas précédent, elle l'est déjà au suivant, sans avoir jamais touché la planche.

La parade la plus simple, c'est de borner dt. La scène du chat le fait ligne 866 : const dt = Math.min(clock.getDelta(), 0.05). Au pire, la physique ralentit un instant, ce qui ne se voit pas. La parade plus propre, c'est le pas fixe avec accumulateur : on garde un pas physique constant (par exemple 1/120 s) et, à chaque image, on exécute autant de pas que le temps écoulé en contient.

const STEP = 1 / 120;
let accumulator = 0;

function tick(frameDt) {
  accumulator += Math.min(frameDt, 0.05);   // borne anti-tunnel
  while (accumulator >= STEP) {
    stepPhysics(STEP);                       // toujours le même pas
    accumulator -= STEP;
  }
  render();                                  // affichage découplé de la physique
}

Le rebond : la vitesse change de signe

Quand la boule touche le sol, deux choses se passent. On la remet à la surface (p.y = ground), puis on retourne sa vitesse verticale. Au moment de l'impact vy est négative (vers le bas) ; juste après, elle doit être positive (vers le haut). Le signe change, et la valeur diminue parce que le choc perd de l'énergie. Voici les vraies lignes de la scène :

o.vel.y -= 9 * dt;
const p = o.group.position;
p.addScaledVector(o.vel, dt);
let ground = o.r;
// …
if (p.y < ground) {
  p.y = ground;
  if (Math.abs(o.vel.y) > 0.7) { o.vel.y *= -0.42; o.vel.x *= 0.8; o.vel.z *= 0.8; }
  else {
    o.vel.y = 0;
    const grip = Math.exp(-1.4 * dt);
    o.vel.x *= grip; o.vel.z *= grip;
    // …
  }
}

Le facteur -0.42 est le coefficient de restitution, noté e. Le signe moins retourne la vitesse, la valeur 0,42 la réduit. La vitesse est multipliée par e, donc l'énergie cinétique par e², et la hauteur de rebond aussi : une boule lâchée de 3 m remonte à 3 × 0,42² ≈ 0,53 m.

Les deux cas extrêmes se lisent d'un coup d'œil. Avec e = 0, la boule ne rebondit pas du tout : elle reste collée au sol, comme une boule de pâte à modeler. Avec e = 1, elle repart à la même vitesse et remonte exactement à sa hauteur de départ, pour toujours (sauf si la simulation dérive, voir plus haut).

Reste la question de l'arrêt. Avec e = 0,42, les vitesses d'impact successives depuis 3 m valent environ 7,35, 3,09, 1,30 puis 0,54 m/s. Sans garde-fou, la boule ferait des micro-rebonds de plus en plus petits, à l'infini, en vibrant sur le sol. D'où le seuil : if (Math.abs(o.vel.y) > 0.7). En dessous de 0,7 m/s, on arrête de rebondir, on met vel.y à 0 et on passe au frottement. Ici, la boule fait donc trois rebonds, puis elle se pose.

Le frottement : multiplier à chaque pas

Une fois posée, la boule roule, et elle doit ralentir. Le modèle le plus simple multiplie la vitesse par un nombre légèrement inférieur à 1 : v *= grip. Avec grip = 0.97, la boule perd 3 % de sa vitesse à chaque pas. C'est un frottement visqueux : plus elle va vite, plus elle perd, et la vitesse décroît de façon exponentielle.

Il y a un piège. Si tu multiplies par 0,97 à chaque image, la boule ralentit deux fois plus vite sur un écran à 120 Hz que sur un écran à 60 Hz. La scène du chat évite cela avec la forme exacte :

const grip = Math.exp(-1.4 * dt);
o.vel.x *= grip; o.vel.z *= grip;

exp(-k × dt) est le facteur qui s'applique sur la durée dt quand la vitesse suit v(t) = v₀ · e^(-k·t). Avec k = 1,4, on garde e^(-1,4) ≈ 0,247 de la vitesse par seconde, que le dt soit 16 ms ou 33 ms. À 60 images par seconde, ce facteur par pas vaut exp(-1,4/60) ≈ 0,977. Un 0.977 écrit en dur à 30 images par seconde donnerait 0,497 par seconde au lieu de 0,247 : un frottement deux fois trop faible.

À toi de lâcher les boules

Voici cinq boules accrochées à un sapin simplifié, avec une étagère de bois en plein milieu. Au lancement elles tombent déjà. Joue avec les curseurs, et essaie surtout ces trois expériences. D'abord, mets la restitution à 1 : que fait la première boule ? Ensuite, passe la gravité à 2 : tu viens d'aller sur une petite lune. Enfin, monte le pas de simulation à 100 ms et appuie sur « Relâcher les boules » : regarde la deuxième boule, et ce qui arrive à l'étagère.

Rouler sans glisser

Reste un détail qui fait toute la différence à l'écran : une boule qui avance sans tourner, ça se voit tout de suite. Quand une sphère de rayon r roule sans glisser à la vitesse v, son point de contact avec le sol est immobile, ce qui impose ω = v / r (vitesse angulaire en radians par seconde). Pour l'animation, on intègre : angle += v × dt / r.

La scène du chat fait exactement ça, avec une subtilité de repère : rouler vers l'avant (z) fait tourner autour de x, et rouler vers la droite (x) fait tourner autour de z, mais dans l'autre sens, d'où le signe moins.

o.group.rotation.x += o.vel.z * dt / o.r;
o.group.rotation.z -= o.vel.x * dt / o.r;

Avec le rayon de 0,25 m de la démo et une vitesse de 2 m/s, on obtient ω = 2 / 0,25 = 8 rad/s, soit environ 1,27 tour par seconde. Remarque le petit culot doré sur chaque boule : il sert uniquement à rendre cette rotation visible.