最近看到一个在玻璃上雨滴的效果. 在 Creator 上试了下实现.
先上效果图:
我这里的实现就先做了一个雨滴的效果, 然后将雨滴与每帧的效果结果, 就得到了这个效果图.
雨滴本身的实现其实是把屏幕分成很多小格, 每一格里放一个雨滴, 再让这些雨滴往下滑动.
最后再通过后处理, 把雨滴与每帧的纹理相结合, 得到最终效果.
这里说下简单的实现步骤吧
- 将整个 UV 分成小格子
vec2 cellUV = uv*gridsWH;
cellUV = fract(cellUV);
- 画一个雨滴
float rDrop = 0.;
rDrop = length(dropUV * gridSize);
- 让雨滴往下滑掉
dropUV.y += sin(time + sin(time + sin(time)* 0.5)) * 0.4;
- 画雨滴的尾
vec2 trailUV = cellUV * vec2(1., 8.);
trailUV = fract(trailUV);
trailUV -= 0.5;
float rTrail = length(trailUV * gridSize / vec2(1., 8.));
- 修剪尾巴
rTrail = smoothstep(0.05, 0.03, rTrail);
rTrail *= smoothstep(-0.01, 0., dropUV.y);
rTrail *= smoothstep(0.4, 0., dropUV.y);
- 最终将雨滴与每一帧合成
vec4 texCol = texture(cc_gbuffer_albedoMap, v_uv + offsetUV);
详细实现
https://github.com/hugohuang1111/fxcase/tree/master/assets/caseRaindrop
有对这方面有兴趣的吗, 交个朋友, WX: hugohuang1111