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

[2021.06.11]

编辑器 v2.0.1 正式上线。这次主要加入的功能是 Spine 动画的支持和新的特效组件的追加。购买的用户记得更新 :blush:

公众号文章链接

另外,我也开通了公众号,后面会时不时的发一些开发相关的技术文章,有兴趣的朋友可以关注一下


1赞

[2021.06.14]

3D 功能的简单支持,比想象中的要来的快,放假抽空研究了一下 Creator v3.1.1 然后,初步实现了两个功能点:

  1. 编辑器可以在 Creator v3.x 中,以 3d 的形式运行起来了,并且功能和在 Creator v2.x 中完全一致
  2. 编辑器制作的特效,可以导出基于 builtin-unlit 生成的 .effect 文件,并且直接在 v3.x 中使用。

ShaderEditor 3D Support on BiliBili


虽然目前对 3d 的支持还十分有限,但这对于 Shader 编辑器来说已经是一个不小的进步了,后续在进一步完善 2d 功能的同时,也会尝试再开发一些 3d 对应的功能,敬请期待。


PS: 之前的编辑器都部署在 giteepage 上,结果更新 page 一直卡着刷新,无法完成,导致编辑器在线无法使用 (插件版本不受影响),并且部分在线资源无法访问,目前还在修复中,实在抱歉(后面会考虑搬家换个地方,各位有合适的地方可以推荐)。

这么好的东西顶下。

厉害了大佬

666 mark

我可以安心的使用creator 3.0了

[2021.06.16]

v3.0.1 发布

新版本 3d 功能的加入,引入了一些 bug, 感谢用户的反馈,现在已经修复了一些问题:

  1. 部分文档图片失效修复
  2. 拖入 .json 文件导入项目功能失效修复
  3. shader 分部预览功能失效

[2021.06.20]

Shader 编辑器 已经发布,更新一段时间了,期间也收到不少用户的反馈,有一部分声音,是关于 如何使用编辑器 这一点的。

虽然编辑器内置了比较多的文档,但是大部分是基于功能点的,有不少对于 Shader 本身也不是很熟悉的朋友,还是难上手。

因此就有了今天开始,在公众号上连载的的一系列教程。

这一系列教程的特点:

  1. 结合 CreatorShader 编辑器,可视化的讲解 Shader
  2. 每次都针对极少功能点(技术点)
  3. 每次都很短(5分钟内结束)
  4. 不展开,不深入,点到为止,让读者知道: 有这回事儿 >>> 是这么做 >>> 大致是这个原理
  5. 尽可能降低理解成本(因此部分说明不一定准确,但一定可以帮助理解)

感兴趣的朋友,可以关注。

Lesson 0x01 - Rendering an Image / 渲染图片

1赞

[2021.06.21]

继续更新教程:

ShaderEditor 教程 0x02 - 纹理寻址
ShaderEditor 教程 0x03 - 纹理环绕模式

有兴趣的可以关注公众号:

[2021.06.22]

继续更新教程:

ShaderEditor 教程 0x04 - UV 基本套路

1赞

看着流口水

[2021.06.23]

教程继续:

ShaderEditor 教程 0x05 - 纹理遮罩

下面是这些年收集整理的一些关于 Shader / 图形学 的相关技术次条,想趁着这次教程的机会,结合编辑器,一起写点东西。

有关注公众号的可以去投个票,没有关注的,也可以在这里留个言,说说你比较感兴趣的词条。


Lesson 0xXX - FX in Game / 特效使用

Lesson 0xXX - UV Atlas / UV 图集

Lesson 0xXX - UV Animation / UV 动画

Lesson 0xXX - Skeleton Animation / 骨骼动画

Lesson 0xXX - RenderTexture / 渲染纹理

Lesson 0xXX - Interpolation / 线性插值

Lesson 0xXX - Custom Component / 自定义组件

Lesson 0xXX - Color Gradients / 色彩渐变

Lesson 0xXX - Particle / 粒子

Lesson 0xXX - Reaction diffusion / 反应扩散

Lesson 0xXX - Lights and Shadow / 光影

Lesson 0xXX - UV Vector / 向量 UV

Lesson 0xXX - Reflection / 反射

Lesson 0xXX - Fresnel Reflection / 菲涅尔反射

Lesson 0xXX - Lambert-Beer Law / 朗伯比尔定律

Lesson 0xXX - Refraction / 折射

Lesson 0xXX - Ray Marching / 光线步进

Lesson 0xXX - Distort / 扭曲

Lesson 0xXX - Pixelate / 像素化

Lesson 0xXX - Ripple / 水波

Lesson 0xXX - Water / 水

Lesson 0xXX - Fire / 火

Lesson 0xXX - Electric / 电

Lesson 0xXX - Snow / 雪

Lesson 0xXX - Rain / 雨

Lesson 0xXX - Fog / 雾

Lesson 0xXX - Smoke / 烟

Lesson 0xXX - Glass / 玻璃

Lesson 0xXX - Glow / 发光

Lesson 0xXX - Image operations / 图像处理

Lesson 0xXX - Mandelbrot / 曼德勃罗

Lesson 0xXX - MultiTexture / 多纹理贴图

Lesson 0xXX - Texture Blending / 纹理混合

Lesson 0xXX - Fractals / 分型

Lesson 0xXX - Palettes Swap / 调色板交换

Lesson 0xXX - Drawing / 绘图

Lesson 0xXX - Blur / 模糊

Lesson 0xXX - Edge Detection / 边缘检测

Lesson 0xXX - Deformation / 变形

Lesson 0xXX - Fluid / 流体

Lesson 0xXX - Cloth / 布料

Lesson 0xXX - UV Flow / UV 流动

Lesson 0xXX - Low Poly / 低多边形

Lesson 0xXX - LUT / 颜色表

Lesson 0xXX - Random / 随机

Lesson 0xXX - Shaping / 造型

Lesson 0xXX - Shapes / 形状

Lesson 0xXX - Noise / 噪声

Lesson 0xXX - Perlin Noise / 柏林噪声

Lesson 0xXX - Worley Noise / Worley 噪声

Lesson 0xXX - Cell Noise / 细胞噪声

Lesson 0xXX - Cellular Noise / 网格噪声

Lesson 0xXX - Voronoi / 泰森多边形

Lesson 0xXX - Simplex Noise / 单纯形噪声

Lesson 0xXX - Value Noise / 值噪声

Lesson 0xXX - Gradient Noise / 梯度噪声

Lesson 0xXX - Patterns / 图案

Lesson 0xXX - Procedural Textures / 程序纹理

Lesson 0xXX - Texture Variation / 纹理变化

Lesson 0xXX - Post-processing / 图像后处理

Lesson 0xXX - Plasma / 等离子体

Lesson 0xXX - SDF / 有向距离场

Lesson 0xXX - Fractal Brownian Motion / 分形布朗运动

Lesson 0xXX - Domain Warping / 域翘曲

Lesson 0xXX - 2D Normal Map / 2D 法线贴图

Lesson 0xXX - 2D UV Displacement Map / 2D UV 置换贴图

Lesson 0xXX - LOD / 细节层次效果


1赞

我全都想要,怎么办 :star_struck: :star_struck: :star_struck:

:rofl: :rofl: :rofl: :rofl: :rofl: :rofl:

[2021.06.24]

教程继续:

ShaderEditor 教程 0x06 - 特效使用

1赞

[2021.06.28]

ShaderEditor 教程 0x07 - 常量变量
ShaderEditor 教程 0x08 - 材质变体
ShaderEditor 教程 0x09 - 纹理打包
ShaderEditor 教程 0x0A - UV 合图

[2021.07.05]

最近忙了好几天因此教程和编辑器都没有太多的更新。

教程

下面是几篇新的教程内容:

ShaderEditor 教程 0x0B - 多纹理
ShaderEditor 教程 0x0C - 纹理组合
ShaderEditor 教程 0x0D - 自定义组件
ShaderEditor 教程计划整理

教程项目

最近也有朋友联系我,说对教程以及设计的项目很感兴趣,因此这里单独上架了商店,没有考虑购买编辑器而是只想配合目前为止以及今后的教程学习一下 Shader 的朋友也可以考虑支持一下。

ShaderEditor 教程 in Cocos Store

插件解决方案

除了教程,也有朋友提到了对 ShaderEditor 的实现方式感兴趣,因此特地抽空,将

Creator v2.x 编写的游戏,软件转换成 Creator 插件 (支持 v2.x / v3.x)

整理成了完整的方案,上架了商店,感兴趣的朋友同样可以支持一下,感谢 :test:

PluginAdaptor in Cocos Store


这几天更新上不去了呀

太强悍了,这就是技术大佬吗~

期待大佬新作 Blot