functies

mod(st.x, omslagpunt); terug naar de inleiding zie ook The Book of Shaders hoofdstuk 6

het artikel bevat 5 shaders, shader 2 met fract() , shader3, met clamp, shader 4 met sign(), shader 5, met distance()

mod(st.x, 0.5); retourneerd x = y voor x = 0 t/m x = 0.5 waarna x weer 0 word, enz

zo ontstaat een zaagtand. mod(st.x, 1.0); geeft een canvas met een verticaal verlopende zwart naar wit gradient

Onderstaande shader geeft 3 verticale stroken met een zwart naar 33% wit gradient.

Met float d = 3.0*mod(st.x.0.333); (regel 13) hebben de stroken een zwart naar wit gradient. (want 3.0*0.3333 =0.9999)

<-- y = mod(x, 0.333); Zo beschrijft de functie, met een x as tussen [0.0 , 1.0], drie zaagtanden

Met een y as tussen [0.0 , 1.0] varrieert y tussen de 0 en 0,333

shader 1

 

#ifdef GL_ES
precision mediump float;  
#endif
 
uniform vec2 u_resolution;
 
   void main() {
        vec2 st = gl_FragCoord.xy/u_resolution;          
        float d = mod(st.x,0.333);      
       // float d = 3.0*mod(st.x,0.3333); 
        gl_FragColor = vec4(vec3(d),1.0);
 }

y = fract(x) retourneerd x = y

$y = fract(x*3.0)$

Met float d = fract(st.x); heeft het canvas een verticale gradient van zwart naar wit.

Met float d = fract(st.x*3.0); heeft het canvas 3 verticale stroken met gradienten van zwart naar wit.

Met float d = fract(st.y*3.0); bijschakelen (regel 11) en regel 14 inschakelen heeft het canvas verticale en horizontale stroken met een kleurtje.

<--- y = fract(x*3.0) 3.0*mod(st.x,0.3333); heeft hetzelfde effect als fract(st.x*3.0);

shader 2

 

#ifdef GL_ES
precision mediump float;  
#endif
 
uniform vec2 u_resolution;
 
void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;            
    float d = fract(st.x*3.00);   
  //float d2 = fract(st.y*3.00); 
       
    gl_FragColor = vec4(vec3(d),1.0);  
  //gl_FragColor = d2*d*vec4(vec3(0.724,1.000,0.199),1.0);
 }

y = clamp(x, start clamp, stop clamp)

clamp = klem, hier wil dat zeggen dat, tussen clamp start en clamp stop, x aan y vast zit dus x = y. clamp(x 00 10

float d = clamp(st.x, 0.5, 1.0); tussen x = [0.5 , 1.0] geldt x = y.

Tot het midden (x = 0.5) is het canvas grijs daarna een gradient van grijs naar wit y = clamp(x,0.0,1.0); is hetzelfde als y = fract(x); -->

<----- y = clamp(x, 0.5, 1.0)

shader 3

 

 
#ifdef GL_ES 

precision mediump float;  
#endif
 
uniform vec2 u_resolution;
 
void main() {
   vec2 st = gl_FragCoord.xy/u_resolution;      
   float d = clamp(st.x,0.5,1.0);       
 
   gl_FragColor = vec4(vec3(d),1.0);
}

y = sign(x)

voor alle waarden van x < 0 geld y = 0

voor alle waarden van x > 0 geld y = 1

met float d = sign(st.x-0.5); is de eerste helft van het canvas zwarten de andere helft wit

met float d = sign(st.x-0.5)/2.0; is de eerste helft van het canvas zwart en de andere helft is grijs

met float d = -sign(st.x-0.5); is de eerste helft van het canvas wit en de andere helft is zwart

met float d = sign(st.y-0.5); (regel 11) en float d2 = -sign(st.x-0.5);(regel 12) ontstaat er, als regel 14 is ingeschakeld, een groen zwart blokpatroon

<----- y = sign(st.x-0.5)/2.0;

shader 4

 

#ifdef GL_ES
precision mediump float;  
#endif
 
uniform vec2 u_resolution;
 
void main() {
     vec2 st = gl_FragCoord.xy/u_resolution;  
     float d = sign(st.x-0.5)/2.0;     
    //float d = sign(st.y-0.5);                     
    //float d2 = -sign(st.x-0.5);              
     gl_FragColor = vec4(vec3(d),1.0);
    //gl_FragColor = d*d2*vec4(vec3(0.348,1.000,0.181),1.0);
}

float afstand = distance(vec2(1), vec2(2));

De distance functie heeft twee vec2 argumenten. de functie retourneerd, als float, de afstand tussen deze vectoren.

Met de eerste vector de coordinatoren van de pixels en de tweede vector een pixel in het canvas.

bijvoorbeeld float d = distance(st , vec2(0.5); hierin is vec2(0.5); de pixel (0.5,0.5).

met vec3 color(d); ontstaat zo een vervagende cirkel rond de zwarte pixel (0.5, 0.5)

twee distance functies opgeteld

float d = distance(st , vec2(0.3)) + distance(st , vec2(0.7)); Nu onstaat een ellipse met grijze punten op (0.3 , 0.3) en (0.7 , 0.7)

Hoe verder de punten van elkaar hoe vager de cirkels, want "d" kan alleen 0 zijn als de twee vectoren in hetzelfde punt staan.

shader 5

 

#ifdef GL_ES

precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
void main(){
    vec2 st = gl_FragCoord.xy/u_resolution;     
    float d = distance(st,vec2(0.5));       
  //float d = distance(st,vec2(0.3)) + distance(st,vec2(0.7));  
    
    vec3 color = vec3(d);    
    gl_FragColor = vec4(color, 1.0);
}

Flevopink