背景模糊-unity-ui

using UnityEngine;
using UnityEngine.UI;

public class UIBgBlur : MonoBehaviour
{
    // 高斯模糊迭代次数
    [Range(0, 6)]
    public int Iterations = 5;
    // 每次迭代纹理坐标偏移的速度
    [Range(0.2f, 4.0f)]
    public float BlurSpread = 3f;
    // 降采样比率 
    [Range(1, 8)]
    public int DownSample = 4;
    private RawImage _blurImage;
    private RenderTexture _srcTexture, _destTexture;
    private Texture2D _texture2D;
    private Material _material;
    private void Awake()
    {
        _blurImage = transform.GetComponent<RawImage>();
        _material = _blurImage.material;
        _blurImage.material = null;

        _srcTexture = new RenderTexture(Screen.width, Screen.height, 24, RenderTextureFormat.ARGB32);
        _destTexture = new RenderTexture(Screen.width, Screen.height, 24, RenderTextureFormat.ARGB32);

        SetEnanble(true);
    }

    public void SetSortingOrder(int order)
    {
        Canvas blurCanvas = GetComponent<Canvas>();
        blurCanvas.overrideSorting = true;
        blurCanvas.sortingOrder = order;
    }

    public void SetEnanble(bool isOK)
    {
        Camera camera = Camera.main;
        _blurImage.gameObject.SetActive(isOK && camera != null);
        if (isOK)
            DrawCameraBlur(camera);
    }

    /// <summary>
    /// 绘制相机的图片
    /// </summary> 
    private void DrawCameraBlur(Camera camera)
    {

        if (camera == null)
            return;
        //保存相机渲染用于后面恢复
        var cameraPrevT = camera.targetTexture;
        camera.targetTexture = _srcTexture;
        camera.Render();
        // 还原相机渲染目标
        camera.targetTexture = cameraPrevT;
        OnRender(_srcTexture, _destTexture);
        // 设置当前活动的渲染纹理
        RenderTexture.active = _destTexture;
        //创建一个Texture2D
        if (_texture2D == null)
            _texture2D = new Texture2D(_destTexture.width, _destTexture.height, TextureFormat.RGB24, false);
        var texRect = new Rect(0, 0, _destTexture.width, _destTexture.height);
        _texture2D.ReadPixels(texRect, 0, 0);
        _texture2D.Apply();
        // 清空
        RenderTexture.active = null;
        // 赋值给RawImage
        _blurImage.texture = _texture2D;
    }

    /// <summary>
    /// 用Shader渲染高斯模糊
    /// </summary> 
    private void OnRender(RenderTexture src, RenderTexture dest)
    {
        if (_material != null)
        {
            // 降采样的纹理宽度
            int rtW = src.width / DownSample;
            // 降采样的纹理高度
            int rtH = src.height / DownSample;
            RenderTexture buffer0 = RenderTexture.GetTemporary(rtW, rtH, 0);
            // 滤波模式设置为双线性
            buffer0.filterMode = FilterMode.Bilinear;
            Graphics.Blit(src, buffer0);
            for (int i = 0; i < Iterations; i++)
            {
                // 设置模糊尺寸(纹理坐标的偏移量)
                _material.SetFloat("_BlurSize", 1.0f + i * BlurSpread);
                RenderTexture buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);
                // 渲染垂直的Pass
                Graphics.Blit(buffer0, buffer1, _material, 0);
                RenderTexture.ReleaseTemporary(buffer0);
                buffer0 = buffer1;
                buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);
                // 渲染水平的Pass
                Graphics.Blit(buffer0, buffer1, _material, 1);
                RenderTexture.ReleaseTemporary(buffer0);
                buffer0 = buffer1;
            }
            Graphics.Blit(buffer0, dest);
            RenderTexture.ReleaseTemporary(buffer0);
        }
        else
        {
            Graphics.Blit(src, dest);
        }
    }
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Shader "MyShader/GaussianBlur" { // 高斯模糊
    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {} // 主纹理
        _BlurSize ("Blur Size", Float) = 1.0 // 模糊尺寸(纹理坐标的偏移量)
    }
 
    SubShader {
        CGINCLUDE
        
        #include "UnityCG.cginc"
        
        sampler2D _MainTex; // 主纹理
        half4 _MainTex_TexelSize; // _MainTex的像素尺寸大小, float4(1/width, 1/height, width, height)
        float _BlurSize; // 模糊尺寸(纹理坐标的偏移量)
          
        struct v2f {
            float4 pos : SV_POSITION; // 模型空间顶点坐标
            half2 uv[5]: TEXCOORD0; // 5个邻域的纹理坐标
        };
          
        v2f vertBlurVertical(appdata_img v) { // 垂直模糊顶点着色器
            v2f o;
            o.pos = UnityObjectToClipPos(v.vertex); // 模型空间顶点坐标变换到裁剪空间, 等价于: mul(UNITY_MATRIX_MVP, 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); // 模型空间顶点坐标变换到裁剪空间, 等价于: mul(UNITY_MATRIX_MVP, 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}; // 大小为5的一维高斯核,实际只需记录3个权值
            fixed3 sum = tex2D(_MainTex, i.uv[0]).rgb * weight[0];
            for (int j = 1; j < 3; j++) {
                sum += tex2D(_MainTex, i.uv[j * 2 - 1]).rgb * weight[j]; // 中心右侧或下侧的纹理*权值
                sum += tex2D(_MainTex, i.uv[j * 2]).rgb * weight[j]; // 中心左侧或上侧的纹理*权值
            }
            return fixed4(sum, 1.0);
        }
            
        ENDCG
        
        ZTest Always Cull Off ZWrite Off
        
        Pass {
            NAME "GAUSSIAN_BLUR_VERTICAL"
            
            CGPROGRAM
              
            #pragma vertex vertBlurVertical  
            #pragma fragment fragBlur
              
            ENDCG  
        }
        
        Pass {  
            NAME "GAUSSIAN_BLUR_HORIZONTAL"
            
            CGPROGRAM  
            
            #pragma vertex vertBlurHorizontal  
            #pragma fragment fragBlur
            
            ENDCG
        }
    }
 
    FallBack "Diffuse"
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352

推荐阅读更多精彩内容