La première version de la mer animait sa grille depuis JavaScript. Une boucle parcourait les 10 201 vertices du plan, appliquait un sinus à chacun, puis marquait l’attribut de position comme périmé pour que Three.js le réenvoie au GPU.
Le problème
Ce n’est pas le sinus qui coûte cher, c’est le trajet. À chaque frame, tout le buffer de positions repart vers la carte graphique — environ 120 Ko, soixante fois par seconde. Le CPU passe son temps à préparer des données que le GPU sait calculer lui-même.
La correction
Un vertex shader reçoit un unique uniform uTime et calcule le déplacement
directement sur le GPU, en parallèle, pour chaque vertex. La boucle d’animation
côté JavaScript se réduit à une ligne : mettre à jour un flottant.
Effet de bord agréable : la densité de la grille devient presque gratuite. Doubler le nombre de segments ne change plus rien au coût CPU, alors que dans la version précédente cela doublait le travail par frame.
La leçon générale
Quand une animation touche beaucoup de sommets et suit une formule, elle appartient au shader. Le CPU garde ce qui relève de la décision : l’état, les entrées, la logique. Le GPU prend ce qui relève de la répétition.