【CocosCreator 3.x 自定义渲染材质方案分享】第一期

[muxiandong]

前言

---

由于目前的自定义渲染材质的文档和教程还是相对比较欠缺的，故技术支持团队会优先整理论坛、Github、Gitee上一些常用的 Shader 效果，希望对大家有所帮助。
分享来源自论坛、github 开源仓库、热心开发者、Cocos 引擎开发团队、cocos 技术支持团队。

本期方案列表

---

• 圆形头像 ( )
• 人物护盾 ( )
• 水面波纹 ()
• 植物受风摆动（）
• 3D 噪声消融（）
• 镜面光泽（）
• 顶点偏移（）

方案将会随着 CocosCreator 更新迭代，保证在最新版本的 CocosCreator 中可运行。

---

• (v3.4.1) 圆形头像

  ---

  工程 git 仓库地址: https://github.com/cocos-creator/CococsCreator-public-technology-solutions/tree/3.4.0-release/shader/Creator3.4.1_2D_Sprite_CircularAvatar

  素材来自: cocos-awesome/assets/Scene/Circle_avatar at master · ifengzp/cocos-awesome · GitHub

  备注: 本方案来源于 Github 用户(ifengzp)，由技术支持团队升级至 3.4.1 版本

  

• (v3.4.1) 人物护盾

  ---

  工程 git 仓库地址: https://github.com/cocos-creator/CococsCreator-public-technology-solutions/tree/3.4.0-release/shader/Creator3.4.1_3D_CharacterShield

  素材来自: Creator3D: shader实现的“地表最强护盾”，没有之一

  备注: 本方案来源于 Gitee 用户(carlosyzy)，由技术支持团队升级至 3.4.1 版本

  

• (v3.4.1) 水面波纹

  ---

  工程 git 仓库地址: https://github.com/cocos-creator/CococsCreator-public-technology-solutions/tree/3.4.0-release/shader/Creator3.4.1_2D_Sprite_WaterRipple

  素材来自: https://github.com/ifengzp/cocos-awesome/tree/master/assets/Scene/Water_spread

  备注: 本方案来源于 Github 用户(ifengzp)，由技术支持团队升级至 3.4.1 版本

  

• (v3.4.1) 植物受风摆动

  ---

  工程 git 仓库地址: https://github.com/cocos-creator/CococsCreator-public-technology-solutions/tree/3.4.0-release/shader/Creator3.4.1_2D_Sprite_PlantsBlownByTheWind

  素材来自: 2D风吹草吹树shader效果 分享

  备注：本方案来源于 CocosCreator 中文论坛用户 @468179984 由技术支持团队升级至 3.4.1 版本

  

• (v3.4.1) 3D 噪声消融

  ---

  工程 git 仓库地址: https://github.com/cocos-creator/CococsCreator-public-technology-solutions/tree/3.4.0-release/shader/Creator3.4.1_3D_NoiseAbatement

  素材来自: https://gitee.com/carlosyzy/Creator3D_Shader_Noise_Dissolve

  备注：本方案来源于 Gitee 用户(carlosyzy)，由技术支持团队升级至 3.4.1 版本

  

• (v3.4.1) 镜面光泽

  ---

  工程 git 仓库地址: https://github.com/cocos-creator/CococsCreator-public-technology-solutions/tree/3.4.0-release/shader/Creator3.4.1_2D_Sprite_MirrorShine

  素材来自: https://github.com/ifengzp/cocos-awesome/tree/master/assets/Scene/Specular_gloss

  备注：本方案来源于 Github 用户(ifengzp)，由技术支持团队升级至 3.4.1 版本

  

• (v3.4.2) 顶点偏移

  ---

  工程 git 仓库地址: https://github.com/cocos-creator/CococsCreator-public-technology-solutions/tree/3.4.0-release/shader/Creator3.4.2_3D_MotionVertex

  备注：本方案来源于论坛用户 @229508950 ，由技术支持团队升级至 3.4.2 版本

  

往期回顾

---

【CocosCreator 3.x 技术方案分享】第一期
【CocosCreator 3.x 技术方案分享】第二期
【CocosCreator 3.x 性能优化方案分享】

[muxiandong]

更新 2022-02-22 11:28

• 圆形头像
• 人物护盾
• 水面波纹

[395602500 (laughingzz)]

mark~

[443859613 (ccc丶d)]

mark， CocosCreator 3.x 自定义渲染材质

[muxiandong]

更新 2022-02-22 16:03

• 植物受风摆动
• 3D 噪声消融

[wells974]

大佬 能出一个 loading球面波浪 的那种吗 陈皮皮的正弦波浪效果是2.x的 3.x不兼容

[muxiandong]

需要哪个，给个链接？

[muxiandong]

这个吗？

https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.4.x/demo/Creator3.4.1_2D_Sprite_Loading

[wells974]

感谢大佬的回复

https://gitee.com/ifaswind/eazax-ccc
这里面的正弦波浪

[1782989602 (天陪我下雨)]

m ark

[muxiandong]

https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.4.x/demo/Creator3.4.1_2D_Sprite_SineWave

[wells974]

牛哇牛哇 感谢大佬

[addstone (贤者时间)]

可以维护一个master分支吗，不然新分支同步麻烦

[hanzongyuan (magicx40)]

@wells974

需要哪个，给个链接？

可以分享一下CocosCreator3.x 的扫光shader效果嘛，谢谢

[muxiandong]

这种?
https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.4.x/demo/Creator3.4.1_2D_Sprite_Streamer

[hanzongyuan (magicx40)]

嗯，是这个，真的非常感谢

[muxiandong]

更新 2022-03-02 18:00

• 镜面光泽

[1055426827 (lh_next1995)]

大佬大佬，我来啦，皮神做的kawase模糊2.x的，3.4.x不能include texture了，导致不知道咋写。
基于 RenderTexture 实现多 Pass 的 Kawase Blur - Creator 2.x - Cocos中文社区

[JakerCao]

thank you big old！！！