Unity实现残影效果
大家好，我是阿赵。
继续讲Unity引擎的残影做法。这次的残影效果和之前两种不太一样，是通过顶点偏移来实现的。
具体的效果是这样：
与其说是残影，这种效果更像是移动速度很快时造成的速度线，所以在移动过程中的效果还是非常好的，截图的感觉没有视频的感觉那么有冲击力。
一、原理介绍
1、顶点偏移
这个做法很简单，在c#里面对比当前帧和上一帧的坐标，如果坐标有变化，就把两个坐标相减，算出一个世界空间坐标的向量出来，并做标准化处理。
得到了这么一个向量之后，就可以把它传入到shader里面了。
既然是顶点偏移，那么肯定是在顶点着色器程序里面做修改了。不过这里有个比较值得注意的问题。一般写shader的时候，如果没有特殊的需要，我们都是直接把顶点坐标从物体局部坐标直接就转换到裁剪空间了，比如使用Untiy提供的方法：
UnityObjectToClipPos(v.vertex);
但在这个例子里面，我们从c#传入的是世界空间坐标的向量，所以我们不能通过模型局部坐标或者裁剪空间去叠加这个偏移向量，而应该在同样的世界坐标上面去偏移。
float4 worldPos = mul(unity_ObjectToWorld, v.vertex);
worldPos += _MoveDir * _MoveDis;
其中_MoveDir就是标准化后的移动向量， _MoveDis是用于控制偏移距离的变量。
这个时候，可以看到，整个模型都在拉伸了
但这种效果明显不是我们想要的。
2.控制偏移的范围
我们想要的效果是怎样的呢？是不是应该是移动的过程中，前面的部分是不变形的，只有最后一点位置出现拉伸？
怎么去控制拉伸的范围呢？其实很简单，假如我们把刚才那个移动的向量想象成是灯光，就可以求出这样的一个效果：
很明显的，模型高亮的部分，其实就是我们想拉伸的方向了。所以，其实很简单，把移动方向和模型的法线做点乘，就可以求出一个我们想偏移的范围了。
不过现在高亮的部分还是有点多，所以我们用一个power运算，让对比度变得更高，就变成了下面这个情况。
现在，白色的部分只有很小的范围了。接下来就对这个白色的范围做顶点偏移：
基本上就出现了我们想要的效果了。
二、优缺点
1、优点
首先，之前介绍的不管是BakeMesh还是屏幕后处理，都是基于对模型的多次渲染上的，所以性能上并不那么友好。
用顶点偏移的方式，并没有太多额外的计算量，所以从性能上来说，它是比前两种方式都要好的。
然后，顶点偏移这种手段，其实是一种非常简单的技术含量比较低的手段，难点是在于你怎样想出这个办法而已，所以知道了方法之后，其实非常容易就能实现了。
2、缺点
这个做法的缺点也是很明显的。
首先，它不是真正的残影效果，只是速度线的类似效果，所以我个人感觉只适合用于特定的风格里面，比如卡通之类。如果写实风格的游戏用这种效果可能不太行。
然后，由于是要对模型做顶点偏移，那么就要意味着需要修改模型原有的Shader了。对于比较正规的团队来说，这问题不大，因为项目里面每个Shader都应该是经过TA的定制的，需要统一加入一些元素是很简单的。
但对于不那么正规的团队，甚至是纯美术人员组成的团队来说，说不定已经在用的Shader都是从不知道哪个网站上面复制下来的，要统一修改，难度会非常大。
所以，如果想使用这种技术手段，还是要先考虑一下自己的实际情况的。
三、代码
同样的，只是demo，所以代码只是在于实现部分，没有过多优化。
1、C#
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class MoveVertexOffsetCtrl : MonoBehaviour
{
public float moveDis = 1;
private bool isMove = false;
private Vector3 oldPos = Vector3.zero;
public GameObject role;
private Vector3 moveDir = Vector3.zero;
private List<Material> matList;
public float pow = 1;
// Start is called before the first frame update
void Start()
{
matList = new List<Material>();
if(role)
{
SkinnedMeshRenderer[] renders = role.GetComponentsInChildren<SkinnedMeshRenderer>();
for(int i = 0;i<renders.Length;i++)
{
for(int j = 0;j<renders[i].materials.Length;j++)
{
Material mat = renders[i].materials[j];
if (matList.IndexOf(mat) < 0)
{
matList.Add(mat);
}
}
}
}
}
// Update is called once per frame
void Update()
{
CheckMove();
SetMaterial();
}
private void CheckMove()
{
if(role)
{
if(Vector3.Distance(role.transform.position,oldPos)>0)
{
moveDir = oldPos - role.transform.position;
moveDir = moveDir.normalized;
oldPos = role.transform.position;
isMove = true;
}
else
{
isMove = false;
}
}
else
{
isMove = false;
}
}
private void SetMaterial()
{
if(matList!=null&&matList.Count>0)
{
for(int i = 0;i<matList.Count;i++)
{
if(isMove==false)
{
matList[i].SetFloat("_MoveDis", 0);
}
else
{
matList[i].SetFloat("_MoveDis", moveDis);
matList[i].SetVector("_MoveDir", moveDir);
matList[i].SetFloat("_MovePow", pow);
}
}
}
}
}
2、Shader
Shader "azhao/MoveVertexBase"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_MoveDir("MoveDir",Vector) = (0,0,0,0)
_MoveDis("MoveDis",float) = 0
_MovePow("MovePow",float) = 1
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
half3 normal : NORMAL;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float4 _MainTex_ST;
float4 _MoveDir;
float _MoveDis;
float _MovePow;
v2f vert (appdata v)
{
v2f o;
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
float4 worldPos = mul(unity_ObjectToWorld, v.vertex);
float3 worldNormal = mul(v.normal, (float3x3)unity_WorldToObject);
float ndotl = saturate(dot(worldNormal, _MoveDir));
ndotl = pow(ndotl, _MovePow);
worldPos += _MoveDir * _MoveDis*ndotl;
//世界空间顶点坐标转观察空间坐标
float4 viewPos = mul(UNITY_MATRIX_V, worldPos);
//观察空间坐标转裁剪空间坐标
float4 clipPos = mul(UNITY_MATRIX_P, viewPos);
o.vertex = clipPos;
return o;
}
half4 frag (v2f i) : SV_Target
{
// sample the texture
half4 col = tex2D(_MainTex, i.uv);
return col;
}
ENDCG
}
}
}
