炫酷的UI界面在智能驾驶座舱中已然成为了一个趋势，Kanzi的出现使得很多难以实现的效果成为可能，而Shader则是实现这些炫酷效果的关键所在，今天要向大家介绍的是其中一个效果：水波纹。
水波纹原理
在许多网络游戏所呈现的精美画面中，一般都会添加波光粼粼的水波纹效果，完美地模拟了真实场景，给游戏玩家一种身临其境的感觉，如下图所示。
这种波纹效果并不是叠加而成的，而是通过波纹位置的图像向外拉伸后的效果，而这种拉伸的强度是按照类似Sin函数的波形进行拉伸的。通过一个Sin值，可以把线性的输入变化成波形的输出，这样就可以实现水波纹的模拟效果了。
水波纹在Kanzi中的实现
通过像素采样时UV坐标增加一个偏移值来达到拉伸的效果，我们可以把这个偏移值作为三角函数的输出，形成不同的拉伸效果，从而给人以水波纹的感觉。
Shader中的Fragment Shader：对每个像素的UV坐标做Sin函数的偏移，达到水波纹的效果。
使用Shader处理前的原始图片效果如下：
使用Shader处理后的效果如下图所示：图片出现明显的弯曲变形效果
水波纹动起来
接下来让小编施展一些魔法让水波纹动起来。哔 – 没想到吧，其实这个魔法就是引入动画让偏移量随着时间动态调整。在这里小编引入了一个外部参数Time, 对Time变量做动画来控制水波纹的移动。
好了，来看看最终的效果，是不是感觉很神奇呢。赶紧关注我们吧，后续我们还会有更多关于Shader实现效果的分享哦，敬请期待！
相关精彩推荐：
怿星一意，专注车载
引领汽车科技新高度
