CocosCreator Shader 2D/3D 特效编辑器

Effect Exporter 特效编辑器

一款同时支持 Shader 2D&&3D 特效的编辑器插件，支持节点树预览，支持2D/3D即时切换。支持 CocosCreator v3.4.0。
论坛讨论： https://forum.cocos.org/t/topic/125728

简介

这是一款为 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切换）
支持切换预览模型
菜单选项增加多个自定义配置，提升用户体验

详见文末图解

功能介绍

界面一览

image-20211124215406936
左侧弹出菜单

点击左侧

image-20211124222820429

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

image-20211124223017604

右侧在线示例

点击顶部右侧菜单

image-20211125215346203

，打开 在线示例面板，选择喜欢的示例，点击即可加载：

example-2021-11-25-211903

默认Effect3D模板

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

image-20211130154324913

其中包含两大部分：
1. VertexOutput 控制的顶点着色器：
- 在顶点着色器中，主要实现了坐标空间的转换。具体原理可以参考 LearnOpengl 坐标系统
coordinate_systems
- VertexOutput根据节点树计算出一个 Vector4 裁剪空间坐标作为顶点着色器的结果输出，
  
  最终生成 effect 内顶点着色器部分的代码如下：
  
  <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="glsl" cid="n84" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;"> 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;
  }</pre>
  
  以上需要了解 CocosEffect v3 常用 shader 内置 Uniform
1. FragmentOutput 控制的 片元着色器 ：
- 在默认模板中提供了一个 Color4 颜色输入变量，并直接作为片元着色器的结果输出，
  
  最终生成 effect 内片元着色器部分的代码如下：
  
  <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="glsl" cid="n94" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">vec4 frag(void) {
  //FragmentOutput
  vec4 target_FragColor = u_color;
  return target_FragColor;
  }</pre>

默认Effect2D模板：

2D 模板与 3D 模板差异不大，主要是默认在 片元着色器 加了个 TextureBlock类型的贴图节点 SpriteFrame，方便控制 2D 纹理

image-20211130165108026

对应到 effect 文件，每个纹理输出都由一张纹理贴图和一个纹理权重控制：

image-20211130165643671

在该默认模板中，片元着色器还有一个 MultiplyBlock 乘法节点，用来混合贴图颜色与 Color4 定义的颜色，生成的effect代码如下：

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="glsl" cid="n104" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">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;
}</pre>

在CocosCreator中演示效果如下：

example-2021-11-25-012309

特别说明

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

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

image-20211130181436352

同时支持 2D/3D 显示

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

example-2021-11-29-211915

example-2021-11-29-211921

快速开始

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

image-20211128222559493
导入插件 oreo-shader-effect-exporter 并启用，推荐安装到 全局 ，所有项目可用：

image-20211128221503561
在 资源管理器 面板选中任一 effect 或 material 文件，如果右键菜单出现 编辑 Effect 等字样，则表示插件已导入成功：

image-20211128224021143

在线示例

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

加载示例

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

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

溶解与定向消失

溶解与定向消失

菲涅尔反射

菲涅尔反射

光照贴图

example-2021-11-25-211903

汇总效果

线上示例均可一键导出到 CocosCreator 中，以下是部分示例运行效果：

preview-2021-11-29-211909

v1.0.2 新增

自定义节点
参考 ShaderToy 特效实现了部分示例，细节请参考插件 oreo-shader-effect-exporter\editor\blocks 文件实现。展示效果如下：

火焰效果

火焰效果

水波纹荡漾效果

水波纹荡漾效果

万花筒效果

万花筒效果2
导出到 CocosCreator 中运行效果如下

example-2021-12-07-213713

v1.0.3 新增

自定义节点修改为 ts 描述，支持类型提示
新增 高频节点 组，方便使用
新增多个自定义节点示例

example_20211214011113

example_20211214012033

example-2021-12-13-211919

example-2021-12-13-211921