效果视频
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 } //焦散强度
- vert: vs
}%
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;
}
}%