GLSL shader学习系列2-画个圆

男娘i 2024-03-26 15:11 55阅读 0赞

这是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函数可以阅读这篇[博客][Link 1]）。`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.);
    }

![在这里插入图片描述][107647d1172b4e5a8845497f01840e5a.png]

[Link 1]: https://blog.csdn.net/sinat_34014668/article/details/127465475
[107647d1172b4e5a8845497f01840e5a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6c5914db15924236a77ec6d3924f759b.png