Unity Shader-Command Buffer的使用（景深与描边效果重置版）

怼烎@ 2022-06-15 04:23 253阅读 0赞

## 简介 ##

Command Buffer是Unity5新增的一个灰常灰常强大的功能。先祭出 [官方介绍][Link 1]和 [文档][Link 2]。我们在渲染的时候，给OpenGL或者DX的就是一系列的指令，比如glDrawElement，glClear等等，这些东西目前是引擎去调用的，而Unity也为我们封装了更高一级的API，也就是CommandBuffer，可以让我们更加方便灵活地实现一些效果。CommandBuffer最主要的功能是可以预定义一些列的渲染指令，然后将这些指令在我们想要的时机进行执行。本篇文章简单介绍一下CommandBuffer的使用，首先实现一个简单的摄像机效果，然后通过Command Buffer重置一下之前实现过的两个效果： [景深][Link 3]和 [描边效果][Link 4]。

## CommandBuffer的基本用法 ##

我们先来看一个最简单的例子，直接在一张RT上画个人，其实类似于摄影机效果，我们用当前的相机看见正常要看见的对象，然后在一张幕布（简单的来说，就是一个。。额，面片）再渲染一次这个人物（也可以直接渲染到UI上）。

//Command Buffer测试
    //by: puppet_master
    //2017.5.26
    
    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.Rendering;
    
    public class CommandBufferTest : MonoBehaviour {
    
        private CommandBuffer commandBuffer = null;
        private RenderTexture renderTexture = null;
        private Renderer targetRenderer = null;
        public GameObject targetObject = null;
        public Material replaceMaterial = null;
    
    	void OnEnable()
        {
            targetRenderer = targetObject.GetComponentInChildren<Renderer>();
            //申请RT
            renderTexture = RenderTexture.GetTemporary(512, 512, 16, RenderTextureFormat.ARGB32, RenderTextureReadWrite.Default, 4);
            commandBuffer = new CommandBuffer();
            //设置Command Buffer渲染目标为申请的RT
            commandBuffer.SetRenderTarget(renderTexture);
            //初始颜色设置为灰色
            commandBuffer.ClearRenderTarget(true, true, Color.gray);
            //绘制目标对象，如果没有替换材质，就用自己的材质
            Material mat = replaceMaterial == null ? targetRenderer.sharedMaterial : replaceMaterial;
            commandBuffer.DrawRenderer(targetRenderer, mat);
            //然后接受物体的材质使用这张RT作为主纹理
            this.GetComponent<Renderer>().sharedMaterial.mainTexture = renderTexture;
            //直接加入相机的CommandBuffer事件队列中
            Camera.main.AddCommandBuffer(CameraEvent.AfterForwardOpaque, commandBuffer);
        }
    
        void OnDisable()
        {
            //移除事件，清理资源
            Camera.main.RemoveCommandBuffer(CameraEvent.AfterForwardOpaque, commandBuffer);
            commandBuffer.Clear();
            renderTexture.Release();
        }
    
        //也可以在OnPreRender中直接通过Graphics执行Command Buffer，不过OnPreRender和OnPostRender只在挂在相机的脚本上才有作用！！！
        //void OnPreRender()
        //{
        //    //在正式渲染前执行Command Buffer
        //    Graphics.ExecuteCommandBuffer(commandBuffer);
        //}
    }

然后，我们可以把这个脚本挂在一个对象上，将要渲染的目标拖入就可以了。我们测试一下：

![Center][]

Command Buffer在渲染目标的时候，是支持我们使用自定义材质的，我们可以换一个材质，如果我们做了个摄像机，还不带美颜功能的话，肯定是要得差评的，所以，我们给渲染的对象换一个自定义的材质，比如 [边缘光][Link 5]效果，直接将调整好的边缘光材质球赋给Replace Material即可：

![Center 1][]

## 通过Command Buffer对RT进行后处理 ##

如果感觉只是换一个材质球不够过瘾的话，我们就再发掘一下Command Buffer更深层次的功能吧！下面放大招啦！又是后处理，不过我们后处理的对象改了一下，不是基于屏幕，而是基于Command Buffer输出的那张Render Texture。比如我们稍微修改一下上面的代码，增加一个最简单的 [屏幕较色][Link 6]后处理（其实就是我比较懒罢了>\_<）

//Command Buffer测试
    //by: puppet_master
    //2017.5.26
    
    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.Rendering;
    
    public class CommandBufferTest : PostEffectBase {
    
        private CommandBuffer commandBuffer = null;
        private RenderTexture renderTexture = null;
        private Renderer targetRenderer = null;
        public GameObject targetObject = null;
        public Material replaceMaterial = null;
    
        [Range(0.0f, 3.0f)]
        public float brightness = 1.0f;//亮度
        [Range(0.0f, 3.0f)]
        public float contrast = 1.0f;  //对比度
        [Range(0.0f, 3.0f)]
        public float saturation = 1.0f;//饱和度
    
        void OnEnable()
        {
            targetRenderer = targetObject.GetComponentInChildren<Renderer>();
            //申请RT
            renderTexture = RenderTexture.GetTemporary(512, 512, 16, RenderTextureFormat.ARGB32, RenderTextureReadWrite.Default, 4);
            commandBuffer = new CommandBuffer();
            //设置Command Buffer渲染目标为申请的RT
            commandBuffer.SetRenderTarget(renderTexture);
            //初始颜色设置为灰色
            commandBuffer.ClearRenderTarget(true, true, Color.gray);
            //绘制目标对象，如果没有替换材质，就用自己的材质
            Material mat = replaceMaterial == null ? targetRenderer.sharedMaterial : replaceMaterial;
            commandBuffer.DrawRenderer(targetRenderer, mat);
            //然后接受物体的材质使用这张RT作为主纹理
            this.GetComponent<Renderer>().sharedMaterial.mainTexture = renderTexture;
            if (_Material)
            {
                //这是个比较危险的写法，一张RT即作为输入又作为输出，在某些显卡上可能不支持，如果不像我这么懒的话...还是额外申请一张RT
                commandBuffer.Blit(renderTexture, renderTexture, _Material);
            }
            //直接加入相机的CommandBuffer事件队列中
            Camera.main.AddCommandBuffer(CameraEvent.BeforeForwardOpaque, commandBuffer);
        }
    
        void OnDisable()
        {
            //移除事件，清理资源
            Camera.main.RemoveCommandBuffer(CameraEvent.BeforeForwardOpaque, commandBuffer);
            commandBuffer.Clear();
            renderTexture.Release();
        }
    
        //为方便调整，放在update里面了
        void Update()
        {
            _Material.SetFloat("_Brightness", brightness);
            _Material.SetFloat("_Saturation", saturation);
            _Material.SetFloat("_Contrast", contrast);
        }
    }

好了，我们美颜相机第二版本就完成了，增加了后处理之后的效果，调整了一下饱和度，亮度，对比度之后的效果如下：

![Center 2][]

动态效果：

![Center 3][]

通过上面的几个例子，我们大概了解了Command Buffer能干的事情。首先，Command Buffer可以让我们定义一连串的渲染指令，我们可以直接在需要的时候通过Graphics.ExecuteCommandBuffer执行也可以通过Camera.AddCommandBuffer函数根据不同的CameraEvent来控制CommandBuffer执行的时间。其次，Command Buffer的效果大致等同于新建一个和主相机参数大致相同的摄像机，并且可以附加一些额外的渲染效果支持，比如替换材质渲染，对渲染的RT进行后处理等等。

不过这里我也遇到了一个问题，当使用Command Buffer渲染时，对象的shader使用diffuse等自定义shader的话，Command Buffer渲染出来的结果有时会不对，通过Frame Debuger看的时候发现Command Buffer渲染的流程是Deffer Path的，而不是我们正常的Forward Path，而工程设置以及相机设置都为Forward Path。将shader换为自己写的就木有这个问题。不知道是我哪里姿势不对还是Unity的bug。。。

## “假”景深效果 ##

所谓假景深，叫做背景虚化更加贴切一些。其实所有的渲染效果都是假的，都是是忽悠我们的眼睛，就比谁忽悠得又好又省。正常的 [景深][Link 3]效果，一般是基于深度计算，根据焦距将模糊图与原图插值控制焦点距离清晰，原理焦点距离模糊。but，这个效果虽然很好，但是需要深度信息，如果是deffer或者开了实时阴影，深度自然就有了，也就无所谓了，但是一般手游的基本这两种都是开不得的，那么开了深度，就会DC翻倍，再加上模糊至少十次全屏采样（降采样也许会好些）。个人感觉景深应该最昂贵的后处理效果之一了。而背景虚化的效果，简单来说就是只让人物（或者我们需要突出的部分）清晰，其他所有部分全都模糊。这种效果不需要深度图，可以在DC上省下很多消耗，而且有时候这种效果会比真正的景深更好，但还是需要看需求。我们如果实现这种效果，最简单的并且容易想到的就是新建一个相机，然后将需要突出的部分放在另一个相机渲染，在场景相机上增加一个模糊的后处理，这样，突出部分渲染后的相机叠加到场景相机的结果上，就可以只让场景模糊而人物不模糊了。不过在有了Command Buffer之后，就不需要这么麻烦了，我们可以直接通过Command Buffer控制模型的渲染时机，首先将正常的Renderer组件disable，然后强行通过Command Buffer让其在后处理之后渲染：

//在后处理之后渲染
    //by: puppet_master
    //2017.6.5
    
    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.Rendering;
    [ExecuteInEditMode]
    
    public class RenderAfterPostEffect : MonoBehaviour
    {
        private CommandBuffer commandBuffer = null;
        private Renderer targetRenderer = null;
    
        void OnEnable()
        {
            targetRenderer = this.GetComponentInChildren<Renderer>();
            if (targetRenderer)
            {
                commandBuffer = new CommandBuffer();
                commandBuffer.DrawRenderer(targetRenderer, targetRenderer.sharedMaterial);
                //直接加入相机的CommandBuffer事件队列中,
                Camera.main.AddCommandBuffer(CameraEvent.AfterImageEffects, commandBuffer);
                targetRenderer.enabled = false;
            }
        }
    
        void OnDisable()
        {
            if (targetRenderer)
            {
                //移除事件，清理资源
                Camera.main.RemoveCommandBuffer(CameraEvent.AfterImageEffects, commandBuffer);
                commandBuffer.Clear();
                targetRenderer.enabled = true;
            }
        }
    }

上面的脚本只是控制修改模型渲染时机的，然后，我们可以在主相机上挂一个 [高斯模糊][Link 7]的后处理，调整参数后就可以得到背景虚化的效果了：

![Center 4][]

当然，不仅仅是模糊效果，挂了该脚本的对象会被所有后处理所“抛弃”，我们也可以放一些其他的后处理效果，比如 [漩涡扭曲][Link 8]：

![Center 5][]

Command Buffer的这个功能是个人感觉最有用的一个功能，可以进一步地控制某个对象的渲染序列，让我们更加方便地实现一些效果。

## 描边效果Command Buffer实现 ##

[描边效果][Link 4]（后处理版本）首先将要描边的对象用描边色渲染到一张RT上，然后将RT进行模糊操作，使对象外扩，再用外扩的RT减去原始RT就得到了轮廓部分，最后再将轮廓部分与原图混合就得到了最终的描边效果。描边效果将对象渲染到RT上之前通过额外创建一个摄像机实现的，有了Command Buffer，我们就可以直接在原始相机上进行这个操作，大大简化了程序的复杂度。关于描边效果的具体原理，可以参考本人之前的文章，这里就不多说了，直接上代码。补充说明： [PostEffectBase][Link 6]类是所有本人之前做的后处理效果的基类。

C\#脚本部分：

/********************************************************************
     FileName: OutlinePostEffectCmdBuffer.cs
     Description: 后处理描边效果CommandBuffer版本
     Created: 2017/06/07
     by puppet_master
    *********************************************************************/
    using UnityEngine;
    using System.Collections;
    using UnityEngine.Rendering;
    
    public class OutlinePostEffectCmdBuffer : PostEffectBase
    {
        private RenderTexture renderTexture = null;
        private CommandBuffer commandBuffer = null;
        private Material outlineMaterial = null;
        //描边prepass shader（渲染纯色贴图的shader）
        public Shader outlineShader = null;
        //采样率
        public float samplerScale = 1;
        //降采样
        public int downSample = 1;
        //迭代次数
        public int iteration = 2;
        //描边颜色
        public Color outLineColor = Color.green;
        //描边强度
        [Range(0.0f, 10.0f)]
        public float outLineStrength = 3.0f;
        //目标对象
        public GameObject targetObject = null;
    
    
        void OnEnable()
        {
            if (outlineShader == null)
                return;
            if (outlineMaterial == null)
                outlineMaterial = new Material(outlineShader);
            Renderer[] renderers = targetObject.GetComponentsInChildren<Renderer>();
            if (renderTexture == null)
                renderTexture = RenderTexture.GetTemporary(Screen.width >> downSample, Screen.height >> downSample, 0);
            //创建描边prepass的command buffer
            commandBuffer = new CommandBuffer();
            commandBuffer.SetRenderTarget(renderTexture);
            commandBuffer.ClearRenderTarget(true, true, Color.black);
            foreach (Renderer r in renderers)
                commandBuffer.DrawRenderer(r, outlineMaterial);
        }
    
        void OnDisable()
        {
            if (renderTexture)
            {
                RenderTexture.ReleaseTemporary(renderTexture);
                renderTexture = null;
            }
            if (outlineMaterial)
            {
                DestroyImmediate(outlineMaterial);
                outlineMaterial = null;
            }
            if (commandBuffer != null)
            {
                commandBuffer.Release();
                commandBuffer = null;
            }
               
        }
    
        void OnRenderImage(RenderTexture source, RenderTexture destination)
        {
            if (_Material && renderTexture && outlineMaterial && commandBuffer != null)
            {
                //通过Command Buffer可以设置自定义材质的颜色
                outlineMaterial.SetColor("_OutlineCol", outLineColor);
                //直接通过Graphic执行Command Buffer
                Graphics.ExecuteCommandBuffer(commandBuffer);
    
                //对RT进行Blur处理
                RenderTexture temp1 = RenderTexture.GetTemporary(source.width >> downSample, source.height >> downSample, 0);
                RenderTexture temp2 = RenderTexture.GetTemporary(source.width >> downSample, source.height >> downSample, 0);
    
                //高斯模糊，两次模糊，横向纵向，使用pass0进行高斯模糊
                _Material.SetVector("_offsets", new Vector4(0, samplerScale, 0, 0));
                Graphics.Blit(renderTexture, temp1, _Material, 0);
                _Material.SetVector("_offsets", new Vector4(samplerScale, 0, 0, 0));
                Graphics.Blit(temp1, temp2, _Material, 0);
    
                //如果有叠加再进行迭代模糊处理
                for(int i = 0; i < iteration; i++)
                {
                    _Material.SetVector("_offsets", new Vector4(0, samplerScale, 0, 0));
                    Graphics.Blit(temp2, temp1, _Material, 0);
                    _Material.SetVector("_offsets", new Vector4(samplerScale, 0, 0, 0));
                    Graphics.Blit(temp1, temp2, _Material, 0);
                }
    
                //用模糊图和原始图计算出轮廓图
                _Material.SetTexture("_BlurTex", temp2);
                Graphics.Blit(renderTexture, temp1, _Material, 1);
    
                //轮廓图和场景图叠加
                _Material.SetTexture("_BlurTex", temp1);
                _Material.SetFloat("_OutlineStrength", outLineStrength);
                Graphics.Blit(source, destination, _Material, 2);
    
                RenderTexture.ReleaseTemporary(temp1);
                RenderTexture.ReleaseTemporary(temp2);
            }
            else
            {
                Graphics.Blit(source, destination);
            }
        }
    
    
    }

描边后处理部分shader：

//后处理描边Shader
    //by：puppet_master
    //2017.6.7
    
    Shader "Custom/OutLinePostEffect" {
    
    	Properties{
    		_MainTex("Base (RGB)", 2D) = "white" {}
    		_BlurTex("Blur", 2D) = "white"{}
    	}
    
    	CGINCLUDE
    	#include "UnityCG.cginc"
    	
    	//用于剔除中心留下轮廓
    	struct v2f_cull
    	{
    		float4 pos : SV_POSITION;
    		float2 uv : TEXCOORD0;
    	};
    
    	//用于模糊
    	struct v2f_blur
    	{
    		float4 pos : SV_POSITION;
    		float2 uv  : TEXCOORD0;
    		float4 uv01 : TEXCOORD1;
    		float4 uv23 : TEXCOORD2;
    		float4 uv45 : TEXCOORD3;
    	};
    
    	//用于最后叠加
    	struct v2f_add
    	{
    		float4 pos : SV_POSITION;
    		float2 uv  : TEXCOORD0;
    		float2 uv1 : TEXCOORD1;
    	};
    
    	sampler2D _MainTex;
    	float4 _MainTex_TexelSize;
    	sampler2D _BlurTex;
    	float4 _BlurTex_TexelSize;
    	float4 _offsets;
    	float _OutlineStrength;
    
    	//Blur图和原图进行相减获得轮廓
    	v2f_cull vert_cull(appdata_img v)
    	{
    		v2f_cull o;
    		o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
    		o.uv = v.texcoord.xy;
    		//dx中纹理从左上角为初始坐标，需要反向
    #if UNITY_UV_STARTS_AT_TOP
    		if (_MainTex_TexelSize.y < 0)
    			o.uv.y = 1 - o.uv.y;
    #endif	
    		return o;
    	}
    
    	fixed4 frag_cull(v2f_cull i) : SV_Target
    	{
    		fixed4 colorMain = tex2D(_MainTex, i.uv);
    		fixed4 colorBlur = tex2D(_BlurTex, i.uv);
    		//最后的颜色是_BlurTex - _MainTex，周围0-0=0，黑色；边框部分为描边颜色-0=描边颜色；中间部分为描边颜色-描边颜色=0。最终输出只有边框
    		//return fixed4((colorBlur - colorMain).rgb, 1);
    		return colorBlur - colorMain;
    	}
    
    	//高斯模糊 vert shader（之前的文章有详细注释，此处也可以用BoxBlur，更省一点）
    	v2f_blur vert_blur(appdata_img v)
    	{
    		v2f_blur o;
    		_offsets *= _MainTex_TexelSize.xyxy;
    		o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
    		o.uv = v.texcoord.xy;
    
    		o.uv01 = v.texcoord.xyxy + _offsets.xyxy * float4(1, 1, -1, -1);
    		o.uv23 = v.texcoord.xyxy + _offsets.xyxy * float4(1, 1, -1, -1) * 2.0;
    		o.uv45 = v.texcoord.xyxy + _offsets.xyxy * float4(1, 1, -1, -1) * 3.0;
    
    		return o;
    	}
    
    	//高斯模糊 pixel shader
    	fixed4 frag_blur(v2f_blur i) : SV_Target
    	{
    		fixed4 color = fixed4(0,0,0,0);
    		color += 0.40 * tex2D(_MainTex, i.uv);
    		color += 0.15 * tex2D(_MainTex, i.uv01.xy);
    		color += 0.15 * tex2D(_MainTex, i.uv01.zw);
    		color += 0.10 * tex2D(_MainTex, i.uv23.xy);
    		color += 0.10 * tex2D(_MainTex, i.uv23.zw);
    		color += 0.05 * tex2D(_MainTex, i.uv45.xy);
    		color += 0.05 * tex2D(_MainTex, i.uv45.zw);
    		return color;
    	}
    
    	//最终叠加 vertex shader
    	v2f_add vert_add(appdata_img v)
    	{
    		v2f_add o;
    		//mvp矩阵变换
    		o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
    		//uv坐标传递
    		o.uv.xy = v.texcoord.xy;
    		o.uv1.xy = o.uv.xy;
    #if UNITY_UV_STARTS_AT_TOP
    		if (_MainTex_TexelSize.y < 0)
    			o.uv.y = 1 - o.uv.y;
    #endif	
    		return o;
    	}
    
    	fixed4 frag_add(v2f_add i) : SV_Target
    	{
    		//取原始场景图片进行采样
    		fixed4 ori = tex2D(_MainTex, i.uv1);
    		//取得到的轮廓图片进行采样
    		fixed4 blur = tex2D(_BlurTex, i.uv);
    		fixed4 final = ori + blur * _OutlineStrength;
    		return final;
    	}
    
    		ENDCG
    
    	SubShader
    	{
    		//pass 0: 高斯模糊
    		Pass
    		{
    			ZTest Off
    			Cull Off
    			ZWrite Off
    			Fog{ Mode Off }
    
    			CGPROGRAM
    			#pragma vertex vert_blur
    			#pragma fragment frag_blur
    			ENDCG
    		}
    		
    		//pass 1: 剔除中心部分 
    		Pass
    		{
    			ZTest Off
    			Cull Off
    			ZWrite Off
    			Fog{ Mode Off }
    
    			CGPROGRAM
    			#pragma vertex vert_cull
    			#pragma fragment frag_cull
    			ENDCG
    		}
    
    
    		//pass 2: 最终叠加
    		Pass
    		{
    
    			ZTest Off
    			Cull Off
    			ZWrite Off
    			Fog{ Mode Off }
    
    			CGPROGRAM
    			#pragma vertex vert_add
    			#pragma fragment frag_add
    			ENDCG
    		}
    
    	}
    }

描边PrePass部分shader：

//描边Shader
    //by：puppet_master
    //2017.6.7
    
    Shader "ApcShader/OutlinePrePass"
    {
    	//子着色器	
    	SubShader
    	{
    		//描边使用两个Pass，第一个pass沿法线挤出一点，只输出描边的颜色
    		Pass
    		{	
    			CGPROGRAM
    			#include "UnityCG.cginc"
    			fixed4 _OutlineCol;
    			
    			struct v2f
    			{
    				float4 pos : SV_POSITION;
    			};
    			
    			v2f vert(appdata_full v)
    			{
    				v2f o;
    				o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
    				return o;
    			}
    			
    			fixed4 frag(v2f i) : SV_Target
    			{
    				//这个Pass直接输出描边颜色
    				return _OutlineCol;
    			}
    			
    			//使用vert函数和frag函数
    			#pragma vertex vert
    			#pragma fragment frag
    			ENDCG
    		}
    	}
    }

将描边prepass和后处理shader赋给脚本，并将需要描边的对象赋给targetObject，就可以看到描边效果了：

![Center 6][]

与之前的描边效果一致，但是代码更简洁。并且描边颜色可以直接在脚本中设置。顺便来一发好玩的效果，调整Sampler Scale以及OutLineStrength：

![Center 7][]

[Link 1]: https://docs.unity3d.com/Manual/GraphicsCommandBuffers.html
[Link 2]: https://docs.unity3d.com/ScriptReference/Rendering.CommandBuffer.html
[Link 3]: http://blog.csdn.net/puppet_master/article/details/52819874
[Link 4]: http://blog.csdn.net/puppet_master/article/details/54000951
[Center]: /images/20220615/be46fa260ce843e8845371d29bafe15a.png
[Link 5]: http://blog.csdn.net/puppet_master/article/details/53548134
[Center 1]: /images/20220615/34a2210ebf294fec92a6d0ebb8183910.png
[Link 6]: http://blog.csdn.net/puppet_master/article/details/52423905
[Center 2]: /images/20220615/038bae86b7c94fecb6dc2f1d1c094fa0.png
[Center 3]: /images/20220615/383005f518aa49e0bb19b36dca6805d0.png
[Link 7]: http://blog.csdn.net/puppet_master/article/details/52783179
[Center 4]: /images/20220615/1dcc801ece3843d1ba20470f841cce6f.png
[Link 8]: http://blog.csdn.net/puppet_master/article/details/71437031
[Center 5]: /images/20220615/50aff6f176db4815ae761f44a8a3fc85.png
[Center 6]: /images/20220615/9b513e84d5694142aed0914f4ff46b48.png
[Center 7]: /images/20220615/b2d17274d4924862846abde12401d228.png