歡迎關注“數天技術”！“ 作者介紹：數字天空項目組客戶端工程師 – 文立”

導語

在游戲界面顯示時，通常會對背景進行模糊，使顯示界面更加清楚。此外，在處理景深(Depth of Field)和泛光(Bloom)等后處理特效時，模糊效果也是必不可少的。本文針對移動平臺，結合實際項目中遇到的UI背景模糊顯示效果，討論了模糊效果的優化解決方案。

為了測試不同方案的實際模糊性能，新建了一個較為簡單的測試工程，并使用了2款較為低端的手機進行測試：紅米4，處理器為驍龍625和三星Galaxy C5，處理器為驍龍617。在沒有背景模糊效果時，2款手機的幀率都穩定在60FPS左右。

高斯模糊

說到模糊效果，必然提及高斯模糊。

高斯模糊通常用來減少圖像噪聲，降低細節層次和圖像模糊等，其利用高斯濾波函數處理圖像。

簡單地講，高斯模糊就是對圖像中的每個像素進行加權平均，利用高斯核函數對像素周圍的多個采樣點加權相加，結果作為新的像素值。在實現時，可以預先計算歸一化的二維高斯核函數。當采用n階高斯核函數時，算法的復雜度是Ο(n2)。

一種常見的優化方案是將二維運算拆分成兩次一維運算，先在水平方向做一維高斯運算，再在豎直方向做一次高斯運算，以7階二維高斯運算為例，二維運算需要49次計算，拆分成兩次一維運算只需要14次計算，大大降低了計算消耗。

一維0均值高斯函數數學表示如下：

此外，因為背景圖片本來就要進行模糊，沒有必要按照全分辨率進行采樣，對背景圖片進行降采樣可以提升模糊計算效率。

最初項目里采用的模糊方案就是優化高斯模糊算法。

GrabPass {}Pass{?…?}?//?處理水平方向GrabPass?{}Pass{?…?}?//?處理垂直方向

利用2次GrabPass進行截屏，截屏結果一次進行水平方向模糊處理，一次進行垂直方向模糊處理，2次處理都用了9個采樣點。由于進行了2次截屏，然后進行高斯處理，性能消耗挺大的。游戲在一些手機上開啟模糊時較為卡頓，性能較差。

利用測試工程進行測試，結果在紅米上幀率只有40FPS，在三星上幀率只有20FPS。可以看到，在低端機上這樣處理的性能損耗還是很大的，比較嚴重的影響了游戲體驗。

初步優化方案就是減少2次處理的采樣點數，從9個減為7個，并且發現原來的采樣坐標計算是在fragment shader中計算，會對性能產生一定影響，改在vertex shader中計算，然后傳到fragment shader中。

再次測試，在紅米上幀率提升到46FPS，在三星上仍然只有22FPS，比之前結果稍好一點。

因為移動端使用GrabPass性能消耗較大，考慮只用一次截屏，利用原始高斯模糊算法進行測試，因為原始計算采樣點數較多，所以只使用了5階高斯核函數。

fixed4 col = fixed(0, 0, 0, 0);for?(int?s?=?0;?s?5;?++s){for?(int?t?=?0;?t?5;?++t){half4?uv?=?i.grabuv?+?_GrabTexture_TexelSize?*?half4(s?-?2,?t?-?2,?0,?0)?*?_BlurRadius;col?+=?tex2Dproj(_GrabTexture,?uv)?*?GaussWeight[s][t];}}return?col;

測試結果在紅米上幀率降到20FPS，三星上幀率降到13FPS。果然還是采樣點數過多，計算消耗太大。

后來考慮過使用后處理或者RenderTexture，但是這樣會對前景界面產生影響，不能很好地產生背景模糊效果。

Scriptable?

Render?Pipeline

為了不使用GrabPass，減少性能開銷，嘗試從Unity的渲染管線看看能不能在渲染背景遮罩之前進行截屏處理。

在2018年，Unity官方推出了Scriptable Render Pipeline(可編程渲染管線)，用戶可以根據自己項目的實際需要自定義渲染管線，或者使用官方開放的2個模板：LightweightRenderPipeline和HighDifinitionRenderPipeline，目前這2個渲染管線還處于測試當中，會有一些變動。在LightweightRP中，可以自定義ScriptableRenderPass，并可以自定義RenderPassEvents，目前預設了BeforeRendering，Before/AfterRenderingShadows，Before/AfterRenderingPrepasses，Before/AfterRenderingOpaques，…,AfterRendering等系列事件。

因為UI界面都是在Transparent階段進行繪制的，如何在背景遮罩之前增加一個pass進行模糊處理，仍未找到一個好的辦法，可能是我對可編程渲染管線理解尚不深刻，雖然沒有找到方法，還是做個記錄，后面可以繼續研究。

Kawase模糊

最后還是采用2個GrabPass，但是要對高斯模糊算法再次優化，后面發現了一種優化高斯模糊算法的Kawase模糊算法。

Kawase模糊算法最先是由Masaki Kawase在GDC2003上提出的，是一種性能優于高斯模糊算法，但是模糊效果稍差的解決方案。該算法最初用于泛光效果，效果十分接近高斯模糊。

Kawase濾波器是一個多通道濾波器，每個通道都會利用上一通道的結果，通過累加足夠的濾波通道逼近高斯濾波器。在每個通道中，對距離當前像素一定距離的矩形范圍的采樣點進行平均更新當前像素值。處理通道的數量和距離像素中心的距離可以根據結果靈活調整。

5通道Kawase模糊，采樣距離分別為0, 1, 2, 2, 3

測試采用2個通道，每個通道處理4個采樣點，通道采樣距離逐漸增加，具體數值可以調整。

采樣代碼如下：

fixed4 col = fixed4(0, 0, 0, 0);col?+=?tex2Dproj(_GrabTexture,?UNITY_PROJ_COORD(i.uvgrab[0]));col?+=?tex2Dproj(_GrabTexture,?UNITY_PROJ_COORD(i.uvgrab[1]));col?+=?tex2Dproj(_GrabTexture,?UNITY_PROJ_COORD(i.uvgrab[2]));col?+=?tex2Dproj(_GrabTexture,?UNITY_PROJ_COORD(i.uvgrab[3]));col?*=?0.25;return?col;

測試結果在紅米上幀率未見明顯下降，在三星上穩定在28FPS左右，達到還算流暢的效果。模糊效果相比高斯模糊稍差一點，但是仍然可以接受。Kawase模糊只用4個采樣點，能夠獲得比較不錯的模糊效果，是一種不錯的解決方案。

最后將項目中使用的9階高斯模糊算法和Kawase模糊算法進行實際對比，如圖所示：

(a)優化高斯算法

(b)Kawase算法

從圖中可以看出，Kawase算法的模糊效果稍差于高斯算法，但是考慮到Kawase算法每個通道只用了4個采樣點，算法消耗明顯降低，模糊效果也是可以接受的，仍是一種不錯的模糊方案。

總結

采用原始高斯模糊算法，雖然只用一次截屏，但是采樣點數過多，即使只是5階，計算消耗仍然太高，移動端性能承受不了。采用2次截屏方案，優化高斯算法分成2次一維模糊處理，大大減少了采樣點，性能有所提升，但仍對幀率有較大影響，通道采樣點數可以根據模糊效果和機器性能進行選擇，一般采用5個或7個采樣點；Kawase模糊算法每個通道只用4個采樣點，減少了計算消耗，性能最好，并且顯示效果比較接近高斯模糊，是一種不錯的模糊方案。

另外，對于Shader編寫有一些常見的優化：

1. 使用合適的數值精度：

0.0-1.0范圍內的顏色值通常使用低精度變量fixed表示；

位置數據通常使用高精度float；

光照計算中的法線和向量通常使用中等精度half；

不清楚時，數據默認采用高精度float。

2. 延后向量計算

先進行標量計算，再進行向量計算

3. 使用Uniforms或Constants變量，而不是在Shader中計算

4. 避免動態查找

避免在fragment shader中對紋理坐標進行數學計算，在vertex shader中計算。

uniform sampler2D textureSampler;fixed4?frag(v2f?i){???half2?modifiedTexCoord?=?half2(1?–?i.vTexCoord.x,?1?–?i.vTexCoord.y);???fixed4?col?=?texture2D(textureSampler,?modifiedTexCoord);return?col;}

參考資料

https://blog.csdn.net/poem_qianmo/article/details/51871531

https://software.intel.com/en-us/blogs/2014/07/15/an-investigation-of-fast-real-time-gpu-based-image-blur-algorithms

http://www.daionet.gr.jp/~masa/archives/GDC2003_DSTEAL.ppt

https://developer.apple.com/library/archive/documentation/3DDrawing/Conceptual/OpenGLES_ProgrammingGuide/BestPracticesforShaders/BestPracticesforShaders.html

-END-

數天技術

讓技術·更有趣

總結

以上是生活随笔為你收集整理的unity 手机 模糊效果_GUI背景模糊效果优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。