隨著 Cocos Creator 3.x 版本的發布，Cocos Creator 的 3D 功能更加完善。開發者 Oreo大魔王 著手制作了一款支持Shader 2D&3D 的特效編輯器插件，現已更新到 v1.0.2，支持 Cocos Creator 3.3。

我對 Effect3D 效果的實現一直很感興趣，在 Cocos Creator 3.x 版本發布后，我萌生了一個大膽的想法：在 Cocos Creator 編輯器內集成 Effect3D 材質編輯器！于是，就有了 Effect Exporter。

Effect Exporter

主界面

點擊頂部左側菜單按鈕，可以彈出編輯器菜單。編輯器當前支持一鍵導出 effect 并即時生效預覽，并可重復編輯：

點擊頂部右側菜單按鈕，打開在線示例 面板，選擇喜歡的示例，點擊即可加載：

默認 Effect3D 模板

當第一次編輯某個 effect 文件時，會生成一份默認的節點樹結構（如上圖），其中包含兩大部分：

一是 VertexOutput 控制的 頂點著色器 ：

在頂點著色器中3d木地板插件，主要實現了坐標空間的轉換。具體原理可以參考 LearnOpengL 坐標系統[1]。

VertexOutput 根據節點樹計算出一個 Vector4 裁剪空間坐標作為頂點著色器的結果輸出，最終生成 effect 內頂點著色器部分的代碼如下：

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 內置 Uniform[2]。

二是 FragmentOutput 控制的片元著色器：

在默認模板中提供了一個 Color4 顏色輸入變量，并直接作為片元著色器的結果輸出，最終生成 effect 內片元著色器部分的代碼如下：

vec4?frag(void)?{
????//FragmentOutput
????vec4?target_FragColor?=?u_color;
????return?target_FragColor;
}

默認 Effect2D 模板

2D 模板與 3D 模板差異不大3d木地板插件，主要是默認在片元著色器加了個 TextureBlock 類型的貼圖節點 SpriteFrame，方便控制 2D 紋理。

對應到 effect 文件，每個紋理輸出都由一張紋理貼圖和一個紋理權重控制：

在該默認模板中，片元著色器還有一個 MultiplyBlock 乘法節點，用來混合貼圖顏色與 Color4 定義的顏色，生成的 effect 代碼如下：

vec4?frag(void)?{
????//SpriteFrame?紋理采樣
????#if?(USE_2D_SPRITE_FRAME)
?????//?當啟用宏?USE_2D_SPRITE_FRAME?時，采樣?cc.Sprite?自身組件上的紋理
????????vec4?tempTextureRead?=?texture(cc_spriteTexture,?transformedUV);
????#else
?????//?采樣?SpriteFrameSampler?定義的輸入紋理
????????vec4?tempTextureRead?=?texture(SpriteFrameSampler,?transformedUV);
????#endif
????//紋理權重
????vec4?rgba?=?tempTextureRead.rgba?*?SpriteFrameWeight;
????//Multiply（乘法結節，這里用來混合顏色）
????vec4?output2?=?u_color?*?rgba;
????//FragmentOutput（最終輸出的顏色）
????vec4?target_FragColor?=?output2;
????return?target_FragColor;
}

在 Cocos Creator 中演示效果如下：

注意：在 Cocos Creator 2D 對象（比如 Sprite 對象）下使用自定義材質時，宏 USE_2D_EFFECT 一定要勾選，使 effect 內相關定義生效，否則會報 CCLocal 相關錯誤：

同時支持 2D/3D 顯示

一個特效可以同時支持 2D 或 3D 顯示效果，可參考在線示例中的扭曲特效(2D/3D)。

編輯特效

新建 Cube 節點，新建 effect 、material 文件，為 material 指定 effect 后，右鍵選中剛才新建的 material 或 effect，可看到編輯 Effect 相關菜單，點擊即可打開 Effect Exporter 編輯器。簡單修改下默認模板（這里只是簡單調整了顏色），點擊左上角菜單導出（.effect） 即可導出到關聯的 effect 文件并實時生效預覽。

操作演示

注意：插件第一次編輯某個 effect 文件時，會生成一份默認（3D）的節點樹結構。該行為與操作左上角菜單彈出面板下的新建默認Effect3D項目行為相同。

加載示例

Effect Exporter 提供了完整的在線示例，可以很方便地瀏覽效果并一健導入：

導入操作演示

示例導入后，點擊左上角菜單導出(.effect)即可在 Cocos Creator 中看到效果：

導出操作演示

目前示例還在持續添加，部分示例展示：

溶解與定向消失

菲涅爾反射

光照貼圖

另外，線上示例均可一鍵導出到 Cocos Creator 中，以下是部分示例運行效果：

自定義節點

v1.0.2 參考 ShaderToy 特效實現了部分示例，實現細節請參考插件 oreo-shader-effect-exporter\editor\blocks 文件實現。部分示例效果：

火焰效果

水波效果

萬花筒效果

導出到 Cocos Creator 中運行效果如下：

資源地址

Effect Exporter 完整文檔與在線體驗

點擊【閱讀原文】下載 Effect Exporter- Cocos Store

論壇討論帖

關于 Effect Exporter 編輯器的實現，我大量參考了 babylon.js、Shader Forge、webglstudio、react-diagrams、ez-shader-editor 等開源項目，感興趣的小伙伴可以了解一下。更全面的技術實現過程和效果展示、以及插件的更新內容等等，我都會第一時間發布在論壇討論帖，歡迎大家來論壇一起學習交流！

擴展鏈接

[1] LearnOpengL坐標系統

%20Getting%20started/08%20Coordinate%20Systems/#_2

[2]常用 shader 內置 Uniform

>> 點擊查看嘉賓及演講主題

12月18日下午14:00，Cocos 開發者沙龍「廈門站」將在廈門香格里拉酒店舉辦。Cocos 引擎、亞馬遜云科技、網易易盾、青瓷游戲、風領科技圍繞引擎技術與生態、游戲開發與發行等內容，為各位開發者準備了一場干貨盛宴。

報名來到現場的小伙伴，還將獲得「Cocos 最新定制周邊大禮包」，人手一份哦！掃描下方二維碼免費報名吧↓

>> 開發者報名通道

往期精彩

以上內容由用戶投稿，彬迪地板進行整理發布，希望對大家有所幫助，如有侵權，請聯系我們進行刪除。