Animated Raindrop Ripples In HLSL

这节课是利用材质做雨滴i效果

首先是创建一个圆环，实际上他就是为了创建一个圆，但是是空心的，可以看之前我的做法，这里以他的为准

创建圆环

就是当uv的点在max_radius和min_radius之间的时候绘制。

他这里写了ringThickness，实际可以看作边的粗

float4 result = float4(0, 0, 0, 0);float2 pointCtr = float2(0.5, 0.5);float2 uvOffset = uv - pointCtr;float radiusMin = 0.05;
float radiusMax = 0.1;
float ringThickness = 0.005;float pointDist = length(uvOffset);if(pointDist >= radiusMin - ringThickness && pointDist <= radiusMax + ringThickness)
{result = float4(1, 1, 1, 1);
}
return result;

实现一个渐变的效果

使用新的函数，当你不知道使用什么函数的时候，可以在蓝图中找到答案，实际上就是全部小写

smoothstep就是在min max之间平滑的插值

float alpha = smoothstep(radiusMin - ringThickness, radiusMin + ringThickness, pointDist);

clamp的valuebetween 0~1

float2 pointCtr = float2(0.5, 0.5);float2 uvOffset = uv - pointCtr;float radiusMin = 0.05;
float radiusMax = 0.1;
float ringThickness = 0.005;float pointDist = length(uvOffset);
float alpha = saturate(smoothstep(radiusMin - ringThickness, radiusMin + ringThickness, pointDist));
if(pointDist >= radiusMin - ringThickness && pointDist <= radiusMax + ringThickness)
{result = float4(1, 1, 1, 1) * alpha;
}
return result;

绘制多个空心圆

首先我们可以只定义一个半径长度，然后定义一个ringThickness去得到这个圆

float4 result = float4(0, 0, 0, 0);float2 pointCtr = float2(0.5, 0.5);float2 uvOffset = uv - pointCtr;float radius = 0.05;
float ringThickness = 0.005;
float pointDist = length(uvOffset);
if (pointDist >= radius - ringThickness && pointDist <= radius + ringThickness)
{return float4(1, 1, 1, 1);
}
return result;

然后就可以去做一些uv的偏移，这里使用作者的方法

float4 result = float4(0, 0, 0, 0);float ringThickness = 0.005;
float fadeInner = 0.005;
float2 seed = float2(123.456, 789.012);float2 offsetRange = float2(-1, 1);float drops = 100;for (int i = 0; i < drops; i++)
{seed = frac(seed * 123.456);float2 randOffset = lerp(offsetRange.x, offsetRange.y, seed);float radius = 0.05;float2 offset = (uv - 0.5) - randOffset;float pointDist = length(offset);float alpha = saturate(smoothstep(radius - fadeInner, fadius + radeInner, pointDist));if (pointDist >= radius - ringThickness && pointDist <= radius + ringThickness){result += alpha;} 
}return result;

这里为什么需要加呢？因为可能会有叠加到一起的圆环，此时就需要这个叠加的过程

time这个节点当引擎打开后就会不断的增加

实现雨滴扩散效果

我们需要一个不断让圆环规律变化的过程，也就是改变radius

视频中作者的做法实际上想让每个圆环的变化不同

float4 result = float4(0, 0, 0, 0);float radiusMin = 0.05;
float radiusMax = 0.1;
float ringThickness = 0.005;
float fadeInner = 0.005;
float2 seed = float2(123.456, 789.012);float2 offsetRange = float2(-1, 1);float drops = 100;for (int i = 0; i < drops; i++)
{seed = frac(seed * 123.456);float2 randOffset = lerp(offsetRange.x, offsetRange.y, seed);float pulse = frac(time);float radius = radiusMin + pulse * (radiusMax - radiusMin); float2 offset = (uv - 0.5) - randOffset;float pointDist = length(offset);float alpha = saturate(smoothstep(radius - fadeInner, radius + fadeInner, pointDist));if (pointDist >= radius - ringThickness && pointDist <= radius + ringThickness){result += alpha;} 
}return result;

但是这个做法会让圆环突然的消失和出现，需要在扩撒到一定的程度以后让它消失。因为我们的颜色值都来自与alpha所以可以修改其来得到这个效果

1. 首先我们需要一个radiusLimit当我们的radius扩散到一定的范围以后逐渐的淡出
2. 当pointDist大于某个范围clamp为0

float4 result = float4(0, 0, 0, 0);float radiusMin = 0.05;
float radiusMax = 0.1;
float ringThickness = 0.005;
float fadeInner = 0.005;
float fadeOuter = 0.001;
float2 seed = float2(123.456, 789.012);float2 offsetRange = float2(-1, 1);float drops = 100;
float duration = 1.0;for (int i = 0; i < drops; i++)
{seed = frac(seed * 123.456);float2 randOffset = lerp(offsetRange.x, offsetRange.y, seed);float cycle = duration + frac(randOffset);float pulse = frac(time / cycle);float radius = radiusMin + pulse * (radiusMax - radiusMin); float2 offset = (uv - 0.5) - randOffset;float pointDist = length(offset);float radiusLimit = radiusMin + (seed.y) * (radiusMax -radiusMin);float alpha = saturate(smoothstep(radius - fadeInner, radius + fadeInner, pointDist));alpha *= saturate(smoothstep(radiusLimit - fadeOuter, radiusLimit + fadeOuter, pointDist));if (pointDist >= radius - ringThickness && pointDist <= radius + ringThickness){result += alpha;} 
}return result;