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
#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 smoothstept1 > 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 lijnDeze 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
vec3 color = pct*vec3(st.x) + pct*vec3(0.0,1.0,0.0) geeft een vervagende groene lijn
-pct spiegelt de curve in de x as, +1 verplaatst de curve in y richting omhoog dit vermenigvuldigen met vec3(st) geeft:
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
#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);
}