隨著 Cocos Creator 3.x 版本的發(fā)布，Cocos Creator 的 3D 功能更加完善。開發(fā)者 Oreo大魔王 著手制作了一款支持Shader 2D&3D 的特效編輯器插件，現(xiàn)已更新到 v1.0.2，支持 Cocos Creator 3.3。
我對 Effect3D 效果的實現(xiàn)一直很感興趣，在 Cocos Creator 3.x 版本發(fā)布后，我萌生了一個大膽的想法：在 Cocos Creator 編輯器內(nèi)集成 Effect3D 材質(zhì)編輯器！于是，就有了 Effect Exporter。
Effect Exporter
主界面
點擊頂部左側(cè)菜單按鈕，可以彈出編輯器菜單。編輯器當(dāng)前支持一鍵導(dǎo)出 effect 并即時生效預(yù)覽，并可重復(fù)編輯：
點擊頂部右側(cè)菜單按鈕，打開在線示例 面板，選擇喜歡的示例，點擊即可加載：
默認(rèn) Effect3D 模板
當(dāng)?shù)谝淮尉庉嬆硞€ effect 文件時，會生成一份默認(rèn)的節(jié)點樹結(jié)構(gòu)（如上圖），其中包含兩大部分：
一是 VertexOutput 控制的 頂點著色器 ：
在頂點著色器中3d木地板插件，主要實現(xiàn)了坐標(biāo)空間的轉(zhuǎn)換。具體原理可以參考 LearnOpengL 坐標(biāo)系統(tǒng)[1]。
VertexOutput 根據(jù)節(jié)點樹計算出一個 Vector4 裁剪空間坐標(biāo)作為頂點著色器的結(jié)果輸出，最終生成 effect 內(nèi)頂點著色器部分的代碼如下：
vec4?vert(void)?{
????//WorldPos
????vec4?output1?=?cc_matWorld?*?vec4(a_position,?1.0);
????//WorldPos?*?ViewProjectionTransform
????vec4?output0?=?cc_matViewProj?*?output1;
????//VertexOutput
????vec4?target_VertPosition?=?output0;
????return?target_VertPosition;
??}以上需要了解 CocosEffect v3 常用 shader 內(nèi)置 Uniform[2]。
二是 FragmentOutput 控制的片元著色器：
在默認(rèn)模板中提供了一個 Color4 顏色輸入變量，并直接作為片元著色器的結(jié)果輸出，最終生成 effect 內(nèi)片元著色器部分的代碼如下：
vec4?frag(void)?{
????//FragmentOutput
????vec4?target_FragColor?=?u_color;
????return?target_FragColor;
}默認(rèn) Effect2D 模板
2D 模板與 3D 模板差異不大3d木地板插件，主要是默認(rèn)在片元著色器加了個 TextureBlock 類型的貼圖節(jié)點 SpriteFrame，方便控制 2D 紋理。
對應(yīng)到 effect 文件，每個紋理輸出都由一張紋理貼圖和一個紋理權(quán)重控制：
在該默認(rèn)模板中，片元著色器還有一個 MultiplyBlock 乘法節(jié)點，用來混合貼圖顏色與 Color4 定義的顏色，生成的 effect 代碼如下：
vec4?frag(void)?{
????//SpriteFrame?紋理采樣
????#if?(USE_2D_SPRITE_FRAME)
?????//?當(dāng)啟用宏?USE_2D_SPRITE_FRAME?時，采樣?cc.Sprite?自身組件上的紋理
????????vec4?tempTextureRead?=?texture(cc_spriteTexture,?transformedUV);
????#else
?????//?采樣?SpriteFrameSampler?定義的輸入紋理
????????vec4?tempTextureRead?=?texture(SpriteFrameSampler,?transformedUV);
????#endif
????//紋理權(quán)重
????vec4?rgba?=?tempTextureRead.rgba?*?SpriteFrameWeight;
????//Multiply（乘法結(jié)節(jié)，這里用來混合顏色）
????vec4?output2?=?u_color?*?rgba;
????//FragmentOutput（最終輸出的顏色）
????vec4?target_FragColor?=?output2;
????return?target_FragColor;
}在 Cocos Creator 中演示效果如下：
注意：在 Cocos Creator 2D 對象（比如 Sprite 對象）下使用自定義材質(zhì)時，宏 USE_2D_EFFECT 一定要勾選，使 effect 內(nèi)相關(guān)定義生效，否則會報 CCLocal 相關(guān)錯誤：
同時支持 2D/3D 顯示
一個特效可以同時支持 2D 或 3D 顯示效果，可參考在線示例中的扭曲特效(2D/3D)。
編輯特效
新建 Cube 節(jié)點，新建 effect 、material 文件，為 material 指定 effect 后，右鍵選中剛才新建的 material 或 effect，可看到編輯 Effect 相關(guān)菜單，點擊即可打開 Effect Exporter 編輯器。簡單修改下默認(rèn)模板（這里只是簡單調(diào)整了顏色），點擊左上角菜單導(dǎo)出（.effect） 即可導(dǎo)出到關(guān)聯(lián)的 effect 文件并實時生效預(yù)覽。
操作演示
注意：插件第一次編輯某個 effect 文件時，會生成一份默認(rèn)（3D）的節(jié)點樹結(jié)構(gòu)。該行為與操作左上角菜單彈出面板下的新建默認(rèn)Effect3D項目行為相同。
加載示例
Effect Exporter 提供了完整的在線示例，可以很方便地瀏覽效果并一健導(dǎo)入：
導(dǎo)入操作演示
示例導(dǎo)入后，點擊左上角菜單導(dǎo)出(.effect)即可在 Cocos Creator 中看到效果：
導(dǎo)出操作演示
目前示例還在持續(xù)添加，部分示例展示：
溶解與定向消失
菲涅爾反射
光照貼圖
另外，線上示例均可一鍵導(dǎo)出到 Cocos Creator 中，以下是部分示例運行效果：
自定義節(jié)點
v1.0.2 參考 ShaderToy 特效實現(xiàn)了部分示例，實現(xiàn)細(xì)節(jié)請參考插件 oreo-shader-effect-exporter\editor\blocks 文件實現(xiàn)。部分示例效果：
火焰效果
水波效果
萬花筒效果
導(dǎo)出到 Cocos Creator 中運行效果如下：
資源地址
Effect Exporter 完整文檔與在線體驗
點擊【閱讀原文】下載 Effect Exporter- Cocos Store
論壇討論帖
關(guān)于 Effect Exporter 編輯器的實現(xiàn)，我大量參考了 babylon.js、Shader Forge、webglstudio、react-diagrams、ez-shader-editor 等開源項目，感興趣的小伙伴可以了解一下。更全面的技術(shù)實現(xiàn)過程和效果展示、以及插件的更新內(nèi)容等等，我都會第一時間發(fā)布在論壇討論帖，歡迎大家來論壇一起學(xué)習(xí)交流！
擴(kuò)展鏈接
[1] LearnOpengL坐標(biāo)系統(tǒng)
%20Getting%20started/08%20Coordinate%20Systems/#_2
[2]常用 shader 內(nèi)置 Uniform
>> 點擊查看嘉賓及演講主題
12月18日下午14:00，Cocos 開發(fā)者沙龍「廈門站」將在廈門香格里拉酒店舉辦。Cocos 引擎、亞馬遜云科技、網(wǎng)易易盾、青瓷游戲、風(fēng)領(lǐng)科技圍繞引擎技術(shù)與生態(tài)、游戲開發(fā)與發(fā)行等內(nèi)容，為各位開發(fā)者準(zhǔn)備了一場干貨盛宴。
報名來到現(xiàn)場的小伙伴，還將獲得「Cocos 最新定制周邊大禮包」，人手一份哦！掃描下方二維碼免費報名吧↓
>> 開發(fā)者報名通道
往期精彩
以上內(nèi)容由用戶投稿，彬迪地板進(jìn)行整理發(fā)布，希望對大家有所幫助，如有侵權(quán)，請聯(lián)系我們進(jìn)行刪除。
裝修材料一站式解決方案商
