霓虹中国视频截图

在B站上发现大佬做的UE4渲染视频，感觉这种赛博朋克风格的渲染非常的好看，同时也对场景中汽车表面附着上的一层水珠效果感到惊艳。

现实中的水珠附着效果

实现思路

上一篇我们是实现了窗前雨滴的效果，所以我在想能不能通过窗前雨滴的做法衍生来实现场景中水珠附着的效果。

1.首先创建一个Cube来作为实现效果的物体

2.创建一个Shader开始着色器的编写

先定义一下需要用到的属性

 Properties{_MainTex ("Main Texture", 2D) = "white" {}   //水珠图片_MoreRainAmount("Droplet Amount",Range(0, 1)) = 1  //水珠数量_FixedDroplet("Fixed Droplet",Range(0 ,1)) = 0.7   //固定水珠_DropletSize("Droplet Size",Range(0 ,1)) = 0.4    //水珠大小_DropletDensity("Droplet Density",Range(0 ,10)) = 1.85   //水珠疏密_Speed("Droplet Speed",Range(0 ,1)) = 1   //滑落速度}

改写一下窗前雨滴的shader

         float3 N13(float p) {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));}float4 N14(float t) {return frac(sin(t*float4(123., 1024., 1456., 264.))*float4(6547., 345., 8799., 1564.));}float N(float t) {return frac(sin(t*12345.564)*7658.76);}float Saw(float b, float t) {return smoothstep(0., b, t)*smoothstep(1., b, t);}float2 DropLayer2(float2 uv, float t) {float2 UV = uv;uv.y += t * 0.75;float2 a = float2(6, 1);float2 grid = a * 2.;float2 id = floor(uv * grid);float colShift = N(id.x); uv.y += colShift;id = floor(uv * grid);float3 n = N13(id.x * 35.2 + id.y * 2376.1);float2 st = frac(uv * grid) - float2(0.5, 0);float x = n.x - 0.5;float y = UV.y * 20;float wiggle = sin(y + sin(y));x += wiggle * (0.5 - abs(x)) * (n.z - 0.5);x *= _FixedDroplet;float ti = frac(t + n.z);y = (Saw(0.85, ti) - 0.5) * 0.9 + 0.5;float2 p = float2(x, y);float d = length((st - p) * a.yx);float mainDrop = smoothstep(_DropletSize, 0, d);float r = sqrt(smoothstep(1, y, st.y));float cd = abs(st.x - x);float trail = smoothstep(0.23 * r, 0.15 * r * r, cd);float trailFront = smoothstep(-0.02, 0.02, st.y - y);trail *= trailFront * r * r;y = UV.y;float trail2 = smoothstep(0.2 * r, 0.0, cd);float droplets = max(0, (sin(y * (1 - y) * 120) - st.y)) * trail2 * trailFront*n.z;y = frac(y*10.)+(st.y-.5);float dd = length(st-float2(x, y));droplets = smoothstep(.3, 0., dd);float m = mainDrop+droplets*r*trailFront; return float2(m, trail);}float StaticDrops(float2 uv, float t) {uv *= 40.;float2 id = floor(uv);uv = frac(uv)-.5;float3 n = N13(id.x * 107.45 + id.y * 3543.654);float2 p = (n.xy-.5)*.7;float d = length(uv-p);float fade = Saw(.025, frac(t+n.z));float c = smoothstep(.3, 0., d)*frac(n.z*10.)*fade;return c;}float2 Drops(float2 uv, float t, float l0, float l1, float l2) {float s = StaticDrops(uv, t)*l0; float2 m1 = DropLayer2(uv, t)*l1;float2 m2 = DropLayer2(uv * _DropletDensity, t) * l2;float c = s + m1.x + m2.x;c = smoothstep(0.3, 1, c);return float2(c, max(m1.y * l0, m2.y * l1));}float2 DropsDynamic(float2 uv, float t, float l1, float l2){float2 m1 = DropLayer2(uv, t)*l1;float2 m2 = DropLayer2(uv*1.75, t)*l2;float c = m1.x+m2.x;c = smoothstep(.4, 1., c);return float2(c, max(0, m2.y*l1));}

实现效果截图

想要达到上述视频中的效果，还需要对纹理的模糊处理，可以参考一下 UWA的《Unity Shader之磨砂玻璃与水雾玻璃效果》水雾玻璃效果。
相关链接：https://blog.csdn.net/UWA4D/article/details/90268304

Shader源码

Shader "Kirk/Droplet"
{Properties{_MainTex ("Main Texture", 2D) = "white" {}   //水珠_MoreRainAmount("Droplet Amount",Range(0, 1)) = 1_FixedDroplet("Fixed Droplet",Range(0 ,1)) = 0.7_DropletSize("Droplet Size",Range(0 ,1)) = 0.4_DropletDensity("Droplet Density",Range(0 ,10)) = 1.85_Speed("Droplet Speed",Range(0 ,1)) = 1}SubShader{Tags { "Queue"="Transparent" "RenderType"="Opaque" }Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#pragma target 3.0#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float3 normal : NORMAL;float4 texcoord : TEXCOORD0;};struct v2f{float4 pos : SV_POSITION;float2 uv : TEXCOORD0;float4 scrPos : TEXCOORD1;float3 worldNormal : TEXCOORD2;float3 normal : TEXCOORD3;float3 worldPos : TEXCOORD4;};sampler2D _MainTex;float4 _MainTex_ST;float _FixedDroplet;float _MoreRainAmount;float _DropletSize;float _DropletDensity;float _Speed;float3 N13(float p) {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));}float4 N14(float t) {return frac(sin(t*float4(123., 1024., 1456., 264.))*float4(6547., 345., 8799., 1564.));}float N(float t) {return frac(sin(t*12345.564)*7658.76);}float Saw(float b, float t) {return smoothstep(0., b, t)*smoothstep(1., b, t);}float2 DropLayer2(float2 uv, float t) {float2 UV = uv;uv.y += t * 0.75;float2 a = float2(6, 1);float2 grid = a * 2.;float2 id = floor(uv * grid);float colShift = N(id.x); uv.y += colShift;id = floor(uv * grid);float3 n = N13(id.x * 35.2 + id.y * 2376.1);float2 st = frac(uv * grid) - float2(0.5, 0);float x = n.x - 0.5;float y = UV.y * 20;float wiggle = sin(y + sin(y));x += wiggle * (0.5 - abs(x)) * (n.z - 0.5);x *= _FixedDroplet;float ti = frac(t + n.z);y = (Saw(0.85, ti) - 0.5) * 0.9 + 0.5;float2 p = float2(x, y);float d = length((st - p) * a.yx);float mainDrop = smoothstep(_DropletSize, 0, d);float r = sqrt(smoothstep(1, y, st.y));float cd = abs(st.x - x);float trail = smoothstep(0.23 * r, 0.15 * r * r, cd);float trailFront = smoothstep(-0.02, 0.02, st.y - y);trail *= trailFront * r * r;y = UV.y;float trail2 = smoothstep(0.2 * r, 0.0, cd);float droplets = max(0, (sin(y * (1 - y) * 120) - st.y)) * trail2 * trailFront*n.z;y = frac(y*10.)+(st.y-.5);float dd = length(st-float2(x, y));droplets = smoothstep(.3, 0., dd);float m = mainDrop+droplets*r*trailFront; return float2(m, trail);}float StaticDrops(float2 uv, float t) {uv *= 40.;float2 id = floor(uv);uv = frac(uv)-.5;float3 n = N13(id.x * 107.45 + id.y * 3543.654);float2 p = (n.xy-.5)*.7;float d = length(uv-p);float fade = Saw(.025, frac(t+n.z));float c = smoothstep(.3, 0., d)*frac(n.z*10.)*fade;return c;}float2 Drops(float2 uv, float t, float l0, float l1, float l2) {float s = StaticDrops(uv, t)*l0; float2 m1 = DropLayer2(uv, t)*l1;float2 m2 = DropLayer2(uv * _DropletDensity, t) * l2;float c = s + m1.x + m2.x;c = smoothstep(0.3, 1, c);return float2(c, max(m1.y * l0, m2.y * l1));}float2 DropsDynamic(float2 uv, float t, float l1, float l2){float2 m1 = DropLayer2(uv, t)*l1;float2 m2 = DropLayer2(uv*1.75, t)*l2;float c = m1.x+m2.x;c = smoothstep(.4, 1., c);return float2(c, max(0, m2.y*l1));}v2f vert (appdata v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.scrPos = ComputeScreenPos(o.pos);o.normal = v.normal;o.uv = TRANSFORM_TEX (v.texcoord, _MainTex);o.worldNormal  = UnityObjectToWorldNormal(v.normal);o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;return o;}fixed4 frag (v2f _iParam) : SV_Target{float4 fragColor = 0;float2 uv = _iParam.uv;float2 UV = _iParam.uv;float3 M = 2;float T = (_Time.y + M.x * 2) * _Speed;float t = T*(.2+0.1*_MoreRainAmount);float rainAmount = M.y;uv *= 0.5;float staticDrops = smoothstep(-.5, 1., rainAmount) * 2.;float layer1 = smoothstep(.25, .75, rainAmount);float layer2 = smoothstep(.0, .5, rainAmount);float2 n = float2(0, 0);float2 c = Drops(uv, t, staticDrops, layer1, layer2);float2 e = float2(0.001, 0.);float cx = Drops(uv + e, t, staticDrops, layer1, layer2).x;float cy = Drops(uv + e.yx, t, staticDrops, layer1, layer2).x;n += float2(cx - c.x, cy - c.x);float moreRainAmount = 1.25 + 1.25 * _MoreRainAmount;for(float i = 1.25; i < moreRainAmount; i+=0.25){float2 _c = DropsDynamic(uv, t*i, layer1, layer2);float _cx = DropsDynamic(uv + e, t*i, layer1, layer2).x;float _cy = DropsDynamic(uv + e.yx, t*i, layer1, layer2).x;n += float2(_cx - _c.x, _cy - _c.x);}float blend = (n.x + n.y)*(1.75 + _MoreRainAmount);float3 col = tex2D(_MainTex, UV + n).rgb;fragColor = float4(col, blend);return fragColor;}ENDCG}}
}

Unity Shader 窗前雨滴效果衍生（表面水滴附着）相关推荐

Unity Shader·屏幕破碎效果
Unity Shader·屏幕破碎效果前言最近在做一个新的MMD(用Unity来实现),其中用到了一些好看的渲染技术在这里分享一下. 视频链接 https://www.bilibili.com/v ...
Unity Shader 之透明效果
本文引用 Unity Shader入门精要开启透明混合后,一个物体被渲染到屏幕上时,每个片元除了颜色值和深度值外,还有--透明度.透明度为1,则完全不透明,透明度为0,则完全不会显示. 在Unity ...
Unity Shader - 翻书效果
今天实现一个简单的翻书的效果,话不多说,先上一张效果图: 这里就随便用的一张纹理了,我们还是称为"翻木板"吧,哈哈. 实现过程: 其实这个效果实现起来还是挺简单的,大概思路其实就是 ...
unity shader 抖音效果
最近开始学习了unity shader,所以想要做一些简单的效果,来巩固一下知识.我第一个想做的就是做一些类似于抖音的效果.(PS:最近学习了markdown,所以就用markdown开始写博客了 ) ...
Unity Shader 实现鬼魂效果
Shader 实现鬼魂效果前言前言我们在游戏中经常会角色碰到角色的情况,大多数游戏中角色和角色重叠的时候会显示一个虚幻的鬼影而不是完全遮挡,那么这个鬼影效果怎么实现呢?接下来我们就实现这样的一个 ...
Unity Shader 屏幕后效果——高斯模糊
高斯模糊是图像模糊处理中非常经典和常见的一种算法,也是Bloom屏幕效果的基础. 实现高斯模糊同样用到了卷积的概念,关于卷积的概念和原理详见我的另一篇博客: https://www.cnblogs.c ...
Unity Shader 屏幕后效果——Bloom外发光
Bloom的原理很简单,主要是提取渲染图像中的亮部区域,并对亮部区域进行模糊处理,再与原始图像混合而成. 一般对亮部进行模糊处理的部分采用高斯模糊,关于高斯模糊,详见之前的另一篇博客: https:/ ...
Unity Shader 实现磨皮效果
最近在做一些UI使用的shader,大部分是对UV进行一些操作,今天看需求文档时发现美术同学的要求里有一项是类似磨皮的效果,本来我也比较好奇这些美颜效果都是怎么做的,所以就趁此机会实验一下.查了一大堆 ...
Unity Shader 2D水流效果
水流的模拟主要运用了顶点变换和纹理动画的结合: 顶点变换中,利用正弦函数模拟河流的大致形态,例如波长,振幅等. 纹理动画中,将纹理坐标朝某一方向持续滚动以形成流动的效果. 脚本如下: 1 Shader ...

Unity Shader 窗前雨滴效果衍生（表面水滴附着）