Shader 绘制特殊图形

1,947 阅读1分钟

《The Book Of 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 不一样的方格:

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