Unity Shader 屏幕后处理-均匀雾效

作者: 洒一地阳光_217d | 来源:发表于2021-03-21 20:35 被阅读0次

Unity Shader系列文章：Unity Shader目录-初级篇

Unity Shader系列文章：Unity Shader目录-中级篇

参考文章：获取深度纹理和法线纹理

参考文章：使用深度纹理，计算像素的世界坐标

效果：

左图：原效果。右图：添加全局均匀雾效后的效果

原理：

计算雾效需要的雾效系数，根据系数将雾的颜色和原始颜色进行混合后。

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

雾效系数f有很多计算方法。在 Unity 内置的雾效实现中，支待三种雾的计算方式一线性
(Linear) 、指数 (Exponential) 以及指数的平方 (Exponential Squared) 。当给定距离z后，
f计算公式分别如下：

线性(Linear)：

$f = \frac {d_{max} - |Z|}{d_{max} - d_{min}}$ ， $d_{max}$ 和 $d_{min}$ 分别表示受雾影响的最大距离和最小距离。

指数 (Exponential) ：
$f= e^{-d·|z|}$ ， $d$ 是控制雾的浓度的参数。
指数的平方 (Exponential Squared)：
$f = e^{-(d-|z|)^2}$ ， $d$ 是控制雾的浓度的参数。

本文中使用线性(Linear)的公式计算雾效系数f。

ScreenPostEffectsBase基类代码：

using UnityEngine;

/// <summary>
/// 屏幕后处理效果基类
/// </summary>
[ExecuteInEditMode]
[RequireComponent(typeof(Camera))]
public class ScreenPostEffectsBase : MonoBehaviour
{
    public Shader Shader;
    public Material Material
    {
        get
        {
            return CheckAndCreateMaterial();
        }
    }
    private Material _material;

    protected void Start()
    {
        CheckResources();
    }

    /// <summary>
    /// 检查资源
    /// </summary>
    protected void CheckResources()
    {
        if (!CheckSupport())
        {
            NotSupported();
        }
    }

    /// <summary>
    /// 检查支持
    /// </summary>
    /// <returns></returns>
    protected bool CheckSupport()
    {
        bool isSupported = SystemInfo.supportsImageEffects;
        return isSupported;
    }

    /// <summary>
    /// 不支持
    /// </summary>
    protected void NotSupported()
    {
        enabled = false;
    }

    /// <summary>
    /// 检查和创建Material
    /// </summary>
    /// <returns></returns>
    protected Material CheckAndCreateMaterial()
    {
        if (!Shader || !Shader.isSupported)
        {
            return null;
        }

        if (_material && _material.shader == Shader)
        {
            return _material;
        }

        _material = new Material(Shader);
        _material.hideFlags = HideFlags.DontSave;
        return _material;
    }
}

ScreenFogWithDepthTexture派生类代码：

using UnityEngine;

/// <summary>
/// 屏幕后处理-雾效果
/// </summary>
public class ScreenFogWithDepthTexture : ScreenPostEffectsBase
{

    [Range(0, 3)]
    public float FogDensity = 1; // 雾浓度
    public Color FogColor = Color.white; // 雾颜色
    public float FogStart = 0; // 雾开始的高度
    public float FogEnd = 2; // 雾结束的高度

    public Camera Camera
    {
        get
        {
            if (!_camera)
            {
                _camera = GetComponent<Camera>();
            }
            return _camera;
        }
    }

    public Transform CameraTrans
    {
        get
        {
            if (!_cameraTrans)
            {
                _cameraTrans = Camera.transform;
            }
            return _cameraTrans;
        }
    }

    private Camera _camera;
    private Transform _cameraTrans;

    private void OnEnable()
    {
        // 获取摄像机深度纹理
        Camera.depthTextureMode |= DepthTextureMode.Depth;
    }

    private void OnRenderImage(RenderTexture src, RenderTexture dest)
    {
        if (Material != null)
        {
            Matrix4x4 frustumCorners = Matrix4x4.identity;

            // 获取摄像机相关参数
            float fov = Camera.fieldOfView;
            float near = Camera.nearClipPlane;
            float aspect = Camera.aspect;

            // 先计算两个向量——toTop 和 toRight，它们是起点位于近裁剪平面中心、分别指向摄像机正上方和正右方的向量
            float halfHeight = near * Mathf.Tan(fov * 0.5f * Mathf.Deg2Rad);
            Vector3 toRight = CameraTrans.right * halfHeight * aspect;
            Vector3 toTop = CameraTrans.up * halfHeight;

            // 计算摄像机近裁剪平面的四个对应的向量，不仅包含了方向信息，它们的模对应了 个点到摄像机的空间距离
            Vector3 topLeft = CameraTrans.forward * near + toTop - toRight;
            float scale = topLeft.magnitude / near;

            topLeft.Normalize();
            topLeft *= scale;

            Vector3 topRight = CameraTrans.forward * near + toRight + toTop;
            topRight.Normalize();
            topRight *= scale;

            Vector3 bottomLeft = CameraTrans.forward * near - toTop - toRight;
            bottomLeft.Normalize();
            bottomLeft *= scale;

            Vector3 bottomRight = CameraTrans.forward * near + toRight - toTop;
            bottomRight.Normalize();
            bottomRight *= scale;

            // 把四个方向存储到frustumCorners不同的行中，和顶点着色器中顺序保持一致
            frustumCorners.SetRow(0, bottomLeft);
            frustumCorners.SetRow(1, bottomRight);
            frustumCorners.SetRow(2, topRight);
            frustumCorners.SetRow(3, topLeft);

            Material.SetMatrix("_FrustumCornersRay", frustumCorners);

            Material.SetFloat("_FogDensity", FogDensity);
            Material.SetColor("_FogColor", FogColor);
            Material.SetFloat("_FogStart", FogStart);
            Material.SetFloat("_FogEnd", FogEnd);

            Graphics.Blit(src, dest, Material);
        }
        else
        {
            Graphics.Blit(src, dest);
        }
    }
}

shader代码：

// 屏幕后处理-雾效果
Shader "Custom/FogWithDepthTexture"
{
    Properties
    {
        _MainTex ("Base (RGB)", 2D) = "white" { }
        _FogDensity ("Fog Density", Float) = 1.0 // 雾浓度
        _FogColor ("Fog Color", Color) = (1, 1, 1, 1) // 雾颜色
        _FogStart ("Fog Start", Float) = 0.0 // 雾开始高度
        _FogEnd ("Fog End", Float) = 1.0 // 雾结束高度
    }
    SubShader
    {
        CGINCLUDE

        #include "UnityCG.cginc"

        float4x4 _FrustumCornersRay;

        sampler2D _MainTex;
        half4 _MainTex_TexelSize;
        sampler2D _CameraDepthTexture;
        half _FogDensity;
        fixed4 _FogColor;
        float _FogStart;
        float _FogEnd;

        struct v2f
        {
            float4 pos: SV_POSITION;
            half2 uv: TEXCOORD0;
            half2 uv_depth: TEXCOORD1;
            float4 interpolatedRay: TEXCOORD2; // 像素向量
        };

        v2f vert(appdata_img v)
        {
            v2f o;
            o.pos = UnityObjectToClipPos(v.vertex);
            
            o.uv = v.texcoord;
            o.uv_depth = v.texcoord;
            
            // 下面要对这个纹理坐标进行平台差异化处理，因为OpenGL，(0, 0)点对应了屏幕的左下角，DirectX中对应了屏幕左上角
            // 大多数时候这都无关紧要，除了渲染到渲染纹理时。在此情况下，Unity 渲染到 Direct3D 上的纹理时，会自动在内部翻转渲染，以便平台之间的惯例匹配。
            // 如果我们做的屏幕后期特效简单（一次处理一个纹理），这无关紧要，因为 Graphics.Blit 方法会自动进行处理。
            // 然而，如果在屏幕后期特效中同时处理一个以上的 RenderTexture，它们很可能会在不同的垂直方向出现（仅在类似 Direct3D 的平台上，并且仅在使用抗锯齿选项时）
            
            // UNITY_UV_STARTS_AT_TOP，纹理的坐标系原点在纹理顶部的平台上值：Direct3D类似平台是1；OpenGL类似平台是0
            #if UNITY_UV_STARTS_AT_TOP
                // 在Direct3D平台下，如果我们开启了抗锯齿，则xxx_TexelSize.y 会变成负值，好让我们能够正确的进行采样。
                // 所以if (_MainTex_TexelSize.y < 0)的作用就是判断我们当前是否开启了抗锯齿。
                if (_MainTex_TexelSize.y < 0)
                    o.uv_depth.y = 1 - o.uv_depth.y;
            #endif
            
            // 尽管这里使用了很多判断语句，但由于屏幕后处理所用的模型是一个四边形网格，
            // 只包含4个顶点，因此这些操作不会对性能造成很大影响。
            int index = 0;
            if (v.texcoord.x < 0.5 && v.texcoord.y < 0.5)
            {
                index = 0;
            }
            else if (v.texcoord.x > 0.5 && v.texcoord.y < 0.5)
            {
                index = 1;
            }
            else if (v.texcoord.x > 0.5 && v.texcoord.y > 0.5)
            {
                index = 2;
            }
            else
            {
                index = 3;
            }

            #if UNITY_UV_STARTS_AT_TOP
                if (_MainTex_TexelSize.y < 0)
                    index = 3 - index;
            #endif
            
            o.interpolatedRay = _FrustumCornersRay[index];
            
            return o;
        }

        fixed4 frag(v2f i): SV_Target
        {
            // 使用SAMPLE_DEPTH_TEXTURE对深度纹理进行采样，再用LinearEyeDepth得到视角空间下的线性深度值
            float linearDepth = LinearEyeDepth(SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, i.uv_depth));
            // 与interpolatedRay相乘后再和世界空间下的摄像机位置相加，得到世界空间下的位置。
            float3 worldPos = _WorldSpaceCameraPos + linearDepth * i.interpolatedRay.xyz;
            
            // 使用公式计算雾效系数 f = (Hend - y) / (Hend - Hstart)
            float fogDensity = (_FogEnd - worldPos.y) / (_FogEnd - _FogStart);
            // 使用aturate函数截取到[O, l] 范围内
            fogDensity = saturate(fogDensity * _FogDensity);
            
            // 使用该系数将雾的颜色和原始颜色进行混合后返回
            fixed4 finalColor = tex2D(_MainTex, i.uv);
            finalColor.rgb = lerp(finalColor.rgb, _FogColor.rgb, fogDensity);
            
            return finalColor;
        }

        ENDCG

        Pass
        {
            ZTest Always Cull Off ZWrite Off

            CGPROGRAM

            #pragma vertex vert
            #pragma fragment frag

            ENDCG

        }
    }
    Fallback Off
}

Unity Shader 屏幕后处理-均匀雾效

Unity Shader系列文章：Unity Shader目录-初级篇

Unity Shader系列文章：Unity Shader目录-中级篇

参考文章：获取深度纹理和法线纹理

参考文章：使用深度纹理，计算像素的世界坐标

效果：

原理：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读