Unity Shader : Ghost（残影） v1

前阵子组长给我提了个需求，要实现角色人物的残影。我百度google了一下，发现可以用两种方式实现这个效果：1.记录前几帧的人物位置，将其传入shader中，对每个位置进行一个pass渲染。2. 通过相机的targetRender，记录前几帧的人物的影像，然后通过后处理混合上去。

这里先介绍方法1，先看效果：

残影用了alpha混合的方法，将它们变得透明。

先列出shader代码：

Shader "Custom/Ghost" {
    Properties {
        _MainTex ("Main Tex", 2D) = "white" {}
        _Offset0 ("Offset 0", vector) = (, , , ) // 这里只显示4个残影，所以传入4个偏移值
        _Offset1 ("Offset 1", vector) = (, , , )
        _Offset2 ("Offset 2", vector) = (, , , )
        _Offset3 ("Offset 3", vector) = (, , , )
    }
 
    CGINCLUDE
        #include "UnityCG.cginc"
 
        sampler2D _MainTex;
 
        float4 _Offset0;
        float4 _Offset1;
        float4 _Offset2;
        float4 _Offset3;
 
        struct v2f {
            float4 pos : POSITION;
            float2 uv : TEXCOORD0;
        };

　　　　// 在shader中要渲染自身，以及4个残影，所以要定义5个不同的vert函数
        v2f vert_normal(appdata_base v) { // 渲染自身的vert函数
            v2f o;
            o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
            o.uv = v.texcoord;
            return o;
        }
　　　　// 渲染4个残影的vert函数
        v2f vert_offset_1(appdata_base v) {
            v2f o;
            float4 pos = mul(_Object2World, v.vertex);
            o.pos = mul(UNITY_MATRIX_VP, pos + _Offset0);
            o.uv = v.texcoord;
            return o;
        }
 
        v2f vert_offset_2(appdata_base v) {
            v2f o;
            float4 pos = mul(_Object2World, v.vertex);
            o.pos = mul(UNITY_MATRIX_VP, pos + _Offset1);
            o.uv = v.texcoord;
            return o;
        }
 
        v2f vert_offset_3(appdata_base v) {
            v2f o;
            float4 pos = mul(_Object2World, v.vertex);
            o.pos = mul(UNITY_MATRIX_VP, pos + _Offset2);
            o.uv = v.texcoord;
            return o;
        }
 
        v2f vert_offset_4(appdata_base v) {
            v2f o;
            float4 pos = mul(_Object2World, v.vertex);
            o.pos = mul(UNITY_MATRIX_VP, pos + _Offset3);
            o.uv = v.texcoord;
            return o;
        }
　　　　
　　　　　
　　　　// 这里只定义了两个frag函数，分别是渲染自身，以及残影的
        float4 frag_normal(v2f i) : COLOR {
            return tex2D(_MainTex, i.uv);
        }
 
        float4 frag_color(v2f i) : COLOR { // 将残影的alpha值设为0.5
            float4 c;
            c = tex2D(_MainTex, i.uv);
            c.w = 0.5;
            return c;
        }
    ENDCG
 
    SubShader { // 这里用4个pass来渲染残影，第5个pass渲染自身
        Pass { // 从最远的开始渲染
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha
 
            CGPROGRAM
            #pragma vertex vert_offset_4
            #pragma fragment frag_color
            ENDCG
        }
 
        Pass {
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha
 
            CGPROGRAM
            #pragma vertex vert_offset_3
            #pragma fragment frag_color
            ENDCG
        }
 
        Pass {
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha
 
            CGPROGRAM
            #pragma vertex vert_offset_2
            #pragma fragment frag_color
            ENDCG
        }
 
        Pass {
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha
 
            CGPROGRAM
            #pragma vertex vert_offset_1
            #pragma fragment frag_color
            ENDCG
        }
 
        Pass { // 渲染自身，这时要开启 ZWrite
            Blend SrcAlpha OneMinusSrcAlpha
 
            CGPROGRAM
            #pragma vertex vert_normal
            #pragma fragment frag_normal
            ENDCG
        }
    }
    FallBack "Diffuse"
}

看上去挺简单的。这里要注意的一点是，从c#脚本获取的offset值，是在世界坐标中获取的，所以在计算偏移时，要先将坐标转到世界坐标。

float4 pos = mul(_Object2World, v.vertex);
o.pos = mul(UNITY_MATRIX_VP, pos + _Offset0);

接着显示C#脚本：

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
 
[ExecuteInEditMode]
public class Ghost : MonoBehaviour {
    public Shader curShader;
    private List<Vector3> offsets = new List<Vector3>(); // 存储前几帧的坐标
    private List<Material> mats = new List<Material>(); // 存储人物的材质，用于给shader传参数
    // Use this for initialization
    void Start ()
    {
        offsets.Add(transform.position);
        offsets.Add(transform.position);
        offsets.Add(transform.position);
        offsets.Add(transform.position);
 
        var skinMeshRenderer = gameObject.GetComponentsInChildren<SkinnedMeshRenderer>();
        foreach (var mr in skinMeshRenderer)
            mats.Add(mr.material);
 
        var meshRenderer = gameObject.GetComponentsInChildren<MeshRenderer>();
        foreach (var mr in meshRenderer)
            mats.Add(mr.material);
 
        foreach (var mat in mats)
            mat.shader = curShader;
    }
 
    // Update is called once per frame
    void Update () {
        foreach (var mat in mats) // 每帧将之前的位置传入shader中
        {
            mat.SetVector("_Offset0", offsets[] - transform.position);
            mat.SetVector("_Offset1", offsets[] - transform.position);
            mat.SetVector("_Offset2", offsets[] - transform.position);
            mat.SetVector("_Offset3", offsets[] - transform.position);
        }
 
        offsets.Add(transform.position);
        offsets.RemoveAt();
    }
}

就这样，将C#脚本拖到GameObject身上就可以了

总结：

这个方法相对简单，问题就是，残影是和自身动作是一样的。如果要做成残影保留之前的动作，就需要记录动作参数，或者是直接保存前几帧的RenderTexture。