为何没人顶一下!
牛牛牛牛牛牛牛牛
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、由于自定义块允许任何类型的输入(
Float
、Vector3
等),输出类型设置为BasedOnInput
表示关联typeFromInput
指定的输入插槽的类型。2、另外,我们希望左右输入的类型相同(一旦确定一个输入,另一个应该继承相同的类型),这就是为什么我们在文件中有一个 inLinkedConnectionTypes 属性。上述示例中,表示输入端的插槽
left
和right
类型强行关联,当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
目录下。用户可手动修改并增加自己的自定义节点,修改后点击刷新
按钮即可自动重新载入。
使用
- 自定义节点与其他节点没有区别,因此只需将一个节点从节点列表中拖放到主区域即可
示例
-
目前参考 ShaderToy 特效实现了部分示例,可在 在线示例 列表中一键加载,实现细节请参考插件内文件
oreo-shader-effect-exporter\editor\blocks
。部分示例效果展示如下:火焰效果
水波纹荡漾效果
万花筒效果
-
导出到 CocosCreator 中运行效果如下
带带弟弟吧!大佬!
带上小板凳子,过来听课吧!
2012.12.14 发布 v1.0.3 版本
-
自定义节点使用 ts 文件定义,支持类型提示;
-
增加
高频节点
组,提升用户体验; -
增加更多自定义特效
灯光漫游效果(2D节点3D效果)
细胞融合效果(metaball)
以上所有示例依旧同时支持 2D 和 3D 对象
为配合官方 精品插件 推荐和官方 公众号宣传 ,以及有小伙伴说之前双十二打折活动没有留意到,因此本次更新也设置了优惠,再次感谢大家的支持。商店支持
精品插件推荐
官方公众号推荐
其实最好节点上能显示中间的渲染图,这样才好用,体现出与代码编辑的优势。能看到每个操作的影响
是的,这也是我一直在思考的问题,目前还在寻找解决方案。编辑器节点树本身基于 Dom 渲染,与 Canvas 相互独立,要在每个节点上都能显示中间渲染图的话,目前还没想到高效的解决方案
大佬,您开发的这个 Effect Exporter 我可不可以理解为
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 版本。感谢大家的支持。
附节点预览图:
大佬牛逼!!!
震撼!!!
你这个插件真的是太牛逼了 简直就是cocos开发者的福音 可以节省很多的时候
问个问题,购买后,如果后期有版本更新,是支持已购买的无偿更新呢?还是要根据creator版本另行在购买另外一份?
无偿的 只要他是同一个商品
楼上正解.