起源
项目最早的起源，应该是 2016 左右，当初还是 cocos2d-js v3.9 的时候，只是试着把当时学习 cocos2d-js 中和 OpenGL Shader 一些相关的技术时做的东西整理成 Demo，做了一个 CocosShader 的项目。
项目主要包含了 Blend / Shader / Grid Effect Shader Object，虽然那时候只能算是对效果的整理和简单的封装，不过这也算是后来项目的一个原点。
升级
2018 年，距离上一次项目大概两年
期间， cocos2d-x 发展到了 v3.16 ，那时候正好有些空闲时间，于是又开始挑战学习 OpenGL Shader，说实话这个东西对我来说，就是反复学，反复忘，然后再一次轮回的过程。
当然过了两年，比起之前做到的程度，这次可以说是有了质的飞跃。
项目刚开始，目标还比较简单，只是想要写一个不错的 类，可以方便的继承，并且支持很多的特效。
最初的项目名称也定为了 SSRShaderFXAPI。
SSRShaderFXAPI
SSRShaderFXAPI 成功的做到了自己当初计划的程度，而且还加入了很多计划外的功能:
-
支持
cocos2d-x中大部分渲染节点-
cc.Sprite (单图)
-
cc.Sprite (合图)
-
ccs.Armature (
CocoStudio动画) -
sp.SkeletonAnimation (
Spine动画) -
cc.LabelTTF (系统字体)
-
cc.LabelTTF (自定义字体)
-
cc.LabelBMFont
-
cc.LabelAtlas
-
-
特效的添加和移除
applyFX / removeFX -
特效的烘焙和恢复
bakeFX / unbakeFX
-
特效图片的导出
.png
-
GLProgramState的共享和独立share / seperate
-
统一的支持
Clipping效果
-
继承引擎的，
ShaderFXAction，可以和引擎的cc.Action系统完美融合使用
-
骨骼动画特有的，指定骨骼特效
做到这里，可以算是一个令人满意的完成度了。但是当时因为某些巧合，发现在 cocos2d-objc 中的 CCEffect 里，提供了一个可以自由将特效组合的实现概念 CCEffectStack。
CCEffectStack allows multiple effects to be stacked together to form interesting
visual combinations. Effect stacks are immutable in the sense that the effects they
contain cannot be changed once the stack is created. However, the parameters of the
contained effects can be changed.
发现了这个以后，我立刻进行了尝试，同时也对项目做了大幅度的重构，做出了:
-
ShaderFXWrapper(实验版) 将多个特效融合，包装成一个特效。使不同的特效可以被组合使用。
其实这个功能也是后面编辑器实现的一个原点。
SSRShaderFXGallery
随着 类 的功能完善，自然就需要试着来使用，看看能不能 Hold 住各种各样的特效了。
由于当时的 cocos2d-x 并没有可视化编辑器，每次都需要修改后在浏览器中观看效果很是麻烦，于是就写了这个整合各种模块功能的项目。一来可以方便的展示所有效果，二来可以测试各种接口，功能的正确性。
期间学习了自己写了不少 shader 也参考移植了很多网上的 shader，学到了不少东西。
SSRShaderFXEditor
在做 SSRShaderFXGallery 的期间，不仅看到了很多的 Shader 特效，还接触到了很多有趣的东西，有的是很早就知道的，有的则是新接触到的 (有兴趣的可以戳了看，都是好东西):
- glslEditor
- Shader Toy
- Shader Maker
- Shader Frog
- Shader Forge
- Vertex Shader Art
- Graph Toy
- Context Free Art
- Chaotica Fractals
- Fragment Arium
- Synthclipse
- iquilezles
- thndl
- Shadershop
由于我没有接触过 3D 游戏开发，也没有用过 Unity3D 这类游戏引擎，因此可以说见识还是比较少，在做这个项目的期间，看过上面你这些相关的技术后发现，我最终追求的，应该是做出一个 SSRShaderFXEditor。
那个时候 Creator 也已经起步了一段时间，我也有所接触，其中最不同于之前 cocos2d-x 的一点，就是 基于组件 的开发理念。
我觉得这个理念在 ShaderEditor 中可以得到非常好的体现。
虽然我已经把很多特效都规范化，分类，整理，但是也仅仅是到此为止了，这些特效已经被打包定型：一个灰度的特效，就是灰度的特效了，虽然我也做了 Wrapper ，但是那也只是简单的将特效进行叠加。
这里更加好的实现方式，应该是提供更加细粒的组件，然后像搭积木一样，组装出各种想要的特效。
而编辑器的作用，就是提供这样一个可视化的，搭积木的平台。
当然这个工作量和难度都是相当大的，主要有两个方面。一个是 SSRShaderFXAPI 本身，需要再次做大幅度的重构，来支持新的，基于组件化的结构。另一个，则是编辑器的开发，毕竟这不同于游戏的开发，侧重点和开发流程都是不太相同的。
虽然也考虑过用一些主流的前端技术来做编辑器的部分，但是考虑到毕竟最终的产物是要应用在 cocos2d-x 引擎中的，用引擎本身开发的编辑器，才是最无侵入的，完美的选择。
由于自己是软件工程出生，之前也用 cocos2d-x 做过不少类似编辑器的东西，在这方面也有一定的积累，虽然过程还是很曲折的，不过编辑器也做了一个非常不错的，有兴趣可以看帖子，虽然好像大部分图片视频链接都挂了，可以看这里。
中断
由于是业余时间陆陆续续的做，项目进展不快，虽然很多计划的功能都被做了出来，而且还临时增加了很多有趣的功能。
不过可惜的是，项目还是没能走到最后，一方面是时间的问题，不过主要的另一方面原因，是 cocos2d-x 慢慢的被新时代的 creator 所替代，新的用户基本都会选择后者，而前者的开发人员，在启动新项目时，也慢慢地都开始向着后者靠拢。
当初也想过干脆用 creator 重写的想法，但是那时候的 creator 还处于相对初期的阶段，很多功能模块都还不完善，编辑器也还不稳定 ；再加上自己的工作内容主要也还是使用 cocos2d-x 进行开发，因此就放弃了这个想法。
重启
又过了两年，说实话，并没有想到有一天还会去重启这个项目。
这么做，一方面是因为最近在用 creator 做各种不一样的东西，不一样的尝试，对引擎也有了更深的了解；另一方面，从论坛相关帖子也可以看出，不同版本的 creator 对 shader 的实现，使用方式都一直在大调，小调，微调。但是到 creator v2.4.x 已经可以确定是发展到了一个稳定的版本，毕竟谁都不希望花大力气做出来的东西，因为引擎的升级而彻底的无法使用。
不可否认 Shader 是难学的，但是是效果是酷炫的，只要使用得当，对于提升游戏品质，是绝对有帮助的。
从论坛出中分享的很多 shader 资源，小到简单的 glsl 片段 ，effect/material 文件，再到比较完整的 demo，再到封装好的组件，或是功能比较完整的框架，当然还少不了各种教程。可以看到大家对于 shader 相关的内容还是很喜欢的。
目标
有人可能会觉得，论坛既然已经有了各式各样关于 shader 的技术分享了，那还有必要再做一个相同领域的东西吗。
在我看来，做这个事情，还是有意义的，从头去写一套功能尽可能完整的组件或者说是小型的框架，对于深入学习 shader 的是绝对有帮助的。另外，每个人对于做一个 shader相关组件或是说小型框架 这样的题目，每个人有不同的理解和不同的解法。
我的理解和解法的根源，就和当年刚开始这个项目是一样，但是配合如今新的引擎，一些实现和细节都会变得不同。
又过了两年，由于有了前面的经验积累，这次想要做的东西，目标是更加的明确的。
下面这些，是我想要做到的，努力的目标，当然想全部完成可能是一件非常难的事情。
易用性
这个很好理解 ，就是用着方便，简单明了， shader 难学难写，那做好的组件当然得好用。使用 ShaderFX 组件，和大部分的组件一样，只要在想要使用特效的对象上，添加想要的特效组件即可，没有什么额外需要的操作。
纯净性
有些功能，通过魔改引擎可以很轻松地做到，但是我并不是很喜欢，我更喜欢选择挖掘引擎已经提供的功能，合理地组合使用，再配合一些 js 语言的特性，来实现自己想要达到的功能。 做到无需对引擎做任何的修改，开箱即用。
泛用性
第一个含义，框架应该能尽可能多的被应用于各种平台 (platfroms)，至少应该支持网页，原生 iOS android ，微信小游戏平台。
第二个含义，是作用对象层面。对 creator 中所有的渲染组件 (cc.RenderCompnent)，都适用。无论合图与否，无论静态动态，无论帧动画，骨骼动画。单一对象，组合对象。
而且做到这一点的同时，也要尽可能的满足易用性的要求，在对象上添加特效以后，通过简单的属性控制，就可以实现泛用性的支持。
丰富性
第一个含义，是内容上的，特效丰富，这个很好理解。
第二个含义，是指支持应用场景的丰富，对应上面的泛用性，提供各种属性，接口，开关。除了特效拥有的公共属性，每个特效都提供了特有的可配置属性，来实现更细节的特效调整。
一致性
功能多支持，广当然是好事，但是通过论坛也能看出，很多效果虽然酷炫，但是在不同的设备，运行环境下，可能会出现实际效果不一致的情况。因此，一致性也是一个非常重要的标准。
做到所有的特效，在各种使用场景下，都能有着一致的表现，才是成功的标准。当然这就需要框架的帮助和带来的规范。
统一性
关于 shader 的产出，从无到有，自己去写编写一个出来的情况其实相对很少，毕竟这个要求实在是非常高的。
更多的情况，是参考，学习网络上一些大神分享的效果，加以理解和修改，优化，最终产出可以在 creator 中使用的特效。
然而网络的特效写法千奇百怪，风格迥异，还有不少是类似 shadertoy 上的特效，很酷炫，但是懂得都懂，这些特效直接拿到 creator 中的来使用，是几乎不可能得。而统一性就是为了解决这个问题存在的。
由于特效是存在于一个框架之内，那么必然 shader 的编码会被做出统一的规范，这也方便了框架对其做出统一的控制。
分类性
上面提到过，特效有很多，功能各异，这里的分类，指的是将这些特效，按照类型，或是标签， 进行分类处理。一来方便使用。二来对特效的统一管理，也有很大的帮助。
扩展性
框架不仅仅可以管好自己内部的所有特效，还应该尽量做到可以方便的让使用者扩展，将外部的特效，方便的集成进来，融入框架 ，从而享受到框架带来的所有特性。
规范性
所有特效编写，完全遵循 creator 的规范编写，从而尽最大可能的，使特效可以被重用再各个不同版本的引擎之间。
独特性
前面也提到了，既然论坛已经有了不少类似的东西，那么要再做一个，肯定得有些独特的地方。
当然，能做到上面提到的这些点，已经就算很独特了。
但是这还不够。既然要做，就想做到更好。
首先是加入多特效融合的支持，就像是以前的 Wrapper 那样。
其次就是最想做的，编辑器。这个上面也提过，在几年前用 cocos2dx 尝试实现，也做到了一定的程度。但是由于一些技术方面的原因，一直没能在 creator 中华找到比较好的实现方案。不过这个问题在最近的再次挑战下，找到了还算不错的解决方案。
持续性
另一个想要做这样一个小框架的原因，是希望能有一个这样自己创造的类似 shader playground 的环境，可以把自己时不时发现的，或是学习编写的特效，快捷地以一种可被使用的形态发布出来。此外，一些和 Shader 有关的有趣功能，也都希望可以慢慢的加入到这个项目里。
因为只要按照框架标准编写，那么产物就自然的具有框架中的所有特性，不再只是一个独立的 glsl 脚本，只能简单运行运行，但无法满足实战使用。
共享性
自己持续产出内容这只是一个很小的方面，能够带动使用者，方便他人共享产出，才是最重要的地方。
这一点，是依托于编辑器的，编辑存在的意义，一方面是可以让新手用一种非常可视化的方式去学习，了解一些特效的实现方式和原理。
另一方面，有了编辑器，那自然就意味着开发者可以将自己通过编辑器制作的产物就进行共享，无论是多简单无聊的特效，还是吊炸天的特效，只要开发者愿意，都可以自由地共享。
就像以前我尝试过的，借助 LeanCloud 这类 BaaS 的帮助，可以很快的搭建一个云端共享产物的平台，对编辑器的产出进行方便的上传，下载和共享。
日志
2021-01-04
目前的进度已经基本完成了核心框架的编写，完成了 Gallery 的基本制作，所有框架接口都已经以可视化的方式集成到 Gallery 中，这样就可以方便的对添加的特效进行测试。
下面是目前一些已经被攻克的技术点，有的相对简单，有的则比较困难，在这里简单记录一下 (gif 品质，帧率都较低)。
有的技术点已经被封装，优化，实际的运用到项目中，有的则还是待命状态。
-
各种
cc.RenderComponent的统一支持
- 字体 类（ 包含
Cache Mode:None / Bitmap / Char）- AtlasFont
- BMFont
- TTFFont
- SystemFont
- UI 类
- Button
- CheckBox
- EditBox
- PageView
- ProgressBar
- ScrollView
- Slider
- Toggle
- 静态类（ 包含
Type:Simple / Sliced / Tiled / Filled / MeshSize Mode: Custom / Trimmed / Raw）- Sprite
- SpriteAtlas
- 动画类
- DragonBones
- Spine
- SpriteAnime
- Particle
- 其他类
- Graphics
- Mask
- MotionStreak
- TiledMap
- 字体 类（ 包含
-
各种特效的混合使用，随意添加删除，
mixer
-
tween配合color使用实现缓动
-
网页端
base64图片转cc.SpriteFrame -
网页端
drag and drop文件更换纹理
-
正则解析
glsl脚本 -
glsl脚本语法高亮显示 -
实时查看
shader脚本
-
定制组件编辑器面板，加入
markdown，方便给用户提供更多的信息
-
实时
FBO Shader合图UV的处理
-
级联
Shader，适用于复合型节点使用特效
-
cocos2dx作为creator插件端框架解决方案，虽然最后是否采用这种方案，还没有决定 -
hlsl转glsl -
glsl node，用于非渲染节点绘制shader图形用shader都特殊处理过，支持透明背景支持
cc.Node的所有形变属性支持框架中的所有特性
-
Gallery中，各种uniform类型的支持 (int / float / sample2D / Colorslider / editBox)
-
动态生成
material -
shadefx-toy实时修改shader并即时生效，取这个名字，是希望最后能够做到类似shader-toy一样的在线编辑器
-
各种特效分类，分标签，查询
-
sfx.log shader内简易日志输出
-
shader cpu调试
-
shaderfx png导出
因为有了过去的经验积累，大部分的功能都已经在 creator 中实现，当然 bug 也有不少。反正这个坑是巨大的，希望能够一点一点的把它填平。
接下来有段时间要忙，暂时不能更新了，今天这里再开一贴，再开一坑，记录下目前完成的进度状况，以及后面的更新。
希望这个帖子能起到督促自己的作用，慢慢地推进这个项目，希望这次能比上一次走的更远。也算是 2021 的第一个目标。
