2D 精灵着色器：Gradient

默认的情况下，UI 和 2D 组件会使用引擎内置的着色器，这些着色器放在 资源管理器 面板的 internal -> effects 目录下，可查看 内置着色器 来了解其作用。

对于任何持有 CustomMaterial 属性的 UI 和 2D 组件，都可在 属性检查器 内通过该属性的下拉框选择或者从 资源管理器 内拖拽实现自定义材质。

引擎规定 UI 组件的自定义材质只能有一个。

内置的 UI 着色器

注意：

  1. 在使用自定义材质后，可能会打断合批。
  2. 关于 UI 和 2D 组件合批的使用，可以参考：2D 渲染组件合批规则说明

本文将通过实现一个精灵的渐变着色器来演示如何为 UI 和 2D 组件使用自定义着色器。

搭建工程

通过 CocosDashBoard 创建一个新的 2D 项目。

创建一个新的场景并在场景内添加一个 Sprite：

create sprite

在 资源管理器 内执行以下的操作：

  • 创建名为 gradient.effect 的着色器文件
  • 拷贝 资源管理器 -> intenal -> effects 内的 builtin-sprite 着色器的内容到 gradient.effect 内
  • 创建名为 gradient.mtl 的材质并在 属性查看器 内的 Effect 栏选择 gradient.effect
  • 导入任意的纹理

材质和着色器的创建可通过在 资源管理器 内任意空白处点击鼠标右键，或单击 资源管理 上的 + 按钮

create-mtl-effect

创建好的工程如图示：

create asset

选中创建好的精灵，将 gradient.mtl 材质和导入的纹理分别赋予给精灵的对应属性：

custom-material

CCEffect

通过观察可得知，渐变可以理解为在某个轴上，随着坐标变化，颜色发生变化的现象。因此在 CCEffect 段内给着色器的 properties 增加两个颜色属性分别代表渐变的起始颜色和结束颜色。

  1. startColor: { value: [1.0, 1.0, 1.0, 1.0], # gradientA 的 RGBA 通道的默认值
  2.               editor: {type: color} } # 在属性查看器内展示的样式，此处展示为颜色
  3. endColor: { value: [1.0, 1.0, 1.0, 1.0], 
  4.               editor: {type: color} }}

此时的 CCEffect:

  1. CCEffect %{
  2.   techniques:
  3.   - passes:
  4.     - vert: sprite-vs:vert
  5.       frag: sprite-fs:frag
  6.       depthStencilState:
  7.         depthTest: false
  8.         depthWrite: false
  9.       blendState:
  10.         targets:
  11.         - blend: true
  12.           blendSrc: src_alpha
  13.           blendDst: one_minus_src_alpha
  14.           blendDstAlpha: one_minus_src_alpha
  15.       rasterizerState:
  16.         cullMode: none
  17.       properties:
  18.         alphaThreshold: { value: 0.5 }
  19.         startColor: { value: [1.0, 1.0, 1.0, 1.0], editor: {type: color} }
  20.         endColor: { value: [1.0, 1.0, 1.0, 1.0], editor: {type: color} }
  21. }%

注意这里定义了两个颜色值 startColor 和 endColor，如果要将这两个颜色正确的传入给着色器片段，则需要增加对应的 Uniform。

引擎规定，不允许离散使用 Uniform，因此在 CCProgram sprite-fs 段内添加下列的代码：

  1. uniform Constant{
  2.     vec4 startColor;
  3.     vec4 endColor;
  4. };

此时引擎会自动将 properties 内定义的属性和 Constant 内的 Uniform 进行关联。

顶点着色器

通常不用对顶点着色器做额外的处理，因此保留系统内置的 sprite-vs。

顶点着色器

片元着色器

在默认的精灵着色器内，精灵顶点的 XY 轴和纹理坐标的 UV 是对应的，因此可考虑使用纹理坐标的变化来达成渐变，在 USE_TEXTURE 宏定义的范围内增加下列代码：

  1. #if USE_TEXTURE            
  2.     o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0); 
  3.     #if IS_GRAY
  4.     float gray  = 0.2126 * o.r + 0.7152 * o.g + 0.0722 * o.b;
  5.     o.r = o.g = o.b = gray;
  6.     #endif
  8.     // 根据 UV 的变化来调整渐变色
  9.     o.rgb *= mix(startColor, endColor, vec4(uv0.x)).rgb;
  10. #endif

勾选原有材质上的 USE_TEXTURE 选项：

use-texture

此时通过调整材质上的 startColor 和 endColor 则可以观察到不同的渐变：

material-color

精灵着色的变化：

preview

使用预处理宏定义

在上述的片元着色器内，只考虑了纹理坐标轴 U 的渐变，为了灵活性和支持更多的功能，通过预处理宏定义来实现不同轴的渐变，因此删掉下列代码：

  1. o.rgb *= mix(startColor, endColor, vec4(uv0.x)).rgb;

添加下列代码：

  1. #if USE_HORIZONTAL
  2.     o.rgb *= mix(startColor, endColor, vec4(uv0.x)).rgb;
  3. #endif
  5. #if USE_VERTICAL 
  6.     o.rgb *= mix(startColor, endColor, vec4(uv0.y)).rgb;
  7. #endif

这里声明了 USE_HORIZONTAL 和 USE_VERTICAL 这两个预处理宏定义，分别代表了水平方向和垂直方向的渐变，可以方便地按需使用：

macro-preview

完整的着色器代码：

  1. // Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
  2. CCEffect %{
  3.   techniques:
  4.   - passes:
  5.     - vert: sprite-vs:vert
  6.       frag: sprite-fs:frag
  7.       depthStencilState:
  8.         depthTest: false
  9.         depthWrite: false
  10.       blendState:
  11.         targets:
  12.         - blend: true
  13.           blendSrc: src_alpha
  14.           blendDst: one_minus_src_alpha
  15.           blendDstAlpha: one_minus_src_alpha
  16.       rasterizerState:
  17.         cullMode: none
  18.       properties:
  19.         alphaThreshold: { value: 0.5 }
  20.         startColor: { value: [1.0, 1.0, 1.0, 1.0], editor: {type: color} }
  21.         endColor: { value: [1.0, 1.0, 1.0, 1.0], editor: {type: color} }
  22. }%
  24. CCProgram sprite-vs %{
  25.   precision highp float;
  26.   #include <cc-global>
  27.   #if USE_LOCAL
  28.     #include <cc-local>
  29.   #endif
  30.   #if SAMPLE_FROM_RT
  31.     #include <common>
  32.   #endif
  33.   in vec3 a_position;
  34.   in vec2 a_texCoord;
  35.   in vec4 a_color;
  37.   out vec4 color;
  38.   out vec2 uv0;
  40.   vec4 vert () {
  41.     vec4 pos = vec4(a_position, 1);
  43.     #if USE_LOCAL
  44.       pos = cc_matWorld * pos;
  45.     #endif
  47.     #if USE_PIXEL_ALIGNMENT
  48.       pos = cc_matView * pos;
  49.       pos.xyz = floor(pos.xyz);
  50.       pos = cc_matProj * pos;
  51.     #else
  52.       pos = cc_matViewProj * pos;
  53.     #endif
  55.     uv0 = a_texCoord;
  56.     #if SAMPLE_FROM_RT
  57.       CC_HANDLE_RT_SAMPLE_FLIP(uv0);
  58.     #endif
  59.     color = a_color;
  61.     return pos;
  62.   }
  63. }%
  65. CCProgram sprite-fs %{
  66.   precision highp float;
  67.   #include <embedded-alpha>
  68.   #include <alpha-test>
  70.   in vec4 color;
  72.   uniform Constant{
  73.     vec4 startColor;
  74.     vec4 endColor;
  75.   };   
  77.   #if USE_TEXTURE
  78.     in vec2 uv0;
  79.     #pragma builtin(local)
  80.     layout(set = 2, binding = 11) uniform sampler2D cc_spriteTexture;
  81.   #endif
  83.   vec4 frag () {
  84.     vec4 o = vec4(1, 1, 1, 1);
  86.     #if USE_TEXTURE            
  87.       o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0); 
  88.       #if IS_GRAY
  89.         float gray  = 0.2126 * o.r + 0.7152 * o.g + 0.0722 * o.b;
  90.         o.r = o.g = o.b = gray;
  91.       #endif
  93.       #if USE_HORIZONTAL
  94.          o.rgb *= mix(startColor, endColor, vec4(uv0.x)).rgb;
  95.       #endif
  97.       #if USE_VERTICAL 
  98.          o.rgb *= mix(startColor, endColor, vec4(uv0.y)).rgb;
  99.       #endif      
  101.     #endif
  103.     o *= color;
  105.     ALPHA_TEST(o);
  106.     return o;
  107.   }
  108. }%