由于GPU机制的特殊性,在写Shader做动画效果时,很多时候要用到三角函数。
实现此闪烁效果的Shader代码:
float brightness=pow(sin(_Time.y*_SparkleRate+phase),20)*800;
o.color.rgb=v.color.rgb*brightness;
o.color.a=1;
将含有三角函数的代码行公式化:
通过三角函数图像分析公式中各变量的作用:
有4个变量可以控制动画细节:
SparkRate
Phase
exp
Multiplier
当SparkRate=5,Phase=5,exp=20,Multiplier=800时,三角函数图像为
(图1,原始动画图)
由于y值要乘以rgb颜色,rgb颜色会被自动截取。加入rgb原始颜色为(1,1,1),那么任何超过1的y值在此等同于1。例如,当y=0,rgb*0=(0,0,0),消失;y=1,rgb*1=(1,1,1),为本身颜色,y=1.5,rgb*1.5=(1,1,1)。
Phase的作用
当Phase发生变化:
(图2,Phase变化图)
相对图1,Phase由5变为了0,可看到所有正弦整体向左发生了偏移,由于x轴代表的是_Time.y时间,这个时间变量对所有被此Shader渲染的物体都是相同的,可以给每个物体赋予不同的Phase值对其动画进行差异化处理。
SparkRate的作用
当SparkRate发生变化:
相对图1,SparkRate由5变为了1。函数图像整体比例变宽。可以理解为动画变慢。
Multiplier的作用
当Multiplier发生变化:
函数图像变矮,y=0的时间稍微延长, y由0到1的时间变慢了,既渐变时间延长了。
exp的作用
当exp发生变化:
exp由20变为2 。
y=0的时间变短了,闪烁会变得不明显。
注意exp如为奇数,sin函数会返回负值,需在前加abs()。
当rgb发生变化时
以上讨论的是rgb值为1时的情况。rgb值越小,y最大有效值将越大,也既是渐变过程延长。
————————————————————————————
参考:
Google–Tilt Brush