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

为何没人顶一下!

牛牛牛牛牛牛牛牛

v1.0.2 新增

  • 自定义节点
  • 新增 ShaderToy 特效集成示例

新增示例需要 v1.0.2 才支持,应用商店 已审核通过,已购买的朋友注意更新

自定义节点

  • v1.0.2 开始,可以通过封装一些 GLSL 代码来创建自定义节点 CustomBlock。当有一些复杂的特效可能很难用现有的节点实现时,自定义节点将会非常有用且高效。

实现

  • 以一个 OreoMultiply.json 自定义乘法节点的实现来讲解。该节点功能与内置的 Multiply 乘法节点功能相同,这里只是演示如何自定义节点。

    {
        "name": "OreoMultiply",
        "comments": "自定义实现乘法节点",
        "document": "https://www.exporter.top/docs/#/zh-cn/block/custom",
        "target": "Fragment",
        "inParameters": [
            {
                "name": "left",
                "type": "Vector4"
            },
            {
                "name": "right",
                "type": "Vector4"
            }
        ],
        "outParameters": [
            {
                "name": "output",
                "type": "BasedOnInput",
                "typeFromInput": "left"
            }
        ],
        "inLinkedConnectionTypes" : [
            {
                "input1": "left",
                "input2": "right",
                "looseCoupling": false
            }
        ],
        "includes": [
            "//helperFunctions",
            "shaderToyDeclaration"
        ],
        "entryFunctionName": "multiply_vec4",
        "code": [
            "void multiply_vec4(vec left, vec right, out vec4 result) {",
            "   result = left * right;",
            "}"
        ]    
    }
    
    • name 自定义节点名称
    • comment 概述
    • document 细节说明文档,主要用来讲解节点的实现原理。
    • target 默认使用的着色器输出目标。
    • in/out parameters: 输入/输出插槽 插槽说明
    • inLinkedConnectionTypes 各输入插槽的类型是否强行关联。looseCoupling 表示是否弱耦合,值为 false 表示强行关联。
    • includes 加载自定义的公共文件。文件内可定义共用变量、共用方法等;
    • entryFunctionName 自定义节点导出的入口函数名称
    • code 自定义节点导出的 GLSL 代码

    1、由于自定义块允许任何类型的输入(FloatVector3 等),输出类型设置为 BasedOnInput 表示关联 typeFromInput 指定的输入插槽的类型。

    2、另外,我们希望左右输入的类型相同(一旦确定一个输入,另一个应该继承相同的类型),这就是为什么我们在文件中有一个 inLinkedConnectionTypes 属性。上述示例中,表示输入端的插槽 leftright 类型强行关联,当 left 插槽确定 为 Float 类型时,right 插槽也会立即确定为 Float 类型

    3、有时在我们创建 .json 文件时不知道这些输入类型,我们可以使用特殊语法 {TYPE_XXX} 在 GLSL 代码中引用它们,具体可参考插件自带示例,其中 XXX 是输入/输出插槽的名称;在运行时,这些语法将替换为正确的类型(float、vec2 等)。

    4、请注意,entryFunctionName 入口函数中可以使用includes 中引入的其它自定义函数及变量 。

    5、请注意,入口函数(在 entryFunctionName 属性中导出的那个函数)必须返回 void;输入参数的个数必须与 inParameters 数组定义的参数个数相同;输出参数必须放在最后,并且它必须以 out 参数接收结果返回(参见示例)。

导入

  • 自定义节点由 .json 文件描述,该文件集成在插件 oreo-shader-effect-exporter\editor\blocks 目录下。用户可手动修改并增加自己的自定义节点,修改后点击 刷新 按钮即可自动重新载入。

    image-20211208161249787

使用

  • 自定义节点与其他节点没有区别,因此只需将一个节点从节点列表中拖放到主区域即可

示例

  • 目前参考 ShaderToy 特效实现了部分示例,可在 在线示例 列表中一键加载,实现细节请参考插件内文件 oreo-shader-effect-exporter\editor\blocks。部分示例效果展示如下:

    火焰效果

    火焰效果

    水波纹荡漾效果

    水波纹荡漾效果

    万花筒效果

    万花筒效果2

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

    example-2021-12-07-213713

  • 视频演示
    Effect Exporter 自定义节点2D3D特效展示

3赞

带带弟弟吧!大佬!

带上小板凳子,过来听课吧!

2021.12.11 参考 ShaderToy 增加两个自定义节点

边缘检测特效

翻书带阴影特效(支持传入鼠标位置控制点)

导出运行效果如下

以上效果依旧可同时支持 2D/3D 模式。

2012.12.14 发布 v1.0.3 版本

以上所有示例依旧同时支持 2D 和 3D 对象

为配合官方 精品插件 推荐和官方 公众号宣传 ,以及有小伙伴说之前双十二打折活动没有留意到,因此本次更新也设置了优惠,再次感谢大家的支持。商店支持

精品插件推荐

官方公众号推荐

2D部分的功能支持已基本完善,之后会把主要精力放在3D高级功能支持上,
现在已经可以简单支持天空盒反射,简单支持 PBR 金属度 metallic 和粗糙度 roughness

附上天空盒反射效果

其实最好节点上能显示中间的渲染图,这样才好用,体现出与代码编辑的优势。能看到每个操作的影响

1赞

是的,这也是我一直在思考的问题,目前还在寻找解决方案。编辑器节点树本身基于 Dom 渲染,与 Canvas 相互独立,要在每个节点上都能显示中间渲染图的话,目前还没想到高效的解决方案

大佬,您开发的这个 Effect Exporter :rofl: :joy: :rofl:我可不可以理解为
supersuraccoon 大神开发的 Shader Editor 的简化版呢?
还是说您这个里面有一些特别的开发功能?最近看到您有在做活动,
有点心动,又有点拿不定主意,主要是目前已经在用 Shader Editor 了.

不好意思才回复,今天周五有点小忙
这个问题问得很好呢
浣熊大神开发的 Shader Editor,经过多个版本的迭代,现在功能已经很完善,是非常棒的 Shader 编辑器,向大佬看齐。
相比之,Effect Exporter 目前虽然才上线到第三个版本v1.0.3,但已经具备了完整的 2D/3D 特效构建流,并且已与 CocosCreator 深度集成,提供编辑菜单,使用方便。
Effect Exporter 支持光照法线/折射/反射/天空盒等环境贴图,支持PBR材质,也支持自定义节点扩展。之后看技术实现能否集成屏幕后期特效。 原本我只打算支持 3D 特效编辑,后来发现 3D 特效可以很方便地兼容 2D,所以后面合并了需求,只导出一份特效,用户通过勾选宏定义决定是使用 2D 还是3D。线上示例除了那些用到光照和模型的,很多示例都同时支持 2D/3D 。
之前有个特效节点预览的功能需求,这两周也爆肝解决了,目前还在自测完善,预计元旦前后可以发布 v.1.1.0 版本。不过,核心功能增加的同时,插件的价格也会有所提高。
昨晚看 Cocos 直播,Jare 大大居然也特别提到了 Effect Exporter ,让我有点小激动。Effect Exporter 现在支持到最新的 CocosCreator 3.4.0 版本。感谢大家的支持。

附节点预览图:

1赞

2021.12.27 v1.1.0 重磅新增

2赞

大佬牛逼!!!

震撼!!!

你这个插件真的是太牛逼了 简直就是cocos开发者的福音 可以节省很多的时候

问个问题,购买后,如果后期有版本更新,是支持已购买的无偿更新呢?还是要根据creator版本另行在购买另外一份?

无偿的 只要他是同一个商品

楼上正解.