vier curven

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

step functie (regel 16) als mixfactor 
step functie (regel 16) als mixfactor

 

de pow functie (regel 17) als mixfactor

de pow functie (regel 17) als mixfactor

 

de mod functie (regel 18) als mixfactor

de mod functie (regel 18) als mixfactor

vier curven in kleur met blauwe achtergrond.    zie: The Book of Shaders hoofdstuk 6               terug naar de inleiding

In het canvas zijn 4 curven geplot. De berekeningen van deze curven (regel 22 t/m 25) komen in de 4 kanalen van vec4 formule.
De return code  in regel 10 en 11, van de plot functie geven hetzelfde resultaat.
de vec3 color van de blauwe achtergrond (regel 27) komt in color van regel 29 en het color resultaat

komt in color van regel 30 enz enz, zo ontstaat een vec3 color die in gl_FragColor (regel 34) komt

Er zijn in glsl vier manieren om de kanalen van vectoren te benaderen, zie het lijstje

vec4 vector;
vector[0] = vector.r = vector.x = vector.s;
vector[1] = vector.g = vector.y = vector.t;
vector[2] = vector.b = vector.z = vector.p;
vector[3] = vector.a = vector.w = vector.q
 
 

#ifdef GL_ES
precision mediump float;
#endif
 
#define PI 3.14159265359
uniform vec2 u_resolution;
  
float plot(vec2 st, float formule) {    
     return smoothstep(0.01,0.0, abs(formule - st.y));
  // return smoothstep(formule-0.01,formule, st.y)-smoothstep(formule,formule+0.01, st.y);
}
  
void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;   
    vec4 formule = vec4(0.0);  
    
 //formule is nu een 4 kanalen of fields vector om zo 4 curven te plotten 
// Je kan natuurlijk meerdere curven tonen door nog een plot functie aan te maken
    formule.a = smoothstep(0.2,0.8, st.x);
    formule.r = pow(st.x,5.0);
    formule.g = sin(st.x*PI);
    formule.b = smoothstep(0.8,0.2, st.x);
        
    vec3 color = vec3(0.0,0.0,1.0);  //is de blauwe achtergrond
//formule.a,r,g,en b zijn het resultaat van de berekening en worden als float aan de plot functie gegeven
    color = color+plot(st,formule.a)*vec3(1.0,0.0,0.0);
    color = color+plot(st,formule.r)*vec3(1.0,0.0,0.0);
    color = color+plot(st,formule.g)*vec3(0.0,1.0,0.0);
    color = color+plot(st,formule.b)*vec3(1.0,1.0,0.0);
    
    gl_FragColor = vec4(color,1.0);
}
 

Het mixen, met de mix() functie, van colorA en ColorB.

de mix functie heeft 3 argumenten, mix(colorA, ColorB, mixfactor);  met;

vec3 colorA = vec3(0.0, 0.0, 1.0);

vec3 colorB = vec3(1.0, 0.0, 0.0);

mixfactor kan variëren tussen de 0 en 1

als mixfactor = 0 of kleiner dan 1 wordt colorA getoond is blauw
     mixfactor = 1 of groter dan 1 wordt colorB getoond is rood

     mixfactor = 0.5 geeft de kleur paars

Het is ook mogelijk om als mixfactor een vec3 variabele te gebruiken, zo kunnen de 3 kleurkanalen van colorA en ColorB apart worden gemengd.

schets waarin de mixfactor variëert met abs(sin(u_time)/2.0);

Het inschakelen van regel 11 en 12 en het uitschakelen van regel 14 en 15 heeft hetzelfde resultaat.

ColorA en ColorB in regel 11 en 12 krijgen de data van vec3 kleur in regel 9.  Dit is een van de manieren om in glsl data van een vector te benaderen.

 

#ifdef GL_ES
precision mediump float;
#endif
 
uniform float u_time;
 
//kleurkanalen     r    g    b  
vec3 kleur = vec3(0.0, 1.0, 0.5);
 
//vec3 colorA = vec3(kleur.rr, kleur.b);
 
//vec3 colorB = vec3(kleur.r, kleur.g, kleur.r); 

vec3 colorA = vec3(0.0,0.0,0.5);
vec3 colorB = vec3(0.0,1.0,0.0);
vec3 color = vec3(0.0);
 
void main() {
   color = mix(colorA, colorB, abs(sin(u_time)/2.0));
   gl_FragColor = vec4(color,1.0);
} 
 

Een schets met de functies step, floor, pow en mod als mixfactor

omdat de output van de functies tussen de 0 en 1 is moeten de pixelcoordinaten tussen de 0 en 1 worden genormaliseerd

De step functie als mixfactor (regel 16) 
Als in step(0.5,st.x)   st.x ≥  0.5 --> step is "1"   (de drempelwaarde is 0.5)

Als in step(0.5,st.x)   st.x < 0.5 --> step is  "0"

De floor functie als mixfactor (regel 17)
Als floor(2.0*st.x)   < 1  --> floor is "0"
Als floor(2.0*st.x)   ≥ 1  --> floor is "1"
 
 

#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
//kleurkanalen      r    g    b  
vec3 kleur  = vec3(1.0, 0.0, 0.4);
vec3 colorA = vec3(kleur.rr, kleur.b);
vec3 colorB = vec3(kleur.r, kleur.g, kleur.r);
vec3 color  = vec3(0.0);
 
void main() {
vec2 st = gl_FragCoord.xy/u_resolution;         
  color = mix(colorA, colorB, step(0.5,st.x));   
//color = mix(colorA, colorB, floor(2.0*st.x));
//color = mix(colorA, colorB, pow(st.x,1.5));  
//color = mix(colorA, colorB, mod(st.y,0.5));
  gl_FragColor = vec4(color,1.0);
}