对于我们这个项目来说，这个描边精细度是可以接受的。性能方面，放在低端的手机上，虽然会有点的掉帧，从锁定的30帧变成了24-30帧不断切换的样子。不像以前那样，用了后处理描边，妥妥地从30帧掉到了12-14帧。
目前在做的一个项目，有一个3D物体描边的需求，以前都是使用屏幕后处理的方式给3D物体描边的。近期在做性能优化，发现屏幕后处理实在是太消耗性能了，在移动手机上，即使是中偏高端的手机都会受影响，更不用说是低端的手机了。所以自然地就要搜索各种描边的方式之类的，发现一篇对描边讲得非常全面的文章。
参考文章：Unity Shader实现描边效果
这个文章写得真的非常全面，各种描边的方式，优势和劣势都讲得很详细。不过给我印象深刻的还是后处理描边的方式，效果确实好。
我们项目之前的后处理方式，是用一个额外的相机单独渲染某个物体，得到一张RT，然后将这张RT在OnRenderImage的函数里通过一个材质球跟源图进行合并。Graphics.Blit(source, destination, _Material);
然后我就突发奇想，用后处理做描边，不就是在原图上叠加了一张新的图么。这个格式我熟啊，作为资深的UI拼图仔，马上就想到了Canvas+RawImage+Camera+RT的方式，都是叠加图片，这样子岂不是更好？有点小激动啊，用这种方式就可以避免后处理的消耗了啊。
这里提一下，使用额外的Camera+RT+CullingMask可以单独渲染某个3D物体，然后给Camera设置一个渲染的Shader(这个shader很简单，像素着色器直接return fixed4(1,1,1,1)就行)，将物体的像素全都改成白色，非物体区域可以全透明。这里有个要注意的点，额外的相机要作为在主相机的子物体，并且大部分属性应该复用主相机的属性，保证两个相机渲染同一个物体的是一样的形状。
//这些相机的设定，大部分是沿用以前用后处理做描边的时候的设置。
_tempRT = RenderTexture.GetTemporary(Screen.width, Screen.height, 24);
_tempRT.name = "用于描边选中对象";
//把这个额外的相机参数设置成主相机一样//
if (!_init)
{
rtCamera.CopyFrom(_camera);
//清除所有的颜色
rtCamera.clearFlags = CameraClearFlags.Color;
//透明的背景
rtCamera.backgroundColor = new Color(0, 0, 0, 0);
rtCamera.cullingMask = 1 << ((int)ELayer.ActiveBuilding);
rtCamera.depth = 1;
rtCamera.SetReplacementShader(occupiedShader, "");
_init = true;
}
rtCamera.gameObject.SetActive(true);
rtCamera.enabled = true;
rtCamera.targetTexture = _tempRT;
//
RawImage.texture = _tempRT;
RawImage.gameObject.SetActive(true);
OK，大致的想法有了。那么现在的问题就从3D物体的描边需求转换成了2D图片的描边需求。这个搜索了下，找到合适的文章。
参考文章：UnityShader 2D描边效果
因为我要用于UGUI，所以结合文章的第一个Shader和UI-Default的Shader，复制粘贴各种，然后修改一下颜色返回。
// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)
Shader "Custom/UIEdge"
{
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
_Color ("Tint", Color) = (1,1,1,1)
_OffsetUV ("OffsetUV", Range(0, 1)) = 0.1
_EdgeColor ("EdgeColor", Color) = (1, 0, 0, 1)
_AlphaTreshold ("Treshold", Range(0, 1)) = 0.5
_StencilComp ("Stencil Comparison", Float) = 8
_Stencil ("Stencil ID", Float) = 0
_StencilOp ("Stencil Operation", Float) = 0
_StencilWriteMask ("Stencil Write Mask", Float) = 255
_StencilReadMask ("Stencil Read Mask", Float) = 255
_ColorMask ("Color Mask", Float) = 15
[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
}
SubShader
{
Tags
{
"Queue"="Transparent"
"IgnoreProjector"="True"
"RenderType"="Transparent"
"PreviewType"="Plane"
"CanUseSpriteAtlas"="True"
}
Stencil
{
Ref [_Stencil]
Comp [_StencilComp]
Pass [_StencilOp]
ReadMask [_StencilReadMask]
WriteMask [_StencilWriteMask]
}
Cull Off
Lighting Off
ZWrite Off
ZTest [unity_GUIZTestMode]
Blend SrcAlpha OneMinusSrcAlpha
ColorMask [_ColorMask]
Pass
{
Name "Default"
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma target 2.0
#include "UnityCG.cginc"
#include "UnityUI.cginc"
#pragma multi_compile __ UNITY_UI_ALPHACLIP
struct appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
UNITY_VERTEX_INPUT_INSTANCE_ID
};
struct v2f
{
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
fixed2 uv[5] : TEXCOORD0;
UNITY_VERTEX_OUTPUT_STEREO
};
sampler2D _MainTex;
fixed4 _Color;
fixed4 _TextureSampleAdd;
float4 _ClipRect;
float4 _MainTex_ST;
fixed _OffsetUV;
fixed4 _EdgeColor;
fixed _AlphaTreshold;
v2f vert(appdata_t v)
{
v2f OUT;
UNITY_SETUP_INSTANCE_ID(v);
UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
OUT.vertex = UnityObjectToClipPos(v.vertex);
//OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
OUT.color = v.color * _Color;
OUT.uv[0] = v.texcoord;
OUT.uv[1] = v.texcoord + fixed2(0, _OffsetUV); //up
OUT.uv[2] = v.texcoord + fixed2(-_OffsetUV, 0); //left
OUT.uv[3] = v.texcoord + fixed2(0, -_OffsetUV); //bottom
OUT.uv[4] = v.texcoord + fixed2(_OffsetUV, 0); //right
return OUT;
}
fixed4 frag(v2f IN) : SV_Target
{
half4 color = (tex2D(_MainTex, IN.uv[0]) + _TextureSampleAdd) * IN.color;
#ifdef UNITY_UI_ALPHACLIP
clip (color.a - 0.001);
#endif
if(color.a == 0){
return color;
}
fixed4 original = color;
fixed alpha = original.a;
fixed p1 = tex2D(_MainTex, IN.uv[1]).a;
fixed p2 = tex2D(_MainTex, IN.uv[2]).a;
fixed p3 = tex2D(_MainTex, IN.uv[3]).a;
fixed p4 = tex2D(_MainTex, IN.uv[4]).a;
alpha = p1 + p2 + p3 + p4 + alpha;
alpha /= 5;
if (alpha < _AlphaTreshold) {
original.rgb = _EdgeColor.rgb;
}else{
original.a = 0;
}
return original;
}
ENDCG
}
}
}
这个Shader的主要作用，就是把渲染出来的RT的白色接近边缘的地方保留下来，其余的像素全部设置为透明。这里其实应用到了Canvas的一个特性，就是屏幕尺寸自适应性，配合RectTransform可以让RawImage渲染出来的描边图片完美地贴合到物体上面。
Canvas使用的是ScreenSpace的方式，并且单独给这个Canvas设置了一个独立的相机渲染， 这里要注意的问题可能就是这个相机的Depth，给一个合适的值，要在场景相机的上方，游戏UI相机的下方。
对于我们这个项目来说，这个描边精细度是可以接受的。性能方面，放在低端的手机上，虽然会有点的掉帧，从稳定的30帧变成了24-30帧不断切换的样子。不像以前那样，用了后处理描边，妥妥的掉到了12-14帧。
如果对描边有高精细度要求的，可以优化UI的描边shader去改良，我们项目因为对描边没有很高要求，所以shader的计算量越少越好。我这里主要是想提供一种思路。
害，这里就想起图形学的真理，看起来像是真的那它的做法就是对的。很多时候不管做法合不合“规矩”，只要能达到同样或者类似的效果，就是好的做法。
其实呢，这里有个小插曲。Unity的屏幕后处理，就是在继承MonoBehaviour然后重写OnRenderImage的函数，我原先是以为仅仅是重写这个函数，不会消耗太多的性能。后来经过测试发现，就算在OnRenderImage里什么都不做，只是默认的Graphics.Blit(source, destination)，都有很大的性能消耗。我查了下，有的人说是OnRenderImage是从GPU里反向获取像素信息，然后重新渲染，这一个流程跟OnRenderImage函数内部的实现毫无关联。于是我就确定了这个项目优化绝对不能使用后处理做描边的想法。
