rechthoek met step functie in rect functie

rechthoek met rect functie waarin een step functie die in de mix functie de mixfactor is.

zie The Book of Shaders hoofdstuk 6 terug naar de inleiding

Van de vec2 size vector in de rect functie (regel 9) is het eerste kanaal de breedte en het tweede kanaal de hoogte van de rechthoek.

Met size [1.0, 1.0] is de rechthoek net zo groot als het canvas.

In regel 10 wordt size omgerekend naar een drempelwaarde in de step functie (regel 15).

Met size [0.5, 0.5] (zie regel 31) is de rechthoek [0.75, 0.75] en 0.125 is de drempel van de step functie.

shader 1

 

#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
float rect( in vec2 st,in vec2 size){
 size = 0.25-size*0.25; //door deze berekening is de rechthoek beter uitgelijnd
//met size [0.5,0.5] wordt deze [0.125, 0.125] 
//dit is het punt li onder van de rechthoek en is de drempel van de step functie in x en y richting
//met st*(1-st) ontstaat op 0.875 weer een drempel
// vec2 uv = step(size,(1.0-st)); //step werkt alleen voor rechts en rechtboven
// vec2 uv = step(size,st);       //step werkt alleen voor links en links onder
     vec2 uv = step(size,st*(1.0-st));   
     return uv.x*uv.y; // door de vermenigvuldiging ontstaat een and
}
 
void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 rect_color = vec3(0.475,0.565,0.088);//kleur van de rechhoek    
    vec3 color = vec3(0.0,1.0,0.5);           //achtergronds kleur   
//In de mix functie wordt met rect() = 0 de achtergrond kleur getoond (ColorA)
//In de mix functie wordt rect() = 1 de rechthoek kleur getoond (ColorB)
//st en vec2(0.5,0.5): zijn de argumenten van de rect functie
//door (0.5, 0.5) te veranderen wordt de rechthoek langer of breder
//De rechthoek wordt altijd vanuit het middelpunt van het canvas getekend.
    
    color = mix(color, rect_color, rect(st,vec2(0.5,0.05))); 
    gl_FragColor = vec4(color,1.0);
}

Door bij de st vector een getal op te tellen of af te trekken (regels 19, 21, en 23) verplaatst de rechthoek zich in schuiner richting.

Alle rechthoeken krijgen dezelfde kleur (regel 16).

Door color vermenigvuldiging en optelling in regel 20 en 22 hebben de rechthoeken verschillende kleurintesiteit.

shader 2

 
#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
float rect( in vec2 st,in vec2 size){
   size = 0.25-size*0.25; 
   vec2 uv = step(size,st*(1.0-st));   
   return uv.x*uv.y;
}
 
void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 rect_color = vec3(0.565,0.505,0.281);  
    vec3 color = vec3(0.587,0.548,1.000);  
  
    color = mix(color,rect_color,rect(st+0.044,vec2(0.5,0.05))); 
    color = color * mix(color,rect_color,
                    rect(st-0.100,vec2(0.05,0.5))); 
    color = color + mix(color,rect_color,
                    rect(st+0.220,vec2(0.030,0.130)));
    gl_FragColor = vec4(color,1.0);
}

In deze schets heeft iedere rechthoek een eigen kleur en een eigen offset vector.

In regels 26 t/m 28 staat color telkens in de mix functie, te beginnen met de achtergrondkleur (regel 17)

Dus color in regel 30 bevat alle gemixte kleuren.

Zo zal, door de offset vector van de st vector af te trekken, de vorm zich in x en y richting verplaatsen.

Door regel 11 in te schakelen en regel 10 uit te schakelen wordt smoothstep gebruikt.

Door in smoothstep vec2(0.001,0.001) in te voeren heeft smoothstep hetzelfde effect als de step functie.

Zie ook de code in de Book of shaders editor in dit voorbeeld heeft de achtergrond een gradient in y richting

shader 3

 
#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
float rect( in vec2 st,in vec2 size){
   size = 0.25-size*0.25; 
   vec2 uv = step(size,st*(1.0-st)); 
 //  vec2 uv = smoothstep(size,size+size*vec2(0.05,0.05),st*(1.000-st));
   return uv.x*uv.y;
}
 
void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 color = vec3(1.000,0.664,0.427); 
    vec3 rect_color1 = vec3(0.418,0.565,0.485); 
    vec3 rect_color2 = vec3(0.595,1.000,0.730);
    vec3 rect_color3 = vec3(1.000,0.852,0.328);
         
    vec2 offset1 = vec2(0.010,0.010);
    vec2 offset2 = vec2(-0.230,-0.070);
    vec2 offset3 = vec2(0.160,0.050);
    
    color = mix(color,rect_color1,rect(st-offset1,vec2(0.670,0.040))); 
    color = mix(color,rect_color2,rect(st-offset2,vec2(0.05,0.5))); 
    color = mix(color,rect_color3,rect(st-offset3,vec2(0.030,0.510)));
    
    gl_FragColor = vec4(color,1.0);
}

Flevopink