阅读 460

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(),我们在之前的文章里提过:黑色和任何颜色相乘,都是黑色。白色和任何颜色相乘,都会变成那个颜色。

所以这里可以这么写:

关注下面的标签,发现更多相似文章
评论