cocos creator 2.x shader

示例文件

// 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 }
}%

// 顶点着色器,对应上main声明的名字 vs
CCProgram vs %{
  // lowp 低等精度(low pixel)
  // mediump 中等精度(medium pixel)
  // highp 高等精度(high pixel)
  precision highp float;

  // 统一值(shader playground 内置的变量(见附录),非cocos 内置变量,不能直接使用)
  // uniform vec2 u_resolution; // 画布尺寸(宽,高)
  // uniform vec2 u_mouse;      // 鼠标位置(在屏幕上哪个像素)
  // uniform float u_time;     // 时间(加载后的秒数)

  // 下面说明
  #include <cc-global>
  // 下面说明
  #include <cc-local>

  in vec3 a_position;
  in vec4 a_color;
  out vec4 v_color;

  in vec2 a_uv0;
  out vec2 v_uv0;

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

    #if CC_USE_MODEL
    pos = cc_matViewProj * cc_matWorld * pos;
    #else
    pos = cc_matViewProj * pos;
    #endif

    v_uv0 = a_uv0;
    v_color = a_color;
    gl_Position = pos; // gl_ 开头的变量都是 openGL 的内置变量,自己的变量不要用 gl_ 开头
  }
}%

// 片段(片元)着色器,对应最上面声明的名字 fs
CCProgram fs %{
  precision highp float;

  // 下面说明
  #include <cc-global>

  in vec4 v_color;
  in vec2 v_uv0;
  uniform sampler2D texture;
  // uniform PROPERTIES{ vec4 color; float factor; float width; float u_time; } 

  void main () {
    vec4 c = texture2D(texture, v_uv0);
    float clrbright = (c.r + c.g + c.b) * (1. / 3.);
    float gray = (0.6) * clrbright;
    float d = sin(cc_time.x); // 使用 cc-global 中的内置变量 cc_time.x
    gl_FragColor = vec4(c.r * d, c.g, c.b, c.a);  // gl_ 开头的变量都是 openGL 的内置变量,自己的变量不要用 gl_ 开头
  }
}%

说明

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

cc-global

是内置的全局变量包,包含以下变量(常用的时间等)

#pragma builtin(global)
uniform CCGlobal {
  vec4 cc_time; // x
  vec4 cc_screenSize; // xy zw
  vec4 cc_screenScale; //
  vec4 cc_nativeSize; //
  mat4 cc_matView;
  mat4 cc_matViewInv;
  mat4 cc_matProj;
  mat4 cc_matProjInv;
  mat4 cc_matViewProj;
  mat4 cc_matViewProjInv;
  vec4 cc_cameraPos; // xyz
  vec4 cc_exposure; // x: exp, y: expInv, w: expScale
  vec4 cc_mainLitDir; // xyz
  vec4 cc_mainLitColor; // xyz: color, w: intensity
  vec4 cc_ambientSky;
  vec4 cc_ambientGround;
};
  • 因为uniform 每个「插槽」能够存储一个四元数。
  • cc_time 应该只有第一位放了时间,也就是 [x,y,z,w] 里的 x。
  • 下面其它变量同理。

cc-local

#pragma builtin(local)
uniform CCLocal {
  mat4 cc_matWorld;
  mat4 cc_matWorldIT;
};

其他包和常用方法

|-- 点我去 cocos creator 源码 -->>>

常见问题

1. 精度问题

1 != 1.
0.1 == .1

1 是整数
1.1.0 即浮点数

openGL 不会进行强制类型转换,需要书写的时候确定变量类型

eg:

gl_FragColor = vec4(1, 1, 1, 1); // 错误
gl_FragColor = vec4(1., 1., 1., 1.); // 正确
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); // 正确

附录:怎么学 shader