cocos 2.4版本水流shader

效果视频
https://www.bilibili.com/video/BV1j5cEegESd/?vd_source=a6ba2f806c0fbc75f155b7a1cf9a9620
水流可以源源不断的流动,可以设置水流速度,密度
最重要的是简单,谁都能看懂的shader
昨天看到玉兔的一个水体shader教程,但是看了一下,对于不懂shader的来说还是很难,所以整了一个min版本,超简单,效果还行

关键代码就这几行,其他都没怎么动

全部代码

CCEffect %{
techniques:

  • passes:
    • vert: vs
      frag: fs
      blendState:
      targets:
      - blend: true
      rasterizerState:
      cullMode: none
      properties:
      texture: { value: white }
      alphaThreshold: { value: 0.5 }
      time: { value: 0.0 } //时间
      waveTexture: { value: white } //噪声图
      causticTexture: { value: white } //焦散图
      waveSpeed: { value: 0.012 } //水波移动时间
      waveStrenth: { value: 0.1 } //水波强度
      casticStrenth: { value: 0.2 } //焦散强度

}%

CCProgram vs %{
precision highp float;

#include
#include

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
#include
#include

in vec4 v_color;

uniform sampler2D waveTexture;
uniform sampler2D causticTexture;
//自定义的数据
uniform customerData {
float time;
float waveSpeed;
float waveStrenth;
float casticStrenth;
};

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

//水波方向
vec2 waveDirection = vec2(1.0, 0.0);
float waveTime = waveSpeed * time;

void main() {
//-------------------------------预处理---------------------------------
//水波方向
#if WATER_WAVE_DIRECT_HOR
waveDirection = vec2(1.0, 0.0);
#else
waveDirection = vec2(0.0, 1.0);
#endif

#if WATER_WAVE_DIRECT_HOR_AND_VER
waveDirection = vec2(1.0, 1.0);
#endif

//是否让水波原地,
#if USE_NOt_MOVE
waveTime = waveSpeed * sin(time);
#endif
//----------------------------------------------------------------

vec4 orginO = vec4(1, 1, 1, 1);

#if USE_TEXTURE
CCTexture(texture, v_uv0, orginO);
#endif

vec2 uv = v_uv0;

//噪声图
vec2 offset = texture(waveTexture, mod(v_uv0 + waveTime * waveDirection, 1.0)).xy * waveStrenth;

uv += offset;
vec4 o = texture2D(texture, uv);

#if USE_CAUSTIC

//焦散图
vec2 uv_caustic = v_uv0;
vec2 offset2 = texture(causticTexture, mod(v_uv0 + waveTime * waveDirection, 1.0)).xy * waveStrenth;
uv_caustic += offset2;
vec4 o2 = texture2D(causticTexture, uv_caustic);
o.rgb += o2.rgb * casticStrenth;

#endif

o.a = orginO.a;

ALPHA_TEST(o);

// 输出颜色
gl_FragColor = o.rgba;

}
}%

4赞

大佬666,mark了

战略mark一个