比如要製作如上的雷達特效。我們用虛幻引擎的shader編輯器來做，因爲它對圖形化hlsl語言的支持非常好，因爲這個是純二維的CG特效，我們使用後期處理（post process）材質來表現。首先進行階級分析，這個雷達圖（雖然不知道這種圖案與現代雷達有什麼關聯）由3個部分組成，分別是：
同心圓環剔除
扇形漸變（極座標的線性漸變）
圓形剔除
所以我們一個一個做。首先最簡單的圓形剔除，即將正方形變成內接圓。
將這個結果（0或1）與最終結果相乘即可。然後是同心圓剔除，即隨着半徑的變化，像素呈週期性顯示/隱藏，形成不同的同心圓環，數學中常見的週期函數有三角函數和取餘函數，由於三角函數比較貴，我們用fmod來計算週期變換。
modulate(1)與fraction()的區別
x對1取餘和x的小數部分有什麼區別？第一儀限上沒有區別，但在第二儀限上是不一樣的（注：儀限指正半軸或負半軸）。首先我們看fract函數，圖像在x軸上方：
下面的圖像是fmod奇函數：
所以思考算法的時候一定要想象函數圖像，才能一目瞭然。由於像素到圓心距離是0~0.5，我們先對0.2取餘（影響圓環的數量），然後取圖像上大於0.15的部分作爲圓環的寬度，於是得到了如下的算法：
得到的buffer如下，仍然是通過step函數得到0或1，目的是與最終圖像做乘法運算：
如果要讓它動起來，則需要加上Time參數。最後我們做扇形漸變。從動畫中可以看出，以圓心爲原點的二維極座標中，隨着角度α不同，透明度不同，所以我們先求出像素的α值：利用反正切函數可以快速求出。
得到的buffer如下，此時是0~1的線性漸變，後面可以取個立方得到非線性漸變，讓曲線偏向0。
最後我們把三種buffer疊加起來，注意我沒有使用藍色節點，全是綠色的，因爲綠色節點是HLSL標準庫函數，藍色節點是UE自定義的函數（往往由多個標準函數組成），這樣做是爲了使shader代碼更容易復現。
使用的截屏插件（滾動截長圖）：Blueprint Graph Screenshot (Regardless of screen size)
此shader的整體性能：
User interpolators: 2/4 Scalars (1/4 Vectors) (TexCoords: 2, Custom: 0)
Base pass shader without light map: 65 instructions
Base pass vertex shader: 197 instructions
Texture samplers: 4/16
得到如下：（非靜止畫面）
本文分享自微信公衆號 - WebHub（myWebHub）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。