[2021新坑] SSRShaderFX && Creator

markyixia

2020-01-31

月底了,回归的比预想的要快。

继续半夜抽空,推进项目。


在此之前的工作内容,已经把编辑器的基本功能添加的差不多了,接下来自然是开始实际的做一些例子来进一步优化编辑器,同时也尽可能多的修复存在的 bug


但是,就在刚开始准备做一些略微复杂一点的例子时,发现作为一个编辑器,还缺少了非常重要的模块,那就是文件管理 系统。这里指的,是把已经编辑的特效场景,进行导出导入之类的操作,否则每次好不容易做好的东西,一个刷新, 就什么都没了,这可不行。

因此这两天做的内容的一大部分都和这个有关。

Shader Editor / Shader 编辑器

Account System / 账号系统

账号系统的存在,意味着接入了 Cloud ,用户就可以更方便的存储自己的项目文件,当然也可以方便的实现和他人的共享。这里借助了我常用的 BaaS Leancloud 服务。

  • [x] Offline Guest Mode / 游客离线模式
  • [x] Online Mode Sign In / 在线模式,注册
  • [x] Online Mode Sign Up / 在线模式,登录
    gif

Project File System / 项目文件系统

  • [x] Auto Save / 定时自动保存功能

  • [x] Project Rename / 场景项目重命名

  • [x] Export to File / 导出场景项目到文件

  • [x] Export to Cloud / 导出场景项目到云端

  • [x] Import from File / 导入场景项目到文件

  • [x] Import from Cloud / 从云端导入场景项目

  • [x] Project List + Snapshot / 场景列表 + 快照预览

  • [x] Drag to Import / 拖入项目文件导入

  • [x] Save to Cache / 保存到浏览器缓存

  • [x] Auto Restore Last / 自动恢复上一次编辑场景

有了这些功能,就可以愉快的尝试构建各种特效了,随时随地都可以导出导入,也方便 bug 的重现和修复。

在实际的特效构建尝试时,发现随着导入模块的增多,仅仅通过单一的输出来预览最后的实际效果是远远不够的。

最好的实现方式,应该是对场景中的每一个模块,都可以实时预览。比如场景中的一个 Step 或是一个 Add 模块,它所带来的对最终特效的改变,都应该能够实时的可以被看到。

此外,为了更好的能起到学习 Shader 的作用,所有基础基础的功能都应该能够被方便的查看。

这些就是这两天做的内容的另一大部分。

Extended Panel / 面板扩展

  • [x] Code View / 显示模块对应 Shader 源码
  • [x] Info View / 显示模块对应的描述信息,简介
  • [x] External Link / 点击后,跳转到模块对应的外部文档 (这里先借用下 Unity 的文档)
  • [x] Preview / 模块实时预览,点击后显示模块的实时预览功能
  • [x] Preview in Digraph / 模块实时预览,根据在有向图中的位置,前置模块的参数设置,实时刷新

有了上面这些功能的铺垫,就可正式的开始做点略微复杂的东西试试了。

Case / 实例

  • [x] Simple Dissolve / 简易消融特效
    非常常见的消融特效的一个最简单的是实现,使用非常基础的模块,达到非常好的效果,借助编辑器的帮助,可以对每个模块起到的实际作用以及参数的变化对结果所起到的影响,都能够非常直观的感受到
  • [x] Fire Generator / 火焰生成特效
    相对比较复杂的火焰生成特效,主要为了测试比较复杂的场景,编辑器是否还可以正常运行,现在看来表现还不错,就是布局比较乱,需要再优化下。

这几天在功能上推进了不少,不过代码还是不讲究的,都是以快速实现功能为目的进行的。
接下来还是需要把这西代码进行更加合理的设计,重构,否则虽然不是游戏,但是到了后期,同样会出现卡顿的现象,系统的扩展性也会变差。

3赞

太牛逼了!!!mark

功能更新的效率好高

大佬牛逼plus

说不出什么骚话只能给大佬无脑打6

踩点。。。。。。。。。。。

给大佬递上一杯卡布奇洛

2020-02-02

继续更新。

Context Menu Overload / 上下文菜单重载版

重新设计的上下文菜单

  • 更好的支持分类
  • 更好的支持相同面板的不同输入参数的选择

Export FX / 导出特效

前面已经基本实现了编辑完以后场景的导入导出功能。但是距离实际运用还差一步。
那就是将编辑后的场景,导出可以在 creator 中直接使用的 material + effect 组合,这样才能算是真正的实用化。

虽然实现起来不是很容易,但还是想办法搞出来了 >>>>>>

上面的例子,就是把前几天用编辑器做的简单的消融特效,一键导出 material + effect 文件。
然后在一个新建的项目中,直接使用。
因为生成的特效,完全是 cocos-style 的, 所以可以无需编写任何代码,直接使用,还可以方便的在编辑器中做 所见即所得 的预览。


核心的功能铺的差不多了,接下来要修一波 bug 了,毕竟功能复杂,bug 也少不了 :3:

9赞

mark!

真心大佬啊

mark!!!

mark!

膜拜大佬~

大佬牛皮普拉斯

留名膜拜一下大佬

大佬我干了,你随意。

2020-02-08

继续更新。

越往后,功能越多,新加或是修改任何的小功能,都要花上更长的时间测试,当然主要的原因,还是项目的代码架构设计不够好。

这次做的功能非常重要,将 Constant Uniform 面板作为单一组件独立出来,从而更好的优化最终生成的 Shader 脚本,也让使用者可以更好的控制所有的 Uniform参数。

除此之外,Uniform 数值的调节需要用到 Slider ,因此模仿 cocos 做了个简易的加强版 slider

SliderEx / 加强版滚条

  • 支持 InPlace Edit 在位编辑
  • 左右滑动 Major Step` 大幅度调节数值
  • 上下滑动 Minor Step 小幅度调节数值

Uniform Panel Create / 面板创建

目前支持类型 float vec2 vec3 vec4

Uniform Panel Naming / 面板命名

Uniform 通常都是用来控制 Shader 的某些属性,是有意义的,因此可以随意的命名。

Uniform Panel Clone / 面板克隆

快速克隆一个已经存在的 Uniform 类型面板,比如克隆一个叫 SpeedUniform

Uniform Panel Sync / 面板同步

虽然同一个 Uniform 面板比如 Speed 只创建一个也可以,但是有时项目复杂,需要在场景中有多个同一 Uniform 的克隆体。当然也就需要保证这些 Uniform 面板的数值都是同步的。

Uniform Panel Focus / 面板聚焦

接着上面,既然一个 Uniform 在场景中可能有多个克隆体,那么就需要快速定位聚焦到它们。

Uniform Panel Resize / 面板调整大小

面板中的 Uniform 信息可以缩放,展开显示。

Uniform Generator / Uniform 生成器

上面提到的这些就是用来创建 Uniform 的生成器,下面是个完整一点的测试用例。

Constant Generator / 常量生成器

相对于 Uniform ,如果不需要在最终生成 Shader 中导出变量对外可见,那么就可以用简单的常量来代替。


除了上面这些,还做个简单的导出场景快照的功能,方便分享自己制作的特效。

Project SnapShot / 项目快照


最后,今天 CocosCreator 3D 正式版发布了,这里也蹭一波热度,试了下把之前用编辑器做的简单的消融效果,直接导出为 Creator 3D 风格的 .mtl / .effect ,然后在 Creator 编辑器中使用,基本效果还可以。

4赞

2020-02-11

除夕夜,继续更新。

继续常用 uniform 功能的补足。最后两个是 colortexture。当然后者更为麻烦,但是多纹理的支持是必然需要的。

Uniform Color

Uniform Texture Create / 创建多纹理

Uniform Texture Update / 更新多纹理

Uniform Texture Preview / 多纹理预览

Uniform Texture Blend Test / 多纹理混合测试

接着是 Group 的导入导出,恢复功能的实现,这样复杂的特效场景图,也可以有序的管理了。

Group Naming / 组命名

Group Save - Restore / 组保存,恢复


希望牛年,项目可以继续推进 :ox: :water_buffalo: :cow2: :ox: :water_buffalo: :cow2: :ox: :water_buffalo: :cow2:

7赞

2020-02-17

过年几天,每天都待在家,帮忙坐月子,跟着月嫂学带娃,每天忙里偷闲做一点更新。

Progress / 进度

  • 修复大量显而易见的 bug
  • 优化一些体验
  • 使用编辑器实际制作了一些简单的特效

Doc / 文档

除了修复 bug 以外,我也开始整理了 SSRShaderFX 的文档,把想要做的东西和已经做的东西都尝试记录下来。

但是由于内容比较多,所以文档框架已经搭建好,内容还在缓慢更新。
地址在这里: Doc for SSRShaderFX

Preview / 预览版

这几天,自己也用编辑器试着做了一些特效。

模糊特效

溶解特效

故障特效

UV 滚动特效

Blend 测试

#### 火焰特效

这些特效有简单的有复杂的,主要是为了测试一些基础功能而做。

基础功能现在已经差不多,所以在这里发布一个简易的预览版:

  • 去掉了很多不稳定的复杂功能,只保留了最基础的功能
  • 提供了最大量基础组件和几个复杂组件
  • 项目可以导出为 json
  • 上面列出的例子,可以这里下载 ssr_shaderfx_editor_sample.zip (20.8 KB) ,然后将 json 文件直接拖入场景即可

编辑器具体使用方法,暂时还来不及写,虽然文档已经部署好了。只能简单的说 右击,然后随便添加点啥,再连连看就是了(有的操作方式可以看帖子里之前发过的 gif )。

目前编辑器自然还有很多 bug ,不过还是可以玩玩的。有 bug 欢迎反馈,如果做出了不错的特效,也欢迎来分享个。

试玩版地址: SSRShaderFXEditor Preview


后面要开始一段时间每天通宵带娃了,下次更新,也许又要等好久了 ~~~

7赞