vierkant met step functies

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).

shader 1

  

#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.

shader 2

  

#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.

shader 3

 

#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);
}

Flevopink