step functies in een vector 

vierkant staat linksonder

 

step functies in vectoren

vierkant staat in het midden 

 

nu met achtergrondskleur, (regel 17) ingeschakeld.

vierkant met achtergrondskleur,
regel 18 ingeschakeld , regel 19 uitgeschakeld

 

smoothstep ipv step functie

smoothstep ipv step functie

 

 

     
  regel 29 ingeschakeld, regel 30 uitgeschakeld

 

shader met 3 vierkantjes

vierkant met step functies in een float          zie The Book of Shaders hoofdstuk 7               terug naar de inleiding

De variabelen left en bottom (regels 15 en 16)  zijn het resultaat van  step functies  in horizontale (x) en verticale (y) richting.
Als left en bottom = 1.0 is de pixel groen.
Door left en bottom te vermenigvuldigen ( regel 18) ontstaat een AND functie want  1.0*1.0 = 1 en 0.0*1.0 = 0
Alleen als bottom en left 1.0 zijn is de color groen (regel 18).
 
 
 
#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
void main(){
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 color = vec3(0.0);
 
    // twee variabelen met step in x en y richting
    // Als beide variabelen 1 zijn is de pixel groen    
     float left = step(0.1,st.x);   
     float bottom = step(0.1,st.y);
    // Door left en bottom te vermenigvuldigen ontstaat een AND functie
    color = left*bottom*vec3(0.0,1.0,0.0);
    gl_FragColor = vec4(color,1.0);
}
 
 
 
een vierkant met step functies in een vector met de x en y kanalen
In de code kan de grootte en positie van het vierkant worden aangepast. De vorm blijft altijd vierkant.
Als in de step functies (regel 13 en 15) de drempel 0.5 is dan is het canvas zwart.
Door regel 18 in te schakelen en regel 19 uit te schakelen heeft het vierkantje, dankzij de mix functie, een achtergrondskleur.
 
 
 
 
#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
void main(){
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 color = vec3(0.0);
//De stepfuncties als vec2 variabelen
    vec2 botleft = step(0.1,st);   
//Door 1.0-st is het coordinatenstelsel omgekeerd en het (0,0) punt staat nu rechts boven
    vec2 topright = step(0.4, 1.0-st);
//pct is het resultaat van een AND met 4 ingangen
    float pct = botleft.x * botleft.y * topright.x * topright.y;
//  color = mix(vec3(0.111,0.565,0.522), vec3(0.390,1.000,0.440),pct);
    color = pct*vec3(0.0,1.0,0.0);   
    gl_FragColor = vec4(color,1.0);
}
 
shader met 3 vierkantjes
Het middelste vierkant is met smoothstep samengesteld (regels 23 en 24) en krijgt zo onscherpe randen.
In regels 29 t/m 32 worden de kleuren van de vierkantjes opgeteld. color in regel 34 is het eindresultaat
Als de kleuren van de vierkanten R, G en B zijn zal het middelste vierkantje wit zijn
Door regel 29 in te schakelen en regel 30 uit te schakelen is een kleurverloop te zien van
de achtergrond en de vierkanten linksonder en rechtsboven.
 
 

#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
uniform float u_time;
 
void main(){
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 color = vec3(0.0);
//de stepfuncties van het vierkantje links onder
    vec2 liOnLi = step(0.07 ,st);  //0.07 is de rand linksonder 
    vec2 liOnRe = step(0.4, 1.0-st);//0.4 is de rand rechtsboven
    float liOn  = liOnLi.x * liOnLi.y * liOnRe.x * liOnRe.y;
    
//de stepfuncties van het vierkantje rechts boven
    vec2 reBoLi = step(0.4,st);  //0.4 is de rand linksonder 
    vec2 reBoRe = step(0.07, 1.0-st);//0.07 is de rand rechtsboven
    float reBo  = reBoLi.x * reBoLi.y * reBoRe.x * reBoRe.y;
    
//smoothstep functies van het middenvierkant    
    vec2 miLi = smoothstep(0.1,0.2,st); 
    vec2 miRe = smoothstep(0.1,0.2, 1.0-st);
    float mi  = miLi.x *miLi.y * miRe.x * miRe.y;
    
//voor het middelste vierkant wordt de mix functie gebruikt,
//ColorA is de achtergrondskleur        ColorB is de kleur van het middelste vierkant
//  color = mix(vec3(0.557,1.000,0.952), vec3(0.379,0.287,1.000),abs(sin(u_time/2.0)));
    color = mix(vec3(0.557,1.000,0.952), vec3(0.379,0.287,1.000),mi);    
    color = color + liOn*vec3(1.000,0.319,0.357);
    color = color + reBo*vec3(0.154,0.536,1.000);
    
    gl_FragColor = vec4(color,1.0);
}

 

step(0.5,x);

step(0.5,x);

 

step functies in een float 

zoals in de eerste schets

 

 step functies in een vector

 

 smoothstep functies in een vector

smoothstep met breed stijgende curve