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

预览

file
扫光特效—Fluxay2微信

file
马赛克像素特效—Mosaic学习

file
过渡效果—Transfer测试

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

uniform block

在片元代码中定义 uniform 变量,除了sampler2D 类型之外,必须将 uniform 变量放到 uniform block 里面,代码以下:orm

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

在 WebGL 2 中新增了 Uniform Block 的写法,着色器与应用程序之间,或者着色器各阶段之间共享的变量可组织为变量块(Uniform Block)的形式,而且有时候必须采起这种形式。Shawn 对具体细节也不清楚,还须要进一步学习。blog

vec3 不可用

有几个 Shader 有包含有 vec3 类型的 uniform 变量,始终报错,以下提示:
file
没有办法,搞了好次几都不行,只有求助引擎组大佬:
fileform

经过 panda 的指点,我将 vec3 类型的变量改成 vec4 就没事了!后台

有很多伙伴在微信或公众号后台向 Shawn 询问 ShaderHelper2 不能在 Cocos Creator 2.2.0 上工做的问题。变量

在此向你们致歉 ShaderHelper2 中的 Effect 还未彻底移植完毕,移植的几个 Effect 也还未通过测试,须要再过几天才能放出,经过上面的方法你也能够快速移植。
file

相关文章
相关标签/搜索