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

Effect Exporter

• 一款 CocosCreator Shader Editor，同时支持 Shader 2D&&3D 特效的编辑器插件， 支持节点预览，支持2D/3D即时切换。支持最新版本 CocosCreator（v3.6.x）。

   

• 商店地址: Effect Exporter

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

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

前言

• 随着 v3.0.0 版本的发布，CococsCreator 3D 功能更加完善，而我对其中 Effect3D 效果的实现比较感兴趣，但鉴于 CocosCreator 目前还没有内置的可视化材质编辑器，一番考量之后，我萌生了一个大胆的想法：在 CocosCreator 编辑器内集成 Effect3D 材质编辑器！于是，就有了 Effect Exporter 。

简介

• 这是一款为 CocosCreator 深度定制的 Shader Editor 编辑器插件

• 支持 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切换）

• 支持切换预览模型

• 菜单选项增加多个自定义配置，提升用户体验

详见文末图解

功能介绍

• 界面一览

  

• 左侧弹出菜单

  点击左侧

  

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

---

• 右侧在线示例

  点击顶部右侧菜单

  

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

  

默认Effect3D模板

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

  

  其中包含两大部分：

  1. VertexOutput 控制的顶点着色器：

  • 在顶点着色器中，主要实现了坐标空间的转换。具体原理可以参考 LearnOpengl 坐标系统

  

  • 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 即可找到该插件，购买后下载到本地：

  

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

  

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

在线示例

• 新建 Cube 节点，新建 effect 、material 文件，为 material 指定 effect 后，右键选中刚才新建的material或effect，可看到 编辑 Effect 相关菜单，点击即可打开 Effect Exporter 编辑器。简单修改下默认模板（这里只是简单调整了颜色），点击左上角菜单 导出（.effect）即可导出到关联的 effect 文件并实时生效预览：

  注：

  • 插件第一次编辑某个 effect 文件时，会生成一份默认(3D)的节点树结构。

  • 该行为与操作左上角菜单弹出面板下的 新建默认Effect3D项目 行为相同。

  • 操作视频：

  ​
  ​

加载示例

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

  目前示例还在持续添加

• 部分示例展示：

  溶解与定向消失

  

  菲涅尔反射

  

  光照贴图

  

汇总效果

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

v1.0.2 新增

• 自定义节点

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

  火焰效果

  

  水波纹荡漾效果

  

  万花筒效果

  

• 导出到 CocosCreator 中运行效果如下

  

v1.0.3 新增

• 自定义节点修改为 ts 描述，支持类型提示

• 新增 高频节点 组，方便使用

• 新增多个自定义节点示例

  

  

  

  

v1.1.0 重磅新增

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

  

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

  

• 支持切换预览模型

  

• 一键生效，所见即所得

  

关于

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

  • babylon.js

  • Shader Forge 中文文档

  • webglstudio

  • react-diagrams

  • ez-shader-editor

• 推荐前置知识

  • OpenGL 的世界

  • WebGL 理论基础

  • The Book of Shaders

  • CocosCreator v3 材质系统

支持

---

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

  商店地址：Effect Exporter | Cocos Store

  在线文档：Effect Exporter