Shader 绘制特殊图形

绘制基础图形和特殊图形原理上并没有太多差异，特殊图形也只是基础图形的组合以及函数的应用，下面逐个列举：

一、十字形

二、多边形

我们在讲基础图形绘制的时候封装了多边形的绘制：

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

三、Pattern 图案

绘制 Pattern 图案并不需要在 0~1 坐标系内重复绘制，我们可以利用 fract() 这个函数来把放大后的坐标系拆分成若干个0~1的坐标系。

当我们把图案和奇偶数运动结合在一起，可以制作出不一样的动画效果，首先判断奇偶数的方式有：

y = mod(x,2.0) < 1.0 ? 0. : 1. ;
y = step(1.0, mod(x,2.0));
y = fract(x * .5) > 0.5
复制代码

下面再看看如何制作一些瓷砖类的 pattern，与之前的 pattern 不一样的是，复杂的 pattern 并非单一图形的平铺，它包含了多种不一样的图形重复，而如何在同一个画布内绘制不一样的 pattern，仍然可以借助奇偶数来帮助我们：

首先我们创建一个 2x2 的网格，通过水平和垂直的奇偶数判断，得到了四个 index 不一样的方格：

在方格内我们就可以添加不一样的图案效果：