最近需要用到這個shader,就稍微研究了一下,這里做一下筆記,免得回來自己忘了~
思路:
看了不少文章,其實都大同小異,分為3步完成。
1,先建一個平面出來(也可以是個精靈),來顯示效果。當然你要是準備做屏幕特效那就當我沒說,這里不討論了,只是用法不同。
2,建立我們的shader,我們先用 unity 自帶的 GrabPass 采樣到當前平面下的像素數(shù)據(jù)(你就可以想象成屏幕截圖)
3,將抓取到的像素數(shù)據(jù)進行模糊處理
這里說一下模糊處理需要注意的細節(jié),一般做模糊的時候,我們總會想到用高斯模糊,但是其實這個不是最優(yōu)選擇,因為用高斯的話我們還需要建立高斯核,然后不斷的用它去對圖像進行濾波,次數(shù)越多,圖像越模糊。
但是實際情況中發(fā)現(xiàn),如果背景里有棱角分明的圖像時(比如ui的框框),發(fā)現(xiàn)它模糊后,輪廓還是會比較清晰(也就是不夠毛)。
所以還有很多其它的思路,核心思想就是破壞圖像,讓它變糊~
1:先對圖像進行向下采樣,再做模糊。
我們先把原始圖做低畫質(zhì)處理,比如原圖100x100,我們把它采樣縮成50x50,然后模糊完了以后,我們再把它放大回100x100。
這里還有個偷懶的招,就是用 unity 的 RenderTexture ,這樣可以直接采出來一張小的。
2:使用噪聲
這沒啥好說的,就是用噪聲紋理,來改變像素的分布。
當然我懶,還是網(wǎng)上找了個人家寫好的shader,當然它有個小問題,就是圖像是上下顛倒的,我們反轉(zhuǎn)一下uv坐標的y軸就可以了,它的實現(xiàn)思路就是對像素進行擾動,偏轉(zhuǎn)uv坐標,以達到模糊的效果。
以下是改好了的shader:
Shader
"my/FrostedGlass"
{Properties{_blurSizeXY(
"BlurSizeXY", Range(
0,
10)) =
2}SubShader{// 透明隊列,在所有不透明的幾何圖形后繪制Tags {
"Queue" =
"Transparent" }// 采樣后面的圖像GrabPass { }Pass {CGPROGRAM
#pragma target 3.0#pragma debug#pragma vertex vert#pragma fragment fragsampler2D _GrabTexture : register(s0)float _blurSizeXYstruct data {float4 vertex : POSITIONfloat3 normal : NORMAL}struct v2f {float4 position : POSITIONfloat4 screenPos : TEXCOORD0}v2f vert(data i){v2f oo
.position =
mul(UNITY_MATRIX_MVP, i
.vertex)o
.screenPos = float4(o
.position.x, -o
.position.y, o
.position.z, o
.position.w)return o}half4 frag( v2f i ) : COLOR{float2 screenPos = i
.screenPos.xy / i
.screenPos.wfloat depth= _blurSizeXY *
0.0005screenPos
.x = (screenPos
.x +
1) *
0.5screenPos
.y =
1 - (screenPos
.y +
1) *
0.5half4 sum = half4(
0,
0,
0,
0)sum += tex2D( _GrabTexture, float2(screenPos
.x-
5.0 * depth, screenPos
.y+
5.0 * depth)) *
0.025sum += tex2D( _GrabTexture, float2(screenPos
.x+
5.0 * depth, screenPos
.y-
5.0 * depth)) *
0.025sum += tex2D( _GrabTexture, float2(screenPos
.x-
4.0 * depth, screenPos
.y+
4.0 * depth)) *
0.05sum += tex2D( _GrabTexture, float2(screenPos
.x+
4.0 * depth, screenPos
.y-
4.0 * depth)) *
0.05sum += tex2D( _GrabTexture, float2(screenPos
.x-
3.0 * depth, screenPos
.y+
3.0 * depth)) *
0.09sum += tex2D( _GrabTexture, float2(screenPos
.x+
3.0 * depth, screenPos
.y-
3.0 * depth)) *
0.09sum += tex2D( _GrabTexture, float2(screenPos
.x-
2.0 * depth, screenPos
.y+
2.0 * depth)) *
0.12sum += tex2D( _GrabTexture, float2(screenPos
.x+
2.0 * depth, screenPos
.y-
2.0 * depth)) *
0.12sum += tex2D( _GrabTexture, float2(screenPos
.x-
1.0 * depth, screenPos
.y+
1.0 * depth)) *
0.15sum += tex2D( _GrabTexture, float2(screenPos
.x+
1.0 * depth, screenPos
.y-
1.0 * depth)) *
0.15sum += tex2D( _GrabTexture, screenPos-
5.0 * depth) *
0.025sum += tex2D( _GrabTexture, screenPos-
4.0 * depth) *
0.05sum += tex2D( _GrabTexture, screenPos-
3.0 * depth) *
0.09sum += tex2D( _GrabTexture, screenPos-
2.0 * depth) *
0.12sum += tex2D( _GrabTexture, screenPos-
1.0 * depth) *
0.15sum += tex2D( _GrabTexture, screenPos) *
0.16sum += tex2D( _GrabTexture, screenPos+
5.0 * depth) *
0.15sum += tex2D( _GrabTexture, screenPos+
4.0 * depth) *
0.12sum += tex2D( _GrabTexture, screenPos+
3.0 * depth) *
0.09sum += tex2D( _GrabTexture, screenPos+
2.0 * depth) *
0.05sum += tex2D( _GrabTexture, screenPos+
1.0 * depth) *
0.025return sum /
2}ENDCG}}Fallback Off
}
不過方法都是大同小異,先采樣屏幕,然后對采樣到的像素數(shù)據(jù)想法設法的把它搞糊,就可以了,2333。然后我們看看效果圖
模糊前:
模糊后:
PS:這騙文章寫的不錯,想了解更多的,可以看看
http://www.tuicool.com/articles/ZvQzAfF
總結(jié)
以上是生活随笔為你收集整理的毛玻璃,磨砂玻璃材质,shader笔记的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯,歡迎將生活随笔推薦給好友。