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.);
}