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

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

Effect Exporter

主界面

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

點(diǎn)擊頂部右側菜單按鈕，打開(kāi)在線(xiàn)示例 面板，選擇喜歡的示例，點(diǎn)擊即可加載：

默認 Effect3D 模板

當第一次編輯某個(gè) effect 文件時(shí)，會(huì )生成一份默認的節點(diǎn)樹(shù)結構（如上圖），其中包含兩大部分：

一是 VertexOutput 控制的 頂點(diǎn)著(zhù)色器 ：

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

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

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 控制的片元著(zhù)色器：

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

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

默認 Effect2D 模板

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

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

在該默認模板中，片元著(zhù)色器還有一個(gè) MultiplyBlock 乘法節點(diǎn)，用來(lái)混合貼圖顏色與 Color4 定義的顏色，生成的 effect 代碼如下：

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

在 Cocos Creator 中演示效果如下：

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

同時(shí)支持 2D/3D 顯示

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

編輯特效

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

操作演示

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

加載示例

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

導入操作演示

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

導出操作演示

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

溶解與定向消失

菲涅爾反射

光照貼圖

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

自定義節點(diǎn)

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

火焰效果

水波效果

萬(wàn)花筒效果

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

資源地址

Effect Exporter 完整文檔與在線(xiàn)體驗

點(diǎn)擊【閱讀原文】下載 Effect Exporter- Cocos Store

論壇討論帖

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

擴展鏈接

[1] LearnOpengL坐標系統

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

[2]常用 shader 內置 Uniform

>> 點(diǎn)擊查看嘉賓及演講主題

12月18日下午14:00，Cocos 開(kāi)發(fā)者沙龍「廈門(mén)站」將在廈門(mén)香格里拉酒店舉辦。Cocos 引擎、亞馬遜云科技、網(wǎng)易易盾、青瓷游戲、風(fēng)領(lǐng)科技圍繞引擎技術(shù)與生態(tài)、游戲開(kāi)發(fā)與發(fā)行等內容，為各位開(kāi)發(fā)者準備了一場(chǎng)干貨盛宴。

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

>> 開(kāi)發(fā)者報名通道

往期精彩

以上內容由用戶(hù)投稿，彬迪地板進(jìn)行整理發(fā)布，希望對大家有所幫助，如有侵權，請聯(lián)系我們進(jìn)行刪除。