# CocosCreatorShader

**Repository Path**: zkylh/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**: 341
- **Created**: 2022-05-24
- **Last Updated**: 2022-05-24

## 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
| 编号 | 类目 | 项目 | 备注 | 编号 | 类目 | 项目 | 备注 |
| :---: | :---: |:---: |:---: | :---: |:---: |:---: |:---: |
| 1  | 2D | [图片闪光](#spriteflashlight)  |  | 2  | 2D | [受击闪白](#hitwhite)  | 支持Spine/龙骨 |
| 3  | 2D | [UI内发光](#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 | [模型遮挡透视](#occlusionperspective) |  | 
| 29 | 2D | [UI内发光2](#glowinnerv2) |  | 30 | 2D | [加载-增强](#spriteloadingv2) |  |
| 31 | 2D | [UI外发光](#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="./gif/202202/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="./gif/202202/2022022404.gif" width="400" height="300" /></div>

### GlowInner
| 编号 | 类目 | 项目 | 备注 |
| :---: | :---: |:---: |:---: |
| 3 | 2D | [UI内发光](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="./gif/202202/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="./gif/202202/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="./image/202202/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="./gif/202202/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="./image/202202/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="./gif/202202/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="./gif/202202/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="./gif/202202/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="./gif/202202/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="./gif/202202/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="./gif/202202/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="./gif/202202/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="./gif/202202/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="./gif/202202/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="./gif/202202/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="./gif/202202/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="./image/202202/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="./gif/202202/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="./gif/202202/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="./gif/202202/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="./gif/202202/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="./image/202202/2022022501.jpg" width="400" height="300" /></div>

### SpriteLoading
| 编号 | 类目 | 项目 | 备注 |
| :---: | :---: |:---: |:---: |
| 25 | 2D | [加载](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Sprite/Creator3.5.0_2D_Sprite_Loading)  | [返回顶部](#QuickLinks) |
<div align=center><img src="./gif/202202/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="./gif/202202/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="./gif/202202/2022022505.gif" width="400" height="300" /></div>

### OcclusionPerspective
| 编号 | 类目 | 项目 | 备注 |
| :---: | :---: |:---: |:---: |
| 28 | 3D | [模型遮挡透视](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.5.x/demo/Model/Creator3.5.0_3D_ModelOcclusionPerspective)  | [返回顶部](#QuickLinks) |
<div align=center><img src="./gif/202203/2022030301.gif" width="400" height="300" /></div>

### GlowInnerV2
| 编号 | 类目 | 项目 | 备注 |
| :---: | :---: |:---: |:---: |
| 29 | 2D | [UI内发光2](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="./gif/202204/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="./gif/202204/2022043002.gif" width="400" height="300" /></div>

### GlowOutter
| 编号 | 类目 | 项目 | 备注 |
| :---: | :---: |:---: |:---: |
| 31 | 2D | [UI外发光](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="./gif/202205/2022050101.gif" width="400" height="300" /></div>