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

前言

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

简介

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

功能介绍

  • 界面一览

  • 左侧弹出菜单

    点击左侧 image-20211124222820429按钮可以弹出编辑器菜单,编辑器当前支持一键导出 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 相关错误:

image-20211130181436352

同时支持 2D/3D 显示

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

    example-2021-11-29-211915

    example-2021-11-29-211921

节点定义

Effect Exporter 中,一个控制块 Block 称为一个节点;一个节点一般会包含左侧输入(input)端和右侧输出(output)端,各端可能会包含一个或多个连接点,称为插槽 slot(也可称为槽点)。

比如一个 Texture 节点,input 端需要两个插槽 uv 和 image source 提供输入,经过 Texture 节点处理后,output 端可以提供 rgba 及各个分量输出槽:

image-20211130205545616

Effect Exporter 中的节点按输入类型主要有三类,部分节点如下图所示:

  1. 变量输入类 只包含 output 端,主要为 shader 提供 in 输入变量(attribute 属性变量、const 常量 、uniform 全局变量)
  2. 逻辑处理类 这类节点既包含 input 又包含 output ,主要处理中间逻辑,将结果提供给最后 out 输出变量 (这类节点处理过程中也可以产生 varying 变量,在 顶点着色器片元着色器 之间传递数据)
  3. 结果输出类 这里主要是指 VertexOutput 顶点着色器输出和 FragmentOutput 片元着色器输出,它们只接受 input 输入,得到的值会直接返回给着色器程序处理
  • 插槽说明

    Effect Exporter 中的插槽显示很直观,按照可连接的数据的维度显示不同的图标:

    • image-20211130214024926一个圆圈,可连接一维数据,比如 time,float,以及颜色或向量各单分量 r、g、b、a,x、y、z、w
    • image-20211130213755317两个端点,可连接二维数据,比如 uv,xy、zw 等二分量
    • image-20211130214119196三个端点,可连接三维数据,比如 rgb,xyz 等
    • image-20211130214259140四个端点,可连接四维数据,比如 rgba,xyzw 等
    • image-20211130214357811中间多了一圈旋转变换,表示连接矩阵数据
    • image-20211130214539213里面叠了一层,表示需要一个对象数据,比如使用 ImageSource 节点提供一份纹理数据
    • image-20211130214801476红色实心插槽,表示支持多种连接类型,当有一个连接点类型确定时,其它插槽立即变为只能接受同类型数据

快速开始

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

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

    image-20211128221503561

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

编辑特效

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

    注:

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

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

    • 操作视频:

加载示例

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

    目前示例还在持续添加

  • 示例导入后,点击左上角菜单 导出(.effect) 即可在 CocosCreator 中看到效果:

  • 部分示例展示:

    溶解与定向消失

    菲涅尔反射

    光照贴图

    注:

    如果示例中使用到光照,则需要在 预览窗口 中激活任一个光源;

    如果模型显示异常,可能需要在 预览窗口 中开启深度测试和背面剔除;

汇总效果

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

preview-2021-11-29-211909

关于


下一步

Effect Exporter 两周前已悄悄地在 Cocos Store 上架,经过一段时间的稳定性测试和功能完善之后,现在已更新到 v1.0.1 版本,并且在 12.1~12.3 开启三天8折活动,感谢热心网友们的支持。

18赞

沙发:couch_and_lamp:

Mark!~

大佬牛啊!这个会一直更新吗?

mark~

会的。
下个版本支持加载手写代码自定义节点,方便处理一些代码量不多,但是拖拽节点比较多比较繁琐的使用场景;
后面会持续完善PBR物理材质金属度粗糙度等节点的支持;

:joy:操作单元看起来跟浣熊大佬的2.x的版本好像

这更直观,轻便实用,性价比高

mark马克马克

:ox::frog::ox::frog::ox::frog::ox::frog::ox::frog::ox::frog::ox::frog:

球体的拖动方向是不是反了,还有自定义加载模型支持什么格式呀


试了下,应该是你没有激活右下角那个背面剔除
加载模型支持 obj,glb,gltf

搜嘎,激活了就好了

又一个重量级插件 :+1:

mark,大佬牛逼

不知为啥,大佬你这个头像总是让我想到麒麟子,每次看到都是。。

拿明星当头像很合理吧 :grin:

这么像 nme https://nme.babylonjs.com/

有内味儿,赞!

哈哈,你不是第一个这么说的人。Effect Exporter 基于 babylon.js,现在已兼容100+节点, PBR 节点,场景后期特效还在持续支持中。另外,Effect Exporter 可以支持导入nme的工程,只要节点有适配到 CocosEffect.