研究了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 也還未經過測試，需要再過幾天才能放出，通過上面的方法你也可以快速移植。