1. 項(xiàng)目概述為什么矩形描邊是個“技術(shù)活”在Unity里給一個矩形UI或者Sprite加個描邊乍一聽像是美術(shù)動動手指調(diào)個參數(shù)的事兒。但當(dāng)你真正動手尤其是在Shader層面去實(shí)現(xiàn)一個無間隙、高質(zhì)量的描邊時就會發(fā)現(xiàn)這潭水比想象中深。很多新手甚至是有經(jīng)驗(yàn)的開發(fā)者都曾卡在這個看似簡單的需求上描邊要么斷斷續(xù)續(xù)要么在拐角處糊成一團(tuán)要么在不同分辨率下粗細(xì)不一。這背后其實(shí)是圖形學(xué)中抗鋸齒Anti-Aliasing、像素對齊Pixel Alignment以及片元著色器Fragment Shader中距離計算等多個核心問題的集中體現(xiàn)。我最初遇到這個問題是在開發(fā)一個需要極致清晰UI的2D項(xiàng)目。美術(shù)提供的帶描邊素材在縮放或旋轉(zhuǎn)后邊緣總會出現(xiàn)難看的鋸齒或間隙直接使用Unity UI自帶的Outline組件又無法滿足自定義顏色、漸變、內(nèi)外描邊等靈活需求。于是轉(zhuǎn)向Shader成了必然選擇。一個自研的矩形無間隙描邊Shader不僅能完美解決視覺問題更能成為你Shader學(xué)習(xí)路上一個絕佳的“練手項(xiàng)目”因?yàn)樗鼛缀鹾w了從基礎(chǔ)向量運(yùn)算到高級邊緣檢測的所有關(guān)鍵概念。本文要實(shí)現(xiàn)的就是一個基于Shader的、可完全自定義的矩形描邊方案。它不依賴于任何第三方插件核心思路清晰代碼可讀性強(qiáng)并且我會把實(shí)現(xiàn)過程中踩過的每一個坑、每一個參數(shù)調(diào)整的“所以然”都講透。無論你是剛接觸Shader的新手想通過一個具體案例入門還是已經(jīng)有一定基礎(chǔ)想優(yōu)化自己的渲染效果這篇文章都能給你帶來直接的、可復(fù)現(xiàn)的參考價值。2. 核心思路拆解從“描邊”到“無間隙”實(shí)現(xiàn)描邊的Shader方法有很多比如基于法線擴(kuò)展、基于后處理Post-Processing的邊緣檢測、或者基于SDF有向距離場。但對于一個軸對齊的矩形無論是UI Image還是2D Sprite最高效、最清晰的方法是利用其幾何特性進(jìn)行基于距離的描邊。2.1 傳統(tǒng)描邊方法的局限在深入我們的方案前先快速回顧幾種常見方法為什么不適合“無間隙”這個高標(biāo)準(zhǔn)要求頂點(diǎn)膨脹法Vertex Expansion在頂點(diǎn)著色器中沿法線方向移動頂點(diǎn)。這對于平滑模型有效但對于矩形這種只有四個頂點(diǎn)的簡單模型描邊只會出現(xiàn)在四個邊上拐角處是絕對的直角當(dāng)描邊較粗時拐角會顯得非常生硬且內(nèi)部可能出現(xiàn)空洞無法實(shí)現(xiàn)“無間隙”的飽滿拐角。多重Pass渲染法用第一個Pass渲染填充色第二個Pass用稍微放大的相同模型渲染描邊色。這同樣受限于矩形本身的頂點(diǎn)數(shù)量放大的模型拐角處是拉伸的描邊不均勻且難以控制精確的像素寬度。后處理邊緣檢測如Sobel算子。這能獲得連續(xù)的邊緣但計算開銷大會影響全屏性能并且難以針對單個UI元素進(jìn)行獨(dú)立控制容易受到場景中其他物體的干擾。2.2 基于片元距離場的方案我們的核心方案是在片元著色器中為每一個像素計算其到矩形四條邊的距離然后根據(jù)這個距離來決定該像素是顯示為內(nèi)部填充色還是描邊色。這個方案的優(yōu)越性在于像素級精度計算在每個像素上獨(dú)立進(jìn)行與頂點(diǎn)數(shù)量無關(guān)從根本上保證了描邊在任意處的連續(xù)性。完美拐角通過計算到最近邊的距離拐角處自然形成圓滑或根據(jù)需求保持銳利的過渡實(shí)現(xiàn)“無間隙”。靈活控制描邊寬度、顏色、內(nèi)外描邊、甚至漸變描邊都可以通過簡單的參數(shù)和計算實(shí)現(xiàn)。性能高效計算僅涉及簡單的減法和min/max操作非常適合UI和2D Sprite這種每幀大量渲染的元素。核心計算公式思想 對于一個中心在(0,0)半寬為_RectWidth半高為_RectHeight的矩形其內(nèi)部區(qū)域可以用一個符號距離函數(shù)SDF來定義點(diǎn)p到矩形四條邊的帶符號距離。 更簡單直接的理解是對于一個位于矩形內(nèi)的像素其到最近邊的距離決定了它離“邊緣”有多遠(yuǎn)。如果這個距離小于我們設(shè)定的描邊寬度_OutlineWidth那么它就應(yīng)該被渲染為描邊色。3. Shader實(shí)現(xiàn)詳解從理論到代碼我們將編寫一個Unlit Shader它適用于Sprite或UI/Default。這里以Sprite為例因?yàn)槠銾V和像素空間的關(guān)系更直接。3.1 Shader屬性與變量定義首先在Properties塊中定義我們需要的參數(shù)這些參數(shù)可以在材質(zhì)面板中調(diào)節(jié)。Properties { [PerRendererData] _MainTex (Sprite Texture, 2D) white {} _Color (Tint, Color) (1,1,1,1) // 描邊專屬屬性 _OutlineColor (Outline Color, Color) (1,0,0,1) // 默認(rèn)紅色描邊 _OutlineWidth (Outline Width, Range(0, 0.5)) 0.05 // 寬度范圍相對于矩形尺寸的比例 _OutlineSharpness (Outline Sharpness, Range(0.01, 10)) 2.0 // 控制邊緣銳利度 // 矩形尺寸通常通過腳本傳遞也可手動調(diào)節(jié) _RectSize (Rect Size (Width, Height), Vector) (1, 1, 0, 0) [Toggle(USE_PIXEL_SNAP)] _PixelSnap (Pixel Snap, Float) 0 [HideInInspector] _RendererColor (RendererColor, Color) (1,1,1,1) [HideInInspector] _Flip (Flip, Vector) (1,1,1,1) }參數(shù)解析_OutlineWidth這是最關(guān)鍵的一個參數(shù)。注意它的范圍是[0, 0.5]。為什么是0.5因?yàn)槲覀冇嬎憔嚯x時通常將矩形的半寬/半高歸一化為1。描邊寬度如果超過0.5即半寬就可能從矩形的一邊“畫”到另一邊這通常不是我們想要的。這個值是一個比例值能保證在不同尺寸的矩形上描邊的視覺粗細(xì)比例是一致的。_OutlineSharpness用于在描邊和填充色之間進(jìn)行平滑插值smoothstep。值越大描邊到填充的過渡越生硬、銳利值越小過渡越平滑、有抗鋸齒效果但可能讓描邊看起來“發(fā)虛”。這個參數(shù)是調(diào)節(jié)視覺質(zhì)量的關(guān)鍵。_RectSize傳入矩形的實(shí)際寬高。我們將在頂點(diǎn)著色器或片元著色器中用它來將像素坐標(biāo)轉(zhuǎn)換到矩形的局部空間進(jìn)行正確的距離計算。3.2 頂點(diǎn)著色器準(zhǔn)備計算空間頂點(diǎn)著色器的主要任務(wù)是完成標(biāo)準(zhǔn)的坐標(biāo)變換并將計算描邊所需的關(guān)鍵數(shù)據(jù)傳遞給片元著色器。v2f vert(appdata_t IN) { v2f OUT; // 標(biāo)準(zhǔn)坐標(biāo)變換 OUT.vertex UnityObjectToClipPos(IN.vertex); OUT.texcoord IN.texcoord; OUT.color IN.color * _Color * _RendererColor; // 關(guān)鍵步驟將模型空間頂點(diǎn)坐標(biāo)轉(zhuǎn)換到矩形局部空間。 // 假設(shè)矩形中心在模型空間原點(diǎn)且無旋轉(zhuǎn)縮放由Transform組件控制。 // 我們需要矩形的“半尺寸”來進(jìn)行距離計算。 // 更穩(wěn)健的做法將世界空間或模型空間的尺寸信息傳遞進(jìn)來。 // 這里我們采用一種常見方法利用UV和紋理的Tiling/Offset來隱式定義矩形范圍。 // 但為了最清晰的理解我們假設(shè)UV(0,0)到(1,1)正好對應(yīng)矩形區(qū)域。 // 我們將UV中心化并映射到[-0.5, 0.5]的范圍然后根據(jù)_RectSize進(jìn)行縮放。 float2 centeredUV IN.texcoord - float2(0.5, 0.5); // UV中心化 OUT.localPos centeredUV * _RectSize; // 得到在矩形局部空間中的位置原點(diǎn)在中心 #ifdef USE_PIXEL_SNAP OUT.vertex UnityPixelSnap(OUT.vertex); #endif return OUT; }這里有一個非常重要的技巧和注意事項(xiàng)注意上面代碼中通過UV和_RectSize來計算localPos是一種簡化且有效的方法但它依賴于一個關(guān)鍵假設(shè)矩形的Mesh比如一個Quad的UV是完美從(0,0)鋪滿到(1,1)。對于Unity的默認(rèn)Sprite或UI Image這通常是成立的。但如果你使用自定義的Mesh就需要確保這一點(diǎn)。另一種更通用的方法是在腳本中將矩形的實(shí)際尺寸transform.lossyScale通過MaterialPropertyBlock傳遞給Shader。為了教程清晰我們先使用UV方法。3.3 片元著色器距離計算與顏色混合這是整個Shader的靈魂。我們將在片元著色器中為每個像素計算它到矩形四條邊的距離。fixed4 frag(v2f IN) : SV_Target { // 采樣主紋理顏色 fixed4 texColor tex2D(_MainTex, IN.texcoord) * IN.color; // 獲取當(dāng)前像素在矩形局部空間的位置 float2 p IN.localPos; // p.x, p.y 的范圍大約是 [-RectWidth/2, RectWidth/2] // 計算矩形半寬半高因?yàn)閘ocalPos已經(jīng)是縮放后的所以這里半寬半高就是_RectSize/2 // 不對我們需要重新思考。IN.localPos centeredUV * _RectSize。 // 當(dāng)UV為(0,0)時centeredUV (-0.5, -0.5), localPos (-0.5, -0.5) * _RectSize。 // 當(dāng)UV為(1,1)時centeredUV (0.5, 0.5), localPos (0.5, 0.5) * _RectSize。 // 因此矩形的實(shí)際邊界在 x ±(_RectSize.x/2), y ±(_RectSize.y/2)。 // 所以到右邊界的距離是(_RectSize.x/2) - abs(p.x) 不對p.x已經(jīng)是包含了_RectSize縮放的。 // 我們來推導(dǎo)p.x (uv.x - 0.5) * _RectSize.x。 // 矩形右邊界對應(yīng) uv.x1即 p.x 0.5 * _RectSize.x。 // 所以半寬 halfWidth _RectSize.x / 2。 // 那么點(diǎn)p到右邊界的距離為halfWidth - abs(p.x)。 // 但注意p.x可能超過halfWidth嗎對于UV在[0,1]內(nèi)的像素不會。但我們的Shader可能會處理超出范圍的像素比如為了描邊。 float halfWidth _RectSize.x * 0.5; float halfHeight _RectSize.y * 0.5; // 計算當(dāng)前像素到矩形四條邊的距離正值表示在內(nèi)部 float distToRight halfWidth - abs(p.x); float distToLeft distToRight; // 因?yàn)榫匦螌ΨQ實(shí)際上到左邊界距離等于到右邊界 // 更準(zhǔn)確地說到垂直方向最近邊的距離是 float distToVerticalEdge halfWidth - abs(p.x); float distToTop halfHeight - abs(p.y); float distToBottom distToTop; float distToHorizontalEdge halfHeight - abs(p.y); // 關(guān)鍵像素到矩形邊緣的最近距離是到垂直邊和水平邊距離的較小值。 // 想象一下矩形的拐角最近的距離是到那個角的斜邊嗎不對于軸對齊矩形內(nèi)部一點(diǎn)到邊緣的最近距離 // 就是 min(到左/右邊的距離 到上/下邊的距離)。 float distanceToEdge min(distToVerticalEdge, distToHorizontalEdge); // 現(xiàn)在distanceToEdge 這個值 // 0 點(diǎn)在矩形內(nèi)部 // 0 點(diǎn)正好在邊上 // 0 點(diǎn)在矩形外部因?yàn)閍bs(p.x)可能大于halfWidth // 實(shí)現(xiàn)描邊如果到邊緣的距離小于描邊寬度則顯示描邊色。 // 但_OutlineWidth是比例我們需要將其轉(zhuǎn)換為局部空間的實(shí)際距離單位。 // 定義描邊寬度 矩形半寬 * _OutlineWidth 還是矩形半高為了保持均勻我們應(yīng)該取一個基準(zhǔn)。 // 一個常見的做法是使用矩形的“最小半軸”作為基準(zhǔn)或者使用一個統(tǒng)一的視覺比例。 // 這里我們使用一個更直觀的方法將_OutlineWidth視為相對于矩形**尺寸**的比例。 // 我們需要一個基準(zhǔn)長度。通常使用矩形的半周長、或者min(halfWidth, halfHeight)。 // 但這樣在不同長寬比的矩形上描邊視覺粗細(xì)會不一致。 // 更好的方法是將_OutlineWidth直接解釋為在局部空間中的絕對距離單位。 // 那么我們讓用戶輸入的_OutlineWidth范圍是[0, 0.5]其實(shí)際距離 _OutlineWidth * min(halfWidth, halfHeight) * 2 太復(fù)雜。 // 經(jīng)過實(shí)踐最穩(wěn)定且直觀的方案是 // 將用戶輸入的_OutlineWidth視為**相對于矩形最小邊長度**的比例。 // 但計算時我們將其轉(zhuǎn)換到局部空間的距離。 // 假設(shè)我們約定_OutlineWidth 0.05 表示描邊寬度是矩形最小邊長的5%。 // 那么局部空間的實(shí)際描邊距離 _OutlineWidth * min(_RectSize.x, _RectSize.y)。 float baseLength min(_RectSize.x, _RectSize.y); float outlineDistance _OutlineWidth * baseLength; // 計算描邊因子當(dāng)distanceToEdge小于outlineDistance時進(jìn)入描邊區(qū)域。 // 使用smoothstep實(shí)現(xiàn)平滑過渡_OutlineSharpness控制過渡平滑度。 // smoothstep(a, b, x): 當(dāng)xa時返回0 xb時返回1在a,b之間平滑過渡。 // 我們希望當(dāng)distanceToEdge outlineDistance時為0完全填充色 // 當(dāng)distanceToEdge 0時為1完全描邊色不對矩形外部我們可能不顯示。 // 實(shí)際上我們只關(guān)心矩形內(nèi)部和邊緣附近。我們定義一個“描邊區(qū)域”從邊緣向內(nèi)outlineDistance寬度的區(qū)域。 // 所以描邊因子 1.0 - smoothstep(0, outlineDistance, distanceToEdge) // 這樣在邊緣處(distanceToEdge0)因子為1在向內(nèi)outlineDistance處(distanceToEdgeoutlineDistance)因子為0。 float outlineFactor 1.0 - smoothstep(0, outlineDistance, distanceToEdge); // 但是上面的計算只處理了“內(nèi)描邊”。如果點(diǎn)在矩形外部(distanceToEdge 0)outlineFactor也會1需要clamp。 // 更完善的處理 // 我們只對矩形內(nèi)部和邊緣附近像素著色。對于明顯在外部的像素可以直接丟棄或顯示透明。 // 這里我們簡單處理將distanceToEdge小于一個很小負(fù)值的像素直接丟棄如果紋理有透明通道。 // 或者我們可以實(shí)現(xiàn)“外描邊”這需要修改距離計算。 // 我們先實(shí)現(xiàn)標(biāo)準(zhǔn)的內(nèi)描邊 // 重新定義描邊區(qū)域是 distanceToEdge 在 [0, outlineDistance] 之間。 // 使用smoothstep的逆運(yùn)算 outlineFactor smoothstep(outlineDistance, 0, distanceToEdge); // 當(dāng)distanceToEdge outlineDistance outlineFactor 0 // 當(dāng)distanceToEdge 0 outlineFactor 1 // 我們需要clamp一下并且只對distanceToEdge -outlineDistance*0.5的像素進(jìn)行處理防止外部過遠(yuǎn)像素影響。 outlineFactor clamp(outlineFactor, 0, 1); // 混合顏色在填充色和描邊色之間根據(jù)outlineFactor插值 fixed4 finalColor lerp(texColor, _OutlineColor, outlineFactor); // 還有一個重要問題抗鋸齒。我們現(xiàn)在的邊緣在放大后看可能還是有鋸齒。 // 我們可以利用distanceToEdge這個帶符號的距離信息在邊緣進(jìn)行亞像素級別的透明度混合。 // 這是一個高級技巧簡單版在片元輸出前根據(jù)distanceToEdge做一個非常精細(xì)的alpha漸變。 // 但這可能會和紋理本身的alpha沖突。對于不透明UI可以不做。對于需要平滑邊緣的Sprite可以 // float edgeAlpha smoothstep(-0.5, 0.5, distanceToEdge); // 假設(shè)一個像素的過渡區(qū)間 // finalColor.a * edgeAlpha; // 注意這需要Shader Blend模式支持透明度。 return finalColor; }這段代碼是核心但里面包含了幾個需要深刻理解的點(diǎn)和潛在的“坑”。讓我們停下來深入剖析一下。3.4 關(guān)鍵算法剖析與優(yōu)化1. 距離計算的理解distanceToEdge min(halfWidth - abs(p.x), halfHeight - abs(p.y));這行代碼是精髓。它計算的是點(diǎn)到矩形內(nèi)部的最近距離。在矩形內(nèi)部這個值為正。在矩形外部比如一個點(diǎn)x坐標(biāo)的絕對值大于半寬halfWidth - abs(p.x)就會變成負(fù)數(shù)min操作會選取這個負(fù)值所以distanceToEdge也變?yōu)樨?fù)表示點(diǎn)在外部。2. 描邊寬度的基準(zhǔn)選擇大坑 這是實(shí)現(xiàn)“無間隙”且視覺均勻描邊的最大挑戰(zhàn)。如果我們簡單地將_OutlineWidth乘以一個固定值比如halfWidth那么在一個寬高比很大的矩形比如一個很寬的進(jìn)度條上上下邊的描邊看起來會非常細(xì)而左右邊的描邊看起來正常這顯然不是我們想要的。解決方案應(yīng)該以屏幕像素或局部空間歸一化的某個基準(zhǔn)來定義描邊寬度。我們的代碼中使用了min(_RectSize.x, _RectSize.y)作為基準(zhǔn)這保證了無論矩形形狀如何描邊寬度都相對于其最小邊從而在視覺上保持相對均勻。但這還不是最完美的因?yàn)楫?dāng)矩形旋轉(zhuǎn)或非軸對齊時_RectSize可能不準(zhǔn)確。對于UI系統(tǒng)更推薦的做法是將寬度定義為像素單位然后在Shader中根據(jù)實(shí)際渲染尺寸和屏幕分辨率進(jìn)行轉(zhuǎn)換。這涉及到更復(fù)雜的_ScreenParams和矩陣變換為了教程聚焦我們暫用當(dāng)前方案它對于大多數(shù)軸對齊UI已經(jīng)足夠好。3. 平滑過渡與抗鋸齒smoothstep函數(shù)是我們的好朋友。outlineFactor smoothstep(outlineDistance, 0, distanceToEdge);這行代碼創(chuàng)建了一個從outlineDistance到0的平滑過渡。第二個參數(shù)小于第一個參數(shù)所以函數(shù)是遞減的。這正好符合我們的需求距離邊緣越近distanceToEdge越小描邊因子越大。_OutlineSharpness參數(shù)可以通過修改smoothstep的過渡范圍或使用冪函數(shù)pow(outlineFactor, _OutlineSharpness)來實(shí)現(xiàn)更銳利的邊緣但直接修改smoothstep的邊界不夠直觀。一個更好的方法是outlineFactor saturate((outlineDistance - distanceToEdge) / (outlineDistance * _OutlineSharpnessFactor));然后使用pow(outlineFactor, _OutlineSharpness)來控制曲線形狀。這給了我們更大的控制權(quán)。4. 處理矩形外部像素 我們的Shader目前會處理所有傳入的片元。如果矩形的Mesh沒有覆蓋描邊區(qū)域那么外描邊就不會顯示。為了實(shí)現(xiàn)外描邊我們需要擴(kuò)大Mesh或者更優(yōu)雅地在Shader中不丟棄外部像素而是當(dāng)distanceToEdge在[-outlineDistance, 0]區(qū)間時也顯示描邊色。這只需要修改smoothstep的輸入范圍即可。4. 完整Shader代碼與使用指南結(jié)合以上所有分析這里給出一個優(yōu)化后的、更健壯的完整Shader代碼并包含內(nèi)外描邊選項(xiàng)。Shader Custom/RectangleOutline { Properties { [PerRendererData] _MainTex (Main Texture, 2D) white {} _Color (Color, Color) (1,1,1,1) _OutlineColor (Outline Color, Color) (1,0,0,1) _OutlineWidth (Outline Width, Range(0, 0.2)) 0.05 _OutlineSharpness (Outline Sharpness, Range(0.1, 50)) 10.0 [KeywordEnum(Inner, Outer, Both)] _OutlineType (Outline Type, Float) 0 _RectSize (Rect Size (World Units), Vector) (1, 1, 0, 0) [Toggle] _PixelSnap (Pixel Snap, Float) 0 } SubShader { Tags { QueueTransparent IgnoreProjectorTrue RenderTypeTransparent PreviewTypePlane CanUseSpriteAtlasTrue } Cull Off Lighting Off ZWrite Off Blend One OneMinusSrcAlpha Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma multi_compile _ _PIXELSNAP_ON #pragma multi_compile _ _OUTLINETYPE_INNER _OUTLINETYPE_OUTER _OUTLINETYPE_BOTH #include UnityCG.cginc struct appdata_t { float4 vertex : POSITION; float2 texcoord : TEXCOORD0; fixed4 color : COLOR; }; struct v2f { float4 vertex : SV_POSITION; float2 texcoord : TEXCOORD0; float2 localPos : TEXCOORD1; // 矩形局部空間位置 fixed4 color : COLOR; }; sampler2D _MainTex; float4 _MainTex_ST; fixed4 _Color; fixed4 _OutlineColor; float _OutlineWidth; float _OutlineSharpness; float2 _RectSize; v2f vert(appdata_t v) { v2f o; o.vertex UnityObjectToClipPos(v.vertex); o.texcoord TRANSFORM_TEX(v.texcoord, _MainTex); o.color v.color * _Color; // 計算局部位置從UV[0,1]映射到[-RectSize/2, RectSize/2] float2 centeredUV v.texcoord - float2(0.5, 0.5); o.localPos centeredUV * _RectSize; #ifdef _PIXELSNAP_ON o.vertex UnityPixelSnap(o.vertex); #endif return o; } fixed4 frag(v2f i) : SV_Target { fixed4 texColor tex2D(_MainTex, i.texcoord) * i.color; float2 p i.localPos; float halfWidth _RectSize.x * 0.5; float halfHeight _RectSize.y * 0.5; // 計算到四條邊的距離內(nèi)部為正 float distX halfWidth - abs(p.x); float distY halfHeight - abs(p.y); // 到最近邊的距離 float distanceToEdge min(distX, distY); // 將描邊寬度從比例轉(zhuǎn)換為局部空間單位 // 使用矩形最小邊作為基準(zhǔn)保證視覺均勻 float minSide min(_RectSize.x, _RectSize.y); float outlineWidthLocal _OutlineWidth * minSide; float outlineFactor 0; // 根據(jù)描邊類型計算因子 #if defined(_OUTLINETYPE_INNER) // 內(nèi)描邊僅當(dāng)點(diǎn)在內(nèi)部且靠近邊緣時 if(distanceToEdge 0) { outlineFactor 1.0 - smoothstep(0, outlineWidthLocal, distanceToEdge); } #elif defined(_OUTLINETYPE_OUTER) // 外描邊僅當(dāng)點(diǎn)在外部且靠近邊緣時 if(distanceToEdge 0) { float distToEdgeAbs abs(distanceToEdge); outlineFactor 1.0 - smoothstep(0, outlineWidthLocal, distToEdgeAbs); } #else // _OUTLINETYPE_BOTH // 內(nèi)外描邊無論內(nèi)外靠近邊緣就顯示描邊 float distToEdgeAbs abs(distanceToEdge); outlineFactor 1.0 - smoothstep(0, outlineWidthLocal, distToEdgeAbs); #endif // 應(yīng)用銳度控制通過冪函數(shù)使過渡更銳利 outlineFactor pow(outlineFactor, _OutlineSharpness * 0.1); // 縮放系數(shù)便于調(diào)節(jié) // 顏色混合 fixed4 finalColor lerp(texColor, _OutlineColor, outlineFactor); // 高級抗鋸齒在邊緣處基于distanceToEdge微調(diào)alpha實(shí)現(xiàn)亞像素級平滑 // 注意這可能會與紋理alpha沖突根據(jù)需求啟用 // float edgeSoftness 0.5; // 軟化像素數(shù) // float alphaAA smoothstep(-edgeSoftness, edgeSoftness, distanceToEdge); // finalColor.a * alphaAA; // 預(yù)乘Alpha混合的正確處理 finalColor.rgb * finalColor.a; return finalColor; } ENDCG } } Fallback Sprites/Default }使用指南創(chuàng)建材質(zhì)在Project視圖中右鍵 - Create - Material將Shader選擇為“Custom/RectangleOutline”。應(yīng)用到UI或Sprite將材質(zhì)拖拽到UI Image或Sprite Renderer的Material屬性上。參數(shù)調(diào)節(jié)Outline Width控制描邊粗細(xì)。建議從0.02開始調(diào)節(jié)。Outline Sharpness值越大描邊與填充色的分界越銳利值越小如接近0.1邊緣越柔和有抗鋸齒效果但可能“發(fā)虛”。通常設(shè)置在5-20之間能獲得較好效果。Outline Type選擇描邊類型。Inner內(nèi)描邊、Outer外描邊、Both內(nèi)外描邊。外描邊需要確保Mesh足夠大以容納描邊區(qū)域或者使用Both并確保紋理透明區(qū)域足夠。Rect Size重要這里需要輸入矩形在世界空間或本地空間中的實(shí)際尺寸寬和高。你可以寫一個簡單的腳本在Start()或Update()中獲取transform.lossyScale或rectTransform.rect.size并通過material.SetVector(_RectSize, size)傳遞給Shader。這是實(shí)現(xiàn)精確描邊的關(guān)鍵一步。5. 常見問題、排查技巧與性能優(yōu)化即使有了完整的代碼在實(shí)際使用中你仍然會遇到各種問題。下面是我在多個項(xiàng)目中總結(jié)出來的“避坑指南”。5.1 描邊顯示不全或錯位癥狀描邊只出現(xiàn)在矩形的某一條邊或者位置不對。排查檢查_RectSize參數(shù)這是最常見的原因。確保你通過腳本傳遞的尺寸是正確的。對于UI元素使用rectTransform.rect.width和rectTransform.rect.height。對于2D Sprite可能需要使用sprite.bounds.size乘以transform.lossyScale。在Shader中添加一個調(diào)試輸出比如將float4(distanceToEdge, outlineFactor, 0, 1)作為顏色輸出可以直觀看到距離場的可視化結(jié)果幫助你判斷_RectSize是否正確。檢查UV確保你的矩形Mesh的UV是規(guī)整的從(0,0)到(1,1)。對于圖集Atlas中的SpriteUV不是全圖我們的計算會出錯。此時需要另一種思路在片元著色器中通過ddx/ddy指令估算像素在紋理空間中的變化率來近似計算距離但這復(fù)雜得多。對于圖集Sprite建議使用專門的Sprite外描邊Shader或者確保使用原始紋理而非圖集。檢查Mesh邊界外描邊Outer或Both需要Mesh本身覆蓋描邊區(qū)域。如果Mesh只是剛好覆蓋填充區(qū)域外描邊就會被裁剪掉。解決方法是使用一個稍微放大的Mesh或者在Shader中采用基于紋理Alpha測試的邊緣檢測方法這超出了本文范圍。5.2 描邊粗細(xì)不均勻或拐角過圓/過尖癥狀在長方形上長邊的描邊比短邊細(xì)拐角處不是理想的90度。排查與解決基準(zhǔn)長度選擇我們代碼中使用min(_RectSize.x, _RectSize.y)作為基準(zhǔn)這保證了在任意矩形上描邊相對于最小邊是均勻的但長邊上的描邊視覺上還是會顯得細(xì)因?yàn)樗慕^對像素寬度是一樣的。如果你希望描邊在屏幕像素上絕對均勻需要將_OutlineWidth轉(zhuǎn)換為屏幕像素寬度。這需要在Shader中獲取從局部空間到屏幕空間的導(dǎo)數(shù)計算復(fù)雜度較高。對于大多數(shù)UI場景當(dāng)前方案可以接受。拐角形狀基于min距離函數(shù)生成的拐角是圓角這是數(shù)學(xué)上的必然等距線。如果你需要銳利的90度拐角需要使用不同的距離函數(shù)例如使用max(abs(p.x)-halfWidth, abs(p.y)-halfHeight)這種“無限范數(shù)”距離但實(shí)現(xiàn)起來更復(fù)雜且可能在其他地方產(chǎn)生不連續(xù)。我們的方案提供的圓角在視覺上通常是可接受的甚至更美觀。5.3 性能考量與優(yōu)化建議Overdraw我們的Shader會處理Mesh覆蓋的所有片元。如果矩形很小但Mesh很大為了外描邊會造成不必要的Overdraw。在移動端對于大量UI元素這需要關(guān)注。優(yōu)化方法是盡可能使用內(nèi)描邊并確保Mesh大小精確。分支語句Shader中的if語句如我們根據(jù)_OUTLINETYPE的判斷在有些GPU架構(gòu)上可能導(dǎo)致性能波動。我們可以嘗試使用step()或lerp()函數(shù)來消除分支但會犧牲一些可讀性。對于UI Shader通常壓力不大保持可讀性更重要。批處理Batching確保材質(zhì)參數(shù)盡可能通過MaterialPropertyBlock來設(shè)置而不是修改Material實(shí)例這樣可以保持動態(tài)合批Dynamic Batching或GPU Instancing的有效性大幅提升渲染大量相同Shader不同參數(shù)UI元素的效率。針對URP/HDRP本文Shader基于內(nèi)置渲染管線。如果要在URPUniversal Render Pipeline中使用需要將其轉(zhuǎn)換為URP的Shader Graph或編寫URP兼容的HLSL代碼。核心算法不變但需要遵循URP的庫函數(shù)和渲染管線接口。5.4 擴(kuò)展思路當(dāng)你掌握了基礎(chǔ)的無間隙描邊后可以嘗試以下擴(kuò)展讓你的效果更出彩漸變描邊將_OutlineColor從一個顏色插值到另一個顏色?？梢栽谟嬎鉶utlineFactor的基礎(chǔ)上再根據(jù)distanceToEdge或p的位置計算第二個插值因子。虛線描邊在片元著色器中根據(jù)像素在邊緣上的位置可以通過frac函數(shù)實(shí)現(xiàn)來決定是否顯示描邊色從而創(chuàng)造出虛線效果。發(fā)光/外發(fā)光效果在外描邊的基礎(chǔ)上將smoothstep的過渡區(qū)間拉長并使用一個從描邊色到透明的漸變可以模擬發(fā)光效果。與UI Mask/RectMask2D配合注意我們的Shader在遇到UI的Mask組件時描邊在Mask邊界處可能會被生硬切斷。如果需要完美的Masked描邊可能需要將距離計算與Mask的邊界信息結(jié)合起來這屬于更高級的主題。實(shí)現(xiàn)一個完美的矩形無間隙描邊就像打磨一件手工藝品需要你對距離場、坐標(biāo)空間轉(zhuǎn)換和視覺表現(xiàn)有細(xì)膩的理解。它絕不是簡單的調(diào)用一個API而是一個融合了數(shù)學(xué)、圖形學(xué)和實(shí)用技巧的綜合性解決方案。希望這篇超詳細(xì)的解析能幫你徹底征服這個“熟悉的陌生人”并在下次面對任何自定義形狀的描邊需求時都能游刃有余。