中文
resource-icon
Effect Exporter v2.0.2
类别
Creator扩展 插件
作者
Oreo大魔王
Creator版本要求
v3.3.0
支持平台
HTML5
评分
售价
¥ 122.00 (个人)

介绍

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 光照

  • 支持纹理/法线/折射/反射贴图

  • 支持从资源管理器右键一键编辑 materialeffect 文件,可实时保存到effect文件并生效预览

  • 支持重新编辑已导出的 effect 文件

  • 支持 shift + 左键 框选生成 Frame 组合节点重复使用

  • 已调通 100+ 节点,可满足大部分 effect 特效需求

  • 已打通在线示例,可一键导入并重复编辑

v1.0.2 新增

v1.0.3 新增

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

v1.1.0 新增

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

详见文末图解

v2.0.0 新增

  • 集成在线社区网站

  • 集成一键上传、下载、发布功能

  • 集成示例分享功能

v2.0.1 更新

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

v2.0.2 更新

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

功能介绍

  • 界面一览

    image-20211124215406936

  • 左侧弹出菜单

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

image-20211124223017604

  • 右侧在线示例

    点击顶部右侧菜单 image-20211125215346203 ,打开 在线示例面板,选择喜欢的示例,点击即可加载:

    example-2021-11-25-211903

默认Effect3D模板

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

    image-20211130154324913

    其中包含两大部分:

    1. VertexOutput 控制的顶点着色器

    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

    1. 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

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

image-20211128224021143

在线示例

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

    注:

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

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

    • 操作视频:

    <video controls width=100% height=100%>

    </video>

加载示例

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

    目前示例还在持续添加

  • 部分示例展示:

    溶解与定向消失 溶解与定向消失

    菲涅尔反射 菲涅尔反射

    光照贴图

    example-2021-11-25-211903

汇总效果

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

preview-2021-11-29-211909

v1.0.2 新增

  • 自定义节点

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

    火焰效果

    火焰效果.gif

    水波纹荡漾效果

    水波纹荡漾效果.gif

    万花筒效果

    万花筒效果2.gif

  • 导出到 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

v2.0.0 新增

  • 集成在线社区网站以及一键上传、下载、发布分享功能 ee_20220427034217.png ee_20220427034453.png

关于

支持


用户评分

平均评分
(5)
共有 2 位用户参与评分

评论

小宇宙 2022-06-21 17:13

怎么注册不上

作者

已联系解决

kesyn 2022-05-12 11:58

订单号在哪里获取

作者

在商店 购买记录 里面。https://store-my.cocos.com/#/buyer/history

leokings1992 2021-12-14 17:23

can you support version english tool ?

作者

Yes.You can switch to the English version in the upper right corner.

Oreo大魔王 2021-12-01 11:56

Effect Exporter 交流群: 850208901

1647506059 2021-12-01 09:44

不会shader,好东西支持一波,不过大佬有没得啥交流群!

  • 1

2020 © Cocos.com版权所有

增值电信业务经营许可证:闽B2-20160169

闽ICP备14002653号-6

闽公网安备 35020302033941号