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) = (0, 0, 0, 0) // 這里只顯示4個殘影，所以傳入4個偏移值
        _Offset1 ("Offset 1", vector) = (0, 0, 0, 0)
        _Offset2 ("Offset 2", vector) = (0, 0, 0, 0)
        _Offset3 ("Offset 3", vector) = (0, 0, 0, 0)
    }

    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[3] - transform.position);
            mat.SetVector("_Offset1", offsets[2] - transform.position);
            mat.SetVector("_Offset2", offsets[1] - transform.position);
            mat.SetVector("_Offset3", offsets[0] - transform.position);
        }

        offsets.Add(transform.position);
        offsets.RemoveAt(0);
    }
}

就這樣，將C#腳本拖到GameObject身上就可以了

總結：

這個方法相對簡單，問題就是，殘影是和自身動作是一樣的。如果要做成殘影保留之前的動作，就需要記錄動作參數，或者是直接保存前幾幀的RenderTexture。