StarWink UV顶点动画制作详解

StarWink UV顶点动画制作详解

我们先来看最终效果
StarWink UV顶点动画制作详解

实现原理:

1.利用算法得到圆形差值的UV坐标(中间为0)去采样纹理,得到圆形扩散的循环纹理动画。
2.利用算法得到循环的圆形扩散遮罩,并作为顶点偏移遮罩控制顶点动画。
3.模型顶点UV做了同一块模型上的UV顶点坐标一致性的处理,使得同一块模型上的所有点偏移量一致。

算法实现:

1. 利用UV的取值范围映射到指定的取值范围,并求模(Remap和Length)

StarWink UV顶点动画制作详解
第一个算法是Remap方法:
StarWink UV顶点动画制作详解
将某个区间的取值范围([Min Old, Max Old])映射到指定区间范围([Min New, Max New])。
算法为:如要将Val从[a, b]映射到[A, B],则公式为 Val = A + Val * (B - A) / (b - a)

第二个算法是length方法,意思是求取向量模长。公式:Sqrt ( Dot ( Iput, Iput ) )。此处将
[-1, 1]的取值范围的二维坐标取模,因为中间点(0, 0)的模长为0,边界处模长为1,所以得到一个[0, 1]灰度渐变的圆(这里的渐变为线性的)。

2. 两向量间的距离,(Distance)

StarWink UV顶点动画制作详解
当B向量TimeSpeed = 0时,Distance如下图所示。
公式:Sqrt (dot ( ( B-A ), ( B-A ) ) ),即为两向量距离公式。
StarWink UV顶点动画制作详解
这里将公式拆开分析,此处为两个模长的点积,即标量点积(理论上是不成立的,但是unity在底层还是做了计算规则)。先来看下图:
StarWink UV顶点动画制作详解
0.6点积0.6 近似= 1
所以我猜测可能是将一维的值自动填充为了三维向量,三个分量都是一维的那个值。然后两个三维向量进行点乘。例举几个值,测试结果均吻合!下图是其中一个测试:
StarWink UV顶点动画制作详解
下图中的a是Length的值,即模长为1的圆,根据上面推测的算法,a和a点积并开方后,边界值为根号3,即约等于1.732,并做了减法验证,说明推测无误(但是从0到1.732是非线性渐变的),所以看起来黑色圆缩小了。
Sqrt为开根号运算。
StarWink UV顶点动画制作详解
当B向量Time
Speed != 0时,Distance如下图所示为一个从Time*Speed 到(上限值X(此处X为1.732)TimeSpeed) 范围的取值。并且随着时间增长,整个区间的值也随着增长。
StarWink UV顶点动画制作详解

3.UV坐标值随着时间线性增长并实时采样贴图

StarWink UV顶点动画制作详解(彩虹纹理图)
StarWink UV顶点动画制作详解
用Distance的值去采样彩虹纹理图,得到循环圆的彩虹纹理。
作为UV坐标的distance遮罩的(0, 0)点在中心,采样贴图颜色为彩虹纹理图的左下角(0, 0)点的颜色(橙色),所以最终中心点颜色为橙色,并随着坐标的增大,不断采样靠上的颜色,黄,绿,蓝,紫,红。当坐标超过1时,即循环从橙色开始采样。所以最终效果是一个循环的圆扩散动画。

4. Fract(取小数位)

StarWink UV顶点动画制作详解
如上面所分析,Distance的取值范围在[ TimeSpeed, X * TimeSpeed ],差值为2左右,这样就有了两个小数循环,如图Fract所示。由于从0.9999到0是突然跳转(因为1的小数位是0),所以有硬边,而0到1是渐变的。但是这里发现了个问题,那就是如果Distance上限为1.732,那取小数后就是0.732,不可能为上图Fract的样式,应该是下图这样的:
StarWink UV顶点动画制作详解
而我们用点乘开方的算法算出来正是上面的形状,请看:
StarWink UV顶点动画制作详解
所以我觉得Distance算法并不像官方所说的仅仅是Sqrt (dot ( ( B-A ), ( B-A ) ) ),应该还加了一个压缩到整数位的操作,这样取小数时才能取满。
所以我们使用Remap将取值范围从(0, 1.737)映射到(0, 2),如下图所,结果和Distance结果一致。
StarWink UV顶点动画制作详解

5.Step节点

StarWink UV顶点动画制作详解
Step节点具体算法是,如果B>A,则返回1(白色),如果B<=A,则返回0(黑色)。
将Fract的值做Step就得到了黑白遮罩,这个遮罩是为了最终影响顶点偏移(黑色不偏移,白色完全偏移,因为模型顶点UV做了同一块模型上的UV顶点坐标一致性的处理)而做的。

6. 构建顶点偏移量(Append)

StarWink UV顶点动画制作详解
将顶点坐标的每个分量分别做偏移处理,最后利用Append节点重新构建。最后和Step混合得到最终的顶点动画。

StarWink UV顶点动画制作详解StarWink UV顶点动画制作详解 0卡卡0 发布了2 篇原创文章 · 获赞 1 · 访问量 75 私信 关注
上一篇:C for Graphic:删格绘制直线和多边形


下一篇:clclickhouse与bitmap的结合