Cocos Creator Shader入门实战(八)：Shader实现圆形、椭圆、菱形等头像

news2025/4/15 0:58:59

引擎：3.8.5

您好，我是鹤九日！

回顾

Shader的学习是一条漫长的道路。

理论知识的枯燥无味，让很多人选择了放弃。然而不得不说：任何新知识、新领域的学习，本身面临的都是问题！

互联网和AI给了我们很多的便利性，这里罗列些个人学习使用到资料，希望对您有用。

The Book of shaders 片段着色器的入门指南

Learn OpenGL 中文版讲解Open GL的学习使用

CocosCreatorShader 木限东的Shader效果实现实例，这里感谢作者的公开分享。

慎入！史上最强 Cocos Shader 学习资源推荐（建议收藏） Cocos官方推荐的学习资源。

注：感谢Cocos官方、感谢热心的大佬的内容整理和分享！

前言

后续的文章将逐步开始汇总一些，自己在学习Shader中编写的一些效果。

当然，这些效果的实现，并非个人创造，可能是一些模仿，然后是模仿中的延伸。

正式开始文章之前，想告诉您两件事：

一、因Shader效果的实现，需要CCEffect属性配置和 CCProgram着色器代码，它们存在相通部分；后续的文章仅会粘贴关键部分，避免篇幅过长。

二、个人编写的Shader效果Demo示例，使用的是Gitee仓库，名为：CocosShaderDemo

内容的主要结构是：

请添加图片描述

res/common 放置通用的chunk或者其他相关，顶点着色器部分的chunk，就在此处。
res/effect 放置一些.effect/.material的shader文件，除后缀不同外，名字相同。
resources/prefab 放置效果实现的预制体页面
script/effect 一些effect效果的实现脚本

注：我曾考虑过像**木限东**大佬一样，每个效果对应一个项目工程，这样版本管理控制灵活。

但又考虑到可能查看不便，便采用了此中方式。

页面的配置使用的是LayerConfig.ts，主要配置结构：

请添加图片描述

实现效果页面如下：
请添加图片描述

注：代码仓库CocosShaderDemo，因时间限制，文档的补充并不完善，希望您能谅解！

开始

今天的内容，讲解的主要是： Shader自定义不同形状的头像。

如果不考虑Shader的话，使用Mask遮罩也是可以实现不同形状头像的，只是Mask的使用会影响渲染合批，导致性能不高。

既然学习到Shader，我们便用Shader来实现吧。先看示意图：

请添加图片描述

注：圆形头像的实现，参考的是: 木限东，其他是延伸，对应的个人仓库：地址

圆形头像

Shader实现的圆形头像，同Mask实现，其实有相似之处。

Mask的实现是构建一个不同形状的约束框遮罩层，在遮罩层内显示图像，遮罩范围外则裁切，不会进行渲染。

放到Shader当中，Shader处理的是像素，则指定形状内进行绘制，形状以外的裁切，不进行绘制而已。

只是Shader比Mask相比，有着更高的灵活度，比如边缘的模糊度处理、抗锯齿等。

属性配置

实现圆形头像，properties的属性配置如下：

properties:
    alphaThreshold: { value: 0.5 }
    wh_ratio: { value: 1, editor: { tooltip: "宽高比"}}
    blur: { value: 0.01, editor: { tooltip: "光圈模糊程度"}}
    radius: { value: 0.5, editor: { tooltip: "光圈半径"}}
    center: { value: [0.5, 0.5], editor: { tooltip: "光圈中心"}}

片段着色器部分的主要逻辑如下：

CCProgram sprite-fs %{
    // 自定义参数的说明，注意UBO内存对齐规则
    uniform ARGS{
        float radius;       // 光圈半径
        float blur;         // 光圈模糊程度
        vec2 center;        // 光圈中心点
        float wh_ratio;     // 宽高比
   };
   vec4 frag () {
    // 初始化颜色值为白色且不透明
    vec4 o = vec4(1, 1, 1, 1);
    // 通过CCSampleWithAlphaSeparated函数从纹理中采样颜色，并将其与初始颜色o相乘。
    o *= CCSampleWithAlphaSeparated(cc_spriteTexture, v_uv0);
    // 将采样得到的颜色与顶点颜色v_color相乘，得到最终的颜色值
    o *= v_color;
    // 执行透明度测试，根据o的透明度值决定是否丢弃当前片段
    ALPHA_TEST(o);

    // 计算圆形的半径平方，用于后续的圆形边界判断
    float circle = radius * radius;
    // 计算当前片段的纹理坐标与圆形中心点的偏移量，并考虑宽高比wh_ratio对x方向的调整
    float rx = (v_uv0.x - center.x) * wh_ratio;
    float ry = v_uv0.y - center.y;
    // 计算当前片段到圆形中心点的距离平方
    float dis = rx * rx + ry * ry;

    // smoothstep函数的作用是在两个边缘值之间平滑过渡，降低锯齿
    // circle是圆形的边界，circle - blur是模糊的起始边界，dis是当前片段到中心的距离平方
    o.a = smoothstep(circle, circle - blur, dis) * o.a;

    return o;
  }
}

最后添加下Material材质，并设定Effect；然后将材质资源放到对应精灵的customMaterial属性中，即可。

注：代码中的注释很详细了，我就不再一一赘述了，后面的实现，与之类似。

椭圆头像

椭圆头像同圆形头像类似，只不过使用shader要生成椭圆而已。

属性配置：

radiusX: { value: 0.5, editor: { tooltip: "椭圆的X轴半径"}}
radiusY: { value: 0.3, editor: { tooltip: "椭圆的Y轴半径"}}
blur: { value: 0.1, editor: { tooltip: "椭圆边缘的模糊程度"}}
center: { value: [0.5, 0.5], editor: { tooltip: "光圈中心"}}

关键性片段代码：

uniform ARGS {
    vec2 center;       // 椭圆中心点
    float radiusX;     // 椭圆的X轴半径
    float radiusY;     // 椭圆的Y轴半径
    float blur;        // 椭圆边缘的模糊程度
};
  
vec4 frag () {
    // ...
    // 计算椭圆的边界条件
    float rx = (v_uv0.x - center.x) / radiusX;
    float ry = (v_uv0.y - center.y) / radiusY;
    float dis = rx * rx + ry * ry;

    // smoothstep函数的作用是在两个边缘值之间平滑过渡,降低锯齿
    o.a = smoothstep(1.0, 1.0 - blur, dis) * o.a;

    return o;
}

注： ARGS参数的设定，注意UBO内存规则，否则容易报错。详情：ERROR_EFX2205

四边形头像

属性配置：

size: { value: 0.5, editor: { tooltip: "四边形的大小"}}
angle: { value: 0.26, editor: { tooltip: "倾斜角度"}}
blur: { value: 0.05, editor: { tooltip: "边缘的模糊程度"}}
center: { value: [0.5, 0.5], editor: { tooltip: "中心点"}}

关键代码：

// 计算当前像素相对于中心点的偏移
vec2 offset = v_uv0 - center;

// 应用旋转矩阵，将坐标旋转回未倾斜的状态
float cosA = cos(-angle);
float sinA = sin(-angle);
vec2 rotatedOffset = vec2(
  offset.x * cosA - offset.y * sinA,
  offset.x * sinA + offset.y * cosA
);

// 判断是否在菱形区域内
float diamond = abs(rotatedOffset.x) + abs(rotatedOffset.y);

// 使用smoothstep将菱形的边缘虚化，降低锯齿
o.a = smoothstep(size, size - blur, diamond) * o.a;

总结

如上效果，关于属性参数的配置，均可通过材质的属性检查器进行设置。

请添加图片描述

当然，也可以通过代码脚本的setProperty属性进行动态设置，以圆形头像的宽高比为例：

@property(Sprite)
circleSprite!: Sprite;                  // 圆形头像

protected start(): void {
    // 圆形头像设置宽高比
    let avatarSize = this.circleSprite.getComponent(UITransform).contentSize;
    let ratio = avatarSize.width / avatarSize.height;
    const circleMaterial = this.circleSprite.getSharedMaterial(0);
    circleMaterial.setProperty("wh_ratio", ratio);
}