Shader 绘制基础图形

咱们能够经过顶点着色器来绘制点线面图形，并组合成其余各类形状，可是通常 2D 场景中，顶点着色器通常都不改，而且它通常决定的是整个画布的大小。因此这里探讨的是经过片元着色器来绘制基础图形。

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

1、圆

圆形的绘制须要借助极坐标系，肯定了圆心 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.);
}
复制代码

2、矩形

矩形绘制能够理解为四边向内缩小，获得画布内的矩形：

因此若是想获得一个非正方形，只须要水平和垂直不公用一个 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;
}
复制代码

3、直线

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

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

还有一种更简单到写法：

封装出一个画线函数：

经过改变指数，能够创造出不同的曲线：

封装成函数：

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

4、三角形

有了上面倾斜角度的经验，咱们能够继续这么作：

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

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);
}
复制代码

5、图形组合

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

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

先画一个小圆圈：

咱们能够经过改变圆心位置，并经过像素点加法来进行组合。

同理，对于变动过坐标体系的，在什么时候的时间进行重置，也能够混合不一样的体系的图形在一块儿：

那其实这样会破坏掉原来的坐标系，咱们能够优化一下：

6、上色

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

因此这里能够这么写：