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 内顶点着色器部分的代码如下：

     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

  2. FragmentOutput 控制的 片元着色器 ：

  • 在默认模板中提供了一个 Color4 颜色输入变量，并直接作为片元着色器的结果输出，

    最终生成 effect 内片元着色器部分的代码如下：

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

默认Effect2D模板：

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

  image-20211130165108026

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

  image-20211130165643671

  在该默认模板中，片元着色器还有一个 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中演示效果如下：

  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

v1.1.0 重磅新增

• 支持特效节点 2D/3D 即时预览

  example-2021-12-26-212515

• 支持切换预览模式（2D、3D切换）

  example-2021-12-26-212516

• 支持切换预览模型

  example-2021-12-26-212517

• 一键生效，所见即所得

  example-2021-12-26-212518

关于

• 关于 Effect Exporter 编辑器的实现，作者大量参考了以下开源项目，有兴趣的伙伴可以了解一下，一起交流

  • babylon.js

  • Shader Forge 中文文档

  • webglstudio

  • react-diagrams

  • ez-shader-editor

• 推荐前置知识

  • OpenGL 的世界

  • WebGL 理论基础

  • The Book of Shaders

  • CocosCreator v3 材质系统

支持

---

• Effect Exporter 目前还在持续完善中，希望大家支持。

  商店地址：http://store.cocos.com/app/detail/3369

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