[SSRShaderFXEditor] Shader 可视化编辑器正式上线

v1.0.2 发布,下面是这次版本更新的一些内容:

[2021.05.11]

[Fix]

  1. uniform 重命名无法输入数字
    uniform 重命名时目前不能有数字,如 pos1, name2
    修改为:
    数字被正则过滤,现已修复。但是注意下划线被编辑器作为特殊用途,所以不能在 uniform 上使用。

  2. extension GL_OES_standard_derivatives : enable 报错
    部分使用 GL_OES_standard_derivatives 的特效导出 .effect 使用时会报错,现已修复

[Feature]

  1. 新增 UTime0 变量

    新增内置变量 UTime0 对应 cc_time[0] ,用于简化特效制作。

  2. 新增 Logic / 逻辑运算 基础组件

    增加逻辑运算基础组件,方便制作出更多的特效。

    • All
    • And
    • Any
    • Branch
    • Equal
    • Greater
    • GreaterEqual
    • Less
    • LessEqual
    • Not
    • NotAnd
    • NotEqual
    • Or
  3. 新增 Discard 组件

    增加特殊组件 Discard ,方便制作类似遮罩的效果。

[Refine]

  1. Gallery 新增特效
  • 2DDropShadow
  • BlackWhite
  • CircularFade
  • CircularFog
  • ColorSketch
  • Cyberpunk
  • DistortionDream
  • Frosted
  • LateralChromaticAberration
  • Melting
  • NightVision
  • PoisonGreen
  • SandStyle
  • SDFOutlineBloom
  • SnowCover
  • UVSway
  • UVWave
  • WaterTurbulence
  1. Context Menu 加入中文说明

    带中文的组件菜单,更加直观的选择需要的组件

  2. 自动类型匹配

    当输入类型维度小于目标维度,时进行自动补足匹配,用户简化特效制作,可以省去很多 SplitnTon 操作:

    如: float:x 类型连接到 vec3 槽点时,自动转换为 vec3(x)
    如: vec2:uv 类型连接到 vec3 槽点时,自动转换为 vec3(uv.x, uv.y, 1.0)
    如: vec2:uv 类型连接到 vec4 槽点时,自动转换为 vec4(uv.x, uv.y, 1.0, 1.0)

  3. 图片拖放增加 .jpg 支持

  4. float 动态精度支持

    目前小数固定3位,一来不够用,二来固定位数做法不合理。修改为:
    float 类型默认至少以为小数,如 1.0
    小数位数最多 5位,根据用户输入动态变化:

    • 上下移动微调的是最后一位小数的值
    • 左右移动调整的是整数位的值

下一个版本最主要的功能,会是自定义组件的功能,目前还在努力开发中。

[Experimental]

Custom Component Builder

非常重要的功能,也是很难搞的功能,目前还在试验阶段。

简单来说是与必须用户自定义制作编辑中的组件。

以一种类似于 shadertoy 的方式,通过编写代码,自动识别生成组件。

同时又不同于 shadertoy,可以实时的对效果用编辑器中的控件进行参数的控制。

用户还可以实时的查看到 shader 的报错位置:

Demo

一个初期的演示例子,比如在 shadertoy 上有看上的特效:

那么直接扒下来,修改一些内置变量,改为 creator 风格的写法,立刻可以看到效果

还可以实时的修改 shader 编译,查看效果:


每次更新有重要新增功能点时,插件的价格会有所调整。

不过已经购买过的朋友,可以免费获取今后所有的更新,算是早买早享受 :sunglasses: ,请各位已经支持的朋友记得更新。


1赞

很好,收藏一下:+1:

今天继续, 第19个 特效,使用新版本中的逻辑运算组件,做了个比较有趣的 Ascii Art 特效 :

___

66666,给大佬递茶

今天继续, 第20个 特效, NeonEdge 边缘检测再加上一点颜色:


今天继续, 第21个 特效, 最近忙于新功能的开发,上简单一点的特效,带阈值控制的黑白效果,配合 tween 可以使先有趣的渐变效果 :


[2021.05.29]

v2.0.0 发布

[Fix]

  1. extension GL_OES_standard_derivatives : enable 导致导出的特效在手机上无效

  2. Project 面板上的 uniform 变量名有时存在同步出错的问题

[Refine]

  1. 进一步自动类型匹配

    允许 sampler2D 输出类型与 vec4 类型直接相连

[Feature]

  1. 新增 特效组件 功能 (下载,删除,克隆)

    在线文档: FX Component

  2. 新增 用户自定义组件 功能 (上传,下载,删除,克隆,发布)

    在线文档: Custom Component

  3. 新增 组件编辑器 功能,支持组件的可视化编辑,实时预览调试

    在线文档: Component Builder

    在线文档: Missing Component

  4. 新增 缺失组件找回 功能

  5. 新增 特效组件 60+ 列表:

    AsciiArt / 字符画

    AverageBlur / 均值模糊

    BarrelBlur / 桶状模糊

    BlackHole / 黑洞扭曲

    BlackWhite8Bit / 黑白像素风

    BlackWhiteComics / 黑白漫画风

    BlackWhiteFire / 黑白火焰

    BlackWhitePencil / 黑白铅笔画

    BluePrint / 蓝图风格

    BurnOut / 燃烧殆尽

    CelShading / 卡通渲染

    CircularFadeMask / 圆形渐隐遮罩

    CircularFog / 圆形迷雾

    ColorBurn / 色彩燃烧

    ColorSketch / 彩色素描

    Crosshatch / 交叉排线

    CyberpunkStyle / 赛博朋克风

    DirectionalBlur / 定向模糊

    EdgeDilate / 边缘膨胀

    EdgeErode / 边缘侵蚀

    Emboss / 浮雕特效

    FrozenBlue / 冰冻蓝风格

    GameBoy8Bit / GameBoy像素

    GaussianBlur / 高斯模糊

    GoldenStyle / 黄金风格

    GradientsDesert / 梯度沙漠色彩风

    Halftone / 半色调

    HeatDistort / 热扭曲

    HexagonClipping / 蜂巢剪裁

    HexagonPixel / 蜂巢像素

    IcedStyle / 冰冻风格

    IceFrosted / 冰霜

    LateralChromaticAberration / 横向色差

    LiquidDistort / 液体扭曲

    MangaFocusLines / 漫画集中线

    Mosaic / 马赛克

    NeonEdge / 霓虹描边

    NightVision / 夜视特效

    NormalLight / 法线光照

    ObliqueLine / 斜线特效

    OutlineColor / 描边着色

    PencilSketch / 铅笔素描风

    PoisonGreen / 中毒风格

    PolkaDots / 圆点花纹

    RadialBlur / 径向模糊

    RectangleClipping / 矩形剪裁

    SandStyle / 沙化风格

    Scanlines / 扫描线

    SectorWrap / 扇形环绕

    SimpleDissolve / 简易消融

    SnowCover / 积雪

    StoneStyle / 石化

    SurroundDistort / 环绕扭曲

    Sway / 摇曳

    Teleportation / 瞬间转移

    ThermalVisual / 热成像

    TVFlicker / 电视故障

    UserCustomNode / 用户自定义组件

    WaterTurbulence / 水面扰动

    WindBlowing / 风吹扭曲

    WoodStyle / 木纹风格

    所有特效的演示视频: ShaderEditor FX List v2.0.0 on BiliBili

    此外,补上一个编辑器内所有内置组件的演示视频: ShaderEditor Core List on BiliBili


最想要的大功能终于基本做完了,由于功能繁多,所以估计又增加了很多的 bug :rofl:

不过有了自定义组件以后,应该会大大提高发布新特效的效率。

这次本想先做个 10 个特效尝试下,结果一口气做了 60 个 (不过这些还只是这些年存货的 1/4 左右 :test:),然后边做边修了不少问题,现在基本已经可以做出各种各样的特效组件了。


这个大功能后,会修一波 bug 然后把群里用户提出的一些体验优化做一下。

下一个大版本功能会在编辑器中加入帧动画,骨骼动画的实时预览功能,另外还会抽空研究一下,是不是有可能做一个导出特效格式兼容 v3.x 版本的功能(虽然这个可能有点难度 ,我要先去找 3d 大佬拜师一下)。


购买过的用户记得免费更新,还是那句话,下个版本会变得更好。

2赞

沙发沙发,走过路过不要错过,这个插件是真的牛x
即使只是用特效库里的shader也是超值的
cocos最强大的插件没有之一

cocos最强大的插件没有之一

刚问完,大佬就发新版本了,想问下,视频里那些特效全是免费的吗?后续还会有不?

可以做透明渐变的mask吗

当然可以,现在的,有三种方式:

  1. 用编辑器的内置基础组件,自己拉线连一个就可以,当然需要你有定的 shader 基础

  1. 在新版本中的特效组件库中查找,有没有你想要的效果

  1. 如果特效库里没有,那么你可以用新版本的自定义组件功能,去网上找一下现成的代码,然后自己把它转换成组件,就可以直接使用了

视频里的特效全部都是免费的,随意使用,也可以修改。

后续还会有很多的特效更新,因为现在有了自定义组件功能,新组件的制作还是非常快的。

PS: 我现在做习惯了, 基本上10分钟左右,就可以把一个 shadertoy 的特效,简化,优化,并且适配成更适合 creator 和 编辑器使用的特效 :14:

shadertoy上带ImageBuffer的shader能转化过来吗?

shadertoy 上的 imagebuffer 功能,我看了下,貌似是多个 mainImage 然后像是 multi-pass 一样,一次把输出传递下去渲染,是这种感觉吧。比如这种经典的:https://www.shadertoy.com/view/XstGWB

是的。还能作为状态数据进行迭代。

我记得 creator v2.x 是不支持 multipass 的吧,或者说,能在 effect 里写多个 pass,但是并不会一次去执行起效。那估计只能用 fbo 来过传递数据了…

这个是真的流弊利特

哇,这文档太牛逼了。

[2021.06.02]

新版本功能和 bug 修复还在继续推进,这里先预告下这个月后续两次特效的内容更新 (DLC)

基本已经制作完成但是细节还需要调整,确保所有组件能更加方便的使用。

所有的特效自然还是免费的,届时用户可以在 在线组件库 中下载到。

ShaderEditor FX List Update1 on BiliBili

BreakingGlass
BreakingGlassSample

CellMosaic
CellMosaicSample

CeramicMosaic
CeramicMosaicSample

GlassLight
GlassLightSample

ImageBleachBypass
ImageBleachBypassSample

ImageBloom
ImageBloomSample

ImageBokeh
ImageBokehSample

InnerGlow
InnerGlowSample

OuterGlow
OuterGlowSample

VHSFlicker
VHSFlickerSample

ShaderEditor FX List Update2 on BiliBili

ImageBrightness
ImageBrightnessSample

ImageDarkness
ImageDarknessSample

ImageSepia
ImageSepiaSample

ImageSharpen
ImageSharpenSample

LegoPixelate
LegoPixelateSample

OilPaint
OilPaintSample

RainDrop
RainDropSample

Sunshine
SunshineSample

WaterCaustics
WaterCausticsSample

WaterReflectionFlow
WaterReflectionFlowSample


已经购买的用户,如果有什么比较想要的特效,可以提出来,最好是有视频之类的,我会想办法尽量满足 :14: