隨著 Cocos Creator 3.x 版本的發(fā)布，Cocos Creator 的 3D 功能更加完善。開發(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è)菜單按鈕，打開在線示例 面板，選擇喜歡的示例，點(diǎn)擊即可加載：
默認(rèn) Effect3D 模板
當(dāng)?shù)谝淮尉庉嬆硞€(gè) effect 文件時(shí)，會(huì)生成一份默認(rèn)的節(jié)點(diǎn)樹結(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)樹計(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)，用來混合貼圖顏色與 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é)，這里用來混合顏色）
????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)擊即可打開 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)樹結(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 等開源項(xiàng)目，感興趣的小伙伴可以了解一下。更全面的技術(shù)實(shí)現(xiàn)過程和效果展示、以及插件的更新內(nèi)容等等，我都會(huì)第一時(shí)間發(fā)布在論壇討論帖，歡迎大家來論壇一起學(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 開發(fā)者沙龍「廈門站」將在廈門香格里拉酒店舉辦。Cocos 引擎、亞馬遜云科技、網(wǎng)易易盾、青瓷游戲、風(fēng)領(lǐng)科技圍繞引擎技術(shù)與生態(tài)、游戲開發(fā)與發(fā)行等內(nèi)容，為各位開發(fā)者準(zhǔn)備了一場(chǎng)干貨盛宴。
報(bào)名來到現(xiàn)場(chǎng)的小伙伴，還將獲得「Cocos 最新定制周邊大禮包」，人手一份哦！掃描下方二維碼免費(fèi)報(bào)名吧↓
>> 開發(fā)者報(bào)名通道
往期精彩
以上內(nèi)容由用戶投稿，彬迪地板進(jìn)行整理發(fā)布，希望對(duì)大家有所幫助，如有侵權(quán)，請(qǐng)聯(lián)系我們進(jìn)行刪除。
裝修材料一站式解決方案商
