3d木地板插件|Effect Exporter：一款 2D&3D 特效編輯器插件

時間：2023-03-20 11:08:58 來源：網(wǎng)絡整理

隨著 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è)菜單按鈕，可以彈出編輯器菜單。編輯器當前支持一鍵導出 effect 并即時生效預覽，并可重復編輯：

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

默認 Effect3D 模板

當?shù)谝淮尉庉嬆硞€ effect 文件時，會生成一份默認的節(jié)點樹結(jié)構(gòu)（如上圖），其中包含兩大部分：

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

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

VertexOutput 根據(jù)節(jié)點樹計算出一個 Vector4 裁剪空間坐標作為頂點著色器的結(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 控制的片元著色器：

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

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

默認 Effect2D 模板

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

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

在該默認模板中，片元著色器還有一個 MultiplyBlock 乘法節(jié)點，用來混合貼圖顏色與 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
????//紋理權(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 編輯器。簡單修改下默認模板（這里只是簡單調(diào)整了顏色），點擊左上角菜單導出（.effect）即可導出到關(guān)聯(lián)的 effect 文件并實時生效預覽。

操作演示

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

加載示例

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

導入操作演示

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

導出操作演示

目前示例還在持續(xù)添加，部分示例展示：

溶解與定向消失

菲涅爾反射

光照貼圖

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

自定義節(jié)點

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

火焰效果

水波效果

萬花筒效果

導出到 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ā)布在論壇討論帖，歡迎大家來論壇一起學習交流！

擴展鏈接

[1] LearnOpengL坐標系統(tǒng)

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

[2]常用 shader 內(nèi)置 Uniform

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

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

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

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

往期精彩