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