1. 项目概述为什么高斯模糊是Shader学习的必经之路在Unity的Shader开发中高斯模糊是一个绕不开的经典课题。它不仅是图像后处理中最常用的效果之一更是理解Shader核心工作机制——特别是片元着色器中的卷积操作与性能权衡——的绝佳范例。很多朋友初学Shader时可能会被各种光照模型、法线贴图搞得晕头转向但高斯模糊不同它的目标很纯粹让图像变“柔”变“糊”。这个看似简单的目标背后却藏着采样、权重计算、分离优化等一系列硬核知识点。我最初接触高斯模糊时以为就是简单地对周围像素取个平均值。但真正动手实现才发现远不是那么回事。普通的均值模糊会让图像边缘出现难看的锯齿和方块感而高斯模糊通过一套精妙的数学公式让模糊效果过渡自然、平滑这正是它成为行业标准的原因。无论是制作UI的毛玻璃效果、模拟景深、还是为Bloom泛光效果做预处理高斯模糊都扮演着关键角色。这篇文章我就结合《Unity Shader入门精要》的脉络和我自己的踩坑经验带你从原理到实现彻底吃透这个效果。无论你是刚看完理论想找地方练手还是项目中急需一个高效模糊方案这里都有你想要的“干货”。2. 高斯模糊的核心原理与数学拆解2.1 从卷积核理解模糊的本质图像处理中的“模糊”在数学上对应的是“卷积”操作。你可以把卷积核想象成一个有魔力的小窗口比如3x3、5x5的格子这个窗口在原始图像上滑动。窗口每停留在一个中心像素上我们就用窗口里每个格子对应的“权重”去乘以它覆盖住的图像像素值然后把所有乘积累加起来得到的结果就是这个中心像素点模糊后的新颜色值。均值模糊就是这个窗口里所有格子的权重都一样比如3x3窗口每个权重都是1/9。问题在于它平等地对待中心像素和边缘像素忽略了空间距离的影响导致模糊后的图像细节损失严重且边缘生硬。高斯模糊则聪明得多它使用的权重值不是均匀的而是符合“高斯分布”也叫正态分布。这个分布的特点是离中心越近权重越大离中心越远权重呈指数级衰减。这意味着中心像素对最终结果的贡献最大紧邻的像素次之远处的像素影响微乎其微。这样计算出来的新像素值既融合了周围信息又最大程度地保留了自身的特征从而实现了平滑、自然的过渡效果。2.2 一维与二维高斯核的公式与计算高斯函数的标准形式是G(x) (1 / (σ * sqrt(2π))) * exp(-(x²) / (2σ²))。其中x是距离中心的偏移量σ是标准差它决定了分布的“胖瘦”也就是模糊的剧烈程度。σ越大曲线越平缓意味着更远的像素也能获得较大权重模糊效果就越强。在实现时我们通常使用一个简化版因为前面的常数系数(1 / (σ * sqrt(2π)))在最后归一化让所有权重之和为1时会被消去。所以实际使用的核心是G(x) exp(-(x²) / (2σ²))。对于一个5x5的二维高斯核我们需要计算每个位置(i, j)的权重G(i, j) exp(-(i² j²) / (2σ²))。然后将所有G(i, j)相加得到总和sum最后让每个权重除以sum完成归一化。例如假设σ1计算中心点(0,0)的权重为exp(0)1点(1,0)的权重为exp(-0.5)≈0.6065以此类推。注意我们通常不会在Shader运行时动态计算这些权重值那样开销太大。标准的做法是在脚本中预先计算好权重数组然后作为属性[Range]或常量数组static const传递给Shader。一个5x5的核需要25次采样和计算这是性能瓶颈所在。2.3 关键优化二维高斯核的分离直接使用二维高斯核如5x5进行卷积每个像素需要进行25次纹理采样和乘法累加操作性能代价高昂。高斯函数一个绝妙的特性是可分离性。这意味着一个二维高斯函数可以分解为两个一维高斯函数的乘积G(x, y) G(x) * G(y)。这个特性在工程上带来了革命性的优化我们可以将二维卷积拆分成两个连续的一维卷积。第一次Pass水平模糊使用一个水平方向的一维高斯核如[0.0545, 0.2442, 0.4026, 0.2442, 0.0545]这是一个σ1的近似核对图像进行水平方向的卷积。每个像素只需采样同一行上的5个像素。第二次Pass垂直模糊将第一次Pass的结果作为输入使用同一个权重数组进行垂直方向的卷积。每个像素只需采样同一列上的5个像素。这样原本需要N*N次采样如25次的操作被优化为NN次采样如5510次。对于更大的核如9x9, 17x17性能提升是指数级的。这是所有高性能高斯模糊实现的基石务必深刻理解。3. Unity中的完整实现步骤与代码解析3.1 创建后处理脚本与Shader框架首先我们需要一个C#脚本来驱动整个后处理流程。创建一个名为GaussianBlur的脚本继承自MonoBehaviour并添加[ExecuteInEditMode]和[RequireComponent(typeof(Camera))]属性。using UnityEngine; [ExecuteInEditMode] [RequireComponent(typeof(Camera))] public class GaussianBlur : MonoBehaviour { public Shader gaussianBlurShader; // 关联我们的Shader [Range(0, 10)] public int iterations 3; // 模糊迭代次数次数越多越模糊 [Range(0.2f, 3.0f)] public float blurSpread 0.6f; // 采样距离系数 [Range(1, 8)] public int downSample 2; // 降采样系数 private Material _material; public Material material { get { if (_material null gaussianBlurShader ! null gaussianBlurShader.isSupported) { _material new Material(gaussianBlurShader); _material.hideFlags HideFlags.HideAndDontSave; } return _material; } } // 主要的后处理函数 void OnRenderImage(RenderTexture src, RenderTexture dest) { if (material ! null) { // 实现模糊逻辑 // ... } else { Graphics.Blit(src, dest); } } void OnDisable() { if (_material ! null) { DestroyImmediate(_material); } } }脚本的核心参数iterations模糊迭代次数。每次迭代执行一次水平垂直模糊。不是线性叠加效果会显著增强。blurSpread控制每次采样时相邻采样点的距离。值越大采样范围越广单次Pass的模糊程度越高。downSample性能优化的关键。先将原图渲染到一张长宽各缩小N倍downSample的渲染纹理RenderTexture中在这个小图上进行昂贵的模糊计算最后再放大回屏幕分辨率。这极大地减少了需要处理的像素数量像素数变为原来的1/(downSample*downSample)。3.2 Shaderlab与CGPROGRAM编写双Pass模糊Shader接下来是核心的Shader部分。我们创建一个Unlit Shader它包含两个SubShader Pass。Shader Custom/GaussianBlur { Properties { _MainTex (Base (RGB), 2D) white {} } SubShader { CGINCLUDE // CGINCLUDE中的代码可以被多个Pass共享 #include UnityCG.cginc sampler2D _MainTex; half4 _MainTex_TexelSize; // Unity提供的变量包含纹理像素大小(x,y)和纹理尺寸(z,w) half _BlurSize; // 由脚本传递的模糊系数用于控制采样偏移 struct v2f { float4 pos : SV_POSITION; half2 uv[5] : TEXCOORD0; // 存储5个纹理坐标对应一维核的5次采样 }; // 顶点着色器计算水平模糊所需的5个纹理坐标 v2f vertBlurHorizontal(appdata_img v) { v2f o; o.pos UnityObjectToClipPos(v.vertex); half2 uv v.texcoord; // 计算一个像素的偏移量 half offset1 _MainTex_TexelSize.x * 1.0 * _BlurSize; half offset2 _MainTex_TexelSize.x * 2.0 * _BlurSize; o.uv[0] uv; o.uv[1] uv half2(offset1, 0.0); // 右偏移1个单位 o.uv[2] uv - half2(offset1, 0.0); // 左偏移1个单位 o.uv[3] uv half2(offset2, 0.0); // 右偏移2个单位 o.uv[4] uv - half2(offset2, 0.0); // 左偏移2个单位 return o; } // 顶点着色器计算垂直模糊所需的5个纹理坐标 v2f vertBlurVertical(appdata_img v) { v2f o; o.pos UnityObjectToClipPos(v.vertex); half2 uv v.texcoord; half offset1 _MainTex_TexelSize.y * 1.0 * _BlurSize; // 注意这里用.y表示垂直方向 half offset2 _MainTex_TexelSize.y * 2.0 * _BlurSize; o.uv[0] uv; o.uv[1] uv half2(0.0, offset1); // 上偏移 o.uv[2] uv - half2(0.0, offset1); // 下偏移 o.uv[3] uv half2(0.0, offset2); // 上偏移2单位 o.uv[4] uv - half2(0.0, offset2); // 下偏移2单位 return o; } // 片元着色器使用预定义的权重进行混合 fixed4 fragBlur(v2f i) : SV_Target { // 一个近似的高斯核权重 (σ ≈ 1) half weight[3] {0.4026, 0.2442, 0.0545}; // 中心第一圈第二圈 fixed3 sum tex2D(_MainTex, i.uv[0]).rgb * weight[0]; // 中心像素 // 采样并累加周围像素 for(int it1; it3; it) { sum tex2D(_MainTex, i.uv[2*it-1]).rgb * weight[it]; sum tex2D(_MainTex, i.uv[2*it]).rgb * weight[it]; } return fixed4(sum, 1.0); } ENDCG // Pass 0: 水平模糊 Pass { NAME GAUSSIAN_BLUR_HORIZONTAL ZTest Always Cull Off ZWrite Off CGPROGRAM #pragma vertex vertBlurHorizontal #pragma fragment fragBlur ENDCG } // Pass 1: 垂直模糊 Pass { NAME GAUSSIAN_BLUR_VERTICAL ZTest Always Cull Off ZWrite Off CGPROGRAM #pragma vertex vertBlurVertical #pragma fragment fragBlur ENDCG } } FallBack Off }代码关键点解析_MainTex_TexelSize这是Unity为每个采样器自动提供的变量。_MainTex_TexelSize.xy表示一个纹素texel在UV空间中的大小。例如对于一张512x512的纹理_MainTex_TexelSize.x就是1/512。我们用这个值乘以偏移倍数1.0 2.0和_BlurSize来精确控制采样点的位置。顶点着色器的妙用通常顶点着色器只处理一个顶点的坐标变换。但在这里我们利用它为一个片元预先计算了5个不同的UV坐标中心、左右各两个。这样在片元着色器中我们无需重复计算偏移直接采样即可这是一种常见的优化手段。权重数组这里使用了一个5个采样点的近似高斯核权重。权重之和应为10.4026 0.2442*2 0.0545*2 1.0。你可以根据需求调整权重或增加采样点如7个、9个点来获得更精确或更强烈的模糊效果。双Pass设计两个Pass的顶点着色器逻辑几乎一样唯一的区别是偏移方向.xvs.y。片元着色器fragBlur被两个Pass共享因为它只关心传入的5个UV坐标并进行加权混合不关心这些坐标是水平还是垂直排列的。3.3 脚本驱动串联渲染管线与参数传递现在我们需要完善C#脚本中的OnRenderImage函数将整个流程串联起来。void OnRenderImage(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); // 将原图缩放到buffer0 // 进行多次迭代模糊 for (int i 0; i iterations; i) { material.SetFloat(_BlurSize, 1.0f i * blurSpread); // 可以逐次增大模糊范围 // 创建第二块临时渲染纹理 RenderTexture buffer1 RenderTexture.GetTemporary(rtW, rtH, 0); // 执行水平模糊 Pass: 从buffer0 - buffer1 Graphics.Blit(buffer0, buffer1, material, 0); // 使用Shader的第一个Pass // 释放buffer0因为它的内容已经用完 RenderTexture.ReleaseTemporary(buffer0); buffer0 buffer1; // 将水平模糊结果赋值给buffer0 // 为垂直模糊再申请一块临时纹理 buffer1 RenderTexture.GetTemporary(rtW, rtH, 0); // 执行垂直模糊 Pass: 从buffer0 - buffer1 Graphics.Blit(buffer0, buffer1, material, 1); // 使用Shader的第二个Pass // 释放旧的buffer0将垂直模糊结果赋值给buffer0用于下一次迭代或最终输出 RenderTexture.ReleaseTemporary(buffer0); buffer0 buffer1; } // 将最终模糊结果buffer0输出到目标dest屏幕 Graphics.Blit(buffer0, dest); // 释放最后一块临时纹理 RenderTexture.ReleaseTemporary(buffer0); } else { Graphics.Blit(src, dest); } }流程详解降采样根据downSample系数计算小图尺寸rtW和rtH。创建第一块临时渲染纹理buffer0并使用Graphics.Blit将原图src缩放渲染到buffer0中。这是性能提升的关键第一步。迭代模糊循环iterations次。每次迭代包含一次水平模糊和一次垂直模糊构成一次完整的高斯模糊。每次迭代前可以更新_BlurSize。一种常见的技巧是让_BlurSize随着迭代次数增加而增大1.0f i * blurSpread这样每次模糊的范围会略微扩大能在较少迭代次数下获得更柔和的模糊效果。Graphics.Blit (source, dest, material, passIndex)是核心函数。它将source纹理使用material的第passIndex个Pass进行渲染输出到dest纹理。passIndex为0对应我们Shader中NAME为GAUSSIAN_BLUR_HORIZONTAL的Pass为1则对应垂直Pass。我们使用两块临时纹理buffer0和buffer1进行“乒乓”操作A-B, 然后B-A如此反复。必须及时用RenderTexture.ReleaseTemporary释放不再需要的临时纹理否则会造成内存泄漏。最终输出循环结束后buffer0中存储的就是经过N次迭代模糊后的最终图像。最后再用一次Graphics.Blit将其输出到屏幕dest。4. 性能调优、参数影响与实战技巧4.1 性能瓶颈分析与优化策略高斯模糊是一个典型的填充率Fillrate和带宽Bandwidth瓶颈操作。优化主要围绕减少纹理采样次数和降低处理分辨率展开。降采样DownSample这是最有效的优化没有之一。将原图分辨率减半downSample2需要处理的像素数变为1/4后续所有模糊计算的消耗都按这个比例下降。对于全屏后处理这能直接带来数倍的帧率提升。代价是模糊结果的精度会略有下降但对于大多数屏幕空间效果如Bloom来说完全在可接受范围内。迭代次数Iterations与核大小迭代次数和模糊强度并非线性关系。1次迭代5x5核是基础模糊2次迭代近似于一个更大的核如9x93次迭代则更强。通常2-3次迭代已经能获得非常柔和的模糊效果。切忌盲目增加迭代次数性能消耗是线性增长的。利用双线性过滤Bilinear Filtering在我们的Shader中我们采样了5个离散的点。实际上GPU的纹理采样器在采样时如果坐标不是精确的纹素中心会自动在其周围4个纹素间进行双线性插值。我们可以利用这一点通过精心计算偏移让一次采样“混合”两个物理纹素的信息从而用更少的采样次数模拟更大的核。这是一种高级优化技巧在移动端尤其有用。选择正确的纹理格式临时渲染纹理RenderTexture默认是ARGB32每像素32位。如果不需要Alpha通道可以创建RGB24格式RenderTextureFormat.Default不一定是这个。对于模糊这种中间过程甚至可以考虑使用ARGBHalf半精度浮点来平衡精度和带宽特别是在HDR流程中。4.2 参数Iterations, Spread, DownSample的视觉影响理解每个参数如何影响最终效果是进行艺术调节的基础。迭代次数Iterations低1-2次产生轻微的、局部化的模糊。适合需要柔和边缘但保留大部分细节的场景比如轻微的UI发光或抗锯齿辅助。中3-4次产生明显的、均匀的模糊。这是制作标准景深背景、毛玻璃效果或Bloom预模糊的常用设置。高5次以上产生非常强烈、梦幻般的模糊细节大量丢失。通常用于特殊的全屏视觉效果或极度柔和的背景。性能消耗大需谨慎使用。模糊扩散Blur Spread这个参数控制每次采样时相邻采样点之间的距离即_BlurSize。它直接影响单次Pass的模糊“半径”。值小如0.5采样点密集模糊效果细腻但变化缓慢可能需要更多迭代次数才能达到想要的模糊度。值大如2.0采样点稀疏单次Pass就能覆盖更大范围模糊效果更“糙”但更剧烈。通常与较低的迭代次数配合使用以达到快速模糊的目的。但值太大会导致采样不足出现瑕疵。降采样系数DownSample这是性能与质量的权衡旋钮。值为1不降采样在原分辨率下进行模糊质量最高性能最差。仅用于对清晰度有极端要求的离线渲染或静态截图。值为2或4最常用的设置。在1080p屏幕上降采样到540p或270p进行模糊肉眼几乎难以察觉质量损失但帧率提升显著。值大于4模糊结果会出现明显的像素块感Pixelation只适用于需要强烈风格化模糊或极端性能优化的场合如某些移动设备。一个实用的起手配置对于全屏Bloom的预模糊可以尝试Iterations3, BlurSpread0.8, DownSample2。然后根据画面效果微调BlurSpread根据帧率情况调整Iterations和DownSample。4.3 进阶在URP/HDRP管线中的适配与注意事项现代项目越来越多地使用URP通用渲染管线或HDRP高清渲染管线。在这些可编程渲染管线SRP中后处理的实现方式与内置管线有所不同。在URP中实现高斯模糊使用Renderer FeatureURP的后处理主要通过ScriptableRendererFeature和ScriptableRenderPass来实现。你需要创建一个自定义的BlurRenderPass。CommandBuffer在Execute方法中你需要使用CommandBuffer来安排渲染指令创建临时RT、Blit、设置材质参数、释放RT而不是直接调用Graphics.Blit。摄像机纹理通过RenderingUtils.GetCameraColorTexture(cmd, ref renderingData)来获取当前摄像机的颜色纹理作为输入。Blit核心使用cmd.Blit(source, destination, material, passIndex)或更底层的cmd.DrawMesh方法来执行着色器。注入点通过RenderPassEvent控制你的模糊Pass在渲染流程中的执行顺序例如在AfterRenderingOpaques之后BeforeRenderingTransparents之前。核心差异与坑点临时RT管理在SRP中临时RT的生命周期管理需要更加小心。通常使用RenderTexture.GetTemporary并在Pass结束时ReleaseTemporary但更推荐使用RTHandle系统URP或动态调整大小的RT来更好地适应不同分辨率。材质与ShaderShader本身的核心逻辑双Pass、分离卷积完全通用。但Shader的编写需要符合SRP的库和宏如#include Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl。线性空间确保你的项目颜色空间设置为线性Linear并且在Shader中进行正确的伽马校正如果处理非HDR颜色否则模糊后的颜色会变暗变脏。实操心得从内置管线迁移到URP时最大的挑战不是Shader算法而是渲染流程的重新理解。建议先在一个简单的URP后处理示例如官方示例基础上替换其中的Shader和计算逻辑为高斯模糊这样能更快地搭建起正确的框架。5. 常见问题、排查与效果调试指南5.1 效果问题排查表问题现象可能原因排查与解决方案模糊效果完全没出现1. Shader未正确赋值给脚本的gaussianBlurShader字段。2. 脚本的OnRenderImage未被调用检查脚本是否启用是否挂载在Camera上。3. 材质创建失败Shader不支持或编译错误。1. 在Inspector面板确认Shader已拖拽赋值。2. 在脚本OnRenderImage开始处添加Debug.Log检查是否执行。3. 检查Unity Console窗口是否有Shader编译错误。尝试在材质球上手动创建该Shader的材质看是否报错。模糊效果有黑色或粉色条纹1. 纹理坐标越界采样到了纹理边缘之外。2. 临时渲染纹理RenderTexture未正确初始化或格式不匹配。1. 检查Shader中UV偏移计算是否正确确保_MainTex_TexelSize已正确定义。可以尝试将纹理Wrap Mode设置为Clamp。2. 确保RenderTexture.GetTemporary创建纹理后在第一次使用前已被正确清空或填充。在Graphics.Blit前可以尝试用cmd.ClearRenderTargetURP或手动绘制一个全屏清色。模糊效果有重影或拖尾临时渲染纹理RT在“乒乓”交换时未正确释放或重用。严格检查脚本中RenderTexture.ReleaseTemporary和重新赋值的逻辑。确保每次迭代中旧的、不再使用的RT被立即释放。使用图形调试器如Frame Debugger查看每一帧的RT状态。模糊性能极差帧率骤降1. 未使用降采样downSample1。2. 迭代次数iterations设置过高如5。3. 在移动设备上使用了高精度浮点纹理格式。1.务必开启降采样从downSample2开始测试。2. 降低迭代次数2-4次通常足够。3. 检查创建的临时RT格式尝试使用RenderTextureFormat.DefaultHDR或ARGB32代替ARGBFloat。模糊区域边缘有硬边或方块1. 降采样系数过大如downSample8导致源图像分辨率过低模糊核在极低分辨率下工作异常。2. 模糊迭代过程中RT的FilterMode设置不正确。1. 降低downSample值或采用多级降采样先降到中等分辨率模糊再降到更低分辨率。2. 确保用于存储中间模糊结果的RT的filterMode设置为FilterMode.Bilinear以便在后续采样时能进行平滑插值。与UI或特定物体叠加时出现异常后处理脚本影响了不该影响的摄像机如UI摄像机。为后处理脚本添加图层Layer或摄像机标签过滤。在OnRenderImage中可以通过camera.cameraType或camera.targetTexture判断是否应该执行模糊。对于UI通常有独立的摄像机不应添加后处理。5.2 调试与可视化技巧使用Frame DebuggerUnity的Frame Debugger窗口 - 分析 - Frame Debugger是调试后处理的神器。你可以一步步查看每一帧的每个绘制事件Draw Call清晰地看到你的模糊Pass何时执行输入输出纹理是什么临时RT的创建和销毁情况。这是定位“重影”、“纹理错误”等问题最快的方法。分离查看中间结果为了调试模糊的每一步可以修改脚本将中间某个Pass的结果直接输出到屏幕。例如在循环中将buffer0或buffer1直接Blit到dest而不是进行下一次迭代。这样可以单独查看水平模糊或第一次迭代后的效果。在Shader中输出权重如果怀疑权重计算有问题可以在片元着色器中将计算出的权重值直接作为颜色输出例如return fixed4(weight[0], weight[1], weight[2], 1.0)在屏幕上可视化检查权重分布是否正确、对称。控制变量法调节调试时固定其他参数只调节一个。例如先将iterations设为1downSample设为1blurSpread设为1得到一个基准效果。然后单独调节blurSpread看变化再单独调节iterations最后再启用downSample。这样可以清晰地理解每个参数单独的作用。5.3 从高斯模糊到更高级的应用掌握基础的高斯模糊后你可以将其作为组件构建更复杂的效果Bloom泛光这是高斯模糊最经典的应用。流程是提取屏幕中高亮区域 - 对高亮图进行多次高斯模糊 - 将模糊后的高亮图与原图按一定方式混合。高斯模糊的质量直接决定了Bloom光晕的柔和与自然程度。景深Depth of Field根据物体的深度Z值信息对远离焦平面的区域施加不同程度的高斯模糊。近处物体清晰远处物体模糊模拟相机光学效果。这里通常需要结合相机的焦距、光圈等参数来控制模糊半径。运动模糊Motion Blur虽然不是直接用高斯模糊但原理相通沿速度向量进行多次采样并混合。理解权重累加的思想对实现运动模糊很有帮助。可导向模糊Directional Blur修改我们的Shader让两个Pass的模糊方向不再是严格水平和垂直而是可以指定一个角度。这可以用来制作具有方向性的模糊效果比如表现速度感。实现这些高级效果的关键在于将高斯模糊模块化并与其他数据如深度图、亮度图、速度图相结合。你可以把本文实现的双Pass模糊封装成一个可复用的函数或类然后在更高层的逻辑中调用它传入不同的参数和输入纹理。