Cocos Creator3.1.0 :炫酷水面效果

更新

2021.7.15 之前Creator3D的时候菜鸟自己研究实现了一个水面的效果，最近经常有小伙伴问菜鸟说是cocos creator3.0 使用会疯狂报错。主要因为Cocos Creator3D和Cocos Creator3.0是有不同的，所以之前的是不能直接拿来用的。菜鸟就抽时间基于3.1.0搞了一下.希望对大家有帮助

前言

看过菜鸟前边文章的可能知道，菜鸟在前边已经实现了三种非常简单的水面效果，那么今天菜鸟有带来了一个，BlingBling的那种!

效果

咱们还是先来看看效果：

正文

1.实现原理

实现的原理和之前实现的噪声消融原理一样

• 1.使用噪声图进行采样，
• 2.获取采样得到r，g，b任意其中一个值
• 3.与指定的阙值进行比较
• 4.比较会有两种结果：
• 结果一：显示正常的水面，可以设置适当的透明度，达到水面透明的效果
• 结果二：显示白色的纹理，透明度也可以适当的调整
• 5.对uv进行x,y坐标的偏移实现动态效果

2.代码

vec4 frag () {
  vec4 col = mainColor * texture(mainTexture, v_uv);
  vec2 uv=v_uv;
  uv.x+=cc_time.x*0.005;
  uv.y+=cc_time.x*0.005;
  vec4 noiseCol=texture(noiseTexture, uv);
  if(noiseCol.r>0.9){  
    col=vec4(1.0,1.0,1.0,0.7);
  }else{   
     col.a=0.6;
  }
  col = CC_APPLY_FOG(col, factor_fog);
  return CCFragOutput(col);
}

地址

• 微信公众号：搬砖小菜鸟

• 扫码关注公众号，发送"噪声水面"可获取源码