2D游戏实现背景模糊

D小游

文/李炜
专栏地址：https://zhuanlan.zhihu.com/p/53449081

之前在Switch上通关了《空洞骑士》感觉画面非常好看，而且很精致。光影，水纹，灰尘，背景都浑然一体非常好看。

因为之前自己也上线过2D游戏《J-Girl》，所以对好看的2D游戏的风格也很感兴趣，想实现一下类似《空洞骑士》的场景效果。

这篇主要记录一下背景模糊的实现。

我自己搜了一下，提到了2个方法

1、直接给背景的spriteRenderer赋值一个模糊材质

2、增加一个新的摄像机专门渲染背景层级，之后给相机增加一个模糊的后效

因为自己Shader写的也比较少。所以会经常翻冯乐乐的《UnityShader入门精要》，

书中10.2节介绍了一个“玻璃效果”，看完之后又多了两个解决方法

3、用渲染纹理来实现，实际和第二条差不多

4、用GrabPass，抓取屏幕图片当作一张纹理然后进行处理。

作者最后又留了一个介绍使用命令缓冲（Command Buffers）来实现，同时附加了一个官方的链接：

https://docs.unity3d.com/Manual/GraphicsCommandBuffers.html

Graphics Command Buffers

当时也看过LWRP自定义渲染管线的宣传视频，详解Unity轻量级渲染管线LWRP：

Invitation to Join 详解Unity轻量级渲染管线LWRP by Richard Yang 杨栋

LWRP支持增加特定插入点

有多了2种方案

5、使用Command Buffers来定义额外渲染操作

6、将Unity渲染管线设置为LWRP，然后实现接口

然后开始了实验步骤，方案1，直接上模糊材质，这里贴上sprite模糊的shader

1. Shader "Unlit/SpriteBlur"
   
2. {
   
3. Properties
   
4. {
   
5. _MainTex ("Base (RGB)", 2D) = "white" {}
   
6. _Color ("_Color", Color) = (1,1,1,1)
   
7. _Distortion ("Distortion", Range(0,3)) = 0
   
8. _Alpha ("Alpha", Range (0,1)) = 1.0
   
9. }
   
10. 
    
11. SubShader
    
12. {
    
13. 
    
14. Tags {"Queue"="Transparent" "IgnoreProjector"="true" "RenderType"="Transparent"}
    
15. ZWrite Off Blend SrcAlpha OneMinusSrcAlpha Cull Off
    
16. 
    
17. Pass
    
18. {
    
19. 
    
20. CGPROGRAM
    
21. #pragma vertex vert
    
22. #pragma fragment frag
    
23. #pragma fragmentoption ARB_precision_hint_fastest
    
24. #pragma target 3.0
    
25. #include "UnityCG.cginc"
    
26. 
    
27. struct appdata_t
    
28. {
    
29. float4 vertex : POSITION;
    
30. float4 color : COLOR;
    
31. float2 texcoord : TEXCOORD0;
    
32. };
    
33. 
    
34. struct v2f
    
35. {
    
36. half2 texcoord : TEXCOORD0;
    
37. float4 vertex : SV_POSITION;
    
38. fixed4 color : COLOR;
    
39. };
    
40. 
    
41. 
    
42. sampler2D _MainTex;
    
43. fixed4 _Color;
    
44. float _Distortion;
    
45. fixed _Alpha;
    
46. 
    
47. v2f vert(appdata_t IN)
    
48. {
    
49. v2f OUT;
    
50. OUT.vertex = UnityObjectToClipPos(IN.vertex);
    
51. OUT.texcoord = IN.texcoord;
    
52. OUT.color = IN.color;
    
53. return OUT;
    
54. }
    
55. 
    
56. float4 frag (v2f i) : COLOR
    
57. {
    
58. float stepU = 0.00390625f * _Distortion;
    
59. float stepV = stepU;
    
60. 
    
61. fixed3x3 gaussian = fixed3x3( 1.0,        2.0,        1.0, 2.0,        4.0,        2.0, 1.0,        2.0,        1.0);
    
62. 
    
63. float4 result = 0;
    
64. float4 Alpha = tex2D(_MainTex, i.texcoord);
    
65. 
    
66. float2 texCoord;
    
67. 
    
68. texCoord = i.texcoord.xy + float2( -stepU, -stepV ); result += tex2D(_MainTex,texCoord);
    
69. texCoord = i.texcoord.xy + float2( -stepU, 0 ); result += 2.0 * tex2D(_MainTex,texCoord);
    
70. texCoord = i.texcoord.xy + float2( -stepU, stepV ); result += tex2D(_MainTex,texCoord);
    
71. texCoord = i.texcoord.xy + float2( 0, -stepV ); result += 2.0 * tex2D(_MainTex,texCoord);
    
72. texCoord = i.texcoord.xy ; result += 4.0 * tex2D(_MainTex,texCoord);
    
73. texCoord = i.texcoord.xy + float2( 0, stepV ); result += 2.0 * tex2D(_MainTex,texCoord);
    
74. texCoord = i.texcoord.xy + float2( stepU, -stepV ); result += tex2D(_MainTex,texCoord);
    
75. texCoord = i.texcoord.xy + float2( stepU, 0 ); result += 2.0* tex2D(_MainTex,texCoord);
    
76. texCoord = i.texcoord.xy + float2( stepU, -stepV ); result += tex2D(_MainTex,texCoord);
    
77. 
    
78. float4 r;
    
79. r=result*0.0625;
    
80. r.a*=Alpha.a*(1.0-_Alpha);
    
81. r=r*i.color;        
    
82. return r;        
    
83. }
    
84. ENDCG
    
85. }
    
86. }
    
87. Fallback "Sprites/Default"
    
88. }

复制代码

但是最后效果并不好，模糊的效果有点差

方案2和方案3并没有实践，因为我知道效果肯定能实现，但是多的开销其实没有太大的意义，冯乐乐虽然在书中写了一句：“尽管这种发放需要把部分场景再次渲染一遍，但是我们可以通过调整摄像机的渲染层减少二次渲染的场景大小，或使用其他方法控制摄像机是否需要开启。”因为背景的模糊其实是一直长期存在的，如果别的方法能实现，就不想增加一个相机。

方案4通过GrabPass实现，这个开销更大，书上补充了“高分辨率的设备上可能会造成严重的带宽影响，而且移动设备有的不支持”。我也上网查过，老外的建议是能用Command Buffers实现就不要用GrabPass

方案5和方案6，其实我是先用了方案6 LWRP，但是很可惜在2D游戏里LWRP并没有像宣传的产生高效的渲染效果，当我替换渲染管线之后，场景的FPS降低了一半。所以有就直接放弃了LWRP的方案。（可能是因为LWRP是给3D使用的，2D游戏没有使用灯光，所以显得鸡肋）

没有使用LWRP

使用LWRP

最后方案5 使用Command Buffers的效果，先来一张最后的效果图吧

模糊的很均匀，就是我要的效果。

首先是添加一个Shader，这里是直接用Unity官方示例里的高斯模糊

1. Shader "Hidden/SeparableGlassBlur" {
   
2. Properties {
   
3. _MainTex ("Base (RGB)", 2D) = "" {}
   
4. }
   
5. 
   
6. CGINCLUDE
   
7. 
   
8. #include "UnityCG.cginc"
   
9. 
   
10. struct v2f {
    
11. float4 pos : POSITION;
    
12. float2 uv : TEXCOORD0;
    
13. 
    
14. float4 uv01 : TEXCOORD1;
    
15. float4 uv23 : TEXCOORD2;
    
16. float4 uv45 : TEXCOORD3;
    
17. };
    
18. 
    
19. float4 offsets;
    
20. 
    
21. sampler2D _MainTex;
    
22. 
    
23. v2f vert (appdata_img v) {
    
24. v2f o;
    
25. o.pos = UnityObjectToClipPos(v.vertex);
    
26. 
    
27. o.uv.xy = v.texcoord.xy;
    
28. 
    
29. o.uv01 = v.texcoord.xyxy + offsets.xyxy * float4(1,1, -1,-1);
    
30. o.uv23 = v.texcoord.xyxy + offsets.xyxy * float4(1,1, -1,-1) * 2.0;
    
31. o.uv45 = v.texcoord.xyxy + offsets.xyxy * float4(1,1, -1,-1) * 3.0;
    
32. 
    
33. return o;
    
34. }
    
35. 
    
36. half4 frag (v2f i) : COLOR {
    
37. half4 color = float4 (0,0,0,0);
    
38. 
    
39. color += 0.40 * tex2D (_MainTex, i.uv);
    
40. color += 0.15 * tex2D (_MainTex, i.uv01.xy);
    
41. color += 0.15 * tex2D (_MainTex, i.uv01.zw);
    
42. color += 0.10 * tex2D (_MainTex, i.uv23.xy);
    
43. color += 0.10 * tex2D (_MainTex, i.uv23.zw);
    
44. color += 0.05 * tex2D (_MainTex, i.uv45.xy);
    
45. color += 0.05 * tex2D (_MainTex, i.uv45.zw);
    
46. 
    
47. return color;
    
48. }
    
49. ENDCG
    
50. 
    
51. Subshader {
    
52. Pass {
    
53. ZTest Always Cull Off ZWrite Off
    
54. Fog { Mode off }
    
55. 
    
56. CGPROGRAM
    
57. #pragma fragmentoption ARB_precision_hint_fastest
    
58. #pragma vertex vert
    
59. #pragma fragment frag
    
60. ENDCG
    
61. }
    
62. }
    
63. Fallback off
    
64. }

复制代码

然后要给背景的SpriteRenderer替换一个渲染队列为2000的sprite材质。这样子实现分开渲染。这里有一个bug，修改材质之后原本的Order in Layer没有起作用，有的顺序低的还会跑到前面来。我现在的解决办法是用一个渲染队列为1999的sprite材质赋值，强制它变低。

接着就是增加一个Comma Buffer的脚本

1. using System.Collections;
   
2. using System.Collections.Generic;
   
3. using UnityEngine;
   
4. using UnityEngine.Rendering;
   
5. 
   
6. [ExecuteInEditMode]
   
7. public class CommandBufferBlur : MonoBehaviour
   
8. {
   
9. [Tooltip("模糊程度")]
   
10. public float BufferSize = 0.5f;
    
11. public Shader m_BlurShader;
    
12. private Material m_Material;
    
13. 
    
14. private Camera m_Cam;
    
15. 
    
16. private Dictionary<Camera, CommandBuffer> m_Cameras = new Dictionary<Camera, CommandBuffer>();
    
17. 
    
18. // Remove command buffers from all cameras we added into
    
19. private void Cleanup()
    
20. {
    
21. foreach (var cam in m_Cameras)
    
22. {
    
23. if (cam.Key)
    
24. {
    
25. cam.Key.RemoveCommandBuffer(CameraEvent.AfterForwardOpaque, cam.Value);
    
26. }
    
27. }
    
28. m_Cameras.Clear();
    
29. Object.DestroyImmediate(m_Material);
    
30. }
    
31. 
    
32. public void OnEnable()
    
33. {
    
34. Cleanup();
    
35. SetCommandBuffer();
    
36. }
    
37. 
    
38. public void OnDisable()
    
39. {
    
40. Cleanup();
    
41. }
    
42. 
    
43. // Whenever any camera will render us, add a command buffer to do the work on it
    
44. public void SetCommandBuffer()
    
45. {
    
46. var act = gameObject.activeInHierarchy && enabled;
    
47. if (!act)
    
48. {
    
49. Cleanup();
    
50. return;
    
51. }
    
52. 
    
53. var cam = Camera.main;
    
54. if (!cam)
    
55. return;
    
56. 
    
57. CommandBuffer buf = null;
    
58. // Did we already add the command buffer on this camera? Nothing to do then.
    
59. if (m_Cameras.ContainsKey(cam))
    
60. return;
    
61. 
    
62. if (!m_Material)
    
63. {
    
64. m_Material = new Material(m_BlurShader);
    
65. m_Material.hideFlags = HideFlags.HideAndDontSave;
    
66. }
    
67. 
    
68. buf = new CommandBuffer();
    
69. buf.name = "Grab screen and blur";
    
70. m_Cameras[cam] = buf;
    
71. 
    
72. // copy screen into temporary RT
    
73. int screenCopyID = Shader.PropertyToID("_ScreenCopyTexture");
    
74. buf.GetTemporaryRT(screenCopyID, -1, -1, 0, FilterMode.Bilinear);
    
75. buf.Blit(BuiltinRenderTextureType.CurrentActive, screenCopyID);
    
76. 
    
77. // get two smaller RTs
    
78. int blurredID = Shader.PropertyToID("_Temp1");
    
79. int blurredID2 = Shader.PropertyToID("_Temp2");
    
80. buf.GetTemporaryRT(blurredID, -2, -2, 0, FilterMode.Bilinear);
    
81. buf.GetTemporaryRT(blurredID2, -2, -2, 0, FilterMode.Bilinear);
    
82. 
    
83. // downsample screen copy into smaller RT, release screen RT
    
84. buf.Blit(screenCopyID, blurredID);
    
85. buf.ReleaseTemporaryRT(screenCopyID);
    
86. 
    
87. // horizontal blur
    
88. buf.SetGlobalVector("offsets", new Vector4(2.0f* BufferSize / Screen.width, 0, 0, 0));
    
89. buf.Blit(blurredID, blurredID2, m_Material);
    
90. // vertical blur
    
91. buf.SetGlobalVector("offsets", new Vector4(0, 2.0f * BufferSize / Screen.height, 0, 0));
    
92. buf.Blit(blurredID2, blurredID, m_Material);
    
93. // horizontal blur
    
94. buf.SetGlobalVector("offsets", new Vector4(4.0f * BufferSize / Screen.width, 0, 0, 0));
    
95. buf.Blit(blurredID, blurredID2, m_Material);
    
96. // vertical blur
    
97. buf.SetGlobalVector("offsets", new Vector4(0, 4.0f * BufferSize / Screen.height, 0, 0));
    
98. buf.Blit(blurredID2, blurredID, m_Material);
    
99. 
    
100. buf.Blit(blurredID, BuiltinRenderTextureType.CameraTarget);
     
101. 
     
102. cam.AddCommandBuffer(CameraEvent.AfterForwardOpaque, buf);
     
103. }
     
104. }

复制代码

我也是在官方的基础上修改的，所以有一些冗余的代码。

这里最后说一下为什么这种办法模糊效果更好，因为逻辑当中对图案模糊了4次，可以打开Frame Debug来查看

红框框住的就是Command的处理

最后的模糊效果。这个事其实还挺有意思的。

希望大家能喜欢吧