預覽

掃光特效—Fluxay2

馬賽克畫素特效—Mosaic

過渡效果—Transfer

Shawn 花了3天時間，研究了Cocos Creator 2.2.0 的 Effect 語法，終於在1024節前夕，大概知道如何將 2.1.3 的 Shader 特效給移植過去，成功移植了上面幾個 Effect 檔案，下面我講一下關鍵要點，相信你可以自行完成。

uniform block

在片元程式碼中定義 uniform 變數，除了sampler2D 型別以外，必須將 uniform 變數放到 uniform block 裡面，程式碼如下：

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

在 WebGL 2 中新增了 Uniform Block 的寫法，著色器與應用程式之間，或者著色器各階段之間共享的變數可組織為變數塊(Uniform Block)的形式，並且有時候必須採取這種形式。Shawn 對具體細節也不清楚，還需要進一步學習。

vec3 不可用

有幾個 Shader 有包含有 vec3 型別的 uniform 變數，始終報錯，如下提示：

沒有辦法，搞了好次幾都不行，只有求助引擎組大佬：

通過 panda 的指點，我將 vec3 型別的變數改為 vec4 就沒事了！

有不少夥伴在微信或公眾號後臺向 Shawn 詢問 ShaderHelper2 不能在 Cocos Creator 2.2.0 上工作的問題。

在此向大家致歉 ShaderHelper2 中的 Effect 還未完全移植完畢，移植的幾個 Effect 也還未經過測試，需要再過幾天才能放出，通過上面的方法你也可以快速移植。