GLSL

1. Grundlagen

Was ein Shader tut

Die Grafikkarte zeichnet alles aus Dreiecken, und an zwei Stellen fragt sie ein Programm von dir:

1. Der Vertex-Shader läuft für jede Ecke eines Dreiecks. Er rechnet aus, wo die Ecke auf dem Bildschirm landet, und schreibt das nach gl_Position.
2. Die Grafikkarte füllt das Dreieck mit Pixeln. Was der Vertex-Shader in einer varying-Variable an die drei Ecken geschrieben hat, mischt sie für jeden Pixel dazwischen: In der Mitte eines Dreiecks mit einer roten und zwei blauen Ecken kommt ein Lila an.
3. Der Fragment-Shader läuft für jeden dieser Pixel und rechnet seine Farbe aus. Die schreibt er nach gl_FragColor.

Beide laufen tausendfach gleichzeitig, jeder für sich: Ein Pixel weiß nichts von seinen Nachbarn und kann sich nichts für den nächsten merken. Was für alle gleich ist, etwa die Richtung der Sonne, schickt das Programm auf dem Computer als uniform hinein.

Version und Genauigkeit

Jeder Shader beginnt mit der Version. Browser (WebGL) verstehen GLSL ES 1.00:

#version 100
precision mediump float;

Die zweite Zeile braucht nur der Fragment-Shader: Er muss sagen, wie genau er mit Kommazahlen rechnet. mediump reicht für Farben und Licht, highp ist genauer, aber nicht auf jedem Handy da.

Auf dem Computer ohne Browser verwendet raylib meist #version 330. Dort heißen einige Dinge anders: in und out statt attribute und varying, texture statt texture2D und eine eigene out vec4-Variable statt gl_FragColor. Die Beispiele hier sind alle #version 100.

2. Die Sprache

Typen und Zahlen

GLSL sieht aus wie C, hat aber eigene Typen für Vektoren und Matrizen:

Ein Vektor entsteht aus Zahlen oder anderen Vektoren, solange es insgesamt genug Zahlen sind:

vec3 up = vec3(0.0, 1.0, 0.0);
vec3 grey = vec3(0.5);                 // alle drei Zahlen 0.5
vec4 color = vec4(grey, 1.0);          // drei aus grey, dazu 1.0

Rechnen geht Zahl für Zahl: a + b, a * b und a * 2.0 rechnen mit jeder Komponente einzeln.

Zwei Stolperfallen: Kommazahlen schreibst du immer mit Punkt und Nachkommastelle, 1.0 statt 1. Und GLSL wandelt int nicht von selbst in float um. float x = 1; ist ein Fehler, float(i) macht aus der ganzen Zahl i eine Kommazahl.

Komponenten

Die Zahlen eines Vektors heißen x, y, z, w. Für Farben gibt es dieselben noch einmal als r, g, b, a, für Texturkoordinaten als s, t. Mehrere Buchstaben hintereinander ergeben einen neuen Vektor:

vec4 color = vec4(1.0, 0.5, 0.2, 1.0);
vec3 rgb = color.rgb;        // (1.0, 0.5, 0.2)
float red = color.r;         // 1.0
vec2 ground = position.xz;   // nur x und z, ohne die Höhe
vec3 swapped = rgb.bgr;      // umgedreht: (0.2, 0.5, 1.0)

Innerhalb eines Ausdrucks bleibt man bei einer Sorte: color.rgb und color.xyz gehen, color.rgz nicht.

Ein- und Ausgaben

Woher ein Wert kommt, sagt ein Wort vor dem Typ:

Dazu kommen Variablen, die GLSL schon kennt:

discard; im Fragment-Shader lässt einen Pixel ganz weg, etwa wo eine Textur durchsichtig ist.

Bedingungen, Schleifen, Funktionen

if, else, Vergleiche und &&, || schreibst du wie in C. Eine Schleife braucht in #version 100 eine feste Obergrenze. Wie viele Durchläufe es wirklich sind, regelt ein break:

#define MAX_TORCHES 16
uniform vec3 torches[MAX_TORCHES];
uniform int torchCount;

for (int i = 0; i < MAX_TORCHES; i++) {
    if (i >= torchCount) break;
    // … torches[i] …
}

while gibt es nicht überall. Eigene Funktionen gehen, aber ohne Rekursion, und sie müssen über der Stelle stehen, an der du sie aufrufst:

float brightness(vec3 c)
{
    return dot(c, vec3(0.299, 0.587, 0.114));
}

3. Rechnen

Eingebaute Funktionen

Fast alle Funktionen nehmen auch Vektoren und rechnen dann mit jeder Komponente einzeln: max(v, 0.0) setzt jede negative Zahl in v auf 0.

fwidth sagt, wie viel von einer Fläche ein Pixel gerade zeigt. Damit wird eine feine Linie, eine Fuge zwischen zwei Fliesen etwa, weit weg weich und blass, statt zu flimmern: Ist ein Pixel breiter als die Linie, zeichnet man sie nicht scharf, sondern nur so stark, wie sie den Pixel füllt.

float d = abs(fract(uv.x * 10.0) - 0.5);   // Abstand zur Mitte einer Fliese, 0 bis 0.5
float w = fwidth(uv.x * 10.0);              // so viel misst ein Pixel hier
float grout = smoothstep(0.5 - w, 0.5, d);  // eine Fuge am Rand, weich über einen Pixel

Mehr dazu, mit Beispielen zum Ausprobieren, steht in Prozedurale Texturen.

4. Mit raylib

Was raylib mitschickt

Wie du einen Shader in C lädst und Werte hineinschickst, steht bei raylib. Einige Werte setzt raylib selbst, wenn sie im Shader unter diesen Namen vorkommen:

Der kleinste Vertex-Shader reicht Farbe und Normale weiter und setzt die Ecke an ihren Platz:

#version 100

attribute vec3 vertexPosition;
attribute vec3 vertexNormal;
attribute vec4 vertexColor;
uniform mat4 mvp;

varying vec3 normal;
varying vec4 color;

void main()
{
    normal = vertexNormal;
    color = vertexColor;
    gl_Position = mvp * vec4(vertexPosition, 1.0);
}

5. Fehler finden

Wenn nichts oder Schwarz zu sehen ist

Einen Fehler im Shader findet der Compiler erst, wenn das Programm läuft. raylib meldet ihn in der Konsole der Seite, mit Zeilennummer im Shader; die Welt bleibt dann schwarz oder wird ohne Shader gezeichnet. Die häufigsten Ursachen:

• 1 statt 1.0, oder int und float gemischt.
• precision mediump float; fehlt im Fragment-Shader.
• Ein varying heißt im Vertex- und im Fragment-Shader verschieden oder hat einen anderen Typ.
• Ein uniform, das der Shader nirgends verwendet, entfernt der Compiler. GetShaderLocation liefert dann −1, und der Wert kommt nie an, ohne Fehlermeldung.

Einen Wert, den man nicht sieht, macht man zur Farbe. Eine Normale hat Zahlen von −1 bis 1, Farben gehen von 0 bis 1:

gl_FragColor = vec4(normalize(normal) * 0.5 + 0.5, 1.0);

Jetzt hat jede Richtung ihre Farbe: Oberseiten (0, 1, 0) werden hellgrün, Seiten nach +x rosa. Genauso lässt sich ein Abstand oder ein Lichtwert als Grauwert anzeigen, vec4(vec3(sunAmount), 1.0).

6. Zum Nachschlagen

• OpenGL ES 2.0 Reference Card der Khronos Group: alle Typen, Variablen und Funktionen von GLSL ES 1.00 auf zwei Seiten (die letzten beiden der PDF).
• GLSL ES 1.00 Specification: die vollständige Beschreibung der Sprache, für #version 100. Die Einschränkungen für Schleifen stehen im Anhang A.
• GLSL 3.30 Specification: die Fassung #version 330 für raylib ohne Browser.
• raylib: Shader-Beispiele (Abschnitt »shaders«) und ihre Shader in #version 100 zum Lesen und Abwandeln.
• The Book of Shaders von Patricio Gonzalez Vivo und Jen Lowe: eine Einführung in Fragment-Shader zum Ausprobieren im Browser, auch auf Deutsch.