本文为学习笔记，不排除有谬误，但确保都是亲测。另外，傻狗百度收不收录的无所谓，我来博客园就是为了记记笔记。
先看下shader效果，添加学习动力
对于新人，首先明确一点：shader需要通过材质的方式作用于模型上
所以有个很关键的步骤，cocos官网文档他就是不讲（摸索了好几天）：
创建一个材质，并将Effect属性值选择为自己写的shader的文件名，然后选择模型在材质cc.MeshRenderer组件的Materials里添加上这个材质才能看到效果。
Cocos里shader的结构：
- CCEffect -->渲染过程属性配置（yml语法），可以properties定义变量方便我们在creator中调参
- CCProgram --> 片段着色器是核心部分(由 GLSL 语法 声明的 Shader 片段)
我们通过Cocos creator新建Effect时这两部会自动创建，下面分别介绍
CCEffect：渲染过程属性
下面是一个CCEffect模板和说明：
CCEffect %{ techniques: # 渲染技术 - name: opaque # 定义一个不透明的渲染技术，改字段有opaque和transparent两个可选值 passes: # 每个技术包含一个或多个Pass，定义了具体的渲染步骤 - vert: vs: entry # 可以是CCProgram声明的顶点着色器，也可以是内置着色器，此处为CCProgram声明的顶点着色器‘vs’，入口函数是‘entry’ frag: fs: entry # 可以是CCProgram声明的片元着色器，也可以是内置着色器，此处为CCProgram声明的片段着色器 ‘fs’，入口函数是‘entry’ properties: mainTexture: { value: grey } # 着色器中需要同步定义一个 ‘uniform mainTexture’，该属性可在编辑器的属性检查器中进行配置 colorScale: { value: [1, 1, 1], target: colorScaleAndCutoff.xyz } # 基于 ‘target’ 属性配置机制，着色器中需要同步定义一个 ‘uniform colorScaleAndCutoff’，并选取它的 x、y、z 分量填充 ‘colorScale’ 设置的数据 depthStencilState: # 配置深度测试、模板测试和写入状态 depthTest: true depthWrite: true ... ... }%CCProGram：着色器是核心部分
一个CCProGram模板：
CCProgram shader-name %{ <required: precision settings> # 精度声明: precision highp float; （高精度浮点数）、precision mediump float; （中精度浮点数）、precision lowp float; （低精度浮点数） <optional: include> # #include通常用于引入内置的宏定义或功能模块。 <optional: ubo> <optional: custom attribute> <optional: > vec4 entry(){ // 需要返回一个 vec4 类型数据 } }%关于这个模板的其他介绍详见：cocos的CCProgram模板详解
第一个shader
这个着色器实现了模型的上下颜色渐变，效果见下图。我对每行代码都写了详细注释，通过这个demo应该可以入门着色器编写了：
CCEffect %{ techniques: # 渲染技术集合 - name: opaque # 定义一个不透明的渲染技术，改字段有opaque和transparent两个可选值 passes: # 每个技术包含一个或多个Pass，定义了具体的渲染步骤 - vert: general-vs:vert # 可以是CCProgram声明的顶点着色器，也可以是内置着色器，此处为内置顶点着色器‘general-vs’ frag: unlit-fs:frag # 可以是CCProgram声明的片段着色器，也可以是内置着色器，此处为CCProgram定义的名为‘unlit-fs’的做色器 properties: &props # 定义了一个属性集合，方便在cocos creator中进行调参 mainTexture: { value: white } mainColor: { value: [1, 1, 0, 1], editor: { type: color } } endColor: { value: [1, 0, 0, 1], editor: { type: color } } # 新增的 endColor 属性 - name: transparent passes: - vert: general-vs:vert 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 <legacy/output> // 引入内置的输出宏，CCFragOutput(col)是一个宏，用于输出片段颜色 #include <legacy/fog-fs> // 引入内置的雾效宏，CC_APPLY_FOG(col, v_position)是一个宏，用于应用雾效 in vec2 v_uv; // 输入变量 v_uv 一个二维纹理坐标 in vec3 v_position; // 输入变量 v_position 一个三维坐标，代表模型表面每个点的世界坐标位置 in vec3 v_normal; // 输入变量 v_normal 一个三维法线向量 uniform sampler2D mainTexture; // 纹理采样器，mainTexture uniform Constant { // 常量块，包含了 shader 中的常量变量 // 这里定义了2个颜色变量，和上面的properties对应 vec4 mainColor; vec4 endColor; }; vec4 frag () { vec4 col = mainColor * texture(mainTexture, v_uv); // 计算颜色，使用主颜色和纹理颜色的乘积 // 根据 v_uv.y 的值进行渐变 float t = v_uv.y; if (v_normal.y >= 0.9) { // 假设顶部的阈值为 0.9 col = mainColor; } else { col = mix(mainColor, endColor, t); // mix是GLSL中的一个内置函数，用于在两个值之间进行线性插值。 } CC_APPLY_FOG(col, v_position); // 是Cocos Creator中用于在片段着色器中应用雾效的宏，雾效可以模拟远近深度感。 return CCFragOutput(col); // CCFragOutput 是Cocos Creator中用于在片段着色器中输出最终颜色的宏，它简化了将计算得到的颜色输出到渲染管线的过程。 } }%当我们创建一个材质，并将Effect属性值选择为上述shader的文件名，然后选择模型在材质cc.MeshRenderer组件的Materials里添加上这个材质后将看到如下效果：
舒服了，我们终于写出了自己的第一个shader，开始你的着色器奇幻之旅吧。。。
