#GLSL算法绘画之造型函数
##一、smoothstep
#ifdef GL_ES
precision mediump float;
#endif
#define PI 3.14159265359
float plot(vec2 st, float pct){
return smoothstep( pct-0.02, pct, st.y) -
smoothstep( pct, pct+0.02, st.y);
}
void main() {
vec2 st = gl_FragCoord.xy/iResolution.xy;
float y = smoothstep(0.1,0.9,st.x);
vec3 color = vec3(y);
float pct = plot(st,y);
color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);
gl_FragColor = vec4(color,1.0);
}
##二、step
#ifdef GL_ES
precision mediump float;
#endif
#define PI 3.14159265359
float plot(vec2 st, float pct){
return smoothstep( pct-0.02, pct, st.y) -
smoothstep( pct, pct+0.02, st.y);
}
void main() {
vec2 st = gl_FragCoord.xy/iResolution.xy;
// Step will return 0.0 unless the value is over 0.5,
// in that case it will return 1.0
float y = step(0.5,st.x);
vec3 color = vec3(y);
float pct = plot(st,y);
color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);
gl_FragColor = vec4(color,1.0);
}
##三、正弦和余弦函数
-
在 sin 里让 x 加上时间(u_time)。让sin 曲线随 x 轴动起来。
-
在 sin 里用 PI 乘以 x。注意 sin 曲线上下波动的两部分如何收缩了,现在 sin 曲线每两个整数循环一次。
-
在 sin 里用时间( u_time)乘以 x。观察各阶段的循环如何变得越来越频繁。注意 u_time 可能已经变得非常大,使得图像难以辨认。
-
给 sin(x)(注意不是 sin 里的 x)加 1.0。观察曲线是如何向上移动的,现在值域变成了 0.0 到 2.0。
-
给 sin(x) 乘以 2.0。观察曲线大小如何增大两倍。
-
计算 sin(x) 的绝对值(abs())。现在它看起来就像一个弹力球的轨迹。
-
只选取 sin(x) 的小数部分(fract())。
-
使用向正无穷取整(ceil())和向负无穷取整(floor()),使得 sin 曲线变成只有 1 和 -1 的电子波。
##四、造型函数进阶
-
多项式造型函数(Polynomial Shaping Functions): www.flong.com/archive/texts/code/shapers_poly
-
指数造型函数(Exponential Shaping Functions): www.flong.com/archive/texts/code/shapers_exp
-
圆与椭圆的造型函数(Circular & Elliptical Shaping Functions): www.flong.com/archive/texts/code/shapers_circ
-
贝塞尔和其他参数化造型函数(Bezier and Other Parametric Shaping Functions): www.flong.com/archive/texts/code/shapers_bez
###Iñigo Quiles
-
Impulse
https://thebookofshaders.com/edit.php#05/impulse.frag -
Cubic Pulse
https://thebookofshaders.com/edit.php#05/cubicpulse.frag -
Exponential Step
https://thebookofshaders.com/edit.php#05/expstep.frag -
Parabola
https://thebookofshaders.com/edit.php#05/parabola.frag -
Power Curve
https://thebookofshaders.com/edit.php#05/pcurve.frag
##五、填充你的工具箱
- Grapher:如果你是用 MacOS 系统,用 spotlight 搜 grapher 就会看到这个超级方便的工具了
- GraphToy:仍然是 Iñigo Quilez 为大家做的工具,用于在 WebGL 中可视化 GLSL 函数。
- Shadershop:这个超级棒的工具是 Toby Schachman 的作品。它会以一种极其视觉化和直观的方式教你如何建造复杂的函数。