vervagende lijn met zwart wit gradient als achtergrond

 vervagende lijn
met zwart wit gradient als achtergrond

 

vervagende groene lijn

vervagende groene lijn

  

Het eindresultaat, de lijn is niet vervagend

 Het eindresultaat, de lijn is niet vervagend

 

coderegel 10 ingeschakeld

coderegel 10 ingeschakeld

 

coderegel 11 ingeschakeld

coderegel 11 ingeschakeld

Een schuine lijn construeren met smoothstep in de functie plot die in regel 14 in de main wordt aangeroepen.                 terug naar de inleiding

Het argument van de plot functie is de vector st met de kanalen st.x en st.y

Het gedrag van smoothstep
t1 > t2 dus de curve is dalend en t1 bevindt zich rechts van t2, de afstand tussen t1 en t2 is 0.01
De smoothstep curve is abs(st.x - st.y); .Voor de groene lijn ligt abs(st.x - st.y) tussen de 0 en 0.01
De waarden van (st.x-st.y) zijn boven de lijn negatief deze waarden worden door abs + Onder de lijn zijn deze waaren groter dan 0.01
Omdat de curve dalend (van hoog naar laag) is wordt pct = 0 en is de achtergrond zwart
Als de curve stijgend  (van laag naar hoog) is wordt pct = 1 en is de achtergrond groen
 
 

#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
float plot(vec2 st) {    
    return smoothstep(0.01, 0.0, abs(st.x - st.y));
}
 
void main() {
      vec2 st = gl_FragCoord.xy/u_resolution;
      float pct = plot(st);
      vec3 color = pct*vec3(0.0,1.0,0.0);
      gl_FragColor = vec4(color,1.0);
}

Een schuine lijn construeren met een van zwart naar wit vervagende achtergrond

De schuine lijn mag niet met de achtergrond mee vervagen

Eigenschappen van  smoothstep

t1 > t2 dus de curve is dalend en t2 bevindt zich rechts, de afstand tussen t1 en t2 is 0.01

Het deel pct*vec3(0.0,1.0,0.0) in de vec3 color variabele (regel 19 ) zorgt voor de groene lijn
Het deel vec3(st.x) in de vec3 color variabele zorgt voor de zwart wit gradient

Deze twee delen samenvoegen door ze op te tellen:

vec3 color = vec3(st.x) + pct*vec3(0.0,1.0,0.0); geeft een zwart wit gradient met een groene lijn die ook vervaagd

het eerste deel ook vermenigvuldigen met pct geeft:

vec3 color = pct*vec3(st.x) + pct*vec3(0.0,1.0,0.0) geeft een vervagende groene lijn (regel 18)

Door de gradient vector te vermenigvuldigen met  (1-pct)  krijgt alles buiten de lijn de gradient (regel 19)

vec3 color = (1-pct)*vec3(st.x) + pct*vec3(0.0,1.0,0.0);

 

 
#ifdef GL_ES 

precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
float plot(vec2 st) {    
    return smoothstep(0.01, 0.0, abs(st.x - st.y));
}
 
void main() {
vec2 st = gl_FragCoord.xy/u_resolution;    
    float pct = plot(st);    
  //vec3 color = vec3(st.x) + pct*vec3(0.0,1.0,0.0);             // de samengevoegde vectoren
  //vec3 color = pct*vec3(st.x) + pct*vec3(0.0,1.0,0.0);       // gradient vector vermenigdidgd met pct
    vec3 color=(1.0-pct)*vec3(st.x)+pct*vec3(0.0,1.0,0.0);   // de lijn zonder vervaging
    gl_FragColor = vec4(color,1.0);
}

 

shader met twee plot functies, plot1 met een dalende, en plot2 met een stijgende curve

ipv (1.0-pct)*vec3(st.x) kan je een extra plot functie toevoegen, plot1 voor de zwart wit gradient en plot2 voor de groene lijn

regel 10 inschakelen, nu is de smoothstep de afstand tussen t1 en t2 veel groter, zo ontstaat een brede vervagende zwarte lijn.
regel 11 inschakelen, door 1.5*st.x draait de lijn  van plot1 te zien is dat de groen lijn nu weer vervagend is !

 

 

#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 u_resolution;
 
float plot1(vec2 st) {         
    return smoothstep(0.00,0.01, abs(st.x - st.y)); 
 // return smoothstep(0.00,0.410, abs(st.x - st.y)); 
 // return smoothstep(0.00,0.01,abs(1.5*st.x-st.y));
}
 
float plot2(vec2 st) {    
    return smoothstep(0.01,0.0, abs(st.x - st.y));
}
 
void main() {
vec2 st = gl_FragCoord.xy/u_resolution;
 
    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);
}