教程原鏈接
https://zhuanlan.zhihu.com/p/182459720
https://deepspacebanana.github.io/deepspacebanana.github.io/blog/shader/art/unreal%20engine/Rainy-Surface-Shader-Part-1
漣漪效果
fixed4 frag (v2f i) : SV_Target
{
float t = frac(_Time.y * _Speed);
fixed3 col = fixed3(t,t,t);
UNITY_APPLY_FOG(i.fogCoord, col);
return fixed4(col,1);
}
這樣可以實(shí)現(xiàn)這樣的一個(gè)漸變效果：
然后思考一下我們?cè)趺醋龀蛇@樣的效果：
我們可以看到這個(gè)點(diǎn)點(diǎn)的貼圖焊唬，作者是放在了一張貼圖的紅色通道里面：
先按下面的寫法提出紅色通道的圖：
fixed3 texColor = tex2D(_MainTex,i.uv);
col = fixed3(texColor.r,texColor.r,texColor.r);
可以看到代碼提出來(lái)的紅色通道失真非常嚴(yán)重（目前不知道為什么单寂，開了抗鋸齒和雙線性插值都不行）务热，但目前不影響我們繼續(xù)，合理想象一下吓笙，我們需要白點(diǎn)從 0 - 1，然后驟降到 0巾腕。所以按下面的寫法就完成了：
fixed4 frag (v2f i) : SV_Target
{
float t = 1-frac(_Time.y * _Speed);
fixed3 col = fixed3(t,t,t);
fixed3 texColor = tex2D(_MainTex,i.uv);
col = fixed3(texColor.r,texColor.r,texColor.r)-t;
UNITY_APPLY_FOG(i.fogCoord, col);
return fixed4(col,1);
}
可以看到效果好像是從每個(gè)圓中間逐漸向周圍出現(xiàn)的面睛，但其實(shí)這個(gè)是因?yàn)楸旧碣N圖的每個(gè)圓都是中間最白，逐漸變黑尊搬。此時(shí)此刻叁鉴，黑色部分是從 0~-1（只是因?yàn)樾∮?0 的話，顯示出來(lái)的還是黑色佛寿，所以看不出來(lái)而已幌墓，但需要記住黑色的 rgb 值也是有變化的），而白色小圓圈是從 0~1冀泻；此時(shí)想要做出這種效果常侣，我們可以想到其實(shí)就是把黑白邊界給做出來(lái)，那我們只要計(jì)算每個(gè)像素跟 0.05（這個(gè)大小可以自動(dòng)調(diào)節(jié)弹渔，但不能太大胳施，最后圓環(huán)的寬度應(yīng)該是這個(gè)值的兩倍）的距離就可以把邊界用兩條黑線給畫出來(lái)。
fixed4 frag (v2f i) : SV_Target
{
float t = 1-frac(_Time.y * _Speed);
fixed3 col = fixed3(t,t,t);
fixed3 texColor = tex2D(_MainTex,i.uv);
float dis = saturate(distance(texColor.r - t,0.05)/0.05);
col = fixed3(dis,dis,dis);
UNITY_APPLY_FOG(i.fogCoord, col);
return fixed4(col,1);
}
因?yàn)橥饷嬉苍陂W爍肢专，所以不是很清楚的看出來(lái)舞肆，黑色圓環(huán)其實(shí)是中間兩個(gè)連著很近的黑線，然后逐漸向兩邊減淡的樣子博杖〈豢瑁可以思考一下，除了小圓點(diǎn)之外的為什么也開始閃爍了剃根，其實(shí)它原本應(yīng)該是從 -1~0 的狀態(tài)哩盲，計(jì)算了距離之后，就是從 0.95~0.05 的狀態(tài)了狈醉，我們?cè)趺醋屗３植蛔兡刂侄梢园l(fā)現(xiàn)他的最小值也是 0.05，那只要用它去除 0.05舔糖，得到的值就是 1-19娱两，而大于 1 的部分顯示為顏色都是白色。再驗(yàn)證一下黑色圓環(huán)的部分是否會(huì)受到影響金吗，它的范圍應(yīng)該是 0-0.05十兢，那么除下來(lái)結(jié)果為 0 趣竣，沒(méi)有問(wèn)題。再驗(yàn)證一下小圈圈內(nèi)的部分是否會(huì)受到影響旱物，它的范圍是 0.05-0.95遥缕，也沒(méi)有問(wèn)題。ok宵呛，最后用 saturate 把值都限制在 0-1 就 ok 了（不寫這個(gè)也沒(méi)關(guān)系）
現(xiàn)在就是只有黑白单匣，沒(méi)有過(guò)渡的小圓圈的漣漪效果了”λ耄看起來(lái)有點(diǎn)密户秤，還有點(diǎn)臟（暫時(shí)不知道為什么，既然有的小圓圈是不臟的逮矛，那應(yīng)該是貼圖的問(wèn)題吧鸡号，就是 0-1 的過(guò)渡不是線性的話就會(huì)出現(xiàn)臟臟的效果）。
現(xiàn)在再?gòu)?fù)制一份须鼎，然后讓 uv 和時(shí)間都交錯(cuò)一點(diǎn)鲸伴，順便給它換成黑底的，話說(shuō)程序員是不是對(duì)深色都比較情有獨(dú)鐘晋控， 前 leader 就說(shuō)過(guò)我能不能把 mac 初始的白色終端換個(gè)顏色汞窗。
fixed4 frag (v2f i) : SV_Target
{
float lerp_t = frac(_Time.y * _Speed);
float t = 1 - lerp_t;
float t2 = 1 - frac((_Time.y) * _Speed + 0.5); // 時(shí)間偏移一點(diǎn)點(diǎn)
fixed3 col = fixed3(t,t,t);
fixed3 col2 = fixed3(t,t,t);
fixed3 texColor = tex2D(_MainTex,i.uv);
fixed3 texColor2 = tex2D(_MainTex,i.uv + float2(0.5,0.5)); // uv 偏移一點(diǎn)點(diǎn)
float dis = saturate(1-distance(texColor.r - t,0.05)/0.05);
float dis2 = saturate(1-distance(texColor2.r - t2,0.05)/0.05);
col = fixed3(dis,dis,dis);
col2 = fixed3(dis2,dis2,dis2);
fixed3 finalCol = lerp(col,col2,lerp_t); // 1的圈圈越大越偏向2，這樣就有漣漪越大赡译，越淡的效果了
UNITY_APPLY_FOG(i.fogCoord, finalCol);
return fixed4(finalCol,1);
}
這樣乍一看沒(méi)什么問(wèn)題杉辙，但其實(shí)第二張圖從 0.5 會(huì)有一個(gè)驟變，所以思考一下捶朵，圖 1 和圖 2 相差了 0.5s 的時(shí)間蜘矢，，但還是要保證對(duì)于每個(gè)圖來(lái)說(shuō)综看，都是要從 1-0品腹，畫個(gè)簡(jiǎn)單的圖就會(huì)發(fā)現(xiàn)這是不可能的，因?yàn)樵趫D 1 在 0.5 的時(shí)候要求圖 2 是1红碑。那退而求其次舞吭，對(duì)每一個(gè)圖來(lái)說(shuō)都要從 0-1-0。像下面這個(gè)圖一樣：
會(huì)發(fā)現(xiàn)正好滿足我們需求析珊，對(duì)于圖 1 和圖 2 的每一個(gè)周期來(lái)說(shuō)都是從 0-1-0羡鸥，代碼如下：
fixed4 frag (v2f i) : SV_Target
{
float lerp_t = frac(_Time.y * _Speed);
float t = 1 - lerp_t;
float t2 = 1 - frac((_Time.y) * _Speed + 0.5); // 時(shí)間偏移一點(diǎn)點(diǎn)
fixed3 col = fixed3(t,t,t);
fixed3 col2 = fixed3(t,t,t);
fixed3 texColor = tex2D(_MainTex,i.uv);
fixed3 texColor2 = tex2D(_MainTex,i.uv + float2(0.5,0.5)); // uv 偏移一點(diǎn)點(diǎn)
float dis = saturate(1-distance(texColor.r - t,0.05)/0.05);
float dis2 = saturate(1-distance(texColor2.r - t2,0.05)/0.05);
col = fixed3(dis,dis,dis);
col2 = fixed3(dis2,dis2,dis2);
float lerp_t2 = sin(lerp_t * 3.14159); // 把 [0,1] 映射到 [0,3.14159] 得到 sin 的半個(gè)周期，所以并不需要 abs
fixed3 finalCol = lerp(col2,col,lerp_t2);
UNITY_APPLY_FOG(i.fogCoord, finalCol);
return fixed4(finalCol,1);
}
順便說(shuō)一下之前覺(jué)得雨點(diǎn)很臟忠寻，很密集的問(wèn)題惧浴，是因?yàn)橛挈c(diǎn)確實(shí)很多，所以在面板上將大小設(shè)置為 0.5 就好了奕剃，只使用四分之一的大小衷旅。
