Unity 引擎做残影效果——3、顶点偏移方式

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 updatevoid 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 framevoid 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 100Pass{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 texturehalf4 col = tex2D(_MainTex, i.uv);return col;}ENDCG}}
}