教程｜手把手教你在Cocos Creator中使用Shader

感谢『简书 ID： 曾彬思』友情提供

http://www.jianshu.com/p/d2475a837fc6

由于Cocos Creator从v1.5版本就开始支持ES2015和TypeScript语法，所以我们的组件以ES2015的语法编写。

（目前Creator还没有为Shader提供内置的特效组件，或者针对Creator Shader专门提供一些API，所以首先应该想到的是通过Cocos2d-JS来实现。理论上，Creator现阶段没有提供实现，我们都可以通过ccjs来曲线实现）

Cocos2d-JS中的节点都对应在ccsg命名空间下，所以我们可以从渲染组件上获取ccsg节点对象，然后对其设置GL程序。

Cocos论坛曾有篇帖子分享，前几天为了做一个高斯模糊，特地去看了下，它使用的也是这种方式，链接：http://forum.cocos.com/t/creator-shader/36388

创建shader组件

在项目的资源目录（Assets）下创建一个WShaderUtil.js文件，文件名随意。为了编码规范，这个文件内的组件类的类名也跟文件名一样。

其代码如下：

了解Cocos2d-JS的开发者不难发现，其用法和ccjs原生几乎一致，只是稍微包装了一层，使其作用在_sgNode对象上。

编写shader代码

shader代码使用GLSL进行编写，详细的这里就不说了，很多shader效果网上都有代码，我们随便找两个。

vsh顶点着色器

顶点着色器程序文件的后缀一般是“.vsh”的，但是为了方便使用，我们可以将GLSL代码以字符串的形式写在js文件中，然后GLProgram通过字符串进行初始化。

在资源目录下新建一个Shader文件夹用于存放GLSL代码，在该目录下创建一个名为“gray_vsh.js”的js文件，代码如下：

注意这里的字符串外层不是用单引号或者双引号，而是使用键盘“tab”键上方的那个按键的小点（和波浪号同一个按键），js在这种引号中可以定义一个多行字符串。

fsh片元着色器

片元着色器程序文件的格式一般是“.fsh”，我们在gray_vsh.js同目录下创建一个名为“gray_fsh.js”的js文件，用于编写片段着色器代码：

使用组件

由于我给组件的几个属性设置类型是字符串类型，而且Creator无法将除组件以外的js文件拖拽到属性检查器面板上进行绑定，所以这几个属性的值我都是手动输入的。

另外，Vert属性有两个，一个是web一个是native，一般情况下两个设置成一样的即可，这是为了解决web和native上GL代码出现不一样的解决方式。如果程序只运行在H5上，那么native的顶点着色器可以不进行设置。

可以看到，这里设置组件属性的时候，填写的直接就是文件名（模块名称），连路径和文件格式都不需要，所以使用起来还是蛮方便的。

效果预览

关于Creator

刚用Creator不久，这个工具确实很方便，希望官方能够将滤镜等常用的特效封装成特效组件，方便更多的人。Cocos Creator v1.5.2刚于上周五发布，这个版本十分稳定可靠，小伙伴们不妨戳「阅读原文」进来下载升级使用吧！