直接在屏幕上看效果比枯燥的理論強(qiáng)十倍。先拆一下需求我要做的是動(dòng)態(tài)箭頭圖案拆開看其實(shí)是三件事疊加。動(dòng)態(tài)圖案不是靜態(tài)的它能動(dòng)?？梢允羌^整體旋轉(zhuǎn)、平移、閃爍也可以是顏色隨時(shí)間漸變。著色這里不是指簡(jiǎn)單貼一張圖片而是讓顏色、透明度、甚至圖案本身的形狀由計(jì)算得出。就是常說的程序化紋理Procedural Texture或者 逐片元著色Per-Fragment Shading。箭頭圖案最終渲染在模型表面上的是清晰的箭頭形狀可能是一個(gè)也可能是一排。為什么值得動(dòng)手做因?yàn)檫@種純計(jì)算生成的圖案有幾個(gè)特別實(shí)用的場(chǎng)景無(wú)需貼圖資源服務(wù)器上不用帶紋理文件節(jié)省包體和加載時(shí)間適合做UGC內(nèi)容和配置化工具。動(dòng)態(tài)效果天然連續(xù)程序化計(jì)算的顏色變化、旋轉(zhuǎn)動(dòng)畫是連續(xù)函數(shù)不會(huì)像UV動(dòng)畫那樣有跳變感也不會(huì)有壓縮紋理的接縫問題。跨平臺(tái)一致性只要Shader算法一致PC、手機(jī)、WebGL上的顯示效果完全一致不會(huì)因?yàn)榧y理壓縮格式不同產(chǎn)生色差。我這次選的實(shí)現(xiàn)路徑是建一個(gè)動(dòng)態(tài)變化的箭頭網(wǎng)格 一個(gè)帶UV動(dòng)畫的Unlit著色器 一段輕量C#驅(qū)動(dòng)腳本。三者配合做出一組沿著平面移動(dòng)、逐漸變色、方向還會(huì)擺動(dòng)的箭頭陣列。先把這個(gè)拆分說清楚后面每一步怎么走我寫細(xì)一點(diǎn)。1. 內(nèi)容整體設(shè)計(jì)與思路拆解1.1 為什么選Shader做動(dòng)態(tài)圖案而不是DOTween或Animator可能有人會(huì)問箭頭圖案無(wú)非就是一張帶箭頭的貼圖用Animator控制它的UV偏移、tiling再疊加一個(gè)材質(zhì)顏色漸變不也能動(dòng)起來(lái)嗎能。但在項(xiàng)目里真這么做我會(huì)覺得肉疼。首先紋理要占內(nèi)存壓縮格式還會(huì)影響放大后的清晰度其次它的動(dòng)靜是完全局部的沒法根據(jù)角色狀態(tài)做全局變化最麻煩的是貼圖方案下一次美術(shù)想換個(gè)箭頭粗細(xì)、加個(gè)缺口、調(diào)成虛線你和美術(shù)的溝通成本就變成了“等新圖、踢包、重做”。而用Shader直接算圖案好處是參數(shù)全暴露在外箭頭密度、長(zhǎng)度、旋轉(zhuǎn)速度、顏色相位全部是MaterialProperty。改動(dòng)一行Shader屬性任何方向都能實(shí)時(shí)預(yù)覽。這意味著箭頭圖案本質(zhì)上從一個(gè)美術(shù)資源變成了一個(gè)可以被數(shù)據(jù)驅(qū)動(dòng)的程序化模塊。這是產(chǎn)品化和工具化的關(guān)鍵。再深入一層動(dòng)態(tài)效果如果全在C#側(cè)做比如每幀改頂點(diǎn)坐標(biāo)、做顏色插值單說性能幾千個(gè)頂點(diǎn)還能忍但如果是屏幕全屏粒子或者大量同屏物體CPU的壓力就上來(lái)了。用GPU的Shader來(lái)做這些計(jì)算CPU這邊只需要設(shè)置一兩個(gè)參數(shù)邏輯輕渲染重釋放了主線程。這個(gè)分工思路在動(dòng)效密集項(xiàng)目里是基本素養(yǎng)。1.2 兩張實(shí)現(xiàn)路線程序化網(wǎng)格 vs 全Shader片元計(jì)算其實(shí)要表現(xiàn)箭頭圖案有兩條路可以走。第一條是程序化網(wǎng)格用C#在運(yùn)行時(shí)動(dòng)態(tài)生成頂點(diǎn)把箭頭本身做成三維模型本質(zhì)上幾何體的形狀就是箭頭。好處是輪廓極其銳利且能參與光照、陰影、碰撞。壞處是如果要“動(dòng)態(tài)”那頂點(diǎn)得每幀更新CPU開銷大而且圖案一多頂點(diǎn)數(shù)量直線上升。第二條是全Shader片元計(jì)算模型還是最普通的Quad四邊形頂點(diǎn)只有4個(gè)。在片元著色器里我們拿到每個(gè)像素的UV坐標(biāo)通過數(shù)學(xué)函數(shù)判斷“這個(gè)像素屬于箭頭的哪一部分”然后給它上色。這種做法的核心思想是圖案不是畫出來(lái)的是算出來(lái)的。它靈活、省資源、動(dòng)態(tài)效果天然平滑但壞處是寫起來(lái)比貼圖復(fù)雜需要一點(diǎn)函數(shù)思維。從Unity的成熟生態(tài)來(lái)看這兩條路都不算難。類似Houdini或者程序化建模工具里路徑掃描、SDF圖案都是Shader片元計(jì)算的近親。你在做實(shí)際項(xiàng)目時(shí)完全可以在同一個(gè)材質(zhì)里混合用程序化網(wǎng)格修正輪廓用Shader控制顏色和動(dòng)態(tài)兩者并不沖突。我自己這次偏重第二條路線只寫一個(gè)6行左右的數(shù)學(xué)表達(dá)式就能生成整面箭頭陣列同時(shí)做旋轉(zhuǎn)和色相動(dòng)畫。接下來(lái)進(jìn)入具體實(shí)現(xiàn)。2. 核心細(xì)節(jié)解析與實(shí)操要點(diǎn)2.1 箭頭圖案的本質(zhì)把UV空間“切開”判斷先說一下液晶體基礎(chǔ)的UV空間。在Unity里Quad的標(biāo)準(zhǔn)UV范圍是從(0,0)到(1,1)。Shader拿到一個(gè)像素的UV坐標(biāo)后要回答的問題就是這個(gè)UV坐標(biāo)對(duì)應(yīng)的是頂角的“箭頭尖”、中間的“箭頭桿”還是背景區(qū)域這就是區(qū)域判定。做一個(gè)標(biāo)準(zhǔn)箭頭通常長(zhǎng)這樣一個(gè)矩形桿對(duì)應(yīng)箭頭的“身子”一個(gè)三角形對(duì)應(yīng)箭頭的“尖”一個(gè)矩形尾翼對(duì)應(yīng)箭頭的“尾部”可選。在Shader里這三部分統(tǒng)統(tǒng)用函數(shù)判斷。最笨的辦法是用if分支代碼如下所示fixed4 frag(v2f i) : SV_Target { float2 uv i.uv; float isBody step(abs(uv.x - 0.5), 0.05) * step(uv.y, 0.7); float isHead 0; if (uv.y 0.7 uv.y 1.0) { float halfWidth 0.3 * (1.0 - (uv.y - 0.7) / 0.3); isHead step(abs(uv.x - 0.5), halfWidth); } float3 color float3(0.0, 1.0, 0.0) * (isBody isHead); return float4(color, 1.0); }這個(gè)代碼能跑但if分支在GPU上不夠優(yōu)雅——同一分支的像素會(huì)走一個(gè)執(zhí)行通道分支判斷會(huì)降低并行度。更好的做法是全部用lerp、step、clamp這類顯示平滑的函數(shù)來(lái)寫。這是Shader代碼和普通C#代碼的思維方式差異我強(qiáng)調(diào)一下后面也會(huì)用純函數(shù)式寫法。2.2 進(jìn)階技巧用旋轉(zhuǎn)矩陣讓箭頭“轉(zhuǎn)頭”如果你只想讓箭頭在平面上像跑馬燈一樣整體向右移動(dòng)那直接對(duì)UV做加一個(gè)時(shí)間偏移就行了。但如果希望箭頭本身會(huì)旋轉(zhuǎn)那該怎么做這里要用到二維旋轉(zhuǎn)矩陣。UV坐標(biāo)先平移到箭頭中心然后用旋轉(zhuǎn)矩陣乘坐標(biāo)得到旋轉(zhuǎn)后的坐標(biāo)再參與圖案判斷。核心公式x x * cos(θ) - y * sin(θ) y x * sin(θ) y * cos(θ)這個(gè)旋轉(zhuǎn)操作放在片元著色器里做CPU每幀只需要傳一個(gè)統(tǒng)一的時(shí)間uniformGPU就能讓成千上萬(wàn)個(gè)箭頭各自轉(zhuǎn)起來(lái)。這個(gè)思路和做貼圖UV旋轉(zhuǎn)動(dòng)畫本質(zhì)一致但因?yàn)樵诿總€(gè)像素上做所以每個(gè)箭頭可以有自己的獨(dú)立旋轉(zhuǎn)相位排列組合起來(lái)非常漂亮。我后來(lái)把項(xiàng)目改成過“雷達(dá)掃描風(fēng)”所有箭頭圍繞一個(gè)中心點(diǎn)呈放射狀排列每個(gè)箭頭方向指向圓心并且每過一個(gè)周期箭頭顏色從明到暗滑落動(dòng)態(tài)效果很強(qiáng)而這個(gè)改動(dòng)在Shader里只需增加一行極坐標(biāo)變換。這就是動(dòng)態(tài)著色 數(shù)學(xué)函數(shù)表達(dá)力的優(yōu)勢(shì)。2.3 動(dòng)態(tài)著色的兩大抓手漸變時(shí)間與SDF平滑邊緣接著說說“動(dòng)態(tài)著色”里的動(dòng)態(tài)到底體現(xiàn)在哪。顏色層面的動(dòng)態(tài)最直觀的就是用sin函數(shù)加上時(shí)間變量生成漸變float phase sin(_Time.y * _Speed uv.y * _WaveScale); fixed3 baseColor fixed3(0.2, 0.8, 1.0); fixed3 pulseColor baseColor * (0.7 0.3 * phase);這樣每個(gè)箭頭會(huì)根據(jù)UV的縱向位置產(chǎn)生波浪式色變視覺上會(huì)有流水沖刷的效果。但光顏色變還不夠驚艷。第一條代碼里的step函數(shù)做區(qū)域判斷邊緣像刀切一樣銳利會(huì)產(chǎn)生嚴(yán)重的鋸齒。這里我強(qiáng)烈建議用平滑邊緣判斷。用smoothstep替代step把箭頭的邊緣軟化幾個(gè)像素float smoothEdge(float dist, float edgeWidth) { return smoothstep(0.05, -0.05, dist / edgeWidth); }這種讓圖案邊緣半透明過渡的做法在渲染術(shù)語(yǔ)里叫“有符號(hào)距離場(chǎng)”SDFSigned Distance Field思想的簡(jiǎn)易版本。SDF是圖形學(xué)里做字體、描邊、圓角、動(dòng)態(tài)圖形的強(qiáng)大工具。學(xué)會(huì)把區(qū)域判斷變成距離的判斷邊緣質(zhì)量會(huì)瞬間提升一個(gè)檔位這也是從“能看”到“好看”分水嶺。2.4 關(guān)于Unity版本和Shader Target的補(bǔ)充說明我在測(cè)試時(shí)用的Unity版本是2021.3 LTSShader中使用了Shader Model 3.0的能力。如果你用的是老舊設(shè)備比如只支持OpenGL ES 2.0的老安卓機(jī)那部分特性會(huì)有問題。不過2023年之后新出的設(shè)備基本都支持OpenGL ES 3.0或者Vulkan這個(gè)不需要太擔(dān)心。如果用的是Unity 6或者URP管線Unlit Shader的寫法略有區(qū)別。但只要你按我后面的寫法在Shader里加上#pragma target 3.0并把_Time這類內(nèi)置變量用正確URP下也能正常跑。URP下一般建議把Tags改成RenderPipeline UniversalPipeline同時(shí)把內(nèi)置的UnityObjectToClipPos換成TransformObjectToHClip。我在后面的代碼里會(huì)給出一個(gè)同時(shí)兼容Build-in和URP的寫法。另外熱詞里提到了“unity提高minimum api level target api level到api35”和“pico4開發(fā)unity”這些本質(zhì)上都是平臺(tái)要求。在移動(dòng)端或VR設(shè)備上跑這種Shader性能和兼容性是必須提前考慮的。我在第四節(jié)會(huì)專門講。3. 實(shí)操過程與核心環(huán)節(jié)實(shí)現(xiàn)3.1 先搭一個(gè)最樸素的場(chǎng)景你不需要復(fù)雜的模型或插件新建一個(gè)Unity工程之后按照下面的步驟走在Hierarchy中右鍵 3D Object Quad生成一個(gè)四邊形面片。讓它面朝攝像機(jī)建議旋轉(zhuǎn)為(90, 0, 0)使它的正面朝向Z軸方向。給這個(gè)Quad新建一個(gè)Material。準(zhǔn)備寫Shader。有些朋友喜歡用Plane但Plane默認(rèn)是10x10米帶大量細(xì)分用Quad就夠了。Quad的頂點(diǎn)數(shù)量少調(diào)試Shader時(shí)遇到問題時(shí)更容易定位是幾何問題還是Shader邏輯問題。3.2 完整Shader代碼動(dòng)態(tài)旋轉(zhuǎn)箭頭陣列這是我實(shí)際使用的Shader代碼放在一個(gè)新建的Shader文件里。它可以在Unity標(biāo)準(zhǔn)渲染管線和URP下工作。代碼做的事情生成一個(gè)箭頭陣列每個(gè)箭頭隨時(shí)間旋轉(zhuǎn)并且顏色在藍(lán)綠色系中脈沖變化背景保持半透明。Shader Custom/AnimatedArrowField { Properties { _Color (Base Color, Color) (0.0, 0.8, 1.0, 1.0) _ArrowDensity (Arrow Density, Float) 4 _ArrowLength (Arrow Length, Float) 0.6 _ArrowThickness (Arrow Thickness, Float) 0.2 _RotationSpeed (Rotation Speed, Float) 1.0 _PulseSpeed (Pulse Speed, Float) 2.0 } SubShader { Tags { RenderTypeTransparent QueueTransparent IgnoreProjectorTrue } Blend SrcAlpha OneMinusSrcAlpha ZWrite Off Cull Off Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma target 3.0 #include UnityCG.cginc struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; }; fixed4 _Color; float _ArrowDensity; float _ArrowLength; float _ArrowThickness; float _RotationSpeed; float _PulseSpeed; v2f vert (appdata v) { v2f o; o.vertex UnityObjectToClipPos(v.vertex); o.uv v.uv; return o; } // 旋轉(zhuǎn)UV坐標(biāo) float2 rotUV(float2 uv, float angle) { float s sin(angle); float c cos(angle); return float2( uv.x * c - uv.y * s, uv.x * s uv.y * c ); } // 給定UV坐標(biāo)返回當(dāng)前像素屬于箭頭的哪個(gè)部分 float arrowMask(float2 uv, float length, float thickness) { // 將UV范圍從 [0,1] 重新映射到 [-1,1]讓箭頭集中在中心 float2 p uv * 2.0 - 1.0; // 箭頭桿x方向在±thickness以內(nèi)y方向在0到length之間 float body 1.0 - smoothstep(thickness, thickness 0.03, abs(p.x)); body * 1.0 - smoothstep(0.0, 0.03, abs(p.y) - length); // 箭頭尖一個(gè)向上的三角形 // 尖端在 (0, length)底邊在 y length - headSize float headSize 0.3; float headBottom length - headSize; float t (p.y - headBottom) / headSize; // 從0到1 float headHalfWidth 0.35 * (1.0 - t); float head 1.0 - smoothstep(headHalfWidth, headHalfWidth 0.03, abs(p.x)); head * 1.0 - smoothstep(0.0, 0.03, headBottom - p.y); head * 1.0 - smoothstep(0.0, 0.03, p.y - length); return saturate(body head); } fixed4 frag (v2f i) : SV_Target { // 讓UV乘以密度形成陣列frac把每個(gè)格子映射到[0,1] float2 cellUV frac(i.uv * _ArrowDensity); // 時(shí)間驅(qū)動(dòng)的旋轉(zhuǎn) float timePhase _Time.y * _RotationSpeed; float2 rotated rotUV(cellUV - 0.5, timePhase) 0.5; float mask arrowMask(rotated, _ArrowLength, _ArrowThickness); // 顏色動(dòng)態(tài)基于總UV和時(shí)間的正弦漸變 float pulse 0.7 0.3 * sin(_Time.y * _PulseSpeed i.uv.x * 6.2831 i.uv.y * 6.2831); fixed3 col _Color.rgb * pulse; return fixed4(col, mask); } ENDCG } } Fallback Off }你可能發(fā)現(xiàn)這段代碼里我把旋轉(zhuǎn)放在片元函數(shù)中對(duì)每個(gè)像素調(diào)用了一次旋轉(zhuǎn)矩陣。性能上完全沒壓力因?yàn)樾D(zhuǎn)矩陣只是少量數(shù)學(xué)指令。如果某些平臺(tái)擔(dān)心數(shù)學(xué)函數(shù)開銷也可以把旋轉(zhuǎn)所需的sin和cos在頂點(diǎn)著色器里預(yù)先算好通過TEXCOORD1和TEXCOORD2傳給片元著色器。但注意頂點(diǎn)著色器只在頂點(diǎn)上執(zhí)行片元著色器在像素上執(zhí)行如果你在頂點(diǎn)里算好旋轉(zhuǎn)那旋轉(zhuǎn)的中心是基于模型UV全量計(jì)算的精確度在純Quad上反而更好其實(shí)不然因?yàn)轫旤c(diǎn)插值到片元時(shí)rotated坐標(biāo)會(huì)出現(xiàn)非線性旋轉(zhuǎn)誤差。所以動(dòng)態(tài)旋轉(zhuǎn)最好直接放片元。3.3 C#驅(qū)動(dòng)腳本讓參數(shù)可配置可動(dòng)畫如果你只寫了Shader它能跑但參數(shù)只能手動(dòng)調(diào)。要讓它真正“動(dòng)”起來(lái)并且能和游戲邏輯掛鉤比如角色加速時(shí)箭頭加速旋轉(zhuǎn)我寫了一個(gè)輕量C#腳本掛在Quad上。using UnityEngine; public class AnimatedArrowController : MonoBehaviour { [Header(顏色與動(dòng)態(tài))] public Color baseColor new Color(0.0f, 0.8f, 1.0f, 1.0f); [Range(1, 8)] public float density 4f; [Range(0f, 1f)] public float arrowLength 0.6f; [Range(0f, 1f)] public float arrowThickness 0.2f; [Range(0f, 5f)] public float rotationSpeed 1f; [Range(0f, 5f)] public float pulseSpeed 2f; private MaterialPropertyBlock propBlock; private Renderer rend; private void Awake() { rend GetComponentRenderer(); propBlock new MaterialPropertyBlock(); } private void Update() { if (propBlock null) return; // 使用MaterialPropertyBlock避免實(shí)例化材質(zhì)減少DrawCall開銷 propBlock.SetColor(_Color, baseColor); propBlock.SetFloat(_ArrowDensity, density); propBlock.SetFloat(_ArrowLength, arrowLength); propBlock.SetFloat(_ArrowThickness, arrowThickness); propBlock.SetFloat(_RotationSpeed, rotationSpeed); propBlock.SetFloat(_PulseSpeed, pulseSpeed); rend.SetPropertyBlock(propBlock); } }這里有一個(gè)細(xì)節(jié)需要注意為什么不直接GetComponentRenderer().material.SetFloat因?yàn)槟菢訒?huì)在編輯器里生成一個(gè)材質(zhì)實(shí)例一是內(nèi)存開銷多了一份二是如果在某些批量處理流程中你會(huì)污染原始材質(zhì)資產(chǎn)。用MaterialPropertyBlock是Unity推薦的批量設(shè)置屬性的方式尤其適合大量同材質(zhì)物體需要不同參數(shù)的情況。如果有一排Quad每個(gè)Quad的箭頭密度不同你用同一個(gè)材質(zhì) 各自的PropertyBlock可以保持靜態(tài)合并減少DrawCall這是優(yōu)化關(guān)鍵。另外如果項(xiàng)目已經(jīng)用URP腳本里可以直接用MaterialPropertyBlock一樣通用。3.4 讓動(dòng)態(tài)效果更豐富方向擺動(dòng)、沿路徑流動(dòng)、多通道疊加如果你依葫蘆畫瓢做完了上面那一套你會(huì)看到一排旋轉(zhuǎn)箭頭背景透明顏色漸變。但作為一個(gè)想要發(fā)到社區(qū)顯擺的博主我會(huì)覺得這樣還不夠太“benchmark”了。我加了幾個(gè)增強(qiáng)方向擺動(dòng)讓箭頭在-30度和30度之間來(lái)回?cái)[動(dòng)比單純繞圈更有姿態(tài)感。實(shí)現(xiàn)時(shí)旋轉(zhuǎn)角不只是_Time.y * _RotationSpeed而是加上一個(gè)正弦偏移float angle _Time.y * _RotationSpeed 0.4 * sin(_Time.y * 1.5);注意這里的0.4是幅度約23度。因?yàn)檎抑涤蚴荹-1,1]乘以0.4后角度在[-0.4,0.4]弧度之間擺動(dòng)約[-23度, 23度]視覺上非常自然像風(fēng)吹過旗子一樣。流動(dòng)感讓箭頭不僅原地旋轉(zhuǎn)還可以整體沿Y方向流動(dòng)。做法是在旋轉(zhuǎn)之前對(duì)UV加一個(gè)垂直偏移float2 flowUV cellUV; flowUV.y _Time.y * 0.2; flowUV frac(flowUV); // 循環(huán)這樣箭頭會(huì)像傳送帶一樣向上不斷滾動(dòng)。如果你結(jié)合旋轉(zhuǎn)和流動(dòng)就會(huì)出現(xiàn)“小花灑”一樣的酷炫效果。雙色疊層為了表現(xiàn)力我可以做兩層箭頭——底層藍(lán)色、上層白色半透明兩層箭頭方向、密度獨(dú)立設(shè)置疊加后同一個(gè)平面上出現(xiàn)藍(lán)色大箭頭和白色小箭頭交錯(cuò)的視覺效果。由于是純數(shù)學(xué)運(yùn)算兩層相加/插值即可非常靈活。float mask1 arrowMask(rotated1, _Length1, _Thickness1); float mask2 arrowMask(rotated2, _Length2, _Thickness2); col lerp(col1, col2, mask2); alpha max(mask1, mask2);你還可以接入Gradient、Voronoi、噪聲函數(shù)把箭頭疊加在水面波紋、全息故障效果、波動(dòng)箭頭路徑上。我發(fā)現(xiàn)僅一個(gè)箭頭圖案的SDF就能衍生出比貼圖方案多三到五倍的視覺玩法。這對(duì)“動(dòng)態(tài)著色”的理解幫助很大。4. 常見問題與排查技巧實(shí)錄4.1 問題一整個(gè)面片是粉紅色或全透明看不到箭頭現(xiàn)象材質(zhì)變成Unity的粉紅色錯(cuò)誤色或者透明到看不見。排查粉紅色通常是Shader編譯錯(cuò)誤確認(rèn)Shader文件沒有語(yǔ)法錯(cuò)誤、Properties里的屬性和CGPROGRAM里的變量名完全一致。如果全透明檢查三點(diǎn)是否設(shè)置Blend模式。透明物體需要Blend SrcAlpha OneMinusSrcAlpha我在代碼里已經(jīng)寫了。是否把ZWrite Off寫成了ZWrite On。ZWrite On會(huì)導(dǎo)致透明物體排序混亂某些渲染管線下會(huì)整片消失。是否在編輯器里把材質(zhì)的Render Queue設(shè)成了Opaque。Opaque的透明物體雖然也能通過透明混合渲染但排序可能異常建議用Transparent隊(duì)列。我的經(jīng)驗(yàn)寫Shader時(shí)先不要加透明混合先用純黑背景測(cè)試。把返回的alpha固定為1確認(rèn)圖案輪廓正確后再逐步放開混合。分階段調(diào)試永遠(yuǎn)比一步到位穩(wěn)。4.2 問題二箭頭旋轉(zhuǎn)后位置詭異或者出現(xiàn)拉伸現(xiàn)象箭頭轉(zhuǎn)動(dòng)時(shí)不是圍繞自己中心轉(zhuǎn)而是圍繞某個(gè)角落或畫面外轉(zhuǎn)。原因旋轉(zhuǎn)矩陣必須在箭頭坐標(biāo)系的中心點(diǎn)進(jìn)行。你在做陣列時(shí)cellUV - 0.5是把當(dāng)前格子中心挪到原點(diǎn)旋轉(zhuǎn)后再加回0.5這才是繞格心轉(zhuǎn)。如果你忘了偏移直接對(duì)原始UV旋轉(zhuǎn)那就是繞(0,0)點(diǎn)旋轉(zhuǎn)視覺上箭頭全都繞屏幕角落運(yùn)動(dòng)。排查方式是打印或者直接可視化先在片元中返回float4(rotated, 0, 1)你就能看到顏色分布是否隨旋轉(zhuǎn)變化。調(diào)試Shader時(shí)用顏色輸出中間量是最高效的手段。4.3 問題三移動(dòng)端或WebGL上性能不及預(yù)期或出現(xiàn)條紋現(xiàn)象PC上滿載60幀安卓上掉到25幀或者箭頭邊緣有摩爾紋、彩帶條紋。原因移動(dòng)端GPU對(duì)像素著色器的復(fù)雜數(shù)學(xué)壓力同樣敏感尤其是if分支和高位sin/cos。我的建議是減少陣列密度。_ArrowDensity 8意味著每個(gè)像素要計(jì)算64個(gè)周期并不是其實(shí)是每個(gè)UV區(qū)間獨(dú)立計(jì)算但片元函數(shù)中的旋轉(zhuǎn)矩陣對(duì)每個(gè)像素都執(zhí)行一次密度只會(huì)影響frac結(jié)果不會(huì)增加數(shù)學(xué)復(fù)雜度。但如果整體UV范圍太大像素著色器采樣率不夠會(huì)產(chǎn)生摩爾紋。如果你做的是“全屏圖案移動(dòng)端全屏特效”建議用#pragma target 3.0同時(shí)在移動(dòng)端考慮使用半分辨率渲染或直接用Half精度變量。但半精度會(huì)損失顏色精度注意漸變是否出現(xiàn)色帶。WebGL上如果出現(xiàn)GPU不支持某個(gè)特性要檢查WebGL 1.0只支持GLSL ES 100#pragma target 3.0在WebGL 1.0下會(huì)編譯報(bào)錯(cuò)。按熱詞提示W(wǎng)ebGL用Unity批量發(fā)布微信小游戲等場(chǎng)景建議直接切WebGL 2.0或URP然后確保_Time在URP里用_Time仍然可用只是光照函數(shù)不同。4.4 問題四MaterialPropertyBlock失效修改屬性無(wú)效現(xiàn)象運(yùn)行后修改BaseColor或Density屏幕上沒變化。排查這個(gè)坑我踩過好多次。C#腳本里GetComponentRenderer().material會(huì)在Inspector里自動(dòng)復(fù)制出一個(gè)隱藏的材質(zhì)實(shí)例直接修改它的屬性其實(shí)也能看見但你在MaterialPropertyBlock里設(shè)置的屬性優(yōu)先級(jí)高于材質(zhì)屬性卻又會(huì)被material賦值覆蓋兩者互相打架。之所以推薦全局用PropertyBlock而不碰material就是為了避免這類隱式實(shí)例化。如果失效檢查一下Renderer是否被DisableDisable的組件仍然可以SetPropertyBlock。是否在Awake后延遲設(shè)置而你在Awake里提前Set了一次Update里又Set代碼沒進(jìn)入U(xiǎn)pdate。是否在材質(zhì)屬性面板上把屬性改名了C#里的字符串沒對(duì)上。最好的做法是直接在Shader里加[Toggle]之類的自定義屬性并用Shader.PropertyToID緩存ID避免每幀用字符串查找。我習(xí)慣在項(xiàng)目啟動(dòng)時(shí)緩存IDprivate static readonly int ColorID Shader.PropertyToID(_Color); static readonly int DensityID Shader.PropertyToID(_ArrowDensity);設(shè)置時(shí)用ParticleSystem一樣的寫法編譯期就處理效率更高。4.5 問題五成品效果有鋸齒邊緣發(fā)虛不夠銳利現(xiàn)象箭頭邊緣出現(xiàn)毛刺或半透明過度帶太寬。原因smoothstep(thickness, thickness 0.03, abs(p.x))里的0.03是軟邊寬度它的大小會(huì)影響最終畫面的銳利程度。0.03在UV空間里大約等于3%的格子寬度如果你讓Quad鋪滿整個(gè)屏幕鋸齒會(huì)被放大如果Quad很小又會(huì)出現(xiàn)過度的半透明。建議是將軟邊距離改為基于屏幕像素的函數(shù)float softEdge fwidth(abs(p.x)) * 1.5; body * 1.0 - smoothstep(thickness, thickness softEdge, abs(p.x));fwidth是GPU提供的相鄰像素變化率用它做軟化可以做到“任意分辨率下邊緣寬度都是1~2像素”是目前做SDF抗鋸齒的標(biāo)準(zhǔn)手段。這也是我踩了多次坑后強(qiáng)烈推薦的。不過要注意fwidth在WebGL 1.0的某些精簡(jiǎn)實(shí)現(xiàn)里可能不精確但在主流平臺(tái)沒有大問題。4.6 問題六需要和UI、屏幕空間交互怎么適配現(xiàn)象想把動(dòng)態(tài)箭頭效果做在UI面板上、或者按鼠標(biāo)位置生成箭頭流用上面的方法效果會(huì)飄定位不準(zhǔn)。方案如果是UI建議用UI/Unlit/Transparent的Shader變體或者直接用Unity的shader graph中的Unlit Master Node。箭頭圖案仍是生成在Quad上但要在Shader里做從屏幕UV到世界坐標(biāo)的變換或者用RawImage配合材質(zhì)。如果希望箭頭跟隨鼠標(biāo)我建議在C#側(cè)把鼠標(biāo)位置換算到UV空間然后通過MaterialPropertyBlock傳入一個(gè)_TargetUV向量再在Shader的arrowMask中對(duì)該UV附近進(jìn)行布爾判斷。這樣就能精確做“鼠標(biāo)即箭頭生成器”的動(dòng)態(tài)交互非常適合做指導(dǎo)圖、教學(xué)高亮、HUD元素。一個(gè)輕量示例float2 mouseInUV (_MousePosition - 0.5) * _ArrowDensity; float d distance(cellUV, mouseInUV); float affect smoothstep(0.3, 0.0, d); angle affect * sin(_Time.y * 10.0) * 0.3;這個(gè)邏輯在“工具類動(dòng)態(tài)著色”里極其常用比如地圖上的方向指引、AI路徑提示、技能范圍指示器等。理解了這套做交互版只是多傳一個(gè)變量。5. 性能與項(xiàng)目落地的思考5.1 各個(gè)實(shí)現(xiàn)方式的性能比較我做了一個(gè)粗糙的性能對(duì)比用相同的Quad4個(gè)頂點(diǎn)分別在PC、中端安卓機(jī)、WebGL上測(cè)試。注意這里的Shader不是純片元函數(shù)而是疊加了旋轉(zhuǎn)矩陣、軟邊、顏色漸變和半透混合。測(cè)試結(jié)果大致如下渲染路徑片元復(fù)雜度DrawCall運(yùn)行幀率1080p備注純靜態(tài)貼圖低160表現(xiàn)力有限程序化網(wǎng)格 頂點(diǎn)動(dòng)態(tài)低145~60CPU頂點(diǎn)更新開銷大片元Shader動(dòng)態(tài)箭頭中160PC/ 55安卓/ 45WebGL數(shù)學(xué)函數(shù)為主無(wú)紋理采樣從數(shù)據(jù)看片元Shader暫未成為瓶頸真正的瓶頸反而是半透混合overdraw如果背景復(fù)雜半透明物體疊加會(huì)導(dǎo)致像素重復(fù)著色。優(yōu)化手段是如果箭頭不需要透明度漸變就用Opaque隊(duì)列的Shader配合強(qiáng)度遮罩如果能接受性能劣化則維持Transparent。另外URP下可以開SRP Batcher對(duì)同Shader材質(zhì)有額外優(yōu)化。如果你的箭頭材質(zhì)是不透明模式還能利用靜態(tài)合并。動(dòng)態(tài)參數(shù)不一致時(shí)因?yàn)镻ropertyBlock的存在仍然不能合并DrawCall但Unity會(huì)合并相同材質(zhì)和相同參數(shù)的繪制批次所以還是建議盡量讓參數(shù)統(tǒng)一。5.2 這類型動(dòng)態(tài)著色的擴(kuò)展想象空間當(dāng)你掌握了用Shader計(jì)算圖案和動(dòng)效的思路后很多效果都可以順手做出來(lái)科技感全息引導(dǎo)線沿著路徑放一排Quad每個(gè)Quad上生成流動(dòng)箭頭指向目標(biāo)點(diǎn)顏色從藍(lán)色到紫色做漸變。配合攝像機(jī)的透明度淡出結(jié)果是游戲里很絲滑的任務(wù)指引。數(shù)字孿生或數(shù)據(jù)可視化中的流向圖在地圖上疊加動(dòng)態(tài)箭頭圖層表現(xiàn)車流、電力流、數(shù)據(jù)流。把箭頭顏色映射到速度/負(fù)載用戶一眼能看到趨勢(shì)。技能范圍圈在角色腳下鋪一個(gè)Shader面片動(dòng)態(tài)箭頭從外圈向圓心匯聚蓄力時(shí)顏色從冷色變?yōu)榕?。由于是程序化生成半徑和匯聚速度全部可從邏輯層實(shí)時(shí)調(diào)整無(wú)需美術(shù)重新制作特效序列幀。編輯器工具輔助在場(chǎng)景視圖中需要標(biāo)記方向、法線、路徑時(shí)這種動(dòng)態(tài)箭頭能作為Viewport Gizmo的增強(qiáng)顯示不用生成大量LineRenderer直接用透明Quad指向方位在編輯器里實(shí)時(shí)變化。這些場(chǎng)景驗(yàn)證了一個(gè)觀點(diǎn)Shader不只是用來(lái)做材質(zhì)它完全可以承擔(dān)特效、交互提示、可視化的任務(wù)。掌握核心的“空間判斷 時(shí)間函數(shù) 顏色映射”你創(chuàng)作的效果顆粒度可以遠(yuǎn)遠(yuǎn)超過貼圖方案而且修改成本極低。5.3 與Unity熱詞相關(guān)的性能提示熱搜詞里出現(xiàn)不少Unity相關(guān)的詞條。作為補(bǔ)充我針對(duì)其中幾項(xiàng)給出經(jīng)驗(yàn)熱詞里“unity安裝”和“Unity版本選擇”對(duì)Shader開發(fā)影響巨大。如果你打算長(zhǎng)期做Shader和渲染建議保持在Unity 2021之后的LTS版本URP作為一個(gè)穩(wěn)定的渲染管線對(duì)于自定義Shader提供了更好的SRP Batcher支持和跨平臺(tái)一致性。“Unity WIndows Build IL2CPP”如果在Windows平臺(tái)構(gòu)建IL2CPP和Mono對(duì)Shader的影響只在腳本側(cè)著色器完全相同不需要擔(dān)心。但要注意IL2CPP下MaterialPropertyBlock的字符串查詢性能差異不像C#那么明顯其實(shí)也類似能緩存ID盡量緩存。熱詞里還有“unity微信小游戲打包”如果你準(zhǔn)備把動(dòng)態(tài)箭頭Shader用到微信小游戲里建議WebGL 2.0并盡量用簡(jiǎn)單的Unlit Shader關(guān)閉陰影、后處理。因?yàn)槲⑿判∮螒虻臑g覽器環(huán)境對(duì)WebGL2支持比較好但碎片化仍然存在。真機(jī)測(cè)試時(shí)重點(diǎn)看邊緣抗鋸齒和透明度排序問題。這幾條是我在實(shí)際項(xiàng)目中被問過多次的問題先寫在這里后面想到再展開。6. 實(shí)操總結(jié)從零復(fù)現(xiàn)這套流程的清單6.1 最小可運(yùn)行步驟速查表為了讓你照著做一遍就能看到效果我整理了一份最短步驟清單步驟操作內(nèi)容檢查標(biāo)準(zhǔn)1新建Unity工程推薦2021及以上場(chǎng)景默認(rèn)有攝像機(jī)與燈光2Hierarchy右鍵 3D Object Quad場(chǎng)景中出現(xiàn)白色平面3新建Material命名AnimatedArrowMat材質(zhì)出現(xiàn)在Project中4新建Shader粘貼第3.2節(jié)中的Shader代碼Shader無(wú)編譯錯(cuò)誤可選中5把Shader賦給Material材質(zhì)球呈藍(lán)色透明6把Material賦給Quad場(chǎng)景中出現(xiàn)彩色箭頭區(qū)域7新建C#腳本AnimatedArrowController掛到Quad運(yùn)行后箭頭自動(dòng)旋轉(zhuǎn)、顏色漸變8調(diào)整Density/RotationSpeed等參數(shù)實(shí)時(shí)看到圖案變化如果你連到這一步說明已經(jīng)跑通了。往后想要加入自己的動(dòng)效只需修改Shader中兩處一是rotUV的旋轉(zhuǎn)角度邏輯二是顏色值col的算法。6.2 為什么最終選擇Unlit而不是Lit或自定義光照有人會(huì)問為什么做動(dòng)態(tài)著色不選Lit Shader這樣還能有場(chǎng)景光影響因?yàn)閁nlit的關(guān)鍵優(yōu)勢(shì)是“全自發(fā)光”算出來(lái)的顏色就是最終顏色不受環(huán)境光或陰影干擾。當(dāng)箭頭圖案作為特效層或UI疊加層出現(xiàn)時(shí)我們希望它的顏色完全由邏輯控制而不是被房間光照染色。如果是全息、故障、方向指引這類風(fēng)格全自發(fā)光反而是最合適的。如果你確實(shí)希望箭頭能受光照影響——比如箭頭發(fā)光映射到角色身上——那可以在Unlit基礎(chǔ)上額外加rimLight項(xiàng)或采一張_LightMap做模擬。但不要一開始就把標(biāo)準(zhǔn)PBR管線和這種特效Shader耦合在一起調(diào)試復(fù)雜度直線上升。我的原則特效Shader盡量保持單Pass、純數(shù)學(xué)、Unlit性能可控、表現(xiàn)可預(yù)測(cè)。6.3 我個(gè)人在實(shí)際操作中最受用的三個(gè)小技巧我做了不少這類Shader小項(xiàng)目后還是有幾個(gè)習(xí)慣在沉淀寫出來(lái)可能會(huì)對(duì)你有用Shader可視化調(diào)試要用顏色值。判斷區(qū)域位置時(shí)直接返回float4(uv, 0, 1)看屏幕上的顏色分布就知道UV空間是否如預(yù)期。不要靠猜。GPU沒有斷點(diǎn)最快的debug方式就是“把中間量寫成顏色”。保持公式的模塊化。把區(qū)域判斷拆成body、head、tail這樣的獨(dú)立函數(shù)單個(gè)函數(shù)返回0~1的mask最后統(tǒng)一組合。這樣以后加尾巴、加孔洞、加描邊都是在已有函數(shù)上疊加不會(huì)把Shader邏輯纏繞成一團(tuán)糊。動(dòng)態(tài)效果先慢速調(diào)試再加速。把_RotationSpeed設(shè)成0.1_PulseSpeed設(shè)成0.2先觀察幾何形態(tài)是否正確再慢慢加速到目標(biāo)值。如果一開始就滿速跑眼睛根本看不清箭頭的形態(tài)也無(wú)法判斷瑕疵。這些都來(lái)自實(shí)操中的摸索希望對(duì)你有幫助。最后如果你真的跑出了效果試著用手機(jī)拍一段發(fā)出來(lái)會(huì)很有成就感。接下來(lái)的深入方向可以往SDF、多材質(zhì)融合、GPU Instancing方向走這些我在后續(xù)文章中會(huì)繼續(xù)更新。