Unity Shader-后处理：时空扭曲效果

简介

最近刚刚通关《耻辱2》，在有一关的时候，竟然送给我了一个能够穿越时空的“神器”，有了这货，就可以一下子传送到过去或者回到现在。在使用这个道具的时候，会有一个屏幕扭曲的穿越的效果，感觉效果不错。

在穿越了无数回之后，我终于下决心准备在Unity里面实现一个简化的版本（肯定还原不到这种大作的水平，就当是练习啦，2333）。

屏幕收缩的效果

观察上面的效果图，最明显的一块就是屏幕有一个收缩的效果，这也是这种屏幕扭曲里面最明显也最容易实现的一部分。首先，扭曲效果就是uv偏移，超哪偏移，这个我们可以自己输入一个点给shader，默认就是屏幕中心点。我们让每个采样的点都朝着我们定义的中心点的方向偏移一段距离，就可以实现类似的屏幕收缩的效果。关于扭曲效果的基本知识可以参考一下屏幕水波纹效果以及热空气扭曲效果，这里就不多说了。下面附上收缩效果第一版。

c#脚本如下：

/********************************************************************FileName: PassthoughEffect.csDescription: "传说中的穿越"效果Created: 2017/05/07by ：puppet_master
*********************************************************************/
using UnityEngine;public class PassthoughEffect : PostEffectBase
{//扭曲强度[Range(0, 0.15f)]public float distortFactor = 1.0f;//扭曲中心（0-1）屏幕空间，默认为中心点public Vector2 distortCenter = new Vector2(0.5f, 0.5f);void OnRenderImage(RenderTexture source, RenderTexture destination){if (_Material){_Material.SetFloat("_DistortFactor", distortFactor);_Material.SetVector("_DistortCenter", distortCenter);Graphics.Blit(source, destination, _Material);}else{Graphics.Blit(source, destination);}}
}

shader代码如下：

//屏幕收缩效果
//by：puppet_master
Shader "ApcShader/PaththoughEffect"{Properties {_MainTex ("Base (RGB)", 2D) = "white" {}}CGINCLUDEuniform sampler2D _MainTex;uniform float _DistortFactor;   //扭曲强度uniform float4 _DistortCenter;    //扭曲中心点xy值（0-1）屏幕空间#include "UnityCG.cginc"fixed4 frag(v2f_img i) : SV_Target{//计算偏移的方向float2 dir = i.uv - _DistortCenter.xy;//最终偏移的值：方向 * （1-长度），越靠外偏移越小float2 offset = _DistortFactor * normalize(dir) * (1 - length(dir));//计算采样uv值：正常uv值+从中间向边缘逐渐增加的采样距离float2 uv = i.uv + offset;return tex2D(_MainTex, uv);}ENDCGSubShader {Pass{ZTest AlwaysCull Off ZWrite OffFog { Mode off }//调用CG函数  CGPROGRAM//使效率更高的编译宏#pragma fragmentoption ARB_precision_hint_fastest //vert_img是在UnityCG.cginc中定义好的，当后处理vert阶段计算常规，可以直接使用自带的vert_img#pragma vertex vert_img#pragma fragment frag ENDCG}}
}

找个测试场景，未收缩前的效果如下：

调整扭曲系数后，屏幕朝中心点收缩的效果如下：

屏幕扭曲效果与收缩效果结合

有了屏幕收缩效果，最基本的功能完成了。但是我们观察上面的动态图，还能发现，在马上要“穿越”到另一个场景的时候，屏幕会出现比较强烈的扰动效果，也正好是在这个状态下，进行的场景切换。其实这个状态很重要，切场景就相当于准备演员神马的，还是需要放块幕布之类的遮一下，不然就都现场直播了。我们需要做的就是让屏幕尽可能地扭曲，看不粗来到底发生了什么就好了。

关于扭曲效果，在上一篇文章中已经介绍过原理并且实现过一次，不过这里的扭曲要和上面的屏幕收缩相结合。两者都是uv偏移的原理，这里我选择把两者进行相减操作，首先计算正常屏幕收缩的uv偏移值，这个偏移值一般比较大。然后再计算根据一张噪声图，得到一个小的uv偏移值，作为扰动的uv偏移，两者结合就能够得到最终扭曲+扰动的效果。

c#脚本如下，增加了一个噪声图槽位以及扰动控制系数：

/********************************************************************FileName: PassthoughEffect.csDescription: "传说中的穿越"效果Created: 2017/05/07by ：puppet_master
*********************************************************************/
using UnityEngine;public class PassthoughEffect : PostEffectBase
{//收缩强度[Range(0, 0.15f)]public float distortFactor = 1.0f;//扭曲中心（0-1）屏幕空间，默认为中心点public Vector2 distortCenter = new Vector2(0.5f, 0.5f);//噪声图public Texture NoiseTexture = null;//屏幕扰动强度[Range(0, 2.0f)]public float distortStrength = 1.0f;void OnRenderImage(RenderTexture source, RenderTexture destination){if (_Material){_Material.SetTexture("_NoiseTex", NoiseTexture);_Material.SetFloat("_DistortFactor", distortFactor);_Material.SetVector("_DistortCenter", distortCenter);_Material.SetFloat("_DistortStrength", distortStrength);Graphics.Blit(source, destination, _Material);}else{Graphics.Blit(source, destination);}}
}

shader代码如下：

//屏幕收缩效果
//by：puppet_master
Shader "ApcShader/PaththoughEffect"{Properties {_MainTex ("Base (RGB)", 2D) = "white" {}_NoiseTex("Noise", 2D) = "black"{}}CGINCLUDEuniform sampler2D _MainTex;uniform sampler2D _NoiseTex;uniform float _DistortFactor;    //扭曲强度uniform float4 _DistortCenter;    //扭曲中心点xy值（0-1）屏幕空间uniform float _DistortStrength; #include "UnityCG.cginc"fixed4 frag(v2f_img i) : SV_Target{//计算偏移的方向float2 dir = i.uv - _DistortCenter.xy;//最终偏移的值：方向 * （1-长度），越靠外偏移越小float2 scaleOffset = _DistortFactor * normalize(dir) * (1 - length(dir));//采样Noise贴图fixed4 noise = tex2D(_NoiseTex, i.uv);//noise的权重 = 参数 * 距离，越靠近外边的部分，扰动越严重float2 noiseOffset = noise.xy * _DistortStrength * dir;//计算最终offset = 两种扭曲offset的差（取和也行，总之效果好是第一位的）float2 offset = scaleOffset - noiseOffset;//计算采样uv值：正常uv值+从中间向边缘逐渐增加的采样距离float2 uv = i.uv + offset;return tex2D(_MainTex, uv);}ENDCGSubShader {Pass{ZTest AlwaysCull Off ZWrite OffFog { Mode off }//调用CG函数    CGPROGRAM//使效率更高的编译宏#pragma fragmentoption ARB_precision_hint_fastest //vert_img是在UnityCG.cginc中定义好的，当后处理vert阶段计算常规，可以直接使用自带的vert_img#pragma vertex vert_img#pragma fragment frag ENDCG}}
}

还是上面的测试场景，这次，我们用一个噪声图，比如下图所示的这种：

然后设置一下扰动的权重，就可以看到，场景除了朝中心收缩了，还带有了扰动的效果：

动态的收缩和扭曲效果

我们实现了收缩和扭曲的效果。和上面的动图比较的话，除了挫了点，就是不能动了。下面研究下怎么让这个动起来。首先，这种类型的控制，基本就不能再在shader里面做了，我们下面要做的，就是动态改变我们在静态时设置的几个参数。在update或者开一个协程，让收缩系数从0逐渐增加到最大，然后迅速降低为0；在快要结束时，突然增大扰动系数，并执行切换镜头等的操作。

先来看收缩效果，这里呢，我们为了方便调整，直接给一个曲线控制。曲线控制可以得到一些特别好玩的效果，而且可以免去我们写很多麻烦的控制代码，还可以直接把效果参数开放出来，让策划和美术同学根据需要来调整，最主要的是可以顺便偷下懒，2333。还是上面的shader，我们仅仅修改了C#脚本，用一个协程控制采样曲线：

/********************************************************************FileName: PassthoughEffect.csDescription: "传说中的穿越"效果Created: 2017/05/10by ：puppet_master
*********************************************************************/
using UnityEngine;
using System.Collections;public class PassthoughEffect : PostEffectBase
{//收缩强度[Range(0, 0.15f)]public float distortFactor = 1.0f;//扭曲中心（0-1）屏幕空间，默认为中心点public Vector2 distortCenter = new Vector2(0.5f, 0.5f);//噪声图public Texture NoiseTexture = null;//屏幕扰动强度[Range(0, 2.0f)]public float distortStrength = 1.0f;//屏幕收缩总时间public float passThoughTime = 4.0f;//当前时间private float currentTime = 0.0f;//曲线控制权重public float curveFactor = 0.2f;//屏幕收缩效果曲线控制public AnimationCurve curve;void OnRenderImage(RenderTexture source, RenderTexture destination){if (_Material){_Material.SetTexture("_NoiseTex", NoiseTexture);_Material.SetFloat("_DistortFactor", distortFactor);_Material.SetVector("_DistortCenter", distortCenter);_Material.SetFloat("_DistortStrength", distortStrength);Graphics.Blit(source, destination, _Material);}else{Graphics.Blit(source, destination);}}//ContexMenu，可以直接在Component上右键调用该函数，比较好用的小技巧哈[ContextMenu("Play")]public void StartPassThoughEffect(){currentTime = 0.0f;StartCoroutine(UpdatePassthoughEffect());}private IEnumerator UpdatePassthoughEffect(){while(currentTime < passThoughTime){currentTime += Time.deltaTime;//根据时间占比在曲线（0，1）区间采样，再乘以权重作为收缩系数distortFactor = curve.Evaluate(currentTime / passThoughTime) * curveFactor;yield return null;//结束时强行设置为0distortFactor = 0.0f;}}}

然后呢，我们就可以来调整曲线来得到我们希望的效果啦。《耻辱》中的扭曲效果是一个缓慢加大，然后再突然恢复的一个过程，我们用曲线调整一个类似的效果，如下：

得到的效果如下面的动态图所示，基本还原了这种收缩的效果：

下面就是在收缩到最大的时候，给一个比较大的扰动系数，达到转场的目的。尴尬，好不容易调好的曲线，把变量改了个名字，曲线丢掉了...只好重新调一遍。最终版本如下：

/********************************************************************FileName: PassthoughEffect.csDescription: "传说中的穿越"效果Created: 2017/05/10by ：puppet_master
*********************************************************************/
using UnityEngine;
using System.Collections;public class PassthoughEffect : PostEffectBase
{//收缩强度[Range(0, 0.15f)]public float distortFactor = 1.0f;//扭曲中心（0-1）屏幕空间，默认为中心点public Vector2 distortCenter = new Vector2(0.5f, 0.5f);//噪声图public Texture NoiseTexture = null;//屏幕扰动强度[Range(0, 2.0f)]public float distortStrength = 1.0f;//屏幕收缩总时间public float passThoughTime = 4.0f;//当前时间private float currentTime = 0.0f;//曲线控制权重public float scaleCurveFactor = 0.2f;//屏幕收缩效果曲线控制public AnimationCurve scaleCurve;//扰动曲线系数public float distortCurveFactor = 1.0f;//屏幕扰动效果曲线控制public AnimationCurve distortCurve;void OnRenderImage(RenderTexture source, RenderTexture destination){if (_Material){_Material.SetTexture("_NoiseTex", NoiseTexture);_Material.SetFloat("_DistortFactor", distortFactor);_Material.SetVector("_DistortCenter", distortCenter);_Material.SetFloat("_DistortStrength", distortStrength);Graphics.Blit(source, destination, _Material);}else{Graphics.Blit(source, destination);}}//ContexMenu，可以直接在Component上右键调用该函数，比较好用的小技巧哈[ContextMenu("Play")]public void StartPassThoughEffect(){currentTime = 0.0f;StartCoroutine(UpdatePassthoughEffect());}private IEnumerator UpdatePassthoughEffect(){while(currentTime < passThoughTime){currentTime += Time.deltaTime;float t = currentTime / passThoughTime;//根据时间占比在曲线（0，1）区间采样，再乘以权重作为收缩系数distortFactor = scaleCurve.Evaluate(t) * scaleCurveFactor;distortStrength = distortCurve.Evaluate(t) * distortCurveFactor;yield return null;//结束时强行设置为0distortFactor = 0.0f;distortStrength = 0.0f;}}
}

各项参数以及扰动曲线设置如下图所示，噪声图换了一张其他的：

最终效果如下面动图所示：

漩涡扭曲效果

漩涡扭曲效果，本来打算尝试一下卡卡西的“神威”技能效果，不过效果不是很好，所以只实现了一版漩涡扭曲的效果，以后有时间再慢慢研究。说道漩涡类型的东东，第一个想到的应该就是sin，cos函数，这俩跟漩涡非常搭边。然后我们分析一下漩涡的效果，我们先需要在fragment shader中对应每个像素点先平移到中心点（也可以是我们自己定义的中心），然后让这个像素点绕着当前中心点的轴旋转一定角度，最后再将这个像素点平移回去，就能够达到了整个图像绕着固定点旋转的操作。而为了让漩涡效果看起来更加自然，我们需要按照离中心点的距离作为权重，缩放旋转的角度值，离中心点越远的像素点，旋转值越小，而离中心点越近的位置，旋转得就越剧烈，这是一个反比的关系，所以我们在给旋转值的时候，除以一个距离中心点的距离即可。下面附上漩涡扭曲效果的shader以及C#脚本。

Shader部分如下，将扭曲部分改为漩涡形，附加一个噪声扰动的效果：

//漩涡扭曲效果
//by：puppet_master
Shader "ApcShader/RotationDistortEffect"{Properties {_MainTex ("Base (RGB)", 2D) = "white" {}_NoiseTex("Noise", 2D) = "black"{}}CGINCLUDEuniform sampler2D _MainTex;uniform sampler2D _NoiseTex;uniform float _DistortFactor;   //扭曲强度uniform float4 _DistortCenter;    //扭曲中心点xy值（0-1）屏幕空间uniform float _DistortStrength; #include "UnityCG.cginc"fixed4 frag(v2f_img i) : SV_Target{//平移坐标点到中心点,同时也是当前像素点到中心的方向fixed2 dir = i.uv - _DistortCenter.xy;//计算旋转的角度：对于像素点来说，距离中心越远，旋转越少，所以除以距离。相当于用DistortFactor作为旋转的角度值Distort/180 * π，π/180 = 0.1745float rot = _DistortFactor * 0.1745 / (length(dir) + 0.001);//+0.001防止除零//计算sin值与cos值，构建旋转矩阵fixed sinval, cosval;sincos(rot, sinval, cosval);float2x2  rotmatrix = float2x2(cosval, -sinval, sinval, cosval);//旋转dir = mul(dir, rotmatrix);//再平移回原位置dir += _DistortCenter.xy;//采样noise图fixed4 noise = tex2D(_NoiseTex, i.uv);//noise的权重 = 参数 * 距离，越靠近外边的部分，扰动越严重float2 noiseOffset = noise.xy * _DistortStrength * dir;//用偏移过的uv+扰动采样MainTexreturn tex2D(_MainTex, dir + noiseOffset);}ENDCGSubShader {Pass{ZTest AlwaysCull Off ZWrite OffFog { Mode off }//调用CG函数    CGPROGRAM//使效率更高的编译宏#pragma fragmentoption ARB_precision_hint_fastest //vert_img是在UnityCG.cginc中定义好的，当后处理vert阶段计算常规，可以直接使用自带的vert_img#pragma vertex vert_img#pragma fragment frag ENDCG}}
}

C#脚本部分，仍然使用了两条曲线进行控制，一条控制旋转值，一条控制扰动值：

/********************************************************************FileName: PassthoughEffect.csDescription: 漩涡扭曲效果Created: 2017/05/10by ：puppet_master
*********************************************************************/
using UnityEngine;
using System.Collections;public class RotationDistortEffect : PostEffectBase
{//收缩强度[Range(0, 20.0f)]public float distortFactor = 1.0f;//扭曲中心（0-1）屏幕空间，默认为中心点public Vector2 distortCenter = new Vector2(0.5f, 0.5f);//噪声图public Texture NoiseTexture = null;//屏幕扰动强度[Range(0, 2.0f)]public float distortStrength = 1.0f;//屏幕扭曲时间public float passThoughTime = 3.0f;//当前时间private float currentTime = 0.0f;//曲线控制权重public float rotationCurveFactor = 10.0f;//屏幕全传效果曲线控制public AnimationCurve rotationCurve;//扰动曲线系数public float distortCurveFactor = 0.1f;//屏幕扰动效果曲线控制public AnimationCurve distortCurve;void OnRenderImage(RenderTexture source, RenderTexture destination){if (_Material){_Material.SetTexture("_NoiseTex", NoiseTexture);_Material.SetFloat("_DistortFactor", distortFactor);_Material.SetVector("_DistortCenter", distortCenter);_Material.SetFloat("_DistortStrength", distortStrength);Graphics.Blit(source, destination, _Material);}else{Graphics.Blit(source, destination);}}//ContexMenu，可以直接在Component上右键调用该函数，比较好用的小技巧哈[ContextMenu("Play")]public void StartPassThoughEffect(){currentTime = 0.0f;StartCoroutine(UpdatePassthoughEffect());}private IEnumerator UpdatePassthoughEffect(){while (currentTime < passThoughTime){currentTime += Time.deltaTime;float t = currentTime / passThoughTime;//根据时间占比在曲线（0，1）区间采样，再乘以权重作为收缩系数distortFactor = rotationCurve.Evaluate(t) * rotationCurveFactor;distortStrength = distortCurve.Evaluate(t) * distortCurveFactor;yield return null;//结束时强行设置为0distortFactor = 0.0f;distortStrength = 0.0f;}}
}

配置两条曲线以及参数：

漩涡扭曲效果动态图如下：