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.
Verwaltet Shader-Kompilierung, Linking, benötigte Locations und idempotente Freigabe. Unit-Tests verwenden einen deterministischen WebGL-Mock. Browserspezifische Treiber und Context-Wiederherstellung benötigen Integrationstests.
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
ShaderProgramFactoryKompiliert, linkt und besitzt ein WebGL-Programm.getUniformLocations / getAttributeLocationsVerlangt vorhandene Locations für jeden angefragten Namen.use / disposeAktiviert oder gibt das Programm explizit frei.05 · Selbst bauen
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 solltest du testen?
- 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.
Selbst ausprobieren
Formuliere die erste Prüfaussage als fehlschlagenden Test, implementiere die kleinste Korrektur und ergänze einen Grenzfall.
Ungültiges GLSL gibt das Compilerlog zurück und löscht den Shader.
Ansatz vergleichen
Dein Test sollte beim gezielten Verletzen der Invariante fehlschlagen und nach der Korrektur wieder bestehen. Halte den Aufbau deterministisch und prüfe ein beobachtbares Ergebnis.
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.
Unit-Tests verwenden einen deterministischen WebGL-Mock. Browserspezifische Treiber und Context-Wiederherstellung benötigen Integrationstests.
08 · Weiterdenken
Quellcode und verwandte Ideen
yarn tsx packages/webgl-shader-factory/examples/basic.ts