smoothstep met niet lineare functies

smoothstep shaders met niet lineare functies. terug naar de inleiding

wiskundige functies om de lijn een kromming te geven door in de plot functie st.x als argument van een niet lineare functie

1) pow(grondtal, exponent) functie

Met de pow functie wordt het grondtal tot een macht verheven (machtsverheffen = raise to the power of)

pow(st.x, 5.0) retourneerd st.x tot de vijfde macht, coderegels 10 en 17 ingeschakeld

2) step(drempel,x) functie

step(0.5,st.x) zodra st.x = 0.5 gaat de functie van 0 naar 1, coderegels 11 en 18 ingeschakeld

3) mod(x, omslagpunt)

mod(st.x, 0.5) retourneerd x = y, op het omslagpunt geld x = 0.5 en y = 0.5 na de omslag geld x = 0.5 en y = 0.0 dus x-0.5 = y

zo ontstaat een zaagtand, coderegels 12 en 19 ingeschakeld, mod(st.x, 1.0) geeft een schuine lijn

4) smoothstep(t1, t2, x waarde van een punt op de curve;

smoothstep(0.1, 0.9, st.x); coderegels 13 en 20 ingeschakeld

effecten van veranderingen in de code

In de color variabele (regel 29) de zwart wit gradient veranderen door st.x te vermenigvuldigen met bijvoorbeeld 0.5 dus vec3(0.5*st.x)

regel 24 coord tussen [0,1] , middelpunt (0.5,0.5) met regel 25 ingeschakeld: coord [-1,1] , middelpunt = (0.0,0.0)

shader 1

 

#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
float plot1(vec2 st) {         
  // return smoothstep(0.00,0.01, abs(pow(st.x,5.)  - st.y)); 
  // return smoothstep(0.00,0.018,abs(step(0.5,st.x) - st.y)); 
  // return smoothstep(0.00,0.01, abs(mod(st.x,0.5) - st.y)); 
     return smoothstep(0.0,0.01,  abs(smoothstep(0.1,0.9,st.x) -st.y)); 
} 
 
float plot2(vec2 st) {    
  // return smoothstep(0.01,0.0, abs(pow(st.x,5.) - st.y));
  // return smoothstep(0.018,0.0,abs(step(0.5,st.x) - st.y)); 
  // return smoothstep(0.01,0.0, abs(mod(st.x,0.5) - st.y)); 
     return smoothstep(0.01,0.0, abs(smoothstep(0.1,0.9,st.x) - st.y));
}
 
void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;   
 // vec2 st = (gl_FragCoord.xy * 2.0 - u_resolution.xy)/u_resolution.y;
    float pct1 = plot1(st);
    float pct2 = plot2(st);
    vec3 color = pct1*vec3(st.x) + pct2*vec3(0.0,1.0,0.0);
gl_FragColor = vec4(color,1.0);
}

shaders met samengestelde niet lineare functies.

In dit voorbeeld wordt de functie "cubicPulse" (regel 10) ,bedacht door Iñigo Quiles, gebruikt. zie de glsl editor in The Book of Shaders

Iñigo Quiles maakt gebruik van een plot functie. In onderstaande code heb ik dit gesplitst in twee plot functies,

plot1 voor de zwart wit gadient en plot2 voor de curve.

De float formule (regel 29), het resultaat van de functie "CubicPulse", wordt als argument aan de plot functies gegeven.

Door "formule" in regel 33 met de zwart wit gradient vect3 te vermenigvuldigen zal deze op het gedrag van de curve reageren

Door het inschakelen van regel 18 is de afstand tussen t1 en t2 groter wat resulteerd in een brede zwart vervagende band rond de curve

shader 2



#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
//dit is een functie bedacht door Iñigo Quiles
float cubicPulse( float c, float w, float x ){
    x = abs(x - c);
    if( x>w ) return 0.0;
    x /= w;
    return 1.0 - x*x*(3.0-2.0*x);
}
 
float plot1(vec2 st, float formule) {    
 //  return smoothstep(0.0,0.70, abs(formule - st.y));
     return smoothstep(0.0,0.02, abs(formule - st.y));
}
 
float plot2(vec2 st, float formule) {    
     return smoothstep(0.02,0.0, abs(formule - st.y));
}
 
void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;   
   
    float formule = cubicPulse(0.5,0.2,st.x);
    float pct1 = plot1(st,formule);
    float pct2 = plot2(st,formule);
    
    vec3 color = pct1*vec3(formule-0.01*st.x) + pct2*vec3(0.0,1.0,0.0);
    gl_FragColor = vec4(color,1.0);
}

Flevopink