Unity Shader-后处理：屏幕水波效果

一.简介

最近在打黑魂，被虐得死去活来，每次都是想砸电脑的节奏，然而还是忍不住想玩，唉。下面步入正题，黑魂的传送技能之前会播放一个帅帅的屏幕特效-屏幕水波，从屏幕中间向四周扩散开来，很有赶脚。下面附上一张截图：

正好最近在学习shader，决定研究一下这种效果怎样实现。

二.原理介绍

水波纹的原理其实比较简单，与其他后处理效果一样，vertex shader千篇一律，所有操作都有fragment shader完成。我们仔细观察一下上图中的效果，其实这种波纹并不是叠加上去的，而是波纹位置的图像被向外拉伸了，而这种拉伸的强度是按照类似sin函数的波形进行拉伸的。

下面我们通过一个场景进行试验，一步一步实现屏幕水波纹的效果，下图是场景原始效果：

1.基本拉伸效果

我们先进行一版简单的拉伸效果实验。

fixed4 frag(v2f_img i) : SV_Target
	{
		//计算uv到中间点的向量(向外扩，反过来就是向里缩)
		float2 dv = float2(0.5, 0.5) - i.uv;
		//归一化
		float2 dv1 = normalize(dv);
		//计算每个像素uv的偏移值
		float2 offset = dv1  * _distanceFactor;
		//像素采样时偏移offset
		float2 uv = offset + i.uv;
		return tex2D(_MainTex, uv);	
	}

效果如下图所示，有一种恐怖的赶脚：

如果我们修改一个地方，将shader中的dv1反向，就会得到一种收缩的效果，如果以后做这种类似的效果，可以考虑用这个实现哈：

2.波纹式拉伸

第一步实现了整体拉伸，但是这并不是我们想要的波纹效果，我们如果给一个线性的输入，通过什么样的函数能够得到类似波纹效果的输出呢？

对了，就是传说中的三角函数，我们通过一个sin值，可以把线性的输入变化成波形的输出，这样就可以模拟了水波纹的效果。知道了用什么函数，函数的输入和输出分别是什么，就是偶们下一步要考虑的问题了。我们上一步中是通过像素采样时uv坐标增加一个偏移值来达到拉伸的效果，我们就可以让这个偏移值作为这个三角函数的输出，这样，有的地方拉伸的少，有的地方拉伸的多，这样就形成了不同的拉伸效果，也就形成了一个波纹的感觉。那么，输入就很明显了，输入就是距离中心位置的绝对距离。上代码：

fixed4 frag(v2f_img i) : SV_Target
	{
		//计算uv到中间点的向量(向外扩，反过来就是向里缩)
		float2