OpenGL Shader 编程基础-绘制基础图形

我们可以通过顶点着色器来绘制点线面图形，并组合成其他各种形状，但是一般 2D 场景中，顶点着色器一般都不改，并且它一般决定的是整个画布的大小。

所以这里探讨的是通过片元着色器来绘制基础图形。

把一切图形的绘制想象是在一张布满格子（像素点）的纸上画画：

一、圆

圆形的绘制需要借助极坐标系，确定了圆心 c，半径 r 就能得到任意的圆形：

当我们在笛卡尔坐标系里想要绘制一个圆时候，你会发现很难，因为你没有办法将画布中的每个像素点跟 center 和 radius 结合：

所以这里需要把笛卡尔坐标系转成极坐标系，转换公式可以参考下面：

所以我们可以这么改：

当然你会发现这个圆的边缘有锯齿，可以通过 smoothstep 来优化边缘问题：

假如我们想绘制一个椭圆呢？

椭圆可以理解为把圆往水平或者垂直方向进行拉伸，正好上一篇讲到了坐标的计算，通过乘以一个小于 1 的数字，可以放大：

封装成函数：

1 float circle(in vec2 _st, in float _radius){
2    vec2 l = _st-vec2(0.5);
3    return 1.-smoothstep(_radius-(_radius*0.01),
4                         _radius+(_radius*0.01),
5                         dot(l,l)*4.);
6 }

二、矩形

矩形绘制可以理解为四边向内缩小，得到画布内的矩形：

所以如果想得到一个非正方形，只需要水平和垂直不公用一个 padding 即可。或者通过上面椭圆的方式把坐标和一个系数相乘。

如果绘制平行四边形呢？如果要绘制平行四边形，意味着水平或者垂直的间距是倾斜的。

这里就拿水平方向的平行四边形来说，那两边的黑边要倾斜，脑补下我们常用的 y = ax 线在坐标系的呈现，可以这么改：

原本我们只单独使用 st.x 或 st.y，那么它们只代表一条垂直 x 或有轴的直线。而通过st.x + st.y引入了两个变量，得到了一条二元线性方程，并能产生斜边。之所以*0.3-0.2是为了调整倾斜角度和调整倾斜面积。

当然还有更加方便的绘制矩形的方式，两步即可。只要把每次的单一变量变成双变量：

封装成函数：

1 float box(vec2 _st, vec2 _size, float _smoothEdges){
2    _size = vec2(0.5)-_size*0.5;
3    vec2 aa = vec2(_smoothEdges*0.5);
4    vec2 uv = smoothstep(_size,_size+aa,_st);
5    uv *= smoothstep(_size,_size+aa,vec2(1.0)-_st);
6    return uv.x*uv.y;
7 }

三、直线

直线其实就是向下或者左右边距很大，导致中间区域很小所呈现出来的样子：

想要线多细取决于你的间距设多大。如果是斜线呢？

还有一种更简单到写法：

封装出一个画线函数：

通过改变指数，可以创造出不一样的曲线：

封装成函数：

1float plot(vec2 st, float pct){
2  return  smoothstep( pct-0.02, pct, st.y) -
3          smoothstep( pct, pct+0.02, st.y);
4}

四、三角形

有了上面倾斜角度的经验，我们可以继续这么做：

封装了绘制多边形的函数：

 1float polygon(vec2 _st, int num) {
 2    // Remap the space to -1. to 1.
 3    _st = _st *2.-1.;
 4
 5    // Angle and radius from the current pixel
 6    float a = atan(_st.x, _st.y) + PI;
 7    float r = TWO_PI/float(num);
 8
 9    // Shaping function that modulate the distance
10    float d = cos(floor(.5+a/r)*r-a) * length(_st);
11
12    return 1.0-smoothstep(.4,.41,d);
13}