Shader 绘制基础图形

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

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

一、圆

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

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

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

所以我们可以这么改：

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

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

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

封装成函数：

float circle(in vec2 _st, in float _radius){
    vec2 l = _st-vec2(0.5);
    return 1.-smoothstep(_radius-(_radius*0.01),
                         _radius+(_radius*0.01),
                         dot(l,l)*4.);
}
复制代码

二、矩形

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

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

如果绘制平行四边形呢？如果要绘制平行四边形，意味着水平或者垂直的间距是倾斜的。这里就拿水平方向的平行四边形来说，那两边的黑边要倾斜，脑补下我们常用的 y = ax 线在坐标系的呈现，可以这么改：

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

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

封装成函数：

float box(vec2 _st, vec2 _size, float _smoothEdges){
    _size = vec2(0.5)-_size*0.5;
    vec2 aa = vec2(_smoothEdges*0.5);
    vec2 uv = smoothstep(_size,_size+aa,_st);
    uv *= smoothstep(_size,_size+aa,vec2(1.0)-_st);
    return uv.x*uv.y;
}
复制代码

三、直线

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

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

还有一种更简单到写法：

封装出一个画线函数：

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

封装成函数：

float plot(vec2 st, float pct){
  return  smoothstep( pct-0.02, pct, st.y) -
          smoothstep( pct, pct+0.02, st.y);
}
复制代码

四、三角形

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

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

float polygon(vec2 _st, int num) {
    // Remap the space to -1. to 1.
	_st = _st *2.-1.;
    
	// Angle and radius from the current pixel
    float a = atan(_st.x, _st.y) + PI;
	float r = TWO_PI/float(num);
    
    // Shaping function that modulate the distance
	float d = cos(floor(.5+a/r)*r-a) * length(_st);

	return 1.0-smoothstep(.4,.41,d);
}
复制代码

五、图形组合

现在都是一个界面只能有一个图形，假设想要把两种图形放在一起，或者把变换过坐标系的图形和没有变换过坐标系的图形放在一起，应该怎么做？

我们先看看没有变换坐标系的：

先画一个小圆圈：

我们可以通过改变圆心位置，并通过像素点加法来进行组合。

同理，对于变更过坐标体系的，在何时的时间进行重置，也可以混合不同的体系的图形在一起：

那其实这样会破坏掉原来的坐标系，我们可以优化一下：

六、上色

颜色的混合可以用乘法，也可以用 mix()，我们在之前的文章里提过：黑色和任何颜色相乘，都是黑色。白色和任何颜色相乘，都会变成那个颜色。

所以这里可以这么写：