| |||||||
t1 = 0.4 en t2 = 0.6 dus t1 < t2 | t1 = 0.6 en t2 = 0.2 dus t1 > t2 |
De smoothstep functie terug naar de inleiding zie The Book of Shaders hoofdstuk 5
De karteling verdwijnt als er op die rand wat grijze pixels komen. Dit wordt gerealiseerd met de smoothstep curve.
De smoothstep curve heeft 3 argumenten
smoothstep(t1, t2, de x waarde van een punt op de curve);
t2 = de tweede drempel op de cuve
als t1 hoger is dan t2 gaat de curve van 1 naar 0, dus het schuine deel is dalend.
een niet vage lijn zonder karteling bij een curve met bijvoorbeeld bij een afstand tussen t1 en t2 van 0.01 of 0.04
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
void main() {
vec2 st = gl_FragCoord.xy/u_resolution;
// voorbeelden hierin is t1 < t2 dus de curve gaan van 0 naar 1
// float pct = smoothstep(0.4, 0.6, 0.1); // punt op de curve is lager dan de lage drempel, ptc = 0 color, colorvector = 0, canvas is zwart
// float pct = smoothstep(0.4, 0.6, 0.5); // punt in het midden van het schuine deel, pct = 0.5 de kleur is vervaagd
// float pct = smoothstep(0.4, 0.6, 0.6); // punt op hoge drempel pct = 1, de colorvector heeft de ingestelde kleur
// nu punten op de curve van de genormaliseerde st.x en st.y, met waarden tussen [0.0, 1.0]
// float pct = smoothstep(0.4, 0.6, st.x); // breed overgangsgebied in het midden van het canvas
// float pct = smoothstep(0.004, 0.005, st.x-st.y); // smal overgangsgebied met schuine overgang van zwart naar kleur
// float pct = smoothstep(0.005, 0.004, st.x-st.y); // smal overgangsgebied met schuine overgang van kleur naar zwart, t1 > t2
// nu smoothstep met de abs() functie
// float pct = smoothstep(0.04, 0.05, abs(st.x-st.y)); // schuine zwarte lijn in een gekleurd vlak.
// float pct = smoothstep(0.05, 0.04, abs(st.x-st.y)); // schuine gekleurde lijn in een zwart vlak, t1 > t2
// nu smoothstep met st.x*st.x
// float pct = smoothstep(0.004, 0.005, abs(st.x*st.x-st.y)); // parabolisch gekromde lijn met gekleurde achtergrond, t1 < t2
float pct = smoothstep(0.005, 0.004, abs(st.x*st.x-st.y)); // parabolisch gekromde lijn met zwarte achtergrond, t1 > t2
vec3 color = pct*vec3(1.000,0.316,0.153);
gl_FragColor = vec4(color,1.0);
}
t1 > t2, als st.x - st.y negatief is wordt pct = 0 |
t1 < t2, door st.x*st.y - st.y
wordt de lijn naar beneden gedrukt |
t1 > t2, door st.x*st.y - st.y
wordt de lijn naar beneden gedrukt
|