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

由于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

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

其代码如下：

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

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文件，用于编写片段着色器代码：