Three.js - Shaders

Links

https://www.shaderific.com/glsl-functions - Überblick über Funktionen https://thebookofshaders.com/ - Gutes Tutorial und guter Überblick http://localhost/www/LEARNING/ThreeJS/Graphtoy/Graphtoy.html https://iquilezles.org/www/index.htm - useful math https://www.youtube.com/watch?v=NQ-g6v7GtoI&list=PL4neAtv21WOmIrTrkNO3xCyrxg4LKkrF7&index=4 - Shader Liniting in VSC und Shader Tutorial https://www.shadertoy.com/ https://learnopengl.com/Getting-started/Coordinate-Systems

Einführung

Shader sind ein komplexes Thema und du benötigst viel Zeit zum Üben. Man kann aber auch ohne ein Mathegenie zu sein tolle Shader schreiben und es stehen dir ganz neue grafische Möglichkeiten zur Verfügung, die sich sonst nicht realisieren lassen würden.

Quelle zu großen Teilen: https://threejs-journey.com/lessons/27

Was ist ein Shader?

Ein Shader ist ein Programm der in der Programmiersprache GLSL (OpenGL ES Shading Language) 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.

Wie funktioniert der Shader?

Es ist wichtig die Arbeitsweise zu verstehen.

Der Vertex Shader wird für jeden Vertex ausgeführt. Dabei bekommt er Daten, wie z.b. die Position, die sich bei jedem Vertex ändern. Diese nennt man Attributes. Daten die für jeden Vertex gleich bleiben nennt man Uniform. Attribute kann man nur an den Vertex Shader senden. Wenn sie im Fragment Shader benötigt werden, muss der Vertex Shader als Varying weitersenden. Uniforms stehen auch direkt im Fragment Shader zur Verfügung.

Wenn der Vertex Shader die Positionierung der Vertices erledigt hat. Färbt der Fragment Shader jedes Fragment ein. Er färbt also nicht nur die Vertices sondern auch die Bereiche dazwischen. Dabei interpoliert er automatisch die Farbe auf Basis der vorhandenen Information (z.B.Farbe der umgebenden Vertices, Faces, Texturen...)

Zusammenfassung

Fehler beim Erstellen des Vorschaubildes: Datei fehlt

• Der Vertex Shader positioniert Vertices auf dem Rendering.
• Der Fragment Shader färbt jedes sichtbare Fragment (quasi Pixel) der Geometrie.
• Der Fragment Shader wird nach dem Vertex Shader ausgeführt.
• Daten die sich von Vertex zu Vertex unterscheiden nennt man Attribute und können nur an den Vertex Shader gesendet werden.
• Daten die sich nicht zwischen den Vertices unterscheiden nennt man Uniform.
• Auf Uniforms kann man im Vertex und im Fragment Shader zugreifen.
• Wir können mit einem Varying Daten vom Vertex zum Fragmentshader senden.