Three.js - Shaders: Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „== Einführung == === Was ist ein Shader? === Ein Shader ist die Basis von '''WebGL'''. Es ist ein Programm der in der '''Programmiersprach GLSL''' GLSL Progr…“) |
|||
| Zeile 2: | Zeile 2: | ||
=== Was ist ein Shader? === | === Was ist ein Shader? === | ||
| − | Ein Shader | + | Ein Shader ist ein Programm der in der '''Programmiersprach GLSL''' GLSL Programme werden direkt '''an die GPU''' gesendet werden und können rasend schnell verarbeitet werden. Dies ist die Basis von '''WebGL'''. |
| − | + | Die Aufgabe des Shaders ist '''jeden Vertex einer Geometrie zu positionieren''' und '''jedes sichtbares Fragment dieser Geometrie einzufärben'''. Das Ergebnis ist ein fertiges Rendering das wir im Browser über das Canvas Element darstellen können. Die Pixel auf dem Monitor können sich von den Pixeln in einem Rendering unterscheiden. Deshalt nutzt man den Terminus '''Fragment''' statt Pixel. Die Fragments beziehen sich auf die kleinste Einheit beim Rendering und bilden quasi das Pendant zu Pixeln in der Renderwelt. | |
| + | |||
| + | Shader sind nicht auf den Browser beschränkt. Auch native Programme oder Apps können Shader nutzen, hier geht es aber um den Einsatz von Shadern mit Three.js im Browser. | ||
=== Vertex und Fragment Shader === | === Vertex und Fragment Shader === | ||
Version vom 1. Januar 2022, 09:51 Uhr
Einführung
Was ist ein Shader?
Ein Shader ist ein Programm der in der Programmiersprach GLSL GLSL Programme werden direkt an die GPU gesendet werden und können rasend schnell verarbeitet werden. Dies ist die Basis von WebGL.
Die Aufgabe des Shaders ist jeden Vertex einer Geometrie zu positionieren und jedes sichtbares Fragment dieser Geometrie einzufärben. Das Ergebnis ist ein fertiges Rendering das wir im Browser über das Canvas Element darstellen können. Die Pixel auf dem Monitor können sich von den Pixeln in einem Rendering unterscheiden. Deshalt nutzt man den Terminus Fragment statt Pixel. Die Fragments beziehen sich auf die kleinste Einheit beim Rendering und bilden quasi das Pendant zu Pixeln in der Renderwelt.
Shader sind nicht auf den Browser beschränkt. Auch native Programme oder Apps können Shader nutzen, hier geht es aber um den Einsatz von Shadern mit Three.js im Browser.
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.
