UGUI背景模糊解决方案总结
一、图形效果处理流程
实现UGUI的背景模糊，其实也就是实现一种后处理效果，牵扯到后处理效果的，基本都需要在OnRenderImage()函数中实现。OnRenderImage 函数虽然定义在MonoBehaviour脚本中，但是他是Camera的一个回调，依赖于Camera。它会在Camera执行渲染的时候被调用。sourceTexture是当前屏幕内的图形数据，经过shader处理之后赋值给destinationTexture。
从上图中我们可以看出：
A部分 是Camera内的渲染数据，这个数据是整个场景的所有相机按照Depth来进行排序，在OnRenderImage脚本所有在的相机之前的相机渲染的数据都会最终传给sourceTexture。
举个例子：
相机Depth的值 MainCamer = -1 CanvasCamera = 50 CanvasRedCamera = 10 CanvasGreenCamera = 60 CanvasBlueCamer 设置 RenderMode为Overlay 即最大深度值。
这样CanvasCamera 相机上的OnRenderImage函数获得的sourceTexture值就是MainCamer和CanvasRedCamera绘制的的画面，而CanvasGreenCamer和CanvasBlueCamer绘制的内容就不会传给CanvasCamera。
下图就是屏幕上的所有图形数据
下图是处理模糊之后的效果，值包含红色，绿色和蓝色是没有进行后处理的。
>need-to-insert-img
由此可以看出OnRenderImage中的souce是按照相机的depth顺序一个一个进行处理，然后把处理的source的数据再传到下一个相机中的OnRenderImage函数中的souceTexture然后在进行处理。如果一个相机上面挂着了多个OnRenderImage函数脚本，函数的执行顺序会按照在相机上的顺序进行。把处理完的数据一级一级的往下传递。
B部分 就是把屏幕数据进行后处理，通过shader来实现，然后把实现的效果数据存储在一个RenderTexture对象中。背景模糊的数据处理可以参考：
https://blog.csdn.net/poem_qianmo/article/details/51871531
这里面已经详细介绍了怎么使用高斯模糊来进行图片的模糊处理了。
C部分 就是把处理的数据指定到一个Target上面，如果destTexture = null，它就把数据直接渲染到BackBuffer上面，即屏幕上面显示。我们这里是把最终处理好的模糊数据传个RawImage，让他在UI上面显示，作为我们的背景来使用。
总结：相机绘制的数据传到OnRenderImage函数中，然后进行效果处理，最后再把数据输出到屏幕。
二、应用层功能
如果要实现一个UGUI的背景模糊。有两种实现方式：一种是外加一个Camera对UGUI背景数据进行实时模糊处理，效果比较好，但是性能开销大。另一种是在打开UI的时候，取当前Camera内的一帧画面进行模糊处理，处理好之后把画面数据赋值给一个RawImage作为背景。UI之间的层级问题也可以通过调整RawIamge的位置来实现，简单方便。
下面是实现打开UI的时候截取一帧画面，然后进行模糊处理的代码。用到的shader脚本就是上面链接中浅墨大神的shader。我这只是改了一下应用层的使用代码。
public class BlurEffectLayer : MonoBehaviour
{
public bool m_isRuntimeBlur = false;
public Camera m_camera;
public RawImage m_rawImage;
public Shader CurShader;
[Range(0, 6)]
public int DownSampleNum = 1;
[Range(0.0f, 20.0f)]
public float BlurSpreadSize = 0.0f;
[Range(0, 8)]
public int BlurIterations = 4;
private string ShaderName = "Custom/BlurEffect";
private RenderTexture renderBuffer;
private Material CurMaterial;
private Color m_colorRawImage;
Material material
{
get
{
if (CurMaterial == null)
{
CurMaterial = new Material(CurShader);
CurMaterial.hideFlags = HideFlags.HideAndDontSave;
}
return CurMaterial;
}
}
void Start()
{
if (m_camera == null)
{
enabled = false;
Logger.LogError("m_camera == null");
return;
}
if (m_rawImage == null)
{
m_camera.enabled = false;
enabled = false;
Logger.LogError("m_rawImage == null");
return;
}
//判断当前设备是否支持屏幕特效
if (!SystemInfo.supportsImageEffects)
{
m_camera.enabled = false;
enabled = false;
Logger.LogError("SystemInfo.supportsImageEffects: false");
return;
}
if (null == CurShader)
{
CurShader = Shader.Find(ShaderName);
}
m_colorRawImage = m_rawImage.color;
m_colorRawImage.a = 1;
}
void OnRenderImage(RenderTexture sourceTexture, RenderTexture destTexture)
{
if (CurShader != null)
{
float widthMod = 1.0f / (1.0f * (1 << DownSampleNum));
material.SetFloat("_DownSampleValue", BlurSpreadSize * widthMod);
sourceTexture.filterMode = FilterMode.Bilinear;
int renderWidth = sourceTexture.width >> DownSampleNum;
int renderHeight = sourceTexture.height >> DownSampleNum;
renderBuffer = RenderTexture.GetTemporary(renderWidth, renderHeight, 0, RenderTextureFormat.RGB111110Float); //sourceTexture.format
renderBuffer.filterMode = FilterMode.Bilinear;
Graphics.Blit(sourceTexture, renderBuffer, material, 0);
for (int i = 0; i < BlurIterations; i++)
{
float iterationOffs = (i * 1.0f);
material.SetFloat("_DownSampleValue", BlurSpreadSize * widthMod + iterationOffs);
RenderTexture tempBuffer = RenderTexture.GetTemporary(renderWidth, renderHeight, 0, RenderTextureFormat.RGB111110Float); //sourceTexture.format
Graphics.Blit(renderBuffer, tempBuffer, material, 1);
RenderTexture.ReleaseTemporary(renderBuffer);
renderBuffer = tempBuffer;
tempBuffer = RenderTexture.GetTemporary(renderWidth, renderHeight, 0, RenderTextureFormat.RGB111110Float); //sourceTexture.format
Graphics.Blit(renderBuffer, tempBuffer, material, 2);
RenderTexture.ReleaseTemporary(renderBuffer);
renderBuffer = tempBuffer;
}
Graphics.Blit(renderBuffer, destTexture);
if (m_isRuntimeBlur)
{
if (null != renderBuffer)
{
RenderTexture.ReleaseTemporary(renderBuffer);
}
}
else
{
if (m_rawImage)
{
m_rawImage.texture = renderBuffer;
m_rawImage.color = m_colorRawImage;
}
if (m_camera)
{
m_camera.enabled = false;
}
enabled = false;
}
}
else
{
Graphics.Blit(sourceTexture, destTexture);
}
}
private void OnEnable()
{
if (null != m_rawImage)
{
m_rawImage.color = new Color(m_rawImage.color.r, m_rawImage.color.g, m_rawImage.color.b, 0);
}
}
void OnDestroy()
{
if (CurMaterial)
{
DestroyImmediate(CurMaterial);
}
if (!m_isRuntimeBlur)
{
if (renderBuffer != null || m_rawImage.texture != null)
{
RenderTexture.ReleaseTemporary(renderBuffer);
renderBuffer = null;
m_rawImage.texture = null;
}
}
}
}
完整的测试工程地址如下：https://download.csdn.net/download/hongkenzhao/12458012
改文章同时发布于知乎：UGUI背景模糊解决方案总结 - 知乎
