Unity Shader 皮肤水滴效果

本文参考文章：【UE4】皮肤下雨效果复现
大体的思路就是使用UV坐标生成水滴遮罩以及法线。

1.原理简单阐述

首先建一个简单的Shader来输出UV坐标：

fixed4 frag (v2f i) : SV_Target
{fixed4 col = tex2D(_MainTex, i.uv);col.rg=i.uv;return col;
}

为了方便计算，这里将UV的原点移到中心。接下来第一步我们先取UV坐标的长度（Length）；第二步，取负并加0.3（截取其 [0，0.3] 部分）；第三步，对其进行 Smoothstep 便可获取到一个 [0，1] 的平滑遮罩：

                float2 uv=i.uv-0.5;float len=-length(uv)+0.3;float mask=smoothstep(0.15,0.2,len);col.rgb=len;

然后我们就可以根据，文章中的方法使用UV坐标和Mask来计算切线空间的法线：

             float3 TUV(float2 uv){float3 normal; normal.y=abs(uv.x)*abs(uv.x)+uv.y;normal.x=abs(uv.y)*abs(uv.y)+uv.x;normal.z=0.2;return normalize(normal);}...float3 up=float3(0,0,1);float3 normal=TUV(uv);normal=lerp(up,normal,mask);...

然后给它算一下高光，这个Shader原理的最基本的一个流程就走完了，需要注意的是计算出来的法线是切线空间的，所以要进行转换：

             float3 TransfromTanToWorld(float3 normal,float3x3 tanToworld){float3 worldNormal;worldNormal.x = dot(tanToworld[0], normal);worldNormal.y = dot(tanToworld[1], normal);worldNormal.z = dot(tanToworld[2], normal);return normalize(worldNormal);}......float3x3 tanToWorld;tanToWorld[0]=i.TtoW0.xyz;tanToWorld[1]=i.TtoW1.xyz;tanToWorld[2]=i.TtoW2.xyz;float3 worldPos=float3(i.TtoW0.w,i.TtoW1.w,i.TtoW2.w);float3 lightDir=normalize(UnityWorldSpaceLightDir(worldPos));float3 viewDir=normalize(UnityWorldSpaceViewDir(worldPos));fixed4 col = tex2D(_MainTex, i.uv);float2 uv=i.uv-0.5;float len=-length(uv)+0.3;float mask=smoothstep(0.15,0.2,len);float3 up=float3(0,0,1);float3 normal=TUV(uv);normal=lerp(up,normal,mask);normal=TransfromTanToWorld(normal,tanToWorld);fixed spec=saturate(dot(viewDir,normal));spec=smoothstep(0.9,1,spec)*mask;col.rgb+=spec;return col;

2.静态水滴

1.UV分块及错位

第一步：是将UV分块，每一块UV计算一个水滴 （_PointAmount=15）：

             float2 uv=i.uv*_PointAmount;uv=frac(uv);col.rg=uv;

但是这样的UV块过于整齐，所以在第二步我们需要引入随机数对UV进行偏移。这里我们对Y轴进行偏移，所以可以用X轴（floor取整是保证UV块偏移一致——伪随机的好处，同一个值得到的是同一个随机值）做随机数的输入：

             float2 uv=i.uv;//frac将偏移值控制在0~1float random=frac(sin(floor(_PointAmount*uv.x)*12345.580078)*7658.759766);uv.y+=random;uv=frac(uv*_PointAmount);col.rg=uv;

第三步，我们可以将这一步骤封装成一个函数，这里引入了time和scale是为了做移动和拉伸，Out.zw是为了下一步生成随机数：

         // XY:frac  ZW:floorfloat4 UVConfigure(float2 uv,float time,float2 scale,float amount){uv=uv*scale;uv.y+=time;float factor=frac(sin(floor(amount*uv.x)*12345.580078)*7658.759766);uv.y+=factor;uv*=amount;float4 Out=0;//floor:返回小于等于x的最大整数。Out.zw=floor(uv);//frac返回输入值的小数部分。//x[0,1]---->[-0.5,0.5]Out.xy=frac(uv)-float2(0.5,0);//Out.xy=frac(uv);return Out;}......float4 configure=UVConfigure(uv,0,1, _PointAmount);col.rg=configure.xy;

2.随机偏移和消失

还记得前一步我们在函数里输出了floor，这其实是给每一小块UV赋予了一个单独的id。为了让每个UV块都有一个偏移，这里再引入一个随机数N13，输入一个UV，输出一个 [0，1] 的 float3：

         float3 N13(float2 uv){float p=uv.x*35.2+uv.y*2376.1;float3 p3 = frac(float3(p,p,p) * float3(.1031,.11369,.13787));p3 += dot(p3, p3.yzx + 19.19);return frac(float3((p3.x + p3.y)*p3.z, (p3.x+p3.z)*p3.y, (p3.y+p3.z)*p3.x));}float2 uv=i.uv;float4 configure=UVConfigure(uv,0,1, _PointAmount);col.rgb=N13(configure.zw);

这里把前一步的UV做输入值，每一个分区都有一个单独的float3：

这三个随机值其实怎么用都行，这里先用最简单的，首先用xy做偏移（偏移过大的问题将在动态水滴的部分给出解决办法），并输出长度小于0.1的部分为白色：

             float3 N=N13(configure.zw);half2 offsetUV=0;offsetUV.x=N.x-0.5;offsetUV.y=N.y;uv=configure.xy-offsetUV;col.rg=uv;if(length(uv)<0.1){return 1;}return col;

然后根据开头讲的原理做水滴遮罩，但是我们不需要这么圆的水滴，所以可以给它加上一个缩放值：

             float mask=-length(uv*float2(3.54,2.1))+0.5;mask=smoothstep(0,0.3,mask);col.rgb=mask;

接下来，可以用z给水滴遮罩做由大到小的消失效果了：

             float fade=smoothstep(0.2,1,1-frac(t*0.05+N.z));float mask=-length(uv*float2(3.54,2.1))+0.5*fade;mask=smoothstep(0,0.3,mask);col.rgb=mask;

接下来把所有函数都封装一下，原文为了有两个高光，计算了两层法线——一层是凸出来一层是凹进去的，所以Mask也要有两个，凹的小一点，凸的大一点。还添加了一个Cut值，该值范围为 [0,1] ，1时显示所有水滴，0时全不显示：

         float2 RainDropAndPointUV(float3 N,float2 fracUV,float Cut,out float cut){cut=Cut;cut=floor(cut+N.y);half2 offsetUV=0;offsetUV.x=N.x-0.5;offsetUV.y=N.y;float2 uv=(fracUV-offsetUV);return uv;}float2 Mask(float2 uv,float3 scaleAndDir,float4 smoothRange,float2 cutAndBase){//取负突出暗部，再和噪声相加获取渐变效果float maskBase=length(uv*scaleAndDir.xy)*scaleAndDir.z+cutAndBase.y;float2 mask=1;//内圈 凹mask.x=smoothstep(smoothRange.x,smoothRange.y,maskBase)*cutAndBase.x;//外圈 凸mask.y=smoothstep(smoothRange.z,smoothRange.w,maskBase)*cutAndBase.x;return mask;}float cut;uv=RainDropAndPointUV(N,configure.xy,_PointCut,cut);float fade=smoothstep(0.2,1,1-frac(t*0.05+N.z));float2 mask=Mask(uv,float3(3.54,2.1,-1),float4(0.3,0.44,0.1,0.45),float2(cut,fade));col.rgb=mask.r*cut;

调节 _PointCut 对Mask的影响

3.法线和高光

由于需要计算两层法线，所以TUV函数也要修改，PosiNegaNormal用来决定法线的朝向，最后根据Mask对法线进行插值：

         void TUV(float2 uv,float2 PosiNegaNormal,out float3 normal,out float3 causticNormal){normal=0;causticNormal=0;normal.y=abs(uv.x)*abs(uv.x)+uv.y;normal.x=abs(uv.y)*abs(uv.y)+uv.x;causticNormal.xy=-normal.xy;normal.z=PosiNegaNormal.x;normal=normalize(normal);causticNormal.z=PosiNegaNormal.y;causticNormal=normalize(causticNormal);}.....float3 normal,causticNormal;//_PointPositiveNormal=0.235,_PointNegativeNormal=0.14float2 factor=float2(_PointPositiveNormal,_PointNegativeNormal); TUV(uv,factor,normal,causticNormal);float3 up=float3(0,0,1);normal=lerp(up,normal,mask.y);causticNormal=lerp(up,causticNormal,mask.x);col.rgb=causticNormal;

简单计算一下高光，已经稍微体现出体积感了，但需要调整的地方还有很多：

                 normal=TransfromTanToWorld(normal,tanToWorld);causticNormal=TransfromTanToWorld(causticNormal,tanToWorld);fixed spec1=smoothstep(0.9,1.2,dot(viewDir,normal))*mask.r*2;fixed spec2=smoothstep(0.5,1.5,dot(viewDir,causticNormal))*mask.g;col.rgb+=spec1+spec2;

3.动态水滴

1.让UV动起来

静态水滴的UVConfigure函数可以接着用，但参数需要改一下，这里讲V方向拉长了五倍，因为静态水滴需要有水痕，照例把两个结果输出一下：

             float2 uv=i.uv;float4 configureDrop=UVConfigure(uv,0.02*t,float2(5,1), _RainDropAmount);//col.rg=configureDrop.xy;col.rgb=N13(configureDrop.zw);if(length(configureDrop.xy)<0.1){return 1;}

然后把静态水滴剩余部分的代入到其中，就可得到和静态水滴一样的结果，不同的是这次水滴是运动的：

             float2 uv=i.uv;float cut;float4 configureDrop=UVConfigure(uv,0.02*t,float2(5,1), _RainDropAmount);float3 N=N13(configureDrop.zw);//因为之前对uv做了拉伸，所以这里要逆回来，不然水滴会拉长float2 rainDrop=RainDropAndPointUV(N,configureDrop.xy*float2(1,5),_RainDropAmount,cut);float2 rianDropMask=Mask(rainDrop,float3(3.54,2.1,-1),float4(0.3,0.44,0.1,0.45),float2(cut,1));float3 dropNormal,dropCausticNormal;float2 factor=float2(_RainDropPositiveNormal,_RainDropNegativeNormal);TUV(rainDrop,factor,dropNormal,dropCausticNormal);dropNormal*=rianDropMask.y;dropCausticNormal*=rianDropMask.x;dropNormal=TransfromTanToWorld(dropNormal,tanToWorld);dropCausticNormal=TransfromTanToWorld(dropCausticNormal,tanToWorld);fixed spec1=smoothstep(0.9,1.2,dot(viewDir,dropNormal))*rianDropMask.r*2;fixed spec2=smoothstep(0.5,1.5,dot(viewDir,dropCausticNormal))*rianDropMask.g;col.rgb+=spec1+spec2;

可以法线这里问题还是很多，接下来一个一个解决。

2.运动和UV限制

这里的水滴是匀速的，看起来比较怪，所以我们修改一下RainDropAndPointUV函数，这里同时对UV的偏移做了限制：

         float2 RainDropAndPointUV(float3 N,float2 fracUV,float time,float4 tillingOffset,float Cut,out float cut){cut=Cut;cut=floor(cut+N.y);half2 offsetUV=0;offsetUV.x=(N.x-0.5)*0.5;float v=frac(N.y+time);v=smoothstep(0,0.85,v)*smoothstep(1,0.85,v)-0.5;offsetUV.y=v*0.5+0.5;float2 uv=(fracUV-offsetUV)*tillingOffset.xy;//float2 uv=fracUV*2;return uv;}float4 configureDrop=UVConfigure(uv,0,float2(5,1), _RainDropAmount);float3 N=N13(configureDrop.zw);float2 rainDrop=RainDropAndPointUV(N,configureDrop.xy,t*0.5,float4(1,5,0,0),_RainDropAmount,cut);

两个smoothstep的函数效果如图所示：

这里把第一层的的运动值设为0，就可以很清楚的看到水滴显示往下移动到1，再由最大值变回0：

再加上第一层的运动，水滴的效果就看起来是时而快时而慢的了

             float4 configureDrop=UVConfigure(uv,0.02*t,float2(5,1), _RainDropAmount);float3 N=N13(configureDrop.zw);float2 rainDrop=RainDropAndPointUV(N,configureDrop.xy,t*0.05,float4(1,5,0,0),_RainDropAmount,cut);col.rg=rianDropMask.rg;

3.水滴拖尾

接下来可以制作水滴的拖尾效果了,为此我们需要两个变量，一个是未经偏移的UV坐标、另一个是偏移值，所以我们需要RainDropAndPointUV返回偏移UV值：

         float4 RainDropAndPointUV(float3 N,float2 fracUV,float time,float4 tillingOffset,float Cut,out float cut){cut=Cut;cut=floor(cut+N.y);half2 offsetUV=0;offsetUV.x=(N.x-0.5)*0.5;float v=frac(N.y+time);v=smoothstep(0,0.85,v)*smoothstep(1,0.85,v)-0.5;offsetUV.y=v*0.5+0.5;float2 uv=(fracUV-offsetUV)*tillingOffset.xy;return float4(offsetUV,uv);}float4 rainDrop=RainDropAndPointUV(N,configureDrop.xy,t*0.05,float4(1,5,0,0),_RainDropCut,cut);//rainDrop.xy：偏移值，configureDrop.xy：原始坐标float rainDropTrace=RainTrace(rainDrop.xy,configureDrop.xy)*cut;

首先需要确定拖尾的长度，其次是水滴的宽度

         float RainTrace(float2 uv,float2 fracUV){//横向X轴以水滴为中心向两边的渐变float lineWidth=abs(fracUV.x-uv.x);//纵向Y轴，以Y轴最大边缘到水滴位置的0~1的渐变float lineHeight=smoothstep(1,uv.y,fracUV.y);}

原文章使用了以下代码对拖尾宽度的进行限制：

             float lineWidth=abs(fracUV.x-uv.x);float lineHeight=smoothstep(1,uv.y,fracUV.y);float base=sqrt(lineHeight);float widthMax=base*0.23;float widthMin=base*0.15*base;lineWidth=smoothstep(widthMax,widthMin,lineWidth);

uv.y=0，fracUV.y是X轴，x越大，有一部分它们间距基本一样，而越后面间距越小：

如果我们这时直接输出lineWidth会得到以下效果：

这是因为lineWidth在fracUV.y小于uv.y后都等于1，所以我们需要进行限制，并使拖尾有一个渐变，最后的函数为：

         float RainTrace(float2 uv,float2 fracUV){float lineWidth=abs(fracUV.x-uv.x);float lineHeight=smoothstep(1,uv.y,fracUV.y);float base=sqrt(lineHeight);float widthMax=base*0.23;float widthMin=base*0.15*base;lineWidth=smoothstep(widthMax,widthMin,lineWidth);float trace=smoothstep(-0.02,0.02,fracUV.y-uv.y)*lineHeight;trace*=lineWidth;return max(0,trace);}

3.阴影和结束

最后一部分也没什么好写的，大都是水滴效果上的东西，值得说到的是他用两层Mask——一层大、一层小，然后用一个正上方的光照去照亮他，就得到了水滴下的一小圈阴影：

     float3 yDir=float3(0,1,0);fixed downMask=mask.x+dropMask.x;fixed riseMask=mask.y+dropMask.y;float RdotZ=smoothstep(-1.3,0.3,dot(yDir,riseNormal));fixed fullMask=saturate(lerp(1,RdotZ,riseMask)+downMask);

最后的效果：

完整代码在Github——Alutemurat，以后写的效果都会放那了。
感觉自己写得有点乱，不知道能不能讲明白。