Programmation d’animation SDF de Rick et Morty

Apprendre la programmation de shaders

• Création de l’animation de Rick et Morty : cette animation a été réalisée en 240 lignes de code et explique comment créer des animations pour la vidéo, les jeux vidéo ou simplement pour le plaisir à l’aide de shaders GPU et de champs de distance signés, sans bibliothèque ni image.
• Éditeur de live coding : il est possible d’exécuter et de modifier les exemples grâce à l’éditeur de live coding intégré à la page.

Bases des shaders

• Utilisation de GLSL : le code est écrit en OpenGL Shading Language (GLSL) et nécessite une fonction color_for_pixel exécutée sur le GPU pour chaque pixel.
• Détermination de la couleur des pixels : la fonction qui détermine la couleur d’un pixel en fonction du temps est au cœur de la création d’animations.

Dessiner des formes de base

• Dessiner un cercle : on peut dessiner un cercle en visualisant la distance par rapport au centre du pixel.
• Champ de distance signé (SDF) : la distance est négative à l’intérieur d’une forme et positive à l’extérieur, ce qui permet de produire divers effets.

Diverses fonctions de formes

• Courbes de Bézier, étoiles, rectangles arrondis : on peut dessiner des formes complexes à l’aide de différentes fonctions SDF.

Dessiner Rick

• Reproduction du visage : de nombreux essais et erreurs ont été nécessaires pour reproduire le visage de Rick en code, avec l’aide d’une image de référence pour gagner en précision.
• Ajout de contours : les fonctions de distance signée permettent de tracer les contours des formes.

Combinaison et symétrie des formes

• Combinaison de formes : pour tracer le contour de deux formes combinées, on utilise la fonction min().
• Symétrie : la fonction abs() permet de rendre une forme symétrique par rapport à un axe.

Techniques avancées

• Déformation du domaine : on peut déformer une forme en appliquant des décalages aléatoires à la position des pixels.
• Effets d’animation : animer cette déformation du domaine permet de créer des effets visuels originaux.

Dessiner des dents infinies

• Utilisation d’une parabole : une parabole permet de dessiner la forme des dents tout en évitant la duplication de code lorsqu’on en dessine plusieurs.

Cet article explique comment créer des animations complexes grâce à la programmation de shaders et montre qu’il est possible d’obtenir des résultats créatifs en utilisant diverses techniques et divers outils.

[GN⁺]

Avis Hacker News

• Un travail vraiment superbe et un excellent billet. Pour un anti-aliasing fluide avec les SDF, il est utile d’utiliser aastep

  • Lien de référence : glsl-aastep GitHub

• Le développement de shaders est vraiment d’un autre niveau. Le fait de modifier des nombres à virgule flottante et de voir immédiatement le résultat est très satisfaisant

• Très bon billet. Je recommande la playlist YouTube associée d’Inigo Quilez

  • Lien de référence : YouTube Playlist

• La qualité du travail, celle des explications et le défi proposé au lecteur sont tous de tout premier niveau. Merci d’avoir partagé cela

• C’était une introduction à GLSL très bien structurée. Je me demande ce qu’il en est sur Vulkan ou WebGPU/WebGL

• Avoir terminé cette animation en 8 mois reflète une patience énorme

• Je me demande s’il y a eu un travail itératif d’ajustement des valeurs décimales pendant le développement, ou quel éditeur a été utilisé. Trouver les bonnes valeurs décimales sur 240 lignes peut prendre beaucoup de temps

• Le niveau de finition de la page est étonnant

• La programmation de shaders est d’un autre niveau. L’effort nécessaire pour créer l’animation et l’attention portée aux détails sont impressionnants. C’est bien plus manuel que le développement traditionnel

• Il est difficile d’exprimer à quel point ce travail est impressionnant