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);
}