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程序的使用规则：

/**
 * Shader模板
 **/

const renderEngine = cc.renderer.renderEngine;
const renderer = renderEngine.renderer;

//定义一个shader对象
const shader = {
    //名字必须字段 
    name: "xxx",
    //着色器代码中需要与js交互的参数名字与数据类型
    params: [
        {name: 'yyy', type: renderer.PARAM_FLOAT},
        {name: 'zzz', type: renderer.PARAM_FLOAT2}
    ],

    //着色器中使用到的define定义，非必要字段
    defines: [],
   
    //start回调，此可以初始化着色器中的参数
    start(sprite, material) { ... },

    //update每帧回调，如果是动态效果，可以在此设置Shader参数
    update(sprite, material) { ... },
    
    //vert顶点着色器代码，它是一个字符串
    vert: '...',

    //frag片元着色器
    frag: `...`
};

//注意这里，通过CustomMaterial.addShader添加shader对象，
//这样就可以被ShaderHelper组件所显示
let CustomMaterial = require('CustomMaterial');
CustomMaterial.addShader(shader);

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

1. 定义一个最简单的shader对像只要需要有name、vert、frag三个属性
2. 如果着色器代码中有需要初始化的变量，需要定义params字段，描述参数的名字和数据类型，如下所示：

params: [
        {name: 'iCenter', type: renderer.PARAM_FLOAT2},
        {name: 'iResolution', type: renderer.PARAM_FLOAT3}
]

3. 如果着色器中的变量需要初值，可以通过start回调函数中进行初始化
4. 如果需要每帧修改着色器中的变量值，实现动态特效，可以在update中进行设置
5. 如果着色器中用到了define，需要在js代码中控制，可以定义define字段 ，同样他是一个数组，描述各个define是否开启或关闭，如下所示：

defines: [
        { name: 'HAS_HEART', value: true },
        { name: 'USE_POST_PROCESSING', value: false },
],

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

let CustomMaterial = require('CustomMaterial');
CustomMaterial.addShader(shader);

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

3. 小结

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

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

---

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