CreatorPrimer| 2.x ShaderHelper组件速递

今天把ShaderHelper组件重新整理，代码已经上传到github，地址：https://github.com/ShawnZhang2015/ShaderHelper

说实话Shawn对Shader也是刚刚起步，目前只会依葫芦画瓢，根据论坛中panda、Colin、小叔叔等大佬们的教程和源码结合自己的使用体验，编写了ShaderHelper组件，请先看使用方法： 

1. ShaderHelper使用

---

通过上面视频，你会发现使用ShaderHelper组件基本上没有任何负担，通过ShaderHelper的属性Program下拉菜单选择需要的Shader效果即可，看下图：

同时注意，ShaderHelper组件目前必须配合cc.Sprite组件一起使用，就是说节点上必须有一个Sprite组件。

2. Shader模板对象

---

有人可能会问，Program下拉菜单中Shader效果都不是我想要的，要自己添加Shader怎么做呢？ 我这里设计了一个Shader程序的模板结构，下面以Wave动态效果的Shader为例说明一下Shader程序的使用规则：

1. /**

2. * 波浪流动效果

3. * */

4. const renderEngine = cc.renderer.renderEngine;

5. const renderer = renderEngine.renderer;

6. //定义一个shader对象

7. const shader = {

8.    //名字必须字段

9.    name: "xxx",

10.    //定义着色器代码中需要与js交互的参数

11.    params: [

12.        {name: 'yyy', type: renderer.PARAM_FLOAT},

13.        {name: 'zzz', type: renderer.PARAM_FLOAT2}

14.    ],

15.    //着色器中使用到的define定义，非必要字段

16.    defines: [],

17.    //start回调，此可以初始化着色器中的参数

18.    start(sprite, material) { ... },

19.    //update每帧回调，如果是动态效果，可以在此设置Shader参数

20.    update(sprite, material) { ... },

21.    //vert顶点着色器代码，它是一个字符串

22.    vert: '',

23.    //frag片元着色器

24.    frag: ``

25. };

26. //注意这里，通过CustomMaterial.addShader添加shader对象，

27. //这样就可以被ShaderHelper组件所显示

28. let CustomMaterial = require('CustomMaterial');

29. CustomMaterial.addShader(shader);

如果要自定义Shader并能被ShaderHelper所显示且正常加载运行，需要实现上面的一些字段和方法。其中比较重要的几点说明一下：

1. 定义一个最简单的shader对像只要需要有name、vert、frag三个属性。

2. 如果着色器代码中有需要初始化的变量，需要定义params字段，描述参数的名字和数据类型，如下所示：

1. params: [

2.     {
   name: 'iCenter', type: renderer.PARAM_FLOAT2},

3.     {
   name: 'iResolution', type: renderer.PARAM_FLOAT3}

4. ]

3. 如果着色器中的变量需要初值，可以通过start回调函数中进行初始化。

4. 如果需要每帧修改着色器中的变量值，实现动态特效，可以在update中进行设置。

5. 如果着色器中用到了define，需要在js代码中控制，可以定义define字段 ，同样他是一个数组，描述各个define变量值true或false，如下所示：

1. defines: [

2.    { name: 'HAS_HEART', value: true },

3.    { name: 'USE_POST_PROCESSING', value: false },

4. ]

6. 最后需要让shader被ShaderHelper组件加载，还需要将shader添加到CustomMaterial自定义材质对象中。

1. let CustomMaterial = require('CustomMaterial');

2. CustomMaterial.addShader(shader);

至此你就可以在ShaderHelper中看到新增的shader了。

3. 小结

---

今天分享了我刚出炉的ShaderHelper组件，其实我只是做了一个搬运工，整合了一下Cocos官网论坛中大佬们分享的项目源码，目前ShaderHelper还是有不少问题，比如：组件上不能设置shader参数；ShaderHelper只能配全精灵组件使用；切换program时曾经的shader效果没有清除等。

虽然组件不是很完善，但提供一个思路和测试Shader的方法，相信经过一点点改进以后能把它做的更好，也期待大家的参与和支持！下次与大家分享ShaderHelper的内部实现，以及Colin定义的CustomMaterial、SpriteHook中的内容。

ShaderHelper组件代码：https://github.com/ShawnZhang2015/ShaderHelper

---

如果觉得众号上的文章对您或您身边的朋友有帮助，感谢分享给他们，愿我们一起成长！