【Shader集锦】屏幕冲击波

有些话要说：
好久没更新内容了，一转眼就一年。更新空白时间里因为有很多事情要处理，所以就没投什么精力下来更新文章了，不过后面会陆续找时间更新内容，毕竟过了一年，很多东西我觉得有必要记下来，也算是补坑吧。

---

屏幕冲击波

这次要讲的是一个屏幕特效——屏幕冲击波。什么是屏幕冲击波呢？我们先来看一下效果：

屏幕冲击波

其实这效果要说简单的话确实挺简单的。简单来说，就是在屏幕上确定环形区域并对环形区域内的像素进行平滑偏移采样，达到冲击波的效果。

嗯，我们知道了什么是屏幕冲击波，那我们来看看这是怎么实现的。（代码的东西，都是要自己多想多写才能有进步，所以我下面只给出基本的思想和一些伪代码，相信聪明的大家一定能把效果实现出来的）

实现思路

1. 获取屏幕贴图
   这一步相对比较简单，我们可以通过C#代码传入屏幕RenderTexture或者在Shader中直接GrabPass得到

2. 确定圆点与当前处理像素相对圆点的方向
   其中圆点center我们可以从外部传入，动态设置，而方向的确定则是通过向量确定：

float2 dir = center - i.uv;  //uv为屏幕贴图当前UV坐标

3. 计算需要特效渲染的环形区域
   我们需要进行渲染的区域是一个环形，那我们就需要确定到底哪些像素点是需要进行处理的。我们这里把环形先看成是一个圆，半径为内外圆半径的平均值（(inRadius + outRadius) / 2），而环形的区域就是在这个半径上进行加减环形宽度了（dirLen-_Width ≤ dirLen ≤ dirLen+_Width (dirLen为圆点到渲染点的距离)）
   下面代码中，abs(edgeWidth) > _Width为最终确定渲染区域，只有在环形区域内才进行渲染取样

//_Aspect的作用是对圆进行修正，保证在不同的分辨率下都为正圆
float edgeWidth = length(float2(dir.x * _Aspect, dir.y)) - _Radius;   //当前点离环形中边（以内外圆半径平均值为半径的圆）的距离

//计算uv坐标偏移 
float sinX = _Width + edgeWidth;
float weight = 2 * _Width * sin(PI / (2 * _Width) * sinX);  //正弦函数：2d*sin(2π/4d x)
float2 offsetUV = dir * weight;             //偏移量 = 偏移方向 * 偏移权重

//最后uv取值，判断是否在环形区域内，环形区域外直接取原来uv，区域内计算偏移值
float2 resultUV = lerp(i.uv, i.uv + offsetUV, step(abs(edgeWidth) > _Width, 0.5));

而我们可以看到，在计算uv偏移坐标上，使用到了一个正弦函数，这个是有什么用呢？这个正弦函数的作用主要是为了使环形过渡自然，在边缘处与正常像素平滑过渡，否则画面会出现割裂感，没有波形的感觉。
我们看下函数：

正弦函数的特性是有明显的波形，并且很适合在这个特效上进行应用，达到边缘平滑，中间偏移的效果。

4. 取样返回颜色信息
   到这一步就基本完成了，最后我们使用计算出来的偏移UV对屏幕贴图进行取样并返回颜色信息。

总结

其实这个屏幕冲击波特效，关键点就在于怎么确定我们需要渲染的环形区域，并在环形区域内做像素的平滑过渡处理。
当然，处理的方法并不唯一，或许大家会有很多不同的实现方案，如果有更好的实现思路，欢迎留言一起讨论，我们一起进步。

---

太久没写分享了，这里就先以这个相对简单的特效作为一个重新开始的点，后面我还会跟进一下学习脚印系列的文章，期间穿插一些特效的分享。我们一起加油！