CreatorPrimer | 2.x ShaderHelper組件速遞

今天把ShaderHelper組件重新整理，代碼已經上傳到github，地址：https://github.com/ShawnZhang2015/ShaderHelper

說實話Shawn對Shader也是剛剛起步，目前只會依葫蘆畫瓢，根據論壇中panda、Colin、小叔叔等大佬們的教程和源碼結合自己的使用體驗，編寫了ShaderHelper組件，請先看使用方法：

點擊此處播放

1. ShaderHelper使用

通過上面視頻，你會發現使用ShaderHelper組件基本上沒有任何負擔，通過ShaderHelper的屬性Program下拉菜單選擇需要的Shader效果即可，看下圖：

同時注意，ShaderHelper組件目前必須配合cc.Sprite組件一起使用，就是說節點上必須有一個Sprite組件。

2. Shader模板對象

有人可能會問，Program下拉菜單中Shader效果都不是我想要的，要自己添加Shader怎麼做呢？

我這裏設計了一個Shader程序的模板結構，下面以Wave動態效果的Shader爲例說明一下Shader程序的使用規則：

/**
 * Shader模板
 **/

const renderEngine = cc.renderer.renderEngine;
const renderer = renderEngine.renderer;

//定義一個shader對象
const shader = {
    //名字必須字段 
    name: "xxx",
    //着色器代碼中需要與js交互的參數名字與數據類型
    params: [
        {name: 'yyy', type: renderer.PARAM_FLOAT},
        {name: 'zzz', type: renderer.PARAM_FLOAT2}
    ],

    //着色器中使用到的define定義，非必要字段
    defines: [],
   
    //start回調，此可以初始化着色器中的參數
    start(sprite, material) { ... },

    //update每幀回調，如果是動態效果，可以在此設置Shader參數
    update(sprite, material) { ... },
    
    //vert頂點着色器代碼，它是一個字符串
    vert: '...',

    //frag片元着色器
    frag: `...`
};

//注意這裏，通過CustomMaterial.addShader添加shader對象，
//這樣就可以被ShaderHelper組件所顯示
let CustomMaterial = require('CustomMaterial');
CustomMaterial.addShader(shader);

如果要自定義Shader並能被ShaderHelper所顯示且正常加載運行，需要實現上面的一些字段和方法。其中比較重要的幾點說明一下：

1. 定義一個最簡單的shader對像只要需要有name、vert、frag三個屬性
2. 如果着色器代碼中有需要初始化的變量，需要定義params字段，描述參數的名字和數據類型，如下所示：

params: [
        {name: 'iCenter', type: renderer.PARAM_FLOAT2},
        {name: 'iResolution', type: renderer.PARAM_FLOAT3}
]

3. 如果着色器中的變量需要初值，可以通過start回調函數中進行初始化
4. 如果需要每幀修改着色器中的變量值，實現動態特效，可以在update中進行設置
5. 如果着色器中用到了define，需要在js代碼中控制，可以定義define字段 ，同樣他是一個數組，描述各個define是否開啓或關閉，如下所示：

defines: [
        { name: 'HAS_HEART', value: true },
        { name: 'USE_POST_PROCESSING', value: false },
],

6. 最後需要讓shader被ShaderHelper組件加載，還需要將shader添加到CustomMaterial自定義材質對象中。

let CustomMaterial = require('CustomMaterial');
CustomMaterial.addShader(shader);

至此你就可以在ShaderHelper中看到新增的shader了。

3. 小結

今天分享了我剛出爐的ShaderHelper組件，其實我只是做了一個搬運工，整合了一下Cocos官網論壇中大佬們分享的項目源碼，目前ShaderHelper還是有不少問題，比如：組件上不能設置shader參數；ShaderHelper只能配全精靈組件使用；切換program時曾經的shader效果沒有清除等。

雖然組件不是很完善，但提供一個思路和測試Shader的方法，相信經過一點點改進以後能把它做的更好，也期待大家的參與和支持！下次與大家分享ShaderHelper的內部實現，以及Colin定義的CustomMaterial、SpriteHook中的內容。

---

如果覺得衆號上的文章對您或您身邊的朋友有幫助，感謝分享給他們，願我們一起成長！