我们可以通过顶点着色器来绘制点线面图形, 并组合成其他各种形状, 但是一般 2D 场景中, 顶点着色器一般都不改, 并且它一般决定的是整个画布的大小. 所以这里探讨的是通过片元着色器来绘制基础图形.
把一切图形的绘制想象是在一张布满格子的纸上画画:
一, 圆
圆形的绘制需要借助极坐标系, 确定了圆心 c, 半径 r 就能得到任意的圆形:
当我们在笛卡尔坐标系里想要绘制一个圆时候, 你会发现很难, 因为你没有办法将画布中的每个像素点跟 center 和 radius 结合:
所以这里需要把笛卡尔坐标系转成极坐标系, 转换公式可以参考下面:
所以我们可以这么改:
当然你会发现这个圆的边缘有锯齿, 可以通过 smoothstep 来优化边缘问题:
假如我们想绘制一个椭圆呢?
椭圆可以理解为把圆往水平或者垂直方向进行拉伸, 正好上一篇讲到了坐标的计算, 通过乘以一个小于 1 的数字, 可以放大:
二, 矩形
矩形绘制可以理解为四边向内缩小, 得到画布内的矩形:
所以如果想得到一个非正方形, 只需要水平和垂直不公用一个 padding 即可. 或者通过上面椭圆的方式把坐标和一个系数相乘.
如果绘制平行四边形呢? 如果要绘制平行四边形, 意味着水平或者垂直的间距是倾斜的. 这里就拿水平方向的平行四边形来说, 那两边的黑边要倾斜, 脑补下我们常用的 y = ax 线在坐标系的呈现, 可以这么改:
原本我们只单独使用 st.x 或 st.y, 那么它们只代表一条垂直 x 或 有轴的直线. 而通过 st.x + st.y 引入了两个变量, 得到了一条二元线性方程, 并能产生斜边. 之所以 * 0.3-0.2 是为了调整倾斜角度和调整倾斜面积.
三, 直线
直线其实就是向下或者左右边距很大, 导致中间区域很小所呈现出来的样子:
想要线多细取决于你的间距设多大. 如果是斜线呢?
还有一种更简单到写法:
封装出一个画线函数:
通过改变指数, 可以创造出不一样的曲线:
四, 三角形
有了上面倾斜角度的经验, 我们可以继续这么做:
五, 图形组合
现在都是一个界面只能有一个图形, 假设想要把两种图形放在一起, 或者把变换过坐标系的图形和没有变换过坐标系的图形放在一起, 应该怎么做?
我们先看看没有变换坐标系的:
先画一个小圆圈:
我们可以通过改变圆心位置, 并通过像素点加法来进行组合.
同理, 对于变更过坐标体系的, 在何时的时间进行重置, 也可以混合不同的体系的图形在一起:
那其实这样会破坏掉原来的坐标系, 我们可以优化一下:
六, 上色
颜色的混合可以用乘法, 也可以用 mix(), 我们在之前的文章里提过: 黑色和任何颜色相乘, 都是黑色. 白色和任何颜色相乘, 都会变成那个颜色.
所以这里可以这么写:
来源: https://juejin.im/post/5ba451f3e51d4527ed001f0a