GLSL shader学习系列2-画个圆

这是GLSL shader学习系列的第二篇文章，本文中我们将会学习如何使用shader绘制一个圆形。

引子
上一篇文章的内容比较简单易懂，由于gl_FragCoord能够表示每个像素点在画布中的坐标，因此很容易就能通过归一化得到连续渐变的效果。那么，如何使用着色器画出用明显边界感的圆形呢？这里需要使用到step函数，其功能类似一个过滤器，将大于阈值的数值设置为1，小于阈值的数值设置为0。看下面的示例代码：

#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;

void main() {
vec2 st = gl_FragCoord.xy / u_resolution;

// 如果st.x的值小于等于0.5, stepX的取值为0，否则为1
float stepX = step(0.5, st.x);

// gl_FragColor的取值可能为vec4(0., 0., 0., 1.)或vec4(1.,0.,0.,1.)
gl_FragColor=vec4(stepX, 0., 0.0, 1.0);
}

借助step，我们已经能够绘制出界限分明的图像了！

画一个圆
除了step函数，还需要使用到length函数才能绘制出一个圆（更多的shader函数可以阅读这篇博客）。length函数返回向量的长度，如length(vec2(1,0))的计算结果为1。

到这里，如果你有小学数学基础，应该就已经能够画出一个圆了，不多解释：

#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;

void main(){
// 减去0.5是为了让圆心在画布中央
vec2 st=gl_FragCoord.xy/u_resolution - 0.5;

// 计算任何一个像素点距离原点坐标的距离
float r = length(st);
float s = step(.4, r);

// gl_FragColor的取值可能为vec4(0., 0., 0., 1.)或vec4(1.,1.,1.,1.)
gl_FragColor=vec4(s, s, s, 1.);
}

 

 

原文链接：https://blog.csdn.net/qq_26822029/article/details/129252404