Unity 引擎做残影效果——2、屏幕后处理方式

Unity实现残影效果

  大家好，我是阿赵。
  这里继续介绍Unity里面做残影的方法。之前介绍了BakeMesh的方法做残影，这一期介绍的是用屏幕后处理的方法做残影。

一、原理

  之前的BakeMesh方法，是真的生成了很多个网格模型在场景里面。如果用后处理做，就没有这个过程。

  可以看到，虽然Game视图里面看到了残影，但实际上场景里面只有原理的一个角色的网格模型。
  其实用后处理做残影的方法非常的简单。首先复制一个和主摄像机一样的子摄像机，然后这个摄像机只看角色层，最后，给这个摄像机设置一个RenderTexture作为targetTexture。

  这样，我们就可以在主摄像机渲染完整的画面的同时，拿到了一个只有角色的RenderTexture。
  然后我们维护一个队列，这个队列保存着过去几帧里面的渲染角色的RenderTexture。至于需要保存多少帧，多久保存一帧，就看各位自己的需要了。
  得到了这个RenderTexture队列之后，剩下的事情就非常简单了。把这个队列传入到后处理的材质里面。

  这个时候，这几张RenderTexture实际上是下面这样的：

  后处理的Shader很简单，就是把这几张Texture按照先后顺序，用过不同的透明度去合成在一起：

  这样，残影的效果就做出来了。如果想修改残影的颜色，也是直接在后处理的时候，给残影的Texture乘以一个颜色就行了。

二、优缺点

1、优点

  对比起BakeMesh方法，这个后处理的方式，并不需要渲染多很多个角色的网格，只是需要多一个摄像机渲染多一次所有需要残影的角色而已。我们可以做一个优化，当某个角色需要做残影，就把它设置为专门的Layer，让这个残影摄像机能渲染到。平时没有需要残影的角色的时候，这个摄像机是什么都看不到。
  然后，场景里面就算有非常多的角色同时残影，最多也就是每个角色多渲染一次就够了，对于渲染方面的性能消耗还是很友好的。就是牺牲点内存，把这张RenderTexture复制并保存在内存里面。这个消耗我觉得并不是很大。
  如果想在这个基础上做其他效果，也是很轻松的，比如想对残影做模糊，或者Bloom，或者校色，其实就是对保存的这几张Texture做处理就行了，可以实现的效果非常多。

2、缺点

  由于是保存多张Texture作为合成残影的基础，所以究竟保存多少张合适，是一个问题。如果保存得少，那么残影的效果不是很明显，如果保存得多，内存的占用也会比较多。

三、代码

由于是Demo，所以写得比较简单一点，没有做优化，大家看个原理吧。

1、C#

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class MoveImageEffectCtrl : MonoBehaviour
{
    // Start is called before the first frame update
    private List rtList;
    public Camera subCam;
    public bool isMove = false;
    private Texture2D blackTex;
    public Material mat;
    public int spaceTime = 10;
    private int countTime = 0;
    private Vector3 oldPos;
    public GameObject role;
    void Start()
    {
        CreateBlackTexture();
    }

    // Update is called once per frame
    void Update()
    {
        countTime++;
        if (countTime % spaceTime == 0)
        {
            CheckMove();
        }
    }

    private void CheckMove()
    {
        if (Vector3.Distance(oldPos, role.transform.position) > 0)
        {
            isMove = true;
            RenderTexture camTarget = subCam.targetTexture;
            RenderTexture rt = RenderTexture.GetTemporary(camTarget.width, camTarget.height);
            CopyRender(camTarget, rt);
            AddToRTList(rt);
            oldPos = role.transform.position;
        }
        else
        {
            isMove = false;
        }
    }
    private void CopyRender(RenderTexture source, RenderTexture destination)
    {
        Graphics.Blit(source, destination);
    }
    private void CreateBlackTexture()
    {
        blackTex = new Texture2D(128, 128);
        for (int i = 0; i < 128; i++)
        {
            for (int j = 0; j < 128; j++)
            {
                blackTex.SetPixel(i, j, Color.clear);
            }
        }
        blackTex.Apply();
    }

    private void AddToRTList(Texture rt)
    {
        if (rtList == null)
        {
            rtList = new List();
        }
        rtList.Add(rt);
        if (rtList.Count > 5)
        {
            for (int i = 0; i < rtList.Count - 5; i++)
            {
                Texture tex = rtList[0];
                rtList.RemoveAt(0);
                if (tex is RenderTexture)
                {
                    RenderTexture.ReleaseTemporary((RenderTexture)tex);
                }
            }
        }
    }

    private void SetTexToMat()
    {
        if (isMove == false)
        {
            mat.SetFloat("_isMove", 0);
        }
        else
        {
            mat.SetFloat("_isMove", 1);
            for (int i = 0; i < 5; i++)
            {
                string key = "_Tex" + (i + 1);
                Texture tex = GetTexById(i);
                mat.SetTexture(key, tex);
            }
        }
    }

    private Texture GetTexById(int id)
    {
        if (rtList == null || rtList.Count <= id)
        {
            return blackTex;
        }
        else
        {
            return rtList[id];
        }
    }

    private void OnRenderImage(RenderTexture source, RenderTexture destination)
    {
        SetTexToMat();
        if(isMove)
        {
            Graphics.Blit(source, destination, mat);
        }
        else
        {
            Graphics.Blit(source, destination);
        }
        
    }
}

2、Shader

Shader "Unlit/MoveEffectCom"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
		_Tex1("Tex1",2D) = "black"{}
		_Tex2("Tex2",2D) = "black"{}
		_Tex3("Tex3",2D) = "black"{}
		_Tex4("Tex4",2D) = "black"{}
		_Tex5("Tex5",2D) = "black"{}
		_isMove("isMove",Float) = 0
    }
    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;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
			sampler2D _Tex1;
			sampler2D _Tex2;
			sampler2D _Tex3;
			sampler2D _Tex4;
			sampler2D _Tex5;
			float _isMove;
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            half4 frag (v2f i) : SV_Target
            {
                // sample the texture
				half4 col = tex2D(_MainTex, i.uv);
				if (_isMove > 0)
				{
					half4 addTex1 = tex2D(_Tex1, i.uv);
					half4 addTex2 = tex2D(_Tex2, i.uv);
					half4 addTex3 = tex2D(_Tex3, i.uv);
					half4 addTex4 = tex2D(_Tex4, i.uv);
					half4 addTex5 = tex2D(_Tex5, i.uv);
					half3 rgb = col.rgb + saturate(addTex1.rgb*addTex1.a*0.6f + addTex2.rgb*addTex2.a*0.5f + addTex3.rgb*addTex3.a*0.3f + addTex4.rgb*addTex4.a*0.2f + addTex5.rgb*addTex5.a*0.1f)*(1-col.a)*float3(1,0,0);
					rgb = saturate(rgb);
					col = half4(rgb, col.a);
				}


                return col;
            }
            ENDCG
        }
    }
}