Shader之水波纹
来源: | 作者:pmo9ca4dc | 发布时间: 2019-02-22 | 196 次浏览 | 分享到:

炫酷的UI界面在智能驾驶座舱中已然成为了一个趋势,Kanzi的出现使得很多难以实现的效果成为可能,而Shader则是实现这些炫酷效果的关键所在,今天要向大家介绍的是其中一个效果:水波纹。


水波纹原理

在许多网络游戏所呈现的精美画面中,一般都会添加波光粼粼的水波纹效果,完美地模拟了真实场景,给游戏玩家一种身临其境的感觉,如下图所示。



这种波纹效果并不是叠加而成的,而是通过波纹位置的图像向外拉伸后的效果,而这种拉伸的强度是按照类似
S
in函数的波形进行拉伸的。通过一个Sin值,可以把线性的输入变化成波形的输出,这样就可以实现水波纹的模拟效果了。


水波纹在Kanzi中的实现

通过像素采样时UV坐标增加一个偏移值来达到拉伸的效果,我们可以把这个偏移值作为三角函数的输出,形成不同的拉伸效果,从而给人以水波纹的感觉。 

Shader中的Fragment Shader:对每个像素的UV坐标做Sin函数的偏移,达到水波纹的效果。



使用Shader处理前的原始图片效果如下:




使用Shader处理后的效果如下图所示:图片出现明显的弯曲变形效果




水波纹动起来

接下来让小编施展一些魔法让水波纹动起来。哔 – 没想到吧,其实这个魔法就是引入动画让偏移量随着时间动态调整。在这里小编引入了一个外部参数Time,  对Time变量做动画来控制水波纹的移动。




好了,来看看最终的效果,是不是感觉很神奇呢。赶紧关注我们吧,后续我们还会有更多关于Shader实现效果的分享哦,敬请期待!



相关文章