Shader 绘制基础图形

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

一、圆

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

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

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

所以我们可以这么改：

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

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

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

二、矩形

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

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

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

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

三、直线

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

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

还有一种更简单到写法：

封装出一个画线函数：

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

四、三角形

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

五、图形组合

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

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

先画一个小圆圈：

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

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

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