【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的屬性中：

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

采樣坐標用圓的參數方程計算。在Shader中進行三角函數運算比較吃性能，並且這里采樣的角度是固定的，所以我們可以把坐標直接寫死。在Shader中添加采樣的函數。因為最終進行顏色混合的時候只需要用到alpha值，所以函數不返回rgb：

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

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

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

接下來，在Unity中新建一個材質球，把Shader賦上去，掛在一個UGUI組件上，然后調整描邊顏色和寬度，可以看到效果：

可以看到描邊已經出現了，但是超出圖片范圍的部分被裁減掉了。所以接下來，我們需要對圖片的區域進行調整，保證描邊的部分也被包含在區域內。

---

在C#層進行區域擴展

要擴展區域，就得修改頂點。Unity提供了BaseMeshEffect類供開發者對UI組件的頂點進行修改。

創建一個OutlineEx類，繼承於BaseMeshEffect類，實現其中的ModifyMesh(VertexHelper)方法。參數VertexHelper類提供了GetUIVertexStream(List<UIVertex>)和AddUIVertexTriangleStream(List<UIVertex>)方法用於獲取和設置UI物件的頂點。

這里我們可以把參數需要的List提出來做成靜態變量，這樣能夠避免每次ModifyMesh調用時創建List對象。

public class OutlineEx : BaseMeshEffect
{
    public Color OutlineColor = Color.white;
    [Range(0, 6)]
    public int OutlineWidth = 0;
 
    private static List<UIVertex> m_VetexList = new List<UIVertex>();
 
 
    protected override void Awake()
    {
        base.Awake();
 
        var shader = Shader.Find("TSF Shaders/UI/OutlineEx");
        base.graphic.material = new Material(shader);
 
        var v1 = base.graphic.canvas.additionalShaderChannels;
        var v2 = AdditionalCanvasShaderChannels.Tangent;
        if ((v1 & v2) != v2)
        {
            base.graphic.canvas.additionalShaderChannels |= v2;
        }
        this._Refresh();
    }
 
 
#if UNITY_EDITOR
    protected override void OnValidate()
    {
        base.OnValidate();
 
        if (base.graphic.material != null)
        {
            this._Refresh();
        }
    }
#endif
 
 
    private void _Refresh()
    {
        base.graphic.material.SetColor("_OutlineColor", this.OutlineColor);
        base.graphic.material.SetInt("_OutlineWidth", this.OutlineWidth);
        base.graphic.SetVerticesDirty();
    }
 
 
    public override void ModifyMesh(VertexHelper vh)
    {
        vh.GetUIVertexStream(m_VetexList);
 
        this._ProcessVertices();
 
        vh.Clear();
        vh.AddUIVertexTriangleStream(m_VetexList);
    }
 
 
    private void _ProcessVertices()
    {
        // TODO: 處理頂點
    }
}

現在已經可以獲取到所有的頂點信息了。接下來我們對它進行外擴。

我們知道每三個頂點構成一個三角形，所以需要對構成三角形的三個頂點進行處理，並且要將它的UV坐標（決定圖片在圖集中的范圍）也做對應的外擴，否則從視覺上看起來就只是圖片被放大了一點點。

於是完成_ProcessVertices方法：

private void _ProcessVertices()
{
    for (int i = 0, count = m_VetexList.Count - 3; i <= count; i += 3)
    {
        var v1 = m_VetexList[i];
        var v2 = m_VetexList[i + 1];
        var v3 = m_VetexList[i + 2];
        // 計算原頂點坐標中心點
        //
        var minX = _Min(v1.position.x, v2.position.x, v3.position.x);
        var minY = _Min(v1.position.y, v2.position.y, v3.position.y);
        var maxX = _Max(v1.position.x, v2.position.x, v3.position.x);
        var maxY = _Max(v1.position.y, v2.position.y, v3.position.y);
        var posCenter = new Vector2(minX + maxX, minY + maxY) * 0.5f;
        // 計算原始頂點坐標和UV的方向
        //
        Vector2 triX, triY, uvX, uvY;
        Vector2 pos1 = v1.position;
        Vector2 pos2 = v2.position;
        Vector2 pos3 = v3.position;
        if (Mathf.Abs(Vector2.Dot((pos2 - pos1).normalized, Vector2.right))
            > Mathf.Abs(Vector2.Dot((pos3 - pos2).normalized, Vector2.right)))
        {
            triX = pos2 - pos1;
            triY = pos3 - pos2;
            uvX = v2.uv0 - v1.uv0;
            uvY = v3.uv0 - v2.uv0;
        }
        else
        {
            triX = pos3 - pos2;
            triY = pos2 - pos1;
            uvX = v3.uv0 - v2.uv0;
            uvY = v2.uv0 - v1.uv0;
        }
        // 為每個頂點設置新的Position和UV
        //
        v1 = _SetNewPosAndUV(v1, this.OutlineWidth, posCenter, triX, triY, uvX, uvY);
        v2 = _SetNewPosAndUV(v2, this.OutlineWidth, posCenter, triX, triY, uvX, uvY);
        v3 = _SetNewPosAndUV(v3, this.OutlineWidth, posCenter, triX, triY, uvX, uvY);
        // 應用設置后的UIVertex
        //
        m_VetexList[i] = v1;
        m_VetexList[i + 1] = v2;
        m_VetexList[i + 2] = v3;
    }
}
 
 
private static UIVertex _SetNewPosAndUV(UIVertex pVertex, int pOutLineWidth,
    Vector2 pPosCenter,
    Vector2 pTriangleX, Vector2 pTriangleY,
    Vector2 pUVX, Vector2 pUVY)
{
    // Position
    var pos = pVertex.position;
    var posXOffset = pos.x > pPosCenter.x ? pOutLineWidth : -pOutLineWidth;
    var posYOffset = pos.y > pPosCenter.y ? pOutLineWidth : -pOutLineWidth;
    pos.x += posXOffset;
    pos.y += posYOffset;
    pVertex.position = pos;
    // UV
    var uv = pVertex.uv0;
    uv += pUVX / pTriangleX.magnitude * posXOffset * (Vector2.Dot(pTriangleX, Vector2.right) > 0 ? 1 : -1);
    uv += pUVY / pTriangleY.magnitude * posYOffset * (Vector2.Dot(pTriangleY, Vector2.up) > 0 ? 1 : -1);
    pVertex.uv0 = uv;
 
    return pVertex;
}
 
 
private static float _Min(float pA, float pB, float pC)
{
    return Mathf.Min(Mathf.Min(pA, pB), pC);
}
 
 
private static float _Max(float pA, float pB, float pC)
{
    return Mathf.Max(Mathf.Max(pA, pB), pC);
}

 

OJ8K，現在范圍已經被擴大，可以看到上下左右四個邊的描邊寬度沒有被裁掉了。然后可以在編輯器中調整描邊顏色和寬度，可以看到效果：

---

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

在上一步的效果圖中，我們可以注意到圖片的邊界出現了被拉伸的部分。如果使用了圖集或字體，在UV擴大后圖片附近的像素也會被包含進來。為什么會變成這樣呢？（先打死）

因為前面說過，UV裁剪框就相當於圖集中每個小圖的范圍。直接擴大必然會包含到小圖鄰接的圖的像素。所以這一步我們需要對最終繪制出的圖進行裁剪，保證這些不要的像素不被畫出來。

裁剪的邏輯也很簡單。如果該像素處於被擴大前的UV范圍外，則設置它的alpha為0。這一步需要放在像素着色器中完成。如何將原始UV區域傳進Shader是一個問題。對於Text組件，所有字符的頂點都會進入Shader處理，所以在Shader中添加屬性是不現實的。

好在Unity為我們提供了門路，可以看UIVertex結構體的成員：

public struct UIVertex
{
    public static UIVertex simpleVert;
    public Vector3 position;
    public Vector3 normal;
    public Color32 color;
    public Vector2 uv0;
    public Vector2 uv1;
    public Vector2 uv2;
    public Vector2 uv3;
    public Vector4 tangent;
}

 

當然，你想把數據分別放在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。

var v1 = base.graphic.canvas.additionalShaderChannels;
var v2 = AdditionalCanvasShaderChannels.TexCoord1;   
if ((v1 & v2) != v2)
{
    base.graphic.canvas.additionalShaderChannels |= v2;
}
v2 = AdditionalCanvasShaderChannels.TexCoord2;
if ((v1 & v2) != v2)
{
    base.graphic.canvas.additionalShaderChannels |= v2;
}

將原始UV框賦值給uv1和uv2成員

var uvMin = _Min(v1.uv0, v2.uv0, v3.uv0);
var uvMax = _Max(v1.uv0, v2.uv0, v3.uv0);
vertex.uv1 = new Vector2(pUVOrigin.x, pUVOrigin.y);
vertex.uv2 = new Vector2(pUVOrigin.z, pUVOrigin.w);
 
private static Vector2 _Min(Vector2 pA, Vector2 pB, Vector2 pC)
{
    return new Vector2(_Min(pA.x, pB.x, pC.x), _Min(pA.y, pB.y, pC.y));
}
 
 
private static Vector2 _Max(Vector2 pA, Vector2 pB, Vector2 pC)
{
    return new Vector2(_Max(pA.x, pB.x, pC.x), _Max(pA.y, pB.y, pC.y));
}

然后在Shader的頂點着色器中獲取它：

struct appdata
{
    // 省略
    float2 texcoord1 : TEXCOORD1;
    float2 texcoord2 : TEXCOORD2;
};
 
struct v2f
{
    // 省略
    float2 uvOriginXY : TEXCOORD1;
    float2 uvOriginZW : TEXCOORD2;
};
 
v2f vert(appdata IN)
{
    // 省略
    o.uvOriginXY = IN.texcoord1;
    o.uvOriginZW = IN.texcoord2;
    // 省略
}

 

添加判定函數：判定一個點是否在給定矩形框內，可以用到內置的step函數。它常用於作比較，替代if/else語句提高效率。它的邏輯是：順序給定兩個參數a和b，如果 a > b 返回0，否則返回1。

fixed IsInRect(float2 pPos, float2 pClipRectXY, float2 pClipRectZW)
{
    pPos = step(pClipRectXY, pPos) * step(pPos, pClipRectZW);
    return pPos.x * pPos.y;
}

然后在采樣和像素着色器中添加對它的調用：

fixed SampleAlpha(int pIndex, v2f IN)
{
    // 省略
    return IsInRect(pos, IN.uvOriginXY, IN.uvOriginZW) * (tex2D(_MainTex, pos) + _TextureSampleAdd).w * _OutlineColor.w;
}
 
fixed4 frag(v2f IN) : SV_Target
{
    // 省略
    if (_OutlineWidth > 0) 
    {
        color.w *= IsInRect(IN.texcoord, IN.uvOriginXY, IN.uvOriginZW);
        // 省略
    }
}

 

最終代碼

---

那么現在就可以得到最終效果了。在我的代碼中，對每個像素做了12次采樣。如果美術要求對大圖片進行比較粗的描邊，需要增加采樣次數。當然，如果字本身小，也可以降低次數。

由於這個Shader是給UI用的，所以需要將UI-Default.shader中的一些屬性和設置復制到我們的Shader中。

//————————————————————————————————————————————
//  OutlineEx.cs
//
//  Created by Chiyu Ren on 2018/9/12 23:03:51
//————————————————————————————————————————————
using UnityEngine;
using UnityEngine.UI;
using System.Collections.Generic;
 
 
namespace TooSimpleFramework.UI
{
    /// <summary>
    /// UGUI描邊
    /// </summary>
    public class OutlineEx : BaseMeshEffect
    {
        public Color OutlineColor = Color.white;
        [Range(0, 6)]
        public int OutlineWidth = 0;
 
        private static List<UIVertex> m_VetexList = new List<UIVertex>();
 
 
        protected override void Start()
        {
            base.Start();
 
            var shader = Shader.Find("TSF Shaders/UI/OutlineEx");
            base.graphic.material = new Material(shader);
 
            var v1 = base.graphic.canvas.additionalShaderChannels;
            var v2 = AdditionalCanvasShaderChannels.TexCoord1;
            if ((v1 & v2) != v2)
            {
                base.graphic.canvas.additionalShaderChannels |= v2;
            }
            v2 = AdditionalCanvasShaderChannels.TexCoord2;
            if ((v1 & v2) != v2)
            {
                base.graphic.canvas.additionalShaderChannels |= v2;
            }
 
            this._Refresh();
        }
 
 
#if UNITY_EDITOR
        protected override void OnValidate()
        {
            base.OnValidate();
 
            if (base.graphic.material != null)
            {
                this._Refresh();
            }
        }
#endif
 
 
        private void _Refresh()
        {
            base.graphic.material.SetColor("_OutlineColor", this.OutlineColor);
            base.graphic.material.SetInt("_OutlineWidth", this.OutlineWidth);
            base.graphic.SetVerticesDirty();
        }
 
 
        public override void ModifyMesh(VertexHelper vh)
        {
            vh.GetUIVertexStream(m_VetexList);
 
            this._ProcessVertices();
 
            vh.Clear();
            vh.AddUIVertexTriangleStream(m_VetexList);
        }
 
 
        private void _ProcessVertices()
        {
            for (int i = 0, count = m_VetexList.Count - 3; i <= count; i += 3)
            {
                var v1 = m_VetexList[i];
                var v2 = m_VetexList[i + 1];
                var v3 = m_VetexList[i + 2];
                // 計算原頂點坐標中心點
                //
                var minX = _Min(v1.position.x, v2.position.x, v3.position.x);
                var minY = _Min(v1.position.y, v2.position.y, v3.position.y);
                var maxX = _Max(v1.position.x, v2.position.x, v3.position.x);
                var maxY = _Max(v1.position.y, v2.position.y, v3.position.y);
                var posCenter = new Vector2(minX + maxX, minY + maxY) * 0.5f;
                // 計算原始頂點坐標和UV的方向
                //
                Vector2 triX, triY, uvX, uvY;
                Vector2 pos1 = v1.position;
                Vector2 pos2 = v2.position;
                Vector2 pos3 = v3.position;
                if (Mathf.Abs(Vector2.Dot((pos2 - pos1).normalized, Vector2.right))
                    > Mathf.Abs(Vector2.Dot((pos3 - pos2).normalized, Vector2.right)))
                {
                    triX = pos2 - pos1;
                    triY = pos3 - pos2;
                    uvX = v2.uv0 - v1.uv0;
                    uvY = v3.uv0 - v2.uv0;
                }
                else
                {
                    triX = pos3 - pos2;
                    triY = pos2 - pos1;
                    uvX = v3.uv0 - v2.uv0;
                    uvY = v2.uv0 - v1.uv0;
                }
                // 計算原始UV框
                //
                var uvMin = _Min(v1.uv0, v2.uv0, v3.uv0);
                var uvMax = _Max(v1.uv0, v2.uv0, v3.uv0);
                var uvOrigin = new Vector4(uvMin.x, uvMin.y, uvMax.x, uvMax.y);
                // 為每個頂點設置新的Position和UV，並傳入原始UV框
                //
                v1 = _SetNewPosAndUV(v1, this.OutlineWidth, posCenter, triX, triY, uvX, uvY, uvOrigin);
                v2 = _SetNewPosAndUV(v2, this.OutlineWidth, posCenter, triX, triY, uvX, uvY, uvOrigin);
                v3 = _SetNewPosAndUV(v3, this.OutlineWidth, posCenter, triX, triY, uvX, uvY, uvOrigin);
                // 應用設置后的UIVertex
                //
                m_VetexList[i] = v1;
                m_VetexList[i + 1] = v2;
                m_VetexList[i + 2] = v3;
            }
        }
 
 
        private static UIVertex _SetNewPosAndUV(UIVertex pVertex, int pOutLineWidth,
            Vector2 pPosCenter,
            Vector2 pTriangleX, Vector2 pTriangleY,
            Vector2 pUVX, Vector2 pUVY,
            Vector4 pUVOrigin)
        {
            // Position
            var pos = pVertex.position;
            var posXOffset = pos.x > pPosCenter.x ? pOutLineWidth : -pOutLineWidth;
            var posYOffset = pos.y > pPosCenter.y ? pOutLineWidth : -pOutLineWidth;
            pos.x += posXOffset;
            pos.y += posYOffset;
            pVertex.position = pos;
            // UV
            var uv = pVertex.uv0;
            uv += pUVX / pTriangleX.magnitude * posXOffset * (Vector2.Dot(pTriangleX, Vector2.right) > 0 ? 1 : -1);
            uv += pUVY / pTriangleY.magnitude * posYOffset * (Vector2.Dot(pTriangleY, Vector2.up) > 0 ? 1 : -1);
            pVertex.uv0 = uv;
            // 原始UV框
            pVertex.uv1 = new Vector2(pUVOrigin.x, pUVOrigin.y);
            pVertex.uv2 = new Vector2(pUVOrigin.z, pUVOrigin.w);
 
            return pVertex;
        }
 
 
        private static float _Min(float pA, float pB, float pC)
        {
            return Mathf.Min(Mathf.Min(pA, pB), pC);
        }
 
 
        private static float _Max(float pA, float pB, float pC)
        {
            return Mathf.Max(Mathf.Max(pA, pB), pC);
        }
 
 
        private static Vector2 _Min(Vector2 pA, Vector2 pB, Vector2 pC)
        {
            return new Vector2(_Min(pA.x, pB.x, pC.x), _Min(pA.y, pB.y, pC.y));
        }
 
 
        private static Vector2 _Max(Vector2 pA, Vector2 pB, Vector2 pC)
        {
            return new Vector2(_Max(pA.x, pB.x, pC.x), _Max(pA.y, pB.y, pC.y));
        }
    }
}

Shader

Shader "TSF Shaders/UI/OutlineEx" 
{
    Properties
    {
        _MainTex ("Main Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1, 1, 1, 1)
        _OutlineColor ("Outline Color", Color) = (1, 1, 1, 1)
        _OutlineWidth ("Outline Width", Int) = 1
 
        _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 "OUTLINE"
 
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
 
            sampler2D _MainTex;
            fixed4 _Color;
            fixed4 _TextureSampleAdd;
            float4 _MainTex_TexelSize;
 
            float4 _OutlineColor;
            int _OutlineWidth;
 
            struct appdata
            {
                float4 vertex : POSITION;
                float2 texcoord : TEXCOORD0;
                float2 texcoord1 : TEXCOORD1;
                float2 texcoord2 : TEXCOORD2;
                fixed4 color : COLOR;
            };
 
            struct v2f
            {
                float4 vertex : SV_POSITION;
                float2 texcoord : TEXCOORD0;
                float2 uvOriginXY : TEXCOORD1;
                float2 uvOriginZW : TEXCOORD2;
                fixed4 color : COLOR;
            };
 
            v2f vert(appdata IN)
            {
                v2f o;
 
                o.vertex = UnityObjectToClipPos(IN.vertex);
                o.texcoord = IN.texcoord;
                o.uvOriginXY = IN.texcoord1;
                o.uvOriginZW = IN.texcoord2;
                o.color = IN.color * _Color;
 
                return o;
            }
 
            fixed IsInRect(float2 pPos, float2 pClipRectXY, float2 pClipRectZW)
            {
                pPos = step(pClipRectXY, pPos) * step(pPos, pClipRectZW);
                return pPos.x * pPos.y;
            }
 
            fixed SampleAlpha(int pIndex, v2f IN)
            {
                const fixed sinArray[12] = { 0, 0.5, 0.866, 1, 0.866, 0.5, 0, -0.5, -0.866, -1, -0.866, -0.5 };
                const fixed cosArray[12] = { 1, 0.866, 0.5, 0, -0.5, -0.866, -1, -0.866, -0.5, 0, 0.5, 0.866 };
                float2 pos = IN.texcoord + _MainTex_TexelSize.xy * float2(cosArray[pIndex], sinArray[pIndex]) * _OutlineWidth;
                return IsInRect(pos, IN.uvOriginXY, IN.uvOriginZW) * (tex2D(_MainTex, pos) + _TextureSampleAdd).w * _OutlineColor.w;
            }
 
            fixed4 frag(v2f IN) : SV_Target
            {
                fixed4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
                if (_OutlineWidth > 0) 
                {
                    color.w *= IsInRect(IN.texcoord, IN.uvOriginXY, IN.uvOriginZW);
                    half4 val = half4(_OutlineColor.x, _OutlineColor.y, _OutlineColor.z, 0);
 
                    val.w += SampleAlpha(0, IN);
                    val.w += SampleAlpha(1, IN);
                    val.w += SampleAlpha(2, IN);
                    val.w += SampleAlpha(3, IN);
                    val.w += SampleAlpha(4, IN);
                    val.w += SampleAlpha(5, IN);
                    val.w += SampleAlpha(6, IN);
                    val.w += SampleAlpha(7, IN);
                    val.w += SampleAlpha(8, IN);
                    val.w += SampleAlpha(9, IN);
                    val.w += SampleAlpha(10, IN);
                    val.w += SampleAlpha(11, IN);
 
                    val.w = clamp(val.w, 0, 1);
                    color = (val * (1.0 - color.a)) + (color * color.a);
                }
                return color;
            }
            ENDCG
        }
    }
}

 

最終效果：Shader

---

優化點

可以看到在最后的像素着色器中使用了if語句。因為我比較菜，寫出來的顏色混合算法在描邊寬度為0的時候看起來效果很不好。

如果有大神能提供一個更優的算法，歡迎在評論中把我批判一番。把if語句去掉，可以提升一定的性能。

還有一點是，如果將圖片或文字本身的透明度設為0，並不能得到鏤空的效果。如果美術提出要這個效果，請毫不猶豫打死（誤

最后一點，仔細觀察上面最終效果的Ass，可以發現它們的字符本身被后一個字符的描邊覆蓋了一部分。使用兩個Pass可以解決，一個只繪制描邊，另一個只繪制本身。

Pass1

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

 

 Pass2

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