今天把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所顯示且正常加載運行,需要實現上面的一些字段和方法。其中比較重要的幾點說明一下:
- 定義一個最簡單的shader對像只要需要有name、vert、frag三個屬性
- 如果着色器代碼中有需要初始化的變量,需要定義params字段,描述參數的名字和數據類型,如下所示:
params: [
{name: 'iCenter', type: renderer.PARAM_FLOAT2},
{name: 'iResolution', type: renderer.PARAM_FLOAT3}
]
- 如果着色器中的變量需要初值,可以通過start回調函數中進行初始化
- 如果需要每幀修改着色器中的變量值,實現動態特效,可以在update中進行設置
- 如果着色器中用到了define,需要在js代碼中控制,可以定義define字段 ,同樣他是一個數組,描述各個define是否開啓或關閉,如下所示:
defines: [
{ name: 'HAS_HEART', value: true },
{ name: 'USE_POST_PROCESSING', value: false },
],
- 最後需要讓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中的內容。
如果覺得衆號上的文章對您或您身邊的朋友有幫助,感謝分享給他們,願我們一起成長!