Effect Exporter:一款 2D3D 特效编辑器插件,专为 Cocos Creator 深度定制
随着 Cocos Creator 3.x 版本的发布,Cocos Creator 的 3D 功能更加完善。开发者 Oreo大魔王 着手制作了一款支持 Shader 2D&3D 的特效编辑器插件,现已更新到 v1.0.2,支持 Cocos Creator 3.3。
我对 Effect3D 效果的实现一直很感兴趣,在 Cocos Creator 3.x 版本发布后,我萌生了一个大胆的想法:在 Cocos Creator 编辑器内集成 Effect3D 材质编辑器!于是,就有了 Effect Exporter。
Effect Exporter
这是一款为 Cocos Creator 深度定制的 Shader Effect 编辑器插件
支持 effect 2D/3D 特效
支持 3D 光照
支持纹理/法线/折射/反射贴图
支持从资源管理器右键一键编辑
material
、effect
文件,可实时保存到 effect 文件并生效预览支持重新编辑已导出的 effect 文件
支持
shift
+ 左键 框选生成Frame
组合节点重复使用已调通 100+ 节点,可满足大部分 effect 特效需求
已打通在线示例,可一键导入并重复编辑
主界面
点击顶部左侧菜单按钮,可以弹出编辑器菜单。编辑器当前支持一键导出 effect 并即时生效预览,并可重复编辑:
点击顶部右侧菜单按钮,打开 在线示例
面板,选择喜欢的示例,点击即可加载:
默认 Effect3D 模板
当第一次编辑某个 effect
文件时,会生成一份默认的节点树结构(如上图),其中包含两大部分:
一是 VertexOutput
控制的 顶点着色器
:
在顶点着色器中,主要实现了坐标空间的转换。具体原理可以参考 LearnOpengL 坐标系统[1]。
VertexOutput
根据节点树计算出一个 Vector4
裁剪空间坐标作为顶点着色器的结果输出,最终生成 effect 内顶点着色器部分的代码如下:
vec4 vert(void) {//WorldPosvec4 output1 = cc_matWorld * vec4(a_position, 1.0);//WorldPos * ViewProjectionTransformvec4 output0 = cc_matViewProj * output1;//VertexOutputvec4 target_VertPosition = output0;return target_VertPosition;}
以上需要了解 CocosEffect v3
常用 shader 内置 Uniform[2]。
二是 FragmentOutput
控制的 片元着色器
:
在默认模板中提供了一个 Color4 颜色输入变量,并直接作为片元着色器的结果输出,最终生成 effect 内片元着色器部分的代码如下:
vec4 frag(void) {//FragmentOutputvec4 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;
}
在 Cocos Creator 中演示效果如下:
注意:在 Cocos Creator 2D 对象(比如 Sprite 对象)下使用自定义材质时,宏 USE_2D_EFFECT
一定要勾选,使 effect 内相关定义生效,否则会报 CCLocal 相关错误:
同时支持 2D/3D 显示
一个特效可以同时支持 2D 或 3D 显示效果,可参考 在线示例
中的 扭曲特效(2D/3D)
。
编辑特效
新建 Cube
节点,新建 effect
、material
文件,为 material
指定 effect
后,右键选中刚才新建的 material 或 effect,可看到 编辑 Effect
相关菜单,点击即可打开 Effect Exporter
编辑器。简单修改下默认模板(这里只是简单调整了颜色),点击左上角菜单 导出(.effect)
即可导出到关联的 effect
文件并实时生效预览。
操作演示
注意:插件第一次编辑某个 effect
文件时,会生成一份默认(3D)的节点树结构。该行为与操作左上角菜单弹出面板下的 新建默认Effect3D项目
行为相同。
加载示例
Effect Exporter 提供了完整的在线示例,可以很方便地浏览效果并一健导入:
导入操作演示
示例导入后,点击左上角菜单 导出(.effect)
即可在 Cocos Creator 中看到效果:
导出操作演示
目前示例还在持续添加,部分示例展示:
溶解与定向消失
菲涅尔反射
光照贴图
另外,线上示例均可一键导出到 Cocos Creator 中,以下是部分示例运行效果:
自定义节点
v1.0.2 参考 ShaderToy 特效实现了部分示例,实现细节请参考插件 oreo-shader-effect-exporter\editor\blocks
文件实现。部分示例效果:
火焰效果
水波效果
万花筒效果
导出到 Cocos Creator 中运行效果如下:
资源地址
Effect Exporter 完整文档与在线体验
https://www.exporter.top/
点击【阅读原文】下载 Effect Exporter - Cocos Store
http://store.cocos.com/app/detail/3369
论坛讨论帖
https://forum.cocos.org/t/topic/125728
关于 Effect Exporter 编辑器的实现,我大量参考了 babylon.js、Shader Forge、webglstudio、react-diagrams、ez-shader-editor 等开源项目,感兴趣的小伙伴可以了解一下。更全面的技术实现过程和效果展示、以及插件的更新内容等等,我都会第一时间发布在论坛讨论帖,欢迎大家来论坛一起学习交流!
扩展链接
[1] LearnOpengL 坐标系统
https://learnopengl-cn.readthedocs.io/zh/latest/01%20Getting%20started/08%20Coordinate%20Systems/#_2
[2]常用 shader 内置 Uniform
https://docs.cocos.com/creator/3.3/manual/zh/material-system/builtin-shader-uniforms.html
>> 点击查看嘉宾及演讲主题
12月18日下午14:00,Cocos 开发者沙龙「厦门站」将在厦门香格里拉酒店举办。Cocos 引擎、亚马逊云科技、网易易盾、青瓷游戏、风领科技围绕引擎技术与生态、游戏开发与发行等内容,为各位开发者准备了一场干货盛宴。
报名来到现场的小伙伴,还将获得「Cocos 最新定制周边大礼包」,人手一份哦!扫描下方二维码免费报名吧↓
>> 开发者报名通道
往期精彩
Effect Exporter:一款 2D3D 特效编辑器插件,专为 Cocos Creator 深度定制相关推荐
- 炫酷插件_PS如何做炫酷动图?推荐5款黑科技PS插件(3D动态|分散粒子|烟雾特效..)帮你轻松实现...
动态的图片越来越受到人们的欢迎,但普通小白上手却不太简单,今天给大家分享几款黑科技PS插件,神秘浓雾气特效GIF动作插件,分散粒子插件动作,图片变故障特效psd图层样式,图片变3D动态--tikuwa ...
- 推荐几个实用Cocos Creator插件!看过的都说好
2021年过半,Cocos Store 上目前已超过 400+ 资源,出现了有不少实用而有趣的插件工具,推荐几个给大家把玩,希望本文能对大家的工作有所帮助或启发! 嘴型动画生成 是一款专用于 Coco ...
- vscode函数跳转插件_人生苦短,我们为 Cocos Creator 开发的插件和工具
在使用 Cocos Creator 开发项目的过程中,为了提高开发效率我们开发了很多扩展插件,本文介绍常用的几款,抛砖引玉,希望给大家带来帮助. 腾讯开心鼠英语 网页扩展:运行时查看场景节点树 Coc ...
- 初学者使用cocos creator制作第一个小游戏以及脚本编辑器的选择
这是一个官方文档的补充版,以官方文档的快速上手:制作第一个游戏为基础,整合了其他文档内容,同时添加一下自己学习文档的理解,不仅能复习一下自己学到的知识,也帮助新人学习开发更加简单,好了,话不多说,进入 ...
- 14款前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...
- 魔兽地图编辑器插件YDWE的使用与基本设置5 触发编辑器4 技能特效
魔兽地图编辑器插件YDWE的使用与基本设置5 触发编辑器4 技能特效 1.选择技能 2.调整技能属性 3.为英雄添加技能 4.创建新的触发器并更改条件.动作 5.新建类别.触发器 6.删除单元组 创建 ...
- 14款web前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...
- CameraBag Pro 2021.0 图片特效编辑器,一款优秀实用的照片滤镜工具
CameraBag Pro是一款优秀实用的照片滤镜工具,提供海量的图片特效编辑功能,支持96位模拟引擎,让用户轻松进行曝光.色调.对比度的调整,支持所有主要的RAW图像格式. 可调滤镜预设和模拟引擎C ...
- 110个常用的jquery特效和插件
为了方便网友们的学习jquery,在互联网中把网站常用到的特效和插件都收集起来打包,最后提供给大家下载,希望可以帮到网友们... 1.2款jQuery图片自动切换常用广告代码 2.jquery+cs ...
最新文章
- P2900-[USACO08MAR]Land AcquisitionG【斜率优化】
- [Swift]LeetCode39. 组合总和 | Combination Sum
- JQuery中的一些重要方法
- 基于jsp+mysql的JSP在线水果销售商城系统设计实现
- mui 组件:“div下拉导航”【scroll固定位置】- 案例篇
- psutil模块安装指南(win与linux)
- gof 设计模式 java_javaSE中的GOF设计模式
- 分布式事务之TCC事务
- Plugin For KanColleViewer – Provissy Tools V1.0
- android qq授权管理软件,android QQ第三方授权登录接入流程
- WorldPress 设置固定连接 Apache 服务器无法打开网页(100%解决这个问题)
- 四种形态图解_波浪理论:调整浪的四种形态(图解)
- 如何在微信直接下载APP(iOS/Android)的解决方案
- “船式”可以锻炼腹肌啊
- 使用shiro进行权限管理
- 学C++和嵌入式,未来发展好不好?
- 前任写的代码,真是辣鸡…
- 网站常用的五种布局方案
- 华为新款上市手机鸿蒙,华为新款手机2021款(华为P50发布上市时间)
- python数据分析常见错误_Python数据分析常用语句(一)
热门文章
- 网卡收包基础: 中断-轮询-ring buffer-DMA-NAPI
- Realsense D435I标定
- dnf服务器未响应怎么解决方法,win7系统dnf经常未响应怎么办|win7 dnf假死的解决方法...
- 面试一位3年的Java,面到我心态爆炸!
- 用官方文件申请JetBrain的学生版 收到邮件中的链接打不开解决方法
- python 字符串常用方法
- centos 7.0 安装
- android过热自动关机,android实现自动关机的具体方法
- 计算机的内部存储器为什么要分段,8086/8088系统中,存储器为什么要分段,一个段的最大和最小各为多少字节...
- 各大集团技术团队社区-微软-阿里-腾讯-百度-美团