AlayaElla

主要写写游戏制作方面的文章

【Unity屏幕后处理】屏幕边缘模糊效果

前言:

最近在尝试做一个比较禅意的游戏,因此在游戏中希望有一种边缘模糊的效果,来塑造一种朦胧美。
所以做了一个屏幕后处理的shader。
可以导入不同的遮罩图片来实现不同的边缘模糊效果。
现在这个效果,会因为屏幕比例拉伸把遮罩一起拉伸了。。
不过因为在我这里其实问题不大,所以就没改了。

效果:

效果1:从中心逐渐向外的越来越模糊:

使用遮罩:

效果2:特殊形状模糊

使用遮罩:

效果3:特殊形状模糊

使用遮罩:

**实现思路: **

实现方法比较简单,在高斯模糊的基础上做了一点点修改。
在高斯模糊之后,跟遮罩的透明度混合原图像,就可以实现这个效果。

shader代码如下:
shader总共使用了3个pass,前两个都是在处理模糊,最后一个根据遮罩把模糊的图像和原图像混合,然后输出结果。

Shader "Custom/BlurShape" {
    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}
        _BlurSize ("Blur Size", Float) = 1.0
        _ScopeTexture("Base (RGB)", 2D) = "white" {}
        _OriginTexture("Base (RGB)", 2D) = "white" {}
    }
    SubShader {
        CGINCLUDE

        #include "UnityCG.cginc"

        sampler2D _MainTex;  
        half4 _MainTex_TexelSize;
        float _BlurSize;
        sampler2D _ScopeTexture;
        half4 _ScopeTexture_TexelSize;
        sampler2D _OriginTexture;
        half4 _OriginTexture_TexelSize;

        struct v2f {
            float4 pos : SV_POSITION;
            half2 uv[5]: TEXCOORD0;
        };

        v2f vertBlurVertical(appdata_img v) {
            v2f o;
            o.pos = UnityObjectToClipPos(v.vertex);

            half2 uv = v.texcoord;

            o.uv[0] = uv;
            o.uv[1] = uv + float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;
            o.uv[2] = uv - float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;
            o.uv[3] = uv + float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;
            o.uv[4] = uv - float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;

            return o;
        }

        v2f vertBlurHorizontal(appdata_img v) {
            v2f o;
            o.pos = UnityObjectToClipPos(v.vertex); 
            half2 uv = v.texcoord;  
            o.uv[0] = uv;
            o.uv[1] = uv + float2(_MainTex_TexelSize.x * 1.0, 0.0) * _BlurSize;
            o.uv[2] = uv - float2(_MainTex_TexelSize.x * 1.0, 0.0) * _BlurSize;
            o.uv[3] = uv + float2(_MainTex_TexelSize.x * 2.0, 0.0) * _BlurSize;
            o.uv[4] = uv - float2(_MainTex_TexelSize.x * 2.0, 0.0) * _BlurSize;      
            return o;
        }   

        fixed4 fragBlur(v2f i) : SV_Target {
            float weight[3] = {0.4026, 0.2442, 0.0545};
            fixed3 blur = tex2D(_MainTex, i.uv[0]).rgb * weight[0];

            for (int it = 1; it < 3; it++) {
                blur += tex2D(_MainTex, i.uv[it*2-1]).rgb * weight[it];
                blur += tex2D(_MainTex, i.uv[it*2]).rgb * weight[it];
            }
            return fixed4(blur, 1.0);
        }

        fixed4 fragFinal(v2f i) : SV_Target{
            fixed3 Blurcolor = tex2D(_MainTex, i.uv[0]);
            fixed4 mask = tex2D(_ScopeTexture, i.uv[0]);
            fixed3 Origincolor = tex2D(_OriginTexture, i.uv[0]);
            fixed3 finalColor = lerp(Origincolor, Blurcolor, mask.a);
            return fixed4(finalColor, 1.0);
        }       
        ENDCG   

        ZTest Always Cull Off ZWrite Off        

        Pass {          
            CGPROGRAM         
            #pragma vertex vertBlurVertical  
            #pragma fragment fragBlur             
            ENDCG  
        }

        Pass {              
            CGPROGRAM   
            #pragma vertex vertBlurHorizontal  
            #pragma fragment fragBlur   
            ENDCG
        }

        Pass {
                CGPROGRAM
                #pragma vertex vert_img  
                #pragma fragment fragFinal
                ENDCG
        }
    } 
    FallBack "Diffuse"
}

项目连接:

https://github.com/AlayaElla/UnityAfterEffect

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注