unity屏幕模糊

最新推荐文章于 2024-06-18 14:28:44 发布
最新推荐文章于 2024-06-18 14:28:44 发布
阅读量609 收藏 1
点赞数
分类专栏： Unity3D 文章标签： unity3d

转载出处：http://blog.youkuaiyun.com/zhaoguanghui2012/article/details/51462284

概述


由于公司手游项目需求，需要一个适合手机平台的模糊效果，同时需要开放一个参数便于调节模糊值。我首先想到的就是ps里面的均值模糊。查资料可以知道均值模糊是一种快速的图像模糊技术，相比与传统的卷积模糊（如高斯模糊），均值模糊可以更加有效率的完成对图像模糊。在unity官方自带imageeffect包也有一个blur的屏幕特效，用的就是均值模糊算法，只不过他只采样了离原像素上下左右模糊半径（Blur Spread）距离的四个像素进行平均处理。然后做迭代(Iterations)处理，即将模糊后的图像再次采样模糊，迭代次数越高越模糊，同时也会产生更多的drawcall,本文的效果就是从这个例子简化而来，使之适合手游项目，并且傻瓜式方便的调节参数。


原理


均值模糊的原理是通过图形滤波器来把一个像素和周围的像素一起求平均值，比如一个三阶的图像滤波器构造其实就是一个3*3的数组（n阶数组中的元素成为滤波器的系数和滤波器的权重，n称为滤波器的阶），相当于把一个像素和周围8个像素相加在一起再除以9求平均值，等于把一个像素和周围的像素搅拌在一起，自然就模糊了。均值滤波器与高斯模糊的滤波器不同的地方，就是采样的像素权重是相等的，因此效果相对而言要比高斯模糊差，但速度却要快一些。本例其实只采样了四个像素求和做平均，然后通过迭代多次采样，实现比较好的模糊效果。


Shader代码实现


shader代码部分相对比较简单，首先需要定义两个内部变量，_MainTex_TexelSize和_BlurOffsets，这两个变量都属于unity的黑魔法，官方文档并没有详细说明，_MainTex_TexelSize的解释可以参考这里，_BlurOffsets这个参数是用来接收从C#脚本里面穿过来的参数，即模糊半径。


[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. half4 _MainTex_TexelSize;  
  2. half4 _BlurOffsets;  

在顶点输入结构体里面定义一个一维四阶数组用来存储uv坐标：


[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. struct v2f {  
  2.     float4 vertex : SV_POSITION;  
  3.     half2 texcoord : TEXCOORD0;  
  4.     half2 taps[4] : TEXCOORD1;   
  5. };  

在vert函数里面将uv坐标进行偏移获得原像素上下左右偏移_BlurOffsets像素，并存储在taps[]数组里面，传给frag函数


[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. v2f vert (appdata_t v)  
  2. {  
  3.     v2f o;  
  4.     o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);  
  5.     o.texcoord = v.texcoord - _BlurOffsets.xy * _MainTex_TexelSize.xy;//将C#脚本传过来的图像偏移回原位置  
  6.     o.taps[0] = o.texcoord + _MainTex_TexelSize * _BlurOffsets.xy;  
  7.     o.taps[1] = o.texcoord - _MainTex_TexelSize * _BlurOffsets.xy;  
  8.     o.taps[2] = o.texcoord + _MainTex_TexelSize * _BlurOffsets.xy * half2(1,-1);  
  9.     o.taps[3] = o.texcoord - _MainTex_TexelSize * _BlurOffsets.xy * half2(1,-1);  
  10.     return o;  
  11.       
  12.       
  13. }  

在frag函数使用vert函数传过来的uv坐标数组采样图像然后进行叠加后平均化，以达到模糊效果：


[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. fixed4 frag (v2f i) : SV_Target  
  2. {  
  3.     half4 color = tex2D(_MainTex, i.taps[0]);  
  4.     color += tex2D(_MainTex, i.taps[1]);  
  5.     color += tex2D(_MainTex, i.taps[2]);  
  6.     color += tex2D(_MainTex, i.taps[3]);   
  7.     return color * 0.25;  
  8. }  

Shader完整代码


VF版本代码01 
[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. Shader "PengLu/ImageEffect/Unlit/BlurBox" {  
  2.     Properties {  
  3.     _MainTex ("Base (RGB)", 2D) = "white" {}  
  4. }  
  5.   
  6. SubShader {   
  7.     Pass {  
  8.         ZTest Always    ZWrite Off  
  9.   
  10.         CGPROGRAM  
  11.         #pragma vertex vert  
  12.         #pragma fragment frag  
  13.                      
  14.         #include "UnityCG.cginc"  
  15.   
  16.         struct appdata_t {  
  17.             float4 vertex : POSITION;  
  18.             float2 texcoord : TEXCOORD0;  
  19.         };  
  20.   
  21.         struct v2f {  
  22.             float4 vertex : SV_POSITION;  
  23.             half2 texcoord : TEXCOORD0;  
  24.             half2 taps[4] : TEXCOORD1;   
  25.         };  
  26.   
  27.         sampler2D _MainTex;  
  28.         half4 _MainTex_TexelSize;  
  29.         half4 _BlurOffsets;  
  30.           
  31.         v2f vert (appdata_t v)  
  32.         {  
  33.             v2f o;  
  34.             o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);  
  35.             o.texcoord = v.texcoord - _BlurOffsets.xy * _MainTex_TexelSize.xy;  
  36.             o.taps[0] = o.texcoord + _MainTex_TexelSize * _BlurOffsets.xy;  
  37.             o.taps[1] = o.texcoord - _MainTex_TexelSize * _BlurOffsets.xy;  
  38.             o.taps[2] = o.texcoord + _MainTex_TexelSize * _BlurOffsets.xy * half2(1,-1);  
  39.             o.taps[3] = o.texcoord - _MainTex_TexelSize * _BlurOffsets.xy * half2(1,-1);  
  40.             return o;  
  41.               
  42.               
  43.         }  
  44.           
  45.         fixed4 frag (v2f i) : SV_Target  
  46.         {  
  47.             half4 color = tex2D(_MainTex, i.taps[0]);  
  48.             color += tex2D(_MainTex, i.taps[1]);  
  49.             color += tex2D(_MainTex, i.taps[2]);  
  50.             color += tex2D(_MainTex, i.taps[3]);   
  51.             return color * 0.25;  
  52.         }  
  53.     ENDCG  
  54.     }  
  55. }  
  56. Fallback off  
  57. }  

C#脚本代码


C#脚本相对也比较简单，这个脚本主要负责把抓取屏幕并传递参数给shader进行模糊处理，这个脚本是从官方的简化而来，将迭代的次数固定为2，只留下模糊半径一个参数调节。关键的两个函数需要注意下：


[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. Graphics.BlitMultiTap (source, dest, material,  
  2.                        new Vector2(-off, -off),  
  3.                        new Vector2(-off,  off),  
  4.                        new Vector2( off,  off),  
  5.                        new Vector2( off, -off)  
  6.     );  

[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. RenderTexture buffer = RenderTexture.GetTemporary(rtW, rtH, 0);  

Graphics.BlitMultiTap函数官方解释在这里  ，大概意思是传递多个位图块给shader进行处理，每个位图块有各自的偏移（由vector[]数组决定）。但实际上我测试发现，这个函数传递的位图块是配合固定管线编程使用的，在5.0以下的blur特效shader代码里有以下代码：上面那个函数生成的四个纹理块一次对应下面四个_MainTex,shader代码里面并没有偏移，都是从Graphics.BlitMultiTap传递过来。

[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. SubShader {  
  2.         Pass {  
  3.             ZTest Always Cull Off ZWrite Off Fog { Mode Off }  
  4.             SetTexture [_MainTex] {constantColor (0,0,0,0.25) combine texture * constant alpha}  
  5.             SetTexture [_MainTex] {constantColor (0,0,0,0.25) combine texture * constant + previous}  
  6.             SetTexture [_MainTex] {constantColor (0,0,0,0.25) combine texture * constant + previous}  
  7.             SetTexture [_MainTex] {constantColor (0,0,0,0.25) combine texture * constant + previous}  
  8.         }  
  9.     }  




而在unity5.0的官方blur shader里面已经将固定管线的相关代码删除，而对vert&frag shader编程，它实际上传递了一个uv坐标偏移值为（off，off）的位图块给shader，并将偏移值传给内置变量_BlurOffsets，我们在相关代码里要重新做偏移，才会有偏移效果。因此Graphics.BlitMultiTap我们可以改成：


[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. Graphics.BlitMultiTap (source, dest, material,new Vector2(off, off) );  

RenderTexture.GetTemporary这个函数在这里主要是用来重新设定抓取的屏幕图像的长宽，在本例中我们将长宽设置成原来的8分之1后然后再传递给shader处理，可以是采样计算消耗降低到原来的64分之1，只是因此多消耗一个drawcall。由于还迭代了两次，最后这个屏幕特效需要消耗4个drawcall，当然由于做了个判断，当Blur Size为0时，只消耗1个drallcall，不做模糊处理。


完整C#脚本如下： 
[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. using UnityEngine;  
  2. using System.Collections;  
  3. using System;  
  4.   
  5. [ExecuteInEditMode]  
  6. [AddComponentMenu ("PengLu/ImageEffect/Blurbox")]  
  7. public class ImageEffect_BlurBox : MonoBehaviour {  
  8.     #region Variables  
  9.     public Shader BlurBoxShader = null;  
  10.     private Material BlurBoxMaterial = null;  
  11.   
  12.     [Range(0.0f, 1.0f)]  
  13.     public float BlurSize = 0.5f;  
  14.  
  15.     #endregion  
  16.  
  17.     #region Properties  
  18.   
  19.     Material material  
  20.     {  
  21.         get  
  22.         {  
  23.             if(BlurBoxMaterial == null)  
  24.             {  
  25.                 BlurBoxMaterial = new Material(BlurBoxShader);  
  26.                 BlurBoxMaterial.hideFlags = HideFlags.HideAndDontSave;    
  27.             }  
  28.             return BlurBoxMaterial;  
  29.         }  
  30.     }  
  31.     #endregion  
  32.     // Use this for initialization  
  33.     void Start () {  
  34.   
  35.         BlurBoxShader = Shader.Find("PengLu/ImageEffect/Unlit/BlurBox");  
  36.           
  37.         // Disable if we don't support image effects  
  38.         if (!SystemInfo.supportsImageEffects)  
  39.         {  
  40.             enabled = false;  
  41.             return;  
  42.         }  
  43.   
  44.         // Disable the image effect if the shader can't  
  45.         // run on the users graphics card  
  46.         if (!BlurBoxShader || !BlurBoxShader.isSupported)  
  47.             enabled = false;  
  48.             return;  
  49.       
  50.     }  
  51.   
  52.     public void FourTapCone (RenderTexture source, RenderTexture dest,int iteration)  
  53.         {  
  54.             float off = BlurSize*iteration+0.5f;  
  55.             Graphics.BlitMultiTap (source, dest, material,  
  56.                                    new Vector2(-off, -off),  
  57.                                    new Vector2(-off,  off),  
  58.                                    new Vector2( off,  off),  
  59.                                    new Vector2( off, -off)  
  60.                 );  
  61.         }  
  62.   
  63.     private void DownSample4x (RenderTexture source, RenderTexture dest)  
  64.         {  
  65.             float off = 1.0f;  
  66.             // Graphics.Blit(source, dest, material);  
  67.             Graphics.BlitMultiTap (source, dest, material,  
  68.                                    new Vector2(off, off),  
  69.                                    new Vector2(-off,  off),  
  70.                                    new Vector2( off,  off),  
  71.                                    new Vector2( off, -off)  
  72.                 );  
  73.         }  
  74.   
  75.     void OnRenderImage (RenderTexture sourceTexture, RenderTexture destTexture)  
  76.     {     
  77.         if(BlurSize != 0 && BlurBoxShader != null){  
  78.   
  79.             int rtW = sourceTexture.width/8;  
  80.             int rtH = sourceTexture.height/8;  
  81.             RenderTexture buffer = RenderTexture.GetTemporary(rtW, rtH, 0);  
  82.   
  83.             DownSample4x (sourceTexture, buffer);  
  84.   
  85.             for(int i = 0; i < 2; i++)  
  86.             {  
  87.                 RenderTexture buffer2 = RenderTexture.GetTemporary(rtW, rtH, 0);  
  88.                 FourTapCone (buffer, buffer2,i);  
  89.                 RenderTexture.ReleaseTemporary(buffer);  
  90.                 buffer = buffer2;  
  91.             }  
  92.             Graphics.Blit(buffer, destTexture);  
  93.   
  94.             RenderTexture.ReleaseTemporary(buffer);  
  95.         }  
  96.   
  97.         else{  
  98.             Graphics.Blit(sourceTexture, destTexture);  
  99.               
  100.         }  
  101.           
  102.           
  103.     }  
  104.       
  105.     // Update is called once per frame  
  106.     void Update () {  
  107.         #if UNITY_EDITOR  
  108.         if (Application.isPlaying!=true)  
  109.         {  
  110.             BlurBoxShader = Shader.Find("PengLu/ImageEffect/Unlit/BlurBox");  
  111.   
  112.         }  
  113.         #endif  
  114.       
  115.     }  
  116.   
  117.      public void OnDisable () {  
  118.         if (BlurBoxMaterial)  
  119.             DestroyImmediate (BlurBoxMaterial);  
  120.     }  
  121. }  

最终模糊特效效果：



 
css模糊遮罩效果_Unity Shader - 遮罩效果
weixin_34901508的博客
12-31 377
我们今天要实现的一个shader效果 - 遮罩。 其实遮罩原理非常简单，把源像素和遮罩图形像素相乘就行了。大致效果如下： 准备工作1.创建一个场景和一些物体（cube，sphere等）。 2.创建一个新的C#脚本和一个Shader，命名为Mask。 3.把Mask.cs拖拽到Camera上。具体实现Mask.cs脚本代码如下：PostEffectsBase 基类 可以到我之前的一篇文章里查看，主要...
Unity UI界面局部模糊
sinat_34014668的博客
08-31 3966
UI界面局部模糊
3 实现模糊遮罩_【Unity游戏客户端框架搭建】六、UI框架之弹窗模糊实现
weixin_39845430的博客
01-14 690
前言接上一篇UI模块搭建，【Unity游戏客户端框架搭建】六、UI框架(MVC+UGUI) 弹窗类型也是属于框架的一部分，每次弹出非全屏弹窗的时候，为了突出当前弹窗，一般会在这个弹窗后面加一个模糊遮罩来突出前景。本篇就是实现一下这个模糊遮罩的管理。需求分析首先，这个根据弹窗是否有模糊遮罩，模糊遮罩是否可以点击，我们分成了分别做了以下定义/// <summary> /// 模糊类型 //...
Unity 屏幕模糊效果
qiyet的博客
11-02 4273
Unity 屏幕模糊效果 前几天，美术要我做一个屏幕模糊的效果，百度了半天，最后总算解决了。 趁着有时间，现在来总结一下。 首先我这边是为了出效果，所以原理先放一边，来谈谈如何实现。什么高斯模糊，均值模糊先忽略，看起来太懵，要花大时间去钻。总的来说，实现主要是两种类型，一种是基于摄像机，一种是基于UI遮罩实现。 摄像机实现 Shader部分 // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'
unity 屏幕模糊
05-25
在Unity中实现"屏幕模糊"效果，是通过图形处理技术来达到视觉上的艺术效果或者功能需求。在游戏开发中，屏幕模糊经常被用来模拟人物的视线模糊、景深效果或者在某些UI元素（如提示面板或对话框）出现时对背景进行...
Unity屏幕模糊效果实现与应用指南
### Unity屏幕模糊知识点解析： 1. **后处理堆栈（Post Processing Stack）**： 后处理堆栈是Unity中一个强大的视觉效果框架，可以让我们轻松地在游戏或应用中实现各种高级视觉效果，包括屏幕模糊。后处理堆栈提供...
Unity3D UGUI特效之Image高斯模糊效果
12-31
这几天研究了下模糊特效，看了很多文章，其原理就是拿取图片或屏幕数据，然后将周围的元素和目标位置的颜色值进行一个融合计算，然后自己写了一个小小的测试程序。 这个模糊也可以分成两种，一个是自身模糊，一个是...
Unity3D 屏幕后处理模糊效果Shader
文先生的博客
11-11 3370
分享一个简易的屏幕后处理，模糊效果的shader实现： Shader "Custom/BlurEffect" { Properties { _MainTex("Main Tex", 2D) = "white"{} _BlurSize("BlurSize", Range(0, 1)) = 1.0 } SubShader { CGINCLUDE #include "UnityCG.cginc" sampler2D _MainTex; float4 _MainTex_ST;
Unity3D运动模糊特效
06-04
开启混合（Blend）后，通过 Alpha 通道控制当前屏幕纹理与历史屏幕纹理进行混合，当有物体运动时，就会将当前位置的物体影像与历史位置的物体影像进行混合，从而实现运动模糊效果，即模糊拖尾效果。 本资源基于 ...
Unity 高斯模糊Shader
02-27
高斯模糊GaussianBlur，里面提供了实例，该模糊应用的范围包括3D模型、UI（UGUI等）。不同于Unity自带的相机全屏模糊（后处理屏幕特效），是一个材质球的方式，直接模糊当前物体层级的背景图像。可以添加到任何能设置材质球的地方，比如UGUI的一个Panel组件，在Image里的Material中设置此高斯模糊的材质球，则在此Panel后面的所有UI以及3D物体都将模糊，并可以调节强度。里面有两种模糊shader，一种是针对移动端性能优化的，使用了两次高斯模糊；一种是高质量的，三次高斯模糊。
Unity 高斯模糊(Gaussian Blur) 在UGUI中[高效][易用][效果棒]的实用方案
04-19
2019-04-19 新鲜出炉的原创作品 超实用的 Unity 高斯模糊(Gaussian Blur) 在UGUI中[高效][易用][效果棒]的实用方案 原文地址：https://blog.youkuaiyun.com/weixin_43452343/article/details/89407650 应该就是你想要
笔记本使用Unity运行和调试Htc Vive
06-06
资源是关于外星人笔记本 使用Unity 运行和调试Htc Vive 解决笔记本有画面头盔无画面的问题 实力干货 资源里面有我的QQ 不懂的加我， 不会让你的分浪费
Unity中的模糊效果（基于URP）
最新发布
m0_58594062的博客
06-18 3449
六、移轴模糊 （Tilt Shift Blur）十、方向模糊（Directional Blur）三，Kawase模糊（Kawase Blur）一，高斯模糊（Gaussian Blur）八、粒状模糊（Grainy Blur）九、径向模糊（Radial Blur）五、散景模糊（Bokeh Blur）四、双重模糊（Dual Blur）七、光圈模糊（Iris Blur）二，方框模糊（Box Blur）十种模糊效果，以后处理方式实现。
unity3d 摄像机近地面清楚，远地面模糊
abcd5711664321的博客
06-29 3558
设置方法 选中贴图 在属性面板，拖动Aniso Level的值从0~9改变，值越大贴图越清晰，但是消耗也变大，文档说会造成显卡消耗，一般只用在地面上，其他地方没必要
Unity中的遮罩面板逐渐清晰逐渐模糊功能
CoffeMilk的博客
08-11 3901
一、创建一个面板作为遮罩面板，然后指定大小 接着创建一个控制该面板的脚本（将这个脚本FadeInAndOut添加给该面板） /*** * Title："智慧工厂" 项目 * 主题：全局层：面板物体的淡入淡出 * Description： * 功能： * 1、实现面板的淡入淡出功能 * Date：2017 * Version：0.1版本 * Author：Coffee * Mod...
Unity自定义后处理——模糊效果
阿赵的博客
07-20 2728
继续介绍后处理的做法，这一期介绍的是模糊效果的做法。
UnityShader基础案例（四）——模糊效果
SliverAsh_的博客
10-18 2477
这个很常见，在后处理一章中有实现，这里不再赘述。还有基于整体的局部模糊，就是屏幕上某一块地方不受模糊处理。
Unity3D-UGUI特效之Image的高斯模糊效果
热门推荐
苏小败在路上
01-13 2万+
这几天研究了下模糊特效，看了很多文章，其原理就是拿取图片或屏幕数据，然后将周围的元素和目标位置的颜色值进行一个融合计算，然后自己写了一个小小的测试程序。 这个模糊也可以分成两种，一个是自身模糊，一个是从屏幕上取值进行模糊。第一个用于一些小的列表展示，比如未解锁时，是模糊的。第二个是凸显弹框效果的，将背景都模糊掉，自己将这个稍微加强了些可以指定模糊一个位置。 针对移动平台，使用高斯模糊，其实效率
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值