# CocosCreatorShader

**Repository Path**: linxi1990/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.4.x
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 347
- **Created**: 2022-03-19
- **Last Updated**: 2022-03-19

## 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.4.x
 

## QuickLinks
| 编号A | 类目A | 项目A | 备注A | 编号B | 类目B | 项目B | 备注B |
| :----------------------- | :--------------------: |:--------------------: |:--------------------: | :--------------------: |:--------------------: |:--------------------: |:--------------------: |
| 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) |  |

## Examples
#### SpriteFlashLight
| 1 | 2D | [图片流光](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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.4.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.4.x/demo/Creator3.4.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.4.x/demo/Creator3.4.1_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.4.x/demo/Creator3.4.1_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>