creator shader:不从零开始了,2d的河面河流水面波浪漂流的效果

河面水流的效果
又名,噪声图的花式用法

  1. 抄自哪里的呢?网上看别的人游戏有一个,就搞了搞试试,还凑合
  2. 开始吧,弄个干净的shader,然后布个游戏场景

主场景图

这张图是反转y轴,放在下方做水面用的

场景摆一下,


NewSprite 缩放是-0.55 ,负数是为了反转y轴做镜像效果,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.);
  }

  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中。
看下现在的样子

  1. 好,现在要用这个噪声图干嘛呢?做水波荡漾
    取噪声图的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.);
  }


水面波动已经明显了。

  1. 水面的明暗变化,镜头越近颜色越暗
    其实就是屏幕越往下变颜色越黑了。。
    color += texture2D(texture,off1 + v_uv0).xyz;

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

  1. 添加一些水面的浮沫
    开头为啥说是噪声图的花式运用呢,因为这里又要用噪声图了。

对噪声图再来一次取值,前面讲的那一堆可以留下别管,也可以先删掉,单独看这一段。最后上个完全的代码吧

    // 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的值,越黑的地方越亮,亮的就变黑色了,就是上面图的效果了。

  1. 浮沫漂流起来
    先做个思考,整体往左飘是不是有点太单调太假了,我还做shader干嘛呢,直接做个静态图往左移不就好了吗
    不行,要做分行速度差。
    分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);

  1. 用前面做出来的荡漾的水面加上下面的浮沫出来就是最终效果,贴代码吧
// 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.);
  }
}%

  1. 后话
    代码里的运动用的移动速度为了做gif看起来明显我调大了,各位自己搞的时候自己调调速度,挑一个自己满意的出来。

前面提到的一些分行 噪声的知识在下面链接



公众号,欢迎关注

37赞

6p6p!6pplus

6p6p!6ppro

6p6pro!6maxpro!

6p6pro!6maxpro!

666,我又来抄作业了

666,开始抄作业

跪着看完的~

不从零开始,那就标记0.1开始吧

不从零开始我就看不懂了

哪里,我从评论区补注释

mark !

就你这个图,人物左右移动呢

目前看来只能用 rendertexture,没想出有啥别的方案

cc_time,用这个变量,波浪过去不就没了吗
如果update改的话又会出现波浪跳跃的问题

1赞

波浪图改成repeat

好了,感谢

1赞

又在王师傅这里学了一手绝活!工资+100!

支持~~马克

那个倒影是图片还是shader??????