Computergrafik
Beispiele für Fragment-Shader
Farbe
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
Testen!
Aufgabe: Schwarz-Weiß-Feld
Erzeugen Sie ein Schwarz-Weiß-Feld wie in der Abbildung dargestellt.
Hinweise:
- Beginnen Sie gern mit if/else
- Versuchen Sie dann Funktionen zu nutzen
5 Min
Lösung: Schwarz-Weiß-Feld
Aufgabe: Einfaches Rechteck
Erzeugen Sie ein einfaches Rechteck, das nur über den unteren linken Eckpunkt verändert werden kann.
Hinweis:
- Man kann den Output mehrerer
step-Funktionen kombinieren
5 Min
Lösung: Einfaches Rechteck
Aufgabe: Vollvertiges Rechteck
Erzeugen Sie ein nun ein vollwertiges Rechteck, bei dem alle Eckpunkte eingestellt werden können (siehe Abb).
Hinweis:
- Man kann die
step-Funktion auf unterschiedliche Art und Weise nutzen
5 Min
Lösung: Vollwertiges Rechteck
Aufgabe: Mehrere Rechtecke
Erweitern Sie Ihren Code dahingehend, dass mehrere (vollwertige) Rechtecke gezeichnet werden können. Legen Sie dafür bitte auch eine rectangle-Funktion an.
Hinweise:
- Man kann (binäre) Ausgaben relativ einfach durch Addition kombinieren.
5 Min
Lösung: Mehrere Rechteck
Kreis
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution - 0.5;
float d = length(uv);
float c = step(d, 0.2);
gl_FragColor = vec4(vec3(c), 0.800);
}Testen!
live
Aufgabe: Mehrere Kreise
Erweitern Sie Ihren Code dahingehend, dass mehrere Kreise gezeichnet werden können. Legen Sie dafür bitte auch eine circle-Funktion an.
10 Min
Pulsierende Muster
sin-Funktion
cos-Funktion
Wellenbewegungen
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution;
float y = sin(uv.x * 10.0 + u_time);
float c = step(uv.y, 0.5 + y * 0.1);
gl_FragColor = vec4(vec3(c), 1.0);
}Testen!
CG3 Fragment-Shader Beispiele
By blackbill
