# CocosCreatorShader

**Repository Path**: holyhoohoo/cocos-creator-shader

## Basic Information

- **Project Name**: CocosCreatorShader
- **Description**: 大道至简，殊途同归。
CocosCreatorShader意图在于帮助不会Shader的用户能够快速了解如何使用Cocos Effect。
CocosCreatorShader intends to help users who do not know Shader quickly understand how to use Cocos Effect.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: v3.5.x
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 373
- **Created**: 2022-05-16
- **Last Updated**: 2022-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## CocosCreatorShader
### Write by yeshao2069.
### CocosCreatorShader intends to help users who do not know Shader quickly understand how to use Cocos Effect.
### Cocos Creator V3.5.x
 

## QuickLinks
| 编号A | 类目A | 项目A | 备注A | 编号B | 类目B | 项目B | 备注B | 编号C | 类目C | 项目C | 备注C |
| :----------------------- | :--------------------: |:--------------------: |:--------------------: | :--------------------: |:--------------------: |:--------------------: |:--------------------: |:--------------------: |:--------------------: |:--------------------: |:--------------------: |
| 1  | 2D | [图片闪光](#spriteflashlight)  | / | 2  | 2D | [受击闪白](#hitwhite)  | 支持Spine/龙骨 | 3  | 2D | [2D内发光](#glowinner)  | / |
| 4  | 2D | [高斯模糊](#gaussianblur)  | / | 5  | 2D | [圆形头像](#circleavatar)  | / | 6  | 2D | [图片溶解](#spritedissolve)  | / |
| 7  | 2D | [老照片/置灰/冰冻/反相/动画](#spritefilter)  | / | 8  | 2D | [渐变过渡的相册](#gradualtransitionalalbum)  | / | 9  | 2D | [马赛克](#spritemosaic)  | / |   
| 10  | 2D | [镜面光泽](#spritestreamer)  | / | 11  | 2D | [水面波纹](#waterspread)  | / | 12  | 2D | [灯光跟随](#followspot)  | / |
| 13  | 2D | [融球](#metaball)  | / | 14  | 2D | [图片消融](#spriteablation)  | / | 15  | 2D | [2D 灯光](#sprite2dlight)  | / |
| 16  | 3D | [人物护盾](#roleshield)  | / | 17  | 2D | [咪牌](#drawcard)  | / | 18  | 2D | [按钮流光](#buttonambilight)  | / |
| 19  | 2D | [彩虹](#spritedrawrainbow)  | / | 20  | 2D | [动态光影](#spritedynamiclightandshadow)  | / | 21  | 2D | [图片高亮](#spritehighlight)  | 支持Spine |
| 22 | 3D | [模型高亮](#rolehighlight) | /  | 23  | 2D | [大风吹](#windblowingthrough2d)  | / | 24 | 2D | [自定义头像](#spriteradiusshader) | / |
| 25  | 2D | [加载](#spriteloading)  | / | 26 | 2D | [波浪](#spritewave) | / | 27 | 2D | [曲线波浪](#spritesinewave)  | / |
| 28 | 3D | [基于XRay模型遮挡透视](#occlusionperspective) | / | 29 | 2D | [2D内发光-增强](#glowinnerv2) | / | 30 | 2D | [加载-增强](#spriteloadingv2) | / |
| 31 | 2D | [2D外发光](#glowoutter) | / |


## Examples
### SpriteFlashLight
| 1 | 2D | [图片流光](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_FlashLight)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022402.gif" width="400" height="300" /></div>

### HitWhite
| 2 | 2D | [受击闪白](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Creator3.5.0_2D_HitWhite)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022404.gif" width="400" height="300" /></div>

### GlowInner
| 编号 | 类目 | 项目 | 备注 |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |
| 3 | 2D | [2D内发光](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_GlowInner) | [返回顶部](#QuickLinks) |
<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022405.gif" width="400" height="300" /></div>

### GaussianBlur
| 4 | 2D | [高斯模糊](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_GaussianBlur)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022406.gif" width="400" height="300" /></div>

### CircleAvatar
| 5 | 2D | [圆形头像](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_CircleAvatar)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/20220224/2022022401.png" width="400" height="300" /></div>

### SpriteDissolve
| 6 | 2D | [图片溶解](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_Dissolve)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022407.gif" width="400" height="300" /></div>

### SpriteFilter
| 7 | 2D | [老照片/置灰/冰冻/反相/动画](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_Filter)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/20220224/2022022402.png" width="400" height="300" /></div>

### GradualTransitionalAlbum
| 8 | 2D | [渐变过渡的相册](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_GradualTransitionalAlbum)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022408.gif" width="400" height="300" /></div>

### SpriteMosaic
| 9 | 2D | [马赛克](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_Mosaic)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022409.gif" width="400" height="300" /></div>

### SpriteStreamer
| 10 | 2D | [镜面光泽](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_Streamer)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022410.gif" width="400" height="300" /></div>

### WaterSpread
| 11 | 2D | [水面波纹](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_WaterSpread)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022411.gif" width="400" height="300" /></div>

### FollowSpot
| 12 | 2D | [灯光跟随](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_FollowSpot)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022412.gif" width="400" height="300" /></div>

### Metaball
| 13 | 2D | [融球](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_Metaball)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022413.gif" width="400" height="300" /></div>

### SpriteAblation
| 14 | 2D | [图片消融](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_Ablation)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022414.gif" width="400" height="300" /></div>

### Sprite2DLight
| 15 | 2D | [2D灯光](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_Light)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022415.gif" width="400" height="300" /></div>

### RoleShield
| 16 | 3D | [人物护盾](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Model/Creator3.5.0_3D_RoleShield)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022403.gif" width="400" height="300" /></div>

### DrawCard
| 17 | 2D | [咪牌](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_DrawCard)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022422.gif" width="400" height="300" /></div>

### ButtonAmbilight
| 18 | 2D | [按钮流光](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_ButtonAmbilight)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022431.gif" width="400" height="300" /></div>

### SpriteDrawRainbow
| 19 | 2D | [彩虹](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_DrawRainbow)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/20220224/2022022411.png" width="400" height="300" /></div>

### SpriteDynamicLightAndShadow
| 20 | 2D | [动态光影](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_DynamicLightAndShadow)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022432.gif" width="400" height="300" /></div>

### SpriteHighLight
| 21 | 2D | [图片高亮](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_HighLight)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220225/2022022501.gif" width="400" height="300" /></div>

### RoleHighLight
| 22 | 3D | [模型高亮](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Model/Creator3.5.0_3D_ModelHighLight)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220225/2022022502.gif" width="400" height="300" /></div>

### WindBlowingThrough2D
| 23 | 2D | [植物受风摆动](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_WindBlowing)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220225/2022022503.gif" width="400" height="300" /></div>

### SpriteRadiusShader
| 24 | 2D | [自定义头像](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_CustomizedAvatar)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/20220225/2022022501.jpg" width="400" height="300" /></div>

### SpriteLoading
| 25 | 2D | [加载](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Creator3.4.1_2D_Sprite_Loading)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220224/2022022401.gif" width="400" height="300" /></div>

### SpriteWave
| 26 | 2D | [波浪](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_Wave)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220225/2022022504.gif" width="400" height="300" /></div>

### SpriteSineWave
| 27 | 2D | [曲线波浪](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_SineWave)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220225/2022022505.gif" width="400" height="300" /></div>

### OcclusionPerspective
| 28 | 3D | [基于XRay模型遮挡透视](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Model/Creator3.5.0_3D_XRay-basedModelOcclusionPerspective)  | [返回顶部](#QuickLinks) |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |

<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220303/2022030301.gif" width="400" height="300" /></div>

### GlowInnerV2
| 编号 | 类目 | 项目 | 备注 |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |
| 29 | 2D | [2D内发光-增强](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_GlowInnerv2) | [返回顶部](#QuickLinks) |
<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220430/2022043001.gif" width="400" height="300" /></div>

### SpriteLoadingV2
| 编号 | 类目 | 项目 | 备注 |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |
| 30 | 2D | [加载-增强](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_LoadingStyle) | [返回顶部](#QuickLinks) |
<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220430/2022043002.gif" width="400" height="300" /></div>

### GlowOutter
| 编号 | 类目 | 项目 | 备注 |
| :----------------------- | :----------------------: |:----------------------: |:----------------------: |
| 31 | 2D | [2D外发光](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_GlowOutter) | [返回顶部](#QuickLinks) |
<div align=center><img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/gif/20220501/2022050101.gif" width="400" height="300" /></div>