Het argument van de plot functie is de vector st met de kanalen st.x en st.y
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 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 (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 vermenigvuldigd 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);
}