Three.js - Shaders

Einführung

Was ist ein Shader?

Ein Shader ist die Basis von WebGL. Es ist ein Programm der in der Programmiersprach GLSL GLSL Programme werden direkt an die GPU gesendet werden. Sie werden benutzt um jeden Vertex einer Geometrie zu positionieren und jedes sichtbares Fragment dieser Geometrie einzufärben. Das Ergebnis können wir als fertiges Rendering darstellen. Im Browser geht das über das Canvas Element. Aber auch native Programme oder Apps können Shader nutzen, hier geht es aber um den Einsatz von Shadern mit Three.js im Browser.

Man sagt Fragment statt Pixel, denn die Fragments beziehen sich auf die kleinste Einheit beim Rendering und können sich am Ende von den dargestellten Pixeln auf dem Monitor unterscheiden. Man kann sie sich aber wie Pixel vorstellen.

Vertex und Fragment Shader

Der Renderprozess nutzt 2 Arten von Shadern.

Der Vertex Shader verarbeitet alle Geometriedaten (Objekte, Kamera,...) und projiziert sie auf die 2D-Ebene des fertigen Renderbilds.

Der Fragment Shader färbt anschließend jedes sichtbare Fragment des Shaders ein.