研究了3天,終於將 Shader 移植到 Cocos Creator 2.2.0 上了!

  • 2019 年 10 月 25 日
  • 筆記

預覽

file
掃光特效—Fluxay2

file
馬賽克像素特效—Mosaic

file
過渡效果—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 變量,始終報錯,如下提示:
file
沒有辦法,搞了好次幾都不行,只有求助引擎組大佬:
file

通過 panda 的指點,我將 vec3 類型的變量改為 vec4 就沒事了!

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

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