Rick and Morty SDF-Animationsprogrammierung
(danielchasehooper.com)Shader-Programmierung lernen
- Erstellung der Rick-und-Morty-Animation: Diese Animation wurde mit 240 Zeilen Code erstellt und erklärt, wie man mit GPU-Shadern und Signed Distance Fields ohne Bibliotheken oder Bilder Animationen für Videos, Videospiele oder einfach zum Spaß erstellt.
- Live-Coding-Editor: Über den in die Seite eingebetteten Live-Coding-Editor lassen sich die Beispiele ausführen und verändern.
Shader-Grundlagen
- Verwendung von GLSL: Der Code ist in der OpenGL Shading Language (GLSL) geschrieben und benötigt eine Funktion
color_for_pixel, die für jedes Pixel auf der GPU ausgeführt wird. - Bestimmung der Pixelfarbe: Eine Funktion, die die Farbe eines Pixels in Abhängigkeit von der Zeit bestimmt, ist der Kern der Animationserstellung.
Grundformen zeichnen
- Einen Kreis zeichnen: Ein Kreis lässt sich zeichnen, indem die Entfernung vom Mittelpunkt des Pixels visualisiert wird.
- Signed Distance Field (SDF): Die Distanz innerhalb einer Form wird als negativ, außerhalb als positiv dargestellt, wodurch sich verschiedene Effekte erzeugen lassen.
Verschiedene Formfunktionen
- Bezier-Kurven, Sterne, abgerundete Rechtecke: Mit verschiedenen SDF-Funktionen lassen sich komplexe Formen zeichnen.
Rick zeichnen
- Das Gesicht nachbilden: Um Ricks Gesicht im Code nachzubilden, waren viele Versuche und Irrtümer nötig; Referenzbilder erhöhten die Genauigkeit.
- Konturen hinzufügen: Mit Signed-Distance-Funktionen lassen sich die Konturen von Formen zeichnen.
Formen kombinieren und spiegeln
- Formen kombinieren: Beim Kombinieren zweier Formen zum Zeichnen von Konturen wird die Funktion
min()verwendet. - Spiegeln: Mit
abs()lassen sich Formen entlang einer Achse symmetrisch spiegeln.
Fortgeschrittene Techniken
- Domain Warping: Formen lassen sich verzerren, indem die Pixelposition zufällig versetzt wird.
- Animationseffekte: Durch die Animation von Domain Warping lassen sich einzigartige visuelle Effekte erzeugen.
Unendliche Zähne zeichnen
- Verwendung einer Parabel: Mit einer Parabel lässt sich die Zahnform zeichnen, und beim Zeichnen mehrerer Zähne wird Codeduplizierung vermieden.
Der Artikel erklärt, wie sich mit Shader-Programmierung komplexe Animationen erstellen lassen, und zeigt, dass sich mit verschiedenen Techniken und Werkzeugen kreative Ergebnisse erzielen lassen.
1 Kommentare
Hacker-News-Kommentare
Wirklich großartige Arbeit und ein hervorragender Beitrag. Für sauberes Antialiasing bei SDFs ist
aastepempfehlenswertShader-Entwicklung ist wirklich eine ganz andere Dimension. Es ist sehr befriedigend, Fließkommazahlen zu verändern und das Ergebnis sofort zu sehen
Sehr guter Beitrag. Empfehlung für die passende YouTube-Playlist von Inigo Quilez
Die Qualität der Arbeit, die Qualität der Erklärung und die Herausforderung für die Leser sind alle auf höchstem Niveau. Danke fürs Teilen
Das war eine sehr gut strukturierte Einführung in GLSL. Ich frage mich, wie es unter Vulkan oder WebGPU/WebGL aussieht
Diese Animation in 8 Monaten fertigzustellen, zeugt von enormer Geduld
Ich frage mich, ob im Entwicklungsprozess iterativ Dezimalwerte angepasst wurden oder welcher Editor verwendet wurde. Den passenden Satz an Dezimalwerten für 240 Zeilen zu finden, könnte viel Zeit kosten
Der Grad der Ausarbeitung der Seite ist geradezu erstaunlich
Shader-Programmierung ist eine andere Dimension. Der Aufwand und die Liebe zum Detail, die in die Erstellung der Animation geflossen sind, sind beeindruckend. Sie ist viel handarbeitintensiver als traditionelle Entwicklung
Es ist schwer auszudrücken, wie beeindruckend diese Arbeit ist