游戏开发之Cocos3着色器/shader快速入门

本文为学习笔记，不排除有谬误，但确保都是亲测。另外，傻狗百度收不收录的无所谓，我来博客园就是为了记记笔记。
先看下shader效果，添加学习动力

对于新人，首先明确一点：shader需要通过材质的方式作用于模型上
所以有个很关键的步骤，cocos官网文档他就是不讲（摸索了好几天）：

创建一个材质，并将Effect属性值选择为自己写的shader的文件名，然后选择模型在材质cc.MeshRenderer组件的Materials里添加上这个材质才能看到效果。

Cocos里shader的结构：

• CCEffect -->渲染过程属性配置（yml语法），可以properties定义变量方便我们在creator中调参
  
• CCProgram  --> 片段着色器是核心部分(由 GLSL 语法 声明的 Shader 片段)
  

我们通过Cocos creator新建Effect时这两部会自动创建，下面分别介绍
CCEffect：渲染过程属性

下面是一个CCEffect模板和说明：

1. CCEffect %{
2.   techniques:    # 渲染技术
3.   - name: opaque # 定义一个不透明的渲染技术，改字段有opaque和transparent两个可选值
4.     passes:      # 每个技术包含一个或多个Pass，定义了具体的渲染步骤
5.     - vert: vs: entry # 可以是CCProgram声明的顶点着色器，也可以是内置着色器，此处为CCProgram声明的顶点着色器‘vs’，入口函数是‘entry’
6.       frag: fs: entry # 可以是CCProgram声明的片元着色器，也可以是内置着色器，此处为CCProgram声明的片段着色器 ‘fs’，入口函数是‘entry’
7.       properties:
8.         mainTexture: { value: grey } # 着色器中需要同步定义一个 ‘uniform mainTexture’，该属性可在编辑器的属性检查器中进行配置
9.         colorScale: { value: [1, 1, 1], target: colorScaleAndCutoff.xyz } # 基于 ‘target’ 属性配置机制，着色器中需要同步定义一个 ‘uniform colorScaleAndCutoff’，并选取它的 x、y、z 分量填充 ‘colorScale’ 设置的数据
10.       depthStencilState: # 配置深度测试、模板测试和写入状态
11.         depthTest: true
12.         depthWrite: true
13.     ...
14.   ...
15. }%

复制代码

CCProGram：着色器核心部分

一个CCProGram模板：

1. CCProgram shader-name %{
2.   <required: precision settings> # 精度声明: precision highp float; （高精度浮点数）、precision mediump float; （中精度浮点数）、precision lowp float; （低精度浮点数）
3.   <optional: include>  # #include通常用于引入内置的宏定义或功能模块。
4.   <optional: ubo>
5.   <optional: custom attribute>
6.   <optional: >
7.   vec4 entry(){
8.     // 需要返回一个 vec4 类型数据
9.   }
10. }%

复制代码

 关于这个模板的其他介绍详见：cocos的CCProgram模板详解
第一个shader

这个着色器实现了模型的上下颜色渐变，效果见下图。我对每行代码都写了详细注释，通过这个demo应该可以入门着色器编写了：

1. CCEffect %{
2.   techniques:     # 渲染技术集合
3.   - name: opaque  # 定义一个不透明的渲染技术，改字段有opaque和transparent两个可选值
4.     passes:       # 每个技术包含一个或多个Pass，定义了具体的渲染步骤
5.     - vert: general-vs:vert # 可以是CCProgram声明的顶点着色器，也可以是内置着色器，此处为内置顶点着色器‘general-vs’
6.       frag: unlit-fs:frag   # 可以是CCProgram声明的片段着色器，也可以是内置着色器，此处为CCProgram定义的名为‘unlit-fs’的做色器
7.       properties: &props    # 定义了一个属性集合，方便在cocos creator中进行调参
8.         mainTexture:    { value: white }
9.         mainColor:      { value: [1, 1, 0, 1], editor: { type: color } }
10.         endColor:       { value: [1, 0, 0, 1], editor: { type: color } } # 新增的 endColor 属性
11.   - name: transparent
12.     passes:
13.     - vert: general-vs:vert
14.       frag: unlit-fs:frag
15.       blendState:
16.         targets:
17.         - blend: true
18.           blendSrc: src_alpha
19.           blendDst: one_minus_src_alpha
20.           blendSrcAlpha: src_alpha
21.           blendDstAlpha: one_minus_src_alpha
22.       properties: *props
23. }%
25. CCProgram unlit-fs %{
26.   precision highp float;  // 精度声明
27.   #include <legacy/output>  // 引入内置的输出宏，CCFragOutput(col)是一个宏，用于输出片段颜色
28.   #include <legacy/fog-fs>  // 引入内置的雾效宏，CC_APPLY_FOG(col, v_position)是一个宏，用于应用雾效
30.   in vec2 v_uv;         // 输入变量 v_uv 一个二维纹理坐标
31.   in vec3 v_position;   // 输入变量 v_position 一个三维坐标，代表模型表面每个点的世界坐标位置
32.   in vec3 v_normal;     // 输入变量 v_normal 一个三维法线向量
34.   uniform sampler2D mainTexture;  // 纹理采样器，mainTexture
36.   uniform Constant {  // 常量块，包含了 shader 中的常量变量
37.     // 这里定义了2个颜色变量，和上面的properties对应
38.     vec4 mainColor;
39.     vec4 endColor;
40.   };
42.   vec4 frag () {
43.     vec4 col = mainColor * texture(mainTexture, v_uv);  // 计算颜色，使用主颜色和纹理颜色的乘积
45.     // 根据 v_uv.y 的值进行渐变
46.     float t = v_uv.y;
47.     if (v_normal.y >= 0.9) { // 假设顶部的阈值为 0.9
48.       col = mainColor;
49.     } else {
50.       col = mix(mainColor, endColor, t);  // mix是GLSL中的一个内置函数，用于在两个值之间进行线性插值。
51.     }
53.     CC_APPLY_FOG(col, v_position);  // 是Cocos Creator中用于在片段着色器中应用雾效的宏，雾效可以模拟远近深度感。
54.     return CCFragOutput(col);       // CCFragOutput 是Cocos Creator中用于在片段着色器中输出最终颜色的宏，它简化了将计算得到的颜色输出到渲染管线的过程。
55.   }
56. }%

复制代码

 当我们创建一个材质，并将Effect属性值选择为上述shader的文件名，然后选择模型在材质cc.MeshRenderer组件的Materials里添加上这个材质后将看到如下效果：

舒服了，我们终于写出了自己的第一个shader，开始你的着色器奇幻之旅吧。。。
 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！