免费开源！细节拉满的一个2D实时水面反射效果Demo，基于Cocos Creator 3.5

Original 孙二喵、王师傅 COCOS 2023-03-16

收录于合集 #技术干货 99个

引言：插件 Easy NavMesh、BenchMark 性能检测的作者孙二喵，从开发者王师傅的论坛分享中获得启发，实现了 2D 实时水面反射效果，Demo 免费开源。

2D 实时水面反射

Demo 效果

前几天看到论坛大佬的 2D 水面 Shader 教程（注：后文有详细内容），效果挺好的，就跟着在 Cocos Creator 3.5.2 中做了一个，实现 2D 实时水面反射，并支持角色移动，开箱即用。

功能特点

整个方案使用了3个摄像机：

RT 摄像机负责所有游戏物体，它会获取 Rendertexture 渲染到地面和水面的2个精灵上。

FixCamera 是固定摄像机，只会拍摄地面和水面这2个精灵。

UI 相机负责 UI 层级。

最终的 DrawCall 为8个，包括1个基础 DC +1个背景+1个角色+2个技能特效+1个 UI+ 1个水面渲染+1个地面渲染。

即使增加1个新的精灵类，我们整个 DrawCall 也只会增加1个。

针对反射方案，第一个 RT 摄像机负责地面部分的截取，这里把 rect 设置成了 -0.37 , 只截取63%的上半部分屏幕。

针对地面部分，我们使用了自定义 Shader，移植了默认的 Sample from RT，使用了和 Canvas 一样的尺寸，针对屏幕适配，Canvas 上的 rtAdapter 里有解决方案。

水面部分只使用了一半的屏幕高度，这里加了 Tiling 的 Macro，设置了 UV。

水浪效果，通过 update wavetexture 的 uv 得到一个偏移量 offset，并于原始图片的 uv 相加。

波浪效果有了，但是看起来比较单一，这里希望水面的颜色更有多彩，同时有一点邪恶的小紫色。

加了 casutic 效果后，水面有了焦散的流动。

为了让水面底部看起来颜色更深，这里使用了 smoothstep 根据 uv.y 做变化。

为了让水面上部看起来更通透，彷佛有水波打到岸，对透明度也使用了 smoothstep。

最后给小姐姐加上一个 FSM 状态机和一个 spriteatlas 的 animator controller，就可以拖到摇杆跑起来啦！

这里要注意的是，我只移动了 RT 相机，没有移动水面的 renderer，所以水面会看起来比较奇怪，可以在人物移动的时候，给水面的水波和焦散一个反方向（下次一定，下次一定）。

资源链接

点击文末【阅读原文】下载 Demo：

https://store.cocos.com/app/detail/3900

论坛专贴：

https://forum.cocos.org/t/topic/137681

实现过程

以下为社区开发者「王师傅」发布在论坛的技术分享。作者花式使用噪声图实现了 2D 水面波浪效果，这也是上文孙二喵 Demo 的方案参考，感兴趣的小伙伴可以阅读一下。帖子地址：

https://forum.cocos.org/t/topic/121407

最终效果

场景准备

首先弄个干净的 Shader，然后布个游戏场景。

主场景图

反转y轴，放在下方做水面用的

摆一下场景

NewSprite 缩放是 -0.55 ，负数是为了反转 y 轴做镜像效果。

NewSprite 用上我们新建的干净的 Shader 和材质，Shader 删掉片元着色器我们不准备用的代码，老规矩，从一张黑图开始。

precision highp float;
  
  #include <alpha-test>
  #include <texture>
  #include <cc-global>

  in vec4 v_color;

  #if USE_TEXTURE
  in vec2 v_uv0;
  uniform sampler2D texture;
  #endif

  void main () {
    vec3 color = vec3(0.);
    // 弄个t接收cc_time.x, *= 0.6是因为正常速太快，变慢点 备用
    float t = cc_time.x * 0.6;
    
    gl_FragColor = vec4(color,1.);
  }

噪声图

准备一张噪声图：

// 文件开头修改加入texture2的声明

      properties:
        texture: { value: white }
  // 添加下面的行 本行注释删掉，写在这里只是为了标识这是添加的
        texture2: {  value: white }
        
  ....
  ....
  
  
  // 片元着色器修改成下面这样：
  .....
  
  
  uniform sampler2D texture;
  // 添加下面的行
  uniform sampler2D texture2;

  void main () {
    vec3 color = vec3(0.);
    // 弄个t接收cc_time.x, *= 0.6是因为正常速太快，变慢点
    float t = cc_time.x * 0.6;

    // 对噪声图取样x通道，显示在屏幕上
    color += texture2D(texture2,v_uv0).x;
    
    gl_FragColor = vec4(color,1.);
  }

然后打开点击材质，把噪声图拖拽到材质面板中的 texture2 中。看下现在的样子：

水波效果

接着我们用这个噪声图实现水波荡漾的效果。取噪声图的 xy 两个通道，作为对场景图取样所用 uv 的偏移值，会出来什么效果呢？

片元着色器 main 函数改成下面这样：

void main () {
    vec3 color = vec3(0.);
    // 弄个t接收cc_time.x, *= 0.6是因为正常速太快，变慢点
    float t = cc_time.x * 0.6;
// + t * vec2(.5,.1)
    
    vec2 off1 = texture2D(texture2,v_uv0).xy;
    // 偏移值缩放0.1倍，不然波纹太过分了
    off1 *= .1;

    color += texture2D(texture,off1 + v_uv0).xyz;
    
    gl_FragColor = vec4(color,1.);
  }

可以看到，画面明显扭曲了，但是现在还是静态的，需要加入时间参数让这个扭曲动起来。

偏移值的0.1的缩放值还是太大，下面用0.01的试试：

void main () {
    vec3 color = vec3(0.);
    // 弄个t接收cc_time.x, *= 0.6是因为正常速太快，变慢点
    float t = cc_time.x * 0.6;

    // v_uv0 + t * vec2(.5,.1) 这里的t是上面的时间，会持续增大的一个数值
    // vec2(.5,.1) 是我随便写的一个方向向量，方向*时间 作为uv的偏移
    // 噪声图设置 WrapMode = Repeat 否则偏移值超过vec2(1.,1.)之后就取不到值了，要改成repeat才可以取值
    vec2 off1 = texture2D(texture2,v_uv0 + t * vec2(.5,.1)).xy;
    // 偏移值缩放0.1倍，不然波纹太过分了
    off1 *= .01;

    color += texture2D(texture,off1 + v_uv0).xyz;
    
    gl_FragColor = vec4(color,1.);
  }

现在，水面波动已经明显了。

水面明暗

接着实现一下水面的明暗变化，镜头越近颜色越暗（其实就是屏幕越往下变颜色越黑）。

color += texture2D(texture,off1 + v_uv0).xyz;

    // 参数0-1是正好 从黑到白的，用-.5->1.3这个范围，色值就是不太黑到不太白，免得颜色太极端
    color *= smoothstep(-.5,1.3,v_uv0.y) - .3;

水面浮沫

添加一些水面的浮沫，丰富细节。

这里又要用噪声图了。我们对噪声图再来一次取值：

// baseuv做变换对噪声图取值
    vec2 baseuv = v_uv0;
    // 让噪声图x轴重复四次，y轴重复三次
    vec2 scale = vec2(4.,3.);
    baseuv = baseuv * scale;
    
    float c1 = texture2D(texture2,baseuv).x;
    color = vec3(c1);
    
    gl_FragColor = vec4(color,1.);

现在看着像海浪，并不是我们想要的浮沫效果。怎么从这个海浪变换一个浮沫的效果出来呢？

float c1 = texture2D(texture2,baseuv).x;
    // 加这一行
    c1 = smoothstep(0.23,0.,c1);
    color = vec3(c1);

啥原理呢，上面那个大浪啊，值0-1的，用 smoothstep 对大浪做个变换，只留下 0-0.23 的色值，大于 0.23 的都变成了纯黑色。

大概画一个函数曲线：

c1 值输入函数曲线后，0-0.23范围输出了 0->1 的值，越黑的地方越亮，亮的就变黑色了，也就得到了上面图的效果。

接着让浮沫漂流起来。思考一下，如果让浮沫整体往一个方向漂是不是有点太单调太假了，不行，要做分行速度差。分20行吧，每行做移动速度不同的漂流：

float random (vec2 st) {
    return fract(sin(dot(st.xy,
                         vec2(12.9898,78.233)))*
        43758.5453123);
  }
  
  ......
  上面的函数加在main函数外面
  下面的东西是main里面的
  ......
  
  
    // 白沫的uv 所以取名mouv!
    vec2 mouv = v_uv0;
    // 做y轴分行，原理见彩虹那篇帖子
    mouv.y *= 20.;
    // n3就是行id 取名无力
    float n3 = floor(mouv.y);
    // n4就是用行id随机一个对应的随机值出来，每行一个随机值作为行的运动速度
    // 所以对于y轴在同一行（注意上面*=20，所以共20行），我们这里计算出一个改行的运动速度，放在这备用
    float n4 = random(vec2(n3,n3)) + .3;

    // baseuv做变换对噪声图取值
    vec2 baseuv = v_uv0;
    // 让噪声图x轴重复四次，y轴重复三次
    vec2 scale = vec2(4.,3.);
    baseuv = baseuv * scale;

    // 取值用的uv加上向左的移动 t是上面用过的那个cc_time.x哈，*0.1不然太快了
    // n4是上面计算好的速度哈
    baseuv.x += t * .1 * n4;
    
    float c1 = texture2D(texture2,baseuv).x;
    c1 = smoothstep(0.23,0.,c1);
    color = vec3(c1);

最终效果

综合上述几个实现后，我们得到了最终的呈现效果，完整代码：

// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.  

CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      blendState:
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      properties:
        texture: { value: white }
        texture2: {  value: white }
        alphaThreshold: { value: 0.5 }
}%


CCProgram vs %{
  precision highp float;

  #include <cc-global>
  #include <cc-local>

  in vec3 a_position;
  in vec4 a_color;
  out vec4 v_color;

  #if USE_TEXTURE
  in vec2 a_uv0;
  out vec2 v_uv0;
  #endif

  void main () {
    vec4 pos = vec4(a_position, 1);

    #if CC_USE_MODEL
    pos = cc_matViewProj * cc_matWorld * pos;
    #else
    pos = cc_matViewProj * pos;
    #endif

    #if USE_TEXTURE
    v_uv0 = a_uv0;
    #endif

    v_color = a_color;

    gl_Position = pos;
  }
}%


CCProgram fs %{
  precision highp float;
  
  #include <alpha-test>
  #include <texture>
  #include <cc-global>

  in vec4 v_color;

  in vec2 v_uv0;
  uniform sampler2D texture;
  uniform sampler2D texture2;

  float random (vec2 st) {
    return fract(sin(dot(st.xy,
                         vec2(12.9898,78.233)))*
        43758.5453123);
  }

  void main () {
    vec3 color = vec3(0.);
    // 弄个t接收cc_time.x, *= 0.6是因为正常速太快，变慢点
    float t = cc_time.x * 0.6;

    // v_uv0 + t * vec2(.5,.1) 这里的t是上面的时间，会持续增大的一个数值
    // vec2(.5,.1) 是我随便写的一个方向向量，方向*时间 作为uv的偏移
    // 噪声图设置 WrapMode = Repeat 否则偏移值超过vec2(1.,1.)之后就取不到值了，要改成repeat才可以取值
    vec2 off1 = texture2D(texture2,v_uv0 + t * vec2(.5,.1)).xy;
    // 偏移值缩放0.1倍，不然波纹太过分了
    off1 *= .01;

    color += texture2D(texture,off1 + v_uv0).xyz;

    // 参数0-1是正好 从黑到白的，用-.5->1.3这个范围，色值就是不太黑到不太白，免得颜色太极端
    color *= smoothstep(-.5,1.3,v_uv0.y) - .3;

    // 白沫的uv 所以取名mouv!
    vec2 mouv = v_uv0;
    // 做y轴分行，原理见彩虹那篇帖子
    mouv.y *= 20.;
    // n3就是行id 取名无力
    float n3 = floor(mouv.y);
    // n4就是用行id随机一个对应的随机值出来，每行一个随机值作为行的运动速度
    // 所以对于y轴在同一行（注意上面*=20，所以共20行），我们这里计算出一个改行的运动速度，放在这备用
    float n4 = random(vec2(n3,n3)) + .3;

    // baseuv做变换对噪声图取值
    vec2 baseuv = v_uv0;
    // 让噪声图x轴重复四次，y轴重复三次
    vec2 scale = vec2(4.,3.);
    baseuv = baseuv * scale;

    // 取值用的uv加上向左的移动 t是上面用过的那个cc_time.x哈，*0.1不然太快了
    // n4是上面计算好的速度哈
    baseuv.x += t * .1 * n4;
    
    float c1 = texture2D(texture2,baseuv).x;
    c1 = smoothstep(0.23,0.,c1);
    color += vec3(c1);
    
    gl_FragColor = vec4(color,1.);
  }
}%

往期精彩

二湘：朱令去世一周年，清华学子控诉清华在朱令案中的冷血和无耻

李宜雪的良知卖了2万元，真正需要声援的是罗灿宏啊

故意按摩让女生“产生欲望”后发生关系，算性侵吗？

洗牌电商圈！阿哲放话全网：挑战抖音所有机制！爆全品类大牌！

阿哲现身评论区，@一修！肉肉痛哭，无限期停播！回应舆论黑料，关闭私信评论区！

免费开源！细节拉满的一个2D实时水面反射效果Demo，基于Cocos Creator 3.5

您可能也对以下帖子感兴趣

二湘：朱令去世一周年，清华学子控诉清华在朱令案中的冷血和无耻

李宜雪的良知卖了2万元，真正需要声援的是罗灿宏啊

故意按摩让女生“产生欲望”后发生关系，算性侵吗？

洗牌电商圈！阿哲放话全网：挑战抖音所有机制！爆全品类大牌！

阿哲现身评论区，@一修！肉肉痛哭，无限期停播！回应舆论黑料，关闭私信评论区！

生成图片，分享到微信朋友圈

免费开源！细节拉满的一个2D实时水面反射效果Demo，基于Cocos Creator 3.5

您可能也对以下帖子感兴趣