Effect Exporter ：支持 Shader 2D&&3D 的特效编辑器

ihc523 · 2022年07月4日 08:48

Effect Exporter 特效编辑器

一款同时支持 Shader 2D&&3D 特效的编辑器插件，支持节点树预览，支持2D/3D即时切换。支持 CocosCreator v3.5.0。
商店地址：Effect Exporter | Cocos Store

在线文档：https://www.exporter.top/

简介

这是一款为 CocosCreator 深度定制的 Shader Effect 编辑器插件
支持 effect 2D/3D 特效
支持 3D 光照
支持纹理/法线/折射/反射贴图
支持从资源管理器右键一键编辑 material 、effect 文件，可实时保存到effect文件并生效预览
支持重新编辑已导出的 effect 文件
支持 shift + 左键框选生成 Frame 组合节点重复使用
已调通 100+ 节点，可满足大部分 effect 特效需求
已打通在线示例，可一键导入并重复编辑

v1.0.2 新增

自定义节点前往在线文档查看
新增 ShaderToy 特效集成示例

v1.0.3 新增

自定义节点使用 ts 文件定义，支持类型提示；
增加 高频节点 组，提升用户体验；
增加更多自定义特效

v1.1.0 新增

支持特效节点 2D/3D 预览
支持切换预览模式（2D、3D切换）
支持切换预览模型
菜单选项增加多个自定义配置，提升用户体验

详见文末图解

v2.0.0 新增

集成在线社区网站
集成一键上传、下载、发布功能
集成示例分享功能

v2.0.1 更新

修正部分模型下3D空间坐标转换问题

v2.0.2 更新

集成 TilingAndOffset 节点
集成 Twirl 节点
修复多 texture 节点概率性出现重复定义的问题

v2.0.3 更新

修复顶点 color 属性冲突问题
增加 USE_BATCHING 合批选项
增加叠加混合选项 technique - add
兼容 CocosCreator v3.5.0 及以上版本函数宏的新语法：#pragma define

功能介绍

界面一览

image-202111242154069361920×1017
左侧弹出菜单

点击左侧按钮可以弹出编辑器菜单，编辑器当前支持一键导出 effect 并即时生效预览，并可重复编辑

右侧在线示例

点击顶部右侧菜单，打开 在线示例面板，选择喜欢的示例，点击即可加载：

example-2021-11-25-2119031004×556

默认Effect3D模板

当第一次编辑某个 effect 文件时，会生成一份默认的节点树结构：

image-20211130154324913877×536

其中包含两大部分：
1. VertexOutput 控制的顶点着色器：
- 在顶点着色器中，主要实现了坐标空间的转换。具体原理可以参考 LearnOpengl 坐标系统
coordinate_systems800×394
- 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
1. FragmentOutput 控制的 片元着色器 ：
- 在默认模板中提供了一个 Color4 颜色输入变量，并直接作为片元着色器的结果输出，
  
  最终生成 effect 内片元着色器部分的代码如下：
```
vec4 frag(void) {
    //FragmentOutput
    vec4 target_FragColor = u_color;
    return target_FragColor;
}
```

默认Effect2D模板：

2D 模板与 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;
}

在CocosCreator中演示效果如下：

特别说明

在CocosCreator 2D对像(比如Sprite对象)下使用自定义材质时

宏 USE_2D_EFFECT 一定要勾选，使 effect 内相关定义生效，否则会报 CCLocal 相关错误：

同时支持 2D/3D 显示

一个特效可以同时支持 2D 或 3D 显示效果，可参考 在线示例 中的 扭曲特效(2D/3D)

快速开始

在 CocosCreator 编辑器菜单 扩展 --> 商城 中搜索 exporter 即可找到该插件，购买后下载到本地：

image-20211128222559493750×489
导入插件 oreo-shader-effect-exporter 并启用，推荐安装到 全局 ，所有项目可用：
在 资源管理器 面板选中任一 effect 或 material 文件，如果右键菜单出现 编辑 Effect 等字样，则表示插件已导入成功：

在线示例

新建 Cube 节点，新建 effect 、material 文件，为 material 指定 effect 后，右键选中刚才新建的material或effect，可看到 编辑 Effect 相关菜单，点击即可打开 Effect Exporter 编辑器。简单修改下默认模板（这里只是简单调整了颜色），点击左上角菜单 导出（.effect）即可导出到关联的 effect 文件并实时生效预览：
注：
- 插件第一次编辑某个 effect 文件时，会生成一份默认(3D)的节点树结构。
- 该行为与操作左上角菜单弹出面板下的 新建默认Effect3D项目 行为相同。
- 操作视频：

加载示例

Effect Exporter 提供了完整的在线示例，可以很方便的浏览效果并一健导入：

目前示例还在持续添加
部分示例展示：

溶解与定向消失

溶解与定向消失1912×1015

菲涅尔反射

菲涅尔反射1467×736

光照贴图

example-2021-11-25-2119031004×556