Unity Shader 屏幕后效果——全局霧

Unity內置的霧效需要在每個shader中分別編寫，造成了極大的不便。這里利用屏幕后處理產生可單獨控制且自由度更高的霧效。

 

屏幕后霧效的本質在於，通過深度紋理重構出每個像素在世界空間中的位置，根據得到的世界坐標計算出霧效系數，最后利用霧效系數與霧的顏色相乘並與原始顏色進行插值運算得出最終效果。

float3 afterFog=f*fogColor+(1-f)*origColor;

上面的插值運算中f代表霧效系數，

它有多種計算方法： 

1.線性運算：

f=(d_max-Abs(z))/d_max-d_min;

其中d_max和d_min分別代表受霧影響的最大和最小距離，z為給定的距離位置（像素位置）

2.指數運算：

f=pow(e,-d*Abs(z));

其中d控制霧的濃度，e為數學常量

3.二次指數：

f=pow(e,-pow(d*z,2));

 

為了更方便的對參數進行控制，需要重構每個像素在世界空間中的位置，常規實現方法如下：

1.構建像素的NDC坐標然后用VP矩陣的逆矩陣反向推導

2.通過向量的基本運算求得

方法1需要在片元着色器中進行矩陣乘法，若想得到性能更優的實現方式，考慮使用方法2。

 

向量的基本運算方式如下：

float4 worldPos=_WorldSpaceCameraPos+linearDepth*interpolatedRay;

_WorldSpaceCameraPos表示攝像機在世界空間中的位置，linearDepth*interpolatedRay是為了求得世界空間下的像素相對於攝像機的偏移量。根據向量的加法，就可以求出該像素在世界空間中的位置。

linearDepth線性深度值可以利用攝像機的深度紋理來求，關鍵在於求一個插值射線interpolatedRay。

 

分析interpolatedRay的含義可以知道，它主要表示該像素到攝像機的方向向量，可以由頂點着色器的各個頂點輸出並插值得到。

基於這一點，可以直接在C#腳本中計算出屏幕四個頂點（左上，左下，右上，右下）的向量，傳值給頂點着色器即可，這樣避免在Shader中進行繁雜的數學運算。

 

參數控制腳本，同時計算頂點相對於攝像機的方向向量。此腳本掛載在攝像機上：

using UnityEngine;

public class FogWithDepthTexCtrl : ScreenEffectBase
{
    private const string _FrustumCornersRay = "_FrustumCornersRay";

    private const string _FogDensity = "_FogDensity";
    private const string _FogColor = "_FogColor";
    private const string _FogUnderStart = "_FogUnderStart";
    private const string _FogTopEnd = "_FogTopEnd";

    private Camera myCamera;
    public Camera MyCamera
    {
        get
        {
            if (myCamera == null)
                myCamera = GetComponent<Camera>();
            return myCamera;
        }
    }

    private Transform myCameraTran;
    public Transform MyCameraTran
    {
        get
        {
            if (myCameraTran == null)
                myCameraTran = MyCamera.transform;
            return myCameraTran;
        }
    }

    [Range(0, 3)]
    public float fogDensity = 1.0f;//控制霧的濃度
    public Color fogColor = Color.white;
    public float fogUnderStart = 0.0f;//霧起始高度
    public float fogTopEnd = 2.0f;//霧結束高度

    private void OnEnable()
    {
        MyCamera.depthTextureMode |= DepthTextureMode.Depth;
    }

    private void OnDisable()
    {
        MyCamera.depthTextureMode &= ~DepthTextureMode.Depth;
    }

    private void OnRenderImage(RenderTexture source, RenderTexture destination)
    {
        if (Material != null)
        {
            //需要傳遞的四個角相對於攝像機的方向向量，這里用矩陣的每一行來表示
            Matrix4x4 frustumCorners = Matrix4x4.identity;

            float fov = MyCamera.fieldOfView;
            float near = MyCamera.nearClipPlane;
            float aspect = MyCamera.aspect;

            //計算近裁剪平面三個標准方向
            float halfHeight = near * Mathf.Tan(fov * .5f * Mathf.Deg2Rad);
            Vector3 toTop = halfHeight * MyCameraTran.up;
            Vector3 toRight = halfHeight * MyCameraTran.right * aspect;
            Vector3 toForward = near * MyCameraTran.forward;

            //用三個標准方向重構四個頂點關於攝像機的向量
            Vector3 topRight = toForward + toRight + toTop;
            topRight /= near;

            Vector3 topLeft = toForward - toRight + toTop;
            topLeft /= near;

            Vector3 bottomRight = toForward + toRight - toTop;
            bottomRight /= near;

            Vector3 bottomLeft = toForward - toRight - toTop;
            bottomLeft /= near;

            //用矩陣的每一行來存儲這些向量，這里的順序要與之后解析的順序對應
            frustumCorners.SetRow(0, topLeft);
            frustumCorners.SetRow(1, topRight);
            frustumCorners.SetRow(2, bottomLeft);
            frustumCorners.SetRow(3, bottomRight);

            //傳遞向量矩陣和對應的參數
            Material.SetMatrix(_FrustumCornersRay, frustumCorners);

            Material.SetFloat(_FogDensity, fogDensity);
            Material.SetColor(_FogColor, fogColor);
            Material.SetFloat(_FogUnderStart, fogUnderStart);
            Material.SetFloat(_FogTopEnd, fogTopEnd);

            Graphics.Blit(source, destination, Material);
        }
        else
            Graphics.Blit(source, destination);
    }
}

 

基類見：

https://www.cnblogs.com/koshio0219/p/11131619.html

 

Shader腳本：

Shader "MyUnlit/FogWithDepthTex"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Pass
        {
            ZTest Always Cull Off ZWrite Off

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            //對應四個頂點的射線矩陣
            float4x4 _FrustumCornersRay;

            sampler2D _MainTex;
            half4 _MainTex_TexelSize;
            sampler2D _CameraDepthTexture;
            half _FogDensity;
            fixed4 _FogColor;
            float _FogUnderStart;
            float _FogTopEnd;

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                half4 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
                //頂點着色器輸出的插值射線
                float4 interpolatedRay:TEXCOORD1;
            };

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv.xy = v.uv;
                o.uv.zw=v.uv;//zw存深度紋理

                //對插值射線的索引進行解析，判定該頂點是四個角中的哪一個
                int idx=0;
                if(v.uv.x>.5f&&v.uv.y>.5f)
                    idx=1;
                else if(v.uv.x<.5f&&v.uv.y<.5f)
                    idx=2;
                else if(v.uv.x>.5f&&v.uv.y<.5f)
                    idx=3;

                //主紋理外的紋理要進行平台差異化處理，同時對頂點的索引也需要進行處理（左上對左下，右上對右下）
                #if UNITY_UV_STARTS_AT_TOP
                if(_MainTex_TexelSize.y<0){
                    o.uv.w=1-o.uv.w;
                    idx=idx<2?idx+2:idx-2;
                }                    
                #endif
                
                //按照解析的索引值得到需要傳遞的插值射線
                o.interpolatedRay=_FrustumCornersRay[idx];

                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                //計算像素在世界空間中的位置
                float linearDepth=LinearEyeDepth(SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture,i.uv.zw));
                float3 worldPos=_WorldSpaceCameraPos+linearDepth*i.interpolatedRay.xyz;

                //計算霧效系數，這里主要用的關於世界空間高度的線性霧計算
                float fogDensity=(_FogTopEnd-worldPos.y)/(_FogTopEnd-_FogUnderStart);
                fogDensity=saturate(fogDensity*_FogDensity);

                //插值得到最終霧效
                fixed4 col = tex2D(_MainTex, i.uv);
                col.rgb=lerp(col.rgb,_FogColor.rgb,fogDensity);

                return col;
            }
            ENDCG
        }
    }
}

 

效果如下：