雨滴效果

简介

本文介绍如何实现一个玻璃上雨滴落的特效

效果与思路

先看效果图吧

RainOnWindow

这个其实是一种后期, 把 rain 的效果与当前帧相融合.
rain 的效果实施, 可以把整个屏幕分格, 一个格子中一个雨滴, 让并让他从下往下滑落.

实现步骤简述

  1. 将整个 UV 分成小格子
vec2 cellUV = uv*gridsWH;
cellUV = fract(cellUV);
  1. 画一个雨滴
float rDrop = 0.;
rDrop = length(dropUV * gridSize);
  1. 让雨滴往下滑掉
dropUV.y += sin(time + sin(time + sin(time)* 0.5)) * 0.4;
  1. 画雨滴的尾
vec2 trailUV = cellUV * vec2(1., 8.);
trailUV = fract(trailUV);
trailUV -= 0.5;
float rTrail = length(trailUV * gridSize / vec2(1., 8.));
  1. 修剪尾巴
rTrail = smoothstep(0.05, 0.03, rTrail);
rTrail *= smoothstep(-0.01, 0., dropUV.y);
rTrail *= smoothstep(0.4, 0., dropUV.y);
  1. 最终将雨滴与每一帧合成
vec4 texCol = texture(cc_gbuffer_albedoMap, v_uv + offsetUV);

详细实现

https://github.com/hugohuang1111/fxcase/tree/master/assets/caseRaindrop

交个朋友吗

WX: hugohuang1111

转自: HH

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容