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

引擎：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);
}

数学公式在这里暂且就不说明了，有两点考虑：

一、数学公式的繁杂性，如果不懂，会让人产生更多的畏难。

二、学习的兴趣在于好奇，好奇+想象力，会让人发现更多有意思的地方。

综上，内容有些浅显，只是我更希望：作为新人，降低畏难度，增加好奇和兴趣，也很有用。

今天的文章，到这里就结束了；可能理解有误，欢迎您的指出！

如果觉得文章不错，期待您的点赞和留言，感谢！

我是鹤九日，祝您生活愉快！