摘要

今天在论坛看到官方出了shader入门教程b站直达。关于shader简单的介绍在第一篇shader圆角中有简单介绍，现在开始进行扫光特效，防止自己过几天忘记现在记录一下。

版本说明

使用 CocosCreator 的 2.4.3 版本。

开始

效果演示：

img_name

注意：

需要在头部定义两个变量，一个为width扫光的宽度，strength 深度。并在片元着色器片段中定义该属性变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      blendState:
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      properties:
        texture: { value: white }
        width: { value: 0.3 }
        strength: { value: 1.2 }
	}%
    CCProgram fs %{
        uniform ARGS{
            float width;
            float strength;
        };
    }
实现代码：

片元着色器片段代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
CCProgram fs %{
  precision highp float;
  #include <alpha-test>
  #include <cc-global>
  #include <texture>

  in vec4 v_color;

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

  uniform ARGS{
    float width;
    float strength;
  };

  void main () {
    vec4 o = vec4(1, 1, 1, 1);
    #if USE_TEXTURE
      float feather = 0.01;
      float dis = distance(vec2(v_uv0.x, v_uv0.y), vec2(0.5, 0.5));
      o.a = smoothstep(0.5,0.5 - feather, dis);
      o *= texture(texture,v_uv0);
      float time_step = -width;
      time_step += mod(cc_time.x, 1.5 + 3.5 * width);
      if (v_uv0.x >= -v_uv0.y + time_step && v_uv0.x <= -v_uv0.y + width + time_step) {
        o *= strength;
      }
    #endif
    gl_FragColor = o;
  }
}%