Cocos 2.3 Shader 编写示例

Creator 2.x
#13

新增水波动态特效

  • 水波特效产生图片折射扭曲的动效.
    原理就是对当前的uv 坐标进行 线性+三解函数等混合变换, 产生一个新的采样坐标,以此来产生像素不在原位的效果.同时又区别于模糊效果那种随机采样的混乱感.
CCProgram fs %{
  precision highp float;
  
  #include <alpha-test>
  #include <cc-global>

  in vec4 v_color;

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

  uniform Param{
    vec2 size;
    float time;
  };

  #define F(x,y) vec2( cos(x-y) * cos(y) , sin(x+y) * sin(y))

  vec2 wave(in vec2 p) {

      // 返回一个 x,y 与时间相关的平移点坐标. 
      // 将线性x/y 函数, 结合F(),三角函数,生成一个随机变化的坐标点.
      float d = time * 0.2, x=8.*(p.x + d), y=8.*(p.y + d);
      return F(x , y);
  }

  void main () {

    vec4 o = vec4(1, 1, 1, 1);

    o *= v_color;

    ALPHA_TEST(o);

    // size 由外部传递进来的sprite节点的实际尺寸.
    vec2 q = v_uv0 + 2.0 / size.x * ( wave(v_uv0) - wave( v_uv0 + size ) );
    // 用新的点进行采样颜色.
    gl_FragColor = o * texture(texture , q);
  }
}%

实际效果(静态瞬间):

#14

新增变色龙效果

动态变化图片的rgb通道强弱.

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

  in vec4 v_color;

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

  uniform Time{
    float time;
  };

  void main () {
    vec4 o = vec4(1, 1, 1, 1);

    o = v_color* texture(texture, v_uv0);

   // 使用三角函数,分别生成rgb通道的 强弱数值,范围都是[0-1], 然后同时叠加给正常的像素颜色值.
    float r = abs(sin(time));
    float g = abs(cos(time*1.7));
    float b = abs(sin(time*2.3));
    o.r *= r;
    o.g *= g;
    o.b *= b;

    gl_FragColor = o;
  }
}%

静态瞬间:

2赞
#15

好的，我以为有像a_position一样的字段能直接获取到呢

#16

mark

1赞
#17

mark

#18

大佬，我的那个变色龙效果····和你的怎么感觉有点不一样？

#19

人家的变色龙是基于rgb，你的变色龙是基于HSL。当然不一样。

#20

我只看了眼说是shader，我也没细看·····
rgb的话，直接用color 也可以么？
我错了·····

#21

要火哟

#22

https://thebookofshaders.com/06/?lan=ch
The Book of Shaders 目测能够让人从0开始入门shader的最牛教材.

1赞
#23

mark

#24

真的流弊

#25

:14:

#26

nice

#27

mark 膜拜

#28

你为啥这么秀？火钳mark

#29

大佬们 求一个在片段着色器中使用for，并且for的初值和终值不是常量的方法

#30

这里的rand是什么意思啊？

#31

自定义的随机函数呀.

#32

片断着色每次执行的时候就是处理一个像素的内容的啊, 你用for 是要干啥.