SSRShaderFX -- a project I have been currently working on

I have been started to learn all the Shader related stuffs in cocos2d-js again ( may be the Xth time ) and this time I decided to make something that really cool and interesting yet I can learn a lot from.

I have wrote an article about this project and if you are interested , check it here: ShaderFX


Thank for sharing,
Pretty nice, how about performance, how many fps on mobile?
Would you share it as open source? it is interesting to me.

Thats some amazing work! Keep it up!

The performance depends on :

  1. what kind of node you are going to apply the fx on
  2. the amount of the nodes to apply the fx
  3. how many fxs you are going to use at the same time
  4. the complexity of each fxs

so it is hard to give the answer without talking about these preconditions.

And I think I will open source the project when I finished at least 90% of the features.

I have spent the whole day today and had a big progress on componentized the base of ShaderFX and I made a prototype of shaderforge (I have never used it though but I think this is a great target to aim at) like editor for ShaderFX.

BTW. The whole editor is created using cocos2d-js as well so it can run at any platform as well.

1 Like

Yeah, thank you very much for sharing!
The complexity of each fxs, that is what i want to talk about the performance.
Can’t wait for try it.

Some update for this week (hope I can keep this up) :

  • refactor for more detailed componentization
  • better tree system
  • output multi channel support
  • better connection (arc)
  • add grid
  • multi select
  • group move
  • bigger Canvas
  • better panel ui
  • shortcuts system
  • popup menu
  • editor scene export / import / restore

1 Like

Update for this damn busy week :

. more refactor, now all the schema and fxs are just json files
. export schema in editor (json)
. import schema in editor (json)
. export fx in editor (json)
. import fx in real game (json)
. canvas zoom in / zoom out
. test run layer for testing the exported fx
. output filename dialog layer
. more fx component experiment (math, sin, cos, time)
. some bugs fix

Some videos:

Displacement + Math stuff experiment

Fire + Displacement + Export

Import FX

Import Schema


Update for a World Cup week :slight_smile:

. preview for all RGBA output
. collapse / expand uniforms area panel
. fx component info layer
. Slot input / output name configurable
. bigger preview
. messagebox
. toast
. input textfield for all number
. live shader code preview
. refactor for instance id managerment
. BaaS + account system
. BaaS + schema upload / download
. localstorage save / load working schema
. shader + shadershop
. core fx component
. script for json compress + encrpt / decrpt
. html5 distribution
. electron distribution (mac / win)
. bug fix

A lot up progresses this week :slight_smile:

Added a lots of core components and tried to make some fx with these components…

Some videos for this week :

Live preview code:

Plasma ( My PC is 13 inch so the all panels seems to be huddle together):


And you might noticed that when I import a schema and restore the scene, some elements in the scene get offset (for example the menu on the top left conner).

I have raised a thread on this issue :

If you know the reason, please help me to fix this issue :slight_smile:


Very few free time this week, so no progress no the Editor, but I did some experimental trial on :

SSRShaderNode (experimental)
A better ShaderNode based on cc.GLNode, supports:
. custom content size
. all transformation property
. v_texCoord, v_fragmentColor (shader)

FBOSprite (experimental)
Base on cc.Grabber used for screen effect (customize rect supported) (no optimized yet but a solid 60fps without screen recording app running)


Update for this week:

I exported an ARPG game demo I made 4 years ago (cocos2d-html5) to cocos2d-js v3.16

And from now on I will use this game demo as a experimental project to see how I can apply all the effects that I created with SSRShaderEditor to a real game (Blend effect, Shader Effect, Shader Node, FBO)

And of course optimization is another big work.

A Video here:

1 Like

Progress for the pass two weeks :

. SSRShaderFX refactor
. Find solutions for apply all kinds of shaders to all kinds of target in cocos

. sort out all the shaders I collected or made these years (in progress / zoom in to check each fx)


This is getting better and better!!! great job!

here is a link that might be useful when you start experimenting with cocos creator. Would be awesome if you can extend the editor and make this project as a plugin to editor for shaders.

Looking forward for more updates on this, good luck :slight_smile: