Shader verstehen: GLSL für Gestalter
Eine sanfte Einführung in GLSL-Fragment-Shader für Gestalter — was Vertex und Fragment unterscheidet und warum Shader einzigartige Visuals ermöglichen.
Als ich das erste Mal einen Shader geschrieben habe, fühlte sich das an wie Malen mit Mathematik. Kein Layer, kein Pinsel — nur eine kleine Funktion, die für jeden einzelnen Pixel entscheidet, welche Farbe er bekommt. Für mich als Gestalter war das ein Augenöffner, und genau deshalb möchte ich dir die Angst davor nehmen.
Vertex und Fragment: zwei Schritte, eine Bühne
Ein Shader-Programm läuft in zwei Etappen. Der Vertex-Shader kümmert sich um Positionen — er verschiebt die Eckpunkte deiner Geometrie im Raum. Der Fragment-Shader läuft danach und entscheidet für jedes Pixel auf der Oberfläche, welche Farbe es trägt.
Für visuelle Effekte ist meistens der Fragment-Shader der spannende Teil. Stell ihn dir als eine Funktion vor, die millionenfach parallel auf der Grafikkarte ausgeführt wird — einmal pro Pixel, alle gleichzeitig. Diese Parallelität ist der Grund, warum Shader so flüssig laufen.
Ein Shader denkt nicht in Formen, sondern in Koordinaten. Du beschreibst nicht was gezeichnet wird, sondern wie sich Farbe über die Fläche verteilt.
Uniforms: der Draht zwischen Welt und GPU
Shader leben isoliert auf der GPU. Damit sie von außen etwas mitbekommen, gibt es
Uniforms — Werte, die du aus deinem JavaScript hineinreichst und die für alle Pixel
gleich sind. Klassiker sind time für Animationen, die Mauskoordinaten oder die Auflösung
des Canvas.
uniform float time;
uniform vec2 resolution;
void main() {
vec2 uv = gl_FragCoord.xy / resolution;
float wave = sin(uv.x * 10.0 + time);
gl_FragColor = vec4(uv.x, uv.y, wave, 1.0);
}
Diese paar Zeilen erzeugen bereits einen lebendigen Farbverlauf, der sich über die Zeit
bewegt. uv normalisiert die Pixelposition auf einen Bereich von 0 bis 1 — dein
Koordinatensystem, in dem du denkst.
Warum sich der Aufwand lohnt
Mit CSS und SVG kommst du weit, aber irgendwann stößt du an eine Wand: organische Verläufe, flüssige Verzerrungen, generative Muster, die in keiner Bilddatei stecken. Shader laufen direkt auf der Grafikkarte und rechnen Effekte in Echtzeit, die als Video oder GIF zu schwer und zu starr wären.
Für mich sind Shader das Werkzeug, mit dem eine Website nicht mehr nur aussieht, sondern atmet. Du musst kein Mathematiker sein, um anzufangen — ein bisschen Trigonometrie, viel Ausprobieren und die Bereitschaft, in Koordinaten statt in Ebenen zu denken. Fang klein an, verändere eine Zahl, beobachte was passiert. Genau dieses Spiel ist der Kern der Sache.