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!

pencil

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!