Einführung in WGSL

Die WebGPU Shading Language (WGSL)

Wir haben inzwischen einige Shader geschrieben, Normalen verarbeitet und sogar eine Kugel mit dem Phong-Reflexionsmodell beleuchtet. Dabei haben wir ganz selbstverständlich WGSL verwendet. Aber was ist das eigentlich für eine Sprache? Woher kommt sie, und warum sieht sie ein bisschen wie Rust aus?

Was ist WGSL?

WGSL steht für WebGPU Shading Language. Es ist die Shader-Sprache von WebGPU und wurde speziell für diese Grafik-API entwickelt.

Während wir mit JavaScript oder TypeScript unsere WebGPU-Anwendung vorbereiten, Buffer anlegen und Render-Pipelines konfigurieren, beschreiben wir mit WGSL die Berechnungen, die auf der GPU stattfinden.

Dafür haben wir bereits zwei Arten von Shadern kennengelernt:

• Vertex-Shader verarbeiten die einzelnen Vertices unserer Geometrie.
• Fragment-Shader berechnen die Farben der Fragmente, aus denen schließlich das Bild entsteht.

Später werden wir mit Compute-Shadern eine dritte Möglichkeit kennenlernen: Berechnungen auf der GPU, die nicht unmittelbar an das Zeichnen von Geometrie gebunden sind.

Woher kommt WGSL?

WGSL wird im Rahmen der WebGPU-Standardisierung beim W3C entwickelt. Die Sprache gehört damit zu WebGPU und ist nicht einfach eine Erweiterung einer älteren Shader-Sprache.

Vielleicht hast du schon von GLSL gehört, der OpenGL Shading Language. Sie wird bei OpenGL verwendet. WebGL nutzt eine Variante davon, die OpenGL ES Shading Language (ESSL).

WebGPU geht einen anderen Weg und verwendet mit WGSL eine eigene Shader-Sprache.

Dabei spielt auch die Entwicklung moderner Grafik-APIs eine Rolle. Vulkan, Metal und Direct3D 12 haben WebGPU konzeptionell beeinflusst. Je nach Betriebssystem und Implementierung kann WebGPU auf solche Grafik-APIs zurückgreifen.

Das bedeutet allerdings nicht, dass WGSL von Vulkan abstammt. WebGPU stellt eine gemeinsame Schnittstelle bereit, und WGSL sorgt dafür, dass wir unsere Shader unabhängig von der darunterliegenden Grafik-API schreiben können.

Warum sieht WGSL wie Rust aus?

Wenn du schon einmal Rust gesehen hast, werden dir einige Schreibweisen bekannt vorkommen.

Zum Beispiel:

WGSL

struct Material {
    color: vec4f,
    shininess: f32,
};

fn calculateBrightness(normal: vec3f, lightDirection: vec3f) -> f32 {
    return max(dot(normal, lightDirection), 0.0);
}

Wir verwenden struct für Strukturen, fn für Funktionen und schreiben Typen hinter einen Doppelpunkt. Auch let und var erinnern an Rust.

Diese Ähnlichkeit ist kein Zufall: WGSL übernimmt einige syntaktische Ideen, ist aber keine Variante von Rust. Es handelt sich um eine eigenständige Sprache mit eigenen Regeln, Datentypen und Funktionen für die GPU-Programmierung.

Wo wird WGSL verwendet?

WGSL ist nicht nur für kleine WebGPU-Beispiele im Browser interessant. Die Sprache wird auch außerhalb des Browsers eingesetzt, etwa in Grafikprogrammen, Simulationen und Spiele-Engines.

Ein schönes Beispiel ist Bevy, eine in Rust entwickelte Spiele-Engine. Bevy verwendet die Grafikbibliothek wgpu und setzt auch intern auf WGSL-Shader. Eigene Materialien und Grafikeffekte lassen sich ebenfalls in WGSL schreiben.

Die Bibliothek wgpu kann sowohl in Webanwendungen als auch in nativen Programmen verwendet werden. So lässt sich WGSL beispielsweise auch in einer Desktop-Anwendung einsetzen, die vollständig in Rust geschrieben ist.

Andere bekannte Spiele-Engines gehen teilweise andere Wege. Godot verwendet eine eigene Shader-Sprache und arbeitet auch mit SPIR-V. Für Godot gibt es inzwischen ein experimentelles WebGPU-Projekt, das Shader nach WGSL übersetzt. Unreal Engine setzt dagegen auf eine eigene Shader-Infrastruktur, die unter anderem HLSL verwendet.

WGSL ist also nicht die universelle Shader-Sprache aller modernen Grafik-Engines. Sie hat aber längst ihren Platz über den Browser hinaus gefunden. Und mit WebGPU und wgpu können wir dieselbe Sprache auf unterschiedlichen Plattformen einsetzen.

WGSL genauer kennenlernen

Bisher haben wir WGSL immer dann kennengelernt, wenn wir eine bestimmte Aufgabe lösen wollten. Jetzt schauen wir uns die Sprache etwas systematischer an.

In den nächsten Abschnitten beschäftigen wir uns unter anderem mit Variablen, Datentypen, Vektoren, Operatoren und Funktionen. Danach sehen wir uns genauer an, wie WGSL Daten empfängt und zwischen Shader-Stufen weitergibt.

Vieles davon kennst du bereits aus unseren Beispielen. Jetzt finden wir heraus, welche Regeln dahinterstecken und welche Möglichkeiten WGSL darüber hinaus bietet.