本文参考
Creator3D: shader10_解析【Creator3D shader】的正确姿势（汇总1）
一、Creator3D:基础1_一起学shader_红色小球
源码见https://gitee.com/carlosyzy/Creator3D_Mesh_Basics项目中的Tes1示例
1.用法
新建一个material，选择示例中的Effect
这里面Technique只有一个，别的选项先不管。创建一个3D物体，把上面的material替换上去，就能看到变成红色。
2.test1.effect文件内容
CCEffect %{
techniques:
- name: opaque
passes:
- vert: general-vs:vert # builtin header
frag: unlit-fs:frag
}%
CCProgram unlit-fs %{
precision highp float;
vec4 frag () {
vec4 color=vec4(1.0,0.0,0.0,1.0);
return color;
}
}%
这里如果在VS CODE中打开，会自动提示安装一下插件
name对应的就是每一个technique名字，这里只填了一个，对应在IDE中也只有一个。
每个technique只有一个pass。有一些效果，我们需要多次渲染同一个物体才能实现，这个时候就需要多pass，大部分情况下，只需要一个pass就能搞定了。
在effect格式中的代码中我们能看见这样三行代码，文档中是这样写的：每个 Pass 只有两个必填参数：vert 和 frag 声明了当前 pass 使用的 shader, 格式为 片段名:入口函数名 这个名字可以是本文件中声明的 shader 片段名, 也可以是引擎提供的标准头文件。其中：
- vert 表示的是顶点着色器的入口函数
- frag 表示的片元着色器的入口
在示例一中，只是让物体显示红色，所以只要写片元着色器
CCProgram unlit-fs %{
precision highp float;
vec4 frag () {
vec4 color=vec4(1.0,0.0,0.0,1.0);
return color;
}
}%
这里我改了一下effect内容的方法名，如下：
frag: unlit-fs111:frag
}%
CCProgram unlit-fs11 %{
报错了，方法名改成一样的，就可以了。
1.precision highp float;
float类型在 shaders 中非常重要，
所以精度非常重要。更低的精度会有更快的渲染速度，但是会以质量为代价。
你可以选择每一个浮点值的精度。
在第一行（precision highp float;）我们就是设定了所有的浮点值都是高精度。
但我们也可以选择把这个值设为“低”（precision lowp float;）或者“中”（precision mediump float;）。
2.vec4 frag () 函数入口
大概写一下shader中的数据类型：float, vec2, vec3, vec4, mat2, mat3, mat4, sampler2D and samplerCube，至于具体的区别，我都列出来，大家可以百度查一下。
3.vec4 color=vec4(1.0,0.0,0.0,1.0);
定义一个颜色，其中vec4中的x,y,z,w分别代表颜色的r,g,b,a;我用的是红色，大家可以任意设置（0-1直接的浮点数）
二、Creator3D:基础2_一起学shader_变色小球
源码见https://gitee.com/carlosyzy/Creator3D_Mesh_Basics项目中的Tes2示例
CCEffect %{
techniques:
- name: opaque
passes:
- vert: general-vs:vert # builtin header
frag: unlit-fs:frag
}%
CCProgram unlit-fs %{
precision highp float;
#include
#include 1.cc_time
官方文档常用 shader 内置 Uniform
2.Fragment Ouput
在之前的文章和今天这个文章的我对颜色的返回都是直接return：
return oldColor;
当然这样是不标准的，来看看官方的文档Effect syntax
为对接引擎渲染管线，Creator 提供了 CCFragOutput 工具函数，对所有无光照 shader，都可以直接在 fs 返回时类似这样写：
#include 这样中间的颜色计算就不必区分当前渲染管线是否为 HDR 流程等。
如需包含光照计算，可结合标准着色函数 CCStandardShading 一起构成 surface shader 流程：
#include
#include
void surf (out StandardSurface s) {
// fill in your data here
}
vec4 frag () {
StandardSurface s; surf(s);
vec4 color = CCStandardShading(s);
return CCFragOutput(color);
}
在此框架下可方便地实现自己的 surface 输入，或其他 shading 算法。
注意：CCFragOutput 函数一般还是不需要自己实现，它只起到与渲染管线对接的作用，且对于这种含有光照计算的输出，因为计算结果已经在 HDR 范围，所以应该包含 output-standard 而非 output 头文件。
3.内置函数
上边用到了sin函数，这里顺带给大家提供一下shader的内置函数
- radians(degree) : 角度变弧度；
- degrees(radian) : 弧度变角度；
- sin(angle), cos(angle), tan(angle)
- asin(x): arc sine, 返回弧度 [-PI/2, PI/2];
- acos(x): arc cosine,返回弧度 [0, PI];
- atan(y, x): arc tangent, 返回弧度 [-PI, PI];
- atan(y/x): arc tangent, 返回弧度 [-PI/2, PI/2];
- pow(x, y): x的y次方；
- exp(x): 指数, log(x)：
- exp2(x): 2的x次方， log2(x):
- sqrt(x): x的根号；inversesqrt(x): x根号的倒数
- abs(x): 绝对值
- sign(x): 符号, 1, 0 或 -1
- floor(x): 底部取整
- ceil(x): 顶部取整
- fract(x): 取小数部分
- mod(x, y): 取模， x - y*floor(x/y)
- min(x, y): 取最小值
- max(x, y): 取最大值
- clamp(x, min, max): min(max(x, min), max);
- mix(x, y, a): x, y的线性混叠， x(1-a) + y*a;
- step(edge, x): 如 x
- smoothstep(edge0, edge1, x): threshod smooth transition时使用。edge0<=edge0时为0.0， x>=edge1时为1.0
- length(x): 向量长度
- distance(p0, p1): 两点距离， length(p0-p1);
- dot(x, y): 点积，各分量分别相乘 后 相加
- cross(x, y): 差积，x[1]y[2]-y[1]x[2], x[2]y[0] - y[2]x[0], x[0]y[1] - y[0]x[1]
- normalize(x): 归一化， length(x)=1;
- faceforward(N, I, Nref): 如 dot(Nref, I)< 0则N, 否则 -N
- reflect(I, N): I的反射方向， I -2dot(N, I)N, N必须先归一化
- refract(I, N, eta): 折射，k=1.0-etaeta(1.0 - dot(N, I) * dot(N, I)); 如k<0.0 则0.0，否则 etaI - (etadot(N, I)+sqrt(k))*N
- matrixCompMult(matX, matY): 矩阵相乘, 每个分量 自行相乘， 即 r[i][j] = x[i][j]*y[i][j];矩阵线性相乘，直接用 *
- lessThan(vecX, vecY): 向量 每个分量比较 x < y
- lessThanEqual(vecX, vecY): 向量 每个分量比较 x<=y
- greaterThan(vecX, vecY): 向量 每个分量比较 x>y
- greaterThanEqual(vecX, vecY): 向量 每个分量比较 x>=y
- equal(vecX, vecY): 向量 每个分量比较 x==y
- notEqual(vecX, vexY): 向量 每个分量比较 x!=y
- any(bvecX): 只要有一个分量是true， 则true
- all(bvecX): 所有分量是true， 则true
- not(bvecX): 所有分量取反
- texture2D(sampler2D, coord): texture lookup
- texture2D(sampler2D, coord, bias): LOD bias, mip-mapped texture
- texture2DProj(sampler2D, coord):
- texture2DProj(sampler2D, coord, bias):
- texture2DLod(sampler2D, coord, lod):
- texture2DProjLod(sampler2D, coord, lod):
- textureCube(samplerCube, coord):
- textureCube(samplerCube, coord, bias):
- textureCubeLod(samplerCube, coord, lod):
三、Creator3D:基础3_一起学shader_波浪小球
源码见https://gitee.com/carlosyzy/Creator3D_Mesh_Basics项目中的Tes3示例
CCEffect %{
techniques:
- name: opaque
passes:
- vert: general-vs:vert # builtin header
frag: unlit-fs:frag
}%
//第一个shader 正常渲染
CCProgram unlit-fs %{
precision highp float;
#include
#include 1.in vec3 v_position
首先大家可以先了解一下in和out的，in表示传入，out表示传出。
在这里是将模型顶点的世界坐标传了进来，从哪里传进来的呢，答案是顶点着色器（vert: general-vs:vert），在这里咱们没有自定义顶点着色器，用的是引擎自带的默认的。
给大家看一下默认顶点着色器的代码：
precision highp float;
#include
#include
#include
in vec3 a_color;
in vec2 a_texCoord;
#if HAS_SECOND_UV
in vec2 a_texCoord1;
#endif
out vec3 v_position;
out vec3 v_normal;
out vec3 v_tangent;
out vec3 v_bitangent;
out vec2 v_uv;
out vec2 v_uv1;
out vec3 v_color;
vec4 vert () {
StandardVertInput In;
CCVertInput(In);
mat4 matWorld, matWorldIT;
CCGetWorldMatrixFull(matWorld, matWorldIT);
v_position = (matWorld * In.position).xyz;
v_normal = normalize((matWorldIT * vec4(In.normal, 0.0)).xyz);
v_tangent = normalize((matWorld * vec4(In.tangent.xyz, 0.0)).xyz);
v_bitangent = cross(v_normal, v_tangent) * In.tangent.w; // note the cross order
v_uv = a_texCoord;
#if HAS_SECOND_UV
v_uv1 = a_texCoord1;
#endif
v_color = a_color;
return cc_matProj * (cc_matView * matWorld) * In.position;
}
因为现在没有说到顶点着色器，所以就不做详细的说明，大家只要知道片元着色器中的in和顶点着色器中的out是对应的。
//初始化颜色 蓝色
vec4 color = vec4(0.0,0.6,1.0,1.0);
//顶点的y轴坐标+正弦值（顶点的x坐标+shader运行时间）
//shader运行时间保证同一坐标正弦值是变化的，
//7.0是一个波浪波动速度缩放值，可以手动调整
//40 是波浪高度的缩放值，因为球的大小为vec3(1.0,1.0,1.0,),sin介于-1到1直接，
if(v_position.y+sin((v_position.x+cc_time.x)*7.0)/40.0> 0.0){
color = vec4(1.0,1.1,1.0,0.0);
return CCFragOutput(color);
}
把上述代码的color改成vec4(1.0,0.0,0.0,0.0)，可以看到上半部分的白色变成红色。
如果把+cc_time.x去除，波浪就不变化了
四、Creator3D:基础4_一起学shader_没有尽头的路
没找到源码，效果如下
实际效果就是利用shader实现一个透明度变化的效果，变化规则是根据摄像机的距离，透明度从1到0的一个变化过程
CCEffect %{
techniques:
- name: opaque
passes:
- vert: general-vs:vert # builtin header
frag: unlit-fs:frag
properties: &props
mainTexture: { value: white }
mainColor: { value: [1, 1, 1, 1], editor: { type: color } }
- name: transparent
passes:
- vert: general-vs:vert # builtin header
frag: unlit-fs:frag
blendState:
targets:
- blend: true
blendSrc: src_alpha
blendDst: one_minus_src_alpha
blendSrcAlpha: src_alpha
blendDstAlpha: one_minus_src_alpha
properties: *props
}%
CCProgram unlit-fs %{
precision highp float;
#include 核心代码如下
//cc_cameraPos creator内部提供的，相机的位置，注意需要导入#include
//逐个顶点判断与摄像机的距离
float dis=distance(cc_cameraPos.xyz,v_position);
//随着距离增大，透明度变小
//5.0 表示从距离摄像机5.0后开始透明度变化
//50.0表示透明度从1-0的距离为50
//两个参数大家都可以修改
float apha=1.0-(dis-5.0)/50.0;;
vec3 color=mainColor.xyz;
return CCFragOutput(vec4(color,apha) * texture(mainTexture, v_uv));
五、其它示例
Creator3D_shader5_代码如何控制effect中的属性
Creator3D:shader6_程序员也是会心动的
Creator3D:shader7_尽然还有双pass这波操作
Creator3D:shader8_这种shader怎样配标题
Creator3D:shader9_这样的内发光你喜欢不
六、
Cocos Shader入门基础四：Uniform与材质参数控制