研究了3天，终于将 Shader 移植到 Cocos Creator 2.2.0 上了

 

01 预览

扫光特效—Fluxay2

 

马赛克像素特效—Mosaic

 

过渡效果—Transfer

 

Shawn 花了3天时间，研究了Cocos Creator 2.2.0 的 Effect 语法，终于在1024节前夕，大概知道如何将 2.1.3 的 Shader 特效给移植过去，成功移植了上面几个 Effect 文件，下面我讲一下关键要点，相信你可以自行完成。

 

02 uniform block 

在片元代码中定义 uniform 变量，除了sampler2D 类型以外，必须将 uniform 变量放到 uniform block 里面，代码如下：

uniform PROPERTIES{	
  vec4  color;	
  float factor;	
  float width;	
  float time;	
}

在 WebGL 2 中新增了 Uniform Block 的写法，着色器与应用程序之间，或者着色器各阶段之间共享的变量可组织为变量块(Uniform Block)的形式，并且有时候必须采取这种形式。

Shawn 对具体细节也不清楚，还需要进一步学习。

 

02 vec3 不可用

有几个 Shader 有包含有 vec3 类型的 uniform 变量，始终报错，如下提示：

没有办法，搞了好次几都不行，只有求助引擎组大佬：

通过 panda 的指点，我将 vec3 类型的变量改为 vec4 就没事了！

有不少伙伴在微信或公众号后台向 Shawn 询问 ShaderHelper2 不能在 Cocos Creator 2.2.0 上工作的问题。

在此向大家致歉 ShaderHelper2 中的 Effect 还未完全移植完毕，移植的几个 Effect 也还未经过测试，需要再过几天才能放出，通过上面的方法你也可以快速移植。