变形球效果图
构造原理：
1.构造网格
例如：在不考虑光照的Unlit Shader中，它的frag函数应该是这样的；
fixed4 frag （v2f i）: SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
return col;
}
其中，传入的i.uv的取值范围是0到1之间；如果我们将i.uv *= 5：那么现在i.uv
的取值范围就是0到5；在使用float2 r = floor(i.uv); 取i.uv中x分量和y分量的整数值，
使用float2 f = frac(i.uv); 取i.uv中的x分量和y分量的小数点后的值；
（注：floor 返回小于等于x的最大整数。frac 返回输入值的小数部分。）
这样就构造了一个5x5的网格，每个网格中的横坐标和纵坐标的取值范围都是0到1。
2.实现噪声函数
在图形学中，使用噪声就是为了把一些随机变量来引入到程序中。
先看y = sin(x) * 1.0 的波形图（下图），y的取值范围是-1 到 1，看起来很有规律，和随机的关联不大。
将y = sin(x) * 1..0 取小数部分，即加上frac，这样获得的取值范围为0到1；这时候的波形看起来就比较突兀了。
将sin(x)的值扩大很多倍之后，在取小数部分，这时候的图像看起来就像一堆杂乱的点，这就实现了伪随机。
所以构造一个随机函数，输入一个值，返回一个随机的值
float2 random(float2 n)
{
return frac(sin(n) * 43758.5453123);
}
输入和输出的值可以是float型，也可以是float2， float3等。按照需求构造。
3.画变形球原理
在第一步中构建的5x5网格中各自定义一个移动的点p，点p只在自己的网格中移动，然后每个网格内的点e都会与自身和相邻的网格内的移动点p计算距离d。当移动点p与周围格子移动点p相靠近时，这时候移动点周围的点e计算出来的距离d就会最小。所以我们可以限定一个距离值，移动点p相聚的情况下其周围的某些点的距离d小等于限定值显示出来。下图就是构造的5x5网格中各自有个移动点p。
floor(i.uv)获得每个各自的编号，从（0， 0）到（4， 4）。将这个编号传入随机函数，返回一个取值范围在 0 到 1 之间的坐标值，这个坐标值就是移动点p在每个网格中的坐标。
4.构造距离函数
计算网格中每个点与相邻网格中移动点的距离。代码如下：
float calculated(float uv)
{
i.uv * = 5; //构造5x5的网格
float2 coord = floor(i.uv); //获得网格编号
float2 position = frac(i.uv); //获得在网格中的坐标
float distance = 1; //距离值d
for(int x = -1; x <= 1; x ++) //在以网格编号为中心的周围网格中遍历
{
for(int y = -1; y <= 1; y++)
{
float2 offset = float2(x, y); //偏移中心点的偏移量
float2 co = coord + offset; //加上网格编号，获得周围网格的编号
float2 po = rand(co); //根据编号得到编号网格的移动点p
po = sin(_Time.y + po * 6.28) * 0.5 + 0.5;//给移动点的坐标添加时间的影响，让移动点动起来
float2 disv = po + offset - position; //计算移动点和当前点的向量
float curdis = length(disv); //根据向量获得距离值
distance = min(distance, distance * curdis);
//当距离值大于1时，丢弃记录；当距离值小于1时，将记录的最小距离值与计算出来的当前距离值相乘，记录下来。
}
}
}
这样，距离函数就构造完成了。
5.组合并添加限定值
在frag函数中调用。
fixed4 frag(v2f i) : SV_Target
{
float d = calculated(i.uv);//获得距离值d
fixed3 colo = step(0.05, d);//限定值为0.05；小于限定值则为0，颜色为黑色；大等于限定值则颜色为白色。
return fixed4(colo, 1);//返回颜色
}
这样，变形球效果就实现了。可以通过调整移动点受到时间影响的多少来调整变形球移动的速度；调整限定值来调整变形球的大小。
本文根据Patricio Gonzalez Vivo and Jen Lowe的《The Book of Shaders》中的内容进行实践得来。部分配图来自于《The Book of Shaders》的教程。
网友评论