gl_FragCoord

gl_FragCoord tergug naar de inleiding zie The Book of Shaders hoofdstuk 3

gl_FragCoord is een speciale of gereserveerde input variabele van het type vec4

gl_FragCoord bevat de relatieve coordinaten (x, y, z, 1/w) van de pixels in een fragment

In het voorbeeld worden de x en y kanalen (x en y coordinaten) van gl_FragCoord gebruikt.

Deze waarden worden genormaliseerd door ze te delen door de resolutie van het canvas (uniform vec2 u_resolution)

vec2 st = gl_FragCoord.xy/u_resolution;

Dankzij deze normalisatie naar [0.0 1.0] kan je de x en y waarden van de coordinaten gebruiken in de vec4 kanalen van gl_FragColor.

In onderstaande voorbeeld staat st.x in het rode en st.y in het groene kanaal van de output variabele gl_FragColor.

 

#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
void main() {
        vec2 st = gl_FragCoord.xy/u_resolution;
     //   gl_FragColor = vec4(vec3(st.x),1.0);       // geeft, in x richting, een overgang van zwart naar wit
        gl_FragColor = vec4(st.x,st.y,0.0,1.0);
}

Een shader met bewegende kleurpatronen met de uniform float u_time

Als voorbeeld een schets met abs(sin(u_time)/st.x) in het rode kanaal en st.y in het groene kanaal van de gl_FragColor vector.

In het canvas beweegt zich over het geel-rode veld, een zwart-groen veld van rechts naar links en terug.

st.x (staat in de noemer) heeft afhankelijk van de pixelpositie waarden tussen de 0.0 en 1.0, de sinus beweegt zich eerst van 0.0 naar 1.0

abs(sin(u_time)/st.x zal aanvankelijk veel groter zijn dan 1 !! in glsl worden deze waarden genormaliseerd naar 1

In het stijgende deel, als de sinus van 0 naar 1 gaat, gaat het rode kanaal van 1 naar 0 en het zwart-groene beeld komt op van rechts naar links.

In het dalende deel, als de sinus van 1 naar 0 gaat, gaat het rode kanaal van 0 naar 1 en het zwart-groene beeld zal zich weer naar rechts terug trekken.

regel 11 in- en regel 14 uitgeschakeld

regel 12 in- en regel 14 uitgeschakeld

 

#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
uniform float u_time;
 
void main() {
         vec2 st = gl_FragCoord.xy/u_resolution;
      // gl_FragColor = vec4(1.0, st.y, 0.0, 1.0);
      // gl_FragColor = vec4(0.0, st.y, 0.0, 1.0);  
      // gl_FragColor = vec4(0.0, abs(sin(u_time)/st.y), 0.0, 1.0);
         gl_FragColor = vec4(abs(sin(u_time)/st.x), st.y, 0.0, 1.0);
}

Flevopink