CocosCreator2.4 Shader学习_cocos creator 2.4 shader

模板

路径
不同版本就进入不同版本的路径
D:\CocosDashboard_1.0.9\resources.editors\Creator\2.4.6\resources\engine\cocos2d\renderer\build\chunks

在input-standard.inc中

想要拿到什么参数可以从这里复制

面板

源码

// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
// cocos描述
CCEffect %{
  techniques:
  - passes:
      # 顶点
    - vert: vs
      # 面
      frag: fs
      blendState:
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      # 属性列表
      properties:
        texture: { value: white }
        alphaThreshold: { value: 0.5 }
        # 新增属性
        my_runTime: { value: 0 ,editor: { type: number ,tooltip: "时间"}}
        my_diffuseColor: { value: [1, 1, 1, 1], editor: { type: color ,tooltip: "叠加颜色"} }
}%

// 顶点Shader
CCProgram vs %{
  // GLSL 精度 高精度：highp 中精度：mediump 低精度 lowp
  precision highp float;

  #include <cc-global>
  #include <cc-local>

  //in 就是渲染管道传进来的数据

  //顶点位置数据
  in vec3 a_position;
  //顶点颜色数据
  in vec4 a_color;
  out vec4 v_color;

  #if USE_TEXTURE
  //顶点纹理坐标
  in vec2 a_uv0;
  out vec2 v_uv0;
  #endif

  // #if USE_ATTRIBUTE_NORMAL
  // //顶点法线
  // in vec3 a_normal;
  // #endif

  void main () {
    vec4 pos = vec4(a_position, 1);

    #if CC_USE_MODEL
    //cc_matViewProj 模型=》世界坐标 每次绘制时引擎自动传递 
    //cc_matWorld 世界=》透视坐标 
    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;
  }
}%

// 面Shader
CCProgram fs %{
  precision highp float;

  #include <alpha-test>
  #include <texture>

  in vec4 v_color;

  #if USE_TEXTURE
  in vec2 v_uv0;
  uniform sampler2D texture;

  //自定义字段
  uniform block{
    float my_runTime;
  };
  uniform blocktwo{
    vec4 my_diffuseColor;
  };
  #endif

  void main () {
    // vec4 o = vec4(1, 1, 1, 1);
    //修改颜色为变量颜色
    vec4 o = my_diffuseColor;
    vec2 myoffset=vec2(0,my_runTime);
    #if USE_TEXTURE
      CCTexture(texture, v_uv0+myoffset, o);
    #endif

    o *= v_color;

    ALPHA_TEST(o);

    #if USE_BGRA
      gl_FragColor = o.bgra;
    #else
      gl_FragColor = o.rgba;
    #endif
  }
}%

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114