系列对应演示 Demo 仓库地址：
https://github.com/zhitaocai/CocosCreatorShaderEffectDemo
https://gitee.com/zhitaocai/CocosCreatorShaderEffectDemo
一、题外话
站在巨人的肩膀上，你一开始就能看很远。
实际上，已经有很多大佬在博客，公众号，论坛等等的地方分享过很多各种特效的实现代码了。
但是，目前好像缺少一些基础一点说明，Cocos 的官方文档可能有些隐晦。
因此，我会尽量在补全一下这块的，当然，我也是在学习过程中，可能有些地方不一定正确，这些地方，我会尽可能标注。
Ok，Let's go.
二、渲染组件和材质的关系
材质，Effect，Inspector，纹理之间是什么关系呢？能不能用 Cocos Creator 举个例子？我觉得以下的图片应该就能说明这之间的关系了：
事实上，从 2.0 版本升级到 2.[1+] 版本的 Cocos Creator 的时候，大家就会发现，大部分（因为我没仔细看完所有渲染组件，只看了大部分，所以只能说大部分这个词语，而不是全部）的渲染组件都新增了 Materials 材质数组，比如我们经常用的Sprite，Label等都多出了图中箭头3所指向的材质数组。这些渲染组件都是继承了 RenderComponent 组件
而在 Cocos Creator 2.[1.+] 版本中，RenderComponent 都加了材质的数组
而这就是我们的「属性管理器/Inspector」面板中多了材质 Materials 数组的结果。
有点小偏题了，不过这里我们算是初步说明了，渲染组件和纹理之间的关系。
三、材质和Effect的关系
在上面的第一个图的第4点中，我们说到 材质指导如何渲染图像到屏幕上 ，其实这个说法并不严谨，只是想表达这个意思，大家意思get到就可以，大家不要较真。
那么在这个意思上，材质又是怎么指导渲染图像到屏幕上呢？
接着顺序
- 当我们选中材质后，「属性管理器/Inspector」面板就会切换为材质的面板
- 此时我们可以通过
Effect属性的下拉列表，选中我们需要绑定Effect - 当绑定成功之后，Cocos Creator 的编辑器就会帮我们预编译并解析我们的绑定的 Effect 文件中的 可改变属性（这是我自己的称呼，不严谨，Get到意思就可以），然后显示在属性编辑器上，对应我们图中绿色部分
至此，相信大家已经有一个比较直观的，关于渲染组件，材质，Effect，属性编辑器/Inspector在Cocos Creator 编辑器上的关系。
但是我相信你可能还是会有一些疑问，比如：
Q1：比如本章标题中的说到的纹理关系呢？怎么突然没有了说明？
A1：Effect 代码中会说明纹理如何渲染，但也不太准确，暂时可以这么理解着先
Q2：是不是我随便在任意一个地方创建的Effect，都会出现在第5步的Effect下拉列表呢？
A2：在官方的 Effect Syntax 文档 中有描述到
好了，就这么多先。我们下篇文章见~
下一篇：
上一篇：
