【Unity】UGUI描边的优化实现

基于Shader实现的UGUI描边解决方案

前言

这个是从别的地方原文粘贴过来的，留个记录而已

原文地址

这次给大家带来的是基于Shader实现的UGUI描边，也支持对Text组件使用。

首先请大家看看最终效果（上面放了一个Image和一个Text）：

（8102年了怎么还在舰

接下来，我会向大家介绍思路和具体实现过程。如果你想直接代到项目里使用，请自行跳转到本文最后，那里有完整的C#和Shader代码。

本方案在Unity 2018.4.0f1下测试通过。

本文参考了http://blog.sina.com.cn/s/blog_6ad33d350102xb7v.html

转载请注明出处：https://www.cnblogs.com/GuyaWeiren/p/9665106.html

为什么要这么做

就我参加工作这些年接触到的UI美术来看，他们都挺喜欢用描边效果。诚然这个效果可以让文字更加突出，看着也挺不错。对美术来说做描边简单的一比，PS里加个图层样式就搞定，但是对我们程序来说就是一件很痛苦的事。

UGUI自带的Outline组件用过的同学都知道，本质上是把元素复制四份，然后做一些偏移绘制出来。但是把偏移量放大，瞬间就穿帮了。如果美术要求做一个稍微宽一点的描边，这个组件是无法实现的。

然后有先辈提出按照Outline实现方式，增加复制份数的方法。请参考https://github.com/n-yoda/unity-vertex-effects。确实非常漂亮。但是这个做法有一个非常严重的问题：数量如此大的顶点数，对性能会有影响。我们知道每个字符是由两个三角形构成，总共6个顶点。如果文字数量大，再加上一个复制N份的脚本，顶点数会分分钟炸掉。

以复制8次为例，一段200字的文本在进行处理后会生成200 * 6 * (8+1) = 10800 个顶点，多么可怕。并且，Unity5.2以前的版本要求，每一个Canvas下至多只能有65535个顶点，超过就会报错。

TextMeshPro能做很多漂亮的效果。但是它的做法类似于图字，要提供所有会出现的字符。对于字符很少的英语环境，这没有问题，但对于中文环境，把所有字符弄进去是不现实的。还有最关键的是，它是作用于TextMesh组件，而不是UGUI的Text。

于是乎，使用Shader变成了最优解。

概括讲，这个实现就是在C#代码中对UI顶点根据描边宽度进行外扩，然后在Shader的像素着色器中对像素的一周以描边宽度为半径采N个样，最后将颜色叠加起来。通常需要描边的元素尺寸都不大，故多重采样带来的性能影响几乎是可以忽略的。

在Shader中实现描边

创建一个OutlineEx.shader。对于描边，我们需要两个参数：描边的颜色和描边的宽度。所以首先将这两个参数添加到Shader的属性中：

1 _OutlineColor("Outline Color", Color) = (1, 1, 1, 1)
2 _OutlineWidth("Outline Width", Int) = 1

采样坐标用圆的参数方程计算。在Shader中进行三角函数运算比较吃性能，并且这里采样的角度是固定的，所以我们可以把坐标直接写死。在Shader中添加采样的函数。因为最终进行颜色混合的时候只需要用到alpha值，所以函数不返回rgb：

1 fixed SampleAlpha(int pIndex, v2f IN)
2 {
3     const fixed sinArray[12] = { 0, 0.5, 0.866, 1, 0.866, 0.5, 0, -0.5, -0.866, -1, -0.866, -0.5 };
4     const fixed cosArray[12] = { 1, 0.866, 0.5, 0, -0.5, -0.866, -1, -0.866, -0.5, 0, 0.5, 0.866 };
5     float2 pos = IN.texcoord + _MainTex_TexelSize.xy * float2(cosArray[pIndex], sinArray[pIndex]) * _OutlineWidth;
6     return (tex2D(_MainTex, pos) + _TextureSampleAdd).w * _OutlineColor.w;
7 }

然后在像素着色器中增加对方法的调用。

 1 fixed4 frag(v2f IN) : SV_Target
 2 {
 3     fixed4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
 4  
 5     half4 val = half4(_OutlineColor.x, _OutlineColor.y, _OutlineColor.z, 0);
 6     val.w += SampleAlpha(0, IN);
 7     val.w += SampleAlpha(1, IN);
 8     val.w += SampleAlpha(2, IN);
 9     val.w += SampleAlpha(3, IN);
10     val.w += SampleAlpha(4, IN);
11     val.w += SampleAlpha(5, IN);
12     val.w += SampleAlpha(6, IN);
13     val.w += SampleAlpha(7, IN);
14     val.w += SampleAlpha(8, IN);
15     val.w += SampleAlpha(9, IN);
16     val.w += SampleAlpha(10, IN);
17     val.w += SampleAlpha(11, IN);
18     color = (val * (1.0 - color.a)) + (color * color.a);
19  
20     return color;
21 }

接下来，在Unity中新建一个材质球，把Shader赋上去，挂在一个UGUI组件上，然后调整描边颜色和宽度，可以看到效果：

可以看到描边已经出现了，但是超出图片范围的部分被裁减掉了。所以接下来，我们需要对图片的区域进行调整，保证描边的部分也被包含在区域内。

在C#层进行区域扩展

要扩展区域，就得修改顶点。Unity提供了BaseMeshEffect类供开发者对UI组件的顶点进行修改。

创建一个OutlineEx类，继承于BaseMeshEffect类，实现其中的ModifyMesh(VertexHelper)方法。参数VertexHelper类提供了GetUIVertexStream(List<UIVertex>)和AddUIVertexTriangleStream(List<UIVertex>)方法用于获取和设置UI物件的顶点。

这里我们可以把参数需要的List提出来做成静态变量，这样能够避免每次ModifyMesh调用时创建List对象。

 1 public class OutlineEx : BaseMeshEffect
 2 {
 3     public Color OutlineColor = Color.white;
 4     [Range(0, 6)]
 5     public int OutlineWidth = 0;
 6  
 7     private static List<UIVertex> m_VetexList = new List<UIVertex>();
 8  
 9  
10     protected override void Awake()
11     {
12         base.Awake();
13  
14         var shader = Shader.Find("TSF Shaders/UI/OutlineEx");
15         base.graphic.material = new Material(shader);
16  
17         var v1 = base.graphic.canvas.additionalShaderChannels;
18         var v2 = AdditionalCanvasShaderChannels.Tangent;
19         if ((v1 & v2) != v2)
20         {
21             base.graphic.canvas.additionalShaderChannels |= v2;
22         }
23         this._Refresh();
24     }
25  
26  
27 #if UNITY_EDITOR
28     protected override void OnValidate()
29     {
30         base.OnValidate();
31  
32         if (base.graphic.material != null)
33         {
34             this._Refresh();
35         }
36     }
37 #endif
38  
39  
40     private void _Refresh()
41     {
42         base.graphic.material.SetColor("_OutlineColor", this.OutlineColor);
43         base.graphic.material.SetInt("_OutlineWidth", this.OutlineWidth);
44         base.graphic.SetVerticesDirty();
45     }
46  
47  
48     public override void ModifyMesh(VertexHelper vh)
49     {
50         vh.GetUIVertexStream(m_VetexList);
51  
52         this._ProcessVertices();
53  
54         vh.Clear();
55         vh.AddUIVertexTriangleStream(m_VetexList);
56     }
57  
58  
59     private void _ProcessVertices()
60     {
61         // TODO: 处理顶点
62     }
63 }

现在已经可以获取到所有的顶点信息了。接下来我们对它进行外扩。

我们知道每三个顶点构成一个三角形，所以需要对构成三角形的三个顶点进行处理，并且要将它的UV坐标（决定图片在图集中的范围）也做对应的外扩，否则从视觉上看起来就只是图片被放大了一点点。

于是完成_ProcessVertices方法：

 1 private void _ProcessVertices()
 2 {
 3     for (int i = 0, count = m_VetexList.Count - 3; i <= count; i += 3)
 4     {
 5         var v1 = m_VetexList[i];
 6         var v2 = m_VetexList[i + 1];
 7         var v3 = m_VetexList[i + 2];
 8         // 计算原顶点坐标中心点
 9         //
10         var minX = _Min(v1.position.x, v2.position.x, v3.position.x);
11         var minY = _Min(v1.position.y, v2.position.y, v3.position.y);
12         var maxX = _Max(v1.position.x, v2.position.x, v3.position.x);
13         var maxY = _Max(v1.position.y, v2.position.y, v3.position.y);
14         var posCenter = new Vector2(minX + maxX, minY + maxY) * 0.5f;
15         // 计算原始顶点坐标和UV的方向
16         //
17         Vector2 triX, triY, uvX, uvY;
18         Vector2 pos1 = v1.position;
19         Vector2 pos2 = v2.position;
20         Vector2 pos3 = v3.position;
21         if (Mathf.Abs(Vector2.Dot((pos2 - pos1).normalized, Vector2.right))
22             > Mathf.Abs(Vector2.Dot((pos3 - pos2).normalized, Vector2.right)))
23         {
24             triX = pos2 - pos1;
25             triY = pos3 - pos2;
26             uvX = v2.uv0 - v1.uv0;
27             uvY = v3.uv0 - v2.uv0;
28         }
29         else
30         {
31             triX = pos3 - pos2;
32             triY = pos2 - pos1;
33             uvX = v3.uv0 - v2.uv0;
34             uvY = v2.uv0 - v1.uv0;
35         }
36         // 为每个顶点设置新的Position和UV
37         //
38         v1 = _SetNewPosAndUV(v1, this.OutlineWidth, posCenter, triX, triY, uvX, uvY);
39         v2 = _SetNewPosAndUV(v2, this.OutlineWidth, posCenter, triX, triY, uvX, uvY);
40         v3 = _SetNewPosAndUV(v3, this.OutlineWidth, posCenter, triX, triY, uvX, uvY);
41         // 应用设置后的UIVertex
42         //
43         m_VetexList[i] = v1;
44         m_VetexList[i + 1] = v2;
45         m_VetexList[i + 2] = v3;
46     }
47 }
48  
49  
50 private static UIVertex _SetNewPosAndUV(UIVertex pVertex, int pOutLineWidth,
51     Vector2 pPosCenter,
52     Vector2 pTriangleX, Vector2 pTriangleY,
53     Vector2 pUVX, Vector2 pUVY)
54 {
55     // Position
56     var pos = pVertex.position;
57     var posXOffset = pos.x > pPosCenter.x ? pOutLineWidth : -pOutLineWidth;
58     var posYOffset = pos.y > pPosCenter.y ? pOutLineWidth : -pOutLineWidth;
59     pos.x += posXOffset;
60     pos.y += posYOffset;
61     pVertex.position = pos;
62     // UV
63     var uv = pVertex.uv0;
64     uv += pUVX / pTriangleX.magnitude * posXOffset * (Vector2.Dot(pTriangleX, Vector2.right) > 0 ? 1 : -1);
65     uv += pUVY / pTriangleY.magnitude * posYOffset * (Vector2.Dot(pTriangleY, Vector2.up) > 0 ? 1 : -1);
66     pVertex.uv0 = uv;
67  
68     return pVertex;
69 }
70  
71  
72 private static float _Min(float pA, float pB, float pC)
73 {
74     return Mathf.Min(Mathf.Min(pA, pB), pC);
75 }
76  
77  
78 private static float _Max(float pA, float pB, float pC)
79 {
80     return Mathf.Max(Mathf.Max(pA, pB), pC);
81 }

OJ8K，现在范围已经被扩大，可以看到上下左右四个边的描边宽度没有被裁掉了。然后可以在编辑器中调整描边颜色和宽度，可以看到效果：

UV裁剪，排除不需要的像素

在上一步的效果图中，我们可以注意到图片的边界出现了被拉伸的部分。如果使用了图集或字体，在UV扩大后图片附近的像素也会被包含进来。为什么会变成这样呢？（先打死）

因为前面说过，UV裁剪框就相当于图集中每个小图的范围。直接扩大必然会包含到小图邻接的图的像素。所以这一步我们需要对最终绘制出的图进行裁剪，保证这些不要的像素不被画出来。

裁剪的逻辑也很简单。如果该像素处于被扩大前的UV范围外，则设置它的alpha为0。这一步需要放在像素着色器中完成。如何将原始UV区域传进Shader是一个问题。对于Text组件，所有字符的顶点都会进入Shader处理，所以在Shader中添加属性是不现实的。

好在Unity为我们提供了门路，可以看UIVertex结构体的成员：

 1 public struct UIVertex
 2 {
 3     public static UIVertex simpleVert;
 4     public Vector3 position;
 5     public Vector3 normal;
 6     public Color32 color;
 7     public Vector2 uv0;
 8     public Vector2 uv1;
 9     public Vector2 uv2;
10     public Vector2 uv3;
11     public Vector4 tangent;
12 }

当然，你想把数据分别放在uv1和uv2中也是可以的。而Unity默认只会使用到position、normal、uv0和color，其他成员是不会使用的。所以我们可以考虑将原始UV框的数据（最小x，最小y，最大x，最大y）~~赋值给tangent成员，因为它刚好是一个Vector4类型。~~

这里感谢真木网友的指正，UI在缩放时，tangent的值会被影响，导致描边显示不全甚至完全消失，所以应该赋值给uv1和uv2。经测试，Unity 5.6自身有bug，uv2和uv3无论怎么设置都不会被传入shader，但在2017.3.1p1和2018上测试通过。如果必须要使用低版本Unity，可以考虑使用uv1和tangent.zw存储原始UV框的四个值，但要求UI的Z轴不能缩放，且Canvas和摄像机必须正交。

需要注意的是，在Unity5.4（大概是这个版本吧，记不清了）之后，UIVertex的非必须成员的数据默认不会被传递进Shader。所以我们需要修改UI组件的Canvas的additionalShaderChannels属性，让uv1和uv2成员也传入Shader。

 1 var v1 = base.graphic.canvas.additionalShaderChannels;
 2 var v2 = AdditionalCanvasShaderChannels.TexCoord1;   
 3 if ((v1 & v2) != v2)
 4 {
 5     base.graphic.canvas.additionalShaderChannels |= v2;
 6 }
 7 v2 = AdditionalCanvasShaderChannels.TexCoord2;
 8 if ((v1 & v2) != v2)
 9 {
10     base.graphic.canvas.additionalShaderChannels |= v2;
11 }

将原始UV框赋值给uv1和uv2成员

 1 var uvMin = _Min(v1.uv0, v2.uv0, v3.uv0);
 2 var uvMax = _Max(v1.uv0, v2.uv0, v3.uv0);
 3 vertex.uv1 = new Vector2(pUVOrigin.x, pUVOrigin.y);
 4 vertex.uv2 = new Vector2(pUVOrigin.z, pUVOrigin.w);
 5  
 6 private static Vector2 _Min(Vector2 pA, Vector2 pB, Vector2 pC)
 7 {
 8     return new Vector2(_Min(pA.x, pB.x, pC.x), _Min(pA.y, pB.y, pC.y));
 9 }
10  
11  
12 private static Vector2 _Max(Vector2 pA, Vector2 pB, Vector2 pC)
13 {
14     return new Vector2(_Max(pA.x, pB.x, pC.x), _Max(pA.y, pB.y, pC.y));
15 }

然后在Shader的顶点着色器中获取它：

 1 struct appdata
 2 {
 3     // 省略
 4     float2 texcoord1 : TEXCOORD1;
 5     float2 texcoord2 : TEXCOORD2;
 6 };
 7  
 8 struct v2f
 9 {
10     // 省略
11     float2 uvOriginXY : TEXCOORD1;
12     float2 uvOriginZW : TEXCOORD2;
13 };
14  
15 v2f vert(appdata IN)
16 {
17     // 省略
18     o.uvOriginXY = IN.texcoord1;
19     o.uvOriginZW = IN.texcoord2;
20     // 省略
21 }

添加判定函数：判定一个点是否在给定矩形框内，可以用到内置的step函数。它常用于作比较，替代if/else语句提高效率。它的逻辑是：顺序给定两个参数a和b，如果 a > b 返回0，否则返回1。

1 fixed IsInRect(float2 pPos, float2 pClipRectXY, float2 pClipRectZW)
2 {
3     pPos = step(pClipRectXY, pPos) * step(pPos, pClipRectZW);
4     return pPos.x * pPos.y;
5 }

然后在采样和像素着色器中添加对它的调用：

 1 fixed SampleAlpha(int pIndex, v2f IN)
 2 {
 3     // 省略
 4     return IsInRect(pos, IN.uvOriginXY, IN.uvOriginZW) * (tex2D(_MainTex, pos) + _TextureSampleAdd).w * _OutlineColor.w;
 5 }
 6  
 7 fixed4 frag(v2f IN) : SV_Target
 8 {
 9     // 省略
10     if (_OutlineWidth > 0) 
11     {
12         color.w *= IsInRect(IN.texcoord, IN.uvOriginXY, IN.uvOriginZW);
13         // 省略
14     }
15 }

最终代码

那么现在就可以得到最终效果了。在我的代码中，对每个像素做了12次采样。如果美术要求对大图片进行比较粗的描边，需要增加采样次数。当然，如果字本身小，也可以降低次数。

由于这个Shader是给UI用的，所以需要将UI-Default.shader中的一些属性和设置复制到我们的Shader中。

  1 //————————————————————————————————————————————
  2 //  OutlineEx.cs
  3 //
  4 //  Created by Chiyu Ren on 2018/9/12 23:03:51
  5 //————————————————————————————————————————————
  6 using UnityEngine;
  7 using UnityEngine.UI;
  8 using System.Collections.Generic;
  9  
 10  
 11 namespace TooSimpleFramework.UI
 12 {
 13     /// <summary>
 14     /// UGUI描边
 15     /// </summary>
 16     public class OutlineEx : BaseMeshEffect
 17     {
 18         public Color OutlineColor = Color.white;
 19         [Range(0, 6)]
 20         public int OutlineWidth = 0;
 21  
 22         private static List<UIVertex> m_VetexList = new List<UIVertex>();
 23  
 24  
 25         protected override void Start()
 26         {
 27             base.Start();
 28  
 29             var shader = Shader.Find("TSF Shaders/UI/OutlineEx");
 30             base.graphic.material = new Material(shader);
 31  
 32             var v1 = base.graphic.canvas.additionalShaderChannels;
 33             var v2 = AdditionalCanvasShaderChannels.TexCoord1;
 34             if ((v1 & v2) != v2)
 35             {
 36                 base.graphic.canvas.additionalShaderChannels |= v2;
 37             }
 38             v2 = AdditionalCanvasShaderChannels.TexCoord2;
 39             if ((v1 & v2) != v2)
 40             {
 41                 base.graphic.canvas.additionalShaderChannels |= v2;
 42             }
 43  
 44             this._Refresh();
 45         }
 46  
 47  
 48 #if UNITY_EDITOR
 49         protected override void OnValidate()
 50         {
 51             base.OnValidate();
 52  
 53             if (base.graphic.material != null)
 54             {
 55                 this._Refresh();
 56             }
 57         }
 58 #endif
 59  
 60  
 61         private void _Refresh()
 62         {
 63             base.graphic.material.SetColor("_OutlineColor", this.OutlineColor);
 64             base.graphic.material.SetInt("_OutlineWidth", this.OutlineWidth);
 65             base.graphic.SetVerticesDirty();
 66         }
 67  
 68  
 69         public override void ModifyMesh(VertexHelper vh)
 70         {
 71             vh.GetUIVertexStream(m_VetexList);
 72  
 73             this._ProcessVertices();
 74  
 75             vh.Clear();
 76             vh.AddUIVertexTriangleStream(m_VetexList);
 77         }
 78  
 79  
 80         private void _ProcessVertices()
 81         {
 82             for (int i = 0, count = m_VetexList.Count - 3; i <= count; i += 3)
 83             {
 84                 var v1 = m_VetexList[i];
 85                 var v2 = m_VetexList[i + 1];
 86                 var v3 = m_VetexList[i + 2];
 87                 // 计算原顶点坐标中心点
 88                 //
 89                 var minX = _Min(v1.position.x, v2.position.x, v3.position.x);
 90                 var minY = _Min(v1.position.y, v2.position.y, v3.position.y);
 91                 var maxX = _Max(v1.position.x, v2.position.x, v3.position.x);
 92                 var maxY = _Max(v1.position.y, v2.position.y, v3.position.y);
 93                 var posCenter = new Vector2(minX + maxX, minY + maxY) * 0.5f;
 94                 // 计算原始顶点坐标和UV的方向
 95                 //
 96                 Vector2 triX, triY, uvX, uvY;
 97                 Vector2 pos1 = v1.position;
 98                 Vector2 pos2 = v2.position;
 99                 Vector2 pos3 = v3.position;
100                 if (Mathf.Abs(Vector2.Dot((pos2 - pos1).normalized, Vector2.right))
101                     > Mathf.Abs(Vector2.Dot((pos3 - pos2).normalized, Vector2.right)))
102                 {
103                     triX = pos2 - pos1;
104                     triY = pos3 - pos2;
105                     uvX = v2.uv0 - v1.uv0;
106                     uvY = v3.uv0 - v2.uv0;
107                 }
108                 else
109                 {
110                     triX = pos3 - pos2;
111                     triY = pos2 - pos1;
112                     uvX = v3.uv0 - v2.uv0;
113                     uvY = v2.uv0 - v1.uv0;
114                 }
115                 // 计算原始UV框
116                 //
117                 var uvMin = _Min(v1.uv0, v2.uv0, v3.uv0);
118                 var uvMax = _Max(v1.uv0, v2.uv0, v3.uv0);
119                 var uvOrigin = new Vector4(uvMin.x, uvMin.y, uvMax.x, uvMax.y);
120                 // 为每个顶点设置新的Position和UV，并传入原始UV框
121                 //
122                 v1 = _SetNewPosAndUV(v1, this.OutlineWidth, posCenter, triX, triY, uvX, uvY, uvOrigin);
123                 v2 = _SetNewPosAndUV(v2, this.OutlineWidth, posCenter, triX, triY, uvX, uvY, uvOrigin);
124                 v3 = _SetNewPosAndUV(v3, this.OutlineWidth, posCenter, triX, triY, uvX, uvY, uvOrigin);
125                 // 应用设置后的UIVertex
126                 //
127                 m_VetexList[i] = v1;
128                 m_VetexList[i + 1] = v2;
129                 m_VetexList[i + 2] = v3;
130             }
131         }
132  
133  
134         private static UIVertex _SetNewPosAndUV(UIVertex pVertex, int pOutLineWidth,
135             Vector2 pPosCenter,
136             Vector2 pTriangleX, Vector2 pTriangleY,
137             Vector2 pUVX, Vector2 pUVY,
138             Vector4 pUVOrigin)
139         {
140             // Position
141             var pos = pVertex.position;
142             var posXOffset = pos.x > pPosCenter.x ? pOutLineWidth : -pOutLineWidth;
143             var posYOffset = pos.y > pPosCenter.y ? pOutLineWidth : -pOutLineWidth;
144             pos.x += posXOffset;
145             pos.y += posYOffset;
146             pVertex.position = pos;
147             // UV
148             var uv = pVertex.uv0;
149             uv += pUVX / pTriangleX.magnitude * posXOffset * (Vector2.Dot(pTriangleX, Vector2.right) > 0 ? 1 : -1);
150             uv += pUVY / pTriangleY.magnitude * posYOffset * (Vector2.Dot(pTriangleY, Vector2.up) > 0 ? 1 : -1);
151             pVertex.uv0 = uv;
152             // 原始UV框
153             pVertex.uv1 = new Vector2(pUVOrigin.x, pUVOrigin.y);
154             pVertex.uv2 = new Vector2(pUVOrigin.z, pUVOrigin.w);
155  
156             return pVertex;
157         }
158  
159  
160         private static float _Min(float pA, float pB, float pC)
161         {
162             return Mathf.Min(Mathf.Min(pA, pB), pC);
163         }
164  
165  
166         private static float _Max(float pA, float pB, float pC)
167         {
168             return Mathf.Max(Mathf.Max(pA, pB), pC);
169         }
170  
171  
172         private static Vector2 _Min(Vector2 pA, Vector2 pB, Vector2 pC)
173         {
174             return new Vector2(_Min(pA.x, pB.x, pC.x), _Min(pA.y, pB.y, pC.y));
175         }
176  
177  
178         private static Vector2 _Max(Vector2 pA, Vector2 pB, Vector2 pC)
179         {
180             return new Vector2(_Max(pA.x, pB.x, pC.x), _Max(pA.y, pB.y, pC.y));
181         }
182     }
183 }

Shader

  1 Shader "TSF Shaders/UI/OutlineEx" 
  2 {
  3     Properties
  4     {
  5         _MainTex ("Main Texture", 2D) = "white" {}
  6         _Color ("Tint", Color) = (1, 1, 1, 1)
  7         _OutlineColor ("Outline Color", Color) = (1, 1, 1, 1)
  8         _OutlineWidth ("Outline Width", Int) = 1
  9  
 10         _StencilComp ("Stencil Comparison", Float) = 8
 11         _Stencil ("Stencil ID", Float) = 0
 12         _StencilOp ("Stencil Operation", Float) = 0
 13         _StencilWriteMask ("Stencil Write Mask", Float) = 255
 14         _StencilReadMask ("Stencil Read Mask", Float) = 255
 15  
 16         _ColorMask ("Color Mask", Float) = 15
 17  
 18         [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
 19     }
 20  
 21     SubShader
 22     {
 23         Tags
 24         { 
 25             "Queue"="Transparent" 
 26             "IgnoreProjector"="True" 
 27             "RenderType"="Transparent" 
 28             "PreviewType"="Plane"
 29             "CanUseSpriteAtlas"="True"
 30         }
 31         
 32         Stencil
 33         {
 34             Ref [_Stencil]
 35             Comp [_StencilComp]
 36             Pass [_StencilOp] 
 37             ReadMask [_StencilReadMask]
 38             WriteMask [_StencilWriteMask]
 39         }
 40  
 41         Cull Off
 42         Lighting Off
 43         ZWrite Off
 44         ZTest [unity_GUIZTestMode]
 45         Blend SrcAlpha OneMinusSrcAlpha
 46         ColorMask [_ColorMask]
 47  
 48         Pass
 49         {
 50             Name "OUTLINE"
 51  
 52             CGPROGRAM
 53             #pragma vertex vert
 54             #pragma fragment frag
 55  
 56             sampler2D _MainTex;
 57             fixed4 _Color;
 58             fixed4 _TextureSampleAdd;
 59             float4 _MainTex_TexelSize;
 60  
 61             float4 _OutlineColor;
 62             int _OutlineWidth;
 63  
 64             struct appdata
 65             {
 66                 float4 vertex : POSITION;
 67                 float2 texcoord : TEXCOORD0;
 68                 float2 texcoord1 : TEXCOORD1;
 69                 float2 texcoord2 : TEXCOORD2;
 70                 fixed4 color : COLOR;
 71             };
 72  
 73             struct v2f
 74             {
 75                 float4 vertex : SV_POSITION;
 76                 float2 texcoord : TEXCOORD0;
 77                 float2 uvOriginXY : TEXCOORD1;
 78                 float2 uvOriginZW : TEXCOORD2;
 79                 fixed4 color : COLOR;
 80             };
 81  
 82             v2f vert(appdata IN)
 83             {
 84                 v2f o;
 85  
 86                 o.vertex = UnityObjectToClipPos(IN.vertex);
 87                 o.texcoord = IN.texcoord;
 88                 o.uvOriginXY = IN.texcoord1;
 89                 o.uvOriginZW = IN.texcoord2;
 90                 o.color = IN.color * _Color;
 91  
 92                 return o;
 93             }
 94  
 95             fixed IsInRect(float2 pPos, float2 pClipRectXY, float2 pClipRectZW)
 96             {
 97                 pPos = step(pClipRectXY, pPos) * step(pPos, pClipRectZW);
 98                 return pPos.x * pPos.y;
 99             }
100  
101             fixed SampleAlpha(int pIndex, v2f IN)
102             {
103                 const fixed sinArray[12] = { 0, 0.5, 0.866, 1, 0.866, 0.5, 0, -0.5, -0.866, -1, -0.866, -0.5 };
104                 const fixed cosArray[12] = { 1, 0.866, 0.5, 0, -0.5, -0.866, -1, -0.866, -0.5, 0, 0.5, 0.866 };
105                 float2 pos = IN.texcoord + _MainTex_TexelSize.xy * float2(cosArray[pIndex], sinArray[pIndex]) * _OutlineWidth;
106                 return IsInRect(pos, IN.uvOriginXY, IN.uvOriginZW) * (tex2D(_MainTex, pos) + _TextureSampleAdd).w * _OutlineColor.w;
107             }
108  
109             fixed4 frag(v2f IN) : SV_Target
110             {
111                 fixed4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
112                 if (_OutlineWidth > 0) 
113                 {
114                     color.w *= IsInRect(IN.texcoord, IN.uvOriginXY, IN.uvOriginZW);
115                     half4 val = half4(_OutlineColor.x, _OutlineColor.y, _OutlineColor.z, 0);
116  
117                     val.w += SampleAlpha(0, IN);
118                     val.w += SampleAlpha(1, IN);
119                     val.w += SampleAlpha(2, IN);
120                     val.w += SampleAlpha(3, IN);
121                     val.w += SampleAlpha(4, IN);
122                     val.w += SampleAlpha(5, IN);
123                     val.w += SampleAlpha(6, IN);
124                     val.w += SampleAlpha(7, IN);
125                     val.w += SampleAlpha(8, IN);
126                     val.w += SampleAlpha(9, IN);
127                     val.w += SampleAlpha(10, IN);
128                     val.w += SampleAlpha(11, IN);
129  
130                     val.w = clamp(val.w, 0, 1);
131                     color = (val * (1.0 - color.a)) + (color * color.a);
132                 }
133                 return color;
134             }
135             ENDCG
136         }
137     }
138 }

最终效果：Shader

优化点

可以看到在最后的像素着色器中使用了if语句。因为我比较菜，写出来的颜色混合算法在描边宽度为0的时候看起来效果很不好。

如果有大神能提供一个更优的算法，欢迎在评论中把我批判一番。把if语句去掉，可以提升一定的性能。

还有一点是，如果将图片或文字本身的透明度设为0，并不能得到镂空的效果。如果美术提出要这个效果，请毫不犹豫打死（误

最后一点，仔细观察上面最终效果的Ass，可以发现它们的字符本身被后一个字符的描边覆盖了一部分。使用两个Pass可以解决，一个只绘制描边，另一个只绘制本身。

Pass1

1 fixed4 frag(v2f IN) : SV_Target
2 {
3     // 省略
4     val.w = clamp(val.w, 0, 1);
5     return val;
6 }

Pass2

1 fixed4 frag(v2f IN) : SV_Target
2 {
3     fixed4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
4     color.w *= IsInRect(IN.texcoord, IN.uvOriginXY, IN.uvOriginZW);
5     return color;
6 }