Unity Shader案例之——模糊效果

其他 2018-07-27 02:09:49 阅读次数: 0

狂拽屌炸天的游戏效果实现，都离不开模糊效果，而我们最常用的方法是后处理，今天介绍几种模糊效果的实现。首先上一张大原图：
原图

以下为了对比各种方法的效果差异，所有参数都保持一致：
参数

1. 均值模糊

第一种介绍的是均值模糊，三种中最为简单的模糊效果，计算简单，效果也差强人意：
均值模糊

Shader：

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

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

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

            struct v2f
            {
                float4 pos : SV_POSITION;
                half2 uv : TEXCOORD0;
                half2 uv1 : TEXCOORD1;
                half2 uv2 : TEXCOORD2;
                half2 uv3 : TEXCOORD3;
                half2 uv4 : TEXCOORD4;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float4 _MainTex_TexelSize;
            float _BlurRadius;

            v2f vert (appdata v)
            {
                v2f o;
                o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
                o.uv = v.uv.xy;
                o.uv1 = v.uv + _BlurRadius * _MainTex_TexelSize * half2(0,1);
                o.uv2 = v.uv + _BlurRadius * _MainTex_TexelSize * half2(0,-1);
                o.uv3 = v.uv + _BlurRadius * _MainTex_TexelSize * half2(1,0);
                o.uv4 = v.uv + _BlurRadius * _MainTex_TexelSize * half2(-1,0);

                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                col += tex2D(_MainTex, i.uv1);
                col += tex2D(_MainTex, i.uv2);
                col += tex2D(_MainTex, i.uv3);
                col += tex2D(_MainTex, i.uv4);
                col *= 0.2;

                return col;
            }
            ENDCG
        }
    }
}

C#：

using UnityEngine;

public class SimpleBlur : PostEffectBase
{
    [Range(0.1f, 10)]
    public float _BlurRadius = 0.1f;

    [Range(0, 10)]
    public int downSample = 1;

    [Range(0, 10)]
    public int iteration = 1;

    public void OnRenderImage(RenderTexture src, RenderTexture dst)
    {
        if (_Material)
        {
            RenderTexture rt1 = RenderTexture.GetTemporary(src.width >> downSample, src.height >> downSample, 0, src.format);
            RenderTexture rt2 = RenderTexture.GetTemporary(src.width >> downSample, src.height >> downSample, 0, src.format);

            _Material.SetFloat("_BlurRadius", _BlurRadius);

            Graphics.Blit(src, rt1, _Material);

            for (int i = 0; i < iteration; i++)
            {
                Graphics.Blit(rt1, rt2, _Material);
                Graphics.Blit(rt2, rt1, _Material);
            }

            Graphics.Blit(rt1, dst, _Material);

            RenderTexture.ReleaseTemporary(rt1);
            RenderTexture.ReleaseTemporary(rt2);
        }
    }
}

2. 高斯模糊

高斯，提到这个词，一般人都“敬而远之”，但其实很多效果都是在“高斯”的基础上实现的，这里实现了两版高斯模糊。

  • 版本一
    高斯一

Shader：

Shader "Custom/GaussBlur"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }

    SubShader
    {
        Pass
        {
            ZTest Always
            Cull Off
            ZWrite Off

            CGPROGRAM
            #pragma target 3.0
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

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

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

            sampler2D _MainTex;
            float4 _MainTex_TexelSize;
            half _BlurRadius;
            float totalWeight;

            half GetWeight(float x, float y, float rho)
            {
                return exp(-(x*x + y*y)/(2.0f*rho*rho));
            }

            fixed4 GaussBlur(v2f i)
            {
                // half totalWeight = 0;
                fixed4 finalColor = fixed4(0, 0, 0, 0);
                half rho = _BlurRadius / 3.0f;

                // for(int w = -_BlurRadius; w<= _BlurRadius; w++)
                // {
                //  for(int h = -_BlurRadius; h<= _BlurRadius; h++)
                //  {
                //      half weight = GetWeight(w, h, rho);
                //      totalWeight += weight;
                //  }
                // }

                for(int x = -_BlurRadius; x<= _BlurRadius; x++)
                {
                    for(int y = -_BlurRadius; y<= _BlurRadius; y++)
                    {
                        half wt = GetWeight(x, y, rho)/totalWeight;

                        fixed4 col = tex2D(_MainTex, i.uv + float2(x, y) * _MainTex_TexelSize.xy);
                        finalColor += col * wt;
                    }
                }

                return finalColor;
            }

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.uv.xy = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = GaussBlur(i);
                return col;
            }

            ENDCG
        }
    }
}

C#：

using UnityEngine;

public class GaussBlur : PostEffectBase
{
    [Range(0.1f, 10)]
    public float _BlurRadius = 0.1f;

    [Range(0, 10)]
    public int downSample = 1;

    [Range(0, 10)]
    public int iteration = 1;

    public void OnRenderImage(RenderTexture src, RenderTexture dst)
    {
        if (_Material)
        {
            RenderTexture rt1 = RenderTexture.GetTemporary(src.width >> downSample, src.height >> downSample, 0, src.format);
            RenderTexture rt2 = RenderTexture.GetTemporary(src.width >> downSample, src.height >> downSample, 0, src.format);

            _Material.SetFloat("_BlurRadius", _BlurRadius);
            _Material.SetFloat("totalWeight", GetTotalWeight());

            Graphics.Blit(src, rt1, _Material);

            for (int i = 0; i < iteration; i++) 
            {
                Graphics.Blit(rt1, rt2, _Material);
                Graphics.Blit(rt2, rt1, _Material);
            }

            Graphics.Blit(rt1, dst, _Material);

            RenderTexture.ReleaseTemporary(rt1);
            RenderTexture.ReleaseTemporary(rt2);
        }
    }

    private float GetWeight(float x, float y, float rho) {
        return Mathf.Exp(-(x * x + y * y) / (2.0f * rho * rho));
    }

    private float GetTotalWeight()
    {
        float totalWeight = 0;
        float rho = _BlurRadius / 3.0f;

        for (int w = -(int)_BlurRadius; w <= _BlurRadius; w++) {
            for (int h = -(int)_BlurRadius; h <= _BlurRadius; h++) {
                float weight = GetWeight(w, h, rho);
                totalWeight += weight;
            }
        }

        return totalWeight;
    }
}
  • 版本二
    高斯二

Shader：

Shader "Custom/GaussBlur2"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }

    SubShader
    {
        CGINCLUDE
        #include "UnityCG.cginc"

        sampler2D _MainTex;
        float4 _MainTex_TexelSize;
        half _BlurRadius;

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

        struct v2f
        {
            float4 vertex : SV_POSITION;
            float2 uvs[5] : TEXCOORD1;
        };

        v2f vert_VerticalBlur(appdata v){
            v2f o;
            o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
            o.uvs[0] = v.uv;
            o.uvs[1] = v.uv + float2(0, _MainTex_TexelSize.y * 1) * _BlurRadius;
            o.uvs[2] = v.uv + float2(0, _MainTex_TexelSize.y * -1) * _BlurRadius;
            o.uvs[3] = v.uv + float2(0, _MainTex_TexelSize.y * 2) * _BlurRadius;
            o.uvs[4] = v.uv + float2(0, _MainTex_TexelSize.y * -2) * _BlurRadius;
            return o;
        }

        v2f vert_HorizontalBlur(appdata v){
            v2f o;
            o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
            o.uvs[0] = v.uv;
            o.uvs[1] = v.uv + float2(_MainTex_TexelSize.x * 1, 0) * _BlurRadius;
            o.uvs[2] = v.uv + float2(_MainTex_TexelSize.x * -1, 0) * _BlurRadius;
            o.uvs[3] = v.uv + float2(_MainTex_TexelSize.x * 2, 0) * _BlurRadius;
            o.uvs[4] = v.uv + float2(_MainTex_TexelSize.x * -2, 0) * _BlurRadius;
            return o;
        }

        fixed4 fragBlur (v2f i) : SV_Target
        {
            half weight[3] = {0.4026, 0.2442, 0.0545};

            fixed4 col = tex2D(_MainTex, i.uvs[0]) * weight[0];

            for(int j = 1; j < 3; j++)
            {
                col += tex2D(_MainTex, i.uvs[2*j - 1]) * weight[j];
                col += tex2D(_MainTex, i.uvs[2*j]) * weight[j];
            }

            return col;
        }
        ENDCG

        ZTest Always
        Cull Off
        ZWrite Off

        //Pass1
        Pass
        {
            NAME "GAUSSIAN_BLUR_VERTICAL"

            CGPROGRAM
            #pragma vertex vert_VerticalBlur
            #pragma fragment fragBlur
            ENDCG
        }

        //Pass2
        Pass
        {
            NAME "GAUSSIAN_BLUR_HORIZONTAL"

            CGPROGRAM
            #pragma vertex vert_HorizontalBlur
            #pragma fragment fragBlur
            ENDCG
        }
    }

    FallBack Off
}

C#：

using UnityEngine;

public class GaussBlur2 : PostEffectBase
{
    [Range(0.1f, 10)]
    public float _BlurRadius = 0.1f;

    [Range(0, 10)]
    public int downSample = 1;

    [Range(0, 10)]
    public int iteration = 1;

    public void OnRenderImage(RenderTexture src, RenderTexture dst)
    {
        if (_Material)
        {
            RenderTexture rt1 = RenderTexture.GetTemporary(src.width >> downSample, src.height >> downSample, 0, src.format);
            RenderTexture rt2 = RenderTexture.GetTemporary(src.width >> downSample, src.height >> downSample, 0, src.format);

            _Material.SetFloat("_BlurRadius", _BlurRadius);

            Graphics.Blit(src, rt1, _Material, 1);

            for (int i = 0; i < iteration; i++) 
            {
                Graphics.Blit(rt1, rt2, _Material, 0);
                Graphics.Blit(rt2, rt1, _Material, 1);
            }

            Graphics.Blit(rt1, dst, _Material, 0);

            RenderTexture.ReleaseTemporary(rt1);
            RenderTexture.ReleaseTemporary(rt2);
        }
    }
}

这两版原理上是一样的，只是后者是借鉴前人的，而前者是自己对高斯计算做了封装，增加了模糊半径的动态调整，并合为一个Pass。

3. 中心模糊

这个是应需求而生的效果，让模糊度与当前像素与屏幕中心的距离相关联。仔细观察，中间清晰，周围模糊，类似于吃鸡游戏里的开镜效果，嗯……暂且就叫中心模糊吧。
这里写图片描述

Shader：

Shader "Custom/CenterBlur"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }

    CGINCLUDE

    #include "UnityCG.cginc"

    sampler2D _MainTex;
    float4 _MainTex_ST;
    float4 _MainTex_TexelSize;

    half _BlurRadius;
    half _CenterRadius;
    float totalWeight;

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

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

    v2f vert (appdata v)
    {
        v2f o;
        o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);

        o.uv.xy = v.uv;
        float2 uv1 = o.uv.xy;
        o.uv.zw = o.uv.xy;

#if UNITY_UV_STARTS_AT_TOP  
        if (_MainTex_TexelSize.y < 0)  
            o.uv.w = 1 - o.uv.w;  
#endif 
        return o;
    }

    half GetWeight(float x, float y, float rho)
    {
        return exp(-(x*x + y*y)/(2.0f*rho*rho));
    }

    fixed4 GaussBlur(v2f i)
    {
        fixed4 finalColor = fixed4(0, 0, 0, 0);
        half rho = _BlurRadius / 3.0f;

        for(int x = -_BlurRadius; x<= _BlurRadius; x++)
        {
            for(int y = -_BlurRadius; y<= _BlurRadius; y++)
            {
                half wt = GetWeight(x, y, rho)/totalWeight;

                fixed4 col = tex2D(_MainTex, i.uv + float2(x, y) * _MainTex_TexelSize.xy);
                finalColor += col * wt;
            }
        }

        return finalColor;
    }

    ENDCG

    SubShader
    {
        Tags { "RenderType"="Opaque" }

        //Pass1
        Pass{
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 texCol = tex2D(_MainTex, i.uv);
                fixed4 blur = GaussBlur(i);

                half radius = length(i.uv - fixed2(0.5f,0.5f));
                half dis = max(0, min(1, _CenterRadius - radius));

                fixed4 finalCol = lerp(blur, texCol, dis);

                return finalCol;
            }
            ENDCG
        }

        //Pass2
        Pass{
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"
            int showFactor = 0;

            sampler2D _BlurTex;

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 texCol = tex2D(_MainTex, i.uv.xy);
                fixed4 blur = tex2D(_BlurTex, i.uv.zw);

                half radius = length(i.uv - fixed2(0.5f,0.5f));
                half factor = max(0, min(1, _CenterRadius - radius));

                fixed4 finalCol = lerp(blur, texCol, factor);
                fixed4 factorCol = fixed4(1,1,1,1) * factor;
                finalCol = lerp(finalCol, factorCol, showFactor);

                return finalCol;
            }
            ENDCG
        }
    }
}

C#：

using UnityEngine;

public class CenterBlur : PostEffectBase
{
    public bool ShowFactor = false;

    [Range(0.1f, 10)]
    public float _BlurRadius = 0.1f;

    [Range(0.1f, 1.8f)]
    public float CenterRadius = 0.1f;

    [Range(0, 10)]
    public int downSample = 1;

    [Range(0, 10)]
    public int iteration = 1;

    public void OnRenderImage(RenderTexture src, RenderTexture dst)
    {
        if (_Material)
        {
            RenderTexture rt1 = RenderTexture.GetTemporary(src.width >> downSample, src.height >> downSample, 0, src.format);
            RenderTexture rt2 = RenderTexture.GetTemporary(src.width >> downSample, src.height >> downSample, 0, src.format);

            _Material.SetFloat("_BlurRadius", _BlurRadius);
            _Material.SetFloat("_CenterRadius", CenterRadius);
            _Material.SetFloat("totalWeight", GetTotalWeight());
            _Material.SetFloat("showFactor", ShowFactor ? 1 : 0);


            Graphics.Blit(src, rt1, _Material, 0);
            for (int i = 0; i < iteration; i++)
            {
                Graphics.Blit(rt1, rt2, _Material, 0);
                Graphics.Blit(rt2, rt1, _Material, 0);
            }

            _Material.SetTexture("_BlurTex", rt1);
            Graphics.Blit(src, dst, _Material, 1);

            RenderTexture.ReleaseTemporary(rt1);
        }
        else
        {
            Graphics.Blit(src, dst);
        }
    }

    private float GetWeight(float x, float y, float rho) {
        return Mathf.Exp(-(x * x + y * y) / (2.0f * rho * rho));
    }

    private float GetTotalWeight() {
        float totalWeight = 0;
        float rho = _BlurRadius / 3.0f;

        for (int w = -(int)_BlurRadius; w <= _BlurRadius; w++) {
            for (int h = -(int)_BlurRadius; h <= _BlurRadius; h++) {
                float weight = GetWeight(w, h, rho);
                totalWeight += weight;
            }
        }

        return totalWeight;
    }
}

为了更好的观察当前模糊范围，可以把ShowFactor打开，然后来调整参数。其中，越黑的地方越模糊：
这里写图片描述

最后，由于后处理的“失之毫厘差之千里”特性，所以这次用的图都比较大，由于文章排版限制，图可能会比较小，你可以把图片单独拖出来看，大图看着会更清晰，对比差异更明显哦！OK，今天就到这里，如果有更多更好的效果，欢迎交流讨论，共同学习进步！

猜你喜欢

转载自blog.csdn.net/u013917120/article/details/78985759
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022