3步打造Cocos 2D相机滤镜：零基础Shader特效教程
项目地址: https://gitcode.com/GitHub_Trending/co/cocos-engine 你还在为游戏画面单调发愁？3行代码+5分钟，用Cocos引擎实现专业级2D滤镜效果。读完你将获得：自定义灰度/模糊滤镜、相机渲染层级控制、跨平台着色器兼容方案。
一、准备工作
环境要求
支持Cocos Creator 3.0+，通过package.json确认引擎版本。
文件基础
- 着色器模板：builtin-unlit.effect（无光照着色器基础模板，包含CCEffect声明和CCProgram片段）
- 官方文档：docs/TS_CODING_STYLE.md（着色器编写规范）
二、步骤一：创建基础滤镜着色器
模板复制
复制builtin-unlit.effect为filter-effect.effect，保留CCEffect的techniques结构，修改frag函数实现滤镜算法。
核心代码示例
vec4 frag () {
vec4 o = mainColor;
o.rgb *= colorScaleAndCutoff.xyz;
#if USE_TEXTURE
vec4 texColor = texture(mainTexture, v_uv);
// 灰度滤镜算法
float gray = dot(texColor.rgb, vec3(0.299, 0.587, 0.114));
o.rgb = vec3(gray); // 替换为灰度值
o.a *= texColor.a;
#endif
return CCFragOutput(o);
}
关键代码来自builtin-unlit.effect#L184-L205
参数说明
mainColor: 基础颜色叠加colorScaleAndCutoff: 颜色缩放与透明度阈值- 建议新增
filterStrength参数控制效果强度
三、步骤二：配置2D相机渲染
组件设置
在层级管理器添加Camera组件，设置targetTexture为RenderTexture资源。操作界面参考：
渲染层级
通过cullingMask分离UI与游戏场景，示例代码结构：
// 伪代码示意
camera.cullingMask = 1 << LayerMask.NameToLayer('Game');
camera.uiCamera.cullingMask = 1 << LayerMask.NameToLayer('UI');
性能优化
设置clearFlags为DEPTH_BUFFER，减少每帧绘制开销。
四、步骤三：应用与扩展特效
实时预览
在编辑器中启用“预览渲染结果”，配合
实时调整参数。
常见效果扩展
高斯模糊
// 在frag函数中添加
vec4 texColor = texture(mainTexture, v_uv);
vec2 offset = vec2(0.002, 0.002);
texColor += texture(mainTexture, v_uv + offset);
texColor += texture(mainTexture, v_uv - offset);
o.rgb = texColor.rgb / 3.0;
反色效果
o.rgb = vec3(1.0) - o.rgb; // 颜色反转
跨平台兼容
WebGL 1.0需替换texture2D为cc_texture2D，参考webGL.extras.d.ts的兼容性声明。
五、常见问题解决
滤镜不生效
- 检查RenderTexture尺寸是否为2的幂次
- 确认相机
priority高于默认相机 - 通过EngineErrorMap.md查询着色器编译错误
性能卡顿
移动平台建议使用webGL2.extras.d.ts的纹理压缩功能，降低采样开销。
总结与进阶
核心要点
- 自定义着色器 = CCEffect声明 + GLSL片段函数
- 相机渲染路径 = 源纹理→滤镜→屏幕
- 性能优化关键 = 减少采样次数 + 控制渲染分辨率
进阶资源
- 粒子特效结合：particle-2d.ts
- 后期渲染管线：cocos/core/pipeline/
- 官方示例：tests/particle/
点赞收藏关注三连，下期讲解"3D场景的2DUI混合渲染技术"。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
