GLSL算法绘画之造型函数

a_codecat

已于 2022-10-18 23:22:57 修改

阅读量326

点赞数

分类专栏： glsl 文章标签： unity

于 2022-10-16 23:06:47 首次发布

本文链接：https://blog.csdn.net/a_codecat/article/details/127355056

版权

glsl 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

#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