Simulation 3.3 — Le ressort

Simulation · s'appuie sur l'étape 3

La simulation la plus utile de tout ce tutoriel, et la moins spectaculaire. Un ressort qui ramène un objet vers une cible, c'est tout mouvement lissé : une caméra qui suit un personnage, un panneau qui glisse, l'inertie d'OrbitControls.

Trois ressorts, même raideur, lâchés ensemble. Seul l'amortissement change — et les trois comportements portent des noms.

raideur — k 30 écart de départ — m 2.0

↻ Relâcher

Ce qu'il faut savoir (5)

• L'amortissement critique est le réglage que vous cherchez presque toujours. C'est le plus rapide qui n'overshoote jamais : la caméra rattrape le personnage sans le dépasser, le panneau se cale sans rebondir. Moins, ça oscille ; plus, ça traîne. Il n'y a pas à tâtonner, il se calcule : c = 2·√(k·m).
• Le rapport ζ = c / (2√(k·m)) résume tout : ζ < 1 oscille, ζ = 1 est critique, ζ > 1 traîne. Les trois couloirs sont à ζ = 0.15, 1 et 3. C'est le même ζ que dans les CSS spring() et dans tous les moteurs de jeu.
• Le piège le plus répandu de toute la 3D web : x += (cible − x) * 0.1. Ça marche, c'est partout, et c'est faux : le lissage dépend du nombre d'images par seconde. Sur un écran 144 Hz, l'objet arrive plus de deux fois plus vite que sur un 60 Hz. La correction tient en une ligne : x += (cible − x) * (1 − Math.pow(0.001, dt)).
• La masse ne change pas la forme du mouvement, seulement sa vitesse — et seulement si vous ne recalculez pas c. Doublez m à ζ constant : la courbe est identique, juste plus lente. C'est pour ça qu'on raisonne en ζ et pas en newtons.
• Un ressort n'a pas de durée : il approche sa cible sans jamais l'atteindre exactement. À la différence d'une animation de 0.3 s, il est donc interruptible — changez la cible en plein vol, le mouvement reste continu. C'est précisément pourquoi les interfaces modernes l'ont adopté.

← Précédent · Suivant →