01 · Problem
Wofür braucht man das?
WebGL liefert Kompilier- und Linkfehler erst zur Laufzeit; Boilerplate und vergessene Ressourcenfreigabe machen Shader-Setup fehleranfällig.
02 · Denkmodell
Das mentale Modell
Vertex- und Fragmentshader werden separat kompiliert, zu einem Programm gelinkt, validiert und mit explizitem dispose-Lebenszyklus zurückgegeben.
Die Factory kompiliert, linkt, liest Uniforms/Attribute und aktiviert das Programm. Teilweise gefüllte Maps werden als vollständig gecastet, Fehlerpfade und eine dispose-Methode löschen Shader beziehungsweise Programme jedoch nicht zuverlässig.
03 · Kontrollfluss
Was passiert in welcher Reihenfolge?
- Shader je Stufe erzeugen, Source setzen, kompilieren und Status prüfen.
- Nur erfolgreiche Shader an ein Programm hängen und Linkstatus validieren.
- Angeforderte Locations auflösen und fehlende Pflichtwerte als Fehler melden.
- Shader nach dem Linken löschen und das Programm beim dispose freigeben.
04 · Bauteile
Die entscheidenden Verträge
createShader
Kompiliert GLSL und liefert eine wiederverwendbare Programmhülle.
uniforms / attributes
Typisierte Maps der angeforderten WebGL-Locations.
use
Aktiviert das gelinkte Programm im aktuellen Context.
05 · Build it yourself
Selbst implementieren
Eine kleine Compile-Funktion braucht vor allem vollständige Fehlerpfade und Resource Cleanup.
- Shader erzeugen und bei fehlender Allokation sofort abbrechen.
- Compile-Status prüfen und Log vor dem Löschen sichern.
- Auch bei späterem Linkfehler jeden bereits erzeugten Shader freigeben.
function compile(gl: WebGL2RenderingContext, type: number, source: string) {
const shader = gl.createShader(type);
if (!shader) throw new Error("Shader allocation failed");
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
const log = gl.getShaderInfoLog(shader) ?? "Unknown shader error";
gl.deleteShader(shader);
throw new Error(log);
}
return shader;
}06 · Verifizieren
Was du testen solltest
- Ungültiges GLSL gibt das Compilerlog zurück und löscht den Shader.
- Linkfehler löschen Programm sowie beide kompilierten Shader.
- Fehlende verpflichtende Uniforms werden vor dem ersten Frame erkannt.
07 · Grenzen
Kompromisse und Stolperfallen
- Strikte Location-Prüfung erkennt Tippfehler früh, kann aber wegoptimierte Uniforms ablehnen.
- Generische Typmaps bieten Komfort, garantieren ohne Laufzeitprüfung keine tatsächliche GLSL-Schnittstelle.
- Programmcaching spart Compilezeit und benötigt Context-Verlust- sowie Invalidierungslogik.
WebGL-Ressourcen gehören zum Context. Behandle contextlost und dispose als Teil der öffentlichen API.
08 · Weiterdenken