今天把ShaderHelper组件重新整理，代码已经上传到github，地址：https://github.com/ShawnZhang2015/ShaderHelper
说实话Shawn对Shader也是刚刚起步，目前只会依葫芦画瓢，根据论坛中panda、Colin、小叔叔等大佬们的教程和源码结合自己的使用体验，编写了ShaderHelper组件，请先看使用方法：
image.png
1. ShaderHelper使用
通过上面视频，你会发现使用ShaderHelper组件基本上没有任何负担，通过ShaderHelper的属性Program下拉菜单选择需要的Shader效果即可，看下图：
ShaderHelper组件
同时注意，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所显示且正常加载运行，需要实现上面的一些字段和方法。其中比较重要的几点说明一下：
- 定义一个最简单的shader对像只要需要有name、vert、frag三个属性
- 如果着色器代码中有需要初始化的变量，需要定义params字段，描述参数的名字和数据类型，如下所示：
params: [
{name: 'iCenter', type: renderer.PARAM_FLOAT2},
{name: 'iResolution', type: renderer.PARAM_FLOAT3}
]
- 如果着色器中的变量需要初值，可以通过start回调函数中进行初始化
- 如果需要每帧修改着色器中的变量值，实现动态特效，可以在update中进行设置
- 如果着色器中用到了define，需要在js代码中控制，可以定义define字段 ，同样他是一个数组，描述各个define是否开启或关闭，如下所示：
defines: [
{ name: 'HAS_HEART', value: true },
{ name: 'USE_POST_PROCESSING', value: false },
],
- 最后需要让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中的内容。
如果觉得众号上的文章对您或您身边的朋友有帮助，感谢分享给他们，愿我们一起成长！
image
网友评论