More
GameRes游资网在以下平台有媒体号，欢迎关注收藏：

微信公众号

微博 

头条号

百家号

网易号

知乎号

2D游戏实现背景模糊

作者：李炜 2019-01-04

专栏地址：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. }

  11. SubShader
  12. {

  14. Tags {"Queue"="Transparent" "IgnoreProjector"="true" "RenderType"="Transparent"}
  15. ZWrite Off Blend SrcAlpha OneMinusSrcAlpha Cull Off

  17. Pass
  18. {

  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"

  27. struct appdata_t
  28. {
  29. float4 vertex : POSITION;
  30. float4 color : COLOR;
  31. float2 texcoord : TEXCOORD0;
  32. };

  34. struct v2f
  35. {
  36. half2 texcoord : TEXCOORD0;
  37. float4 vertex : SV_POSITION;
  38. fixed4 color : COLOR;
  39. };


  42. sampler2D _MainTex;
  43. fixed4 _Color;
  44. float _Distortion;
  45. fixed _Alpha;

  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. }

  56. float4 frag (v2f i) : COLOR
  57. {
  58. float stepU = 0.00390625f * _Distortion;
  59. float stepV = stepU;

  61. fixed3x3 gaussian = fixed3x3( 1.0,        2.0,        1.0, 2.0,        4.0,        2.0, 1.0,        2.0,        1.0);

  63. float4 result = 0;
  64. float4 Alpha = tex2D(_MainTex, i.texcoord);

  66. float2 texCoord;

  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);

  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. }

  6. CGINCLUDE

  8. #include "UnityCG.cginc"

  10. struct v2f {
  11. float4 pos : POSITION;
  12. float2 uv : TEXCOORD0;

  14. float4 uv01 : TEXCOORD1;
  15. float4 uv23 : TEXCOORD2;
  16. float4 uv45 : TEXCOORD3;
  17. };

  19. float4 offsets;

  21. sampler2D _MainTex;

  23. v2f vert (appdata_img v) {
  24. v2f o;
  25. o.pos = UnityObjectToClipPos(v.vertex);

  27. o.uv.xy = v.texcoord.xy;

  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;

  33. return o;
  34. }

  36. half4 frag (v2f i) : COLOR {
  37. half4 color = float4 (0,0,0,0);

  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);

  47. return color;
  48. }
  49. ENDCG

  51. Subshader {
  52. Pass {
  53. ZTest Always Cull Off ZWrite Off
  54. Fog { Mode off }

  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;

  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;

  14. private Camera m_Cam;

  16. private Dictionary<Camera, CommandBuffer> m_Cameras = new Dictionary<Camera, CommandBuffer>();

  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. }

  32. public void OnEnable()
  33. {
  34. Cleanup();
  35. SetCommandBuffer();
  36. }

  38. public void OnDisable()
  39. {
  40. Cleanup();
  41. }

  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. }

  53. var cam = Camera.main;
  54. if (!cam)
  55. return;

  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;

  62. if (!m_Material)
  63. {
  64. m_Material = new Material(m_BlurShader);
  65. m_Material.hideFlags = HideFlags.HideAndDontSave;
  66. }

  68. buf = new CommandBuffer();
  69. buf.name = "Grab screen and blur";
  70. m_Cameras[cam] = buf;

  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);

  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);

  83. // downsample screen copy into smaller RT, release screen RT
  84. buf.Blit(screenCopyID, blurredID);
  85. buf.ReleaseTemporaryRT(screenCopyID);

  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);

  100. buf.Blit(blurredID, BuiltinRenderTextureType.CameraTarget);

  102. cam.AddCommandBuffer(CameraEvent.AfterForwardOpaque, buf);
  103. }
  104. }
复制代码

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

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


红框框住的就是Command的处理


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

希望大家能喜欢吧

最新评论
暂无评论
参与评论

推广
开测游戏 查看更多
三国:谋定天下 SLG
上线
研发 | 发行 : bilibili游戏   
少年西游记2 卡牌
上线
发行 : 游族网络   
剑灵2 RPG
限量删档首测
研发 : NCsoft Corporation    发行 : 腾讯游戏   
歧路旅人：大陆的霸者 JRPG
公测
研发 : SQUARE ENIX    发行 : 网易游戏   
地下城与勇士：起源 RPG
上线
研发 : Neople    发行 : 腾讯游戏   
鸣潮 RPG
公测
研发 : 库洛游戏   
商务合作 查看更多
家具装修师
金牛座之战
InOutPath
炼丹模拟器
编辑推荐 查看更多
射雕-武侠大世界
Balatro
逆战：未来-逆战手游
山河旅探
推广
推广

微信公众号

微博 

头条号

投稿邮箱：news@gameres.com
产品、开测信息邮箱：cp@gameres.com
© 2001-2022 GameRes游资网