,

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

時(shí)間：2023-03-20 11:08:58 來(lái)源：網(wǎng)絡(luò)整理

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

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

Effect Exporter

主界面

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

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

默認(rèn) Effect3D 模板

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

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

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

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

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)模板中提供了一個(gè) 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)在片元著色器加了個(gè) TextureBlock 類型的貼圖節(jié)點(diǎn) SpriteFrame，方便控制 2D 紋理。

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

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

vec4?frag(void)?{
????//SpriteFrame?紋理采樣
????#if?(USE_2D_SPRITE_FRAME)
?????//?當(dāng)啟用宏?USE_2D_SPRITE_FRAME?時(shí)，采樣?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é)，這里用來(lái)混合顏色）
????vec4?output2?=?u_color?*?rgba;
????//FragmentOutput（最終輸出的顏色）
????vec4?target_FragColor?=?output2;
????return?target_FragColor;
}

在 Cocos Creator 中演示效果如下：

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

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

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

編輯特效

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

操作演示

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

加載示例

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

導(dǎo)入操作演示

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

導(dǎo)出操作演示

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

溶解與定向消失

菲涅爾反射

光照貼圖

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

自定義節(jié)點(diǎn)

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

火焰效果

水波效果

萬(wàn)花筒效果

導(dǎo)出到 Cocos Creator 中運(yùn)行效果如下：

資源地址

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

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

論壇討論帖

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

擴(kuò)展鏈接

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

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

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

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

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

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

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

往期精彩