用 shader effect 实现雨滴落水效果！Cocos Creator 3D !

最新推荐文章于 2024-03-01 16:43:53 发布

原创

最新推荐文章于 2024-03-01 16:43:53 发布 · 3.9k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#cocos #creator #3d #游戏开发

本文介绍了如何在 Cocos Creator 3D 中利用 shader 实现雨滴落水的视觉效果。通过计算与点击点的距离和方向，运用 sin 函数模拟水纹，并通过射线检测获取点击位置。文章提供了实现水纹片元着色器的代码示例，并提及了 attribute、uniform 和 varying 在 shader 中的角色。

最近逛论坛时，看到一位大佬在分享各种 shader 特效。基于其中的水波 shader ，白玉无冰写了一个玩水效果！文章底部获取完整代码！还可以试试水哦！

先一起看看效果～

点击任意位置，会在该位置生成一个水纹，就像是雨水落在水洼中一样～

如何使用 effect 文件？新建一个 material ，Effect 属性选择 water , 接着将纹理图片拖到相应参数。

最后为你的模型节点选择材料。

水纹片元着色器实现原理：通过计算与点击点的距离和方向，用 sin 函数模拟水纹效果。通过计算点击时间戳和当前时间与距离，判断是否添加水纹效果。再将多个点击点叠加起来，得到 texture 最终 uv 。主要代码如下。

for(int i = 0; i < 10; i  ){
    vec2 uvDir = normalize(v_uv - center[i].xy);
    float dis = distance(v_uv, center[i].xy);
    float dis_time = center[i].z - cc_time.x   dis * 3.0;
    if ( center[i].z > 0.0 && dis_time < 0