unity 模型渐变消失_Unity 雨水滴到屏幕效果
文章目录
- 前言
- 一、实现过程
- 1.代码
- 2.代码分步解析
- 总结
- 参考
前言
本文主要介绍用unity实现雨水滴到屏幕的效果,文章介绍的是基础实现,读完这篇文章再去实现复杂效果会更得心应手些。我们先看更高级效果的图片:
一、实现过程
1.代码
先直接上代码,后面再做介绍:
Shader "Unlit/RainDrop"
{Properties{_MainTex ("Texture", 2D) = "white" {}_Size("Size", Range(0, 100)) = 1.0_T("Time", Float) = 1.0_Distortion("Distortion", Float) = -5_Blur("Blur", Range(0, 1)) = 0.0}SubShader{Tags { "RenderType"="Opaque" }LOD 100Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float2 uv : TEXCOORD0;};struct v2f{float2 uv : TEXCOORD0;float4 vertex : SV_POSITION;};sampler2D _MainTex;float4 _MainTex_ST;half _Size;half _T;half _Distortion;half _Blur;v2f vert (appdata v){v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _MainTex);return o;}// 求伪随机数half N21(half2 p){p = frac(p * half2(123.34, 345.45));p += dot(p, p + 34.345);return frac(p.x + p.y);} half3 layer(half2 UV, half T){half t = fmod( _Time.y + T, 3600);half4 col = half4(0, 0, 0, 1.0);half aspect = half2(2, 1);half2 uv = UV * _Size * aspect;uv.y += t * 0.25;half2 gv = frac(uv) - 0.5;//-0.5,调整原点为中间half2 id = floor(uv);half n = N21(id); // 0 1t += n * 6.2831; //2PIhalf w = UV.y * 10;half x = (n - 0.5) * 0.8;x += (0.4 - abs(x)) * sin(3 * w) * pow(sin(w), 6) * 0.45;half y = -sin(t + sin(t + sin(t) * 0.5)) * 0.45;y -= (gv.x - x) * (gv.x - x);half2 dropPos = (gv - half2(x, y)) / aspect; //- half2(x,y) 为了移动half drop = smoothstep(0.05, 0.03, length(dropPos));half2 trailPos = (gv - half2(x, t * 0.25)) / aspect; //- half2(x,y) 为了移动trailPos.y = (frac(trailPos.y * 8) - 0.5) / 8;half trail = smoothstep(0.03, 0.01, length(trailPos));half fogTrail = smoothstep(-0.05, 0.05, dropPos.y);// 拖尾小水滴慢慢被拖掉了fogTrail *= smoothstep(0.5, y, gv.y);// 拖尾小水滴渐变消失fogTrail *= smoothstep(0.05, 0.04, abs(dropPos.x));trail *= fogTrail;//col += fogTrail * 0.5;//col += trail;//col += drop;//if(gv.x > 0.48 || gv.y > 0.49) col = half4(1.0, 0, 0, 1.0); // 辅助线half2 offset = drop * dropPos + trail * trailPos;return half3(offset, fogTrail);}half4 frag (v2f i) : SV_Target{half3 drops = layer(i.uv, _T);drops += layer(i.uv * 1.25 + 7.52, _T);drops += layer(i.uv * 1.35 + 1.54, _T);drops += layer(i.uv * 1.57 - 7.52, _T); half blur = _Blur * 7 * (1 - drops.z);half4 col = tex2Dlod(_MainTex, half4(i.uv + drops.xy * _Distortion, 0, blur));return col;}ENDCG}}}
下图显示了上面那段代码的效果,读者可自行在unity中先贴这段代码看,后面会做详细解析:
2.代码分步解析
下面是实现步骤:
【1】先将uv平铺多次,为后面实现多个雨滴效果。
直接贴片元着色器代码:
half4 frag (v2f i) : SV_Target{half4 col = half4(0, 0, 0, 1.0);half2 aspect = half2(1, 1);//长宽比half2 uv = i.uv * _Size * aspect;half2 gv = frac(uv) - 0.5;//-0.5,将左下角的原点调整为中间col.rg = gv;if(gv.x > 0.48 || gv.y > 0.49) col = half4(1.0, 0, 0, 1.0); // 辅助线return col;}
下图显示了上面那段代码的效果:
说明:A为从左下角的原点调整为中间的情况, _Size 为平铺多次的情况,读者可边看边在untiy上操作。
half2 aspect = half(2, 1);//长宽比
设置长宽比为2:1后,得到效果:
【2】实现多个雨滴效果
直接贴片元着色器代码:
half4 frag (v2f i) : SV_Target{half4 col = half4(0, 0, 0, 1.0);half2 aspect = half2(3, 1);//长宽比half2 uv = i.uv * _Size * aspect;half2 gv = frac(uv) - 0.5;//-0.5,将左下角的原点调整为中间half drop = smoothstep(0.05, 0.03, length(gv));//画圆, length(gv),可以理解为半径col += drop;if(gv.x > 0.48 || gv.y > 0.49) col = half4(1.0, 0, 0, 1.0); // 辅助线return col;}
下图显示了上面那段代码的效果:
先附上smoothstep的解析,后续有时间会发文介绍glsl相关函数的理解,以及如何使用这些函数去实现复杂的效果。以下是smoothstep的解析:
我们先打开网址
Desmos | 图形计算器www.desmos.com
,输入如图所示:
smoothstep的公式就是s = k^2*(3 - 2k), 图上所示就是smoothstep(0.4, 0.6, x), 如果是反过来就是smoothstep(0.6, 0.4, x), 得到的就是如图所示:
我们可以直接在
Shadertoy BETAwww.shadertoy.com
上演示输入如图所示代码:
0.2 ->0.0 可以理解为简单的反向操作如图所示:
【4】水滴移动
直接贴片元着色器代码:
half4 frag (v2f i) : SV_Target{half t = _Time.y;half4 col = half4(0, 0, 0, 1.0);half2 aspect = half2(3, 1);//长宽比half2 uv = i.uv * _Size * aspect;half2 gv = frac(uv) - 0.5;//-0.5,将左下角的原点调整为中间half x = 0;half y = sin(t);//水珠是上下来回移动的half2 dropPos = (gv - half2(x, y)) / aspect;// 移动水滴,除以aspect是因为之前的uv*aspecthalf drop = smoothstep(0.05, 0.03, length(dropPos));//画圆, length(gv),可以理解为半径col += drop;if(gv.x > 0.48 || gv.y > 0.49) col = half4(1.0, 0, 0, 1.0); // 辅助线return col;}
改动下代码,让水滴是往下移动的:
half4 frag (v2f i) : SV_Target{half t = _Time.y;half4 col = half4(0, 0, 0, 1.0);half2 aspect = half2(3, 1);//长宽比half2 uv = i.uv * _Size * aspect;uv.y += t * 0.25; //水滴周期移动的同时,uv也往下移动,这样就能做到水滴往下移动的效果half2 gv = frac(uv) - 0.5;//-0.5,将左下角的原点调整为中间half x = 0;half y = -sin(t + sin(t + sin(t) * 0.5)) * 0.45;//将y改为更复杂些的移动(2)half2 dropPos = (gv - half2(x, y)) / aspect;// 移动水滴,除以aspect是因为之前的uv*aspecthalf drop = smoothstep(0.05, 0.03, length(dropPos));//画圆, length(gv),可以理解为半径col += drop;if(gv.x > 0.48 || gv.y > 0.49) col = half4(1.0, 0, 0, 1.0); // 辅助线return col;}
读者需要按照步骤去实现,更能理解算法表现的效果,帮助理解。上述代码中(2)得到的函数图是:
读者可自行控制算法,调出更好的效果。
【4】水滴拖尾效果,拖尾水滴滑下
1、先画一个拖尾水滴,代码:
half4 frag (v2f i) : SV_Target{half t = _Time.y;half4 col = half4(0, 0, 0, 1.0);half2 aspect = half2(3, 1);//长宽比half2 uv = i.uv * _Size * aspect;uv.y += t * 0.25; //水滴周期移动的同时,uv也往下移动,这样就能做到水滴往下移动的效果half2 gv = frac(uv) - 0.5;//-0.5,将左下角的原点调整为中间half x = 0;half y = -sin(t + sin(t + sin(t) * 0.5)) * 0.45;//将y改为更复杂些的移动(2)half2 dropPos = (gv - half2(x, y)) / aspect;// 移动水滴,除以aspect是因为之前的uv*aspecthalf trail = smoothstep(0.03, 0.01, length(gv));//拖尾小水滴half drop = smoothstep(0.05, 0.03, length(dropPos));//画圆, length(gv),可以理解为半径col += drop;col += trail;if(gv.x > 0.48 || gv.y > 0.49) col = half4(1.0, 0, 0, 1.0); // 辅助线return col;}
下图显示了上面那段代码的效果:
2、再计算移动,代码:
half4 frag (v2f i) : SV_Target{half t = _Time.y;half4 col = half4(0, 0, 0, 1.0);half2 aspect = half2(3, 1);//长宽比half2 uv = i.uv * _Size * aspect;uv.y += t * 0.25; //水滴周期移动的同时,uv也往下移动,这样就能做到水滴往下移动的效果half2 gv = frac(uv) - 0.5;//-0.5,将左下角的原点调整为中间half x = 0;half y = -sin(t + sin(t + sin(t) * 0.5)) * 0.45;//将y改为更复杂些的移动(2)half2 dropPos = (gv - half2(x, y)) / aspect;// 移动水滴,除以aspect是因为之前的uv*aspecthalf2 trailPos = (gv - half2(x, t * 0.25)) / aspect; //- half2(x,y) 为了移动trailPos.y = (frac(trailPos.y * 8) - 0.5) / 8; // -0.5是将半圆调整为完整圆half trail = smoothstep(0.03, 0.01, length(trailPos));//拖尾小水滴half drop = smoothstep(0.05, 0.03, length(dropPos));//画圆, length(gv),可以理解为半径col += drop;col += trail;if(gv.x > 0.48 || gv.y > 0.49) col = half4(1.0, 0, 0, 1.0); // 辅助线return col;}
下图显示了上面那段代码的效果:
3、接下来我们将下部分拖尾水滴清理掉,边移动拖尾边消失,代码:
half4 frag (v2f i) : SV_Target{half t = _Time.y;half4 col = half4(0, 0, 0, 1.0);half2 aspect = half2(3, 1);//长宽比half2 uv = i.uv * _Size * aspect;uv.y += t * 0.25; //水滴周期移动的同时,uv也往下移动,这样就能做到水滴往下移动的效果half2 gv = frac(uv) - 0.5;//-0.5,将左下角的原点调整为中间half x = 0;half y = -sin(t + sin(t + sin(t) * 0.5)) * 0.45;//将y改为更复杂些的移动(2)half2 dropPos = (gv - half2(x, y)) / aspect;// 移动水滴,除以aspect是因为之前的uv*aspecthalf2 trailPos = (gv - half2(x, t * 0.25)) / aspect; //- half2(x,y) 为了移动trailPos.y = (frac(trailPos.y * 8) - 0.5) / 8; // -0.5是将半圆调整为完整圆half trail = smoothstep(0.03, 0.01, length(trailPos));//拖尾小水滴half drop = smoothstep(0.05, 0.03, length(dropPos));//画圆, length(gv),可以理解为半径trail *= smoothstep(-0.05, 0.05, dropPos.y);//将下部分拖尾水滴清理掉,边移动拖尾边消失col += drop;col += trail;if(gv.x > 0.48 || gv.y > 0.49) col = half4(1.0, 0, 0, 1.0); // 辅助线return col;}
下图显示了上面那段代码的效果:
3、然后将水滴做个渐变,从上到下从无到有,代码:
... ...
half drop = smoothstep(0.05, 0.03, length(dropPos));//画圆, length(gv),可以理解为半径
trail *= smoothstep(-0.05, 0.05, dropPos.y);//将下部分拖尾水滴清理掉,边移动拖尾边消失
trail *= smoothstep(0.5, y, gv.y);//将水滴做个渐变,从上到下从无到有, 0.5是以gv为坐标的,顶部0.5,底部-0.5
col += drop;
col += trail;
... ...
下图显示了上面那段代码的效果:
【5】水滴做偏移,得到一种失真的效果,这时我们需要同时对x,y做偏移
1、同样,先贴上简单的效果,先改变下水滴的形状,代码:
half4 frag (v2f i) : SV_Target{... ... half x = 0;half y = -sin(t + sin(t + sin(t) * 0.5)) * 0.45;//将y改为更复杂些的移动(2)y -= gv.x * gv.x;//改变水滴形状half2 dropPos = (gv - half2(x, y)) / aspect;// 移动水滴,除以aspect是因为之前的uv*aspect ... ... return col;}
下图显示了上面那段代码的效果:
2、对x做偏移,代码如下:
half4 frag (v2f i) : SV_Target{half t = _Time.y;half4 col = half4(0, 0, 0, 1.0);half2 aspect = half2(3, 1);//长宽比half2 uv = i.uv * _Size * aspect;uv.y += t * 0.25; //水滴周期移动的同时,uv也往下移动,这样就能做到水滴往下移动的效果half2 gv = frac(uv) - 0.5;//-0.5,将左下角的原点调整为中间half w = i.uv.y * 10;half x = sin(3 * w) * pow(sin(w), 6) * 0.45;//对x做些复杂的移动,(1)half y = -sin(t + sin(t + sin(t) * 0.5)) * 0.45;//将y改为更复杂些的移动(2)y -= (gv.x - x) * (gv.x - x);half2 dropPos = (gv - half2(x, y)) / aspect;// 移动水滴,除以aspect是因为之前的uv*aspecthalf2 trailPos = (gv - half2(x, t * 0.25)) / aspect; //- half2(x,y) 为了移动trailPos.y = (frac(trailPos.y * 8) - 0.5) / 8; // -0.5是将半圆调整为完整圆half trail = smoothstep(0.03, 0.01, length(trailPos));//拖尾小水滴half drop = smoothstep(0.05, 0.03, length(dropPos));//画圆, length(gv),可以理解为半径trail *= smoothstep(-0.05, 0.05, dropPos.y);//将下部分拖尾水滴清理掉,边移动拖尾边消失trail *= smoothstep(0.5, y, gv.y);//将水滴做个渐变,从上到下从无到有, 0.5是以gv为坐标的,顶部0.5,底部-0.5col += drop;col += trail;if(gv.x > 0.48 || gv.y > 0.49) col = half4(1.0, 0, 0, 1.0); // 辅助线return col;}
(1)中的函数图:
下图显示了上面那段代码的效果:
3、我们需要更随机些的效果,因此引入伪随机数:
// 求伪随机数half N21(half2 p){p = frac(p * half2(123.34, 345.45));p += dot(p, p + 34.345);return frac(p.x + p.y);}
先测试下伪随机数,代码:
... ...
if(gv.x > 0.48 || gv.y > 0.49) col = half4(1.0, 0, 0, 1.0); // 辅助线
col *= 0; col += N21(i.uv); //测试代码
... ...
下图显示了上面那段代码的效果:
可以得到噪点图,再把 col += N21(i.uv); 改为col += N21(id); 代码如下:
if(gv.x > 0.48 || gv.y > 0.49) col = half4(1.0, 0, 0, 1.0); // 辅助线
col *= 0; col += N21(id);
下图显示了上面那段代码的效果:
我们调整时间处理代码:
half4 frag (v2f i) : SV_Target{//每两个小时重置下,这样不会得到太大的数字,效果不平滑(3)half t = fmod(_Time.y * _T, 7200);... ...
}
(3)中如果数字太大会得到如图效果,效果很不好。
4、接下来我们完善下我们的效果,代码:
half4 frag (v2f i) : SV_Target{half t = fmod(_Time.y * _T, 7200);//每两个小时重置下,这样不会得到太大的数字,效果不平滑(3)half4 col = half4(0, 0, 0, 1.0);half2 aspect = half2(3, 1);//长宽比half2 uv = i.uv * _Size * aspect;uv.y += t * 0.25; //水滴周期移动的同时,uv也往下移动,这样就能做到水滴往下移动的效果half2 gv = frac(uv) - 0.5;//-0.5,将左下角的原点调整为中间half2 id = floor(uv);half n = N21(id); // 0 1t += n * 6.2831; //2PIhalf w = i.uv.y * 10;half x = (n - 0.5) * 0.8;; // -0.4 - 0.4x += (0.4 - abs(x)) * sin(3 * w) * pow(sin(w), 6) * 0.45;// 0.4- abs(x), 目的是限制在边框内摆动half y = -sin(t + sin(t + sin(t) * 0.5)) * 0.45;//将y改为更复杂些的移动(2)y -= (gv.x - x) * (gv.x - x);half2 dropPos = (gv - half2(x, y)) / aspect;// 移动水滴,除以aspect是因为之前的uv*aspecthalf2 trailPos = (gv - half2(x, t * 0.25)) / aspect; //- half2(x,y) 为了移动trailPos.y = (frac(trailPos.y * 8) - 0.5) / 8; // -0.5是将半圆调整为完整圆half trail = smoothstep(0.03, 0.01, length(trailPos));//拖尾小水滴half drop = smoothstep(0.05, 0.03, length(dropPos));//画圆, length(gv),可以理解为半径trail *= smoothstep(-0.05, 0.05, dropPos.y);//将下部分拖尾水滴清理掉,边移动拖尾边消失trail *= smoothstep(0.5, y, gv.y);//将水滴做个渐变,从上到下从无到有, 0.5是以gv为坐标的,顶部0.5,底部-0.5col += drop;col += trail;if(gv.x > 0.48 || gv.y > 0.49) col = half4(1.0, 0, 0, 1.0); // 辅助线//col *= 0; col += N21(id);return col;}
下图显示了上面那段代码的效果:
【6】水滴滑动拖尾雾效果
1、先实现第一步效果,代码:
half4 frag(v2f i) : SV_Target{half t = fmod(_Time.y * _T, 7200);//每两个小时重置下,这样不会得到太大的数字,效果不平滑(3)half4 col = half4(0, 0, 0, 1.0);half2 aspect = half2(3, 1);//长宽比half2 uv = i.uv * _Size * aspect;uv.y += t * 0.25; //水滴周期移动的同时,uv也往下移动,这样就能做到水滴往下移动的效果half2 gv = frac(uv) - 0.5;//-0.5,将左下角的原点调整为中间half2 id = floor(uv);half n = N21(id); // 0 1t += n * 6.2831; //2PIhalf w = i.uv.y * 10;half x = (n - 0.5) * 0.8;; // -0.4 - 0.4x += (0.4 - abs(x)) * sin(3 * w) * pow(sin(w), 6) * 0.45;// 0.4- abs(x), 目的是限制在边框内摆动half y = -sin(t + sin(t + sin(t) * 0.5)) * 0.45;//将y改为更复杂些的移动(2)y -= (gv.x - x) * (gv.x - x);half2 dropPos = (gv - half2(x, y)) / aspect;// 移动水滴,除以aspect是因为之前的uv*aspecthalf2 trailPos = (gv - half2(x, t * 0.25)) / aspect; //- half2(x,y) 为了移动trailPos.y = (frac(trailPos.y * 8) - 0.5) / 8; // -0.5是将半圆调整为完整圆half trail = smoothstep(0.03, 0.01, length(trailPos));//拖尾小水滴half drop = smoothstep(0.05, 0.03, length(dropPos));//画圆, length(gv),可以理解为半径half fogTrail = smoothstep(-0.05, 0.05, dropPos.y);//将下部分拖尾水滴清理掉,边移动拖尾边消失fogTrail *= smoothstep(0.5, y, gv.y);//将水滴做个渐变,从上到下从无到有, 0.5是以gv为坐标的,顶部0.5,底部-0.5trail *= fogTrail;col += fogTrail * 0.5;col += drop;col += trail;if (gv.x > 0.48 || gv.y > 0.49) col = half4(1.0, 0, 0, 1.0); // 辅助线//col *= 0; col += N21(id);return col;
}
下图显示了上面那段代码的效果:
2、我们需要讲上图的两边雾的效果缩小下,代码:
half drop = smoothstep(0.05, 0.03, length(dropPos));//画圆, length(gv),可以理解为半径
half fogTrail = smoothstep(-0.05, 0.05, dropPos.y);//将下部分拖尾水滴清理掉,边移动拖尾边消失
fogTrail *= smoothstep(0.5, y, gv.y);//将水滴做个渐变,从上到下从无到有, 0.5是以gv为坐标的,顶部0.5,底部-0.5
fogTrail *= smoothstep(0.05, 0.04, abs(dropPos.x));// 两边雾的效果缩小下
trail *= fogTrail;
col += fogTrail * 0.5;
下图显示了上面那段代码的效果, 可以看出两边雾被缩小了:
【7】结合主纹理,得到简答的真实水滴屏幕效果
1、直接贴代码:
half4 frag(v2f i) : SV_Target{half t = fmod(_Time.y * _T, 7200);//每两个小时重置下,这样不会得到太大的数字,效果不平滑(3)half4 col = half4(0, 0, 0, 1.0);half2 aspect = half2(3, 1);//长宽比half2 uv = i.uv * _Size * aspect;uv.y += t * 0.25; //水滴周期移动的同时,uv也往下移动,这样就能做到水滴往下移动的效果half2 gv = frac(uv) - 0.5;//-0.5,将左下角的原点调整为中间half2 id = floor(uv);half n = N21(id); // 0 1t += n * 6.2831; //2PIhalf w = i.uv.y * 10;half x = (n - 0.5) * 0.8;; // -0.4 - 0.4x += (0.4 - abs(x)) * sin(3 * w) * pow(sin(w), 6) * 0.45;// 0.4- abs(x), 目的是限制在边框内摆动half y = -sin(t + sin(t + sin(t) * 0.5)) * 0.45;//将y改为更复杂些的移动(2)y -= (gv.x - x) * (gv.x - x);half2 dropPos = (gv - half2(x, y)) / aspect;// 移动水滴,除以aspect是因为之前的uv*aspecthalf2 trailPos = (gv - half2(x, t * 0.25)) / aspect; //- half2(x,y) 为了移动trailPos.y = (frac(trailPos.y * 8) - 0.5) / 8; // -0.5是将半圆调整为完整圆half trail = smoothstep(0.03, 0.01, length(trailPos));//拖尾小水滴half drop = smoothstep(0.05, 0.03, length(dropPos));//画圆, length(gv),可以理解为半径half fogTrail = smoothstep(-0.05, 0.05, dropPos.y);//将下部分拖尾水滴清理掉,边移动拖尾边消失fogTrail *= smoothstep(0.5, y, gv.y);//将水滴做个渐变,从上到下从无到有, 0.5是以gv为坐标的,顶部0.5,底部-0.5fogTrail *= smoothstep(0.05, 0.04, abs(dropPos.x));trail *= fogTrail;col += fogTrail * 0.5;col += drop;col += trail;//if (gv.x > 0.48 || gv.y > 0.49) col = half4(1.0, 0, 0, 1.0); // 辅助线//col *= 0; col += N21(id);half2 offset = drop * dropPos + trail * trailPos;half4 finalColor = tex2D(_MainTex, i.uv + offset * _Distortion);return finalColor;
}
下图显示了上面那段代码的效果:
2、接下来我们需要对主纹理采样进行处理,得到一种雾屏的效果
代码:
half2 offset = drop * dropPos + trail * trailPos;
//这里为啥1-fogTrail,读者可去试下,得到拖尾雾效果是相反的
half blur = _Blur * 7 * (1 - fogTrail);
//直接将tex2D改为tex2dlod, _Blur控制模糊程度
//tex2Dlod(ref: https://msdn.microsoft.com/en-us/library/windows/desktop/bb509680%28v=vs.85%29.aspx)
half4 finalColor = tex2Dlod(_MainTex, half4(i.uv + offset * _Distortion, 0, blur ));
下图显示了上面那段代码的效果:
3、接下来我们需要整理下代码:
half3 dropLayer(half2 UV, half T){half t = fmod( _Time.y + T, 3600);half4 col = half4(0, 0, 0, 1.0);half aspect = half2(2, 1);half2 uv = UV * _Size * aspect;uv.y += t * 0.25;half2 gv = frac(uv) - 0.5;//-0.5,调整原点为中间half2 id = floor(uv);half n = N21(id); // 0 1t += n * 6.2831; //2PIhalf w = UV.y * 10;half x = (n - 0.5) * 0.8;x += (0.4 - abs(x)) * sin(3 * w) * pow(sin(w), 6) * 0.45;half y = -sin(t + sin(t + sin(t) * 0.5)) * 0.45;y -= (gv.x - x) * (gv.x - x);half2 dropPos = (gv - half2(x, y)) / aspect; //- half2(x,y) 为了移动half drop = smoothstep(0.05, 0.03, length(dropPos));half2 trailPos = (gv - half2(x, t * 0.25)) / aspect; //- half2(x,y) 为了移动trailPos.y = (frac(trailPos.y * 8) - 0.5) / 8;half trail = smoothstep(0.03, 0.01, length(trailPos));half fogTrail = smoothstep(-0.05, 0.05, dropPos.y);// 拖尾小水滴慢慢被拖掉了fogTrail *= smoothstep(0.5, y, gv.y);// 拖尾小水滴渐变消失fogTrail *= smoothstep(0.05, 0.04, abs(dropPos.x));trail *= fogTrail;//col += fogTrail * 0.5;//col += trail;//col += drop;//if(gv.x > 0.48 || gv.y > 0.49) col = half4(1.0, 0, 0, 1.0); // 辅助线half2 offset = drop * dropPos + trail * trailPos;return half3(offset, fogTrail);}half4 frag (v2f i) : SV_Target{half3 drops = dropLayer(i.uv, _T); half blur = _Blur * 7 * (1 - drops.z);half4 col = tex2Dlod(_MainTex, half4(i.uv + drops.xy * _Distortion, 0, blur));return col;}
【8】现在的雨滴效果还不够,我们需要叠加几层,效果会更丰富些
half4 frag (v2f i) : SV_Target{half3 drops = dropLayer(i.uv, _T);//这里的参数读者可自行测试控制drops += dropLayer(i.uv * 1.25 + 7.52, _T);rops += dropLayer(i.uv * 1.35 + 1.54, _T);drops += dropLayer(i.uv * 1.57 - 7.52, _T); half blur = _Blur * 7 * (1 - drops.z);half4 col = tex2Dlod(_MainTex, half4(i.uv + drops.xy * _Distortion, 0, blur));return col;}
上面得到的效果就是开篇的那种效果了,读者还可以结合抓屏效果去实现更好的效果,性能上这块算法也没比较复杂的指令运算,移动端可以使用的,读者液可自行使用renderdoc等GPU测试工具测试下即可。
总结
本文实现的雨水滴到屏幕效果相对来说还是不够丰富的,如果读者想实现更复杂的效果可以参考
raindropgithub.comShaderToy链接www.shadertoy.com
通过学习笔者写的,再去理解更复杂的效果会容易上手些。后续笔者会继续推出更多有详细解析的文章。(备注:知乎上代码排版比较不方便,看着没那么好看)
unity 模型渐变消失_Unity 雨水滴到屏幕效果相关推荐
- unity 随机数_Unity 雨水滴到屏幕效果
文章目录 前言 一.实现过程 1.代码 2.代码分步解析 总结 参考 前言 本文主要介绍用unity实现雨水滴到屏幕的效果,文章介绍的是基础实现,读完这篇文章再去实现复杂效果会更得心应手些.我们先看更 ...
- Unity 雨水滴到屏幕效果
文章目录 前言 一.实现过程 1.代码 2.代码分步解析 总结 参考 前言 本文主要介绍用unity实现雨水滴到屏幕的效果,文章介绍的是基础实现,读完这篇文章再去实现复杂效果会更得心应手些.我们先看更 ...
- unity 渐变消失_Shader Forge中怎么调整time渐变消失的间隔
求助 显示全部标签 搜索中出现以下关键词标签即可被搜索引擎找到 楼主可在左边的[标签]按钮中添加 希望搜索结果同时满足多个条件,可用空格隔开 求助 Shader Forge中怎么调整time渐变消失的 ...
- Unity快速入门之四 - Unity模型动画相关
最近要给公司的小伙伴做Unity入门,针对几个常用的知识进行快速入门介绍. Unity快速入门之一 3D基础概念.Camera.Canvas RenderMode的几种方式对比_翕翕堂 Unity快速 ...
- 计算机简史:所有这些时刻,终将流失在时光中,一如眼泪消失在雨里
最近,U.S.News发布了<2022最佳职业排名TOP100>,该报告参考联邦劳工数据,分析了过去10年职业的增长速度.工资中位数.就业率.未来工作前景.压力水平和工作与生活的平衡,并对 ...
- 渐变显示渐变消失的BackgroundView
渐变显示渐变消失的BackgroundView 效果如下: 源码: BackgroundView.h 与 BackgroundView.m // // BackgroundView.h // Test ...
- ugui unity 图片缩放循环_Unity基础系列(四)——构造分形(递归的实现细节)...
点击蓝字关注我们吧! 目录 1 如何构建分形 2 展示内容 3 构造子节点 4 塑造子节点 5 创建多个子节点 6 更多的子节点,更好的代码 7 爆炸性生长 8 添加颜色 9.随机化Mesh 10 使 ...
- UNITY 模型与动画优化选项
UNITY 模型与动画优化选项 1,RIG: Optimze Game Objects,[默认是没勾选的] 效果:将骨骼层级从模型中移除,放到动画控制器中,这样性能提高明显.实测中发现原来瞬间加载5个 ...
- unity模型制作(终章):柔体布料绘制
在前六章模型绘制的基础上,加一些几何算法,很容易制作出不同样式的模型,例如下图中的几种模型:直梯.曲梯.各种屋顶等等. 不过最终章主要想讲一下柔体的绘制:所谓柔体,其实就是物体在受力的作用时,会产生形 ...
最新文章
- python调用有道词典_菜鸟上手Python最有野心的库Asyncio
- Cache一致性与2种基本写策略(1)
- 模拟实现strstr
- ZigBee网络角色 拓扑结构 无线模块组网典型应用
- KD Tree的原理及Python实现
- 银行业务队列简单模拟(队列queue)
- Python之数据分析(Numpy的矩阵相关操作、ufunc泛化函数对象)
- POCO库中文编程参考指南(11)如何使用Reactor框架?
- wpf程序启动时停止工作,事件管理器报错kernelbase.dll
- 集成hello到OpenDaylight发行版中
- C++项目学习(机器人方向)
- GStreamer应用开发文档的ogg播放器
- 哪里有免费的ASP空间?
- 【转发】相似性度量学习及其在计算机视觉中的应用
- C语言实现最大值、最小值、均值、标准差、峰值因子、方差和百分位数的计算
- 区分定理(Theorem)、引理(Lemma)、推论(Corollary)等概念
- JQuery dad js自定义删除和拖动回调事件
- 软考高级之系统架构设计师系列【2】考试说明及考点分析
- python的describe参数_Python Pandas Series.describe()用法及代码示例
- 网络编程基础知识02